/* ════════════════════════════════════════════════════════════════
   SONRISA VIVA — PREMIUM EFFECTS LAYER
   Custom cursor · Noise grain · Scroll progress · Bento ·
   Horizontal scroll · Magnetic · Split text · Spotlight cards
   ════════════════════════════════════════════════════════════════ */

/* ─────────── CUSTOM CURSOR (desktop) ─────────── */
@media (hover: hover) and (pointer: fine){
  html, body{cursor: none}
  a, button, .h-svc, .fit-card, [data-magnetic]{cursor: none}
}

/* ─────────── MODAL DE RESERVA: cursor nativo (mejor UX en formularios) ─────────── */
/* Dentro del modal restauramos el cursor del navegador para que el usuario
   vea claramente dónde escribe y dónde puede hacer click. */
#modal-reserva,
#modal-reserva *{
  cursor: auto !important
}
#modal-reserva input,
#modal-reserva textarea,
#modal-reserva [contenteditable]{
  cursor: text !important
}
#modal-reserva select,
#modal-reserva button,
#modal-reserva a,
#modal-reserva [role="button"],
#modal-reserva .modal-close,
#modal-reserva .bk-day,
#modal-reserva .bk-slot,
#modal-reserva .bk-cta,
#modal-reserva .bk-back,
#modal-reserva [data-bk-day],
#modal-reserva [data-bk-slot],
#modal-reserva label{
  cursor: pointer !important
}
/* Ocultar el cursor custom cuando el modal está abierto */
body.modal-open .sv-cursor-dot,
body.modal-open .sv-cursor-ring,
body:has(#modal-reserva.modal-visible) .sv-cursor-dot,
body:has(#modal-reserva.modal-visible) .sv-cursor-ring{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none
}
/* Fallback: si el cursor custom queda visible dentro del modal por z-index,
   forzamos cursor nativo en cualquier elemento del modal */
#modal-reserva.modal-visible{cursor: auto !important}
.sv-cursor-dot, .sv-cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  will-change:transform;transition:opacity .25s ease
}
.sv-cursor-dot{
  width:6px;height:6px;border-radius:50%;
  background:#C9A86C;
  mix-blend-mode:difference
}
.sv-cursor-ring{
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(201,168,108,.6);
  transition:width .35s cubic-bezier(.23,1,.32,1),
             height .35s cubic-bezier(.23,1,.32,1),
             border-color .25s ease,
             background .25s ease,
             opacity .25s ease,
             transform .12s linear
}
.sv-cursor-ring.hover{
  width:54px;height:54px;
  background:rgba(201,168,108,.10);
  border-color:#C9A86C
}
@media (hover: none), (max-width: 768px){
  .sv-cursor-dot, .sv-cursor-ring{display:none}
  html, body, a, button{cursor:auto}
}

/* ─────────── SCROLL PROGRESS BAR ─────────── */
.sv-scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;
  background:linear-gradient(90deg, #C9A86C, #E6CC8F, #1FCFC6);
  transform-origin:0 50%;transform:scaleX(0);
  transition:transform .08s linear;pointer-events:none
}

/* ─────────── NOISE / GRAIN OVERLAY (estilo Collider) ─────────── */
body::before{
  content:"";
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
  animation:svGrain 8s steps(8) infinite
}
@keyframes svGrain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-5%,-10%)}
  20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)}
  40%{transform:translate(-5%,25%)}
  50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0%)}
  70%{transform:translate(0%,15%)}
  80%{transform:translate(3%,35%)}
  90%{transform:translate(-10%,10%)}
}

/* ─────────── SPLIT TEXT REVEAL ─────────── */
.sv-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.sv-char{display:inline-block;will-change:transform,opacity}

/* ─────────── HERO PREMIUM UPGRADE ─────────── */
.h-hero{
  min-height: 92vh;
  display:flex;align-items:center
}
.h-hero h1 .sv-char{vertical-align:bottom}

.h-hero[data-spotlight]::before{
  background:
    radial-gradient(40% 40% at var(--mx, 50%) var(--my, 30%), var(--gold-glow), transparent 60%),
    radial-gradient(60% 50% at 78% 30%, var(--gold-glow), transparent 70%),
    radial-gradient(50% 45% at 12% 70%, rgba(31,207,198,.10), transparent 65%);
  transition:background .25s ease
}

/* ─────────── BENTO GRID SECTION ─────────── */
.h-bento{
  background:var(--void);padding:120px 0;
  position:relative
}
.h-bento-header{
  display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;
  align-items:end;margin-bottom:4rem
}
.h-bento-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  line-height:1.04;letter-spacing:-.025em;color:var(--t-light-1)
}
.h-bento-header h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-bento-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 280px);
  gap:1rem
}
.h-bento-cell{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  padding:2rem;
  transition:all .35s cubic-bezier(.23,1,.32,1);
  isolation:isolate
}
.h-bento-cell::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 100% at 0% 0%, var(--gold-glow), transparent 50%);
  opacity:0;transition:opacity .45s ease
}
.h-bento-cell:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 24px 48px rgba(0,0,0,.35), 0 0 0 1px var(--gold-glow)
}
.h-bento-cell:hover::before{opacity:1}
.h-bento-cell--lg{grid-column:span 2;grid-row:span 2}
.h-bento-cell--md{grid-column:span 2}
.h-bento-cell--tall{grid-row:span 2}

