/* =================================================================== 
* Stylesheet for Tamujé Project Description Page
* ------------------------------------------------------------------
*
* TOC:
* # SETTINGS
*      ## variables
* # BASE SETUP
* # HEADER
*      ## header content
* # BUTTONS
* # CONTENT SECTIONS
* # INTRO
* # SECTIONS
*      ## section header
*      ## section image
*      ## section content
* # SECTION IMAGES
*      ## loading placeholder
* # QUOTE
* # RESPONSIVE DESIGN
* ------------------------------------------------------------------ */
 
 
/* ===================================================================
* # SETTINGS
*
*
* ------------------------------------------------------------------- */

/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
    --font-1    : "Inter", sans-serif;
    /* monospace
    */
    --font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {
    --primary-color         : #034E4A;
    --secondary-color       : #2E8B57;
    --background-color-1    : #f8f9fa;
    --background-color-2    : #e9ecef;
    --background-color-3    : #ffffff;
    --color-text-dark       : #333;
    --color-text-light      : #555;
    --color-light-white     : #cdc6b9;
}

/* ===================================================================
* # BASE SETUP
*
*
* ------------------------------------------------------------------- */
* {
    margin      : 0;
    padding     : 0;
    box-sizing  : border-box;
}

body {
    font-family : var(--font-1);
    line-height : var(--vspace-1);;
    color       : var(--color-text-dark);
    background  : linear-gradient(135deg, var(--background-color-1) 0%, var(--background-color-2) 100%);
    min-height  : 100vh;
}

.container {
    max-width   : 1200px;
    margin      : 0 auto;
    padding     : 30px 20px;
}

/* ===================================================================
* # HEADER
*
*
* ------------------------------------------------------------------- */
.page-header {
    background      : linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color           : var(--background-color-3);
    padding         : 40px 30px;
    border-radius   : 15px;
    margin-bottom   : 30px;
    box-shadow      : 0 8px 25px rgba(3, 78, 74, 0.3);
    position        : relative;
    overflow        : hidden;
    margin-top      : 10%;
}

