/*======================================================
ROOT VARIABLES
======================================================*/

:root {

    /* ===== PALETA OFICIAL ===== */

    --color-gold: #D4AF37;
    --color-gold-light: #E7C968;
    --color-gold-soft: #F4ECD0;

    --color-rose: #E89BB0;
    --color-rose-soft: #F8DCE5;

    --color-white: #FFFFFF;
    --color-ivory: #FAF8F5;
    --color-sand: #F4F1EC;

    --color-text: #2D2B29;
    --color-text-light: #66615B;
    --color-heading: #1E1D1B;

    --color-border: #E6E1DA;
    --color-border-soft: #F0ECE7;

    --color-dark: #191919;

    /* ===== TIPOGRAFÍA ===== */

    --font-heading: "Cormorant Garamond", serif;
    --font-body: "Inter", sans-serif;

    /* ===== TAMAÑOS ===== */

    --fs-display: clamp(3.5rem, 6vw, 6rem);

    --fs-h1: clamp(3rem, 5vw, 4.8rem);
    --fs-h2: clamp(2.4rem, 4vw, 3.6rem);
    --fs-h3: clamp(1.6rem, 2vw, 2rem);
    --fs-h4: 1.35rem;

    --fs-body-lg: 1.25rem;
    --fs-body: 1.05rem;
    --fs-small: .92rem;

    /* ===== ALTURA DE LÍNEA ===== */

    --lh-heading: 1.08;
    --lh-body: 1.9;

    /* ===== ESPACIADOS ===== */

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;
    --space-2xl: 7rem;
    --space-3xl: 9rem;

    /* ===== RADIOS ===== */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-xl: 42px;

    /* ===== SOMBRAS ===== */

    --shadow-soft: 0 10px 35px rgba(0,0,0,.05);

    --shadow-medium: 0 18px 60px rgba(0,0,0,.08);

    /* ===== TRANSICIONES ===== */

    --transition: .35s ease;

    --transition-slow: .6s ease;

    /* ===== LAYOUT ===== */

    --container-width: 1320px;

}


/*======================================================
RESET
======================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    scroll-padding-top:110px;

}

body{

    overflow-x:hidden;

    background:var(--color-white);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:var(--fs-body);

    line-height:var(--lh-body);

    font-weight:400;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/*======================================================
SELECCIÓN
======================================================*/

::selection{

    background:rgba(212,175,55,.22);

    color:var(--color-heading);

}


/*======================================================
IMÁGENES
======================================================*/

img{

    display:block;

    width:100%;

    max-width:100%;

    height:auto;

}

figure{

    margin:0;

}


/*======================================================
ENLACES
======================================================*/

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    text-decoration:none;

}


/*======================================================
LISTAS
======================================================*/

ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}


/*======================================================
TIPOGRAFÍA
======================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 1.5rem;

    color:var(--color-heading);

    font-family:var(--font-heading);

    line-height:var(--lh-heading);

    font-weight:500;

    letter-spacing:-0.02em;

}

h1{

    font-size:var(--fs-h1);

}

h2{

    font-size:var(--fs-h2);

}

h3{

    font-size:var(--fs-h3);

}

h4{

    font-size:var(--fs-h4);

}

p{

    margin:0 0 1.6rem;

    color:var(--color-text-light);

}

.lead{

    font-size:var(--fs-body-lg);

    line-height:1.85;

    color:var(--color-text);

}

strong{

    color:var(--color-heading);

    font-weight:600;

}

blockquote{

    margin:0;

    font-family:var(--font-heading);

}


/*======================================================
CONTENEDOR
======================================================*/

.container{

    max-width:var(--container-width);

}


/*======================================================
SISTEMA DE SECCIONES
======================================================*/

.section{

    position:relative;

    padding:var(--space-3xl) 0;

}

.section-light{

    background:var(--color-ivory);

}

.section-soft{

    background:var(--color-sand);

}

.section-white{

    background:var(--color-white);

}

.section-editorial{

    background:#FCFBF8;

}

.section-editorial-light{

    background:#FDFCFB;

}

.section-gold{

    background:linear-gradient(
        180deg,
        #FBF8EF 0%,
        #F7F1DF 100%
    );

}

.section-contact{

    background:var(--color-white);

}

.section-label{

    display:inline-block;

    margin-bottom:1.5rem;

    color:var(--color-gold);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

}

.section-intro{

    max-width:760px;

    margin:0 auto 2rem;

    font-size:1.2rem;

    color:var(--color-text);

}

.section-closing{

    max-width:720px;

    margin:0 auto 2.5rem;

    font-size:1.2rem;

    color:var(--color-text);

}


/*======================================================
UTILIDADES
======================================================*/

.text-gold{

    color:var(--color-gold);

}

.bg-soft{

    background:var(--color-sand);

}

.border-soft{

    border:1px solid var(--color-border);

}

.shadow-soft{

    box-shadow:var(--shadow-soft);

}

.rounded-large{

    border-radius:var(--radius-xl);

}

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}


/*======================================================
BOTONES
======================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    min-height:58px;

    padding:0 2rem;

    border-radius:999px;

    border:none;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.03em;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:focus{

    box-shadow:none;

}

.btn-gold{

    background:var(--color-gold);

    color:var(--color-white);

    box-shadow:0 12px 30px rgba(212,175,55,.25);

}

.btn-gold:hover{

    background:var(--color-gold-light);

    color:var(--color-white);

    box-shadow:0 18px 40px rgba(212,175,55,.32);

}

.btn-outline{

    background:transparent;

    border:1px solid var(--color-border);

    color:var(--color-heading);

}

.btn-outline:hover{

    background:var(--color-heading);

    color:var(--color-white);

    border-color:var(--color-heading);

}

.btn-dark{

    background:var(--color-dark);

    color:var(--color-white);

}

.btn-dark:hover{

    background:#2B2B2B;

    color:var(--color-white);

}

.btn-lg{

    min-height:64px;

    padding:0 2.6rem;

}


/*======================================================
RESPONSIVE FOUNDATION
======================================================*/