.h-bento-cell h3{
  font-family:var(--font-serif);font-weight:400;
  font-size:1.5rem;line-height:1.15;
  color:var(--t-light-1);margin-bottom:.85rem
}
.h-bento-cell--lg h3{font-size:2.2rem}
.h-bento-cell p{
  font-size:.92rem;color:var(--t-light-3);line-height:1.65;
  font-weight:300
}
.h-bento-icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,108,.12);border:1px solid var(--line-dark-2);
  color:var(--gold);margin-bottom:1.5rem
}
.h-bento-num{
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:clamp(3rem,5vw,5rem);
  color:var(--gold);letter-spacing:-.03em;line-height:1;
  margin-bottom:.25rem
}
.h-bento-num em{font-style:italic;font-size:.4em;opacity:.7}
.h-bento-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:100px;
  background:rgba(31,207,198,.10);border:1px solid rgba(31,207,198,.25);
  font-size:.7rem;color:var(--teal-light);letter-spacing:.08em;text-transform:uppercase;
  margin-top:1.25rem
}
.h-bento-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);animation:pulse 2s infinite}

/* ─────────── HORIZONTAL SCROLL ─────────── */
.h-hscroll{
  background:var(--void);
  overflow:hidden;
  position:relative
}
.h-hscroll-header{
  padding:120px 0 60px;
  text-align:center
}
.h-hscroll-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem,4.2vw,3.8rem);
  line-height:1.04;letter-spacing:-.025em;color:var(--t-light-1)
}
.h-hscroll-header h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-hscroll-track{
  display:flex;gap:1.5rem;
  padding:0 4vw 120px;
  will-change:transform
}
.h-hscroll-card{
  flex:0 0 auto;width:380px;height:520px;
  position:relative;border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--void-2);
  border:1px solid var(--line-dark-2);
  box-shadow:0 32px 64px rgba(0,0,0,.4)
}
.h-hscroll-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
.h-hscroll-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(7,8,15,.92) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2rem;color:white
}
.h-hscroll-card-num{
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:1rem;color:var(--gold);margin-bottom:.5rem;letter-spacing:.04em
}
.h-hscroll-card h3{
  font-family:var(--font-serif);font-weight:400;
  font-size:1.7rem;line-height:1.15;
  color:white;margin-bottom:.65rem
}
.h-hscroll-card p{
  font-size:.9rem;line-height:1.65;color:var(--t-light-2);font-weight:300;
  margin-bottom:1rem
}
.h-hscroll-card-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;color:var(--gold);font-weight:500;
  text-decoration:none;letter-spacing:.02em
}
.h-hscroll-card-link:hover{color:var(--gold-light)}

@media (max-width:900px){
  .h-hscroll-track{
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:60px
  }
  .h-hscroll-card{scroll-snap-align:start;width:80vw;height:440px}
}

/* ─────────── BIG TEXT BANNER (editorial italic) ─────────── */
.h-banner{
  background:var(--void);
  padding:140px 0;text-align:center;
  position:relative;overflow:hidden;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark)
}
.h-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% 50%, var(--gold-glow), transparent 60%);
  opacity:.6
}
.h-banner-text{
  font-family:var(--font-serif);font-weight:300;font-style:italic;
  font-size:clamp(2.5rem,7vw,7rem);
  line-height:1;letter-spacing:-.04em;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 30%, var(--t-light-1) 70%, var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:svShimmer 8s ease-in-out infinite;
  position:relative;z-index:1
}
.h-banner-text .sv-word-anim{
  background-image:inherit;background-size:inherit;background-position:inherit;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  display:inline-block
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .h-banner-text, .h-banner-text .sv-word-anim{
    background:none !important;
    -webkit-text-fill-color:var(--gold, #C9A86C) !important;
    color:var(--gold, #C9A86C) !important
  }
}
@keyframes svShimmer{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.h-banner-sub{
  font-size:1rem;color:var(--t-light-3);margin-top:1.5rem;
  font-weight:300;letter-spacing:.01em;position:relative;z-index:1
}

/* ─────────── PRESS LOGOS BAR ─────────── */
.h-press{
  background:var(--void);
  padding:60px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.h-press-label{
  text-align:center;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-light-4);
  margin-bottom:2rem;font-weight:500
}
.h-press-track{
  display:flex;gap:5rem;align-items:center;justify-content:center;
  flex-wrap:wrap
}
.h-press-logo{
  font-family:var(--font-serif);font-weight:400;
  font-size:1.6rem;color:var(--t-light-1);letter-spacing:.02em;
  white-space:nowrap;transition:color .25s ease,opacity .25s ease;
  opacity:.78
}
.h-press-logo:hover{color:var(--gold);opacity:1}
.h-press-logo em{font-style:italic;opacity:.6}

/* ─────────── COMPARISON TABLE (Us vs Them) ─────────── */
.h-compare{
  background:var(--void-2);padding:120px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark)
}
.h-compare-header{text-align:center;max-width:680px;margin:0 auto 4rem}
.h-compare-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.05;letter-spacing:-.025em;color:var(--t-light-1)
}
.h-compare-header h2 em{font-style:italic;color:var(--gold)}
.h-compare-table{
  max-width:920px;margin:0 auto;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line-dark);
  border-radius:var(--r-lg);overflow:hidden
}
.h-compare-row{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;
  border-bottom:1px solid var(--line-dark)
}
.h-compare-row:last-child{border-bottom:none}
.h-compare-row > div{
  padding:1.25rem 2rem;
  display:flex;align-items:center;
  font-size:.95rem;color:var(--t-light-2)
}
.h-compare-row.head > div{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-light-3);font-weight:600;
  background:rgba(255,255,255,.025)
}
.h-compare-row.head .h-compare-us{color:var(--gold)}
.h-compare-feature{font-weight:400;color:var(--t-light-1) !important}
.h-compare-yes, .h-compare-no{justify-content:center}
.h-compare-yes svg{color:var(--teal)}
.h-compare-no svg{color:#5A6178}
.h-compare-us{background:rgba(201,168,108,.04)}

/* ─────────── HOVERS REFINADOS EN BOTONES ─────────── */
.h-btn{position:relative;overflow:hidden;isolation:isolate}
.h-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.18), transparent 60%);
  opacity:0;transition:opacity .3s ease
}
.h-btn:hover::before{opacity:1}

