/* ====================================================
   VARIABLES GLOBALES — Paleta AMAN / Hermès
   ==================================================== */

:root {
    --fondo:        #f5f0e8;
    --fondo-alt:    #ede8de;
    --fondo-oliva:  #eceae3;
    --tinta:        #1a1814;
    --tinta-suave:  #4a4640;
    --tinta-fina:   #8a8278;
    --borde:        #d8d0c4;
    --dorado:       #9a7d4a;
    --dorado-suave: rgba(154, 125, 74, 0.25);

    /* Alias compatibilidad */
    --negro:  var(--tinta);
    --beige:  var(--tinta-suave);
    --hueso:  var(--tinta);
    --oliva:  #5a5a48;
    --tierra: #7a6040;
    --gris:   var(--fondo-oliva);
}

/* ====================================================
   RESET Y BASE
   ==================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html { scroll-behavior: smooth; }

body {
    background:              var(--fondo);
    color:                   var(--tinta);
    font-family:             'Lato', sans-serif;
    font-weight:             400;
    line-height:             1.7;
    overflow-x:              hidden;
    overflow-y:              auto;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:          optimizeLegibility;
}

/* ====================================================
   CURSOR PERSONALIZADO
   ==================================================== */

@media (pointer: fine) {

    body { cursor: none; }

    .cursor {
        position:       fixed;
        width:          6px;
        height:         6px;
        background:     var(--dorado);
        border-radius:  50%;
        pointer-events: none;
        z-index:        9999;
        transition:     transform 0.15s ease;
        transform:      translate(-50%, -50%);
    }

    .cursor-ring {
        position:       fixed;
        width:          32px;
        height:         32px;
        border:         1px solid rgba(154, 125, 74, 0.35);
        border-radius:  50%;
        pointer-events: none;
        z-index:        9998;
        transition:     transform 0.4s ease, opacity 0.3s;
        transform:      translate(-50%, -50%);
    }

    .form-submit { cursor: none; }

    /* Restaurar cursor nativo cuando el drawer está abierto */
    body.menu-open .cursor,
    body.menu-open .cursor-ring           { display: none; }
    body.menu-open .nav-mobile-drawer     { cursor: auto; }
    body.menu-open .nav-mobile-drawer a,
    body.menu-open .nav-mobile-drawer button { cursor: pointer; }

}

@media (pointer: coarse) {
    .cursor, .cursor-ring { display: none; }
}

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

nav {
    position:        fixed;
    top:             0;
    width:           100%;
    z-index:         100;
    padding:         2.6rem 5rem;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    background:      var(--fondo);
    border-bottom:   1px solid var(--borde);
    transition:      padding 0.4s;
}

nav.scrolled {
    background:    var(--fondo);
    padding:       1.8rem 5rem;
    border-bottom: 1px solid var(--borde);
}

.nav-logo {
    font-family:     'EB Garamond', serif;
    font-size:       1.3rem;
    font-weight:     400;
    letter-spacing:  0.55em;
    color:           var(--tinta);
    text-decoration: none;
}

.nav-links {
    display:    flex;
    gap:        4.5rem;
    list-style: none;
}

.nav-links a {
    font-size:       0.68rem;
    letter-spacing:  0.3em;
    text-transform:  uppercase;
    color:           var(--tinta-suave);
    text-decoration: none;
    transition:      color 0.3s;
}

.nav-links a:hover,
nav.scrolled .nav-links a:hover { color: var(--dorado); }

.nav-cta {
    font-size:       0.68rem;
    letter-spacing:  0.22em;
    text-transform:  uppercase;
    color:           var(--fondo);
    background:      var(--tinta);
    border:          1px solid var(--tinta);
    padding:         0.75rem 1.8rem;
    text-decoration: none;
    transition:      color 0.35s, background 0.35s, border-color 0.35s;
}

.nav-cta:hover {
    color:        var(--tinta);
    background:   transparent;
    border-color: var(--tinta);
}

/* ── Botón hamburguesa ─────────────────────────────── */

.nav-hamburger {
    display:         none;
    flex-direction:  column;
    gap:             5px;
    background:      transparent;
    border:          none;
    padding:         6px;
    cursor:          pointer;
    z-index:         101;
}

.nav-hamburger span {
    display:          block;
    width:            22px;
    height:           1px;
    background:       var(--tinta);
    transition:       transform 0.35s, opacity 0.35s;
    transform-origin: center;
}

/* ── Backdrop oscuro ───────────────────────────────── */

.nav-backdrop {
    position:       fixed;
    inset:          0;
    z-index:        190;
    background:     rgba(26, 24, 20, 0.3);
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.4s ease;
}

.nav-backdrop.open {
    opacity:        1;
    pointer-events: auto;
}

/* ── Panel lateral (drawer) ────────────────────────── */

.nav-mobile-drawer {
    position:        fixed;
    top:             0;
    right:           0;
    bottom:          0;
    z-index:         200;
    width:           min(340px, 88vw);
    background:      rgba(245, 240, 232, 0.97);
    backdrop-filter: blur(20px);
    border-left:     1px solid var(--borde);
    display:         flex;
    flex-direction:  column;
    padding:         5.5rem 2.8rem 3rem;
    overflow-y:      auto;
    transform:       translateX(110%);
    transition:      transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile-drawer.open {
    transform: translateX(0);
}

.nav-mobile-close {
    position:    absolute;
    top:         1.6rem;
    right:       1.8rem;
    background:  transparent;
    border:      none;
    font-size:   1.6rem;
    color:       var(--tinta-fina);
    line-height: 1;
    cursor:      pointer;
    transition:  color 0.3s;
}

.nav-mobile-close:hover { color: var(--dorado); }

.nav-mobile-links {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            2.4rem;
    margin-bottom:  3.5rem;
}

.nav-mobile-links a {
    font-family:     'EB Garamond', serif;
    font-size:       2rem;
    font-weight:     300;
    letter-spacing:  0.08em;
    color:           var(--tinta);
    text-decoration: none;
    transition:      color 0.3s;
}

.nav-mobile-links a:hover { color: var(--dorado); }

.nav-mobile-cta {
    font-size:       0.72rem;
    letter-spacing:  0.28em;
    text-transform:  uppercase;
    color:           var(--tinta);
    border:          1px solid var(--borde);
    padding:         1rem 2.4rem;
    text-decoration: none;
    transition:      color 0.35s, border-color 0.35s;
    margin-bottom:   1.5rem;
    align-self:      flex-start;
}

.nav-mobile-cta:hover {
    color:        var(--dorado);
    border-color: var(--dorado);
}

.nav-mobile-sub {
    font-size:      0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
}

/* ====================================================
   SECCIÓN HERO — #inicio
   ==================================================== */

#inicio {
    height:          calc(100vh - 14rem);
    margin-top:      14rem;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         0 3rem 5rem;
    position:        relative;
    overflow:        hidden;
}