.page-header::before {
    content     : '';
    position    : absolute;
    top         : -50%;
    right       : -50%;
    width       : 200%;
    height      : 200%;
    background  : radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation   : float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

/* --------------------------------------------------------------------
 * ## header content
 * -------------------------------------------------------------------- */
.header-content {
    position    : relative;
    z-index     : 2;
    display     : flex;
    align-items : center;
    gap         : 20px;
}

.header-icon {
    font-size   : 60px;
    animation   : pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.header-text h1 {
    font-size       : 32px;
    font-weight     : 700;
    margin-bottom   : 10px;
    color: white;
}

.header-text p {
    font-size   : 18px;
    opacity     : 0.9;
    font-weight : 300;
}

/* ===================================================================
* # BUTTONS
*
*
* ------------------------------------------------------------------- */

.close-btn {
    position        : fixed;
    top             : 20px;
    right           : 20px;
    background      : var(--primary-color);
    color           : var(--background-color-3);
    border          : none;
    border-radius   : 25px;
    cursor          : pointer;
    font-size       : 13px;
    font-weight     : 600;
    transition      : all 0.3s ease;
    box-shadow      : 0 4px 15px rgba(3, 78, 74, 0.4);
    z-index         : 1000;
}

.close-btn:hover {
    background  : var(--secondary-color);
    transform   : translateY(-2px);
    box-shadow  : 0 6px 20px rgba(3, 78, 74, 0.5);
}

/* ===================================================================
* # CONTENT SECTIONS
*
*
* ------------------------------------------------------------------- */
.content-section {
    background      : var(--background-color-3);
    padding         : 30px;
    border-radius   : 15px;
    margin-bottom   : 25px;
    box-shadow      : 0 5px 15px rgba(0, 0, 0, 0.1);
    transition      : transform 0.3s ease;
}

.content-section:hover {
    transform   : translateY(-3px);
}

/* ===================================================================
* # INTRO
*
*
* ------------------------------------------------------------------- */
.intro-text {
    padding     : 25px;
    position    : relative;
}

.intro-text::before {
    font-size   : 60px;
    color       : rgba(46, 139, 87, 0.3);
    position    : absolute;
    top         : -10px;
    left        : 15px;
    font-family : serif;
}

.intro-text p {
    font-size   : inherit;
    font-weight : 400;
    margin      : 10px 0;
    position    : relative;
    z-index     : 2;
}

/* ===================================================================
* # FEATURED IMAGE
*
* ------------------------------------------------------------------- */
.featured-img {
    margin: 20px 0 40px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    height: 400px;
}

.featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}


/* ===================================================================
* # SECTIONS
*
*
* ------------------------------------------------------------------- */
.section-grid {
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    gap                     : 30px;
    margin                  : 40px 0;
}

.info-card {
    background      : var(--background-color-3);
    border-radius   : 15px;
    overflow        : hidden;
    box-shadow      : 0 8px 25px rgba(0, 0, 0, 0.1);
    transition      : all 0.3s ease;
    border          : 1px solid rgba(46, 139, 87, 0.1);
}

.info-card:hover {
    transform       : translateY(-8px);
    box-shadow      : 0 15px 35px rgba(0, 0, 0, 0.15);
    border-color    : rgba(46, 139, 87, 0.3);
}

/* --------------------------------------------------------------------
 * ## section header
 * -------------------------------------------------------------------- */
.section-header {
    padding         : 25px 25px 20px;
    background      : linear-gradient(135deg, rgba(46, 139, 87, 0.05) 0%, rgba(3, 78, 74, 0.05) 100%);
    border-bottom   : 1px solid rgba(46, 139, 87, 0.1);
}

.section-title {
    color           : var(--primary-color);
    font-size       : 24px;
    font-weight     : 700;
    margin          : 0;
    text-align      : center;
    position        : relative;
    margin-bottom   : 15px;
}

.section-title::after {
    content         : '';
    position        : absolute;
    bottom          : -10px;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 40px;
    height          : 3px;
    background      : linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius   : 2px;
}

/* --------------------------------------------------------------------
 * ## section image
 * -------------------------------------------------------------------- */
.section-image {
    position        : relative;
    width           : 100%;
    height          : 250px;
    background      : #f0f0f0;
    overflow        : hidden;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.section-image img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    transition      : all 0.4s ease;
    opacity         : 1;
}

.section-image img.loaded {
    opacity : 1;
}

.section-image:hover img {
    transform   : scale(1.1);
}

.image-caption {
    position    : absolute;
    bottom      : 0;
    left        : 0;
    right       : 0;
    background  : linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color       : var(--background-color-3);
    padding     : 20px 15px 15px;
    font-size   : 14px;
    font-weight : 500;
    text-align  : center;
    transform   : translateY(100%);
    transition  : transform 0.3s ease;
}

.section-image:hover .image-caption {
    transform   : translateY(0);
}

/* ===================================================================
* # CONTENT BLOCK
*
* ------------------------------------------------------------------- */
.content-blocks {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 40px 0;
}

.content-block {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    align-items: center;
}

.content-block.reverse {
    grid-template-columns: 1fr 400px;
}

/* --------------------------------------------------------------------
 * ## block image
 * -------------------------------------------------------------------- */
.block-image {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    height: 280px;
    transition: all 0.3s ease;
}

.block-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.block-image:hover img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------
 * ## block content
 * -------------------------------------------------------------------- */
.block-content {
    padding: 0 20px;
}

.block-content h2 {
    color: var(--primary-color);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 10px;
}

.block-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.block-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-light);
    margin-bottom: 15px;
}

/* --------------------------------------------------------------------
 * ## section content
 * -------------------------------------------------------------------- */
.section-content {
    display : block;
}

.section-text {
    padding     : 25px;
    font-size   : 16px;
    color       : var(--color-text-light);
    line-height : 1.7;
}

.section-text p {
    margin-bottom : 15px;
}

.section-text p:last-child {
    margin-bottom : 0;
}

.section-text strong {
    color       : var(--primary-color);
    font-weight : 600;
}

.section-text ul {
    margin      : 15px 0;
    padding-left: 20px;
}

.section-text li {
    margin-bottom   : 8px;
    position        : relative;
}