/* ─────────── ESTILO CHIP/TAG ─────────── */
.h-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:100px;
  background:rgba(201,168,108,.10);border:1px solid rgba(201,168,108,.25);
  font-size:.7rem;color:var(--gold);letter-spacing:.05em;text-transform:uppercase;
  font-weight:500
}

/* ─────────── HORIZONTAL DIVIDER GOLD ACCENT ─────────── */
.h-divider{
  display:block;height:1px;width:100%;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity:.4;margin:0
}

/* ════════════════════════════════════════════════════════════════
   TANDA 2 — TOP TICKER · STICKY PILL · PARTICLES · MESH · TESTIMONIOS
   ════════════════════════════════════════════════════════════════ */

/* ─────────── 1. TOP PROMO TICKER (estilo Noon dark band) ─────────── */
.h-top-ticker{
  position:relative;z-index:600;
  background:linear-gradient(90deg, #0A0B14 0%, #0E1220 50%, #0A0B14 100%);
  border-bottom:1px solid rgba(201,168,108,.18);
  overflow:hidden;
  height:34px;display:flex;align-items:center
}
.h-top-ticker-track{
  display:flex;align-items:center;gap:2.5rem;
  width:max-content;
  animation:hTopTicker 36s linear infinite;
  white-space:nowrap
}
.h-top-ticker span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.74rem;color:rgba(231,233,240,.78);
  letter-spacing:.04em;font-weight:400;
  white-space:nowrap
}
.h-top-ticker span svg{flex-shrink:0;color:#1FCFC6}
.h-top-ticker span strong{color:#E6CC8F;font-weight:500}
.h-top-ticker .h-tt-dot{color:rgba(201,168,108,.5);font-size:.6rem}
@keyframes hTopTicker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:768px){
  .h-top-ticker{height:30px}
  .h-top-ticker span{font-size:.68rem}
  .h-top-ticker-track{animation-duration:28s;gap:1.8rem}
}

/* Cuando hay top ticker, ajustar el nav fijo para que no se solape */
nav{top:34px !important}
@media (max-width:768px){
  nav{top:30px !important}
}

/* ─────────── 2. STICKY DESKTOP CTA PILL (estilo Noon Join Club) ─────────── */
.h-sticky-cta{
  position:fixed;
  bottom:28px;right:104px;          /* offset para no chocar con el FAB del chatbot */
  z-index:700;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:100px;
  background:linear-gradient(135deg, #C9A86C 0%, #E6CC8F 50%, #C9A86C 100%);
  background-size:200% 100%;
  color:#07080F;
  font-family:'Geist',-apple-system,sans-serif;
  font-size:.83rem;font-weight:500;letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 12px 32px rgba(201,168,108,.32),
             0 4px 12px rgba(7,8,15,.4),
             inset 0 1px 0 rgba(255,255,255,.4);
  transform:translateY(80px);opacity:0;
  transition:transform .5s cubic-bezier(.23,1,.32,1),
             opacity .4s ease,
             box-shadow .25s ease,
             background-position .8s ease;
  animation:none;
  cursor:pointer
}
.h-sticky-cta.visible{
  transform:translateY(0);opacity:1
}
.h-sticky-cta:hover{
  background-position:100% 0;
  box-shadow:0 16px 40px rgba(201,168,108,.45),
             0 6px 16px rgba(7,8,15,.5),
             inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateY(-2px) !important
}
.h-sticky-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  font-size:.95rem;color:#07080F;
  animation:spin 8s linear infinite
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.h-sticky-arrow{font-size:1rem;line-height:1;transition:transform .25s ease}
.h-sticky-cta:hover .h-sticky-arrow{transform:translateX(3px)}
.h-sticky-text{line-height:1}
@media (max-width:768px){
  .h-sticky-cta{display:none !important}  /* el mobile-cta-bar ya cubre esto en móvil */
}

/* ─────────── 3. FLOATING PARTICLES (estilo useportal) ─────────── */
.h-hero-particles{
  position:absolute;inset:0;pointer-events:none;
  z-index:0;overflow:hidden
}
.h-hero-particles span{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s, 4px);height:var(--s, 4px);
  border-radius:50%;
  background:#1FCFC6;
  box-shadow:0 0 12px rgba(31,207,198,.6);
  opacity:.5;
  animation:hParticleFloat 7s ease-in-out infinite;
  animation-delay:var(--d, 0s);
  filter:blur(.5px)
}
.h-hero-particles span[style*="--c:gold"]{
  background:#E6CC8F;
  box-shadow:0 0 14px rgba(230,204,143,.7)
}
@keyframes hParticleFloat{
  0%, 100%{
    transform:translateY(0) translateX(0) scale(1);
    opacity:.3
  }
  25%{
    transform:translateY(-30px) translateX(15px) scale(1.3);
    opacity:.7
  }
  50%{
    transform:translateY(-12px) translateX(-20px) scale(.8);
    opacity:.5
  }
  75%{
    transform:translateY(20px) translateX(8px) scale(1.1);
    opacity:.6
  }
}

/* ─────────── 4. ATMOSPHERIC MESH GRADIENT HERO (estilo Giga) ─────────── */
/* Override del grid del hero — reemplazado por mesh atmosférico suave */
.h-hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 35% at 75% 30%, rgba(201,168,108,.18), transparent 65%),
    radial-gradient(ellipse 60% 40% at 20% 75%, rgba(31,207,198,.10), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(7,8,15,.5), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(7,8,15,.4) 100%);
  background-image:
    radial-gradient(ellipse 50% 35% at 75% 30%, rgba(201,168,108,.18), transparent 65%),
    radial-gradient(ellipse 60% 40% at 20% 75%, rgba(31,207,198,.10), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(7,8,15,.5), transparent 60%);
  filter:blur(4px);
  mask-image:none;
  -webkit-mask-image:none;
  opacity:1;
  animation:hMeshDrift 24s ease-in-out infinite alternate
}
@keyframes hMeshDrift{
  0%{
    background-position:0% 0%, 0% 0%, 0% 0%;
    transform:scale(1) rotate(0deg)
  }
  100%{
    background-position:8% -5%, -10% 8%, 0% 0%;
    transform:scale(1.05) rotate(.3deg)
  }
}