.hero-video {
    position:   absolute;
    inset:      0;
    z-index:    0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.hero-poster { display: none; }

.hero-overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(
        180deg,
        rgba(10, 9, 7, 0.08)  0%,
        rgba(10, 9, 7, 0.42) 65%,
        rgba(10, 9, 7, 0.78) 100%
    );
}

.hero-content {
    position:  relative;
    z-index:   2;
    max-width: 760px;
}

.hero-eyebrow {
    font-size:      0.76rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color:          rgba(245, 240, 232, 0.7);
    margin-bottom:  1.8rem;
    opacity:        0;
    animation:      fadeUp 1s 0.5s forwards;
}

.hero-title {
    font-family:    'EB Garamond', serif;
    font-size:      clamp(5rem, 12vw, 10rem);
    font-weight:    300;
    line-height:    0.9;
    letter-spacing: -0.02em;
    color:          #f5f0e8;
    margin-bottom:  2.2rem;
    opacity:        0;
    animation:      fadeUp 1s 0.8s forwards;
}

.hero-sub {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(1.1rem, 2.2vw, 1.6rem);
    font-style:    italic;
    font-weight:   300;
    color:         rgba(245, 240, 232, 0.75);
    opacity:       0;
    animation:     fadeUp 1s 1.1s forwards;
    margin-bottom: 1.4rem;
    max-width:     420px;
    line-height:   1.65;
}

.hero-clarity {
    font-size:      0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          rgba(245, 240, 232, 0.45);
    margin-bottom:  2.8rem;
    opacity:        0;
    animation:      fadeUp 1s 1.25s forwards;
}

.hero-ctas {
    display:    flex;
    gap:        1.4rem;
    flex-wrap:  wrap;
    opacity:    0;
    animation:  fadeUp 1s 1.4s forwards;
}

.hero-btn {
    display:         inline-block;
    font-size:       0.72rem;
    letter-spacing:  0.26em;
    text-transform:  uppercase;
    text-decoration: none;
    padding:         1.1rem 2.6rem;
    transition:      color 0.35s, border-color 0.35s, background 0.35s;
}

.hero-btn--primary {
    color:       var(--fondo);
    background:  transparent;
    border:      1px solid rgba(245, 240, 232, 0.85);
}

.hero-btn--primary:hover {
    color:        var(--dorado);
    border-color: var(--dorado);
}

.hero-btn--secondary {
    color:       rgba(245, 240, 232, 0.55);
    background:  transparent;
    border:      1px solid rgba(245, 240, 232, 0.2);
}

.hero-btn--secondary:hover {
    color:        rgba(245, 240, 232, 0.9);
    border-color: rgba(245, 240, 232, 0.5);
}

.hero-scroll {
    position:       absolute;
    right:          3rem;
    bottom:         5rem;
    z-index:        3;
    writing-mode:   vertical-rl;
    font-size:      0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color:          rgba(245, 240, 232, 0.45);
    display:        flex;
    align-items:    center;
    gap:            1rem;
}

.hero-scroll::before {
    content:          '';
    width:            1px;
    height:           60px;
    background:       rgba(245, 240, 232, 0.3);
    animation:        lineGrow 2s 2s forwards;
    transform:        scaleY(0);
    transform-origin: top;
}

@keyframes lineGrow { to { transform: scaleY(1); } }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ====================================================
   SECCIONES — Estilos compartidos
   ==================================================== */

section { padding: 9rem 3rem; }

.section-label {
    font-size:      0.68rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color:          var(--dorado);
    margin-bottom:  3rem;
    display:        flex;
    align-items:    center;
    gap:            1.5rem;
}

.section-label::before {
    content:     '';
    width:       36px;
    height:      1px;
    background:  var(--dorado);
    flex-shrink: 0;
}

/* ====================================================
   SECCIÓN ESENCIA RÁPIDA (nueva)
   ==================================================== */

.esencia-rapida {
    padding:    0;
    background: var(--fondo-alt);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.esencia-rapida-inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             0;
    max-width:       1100px;
    margin:          0 auto;
    padding:         3.5rem 3rem;
}

.esencia-pill {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         0 4rem;
    gap:             0.6rem;
}

.esencia-pill-divider {
    width:      1px;
    height:     48px;
    background: var(--borde);
    flex-shrink: 0;
}

.esencia-pill-num {
    font-family:    'EB Garamond', serif;
    font-size:      2.6rem;
    font-weight:    300;
    color:          var(--dorado);
    line-height:    1;
}

.esencia-pill-label {
    font-size:      0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
    line-height:    1.5;
}

/* ====================================================
   SECCIÓN EL ORIGEN — #origen
   ==================================================== */

#origen {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   7rem;
    align-items:           center;
    background:            var(--fondo);
}

.origen-visual {
    position: relative;
    height:   640px;
}