@media (max-width:991.98px){

    .section{

        padding:6rem 0;

    }

    .section-intro{

        font-size:1.08rem;

    }

}

@media (max-width:767.98px){

    body{

        font-size:1rem;

    }

    .section{

        padding:5rem 0;

    }

    .lead{

        font-size:1.1rem;

    }

    .btn{

        width:100%;

    }

}
/*======================================================
HEADER
======================================================*/

header{

    position:relative;

    z-index:1000;

}


/*======================================================
NAVBAR
======================================================*/

.navbar{

    padding:1.25rem 0;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(230,225,218,.45);

    transition:
        background .4s ease,
        padding .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}

.navbar.scrolled{

    padding:.85rem 0;

    background:rgba(255,255,255,.94);

    border-bottom:1px solid rgba(230,225,218,.85);

    box-shadow:0 10px 40px rgba(0,0,0,.05);

}


/*======================================================
LOGOTIPO
======================================================*/

.navbar-brand{

    display:flex;

    align-items:center;

    padding:0;

    margin:0;

}

.navbar-brand img{

    width:auto;

    height:58px;

    transition:
        transform .35s ease,
        opacity .35s ease,
        height .35s ease;

}

.navbar-brand:hover img{

    transform:scale(1.02);

}

.navbar.scrolled .navbar-brand img{

    height:50px;

}


/*======================================================
NAVEGACIÓN
======================================================*/

.navbar-nav{

    gap:.5rem;

}

.nav-item{

    display:flex;

    align-items:center;

}

.nav-link{

    position:relative;

    padding:.75rem 1rem !important;

    color:var(--color-heading);

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.02em;

    transition:
        color .3s ease,
        opacity .3s ease;

}

.nav-link:hover{

    color:var(--color-gold);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:1rem;

    right:1rem;

    bottom:.35rem;

    height:1px;

    background:var(--color-gold);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .35s ease;

}

.nav-link:hover::after,

.nav-link.active::after{

    transform:scaleX(1);

}

.nav-link.active{

    color:var(--color-gold);

}


/*======================================================
BOTÓN CTA NAVBAR
======================================================*/

.navbar .btn{

    min-height:50px;

    padding:0 1.7rem;

    font-size:.9rem;

    white-space:nowrap;

}


/*======================================================
BOTÓN HAMBURGUESA
======================================================*/

.navbar-toggler{

    padding:.45rem;

    border:none;

    border-radius:12px;

    box-shadow:none !important;

}

.navbar-toggler:focus{

    box-shadow:none;

}

.navbar-toggler-icon{

    width:1.6rem;

    height:1.6rem;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%232D2B29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}


/*======================================================
COLLAPSE
======================================================*/

.navbar-collapse{

    transition:all .35s ease;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .navbar{

        padding:1rem 0;

    }

    .navbar-collapse{

        margin-top:1rem;

        padding:1.5rem;

        background:rgba(255,255,255,.98);

        border:1px solid var(--color-border);

        border-radius:20px;

        box-shadow:var(--shadow-soft);

    }

    .navbar-nav{

        gap:.35rem;

    }

    .nav-item{

        width:100%;

    }

    .nav-link{

        width:100%;

        padding:.9rem 0 !important;

    }

    .nav-link::after{

        left:0;

        right:auto;

        width:36px;

        bottom:.4rem;

    }

    .navbar .btn{

        width:100%;

        margin-top:1rem;

    }

}

@media (max-width:767.98px){

    .navbar-brand img{

        height:50px;

    }

    .navbar.scrolled .navbar-brand img{

        height:46px;

    }

}
/*======================================================
HERO
======================================================*/

.hero-section{

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    min-height:100vh;

    padding:10rem 0 7rem;

    background:
        linear-gradient(
            180deg,
            #FCFBF8 0%,
            #F7F3ED 100%
        );

}


/*======================================================
OVERLAY
======================================================*/

.hero-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(212,175,55,.10),
            transparent 34%
        ),

        radial-gradient(
            circle at 12% 82%,
            rgba(232,155,176,.08),
            transparent 36%
        );

}


/*======================================================
CONTENIDO
======================================================*/

.hero-section .container{

    position:relative;

    z-index:2;

}

.hero-section .row{

    position:relative;

}


/*======================================================
EYEBROW
======================================================*/

.hero-section .eyebrow{

    display:inline-flex;

    align-items:center;

    margin-bottom:2rem;

    color:var(--color-gold);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.30em;

    text-transform:uppercase;

}

.hero-section .eyebrow::before{

    content:"";

    width:54px;

    height:1px;

    margin-right:1rem;

    background:var(--color-gold);

}


/*======================================================
TÍTULO
======================================================*/

.hero-section h1{

    max-width:720px;

    margin-bottom:2rem;

    color:var(--color-heading);

    font-size:var(--fs-display);

    line-height:1.02;

    letter-spacing:-.05em;

}

.hero-section h1 span{

    display:block;

    margin-top:.5rem;

    color:var(--color-gold);

}


/*======================================================
TEXTOS
======================================================*/

.hero-section .lead{

    max-width:660px;

    margin-bottom:2rem;

}

.hero-section p:not(.lead){

    max-width:640px;

}


/*======================================================
BOTONES
======================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:1rem;

    margin-top:3rem;

}


/*======================================================
IMAGEN
======================================================*/

.hero-image{

    position:relative;

    max-width:560px;

    margin:0 auto;

}

.hero-image::before{

    content:"";

    position:absolute;

    inset:-22px;

    border:1px solid rgba(212,175,55,.25);

    border-radius:38px;

    z-index:-1;

}

.hero-image img{

    border-radius:30px;

    box-shadow:var(--shadow-medium);

    transition:
        transform .7s ease,
        box-shadow .7s ease;

}

.hero-image:hover img{

    transform:translateY(-6px);

    box-shadow:
        0 28px 70px rgba(0,0,0,.12);

}


/*======================================================
FIGCAPTION
======================================================*/

.hero-image figcaption{

    max-width:460px;

    margin:2rem auto 0;

    color:var(--color-text-light);

    font-size:.95rem;

    font-style:italic;

    text-align:center;

    line-height:1.8;

}