/* Subtle horizon line in hero — separa la atmósfera */
.h-hero::before{
  background:
    radial-gradient(ellipse 70% 45% at 78% 30%, rgba(201,168,108,.20), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 70%, rgba(31,207,198,.10), transparent 65%);
  filter:blur(20px);
  opacity:.9
}

/* ─────────── 5. TESTIMONIOS ESTILO COLLIDER (foto + serif italic giant) ─────────── */
/* Override del grid — el primer testimonio se vuelve "featured" gigante */
.h-testi-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:1.5rem;
  align-items:stretch
}
.h-testi-card:first-child{
  background:linear-gradient(180deg, rgba(201,168,108,.06) 0%, rgba(255,255,255,.02) 100%);
  border-color:rgba(201,168,108,.25);
  padding:3rem 2.5rem;
  position:relative;
  overflow:hidden
}
.h-testi-card:first-child::before{
  content:'"';
  position:absolute;top:-30px;right:30px;
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:14rem;line-height:1;
  color:rgba(201,168,108,.10);
  pointer-events:none
}
.h-testi-card:first-child .h-testi-text{
  font-size:1.45rem;line-height:1.4;
  color:var(--t-light-1);
  font-weight:300
}
.h-testi-card:first-child .h-testi-avatar{
  width:54px;height:54px;font-size:1.15rem
}
.h-testi-card:first-child .h-testi-name{font-size:1rem}

/* Avatar con foto / verified badge */
.h-testi-author{position:relative}
.h-testi-verified{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:5px;
  font-size:.68rem;color:#1FCFC6;
  letter-spacing:.06em;font-weight:500;
  text-transform:uppercase
}
.h-testi-verified svg{
  width:11px;height:11px;
  fill:#1FCFC6
}

@media (max-width:1100px){
  .h-testi-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
  .h-testi-card:first-child{grid-column:1/-1}
}
@media (max-width:768px){
  .h-testi-grid{grid-template-columns:1fr}
  .h-testi-card:first-child{grid-column:auto;padding:2rem 1.75rem}
  .h-testi-card:first-child .h-testi-text{font-size:1.15rem}
  .h-testi-card:first-child::before{font-size:9rem;top:-15px;right:15px}
}

/* ════════════════════════════════════════════════════════════════
   TANDA 3 — WORDMARK · GLASS QUOTE · AVATARS · PRICING STRIP · PRECIOS
   ════════════════════════════════════════════════════════════════ */