.origen-img-wrap {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

.origen-img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 20%;
    display:         block;
    filter:          brightness(0.96) contrast(1.02);
    transition:      transform 0.9s ease;
}

.origen-img-wrap:hover .origen-img { transform: scale(1.03); }

.origen-rect-accent {
    position:       absolute;
    width:          110px;
    height:         160px;
    bottom:         -18px;
    right:          -18px;
    border:         1px solid var(--dorado-suave);
    z-index:        2;
    pointer-events: none;
}

.origen-year-badge {
    position:        absolute;
    top:             2rem;
    left:            2rem;
    z-index:         2;
    background:      rgba(245, 240, 232, 0.9);
    backdrop-filter: blur(8px);
    border:          1px solid var(--borde);
    padding:         1rem 1.4rem;
    line-height:     1;
    font-family:     'EB Garamond', serif;
    font-size:       2.8rem;
    font-weight:     300;
    color:           var(--dorado);
}

.origen-year-badge span {
    display:        block;
    font-family:    'Lato', sans-serif;
    font-size:      0.66rem;
    font-weight:    400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
    margin-top:     0.4rem;
}

.origen-text h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2.8rem, 5vw, 4.2rem);
    font-weight:   300;
    line-height:   1.1;
    color:         var(--tinta);
    margin-bottom: 2.2rem;
}

.origen-text h2 em {
    font-style: italic;
    color:      var(--dorado);
}

.origen-text p {
    font-size:     1rem;
    font-weight:   400;
    line-height:   2;
    color:         var(--tinta-suave);
    margin-bottom: 1.6rem;
}

/* ── Datos del terroir ──────────────────────────────── */

.origen-terroir {
    display:         flex;
    gap:             0;
    border-top:      1px solid var(--borde);
    border-bottom:   1px solid var(--borde);
    margin-top:      2.5rem;
    margin-bottom:   0.5rem;
}

.origen-terroir-item {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
    padding:        1.2rem 2rem 1.2rem 0;
    margin-right:   2rem;
    border-right:   1px solid var(--borde);
    flex:           1;
}

.origen-terroir-item:last-child {
    border-right: none;
    margin-right: 0;
}

.origen-terroir-key {
    font-size:      0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
}

.origen-terroir-val {
    font-family:    'EB Garamond', serif;
    font-size:      1.1rem;
    font-weight:    300;
    color:          var(--tinta);
    letter-spacing: 0.04em;
}

.origen-stat {
    margin-top:  3rem;
    padding-top: 2.5rem;
    border-top:  1px solid var(--borde);
    display:     flex;
    gap:         3rem;
}

.origen-stat-item span {
    display:     block;
    font-family: 'EB Garamond', serif;
    font-size:   2.8rem;
    font-weight: 300;
    color:       var(--dorado);
    line-height: 1;
}

.origen-stat-item p {
    font-size:      0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
    margin:         0.5rem 0 0;
}

/* ====================================================
   SECCIÓN LA SOCIEDAD — #sociedad
   ==================================================== */

#sociedad {
    background: var(--fondo-oliva);
    position:   relative;
    overflow:   hidden;
}

#sociedad::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--dorado), transparent);
}

.sociedad-header {
    text-align: center;
    max-width:  760px;
    margin:     0 auto 7rem;
}

.sociedad-header h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2.8rem, 5vw, 5rem);
    font-weight:   300;
    color:         var(--tinta);
    margin-bottom: 1.8rem;
    line-height:   1.05;
}

.sociedad-header p {
    font-size:   1.05rem;
    font-weight: 400;
    line-height: 1.9;
    color:       var(--tinta-suave);
    max-width:   520px;
    margin:      0 auto;
}

/* Grid base (3 cols) y override 4 cols */
.sociedad-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0;
    border:                1px solid var(--borde);
}

.sociedad-grid--four {
    grid-template-columns: repeat(4, 1fr);
}

.sociedad-card {
    padding:        4rem 2.8rem;
    border-right:   1px solid var(--borde);
    transition:     background 0.5s;
    position:       relative;
    display:        flex;
    flex-direction: column;
    background:     var(--fondo-oliva);
}

.sociedad-card:last-child { border-right: none; }
.sociedad-card:hover      { background: var(--fondo); }

.sociedad-card-icon {
    font-family:   'EB Garamond', serif;
    font-size:     1.2rem;
    color:         var(--dorado);
    opacity:       0.45;
    margin-bottom: 2rem;
    transition:    opacity 0.4s;
}

.sociedad-card:hover .sociedad-card-icon { opacity: 0.9; }

.sociedad-card-num {
    font-family:   'EB Garamond', serif;
    font-size:     4rem;
    font-weight:   300;
    color:         var(--dorado);
    line-height:   1;
    margin-bottom: 1.5rem;
    opacity:       0.18;
    transition:    opacity 0.4s;
}

.sociedad-card:hover .sociedad-card-num { opacity: 0.4; }

.sociedad-card h3 {
    font-family:   'EB Garamond', serif;
    font-size:     1.45rem;
    font-weight:   400;
    color:         var(--tinta);
    margin-bottom: 1.2rem;
    line-height:   1.2;
}

.sociedad-card p {
    font-size:   0.93rem;
    font-weight: 400;
    line-height: 2;
    color:       var(--tinta-suave);
    flex:        1;
}

.sociedad-card-line {
    width:      0;
    height:     1px;
    background: var(--dorado);
    margin-top: 2rem;
    transition: width 0.5s ease;
}

.sociedad-card:hover .sociedad-card-line { width: 36px; }

.sociedad-exclusivity {
    margin-top:  5rem;
    text-align:  center;
    padding:     3rem 4rem;
    border:      1px solid var(--borde);
    background:  var(--fondo);
    position:    relative;
}

.sociedad-exclusivity::before {
    content:    '';
    position:   absolute;
    top:        -1px;
    left:       50%;
    transform:  translateX(-50%);
    width:      50px;
    height:     1px;
    background: var(--dorado);
}