/*======================================================
SCROLL INDICATOR
======================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:2.75rem;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:flex-start;

    width:28px;

    height:54px;

    border:1px solid rgba(212,175,55,.45);

    border-radius:40px;

}

.scroll-indicator span{

    display:block;

    width:4px;

    height:10px;

    margin-top:10px;

    border-radius:999px;

    background:var(--color-gold);

    animation:heroScroll 2.4s infinite;

}


/*======================================================
ANIMACIONES
======================================================*/

@keyframes heroScroll{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    25%{

        opacity:1;

    }

    70%{

        opacity:1;

        transform:translateY(18px);

    }

    100%{

        opacity:0;

        transform:translateY(22px);

    }

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .hero-section{

        min-height:auto;

        padding:9rem 0 5rem;

        text-align:center;

    }

    .hero-section h1{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-section .lead,

    .hero-section p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

        margin-bottom:4rem;

    }

    .hero-image{

        max-width:520px;

    }

}

@media (max-width:767.98px){

    .hero-section{

        padding:8rem 0 4.5rem;

    }

    .hero-section .eyebrow{

        justify-content:center;

        letter-spacing:.22em;

    }

    .hero-section .eyebrow::before{

        display:none;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-image{

        max-width:100%;

    }

    .hero-image::before{

        inset:-12px;

        border-radius:24px;

    }

    .scroll-indicator{

        display:none;

    }

}/*======================================================
SECCIONES EDITORIALES BASE
KINTSUGI · MÉTODO · ESTILOS COMPARTIDOS
======================================================*/


/*======================================================
TÍTULOS Y COMPOSICIÓN
======================================================*/

.section h2{

    max-width:900px;

    margin:0 auto 2rem;

}

.section.text-center h2{

    margin-left:auto;

    margin-right:auto;

}

.section p:last-child{

    margin-bottom:0;

}


/*======================================================
IMÁGENES EDITORIALES
======================================================*/

.editorial-image{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:var(--color-white);

    box-shadow:var(--shadow-soft);

}

.editorial-image::after{

    content:"";

    position:absolute;

    inset:0;

    border:1px solid rgba(212,175,55,.16);

    border-radius:32px;

    pointer-events:none;

}

.editorial-image img{

    transition:
        transform .8s ease,
        filter .8s ease;

}

.editorial-image:hover img{

    transform:scale(1.03);

}


/*======================================================
SECCIÓN KINTSUGI
======================================================*/

#kintsugi{

    overflow:hidden;

}

#kintsugi .row{

    align-items:center;

}

#kintsugi h2{

    margin-bottom:2rem;

}

#kintsugi p{

    max-width:620px;

}

#kintsugi p + p{

    margin-top:-.25rem;

}

#kintsugi .editorial-image{

    max-width:540px;

    margin:0 auto;

}


/*======================================================
SECCIÓN MÉTODO
======================================================*/

#metodo{

    position:relative;

}

#metodo .section-intro{

    margin-bottom:2.5rem;

}


/*======================================================
PILLAR CARDS
======================================================*/

.pillar-card{

    position:relative;

    height:100%;

    padding:3rem 2.5rem;

    background:var(--color-white);

    border:1px solid var(--color-border-soft);

    border-radius:28px;

    box-shadow:var(--shadow-soft);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}

.pillar-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.28);

    box-shadow:var(--shadow-medium);

}

.pillar-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:58px;

    margin-bottom:2rem;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    color:var(--color-gold);

    font-family:var(--font-heading);

    font-size:1.35rem;

    font-weight:600;

}

.pillar-card h3{

    margin-bottom:1.2rem;

}

.pillar-card p{

    margin-bottom:0;

}


/*======================================================
EDITORIAL HIGHLIGHT
======================================================*/

.editorial-highlight{

    position:relative;

    padding-left:2rem;

    margin:3rem 0;

    color:var(--color-heading);

    font-family:var(--font-heading);

    font-size:clamp(1.9rem,3vw,2.6rem);

    line-height:1.3;

}

.editorial-highlight::before{

    content:"";

    position:absolute;

    left:0;

    top:.3rem;

    bottom:.3rem;

    width:2px;

    background:var(--color-gold);

}


/*======================================================
TRANSICIONES
======================================================*/

.section img{

    will-change:transform;

}

.section article{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    #kintsugi{

        text-align:center;

    }

    #kintsugi p{

        margin-left:auto;

        margin-right:auto;

    }

    #kintsugi .editorial-image{

        margin-bottom:3rem;

    }

    .pillar-card{

        padding:2.5rem 2rem;

        text-align:center;

    }

    .editorial-highlight{

        padding-left:0;

        text-align:center;

    }

    .editorial-highlight::before{

        position:relative;

        display:block;

        width:64px;

        height:2px;

        margin:0 auto 1.5rem;

    }

}

@media (max-width:767.98px){

    .editorial-image{

        border-radius:24px;

    }

    .editorial-image::after{

        border-radius:24px;

    }

    .pillar-card{

        padding:2rem 1.75rem;

    }

    .pillar-number{

        margin-left:auto;

        margin-right:auto;

    }

}
/*======================================================
TIMELINE
CINCO ETAPAS DE RECONSTRUCCIÓN
======================================================*/

#etapas{

    position:relative;

    overflow:hidden;

}

#etapas .section-intro{

    margin-bottom:4rem;

}


/*======================================================
CONTENEDOR
======================================================*/

.timeline{

    position:relative;

    max-width:960px;

    margin:0 auto;

    padding:2rem 0;

}


/*======================================================
LÍNEA CENTRAL
======================================================*/

.timeline::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:32px;

    width:1px;

    background:linear-gradient(
        to bottom,
        rgba(212,175,55,.18),
        rgba(212,175,55,.90),
        rgba(212,175,55,.18)
    );

}


/*======================================================
ITEM
======================================================*/

.timeline-item{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:2rem;

    padding:0 0 4rem;

}

.timeline-item:last-child{

    padding-bottom:0;

}


/*======================================================
MARCADOR
======================================================*/