/* ─────────── 1. WORDMARK GIGANTE BACKDROP (estilo Collider) ─────────── */
.h-hero-wordmark{
  position:absolute;left:0;right:0;top:8%;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:0;
  width:100%;
  filter:blur(.3px)
}
.h-hero-wordmark-text{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-size:clamp(7rem, 17vw, 17rem);
  letter-spacing:-.04em;
  line-height:.85;
  background:linear-gradient(180deg,
    rgba(201,168,108,.10) 0%,
    rgba(201,168,108,.06) 40%,
    rgba(31,207,198,.02) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(201,168,108,.20);
  text-stroke:1px rgba(201,168,108,.20);
  user-select:none;white-space:nowrap;
  position:relative
}
.h-hero-wordmark-star{
  position:absolute;
  width:clamp(3rem, 7vw, 7rem);height:clamp(3rem, 7vw, 7rem);
  top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(0deg);
  color:rgba(201,168,108,.20);
  animation:hWordmarkStar 18s linear infinite
}
@keyframes hWordmarkStar{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@media (max-width:1100px){
  .h-hero-wordmark{top:5%}
}
@media (max-width:768px){
  .h-hero-wordmark{top:3%;opacity:.55}
  .h-hero-wordmark-text{font-size:clamp(4rem, 24vw, 10rem)}
}

/* El hero content debe estar por encima del wordmark */
.h-hero-grid, .h-hero-content, .h-hero-visual{position:relative;z-index:2}
.h-hero-particles{z-index:1}

/* ─────────── 2. GLASS FLOATING TESTIMONIAL (estilo Collider Kim D) ─────────── */
.h-hero-quote{
  position:absolute;
  bottom:-40px;left:-30px;
  width:340px;
  background:rgba(13,15,27,.78);
  backdrop-filter:blur(28px) saturate(1.3);
  -webkit-backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:1.5rem 1.6rem;
  box-shadow:0 24px 64px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.08);
  z-index:4;
  transform:translateY(0);
  animation:hQuoteFloat 6s ease-in-out infinite alternate
}
@keyframes hQuoteFloat{
  from{transform:translateY(0)}
  to{transform:translateY(-8px)}
}
.h-hero-quote-stars{display:flex;gap:2px;margin-bottom:.85rem}
.h-hero-quote-stars span{
  width:13px;height:13px;background:#C9A86C;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)
}
.h-hero-quote-text{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:300;
  font-size:.94rem;line-height:1.5;color:var(--t-light-1);
  margin-bottom:1.1rem
}
.h-hero-quote-foot{
  display:flex;align-items:center;gap:11px;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)
}
.h-hero-quote-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg, #C9A86C, #E6CC8F);
  color:#07080F;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:500;font-size:.85rem
}
.h-hero-quote-name{font-size:.82rem;color:var(--t-light-1);font-weight:500;line-height:1.2}
.h-hero-quote-meta{
  font-size:.7rem;color:var(--t-light-3);
  display:flex;align-items:center;gap:5px;margin-top:2px
}
@media (max-width:1100px){
  .h-hero-quote{
    position:relative;bottom:auto;left:auto;
    width:auto;margin:1.5rem 1rem 0;
    animation:none
  }
}

/* ─────────── 3. AVATAR CON FOTO (img generada UI Avatars) ─────────── */
.h-testi-avatar-img{
  padding:0;overflow:hidden;
  background:transparent !important;
  box-shadow:0 4px 14px rgba(201,168,108,.25);
  border:2px solid rgba(201,168,108,.35)
}
.h-testi-avatar-img img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%
}
/* Featured testimonial avatar más grande */
.h-testi-card:first-child .h-testi-avatar-img{
  width:54px;height:54px;
  border-color:rgba(201,168,108,.55);
  box-shadow:0 6px 20px rgba(201,168,108,.35)
}

/* ─────────── 4. PRICING STRIP PREMIUM ─────────── */
.h-pricing-strip{
  background:linear-gradient(180deg, var(--void-2) 0%, var(--void) 100%);
  padding:80px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.h-pricing-strip::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 50%, rgba(201,168,108,.08), transparent 60%);
  opacity:.7
}
.h-pricing-strip-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:0;position:relative;z-index:1;
  border:1px solid var(--line-dark-2);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  overflow:hidden
}
.h-ps-cell{
  padding:2.5rem 2rem;
  border-right:1px solid var(--line-dark);
  position:relative;
  transition:background .3s ease
}
.h-ps-cell:last-child{border-right:none}
.h-ps-cell:hover{background:rgba(201,168,108,.04)}
.h-ps-num{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(2.6rem, 4.5vw, 4rem);
  line-height:1;letter-spacing:-.03em;
  color:#C9A86C;
  margin-bottom:1rem;
  display:flex;align-items:baseline;gap:6px;
  font-variant-numeric:tabular-nums
}
.h-ps-num span{
  font-size:.32em;color:rgba(201,168,108,.7);
  font-style:italic;font-weight:400;letter-spacing:.04em;
  text-transform:lowercase
}
.h-ps-lbl{
  font-size:.85rem;color:var(--t-light-3);
  line-height:1.55;font-weight:300
}
.h-ps-lbl strong{
  display:block;color:var(--t-light-1);
  font-weight:500;font-size:.95rem;
  margin-bottom:3px;letter-spacing:.005em
}
.h-ps-cta{
  display:flex;align-items:center;justify-content:center;
  gap:1.25rem;flex-wrap:wrap;
  margin-top:2.5rem;
  position:relative;z-index:1
}
.h-ps-cta-meta{
  font-size:.78rem;color:var(--t-light-4);
  letter-spacing:.04em
}
@media (max-width:1100px){
  .h-pricing-strip-grid{grid-template-columns:repeat(2, 1fr)}
  .h-ps-cell:nth-child(1), .h-ps-cell:nth-child(3){border-right:1px solid var(--line-dark)}
  .h-ps-cell:nth-child(2){border-right:none}
  .h-ps-cell:nth-child(-n+2){border-bottom:1px solid var(--line-dark)}
}
@media (max-width:640px){
  .h-pricing-strip{padding:60px 0}
  .h-pricing-strip-grid{grid-template-columns:1fr}
  .h-ps-cell{border-right:none !important;border-bottom:1px solid var(--line-dark)}
  .h-ps-cell:last-child{border-bottom:none}
  .h-ps-num{font-size:2.4rem}
}

/* ─────────── 5. PRECIOS DRAMÁTICOS EN SERVICE CARDS ─────────── */
.h-svc-meta{
  align-items:flex-end !important;
  padding-top:1.75rem !important
}
.h-svc-price{
  font-family:'Geist',-apple-system,sans-serif !important;
  font-weight:500 !important;
  font-size:.62rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--t-light-4) !important;
  line-height:1.2 !important;
  display:flex !important;flex-direction:column !important;
  gap:6px !important
}
.h-svc-price em{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic !important;font-weight:400 !important;
  font-size:2.4rem !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  color:#E6CC8F !important;
  line-height:1 !important;
  display:block !important;
  text-shadow:0 0 24px rgba(230,204,143,.15)
}