.sociedad-exclusivity p {
    font-family:    'EB Garamond', serif;
    font-size:      1.2rem;
    font-style:     italic;
    color:          var(--tinta-suave);
    letter-spacing: 0.04em;
    line-height:    1.8;
}

.sociedad-exclusivity strong {
    color:       var(--dorado);
    font-style:  normal;
    font-weight: 400;
}

/* ====================================================
   SOCIEDAD CARD — Versión enlazable
   ==================================================== */

a.sociedad-card--link {
    text-decoration: none;
    display:         flex;
    flex-direction:  column;
    cursor:          pointer;
}

.sociedad-card-footer {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    margin-top:  2rem;
}

.sociedad-card-footer .sociedad-card-line {
    margin-top: 0;
    flex:       0 0 auto;
}

.sociedad-card-cta {
    font-size:      0.55rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--dorado);
    opacity:        0;
    transition:     opacity 0.4s;
}

.sociedad-card--link:hover .sociedad-card-cta {
    opacity: 1;
}

/* ====================================================
   SECCIÓN EXPERIENCIAS — #experiencias
   ==================================================== */

#experiencias {
    padding-top: 0;
    background:  var(--fondo);
}

.exp-intro {
    display:               grid;
    grid-template-columns: 1fr 2fr;
    gap:                   4rem;
    align-items:           end;
    margin-bottom:         5rem;
    padding-top:           9rem;
}

.exp-intro h2 {
    font-family: 'EB Garamond', serif;
    font-size:   clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 300;
    color:       var(--tinta);
    line-height: 1.1;
}

.exp-intro p {
    font-size:   1rem;
    font-weight: 400;
    line-height: 2;
    color:       var(--tinta-suave);
}

.exp-gallery {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows:    300px 200px;
    gap:                   3px;
}

.exp-item {
    position: relative;
    overflow: hidden;
}

.exp-item:first-child { grid-row: span 2; }

.exp-bg {
    position:   absolute;
    inset:      0;
    transition: transform 0.6s ease;
}

.exp-item:hover .exp-bg { transform: scale(1.04); }

.exp-img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform 0.6s ease;
}

.exp-item:hover .exp-img {
    transform: scale(1.04);
}

.exp-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, transparent 40%, rgba(26, 24, 20, 0.6) 100%);
    z-index:    1;
}

.exp-label {
    position:       absolute;
    bottom:         1.5rem;
    left:           1.5rem;
    z-index:        2;
    font-size:      0.73rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color:          rgba(245, 240, 232, 0.9);
}

.exp-deco {
    position:    absolute;
    top:         50%;
    left:        50%;
    transform:   translate(-50%, -50%);
    opacity:     0.12;
    font-family: 'EB Garamond', serif;
    font-size:   7rem;
    font-weight: 300;
    color:       var(--fondo);
    user-select: none;
}

/* ── Timeline ─────────────────────────────────────── */

.exp-timeline {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   0;
    margin-top:            5rem;
    border-top:            1px solid var(--borde);
    border-left:           1px solid var(--borde);
}

.exp-timeline-item {
    padding:       2.5rem 2rem 2rem;
    border-right:  1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    position:      relative;
}

.exp-timeline-num {
    font-family:    'EB Garamond', serif;
    font-size:      0.7rem;
    letter-spacing: 0.2em;
    color:          var(--dorado);
    margin-bottom:  1.2rem;
}

.exp-timeline-line {
    width:        28px;
    height:       1px;
    background:   var(--dorado);
    margin-bottom: 1rem;
    opacity:      0.4;
}

.exp-timeline-label {
    font-family:    'EB Garamond', serif;
    font-size:      1.2rem;
    font-weight:    300;
    color:          var(--tinta);
    margin-bottom:  0.7rem;
    letter-spacing: 0.02em;
}

.exp-timeline-desc {
    font-size:   0.8rem;
    color:       var(--tinta-fina);
    line-height: 1.7;
}

/* ====================================================
   SECCIÓN CAJA FUNDADORA — #caja
   ==================================================== */

.caja-section {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   7rem;
    align-items:           center;
    background:            var(--fondo-alt);
    position:              relative;
    overflow:              hidden;
}

.caja-section::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--dorado), transparent);
}

.caja-visual {
    position: relative;
    height:   580px;
}

.caja-img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    filter:          brightness(0.94) contrast(1.02);
    transition:      transform 0.9s ease;
}

.caja-visual:hover .caja-img { transform: scale(1.02); }

.caja-rect-accent {
    position:       absolute;
    width:          90px;
    height:         130px;
    bottom:         -15px;
    right:          -15px;
    border:         1px solid var(--dorado-suave);
    z-index:        2;
    pointer-events: none;
}

.caja-text h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2.6rem, 4.5vw, 3.8rem);
    font-weight:   300;
    line-height:   1.1;
    color:         var(--tinta);
    margin-bottom: 2rem;
}

.caja-text h2 em {
    font-style: italic;
    color:      var(--dorado);
}

.caja-text p {
    font-size:     1rem;
    font-weight:   400;
    line-height:   2;
    color:         var(--tinta-suave);
    margin-bottom: 2.5rem;
}

.caja-includes {
    list-style:     none;
    margin-bottom:  3rem;
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.caja-includes li {
    display:        flex;
    align-items:    baseline;
    gap:            1.2rem;
    font-size:      0.9rem;
    color:          var(--tinta-suave);
    letter-spacing: 0.04em;
    line-height:    1.6;
}

.caja-includes li::before {
    content:     '–';
    color:       var(--dorado);
    flex-shrink: 0;
    font-family: 'EB Garamond', serif;
}

.caja-cta {
    display:         inline-block;
    font-size:       0.72rem;
    letter-spacing:  0.26em;
    text-transform:  uppercase;
    color:           var(--tinta);
    border:          1px solid var(--borde);
    padding:         1rem 2.4rem;
    text-decoration: none;
    transition:      color 0.35s, border-color 0.35s;
}

.caja-cta:hover {
    color:        var(--dorado);
    border-color: var(--dorado);
}

/* ====================================================
   SECCIÓN INVITACIÓN — #invitacion
   ==================================================== */

#invitacion {
    background:            var(--fondo-alt);
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   7rem;
    align-items:           start;
}