.timeline-marker{

    position:relative;

    z-index:2;

    flex:0 0 64px;

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--color-white);

    border:2px solid rgba(212,175,55,.65);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.08);

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.timeline-item:hover .timeline-marker{

    transform:scale(1.08);

    background:rgba(212,175,55,.08);

    border-color:var(--color-gold);

    box-shadow:
        0 0 0 10px rgba(212,175,55,.12);

}


/*======================================================
CONTENIDO
======================================================*/

.timeline-content{

    flex:1;

    padding:2.25rem 2.5rem;

    background:var(--color-white);

    border:1px solid var(--color-border-soft);

    border-radius:28px;

    box-shadow:var(--shadow-soft);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}

.timeline-item:hover .timeline-content{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.25);

    box-shadow:var(--shadow-medium);

}


/*======================================================
FASE
======================================================*/

.timeline-content span{

    display:inline-block;

    margin-bottom:1rem;

    color:var(--color-gold);

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

}

.timeline-content h3{

    margin-bottom:1.2rem;

}

.timeline-content p{

    margin-bottom:0;

}


/*======================================================
REVEAL
======================================================*/

.timeline-item{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .timeline{

        max-width:760px;

    }

    .timeline-content{

        padding:2rem;

    }

}

@media (max-width:767.98px){

    .timeline{

        padding-left:.25rem;

    }

    .timeline::before{

        left:20px;

    }

    .timeline-item{

        gap:1.25rem;

        padding-bottom:2.5rem;

    }

    .timeline-marker{

        flex:0 0 40px;

        width:40px;

        height:40px;

        box-shadow:
            0 0 0 6px rgba(212,175,55,.08);

    }

    .timeline-content{

        padding:1.6rem;

        border-radius:22px;

    }

    .timeline-content span{

        letter-spacing:.2em;

    }

}
/*======================================================
LAS 7 GRIETAS INVISIBLES
======================================================*/

#grietas{

    position:relative;

    overflow:hidden;

}

#grietas .section-intro{

    margin-bottom:3.5rem;

}


/*======================================================
IMAGEN EDITORIAL
======================================================*/

#grietas .editorial-image{

    max-width:980px;

    margin:0 auto;

}

#grietas .editorial-image img{

    border-radius:32px;

}


/*======================================================
GRID
======================================================*/

#grietas .row.g-4{

    margin-top:1rem;

    justify-content:center;

}


/*======================================================
CRACK CARD
======================================================*/

.crack-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    padding:2.6rem;

    background:var(--color-white);

    border:1px solid var(--color-border-soft);

    border-radius:28px;

    box-shadow:var(--shadow-soft);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        background .45s ease;

}

.crack-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.30);

    box-shadow:var(--shadow-medium);

}


/*======================================================
NUMERACIÓN
======================================================*/

.crack-card > span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:74px;

    height:34px;

    margin-bottom:1.6rem;

    border-radius:999px;

    background:rgba(212,175,55,.10);

    color:var(--color-gold);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

}


/*======================================================
TÍTULO
======================================================*/

.crack-card h3{

    margin-bottom:1.2rem;

    font-size:2rem;

    line-height:1.18;

}


/*======================================================
TEXTO
======================================================*/

.crack-card p{

    margin-bottom:0;

    color:var(--color-text-light);

}


/*======================================================
MICRODETALLE
======================================================*/

.crack-card::after{

    content:"";

    position:absolute;

    left:2.6rem;

    bottom:0;

    width:0;

    height:2px;

    background:var(--color-gold);

    transition:width .45s ease;

}

.crack-card:hover::after{

    width:96px;

}


/*======================================================
TARJETA 07 DESTACADA
======================================================*/

#grietas .row.g-4 > div:last-child{

    width:100%;

}

#grietas .row.g-4 > div:last-child .crack-card{

    background:linear-gradient(
        180deg,
        #FFFEFC 0%,
        #FBF7EC 100%
    );

    border:1px solid rgba(212,175,55,.35);

}

#grietas .row.g-4 > div:last-child .crack-card > span{

    background:var(--color-gold);

    color:var(--color-white);

}

#grietas .row.g-4 > div:last-child .crack-card::after{

    width:120px;

}

#grietas .row.g-4 > div:last-child .crack-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 24px 70px rgba(0,0,0,.10);

}


/*======================================================
CIERRE
======================================================*/

#grietas .section-closing{

    max-width:760px;

    margin-bottom:2.5rem;

    color:var(--color-heading);

    font-family:var(--font-heading);

    font-size:clamp(1.8rem,3vw,2.4rem);

    line-height:1.35;

}


/*======================================================
BOTÓN
======================================================*/

#grietas .btn{

    min-width:320px;

}


/*======================================================
ANIMACIÓN
======================================================*/

.crack-card{

    will-change:transform;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (min-width:1200px){

    /*
        Distribución:

        01 02
        03 04
        05 06
           07
    */

    #grietas .col-xl-4{

        flex:0 0 50%;

        max-width:50%;

    }

    #grietas .row.g-4 > div:last-child{

        flex:0 0 66.666667%;

        max-width:66.666667%;

    }

}

@media (min-width:768px) and (max-width:1199.98px){

    #grietas .row.g-4 > div:last-child{

        flex:0 0 50%;

        max-width:50%;

    }

}

@media (max-width:991.98px){

    .crack-card{

        padding:2.2rem;

    }

    .crack-card h3{

        font-size:1.75rem;

    }

    #grietas .btn{

        min-width:auto;

    }

}

@media (max-width:767.98px){

    #grietas .editorial-image img{

        border-radius:24px;

    }

    .crack-card{

        padding:2rem 1.75rem;

        border-radius:22px;

    }

    .crack-card > span{

        width:68px;

        height:32px;

        margin-bottom:1.25rem;

    }

    .crack-card h3{

        font-size:1.55rem;

    }

    .crack-card::after{

        left:1.75rem;

    }

    #grietas .section-closing{

        font-size:1.8rem;

    }

    #grietas .col-xl-4,

    #grietas .row.g-4 > div:last-child{

        flex:0 0 100%;

        max-width:100%;

    }

}/*======================================================
SOBRE LA DRA. LAURA FERREYRA
======================================================*/