/* ════════════════════════════════════════════════════════════════
   TANDA 4 — CINEMATIC VIDEO SHOWCASE (Leonardo gold particles)
   ════════════════════════════════════════════════════════════════ */
.h-cinema{
  position:relative;
  width:100%;
  min-height:90vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#000;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  isolation:isolate
}
.h-cinema-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  opacity:.65
}
.h-cinema-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(7,8,15,.35), rgba(7,8,15,.78) 80%),
    linear-gradient(180deg, rgba(7,8,15,.4) 0%, rgba(7,8,15,.6) 100%)
}
.h-cinema-content{
  position:relative;z-index:2;
  text-align:center;
  max-width:880px;
  padding:6rem 2rem
}
.h-cinema-title{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(2.5rem, 6vw, 5.5rem);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--t-light-1);
  margin:1.75rem 0;
  text-shadow:0 4px 32px rgba(0,0,0,.6)
}
.h-cinema-title em{
  font-style:italic;
  background:linear-gradient(135deg, #E6CC8F 0%, #C9A86C 50%, #E6CC8F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:svShimmer 8s ease-in-out infinite
}
.h-cinema-sub{
  font-size:1.05rem;
  color:rgba(231,233,240,.85);
  font-weight:300;
  line-height:1.75;
  max-width:640px;margin:0 auto 3rem;
  text-shadow:0 2px 16px rgba(0,0,0,.5)
}
.h-cinema-meta{
  display:flex;align-items:center;justify-content:center;
  gap:2rem;flex-wrap:wrap;
  padding-top:2.5rem;
  border-top:1px solid rgba(255,255,255,.10)
}
.h-cinema-stat{text-align:center}
.h-cinema-num{
  font-family:var(--font-serif);
  font-weight:300;font-size:clamp(2rem, 3.5vw, 3rem);
  color:#E6CC8F;
  letter-spacing:-.02em;
  line-height:1;
  margin-bottom:.45rem
}
.h-cinema-num em{
  font-style:normal;font-size:.7em;
  margin-left:.2em;color:rgba(230,204,143,.85)
}
.h-cinema-lbl{
  font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(231,233,240,.65);
  font-weight:500
}
.h-cinema-divider{
  width:1px;height:50px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.20), transparent)
}
@media (max-width:768px){
  .h-cinema{min-height:70vh}
  .h-cinema-content{padding:3.5rem 1.5rem}
  .h-cinema-title{font-size:clamp(2rem, 9vw, 3.5rem)}
  .h-cinema-meta{gap:1rem}
  .h-cinema-divider{display:none}
}

/* ════════════════════════════════════════════════════════════════
   TANDA 5 — FOUNDER NOTE · LIVE ACTIVITY · WORKFLOW VIZ
   ════════════════════════════════════════════════════════════════ */

/* ─────────── 1. FOUNDER NOTE (estilo Portal personal memo) ─────────── */
.h-founder{
  background:linear-gradient(180deg, var(--void) 0%, var(--void-2) 100%);
  padding:130px 0;
  border-top:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.h-founder::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 70% at 30% 50%, rgba(201,168,108,.10), transparent 60%)
}
.h-founder-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.3fr;gap:5rem;
  align-items:center;max-width:1180px;margin:0 auto
}
.h-founder-portrait{
  position:relative;
  border-radius:24px;overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.5);
  border:1px solid var(--line-dark-2);
  aspect-ratio:4/5;
  background:var(--void-3)
}
.h-founder-portrait img{
  width:100%;height:100%;object-fit:cover;display:block
}
.h-founder-badge{
  position:absolute;bottom:24px;left:24px;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;
  background:rgba(13,15,27,.85);backdrop-filter:blur(20px);
  border:1px solid var(--line-dark-3);
  font-size:.7rem;color:var(--t-light-1);letter-spacing:.06em;
  font-weight:500;font-family:var(--font-sans)
}
.h-founder-content{position:relative}
.h-founder-title{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem, 4.5vw, 3.6rem);
  line-height:1.1;letter-spacing:-.025em;
  color:var(--t-light-1);
  margin:1.5rem 0 2rem
}
.h-founder-title em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-founder-text p{
  font-size:1.05rem;color:var(--t-light-2);line-height:1.85;
  font-weight:300;margin-bottom:1.25rem
}
.h-founder-text p strong{
  color:var(--gold);font-weight:500;font-style:italic
}
.h-founder-sign{
  margin-top:2.5rem;padding-top:2rem;
  border-top:1px solid var(--line-dark)
}
.h-founder-signature{
  display:block;
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-weight:400;font-size:1.6rem;color:var(--t-light-1);
  letter-spacing:-.01em
}
.h-founder-role{
  display:block;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-light-3);font-weight:500;margin-top:6px
}
@media (max-width:900px){
  .h-founder-grid{grid-template-columns:1fr;gap:3rem}
  .h-founder-portrait{max-width:340px;margin:0 auto}
  .h-founder{padding:80px 0}
}