.inv-info h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2.5rem, 4vw, 3.5rem);
    font-weight:   300;
    color:         var(--tinta);
    margin-bottom: 1.8rem;
    line-height:   1.15;
}

.inv-info p {
    font-size:     1rem;
    font-weight:   400;
    line-height:   2;
    color:         var(--tinta-suave);
    margin-bottom: 3rem;
}

.inv-details {
    display:        flex;
    flex-direction: column;
    gap:            1.1rem;
    margin-bottom:  2.5rem;
}

.inv-detail {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    font-size:      0.86rem;
    font-weight:    400;
    color:          var(--tinta-suave);
    letter-spacing: 0.06em;
}

.inv-detail::before {
    content:     '';
    width:       18px;
    height:      1px;
    background:  var(--dorado);
    flex-shrink: 0;
}

/* Declaración de afinidad */
.inv-afinidad {
    font-family:    'EB Garamond', serif;
    font-size:      1.1rem;
    font-style:     italic;
    font-weight:    300;
    color:          var(--tinta-fina);
    letter-spacing: 0.03em;
    line-height:    1.8;
    padding-top:    2rem;
    border-top:     1px solid var(--borde);
}

.inv-afinidad strong {
    font-style:  normal;
    font-weight: 400;
    color:       var(--dorado);
}

.inv-form {
    padding:    3.5rem;
    border:     1px solid var(--borde);
    background: var(--fondo);
}

.form-title {
    font-family:   'EB Garamond', serif;
    font-size:     1.6rem;
    font-weight:   300;
    color:         var(--tinta);
    margin-bottom: 0.5rem;
}

.form-sub {
    font-size:      0.78rem;
    color:          var(--tinta-fina);
    letter-spacing: 0.08em;
    margin-bottom:  2.8rem;
}

.form-group { margin-bottom: 1.8rem; }

.form-group label {
    display:        block;
    font-size:      0.66rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
    margin-bottom:  0.7rem;
}

.form-group input,
.form-group textarea {
    width:         100%;
    background:    transparent;
    border:        none;
    border-bottom: 1px solid var(--borde);
    padding:       0.8rem 0;
    color:         var(--tinta);
    font-family:   'Lato', sans-serif;
    font-size:     1rem;
    font-weight:   400;
    outline:       none;
    transition:    border-color 0.3s;
    resize:        none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--dorado);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color:     var(--tinta-fina);
    font-size: 0.94rem;
}

.form-submit {
    width:          100%;
    margin-top:     1.2rem;
    background:     var(--tinta);
    color:          var(--fondo);
    border:         1px solid var(--tinta);
    padding:        1.25rem;
    font-family:    'Lato', sans-serif;
    font-size:      0.72rem;
    font-weight:    400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    transition:     background 0.35s, color 0.35s, border-color 0.35s;
}

.form-submit:hover {
    background:   transparent;
    color:        var(--tinta);
    border-color: var(--tinta);
}

.form-notice {
    font-size:   0.74rem;
    color:       var(--tinta-fina);
    margin-top:  1.2rem;
    line-height: 1.7;
    font-style:  italic;
}

.form-success {
    display:    none;
    text-align: center;
    padding:    3rem 0;
}

.form-success .success-icon {
    font-family:   'EB Garamond', serif;
    font-size:     2.8rem;
    color:         var(--dorado);
    margin-bottom: 1rem;
}

.form-success h3 {
    font-family:   'EB Garamond', serif;
    font-size:     1.8rem;
    font-weight:   300;
    color:         var(--tinta);
    margin-bottom: 0.75rem;
}

.form-success p {
    font-size:   0.95rem;
    font-weight: 400;
    color:       var(--tinta-suave);
    line-height: 1.8;
}

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

.divider {
    width:      1px;
    height:     70px;
    background: linear-gradient(180deg, transparent, var(--dorado), transparent);
    margin:     0 auto;
}

/* ====================================================
   SECCIÓN INSTAGRAM
   ==================================================== */

.ig-section {
    background:      #0e0d0b;
    padding:         8rem 3rem;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0;
    position:        relative;
    overflow:        hidden;
}