#laura{

    position:relative;

    overflow:hidden;

}

#laura .row{

    align-items:center;

}


/*======================================================
RETRATO
======================================================*/

.portrait{

    position:relative;

    max-width:520px;

    margin:0 auto;

}

.portrait::before{

    content:"";

    position:absolute;

    inset:-20px;

    border:1px solid rgba(212,175,55,.22);

    border-radius:36px;

    z-index:-1;

}

.portrait img{

    border-radius:30px;

    box-shadow:var(--shadow-medium);

    transition:
        transform .7s ease,
        box-shadow .7s ease;

}

.portrait:hover img{

    transform:translateY(-8px);

    box-shadow:
        0 28px 72px rgba(0,0,0,.12);

}


/*======================================================
CONTENIDO
======================================================*/

#laura h2{

    margin-bottom:2rem;

}

#laura .lead{

    margin-bottom:2rem;

    color:var(--color-heading);

}

#laura p{

    max-width:720px;

}


/*======================================================
STORY PILLARS
======================================================*/

.story-pillars{

    display:grid;

    gap:1.5rem;

    margin:3rem 0;

}


/*======================================================
ITEM
======================================================*/

.story-item{

    display:flex;

    gap:1.5rem;

    align-items:flex-start;

    padding:2rem;

    background:var(--color-white);

    border:1px solid var(--color-border-soft);

    border-radius:24px;

    box-shadow:var(--shadow-soft);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.story-item:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.25);

    box-shadow:var(--shadow-medium);

}


/*======================================================
NUMERACIÓN
======================================================*/

.story-item>span{

    flex:0 0 58px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    color:var(--color-gold);

    font-family:var(--font-heading);

    font-size:1.35rem;

    font-weight:600;

}


/*======================================================
TEXTOS
======================================================*/

.story-item h3{

    margin-bottom:.75rem;

}

.story-item p{

    margin-bottom:0;

}


/*======================================================
EDITORIAL HIGHLIGHT
======================================================*/

#laura .editorial-highlight{

    margin:3rem 0 2rem;

}


/*======================================================
CTA
======================================================*/

#laura .btn{

    margin-top:.5rem;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    #laura{

        text-align:center;

    }

    .portrait{

        margin-bottom:4rem;

    }

    .story-item{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

}

@media (max-width:767.98px){

    .portrait::before{

        inset:-12px;

        border-radius:24px;

    }

    .portrait img{

        border-radius:24px;

    }

    .story-pillars{

        gap:1.25rem;

    }

    .story-item{

        padding:1.75rem;

        border-radius:20px;

    }

    .story-item>span{

        width:52px;

        height:52px;

        flex-basis:52px;

        font-size:1.2rem;

    }

}
/*======================================================
EDITORIAL QUOTE
======================================================*/

.editorial-quote{

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:8rem 0;

    background:
        linear-gradient(
            180deg,
            #FCFBF8 0%,
            #F8F4ED 100%
        );

}


/*======================================================
FONDO DECORATIVO
======================================================*/

.editorial-quote::before{

    content:"";

    position:absolute;

    top:-140px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            transparent 70%
        );

}

.editorial-quote::after{

    content:"";

    position:absolute;

    left:-140px;

    bottom:-140px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(232,155,176,.08),
            transparent 72%
        );

}


/*======================================================
CONTENIDO
======================================================*/

.editorial-quote .container{

    position:relative;

    z-index:2;

}

.editorial-quote .section-label{

    margin-bottom:2rem;

}


/*======================================================
CITA
======================================================*/

.editorial-quote blockquote{

    max-width:900px;

    margin:0 auto 1.5rem;

    color:var(--color-heading);

    font-family:var(--font-heading);

    font-size:clamp(3rem,6vw,5.4rem);

    font-weight:500;

    line-height:1.08;

    letter-spacing:-.03em;

}

.editorial-quote p{

    margin-bottom:0;

}


/*======================================================
VERSIÓN SIMPLE
======================================================*/

.editorial-quote blockquote + p:not(.quote-highlight){

    max-width:760px;

    margin:0 auto;

    color:var(--color-text);

    font-family:var(--font-heading);

    font-size:clamp(1.8rem,3vw,2.6rem);

    line-height:1.35;

}


/*======================================================
VERSIÓN COMPLETA
======================================================*/

.quote-highlight{

    margin:0 auto;

    color:var(--color-gold);

    font-family:var(--font-heading);

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.2;

}

.quote-divider{

    width:96px;

    height:2px;

    margin:2.5rem auto;

    background:var(--color-gold);

    opacity:.75;

}

.quote-text{

    max-width:760px;

    margin:0 auto;

    color:var(--color-text-light);

    font-size:1.15rem;

    line-height:2;

}


/*======================================================
MICROINTERACCIONES
======================================================*/

.editorial-quote blockquote,

.quote-highlight,

.quote-text{

    transition:
        transform .5s ease,
        opacity .5s ease;

}

.editorial-quote:hover blockquote{

    transform:translateY(-2px);

}

.editorial-quote:hover .quote-highlight{

    transform:translateY(-2px);

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .editorial-quote{

        padding:7rem 0;

    }

}

@media (max-width:767.98px){

    .editorial-quote{

        padding:5.5rem 0;

    }

    .quote-divider{

        width:72px;

        margin:2rem auto;

    }

    .quote-text{

        font-size:1.02rem;

    }

}
/*======================================================
PORTAFOLIO OFICIAL DE CONFERENCIAS
======================================================*/

.conference-section{

    position:relative;

    overflow:hidden;

    background:var(--color-white);

}

.conference-section .section-intro{

    margin-bottom:4rem;

}


/*======================================================
CONFERENCIA INSIGNIA
======================================================*/

.featured-conference{

    margin:5rem 0 6rem;

    padding:3.5rem;

    background:linear-gradient(
        180deg,
        #FCFBF8 0%,
        #F8F5EF 100%
    );

    border:1px solid var(--color-border);

    border-radius:36px;

    box-shadow:var(--shadow-soft);

}