/* ─────────── 2. LIVE ACTIVITY CARDS (estilo Portal Payment Received) ─────────── */
.h-live{
  background:var(--void);padding:120px 0;
  border-top:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.h-live::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 70% 50%, rgba(31,207,198,.06), transparent 65%)
}
.h-live-header{text-align:center;max-width:680px;margin:0 auto 4rem;position:relative;z-index:1}
.h-live-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2.2rem, 4.2vw, 3.6rem);
  line-height:1.05;letter-spacing:-.025em;color:var(--t-light-1);
  margin-top:1.5rem
}
.h-live-header h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-live-header p{
  font-size:1rem;color:var(--t-light-3);font-weight:300;line-height:1.7;
  margin-top:1rem
}
.h-live-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
  max-width:880px;margin:0 auto;
  position:relative;z-index:1
}
.h-live-card{
  display:flex;align-items:center;gap:1.1rem;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line-dark-2);
  border-radius:16px;padding:1.25rem 1.4rem;
  position:relative;
  transition:transform .35s ease, border-color .3s ease, box-shadow .3s ease;
  animation:hLiveSlide .8s cubic-bezier(.23,1,.32,1) both
}
.h-live-card--1{animation-delay:0s}
.h-live-card--2{animation-delay:.15s}
.h-live-card--3{animation-delay:.30s}
.h-live-card--4{animation-delay:.45s}
@keyframes hLiveSlide{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.h-live-card:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(0,0,0,.4)
}
.h-live-icon{
  flex-shrink:0;
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center
}
.h-live-icon--gold{background:rgba(201,168,108,.12);color:var(--gold);border:1px solid rgba(201,168,108,.20)}
.h-live-icon--teal{background:rgba(31,207,198,.10);color:var(--teal);border:1px solid rgba(31,207,198,.20)}
.h-live-cell{flex:1}
.h-live-title{
  font-size:.95rem;color:var(--t-light-1);font-weight:500;
  letter-spacing:.005em;line-height:1.3
}
.h-live-title em{font-style:italic;color:var(--gold);font-weight:400}
.h-live-meta{
  font-size:.78rem;color:var(--t-light-4);
  margin-top:3px;line-height:1.4
}
.h-live-pulse{
  position:absolute;top:14px;right:14px;
  width:10px;height:10px
}
.h-live-pulse span{
  position:absolute;inset:0;border-radius:50%;
  background:var(--teal);
  animation:hLivePulse 2s ease-out infinite
}
.h-live-pulse::after{
  content:'';position:absolute;inset:2px;border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 12px var(--teal)
}
@keyframes hLivePulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(2);opacity:0}
  100%{transform:scale(2);opacity:0}
}
.h-live-footnote{
  text-align:center;margin-top:3rem;
  font-size:.74rem;color:var(--t-light-4);letter-spacing:.04em;
  position:relative;z-index:1
}
@media (max-width:768px){
  .h-live-grid{grid-template-columns:1fr;gap:.85rem}
  .h-live{padding:80px 0}
}

/* ─────────── 3. WORKFLOW CANVAS (estilo Giga Agent Canvas) ─────────── */
.h-workflow{
  background:var(--void-2);padding:120px 0;
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  position:relative;overflow:hidden
}
.h-workflow::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 25% 50%, rgba(201,168,108,.08), transparent 60%),
    radial-gradient(40% 50% at 75% 50%, rgba(31,207,198,.06), transparent 60%)
}
.h-workflow-header{text-align:center;max-width:760px;margin:0 auto 5rem;position:relative;z-index:1}
.h-workflow-header h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1.1;letter-spacing:-.025em;color:var(--t-light-1);
  margin-top:1.5rem
}
.h-workflow-header h2 em{
  font-style:italic;
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.h-workflow-canvas{
  display:flex;align-items:center;justify-content:center;
  gap:.5rem;flex-wrap:wrap;
  max-width:1280px;margin:0 auto;
  position:relative;z-index:1
}
.h-workflow-step{
  flex:1;min-width:200px;max-width:240px;
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line-dark-2);
  border-radius:16px;
  padding:1.75rem 1.5rem;text-align:center;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease
}
.h-workflow-step:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.4)
}
.h-workflow-num{
  display:inline-block;
  font-family:var(--font-serif);font-style:italic;font-weight:300;
  font-size:.95rem;color:var(--gold);
  margin-bottom:1rem;letter-spacing:.04em
}
.h-workflow-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(201,168,108,.10);
  border:1px solid rgba(201,168,108,.20);
  color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.25rem;
  transition:transform .3s ease
}
.h-workflow-step:hover .h-workflow-icon{transform:scale(1.08)}
.h-workflow-name{
  font-family:var(--font-serif);font-weight:400;font-size:1.1rem;
  color:var(--t-light-1);margin-bottom:.5rem;letter-spacing:-.005em
}
.h-workflow-desc{
  font-size:.82rem;color:var(--t-light-3);line-height:1.55;font-weight:300
}
.h-workflow-arrow{
  color:var(--gold);opacity:.4;
  transition:opacity .3s ease, transform .3s ease;
  flex:0 0 auto
}
.h-workflow-arrow:hover, .h-workflow-canvas:hover .h-workflow-arrow{opacity:.7}
.h-workflow-foot{text-align:center;margin-top:4rem;position:relative;z-index:1}
@media (max-width:900px){
  .h-workflow-canvas{flex-direction:column;gap:1rem}
  .h-workflow-step{max-width:100%;width:100%}
  .h-workflow-arrow{transform:rotate(90deg)}
  .h-workflow{padding:80px 0}
}

/* ════════════════════════════════════════════════════════════════
   FIXES TANDA 6 — Hero video · Founder · Team cards dark
   ════════════════════════════════════════════════════════════════ */