.ig-section::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(
        ellipse 60% 50% at 50% 50%,
        rgba(154, 125, 74, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.ig-eyebrow {
    font-size:      0.62rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color:          var(--dorado);
    opacity:        0.7;
    font-family:    'Lato', sans-serif;
    font-weight:    300;
    margin-bottom:  2.2rem;
}

.ig-handle {
    font-family:     'EB Garamond', serif;
    font-size:       clamp(3rem, 7vw, 6rem);
    font-weight:     300;
    letter-spacing:  -0.02em;
    line-height:     1;
    color:           rgba(245, 240, 232, 0.92);
    text-decoration: none;
    transition:      color 0.4s, opacity 0.4s;
    position:        relative;
    z-index:         1;
}

.ig-handle:hover { color: var(--dorado); opacity: 1; }

.ig-line {
    width:      0;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(154,125,74,0.5), transparent);
    margin:     2.8rem auto;
    transition: width 1.2s ease;
}

.ig-section.visible .ig-line { width: min(300px, 60vw); }

.ig-sub {
    font-family:    'EB Garamond', serif;
    font-size:      clamp(1rem, 1.6vw, 1.15rem);
    font-style:     italic;
    font-weight:    300;
    line-height:    1.9;
    color:          rgba(245, 240, 232, 0.38);
    margin-bottom:  3.2rem;
    position:       relative;
    z-index:        1;
}

.ig-cta {
    display:         inline-block;
    font-family:     'Lato', sans-serif;
    font-size:       0.7rem;
    font-weight:     300;
    letter-spacing:  0.34em;
    text-transform:  uppercase;
    color:           rgba(245, 240, 232, 0.55);
    text-decoration: none;
    border:          1px solid rgba(154, 125, 74, 0.3);
    padding:         1rem 2.4rem;
    transition:      border-color 0.4s, color 0.4s;
    position:        relative;
    z-index:         1;
}

.ig-cta:hover {
    border-color: var(--dorado);
    color:        var(--dorado);
}

@media (max-width: 900px) {
    .ig-section { padding: 6rem 1.5rem; }
}

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

footer {
    padding:         3.5rem 3rem;
    border-top:      1px solid var(--borde);
    background:      var(--fondo);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             1.5rem;
}

.footer-logo {
    font-family:    'EB Garamond', serif;
    font-size:      1.05rem;
    letter-spacing: 0.38em;
    color:          var(--tinta-fina);
}

.footer-links {
    display:    flex;
    gap:        2rem;
    list-style: none;
}

.footer-links a {
    font-size:       0.68rem;
    letter-spacing:  0.18em;
    text-transform:  uppercase;
    color:           var(--tinta-fina);
    text-decoration: none;
    transition:      color 0.3s;
}

.footer-links a:hover { color: var(--dorado); }

.footer-copy {
    font-size:      0.66rem;
    color:          var(--borde);
    letter-spacing: 0.08em;
}

/* ====================================================
   ANIMACIÓN DE SCROLL REVEAL
   ==================================================== */

.reveal {
    opacity:    0;
    transform:  translateY(35px);
    transition: opacity 1s ease, transform 1s ease;
}

.reveal.visible {
    opacity:   1;
    transform: translateY(0);
}

/* ====================================================
   NAV DROPDOWN — Eventos
   ==================================================== */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    display:         none;
    position:        absolute;
    top:             calc(100% + 1rem);
    left:            50%;
    transform:       translateX(-50%);
    background:      rgba(245, 240, 232, 0.97);
    backdrop-filter: blur(16px);
    border:          1px solid var(--borde);
    list-style:      none;
    min-width:       220px;
    padding:         0.5rem 0;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}

.nav-dropdown-menu li a {
    display:         block;
    padding:         0.85rem 1.5rem;
    font-size:       0.58rem;
    letter-spacing:  0.22em;
    text-transform:  uppercase;
    color:           var(--tinta-suave);
    text-decoration: none;
    transition:      color 0.3s, background 0.3s;
    white-space:     nowrap;
}

.nav-dropdown-menu li a:hover {
    color:      var(--dorado);
    background: rgba(154, 125, 74, 0.04);
}

/* ====================================================
   RESPONSIVE — Tablet (max-width: 1100px)
   ==================================================== */

@media (max-width: 1100px) {
    .sociedad-grid--four {
        grid-template-columns: repeat(2, 1fr);
    }

    .sociedad-grid--four .sociedad-card:nth-child(2) {
        border-right: none;
    }

    .sociedad-grid--four .sociedad-card:nth-child(1),
    .sociedad-grid--four .sociedad-card:nth-child(2) {
        border-bottom: 1px solid var(--borde);
    }

    .exp-timeline {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ====================================================
   RESPONSIVE — Tablet (max-width: 900px)
   ==================================================== */

@media (max-width: 900px) {

    nav          { padding: 1.4rem 1.8rem; }
    nav.scrolled { padding: 1.2rem 1.8rem; }

    .nav-links  { display: none; }
    .nav-cta    { display: none; }

    .nav-hamburger {
        display: flex;
    }

    section     { padding: 6rem 1.5rem; }

    #inicio {
        padding: 0 1.5rem 4rem;
    }

    .hero-scroll { display: none; }

    .hero-ctas {
        flex-direction: column;
        gap:            1rem;
    }

    .hero-btn {
        text-align: center;
    }

    .esencia-rapida-inner {
        gap:     2rem;
        padding: 2.5rem 1.5rem;
    }

    .esencia-pill { padding: 0 1.5rem; }

    .esencia-pill-divider {
        width:  40px;
        height: 1px;
    }

    #origen {
        grid-template-columns: 1fr;
        gap:                   3rem;
    }

    .origen-visual { height: 420px; }

    .origen-terroir {
        flex-wrap: wrap;
    }

    .sociedad-grid,
    .sociedad-grid--four {
        grid-template-columns: 1fr;
    }

    .sociedad-card {
        border-right:  none;
        border-bottom: 1px solid var(--borde);
    }

    .exp-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows:    200px 200px 200px;
    }

    .exp-item:first-child { grid-row: span 1; }

    .exp-timeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .caja-section {
        grid-template-columns: 1fr;
        gap:                   3rem;
    }

    .caja-visual { height: 380px; }

    #invitacion {
        grid-template-columns: 1fr;
        gap:                   3rem;
    }

    .exp-intro { grid-template-columns: 1fr; }

    footer {
        flex-direction: column;
        text-align:     center;
    }

    .footer-links {
        flex-wrap:       wrap;
        justify-content: center;
    }

}

/* ====================================================
   RESPONSIVE — Móvil (max-width: 600px)
   ==================================================== */