.featured-conference figure{

    overflow:hidden;

    border-radius:28px;

}

.featured-conference figure img{

    transition:
        transform .8s ease;

}

.featured-conference:hover figure img{

    transform:scale(1.03);

}


/*======================================================
TAG
======================================================*/

.conference-tag{

    display:inline-block;

    margin-bottom:1.5rem;

    color:var(--color-gold);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

}

.featured-conference h3{

    margin-bottom:1rem;

}

.featured-conference h4{

    margin-bottom:1.75rem;

    color:var(--color-text);

    font-family:var(--font-heading);

    font-weight:500;

    line-height:1.35;

}

.featured-conference p{

    margin-bottom:2rem;

}


/*======================================================
HIGHLIGHTS
======================================================*/

.conference-highlights{

    display:grid;

    gap:.85rem;

    margin-bottom:2.5rem;

}

.conference-highlights li{

    position:relative;

    padding-left:1.6rem;

    color:var(--color-text);

}

.conference-highlights li::before{

    content:"";

    position:absolute;

    left:0;

    top:.82rem;

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--color-gold);

}


/*======================================================
LISTADO
======================================================*/

.conference-list{

    display:grid;

    gap:1.5rem;

    margin-bottom:5rem;

}

.conference-item{

    display:grid;

    grid-template-columns:80px 1fr auto;

    align-items:center;

    gap:2rem;

    padding:2rem 2.5rem;

    background:var(--color-white);

    border:1px solid var(--color-border-soft);

    border-radius:24px;

    box-shadow:var(--shadow-soft);

    cursor:pointer;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}

.conference-item:hover{

    transform:translateY(-5px);

    border-color:rgba(212,175,55,.28);

    box-shadow:var(--shadow-medium);

}

.conference-item>span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    color:var(--color-gold);

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:600;

}

.conference-item h3{

    margin-bottom:.5rem;

}

.conference-item p{

    margin-bottom:0;

}

.conference-open{

    padding:.9rem 1.5rem;

    background:transparent;

    border:1px solid var(--color-border);

    border-radius:999px;

    color:var(--color-heading);

    font-weight:600;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease;

}

.conference-item:hover .conference-open{

    background:var(--color-gold);

    color:var(--color-white);

    border-color:var(--color-gold);

}


/*======================================================
AUDIENCIAS
======================================================*/

.conference-audiences{

    margin-top:2rem;

}

.audience-card{

    height:100%;

    padding:2.5rem;

    background:#FCFBF8;

    border:1px solid var(--color-border-soft);

    border-radius:24px;

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}

.audience-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-soft);

}

.audience-card h4{

    margin-bottom:1rem;

}

.audience-card p{

    margin-bottom:0;

}


/*======================================================
CITA
======================================================*/

.conference-quote{

    max-width:900px;

    margin:5rem auto 0;

    text-align:center;

}

.conference-quote blockquote{

    color:var(--color-heading);

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.3;

}


/*======================================================
DRAWER
======================================================*/

.conference-drawer{

    position:fixed;

    top:0;

    right:-100%;

    width:min(560px,100%);

    height:100vh;

    background:var(--color-white);

    box-shadow:-20px 0 60px rgba(0,0,0,.12);

    z-index:1200;

    overflow-y:auto;

    transition:right .45s ease;

}

.conference-drawer.open{

    right:0;

}

.drawer-content{

    padding:6rem 2.5rem 3rem;

}

.drawer-close{

    position:absolute;

    top:1.5rem;

    right:1.5rem;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#F5F3EF;

    color:var(--color-heading);

    font-size:2rem;

    line-height:1;

    cursor:pointer;

    transition:
        background .35s ease,
        transform .35s ease;

}

.drawer-close:hover{

    background:var(--color-gold);

    color:var(--color-white);

    transform:rotate(90deg);

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .featured-conference{

        padding:2.5rem;

    }

    .conference-item{

        grid-template-columns:64px 1fr;

    }

    .conference-open{

        grid-column:1/-1;

        width:100%;

        margin-top:.5rem;

    }

}

@media (max-width:767.98px){

    .featured-conference{

        padding:2rem;

        border-radius:24px;

    }

    .conference-item{

        grid-template-columns:1fr;

        text-align:center;

        padding:2rem 1.75rem;

    }

    .conference-item>span{

        margin:0 auto;

    }

    .audience-card{

        padding:2rem;

        text-align:center;

    }

    .drawer-content{

        padding:5rem 1.5rem 2rem;

    }

}
/*======================================================
BIBLIOTECA KINTSUGI™
======================================================*/

#biblioteca{

    position:relative;

    overflow:hidden;

    background:#FCFBF9;

}

#biblioteca .section-intro{

    margin-bottom:4rem;

}


/*======================================================
RECURSO DESTACADO
======================================================*/

.featured-resource{

    margin-bottom:5.5rem;

    padding:3.5rem;

    background:var(--color-white);

    border:1px solid var(--color-border);

    border-radius:36px;

    box-shadow:var(--shadow-soft);

}

.featured-resource figure{

    overflow:hidden;

    border-radius:28px;

}

.featured-resource figure img{

    transition:
        transform .8s ease;

}

.featured-resource:hover figure img{

    transform:scale(1.03);

}

.resource-category{

    display:inline-block;

    margin-bottom:1.5rem;

    color:var(--color-gold);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

}

.featured-resource h3{

    margin-bottom:1.5rem;

}

.featured-resource p{

    margin-bottom:2rem;

}


/*======================================================
LIBRARY CARD
======================================================*/

.library-card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:2.75rem;

    background:var(--color-white);

    border:1px solid var(--color-border-soft);

    border-radius:28px;

    box-shadow:var(--shadow-soft);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}

.library-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.25);

    box-shadow:var(--shadow-medium);

}

.library-card>span{

    display:inline-block;

    margin-bottom:1.5rem;

    color:var(--color-gold);

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.24em;

    text-transform:uppercase;

}

.library-card h3{

    margin-bottom:1.2rem;

}

.library-card p{

    margin-bottom:1.75rem;

}