.section-text li::marker {
    color : var(--secondary-color);
}


/* ===================================================================
* # QUOTE
*
*
* ------------------------------------------------------------------- */
.final-quote {
    background      : linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color           : var(--background-color-3);
    padding         : 40px 30px;
    border-radius   : 10px;
    text-align      : center;
    margin-top      : 40px;
    position        : relative;
    overflow        : hidden;
    box-shadow      : 0 8px 25px rgba(3, 78, 74, 0.3);
}

.final-quote p {
    font-size   : 22px;
    font-style  : italic;
    font-weight : 500;
    margin      : 0;
    position    : relative;
    z-index     : 2;
    line-height : 1.5;
}

/* ===================================================================
* # RESPONSIVE DESIGN
*
*
* ------------------------------------------------------------------- */

/* Tablets grandes (1024px y menos) */
@media (max-width: 1024px) {
    .container {
        max-width : 900px;
        padding   : 25px 15px;
    }
    
    .section-grid {
        gap : 25px;
    }
    
    .section-image {
        height : 200px;
    }
    
    .section-title {
        font-size : 22px;
    }

    .content-block,
    .content-block.reverse {
        grid-template-columns: 1fr 350px;
    }
    
    .featured-img{
        height: 300px;
    }
}

/* Tablets (768px y menos) */
@media (max-width: 768px) {
    .container {
        padding : 20px 15px;
    }
    
    .page-header {
        padding : 30px 20px;
        margin-top: 15%;
    }
    
    .header-content {
        flex-direction  : column;
        text-align      : center;
        gap             : 15px;
    }
    
    .header-text h1 {
        font-size   : 28px;
    }
    
    .header-text p {
        font-size   : 16px;
    }
    
    .section-grid {
        grid-template-columns   : 1fr;
        gap                     : 25px;
    }
    
    .content-section {
        padding : 25px;
    }
    
    .close-btn {
        top         : 15px;
        right       : 15px;
        padding     : 10px 15px;
        font-size   : 12px;
    }
    
    .section-image {
        height : 180px;
    }
    
    .section-title {
        font-size : 20px;
    }
    
    .section-text {
        padding   : 20px;
        font-size : 15px;
    }

    .featured-img {
        height: 250px;
    }
    
    .content-block,
    .content-block.reverse {
        grid-template-columns: 1fr;
    }
    
    .block-image {
        height: 250px;
        order: -1;
    }
    
    .final-quote {
        padding : 30px 20px;
    }
    
    .final-quote p {
        font-size : 18px;
    }
}

/* Móviles (480px y menos) */
@media (max-width: 480px) {
    .container {
        padding : 15px 10px;
    }
    
    .page-header {
        padding : 25px 15px;
        margin-top: 20%;
    }
    
    .header-icon {
        font-size : 45px;
    }
    
    .header-text h1 {
        font-size : 24px;
    }
    
    .header-text p {
        font-size : 14px;
    }
    
    .content-section {
        padding : 20px;
    }
    
    .intro-text {
        padding : 20px;
    }
    
    .intro-text p {
        font-size : 16px;
    }
    
    .section-grid {
        gap : 20px;
    }
    
    .section-header {
        padding : 20px 20px 15px;
    }
    
    .section-title {
        font-size : 18px;
    }
    
    .section-image {
        height : 160px;
    }
    
    .section-text {
        padding   : 15px;
        font-size : 14px;
    }
    
    .section-text ul {
        padding-left : 15px;
    }

    .featured-img {
        height: 200px;
    }
    
    .block-image {
        height: 200px;
    }
    
    .block-content h2 {
        font-size: 20px;
    }
    
    .final-quote {
        padding : 25px 15px;
    }
    
    .final-quote p {
        font-size : 16px;
    }
    
    .close-btn {
        top       : 10px;
        right     : 10px;
        padding   : 8px 12px;
        font-size : 11px;
    }
}

/* Móviles muy pequeños (320px y menos) */
@media (max-width: 320px) {
    .section-image {
        height : 140px;
    }
    
    .section-title {
        font-size : 16px;
    }
    
    .section-text {
        font-size : 13px;
    }
    
    .final-quote p {
        font-size : 14px;
    }
}