@media (max-width: 600px) {

    /* Base */
    body         { overflow-x: hidden; }
    section      { padding: 4rem 1.2rem; }

    nav          { padding: 1.1rem 1.2rem; }
    nav.scrolled { padding: 1rem 1.2rem; }

    /* Hero */
    .hero-title  { font-size: clamp(2.8rem, 10vw, 4.5rem); }

    /* Esencia rápida */
    .esencia-rapida-inner {
        flex-direction: column;
        align-items:    stretch;
        gap:            0;
    }

    .esencia-pill {
        padding:        1.5rem 1.2rem;
        border-bottom:  1px solid var(--borde);
        flex-direction: row;
        justify-content: space-between;
        text-align:     left;
    }

    .esencia-pill-divider { display: none; }

    /* Grids → 1 columna */
    .sociedad-grid,
    .sociedad-grid--four { grid-template-columns: 1fr; }

    .exp-gallery {
        grid-template-columns: 1fr;
        grid-template-rows:    repeat(5, 160px);
    }

    .exp-timeline { grid-template-columns: 1fr; }

    /* Formulario */
    .inv-form { padding: 2rem 1.2rem; }

    .caja-section { padding: 4rem 1.2rem; }

    /* Botones táctiles — mínimo 44px */
    .hero-btn,
    .nav-cta,
    .form-submit,
    .hero-btn--primary,
    .hero-btn--secondary {
        min-height:  44px;
        display:     flex;
        align-items: center;
        justify-content: center;
    }

    /* Origen */
    .origen-visual { height: 280px; }

    /* Footer */
    footer          { padding: 3rem 1.2rem; }
    .footer-links   { gap: 1rem; }

}


/* ====================================================
   COMPONENTES EDITORIALES COMPARTIDOS (nuevas páginas)
   ==================================================== */

/* Sección manifiesto — fondo oscuro, cita centrada */
.manifesto {
    background:      #0e0d0b;
    padding:         10rem 3rem;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    position:        relative;
    overflow:        hidden;
}

.manifesto::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(154,125,74,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.manifesto-label {
    font-size:      0.62rem;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color:          rgba(154, 125, 74, 0.6);
    font-family:    'Lato', sans-serif;
    font-weight:    300;
    margin-bottom:  3.5rem;
    position:       relative;
    z-index:        1;
}

.manifesto-quote {
    font-family:    'EB Garamond', serif;
    font-size:      clamp(2rem, 4.5vw, 3.8rem);
    font-weight:    300;
    font-style:     italic;
    line-height:    1.3;
    color:          rgba(245, 240, 232, 0.9);
    max-width:      820px;
    position:       relative;
    z-index:        1;
    margin-bottom:  3rem;
}

.manifesto-line {
    width:      60px;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(154,125,74,0.6), transparent);
    margin:     0 auto 3rem;
    position:   relative;
    z-index:    1;
}

.manifesto-sub {
    font-family:    'Lato', sans-serif;
    font-size:      0.82rem;
    font-weight:    300;
    letter-spacing: 0.16em;
    line-height:    2;
    color:          rgba(245, 240, 232, 0.35);
    max-width:      480px;
    position:       relative;
    z-index:        1;
}

/* Split editorial — imagen grande + bloque texto */
.editorial-split {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0;
    min-height:            620px;
    padding:               0;
}

.editorial-split-img {
    position:   relative;
    overflow:   hidden;
    min-height: 500px;
}

.editorial-split-img img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 20%;
    transition:      transform 0.9s ease;
}

.editorial-split-img:hover img { transform: scale(1.03); }

.editorial-split-body {
    padding:         7rem 5rem;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

.editorial-split-body h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2.5rem, 4vw, 3.8rem);
    font-weight:   300;
    line-height:   1.1;
    color:         var(--tinta);
    margin-bottom: 2.4rem;
}

.editorial-split-body h2 em {
    font-style: italic;
    color:      var(--dorado);
}

.editorial-split-body p {
    font-size:     1rem;
    line-height:   2;
    color:         var(--tinta-suave);
    margin-bottom: 1.6rem;
    max-width:     520px;
}

/* Bloque de texto centrado ancho */
.editorial-centered {
    padding:    10rem 3rem;
    text-align: center;
    background: var(--fondo);
}

.editorial-centered-inner {
    max-width:    760px;
    margin:       0 auto;
}

.editorial-centered-inner h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2.5rem, 4.5vw, 4rem);
    font-weight:   300;
    font-style:    italic;
    line-height:   1.2;
    color:         var(--tinta);
    margin-bottom: 3rem;
}

.editorial-centered-inner p {
    font-size:     1rem;
    line-height:   2;
    color:         var(--tinta-suave);
    margin-bottom: 1.6rem;
}

/* Línea de estadísticas horizontal */
.stat-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0;
    border-top:      1px solid var(--borde);
    border-bottom:   1px solid var(--borde);
    margin-top:      3.5rem;
    padding:         3rem 0;
}

.stat-row-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
    padding:        0 4rem;
    border-right:   1px solid var(--borde);
}

.stat-row-item:last-child { border-right: none; }

.stat-row-num {
    font-family:    'EB Garamond', serif;
    font-size:      3.2rem;
    font-weight:    300;
    color:          var(--dorado);
    line-height:    1;
}

.stat-row-label {
    font-size:      0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color:          var(--tinta-fina);
}

/* Bloque imagen fundadora — imagen grande + texto debajo */
.fundadora-block {
    padding:    0;
    position:   relative;
    background: var(--fondo-oliva);
}

.fundadora-img-wrap {
    position:   relative;
    height:     72vh;
    overflow:   hidden;
}

.fundadora-img-wrap img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 1.2s ease;
}

.fundadora-img-wrap:hover img { transform: scale(1.02); }

.fundadora-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(180deg, transparent 40%, rgba(10,9,7,0.55) 100%);
    pointer-events: none;
}

.fundadora-caption {
    position:       absolute;
    bottom:         3.5rem;
    left:           3rem;
    color:          rgba(245,240,232,0.9);
    z-index:        2;
}

.fundadora-caption-label {
    font-size:      0.62rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color:          var(--dorado);
    margin-bottom:  0.8rem;
}

.fundadora-caption h3 {
    font-family:    'EB Garamond', serif;
    font-size:      clamp(1.8rem, 3vw, 2.8rem);
    font-weight:    300;
    line-height:    1.1;
}