/*======================================================
LISTA
======================================================*/

.library-card ul{

    display:grid;

    gap:.8rem;

    margin-bottom:2rem;

}

.library-card li{

    position:relative;

    padding-left:1.5rem;

    color:var(--color-text);

}

.library-card li::before{

    content:"";

    position:absolute;

    left:0;

    top:.82rem;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-gold);

}


/*======================================================
ENLACE
======================================================*/

.library-card a{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-top:auto;

    color:var(--color-heading);

    font-weight:600;

    transition:
        color .35s ease,
        transform .35s ease;

}

.library-card:hover a{

    color:var(--color-gold);

    transform:translateX(6px);

}


/*======================================================
CIERRE
======================================================*/

#biblioteca .editorial-highlight{

    margin-bottom:2.5rem;

    text-align:center;

}

#biblioteca .editorial-highlight::before{

    left:50%;

    top:auto;

    bottom:100%;

    width:72px;

    height:2px;

    margin-bottom:1.5rem;

    transform:translateX(-50%);

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .featured-resource{

        padding:2.5rem;

    }

    .library-card{

        padding:2.25rem;

    }

}

@media (max-width:767.98px){

    .featured-resource{

        padding:2rem;

        border-radius:24px;

    }

    .featured-resource figure{

        border-radius:20px;

        margin-bottom:2rem;

    }

    .library-card{

        padding:2rem 1.75rem;

        border-radius:22px;

        text-align:center;

    }

    .library-card li{

        padding-left:0;

    }

    .library-card li::before{

        display:none;

    }

    .library-card a{

        justify-content:center;

    }

}
/*======================================================
COMIENZA TU RECONSTRUCCIÓN
======================================================*/

#comenzar{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #FCFAF4 0%,
        #F6F0DD 100%
    );

}

#comenzar .section-intro{

    margin-bottom:4.5rem;

}


/*======================================================
RECONSTRUCTION PATH
======================================================*/

.reconstruction-path{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:1.5rem;

    margin:0 auto;

}


/*======================================================
STEP
======================================================*/

.path-step{

    flex:1;

    position:relative;

    text-align:center;

    padding:2.5rem 2rem;

    background:rgba(255,255,255,.82);

    border:1px solid rgba(212,175,55,.18);

    border-radius:28px;

    backdrop-filter:blur(8px);

    box-shadow:var(--shadow-soft);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;

}

.path-step:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.35);

    box-shadow:var(--shadow-medium);

}


/*======================================================
NUMERACIÓN
======================================================*/

.path-step>span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    margin-bottom:1.5rem;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    color:var(--color-gold);

    font-family:var(--font-heading);

    font-size:1.45rem;

    font-weight:600;

}

.path-step h3{

    margin-bottom:1rem;

}

.path-step p{

    margin-bottom:0;

}


/*======================================================
DIVISOR
======================================================*/

.path-divider{

    flex:0 0 48px;

    align-self:center;

    height:2px;

    background:linear-gradient(
        90deg,
        rgba(212,175,55,.15),
        rgba(212,175,55,.75),
        rgba(212,175,55,.15)
    );

}


/*======================================================
TRANSICIÓN
======================================================*/

#comenzar .editorial-highlight{

    margin:5rem auto 0;

    max-width:920px;

    text-align:center;

}

#comenzar .editorial-highlight::before{

    left:50%;

    top:auto;

    bottom:100%;

    width:80px;

    height:2px;

    margin-bottom:1.5rem;

    transform:translateX(-50%);

}


/*======================================================
NEWSLETTER
======================================================*/

.newsletter-box{

    margin-top:5rem;

    padding:4rem;

    background:var(--color-white);

    border:1px solid rgba(212,175,55,.20);

    border-radius:36px;

    box-shadow:var(--shadow-medium);

    text-align:center;

}

.newsletter-box h3{

    margin-bottom:1rem;

}

.newsletter-box p{

    max-width:620px;

    margin:0 auto 2.5rem;

}


/*======================================================
FORMULARIO
======================================================*/

.newsletter-form{

    max-width:560px;

    margin:0 auto;

}

.newsletter-form .form-control{

    height:60px;

    border:1px solid var(--color-border);

    border-radius:16px;

    background:#FCFBF9;

    color:var(--color-text);

    padding:0 1.25rem;

    font-size:1rem;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

.newsletter-form textarea.form-control{

    min-height:160px;

    padding-top:1rem;

}

.newsletter-form .form-control:focus{

    border-color:rgba(212,175,55,.55);

    background:var(--color-white);

    box-shadow:0 0 0 .2rem rgba(212,175,55,.12);

}

.newsletter-form .btn{

    margin-top:.5rem;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:1199.98px){

    .reconstruction-path{

        flex-wrap:wrap;

    }

    .path-divider{

        display:none;

    }

    .path-step{

        flex:0 0 calc(50% - .75rem);

    }

}

@media (max-width:991.98px){

    .newsletter-box{

        padding:3rem;

    }

}

@media (max-width:767.98px){

    .reconstruction-path{

        flex-direction:column;

    }

    .path-step{

        width:100%;

        flex:auto;

        padding:2rem 1.75rem;

    }

    .newsletter-box{

        margin-top:4rem;

        padding:2rem;

        border-radius:24px;

    }

    .newsletter-form .form-control{

        height:56px;

    }

}
/*======================================================
CONTACTO
======================================================*/

.section-contact{

    position:relative;

    overflow:hidden;

    background:var(--color-white);

}

.section-contact .section-intro{

    margin-bottom:4rem;

}


/*======================================================
OPCIONES
======================================================*/

.contact-option{

    position:relative;

    height:100%;

    padding:2.75rem;

    background:#FCFBF8;

    border:1px solid var(--color-border-soft);

    border-radius:28px;

    cursor:pointer;

    box-shadow:var(--shadow-soft);

    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}

.contact-option:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.30);

    box-shadow:var(--shadow-medium);

}

.contact-option.active{

    background:linear-gradient(
        180deg,
        #FFFEFC 0%,
        #FAF5E8 100%
    );

    border-color:rgba(212,175,55,.45);

}