/* TEAM SECTION — todo dark coherente con el resto de la web */
.h-team{
  background:var(--void) !important;
  color:var(--t-light-1) !important
}
.h-team-header h2{color:var(--t-light-1) !important}
.h-team-header h2 em{
  font-style:italic;
  color:#E6CC8F !important;
  background:none !important;
  background-image:none !important;
  -webkit-text-fill-color:#E6CC8F !important
}
.h-team-header p{color:var(--t-light-3) !important}
.h-team-header .h-overline.dark{color:#C9A86C !important}
.h-team-header .h-overline.dark::before{background:#C9A86C !important}

/* Card del equipo: fondo dark glass, no blanco */
.h-team-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:var(--t-light-1) !important
}
.h-team-card:hover{
  border-color:#C9A86C !important;
  background:linear-gradient(180deg, rgba(201,168,108,.06), rgba(255,255,255,.01)) !important;
  box-shadow:0 24px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,108,.18) !important
}

/* Texto del equipo: claro sobre dark */
.h-team-info{
  background:transparent !important;
  padding-top:1.85rem !important
}
.h-team-name{color:var(--t-light-1) !important}
.h-team-role{
  color:#C9A86C !important;
  letter-spacing:.14em !important;
  text-transform:uppercase;
  font-size:.74rem !important;
  font-weight:500
}
.h-team-bio{color:var(--t-light-3) !important;line-height:1.7}



/* Hero video (Pexels real, no IA) — fondo void hasta que cargue (no poster) */
.h-hero-visual{background:var(--void) !important}
.h-hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
  background:var(--void)
}
.h-hero-visual-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,8,15,.15) 0%, rgba(7,8,15,.55) 100%),
    radial-gradient(70% 90% at 50% 50%, rgba(7,8,15,.05), rgba(7,8,15,.35) 100%)
}
.h-hero-floating{z-index:3}
.h-hero-wordmark{display:none !important}

/* Founder portrait fix — sin recorte raro */
.h-founder-portrait{
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:520px;max-height:680px
}
.h-founder-portrait img{
  width:100% !important;
  height:auto !important;
  min-height:520px;max-height:680px;
  object-fit:cover !important;
  object-position:center top !important;
  display:block
}
@media (max-width:900px){
  .h-founder-portrait{min-height:auto;max-height:none;aspect-ratio:4/5 !important}
  .h-founder-portrait img{min-height:auto;max-height:none;height:100% !important}
}

/* Team photos — frame oscuro + filter para fondos blancos */
.h-team-portrait{
  position:relative;
  background:
    linear-gradient(135deg, rgba(201,168,108,.10), rgba(7,8,15,0)),
    var(--void-3) !important;
  isolation:isolate
}
.h-team-portrait::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,8,15,0) 0%, rgba(7,8,15,0) 55%, rgba(7,8,15,.5) 100%)
}
.h-team-portrait::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 100px rgba(7,8,15,.6);
  background:radial-gradient(120% 100% at 50% 30%, transparent 45%, rgba(7,8,15,.30) 100%)
}
.h-team-portrait img,
.h-team-portrait picture img{
  filter:contrast(1.08) saturate(.72) brightness(.92) !important;
  position:relative;z-index:1
}
.h-team-card:hover .h-team-portrait img{
  filter:contrast(1.06) saturate(.92) brightness(1.0) !important
}

/* Subpages team portraits — same treatment */
.team-member-portrait{
  position:relative;background:var(--void-3) !important;isolation:isolate
}
.team-member-portrait::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(7,8,15,0) 0%, rgba(7,8,15,0) 55%, rgba(7,8,15,.5) 100%)
}
.team-member-portrait::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 100px rgba(7,8,15,.6)
}
.team-member-portrait img{
  filter:contrast(1.08) saturate(.72) brightness(.92) !important;
  position:relative;z-index:1
}

/* ─────────── REVEAL UTILITIES (sin opacity:0 default — animación es opcional) ─────────── */
/* Las animaciones de scroll-reveal son DECORATIVAS. Si GSAP no carga,
   el contenido se ve siempre. */

/* ─────────── RESPONSIVE BENTO ─────────── */
@media (max-width: 1100px){
  .h-bento-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:auto;
    grid-auto-rows:240px
  }
  .h-bento-cell--lg, .h-bento-cell--md, .h-bento-cell--tall{
    grid-column:span 2;grid-row:span 1
  }
  .h-bento-header{grid-template-columns:1fr;gap:1.5rem}
}
@media (max-width: 768px){
  .h-bento{padding:80px 0}
  .h-bento-grid{grid-template-columns:1fr !important;grid-auto-rows:auto;gap:.85rem}
  /* En móvil TODAS las cells ocupan 1 columna — ignorar span 2 del desktop */
  .h-bento-cell,
  .h-bento-cell--lg,
  .h-bento-cell--md,
  .h-bento-cell--tall{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
  }
  .h-bento-cell{padding:1.75rem;min-height:200px}
  .h-bento-cell--lg h3{font-size:1.5rem}
  .h-banner{padding:90px 0}
  .h-press{padding:40px 0}
  .h-press-track{gap:2rem}
  .h-press-logo{font-size:1.05rem}
  .h-compare{padding:80px 0}
  .h-compare-table{margin:0 1rem}
  .h-compare-row{grid-template-columns:1.4fr .8fr .8fr}
  .h-compare-row > div{padding:1rem 1.25rem;font-size:.85rem}
}