.fundadora-body {
    padding:                 6rem 3rem;
    display:                 grid;
    grid-template-columns:   1fr 1fr;
    gap:                     7rem;
    align-items:             center;
}

.fundadora-body p {
    font-size:     1rem;
    line-height:   2;
    color:         var(--tinta-suave);
    margin-bottom: 1.6rem;
}

.fundadora-body .section-label { margin-bottom: 2rem; }

.fundadora-body h2 {
    font-family:   'EB Garamond', serif;
    font-size:     clamp(2rem, 3.5vw, 3rem);
    font-weight:   300;
    line-height:   1.15;
    color:         var(--tinta);
    margin-bottom: 2rem;
}

.fundadora-link {
    display:         inline-block;
    font-size:       0.66rem;
    letter-spacing:  0.32em;
    text-transform:  uppercase;
    color:           var(--tinta);
    text-decoration: none;
    border-bottom:   1px solid var(--borde);
    padding-bottom:  0.3rem;
    margin-top:      1rem;
    transition:      color 0.3s, border-color 0.3s;
}

.fundadora-link:hover {
    color:        var(--dorado);
    border-color: var(--dorado);
}

/* CTA section de cierre */
.cta-closing {
    background:      #0e0d0b;
    padding:         9rem 3rem;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             2rem;
}

.cta-closing-label {
    font-size:      0.62rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color:          rgba(154,125,74,0.6);
}

.cta-closing h2 {
    font-family:    'EB Garamond', serif;
    font-size:      clamp(2rem, 4vw, 3.5rem);
    font-weight:    300;
    font-style:     italic;
    color:          rgba(245,240,232,0.88);
    line-height:    1.2;
    max-width:      640px;
}

.cta-closing-sub {
    font-size:      0.8rem;
    letter-spacing: 0.1em;
    color:          rgba(245,240,232,0.3);
    max-width:      440px;
    line-height:    1.9;
}

.cta-closing-btn {
    display:         inline-block;
    font-size:       0.7rem;
    letter-spacing:  0.34em;
    text-transform:  uppercase;
    color:           rgba(245,240,232,0.7);
    text-decoration: none;
    border:          1px solid rgba(154,125,74,0.4);
    padding:         1.1rem 3rem;
    transition:      color 0.4s, border-color 0.4s;
    margin-top:      1rem;
}

.cta-closing-btn:hover {
    color:        var(--dorado);
    border-color: var(--dorado);
}

/* Responsive — componentes editoriales */
@media (max-width: 900px) {
    .manifesto         { padding: 7rem 1.5rem; }
    .manifesto-quote   { font-size: clamp(1.6rem, 5vw, 2.4rem); }

    .editorial-split                  { grid-template-columns: 1fr; }
    .editorial-split-img              { min-height: 320px; }
    .editorial-split-body             { padding: 4rem 1.5rem; }
    .editorial-split-body p           { max-width: 100%; }

    .editorial-centered               { padding: 6rem 1.5rem; }

    .stat-row                         { flex-direction: column; border: none; gap: 1.5rem; }
    .stat-row-item                    { border: none; padding: 1rem 0; border-bottom: 1px solid var(--borde); width: 100%; }
    .stat-row-item:last-child         { border-bottom: none; }

    .fundadora-img-wrap               { height: 50vh; }
    .fundadora-body                   { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1.5rem; }

    .cta-closing                      { padding: 6rem 1.5rem; }
}

/* ====================================================
   UNIVERSAL VIDEO PLAYER — .vp-*
   Usado por video-player.js en heroes secundarios
   y vídeos de separador en toda la web
   ==================================================== */

/* Tap area — cubre el contenedor, cursor:pointer es
   obligatorio en iOS para recibir eventos en divs   */
.vp-tap {
    position: absolute;
    inset:    0;
    z-index:  5;
    cursor:   pointer;
}

/* Barra de controles integrada en el borde inferior */
.vp-bar {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    display:        flex;
    align-items:    center;
    gap:            0.5rem;
    padding:        2.5rem 1.8rem 1.5rem;
    background:     linear-gradient(0deg, rgba(10,9,7,0.5) 0%, transparent 100%);
    opacity:        0;
    transform:      translateY(5px);
    transition:     opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.vp-bar.vp-show {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Botones play / mute */
.vp-btn {
    flex-shrink:                 0;
    width:                       44px;
    height:                      44px;
    display:                     flex;
    align-items:                 center;
    justify-content:             center;
    background:                  none;
    border:                      none;
    padding:                     0;
    cursor:                      pointer;
    touch-action:                manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select:         none;
    user-select:                 none;
    transition:                  transform 0.15s ease;
}

.vp-btn:active { transform: scale(0.85); }
.vp-btn svg    { pointer-events: none; display: block; }

/* Barra de progreso */
.vp-progress {
    flex:                        1;
    height:                      44px;
    display:                     flex;
    align-items:                 center;
    cursor:                      pointer;
    touch-action:                manipulation;
    -webkit-tap-highlight-color: transparent;
}

.vp-track {
    width:         100%;
    height:        2px;
    background:    rgba(245,240,232,0.22);
    border-radius: 2px;
    overflow:      hidden;
}

.vp-fill {
    height:        100%;
    width:         0%;
    background:    rgba(245,240,232,0.82);
    border-radius: 2px;
    transition:    width 0.4s linear;
    will-change:   width;
}

@media (max-width: 600px) {
    .vp-bar { padding: 1.8rem 1.2rem 1.2rem; gap: 0.3rem; }
}

/* ====================================================
   YOUTUBE BACKGROUND IFRAME — .yt-bg
   Cubre cualquier contenedor position:relative con
   overflow:hidden. Proporciones 16:9 garantizadas.
   ==================================================== */
.yt-bg {
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    width:      177.78vh;   /* 16:9 a altura completa */
    height:     56.25vw;    /* 16:9 a anchura completa */
    min-width:  100%;
    min-height: 100%;
    border:     0;
    pointer-events: none;
}