/*======================================================
NUMERACIÓN
======================================================*/

.option-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    margin-bottom:1.75rem;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    color:var(--color-gold);

    font-family:var(--font-heading);

    font-size:1.4rem;

    font-weight:600;

    transition:
        background .35s ease,
        color .35s ease;

}

.contact-option.active .option-number{

    background:var(--color-gold);

    color:var(--color-white);

}

.contact-option h3{

    margin-bottom:1rem;

}

.contact-option p{

    margin-bottom:0;

}


/*======================================================
PANELES
======================================================*/

.contact-panel{

    padding:4rem;

    background:#FCFBF8;

    border:1px solid var(--color-border);

    border-radius:36px;

    box-shadow:var(--shadow-soft);

}

.contact-panel h3{

    margin-bottom:2rem;

}


/*======================================================
FORMULARIOS
======================================================*/

.contact-panel label{

    display:block;

    margin-bottom:.75rem;

    color:var(--color-heading);

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.02em;

}

.contact-panel .form-control{

    min-height:58px;

    border:1px solid var(--color-border);

    border-radius:16px;

    background:var(--color-white);

    color:var(--color-text);

    padding:0 1.2rem;

    font-size:1rem;

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.contact-panel textarea.form-control{

    min-height:180px;

    padding:1rem 1.2rem;

    resize:vertical;

}

.contact-panel .form-control:focus{

    border-color:rgba(212,175,55,.55);

    box-shadow:0 0 0 .2rem rgba(212,175,55,.12);

    background:#FFFFFF;

}

.contact-panel .btn{

    min-width:260px;

}


/*======================================================
ESTADOS
======================================================*/

.contact-panel{

    opacity:1;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.contact-panel.d-none{

    display:none !important;

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .contact-option{

        padding:2.25rem;

    }

    .contact-panel{

        padding:3rem 2.5rem;

    }

}

@media (max-width:767.98px){

    .contact-option{

        padding:2rem;

        text-align:center;

        border-radius:22px;

    }

    .option-number{

        margin-left:auto;

        margin-right:auto;

    }

    .contact-panel{

        padding:2rem 1.5rem;

        border-radius:24px;

    }

    .contact-panel .btn{

        width:100%;

        min-width:auto;

    }

}
/*======================================================
FOOTER
======================================================*/

.footer{

    position:relative;

    overflow:hidden;

    padding:8rem 0 3rem;

    background:#1E1D1B;

    color:rgba(255,255,255,.82);

}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(212,175,55,.08),
            transparent 32%
        );

    pointer-events:none;

}


/*======================================================
TÍTULOS
======================================================*/

.footer .container{

    position:relative;

    z-index:2;

}

.footer .section-label{

    color:var(--color-gold);

}

.footer-title{

    margin-bottom:.5rem;

    color:var(--color-white);

    font-size:clamp(3rem,5vw,4.8rem);

}

.footer-subtitle{

    margin-bottom:2rem;

    color:var(--color-gold);

    font-size:clamp(1.9rem,3vw,2.7rem);

    font-weight:400;

}

.footer-description{

    max-width:760px;

    margin:0 auto;

    color:rgba(255,255,255,.72);

    font-size:1.12rem;

}


/*======================================================
DIVISOR
======================================================*/

.footer-divider{

    width:100%;

    height:1px;

    margin:5rem 0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.75),
        transparent
    );

}


/*======================================================
COLUMNAS
======================================================*/

.footer h4,

.footer h5{

    margin-bottom:1.5rem;

    color:var(--color-white);

}

.footer h4{

    font-size:2rem;

}

.footer h5{

    font-size:1.2rem;

}

.footer p{

    color:rgba(255,255,255,.72);

}


/*======================================================
NAVEGACIÓN
======================================================*/

.footer-nav{

    display:grid;

    gap:.9rem;

}

.footer-nav a{

    color:rgba(255,255,255,.72);

    transition:
        color .35s ease,
        padding-left .35s ease;

}

.footer-nav a:hover{

    color:var(--color-gold);

    padding-left:.45rem;

}


/*======================================================
COPYRIGHT
======================================================*/

.footer-bottom{

    margin-top:5rem;

    padding-top:2rem;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-bottom p{

    margin-bottom:0;

    font-size:.92rem;

}


/*======================================================
BACK TO TOP
======================================================*/

#backToTop{

    position:fixed;

    right:2rem;

    bottom:2rem;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:var(--color-gold);

    color:var(--color-white);

    font-size:1.2rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    box-shadow:0 14px 35px rgba(212,175,55,.35);

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s ease,
        background .35s ease;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:var(--color-gold-light);

    transform:translateY(-4px);

}


/*======================================================
LOADER
======================================================*/

#pageLoader{

    position:fixed;

    inset:0;

    display:flex;

    align-items:flex-start;

    justify-content:flex-start;

    background:var(--color-white);

    z-index:3000;

    pointer-events:none;

    opacity:1;

    transition:opacity .45s ease;

}

#pageLoader.loaded{

    opacity:0;

}

.loader-line{

    width:0;

    height:3px;

    background:linear-gradient(
        90deg,
        var(--color-gold),
        var(--color-gold-light)
    );

    animation:loaderProgress 1.6s ease forwards;

}

@keyframes loaderProgress{

    0%{

        width:0;

    }

    100%{

        width:100%;

    }

}


/*======================================================
RESPONSIVE
======================================================*/

@media (max-width:991.98px){

    .footer{

        text-align:center;

        padding:6rem 0 3rem;

    }

    .footer-divider{

        margin:4rem 0;

    }

    .footer-nav{

        justify-content:center;

    }

}

@media (max-width:767.98px){

    .footer-title{

        font-size:2.8rem;

    }

    .footer-subtitle{

        font-size:1.8rem;

    }

    .footer-bottom{

        text-align:center;

    }

    .footer-bottom .text-md-end{

        text-align:center !important;

        margin-top:1rem;

    }

    #backToTop{

        right:1.25rem;

        bottom:1.25rem;

        width:48px;

        height:48px;

    }

}