/* ============================================================
   INVERSIÓN · 01-hero  (#inicio)  — prefijo ivh
   «La costa se enciende»: horizonte de oro que se dibuja, la costa se abre
   desde esa línea y «desde $500 USD.» se llena de oro líquido como marea.
   Sin JS: imagen completa, oro lleno, todo visible.
   ============================================================ */
#inicio{--hz:62%;--lv:1;--wx:0em;--sx:-160%;
  position:relative;display:block;height:100vh;height:100svh;min-height:600px;overflow:clip;isolation:isolate;
  background:var(--ink);color:var(--cream)}

/* ---------- Marco: imagen · video · velos ---------- */
#inicio .ivh__frame{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--ink-2);
  transform-origin:50% 38%;border-radius:var(--ivh-r,0px);will-change:transform}
#inicio .ivh__media{position:absolute;inset:0}
#inicio .ivh__img,#inicio .ivh__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%;
  user-select:none;-webkit-user-drag:none;pointer-events:none;color:transparent;font-size:0}
#inicio .ivh__video{opacity:0;transition:opacity 1.1s ease}
#inicio.ivh--video .ivh__video{opacity:1}
/* Velos: menú arriba, lectura a la izquierda, fundido a tinta abajo. El mar se entona a tinta. */
#inicio .ivh__shade{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,9,15,.78) 0,rgba(5,9,15,.3) calc(var(--nav-h) + 30px),rgba(5,9,15,0) calc(var(--nav-h) + 140px)),
    linear-gradient(0deg,rgba(5,9,15,1) 0%,rgba(5,9,15,.72) 9%,rgba(5,9,15,0) 26%),
    linear-gradient(90deg,rgba(5,9,15,.9) 0%,rgba(5,9,15,.76) 28%,rgba(5,9,15,.42) 46%,rgba(5,9,15,0) 62%)}
/* Hilo de oro del marco (aparece al encogerse) */
#inicio .ivh__thread{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--ivh-th,0);
  box-shadow:inset 0 0 0 1px rgba(216,166,70,.55),inset 0 1px 0 0 rgba(247,226,168,.7)}
/* Gotas de oro en la arista superior */
#inicio .ivh__drops{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none}
#inicio .ivh__drops i{position:absolute;top:-2px;width:5px;height:9px;margin-left:-2.5px;border-radius:50% 50% 50% 50%/38% 38% 62% 62%;
  background:linear-gradient(180deg,#F7E2A8,#D8A646 60%,#A77927);box-shadow:0 0 10px rgba(244,213,138,.45);opacity:0;transform-origin:50% 0}
#inicio .ivh__drops i:nth-child(1){left:22%}
#inicio .ivh__drops i:nth-child(2){left:57%}
#inicio .ivh__drops i:nth-child(3){left:81%}

/* ---------- Horizonte de oro ---------- */
#inicio .ivh__hz{position:absolute;z-index:1;left:0;right:0;top:var(--hz);height:1px;margin-top:-.5px;pointer-events:none;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(216,166,70,0) 0,#C9A050 3%,#F4D58A 18%,#E0B661 32%,rgba(216,166,70,.38) 50%,rgba(216,166,70,0) 68%);
  box-shadow:0 0 14px rgba(244,213,138,.28)}

/* ---------- Texto ---------- */
#inicio .ivh__body{position:absolute;inset:0;z-index:2;pointer-events:none}
#inicio .ivh__body>.wrap{height:100%}
/* Escritorio: el bloque de texto termina antes del 44 % del ancho de la ventana (la costa iluminada queda libre) */
#inicio .ivh__copy{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);
  max-width:min(860px,calc(44vw - max(0px,(100vw - var(--max)) / 2) - var(--gut)))}
#inicio .ivh__above{min-height:max(62svh,372px);justify-content:flex-end;display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--nav-h) + 12px) 0 clamp(20px,3.2vh,34px)}
#inicio .ivh__under{align-self:start;padding-top:clamp(22px,3.4vh,38px);pointer-events:auto}

#inicio .ivh__sign{display:flex;align-items:center;gap:18px;margin-bottom:clamp(18px,3vh,34px)}
#inicio .ivh__logo{position:relative;display:block;flex:none;width:120px;aspect-ratio:3048/1016}
#inicio .ivh__logo img{width:100%;height:100%;display:block}
#inicio .ivh__sweep{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,rgba(255,250,232,0) 38%,rgba(255,250,232,.95) 50%,rgba(255,250,232,0) 62%) 130% 0/260% 100% no-repeat;
  -webkit-mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat;mask:url(../../../assets/img/brand/fital-logo-mask.svg) center/contain no-repeat}
#inicio .ivh__eyebrow{margin:0;padding-left:18px;border-left:1px solid var(--hair);min-height:28px;font-size:.75rem;letter-spacing:.24em;color:var(--gold-2)}

#inicio .ivh__title{font-size:calc(clamp(2.8rem,min(6.1vw,10.4svh),7rem)*var(--ivh-fit,1));line-height:.96;letter-spacing:-.032em;margin:0;color:var(--cream)}
#inicio .ivh__l1{display:block}
#inicio .ivh__title .tn-line-mask{padding:.06em .14em .16em 0;margin:-.06em -.14em -.16em 0}
#inicio .ivh__em-mask{display:block;overflow:hidden;overflow:clip;padding:.04em .3em .2em 0;margin:-.04em -.3em -.2em 0}

/* «desde $500 USD.»: marea de oro con borde ondulado (background-clip:text) + brillo lento */
#inicio .ivh__title em{display:inline-block;white-space:nowrap;font-style:italic;font-weight:500;letter-spacing:-.02em;
  padding:.04em .16em .14em .02em;margin:-.04em -.16em -.14em -.02em;
  color:transparent;-webkit-text-fill-color:transparent;animation:none;
  background-image:
    linear-gradient(104deg,rgba(255,248,226,0) 30%,rgba(255,248,226,.9) 50%,rgba(255,248,226,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 240' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF1C8'/%3E%3Cstop offset='.08' stop-color='%23F4D58A'/%3E%3Cstop offset='.22' stop-color='%23E0B661'/%3E%3Cstop offset='.34' stop-color='%23F7E2A8'/%3E%3Cstop offset='.48' stop-color='%23D8A646'/%3E%3Cstop offset='.62' stop-color='%23C9A050'/%3E%3Cstop offset='1' stop-color='%23A77927'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 18 Q40 0 80 18 T160 18 V240 H0Z' fill='url(%23g)'/%3E%3Cpath d='M0 18 Q40 0 80 18 T160 18' fill='none' stroke='%23FFF6D8' stroke-width='3'/%3E%3C/svg%3E"),
    linear-gradient(rgba(243,234,219,.16),rgba(243,234,219,.16));
  background-size:45% 100%,1.7em 2.6em,100% 100%;
  background-repeat:no-repeat,repeat-x,no-repeat;
  background-position:var(--sx) 0,var(--wx) calc(1.02em - var(--lv)*1.38em),0 0;
  -webkit-background-clip:text;background-clip:text}
/* Gama baja / sin WebGL: la marea es un degradado CSS plano (sin borde SVG) */
#inicio.ivh--low .ivh__title em{
  background-image:
    linear-gradient(104deg,rgba(255,248,226,0) 30%,rgba(255,248,226,.9) 50%,rgba(255,248,226,0) 70%),
    linear-gradient(180deg,rgba(244,213,138,0) 0,#F7E2A8 5%,#F4D58A 12%,#E0B661 24%,#D8A646 44%,#A77927 100%),
    linear-gradient(rgba(243,234,219,.16),rgba(243,234,219,.16));
  background-repeat:no-repeat,no-repeat,no-repeat;background-size:45% 100%,100% 2.6em,100% 100%;
  background-position:var(--sx) 0,0 calc(1.02em - var(--lv)*1.38em),0 0}

#inicio .ivh__lead{max-width:40ch;color:var(--cream-2);text-wrap:pretty}
#inicio .ivh__lead .tn-line-mask{padding-bottom:.12em;margin-bottom:-.12em}
#inicio .ivh__cta{margin:clamp(22px,3.4vh,36px) 0 0;display:flex}
#inicio .ivh__cta .btn{min-height:56px;padding-inline:2em;font-size:1rem}

/* ---------- Indicador de scroll ---------- */
#inicio .ivh__scroll{position:absolute;z-index:3;right:max(var(--gut),92px);bottom:clamp(18px,3.4vh,36px);display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0 2px;
  border:0;background:none;cursor:pointer;font:600 .75rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--cream);transition:color .4s}
#inicio .ivh__scroll:hover{color:var(--gold-2)}
#inicio .ivh__scroll-l{position:relative;display:block;width:1px;height:40px;background:var(--line-2);overflow:hidden}
#inicio .ivh__scroll-l i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold-2);transform:translateY(-101%);animation:ivh-drip 2.4s var(--ease-io) infinite}
@keyframes ivh-drip{0%{transform:translateY(-101%)}55%{transform:translateY(0)}100%{transform:translateY(101%)}}
html.no-js #inicio .ivh__scroll{display:none}
html.reduce #inicio .ivh__scroll-l i{animation:none;transform:none}

/* ---------- Pantallas muy anchas: el texto queda más a la derecha (wrap centrado); el velo lo acompaña ---------- */
@media (min-width:1600px){
  #inicio .ivh__shade{background:
    linear-gradient(180deg,rgba(5,9,15,.78) 0,rgba(5,9,15,.3) calc(var(--nav-h) + 30px),rgba(5,9,15,0) calc(var(--nav-h) + 140px)),
    linear-gradient(0deg,rgba(5,9,15,1) 0%,rgba(5,9,15,.72) 9%,rgba(5,9,15,0) 26%),
    linear-gradient(90deg,rgba(5,9,15,.92) 0%,rgba(5,9,15,.82) 34%,rgba(5,9,15,.56) 52%,rgba(5,9,15,.2) 64%,rgba(5,9,15,0) 72%)}
  #inicio .ivh__hz{background:linear-gradient(90deg,rgba(216,166,70,0) 0,#C9A050 6%,#F4D58A 24%,#E0B661 40%,rgba(216,166,70,.38) 58%,rgba(216,166,70,0) 74%)}
}

/* ---------- Pantallas anchas pero bajas (1280×720) ---------- */
@media (min-width:900px) and (max-height:760px){
  #inicio .ivh__sign{margin-bottom:16px}
  #inicio .ivh__logo{width:104px}
  #inicio .ivh__under{padding-top:20px}
  #inicio .ivh__cta{margin-top:18px}
  #inicio .ivh__cta .btn{min-height:52px}
}

/* ---------- Celular y tableta vertical: costa vertical, logotipo arriba, texto abajo ---------- */
@media (max-width:899px){
  /* 92svh: asoma el borde de la siguiente sección; el hilo dorado de abajo dice «hay más» */
  #inicio{height:92vh;height:92svh;min-height:540px}
  #inicio .ivh__img,#inicio .ivh__video{object-position:50% 30%}
  #inicio .ivh__shade{background:
    linear-gradient(180deg,rgba(5,9,15,.8) 0,rgba(5,9,15,.25) calc(var(--nav-h) + 70px),rgba(5,9,15,0) calc(var(--nav-h) + 150px)),
    linear-gradient(0deg,rgba(5,9,15,1) 0%,rgba(5,9,15,.95) 28%,rgba(5,9,15,.86) 42%,rgba(5,9,15,.6) 56%,rgba(5,9,15,.22) 68%,rgba(5,9,15,0) 76%)}
  #inicio .ivh__hz{background:linear-gradient(90deg,rgba(216,166,70,0) 0,#C9A050 8%,#F4D58A 30%,#E0B661 60%,rgba(216,166,70,.3) 86%,rgba(216,166,70,0) 100%)}
  html.no-js #inicio .ivh__hz{display:none}
  #inicio .ivh__copy{max-width:none;grid-template-rows:minmax(0,1fr) auto auto}
  #inicio .ivh__above{display:contents;min-height:0}
  /* Firma dorada centrada bajo el menú (logotipo 92 px con barrido de luz + antetítulo); el texto queda abajo */
  #inicio .ivh__sign{grid-row:1;align-self:start;justify-self:center;flex-direction:column;gap:10px;margin:0;padding-top:calc(var(--nav-h) + 14px)}
  #inicio .ivh__logo{width:92px}
  #inicio .ivh__eyebrow{padding:0;border:0;min-height:0;font-size:.75rem;letter-spacing:.18em;text-align:center;text-shadow:0 1px 10px rgba(5,9,15,.9)}
  #inicio .ivh__title{grid-row:2;align-self:end;font-size:calc(clamp(2.15rem,10.2vw,3.6rem)*var(--ivh-fit,1));line-height:1;padding-bottom:18px}
  #inicio .ivh__under{grid-row:3;padding:20px 0 max(58px,calc(env(safe-area-inset-bottom,0px) + 48px))}
  #inicio .ivh__lead{font-size:1rem;line-height:1.6;max-width:42ch}
  #inicio .ivh__cta{margin-top:20px}
  #inicio .ivh__cta .btn{width:100%;min-height:54px}
  /* Pista «hay más»: «Desliza» (12 px) + hilo con gota que baja, centrados bajo el botón.
     La palabra se desvanece a los ~3 s (JS); el hilo sigue hasta el primer scroll. */
  #inicio .ivh__scroll{left:50%;right:auto;bottom:max(4px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);gap:10px;padding:0 10px;
    font-size:.75rem;letter-spacing:.24em;color:var(--cream)}
  #inicio .ivh__scroll-l{height:32px}
}
@media (min-width:600px) and (max-width:899px){
  #inicio .ivh__lead{font-size:1.12rem}
  #inicio .ivh__cta .btn{width:auto;min-width:320px}
}
/* Celular bajo (360×640): la costa debe seguir leyéndose (≥40 % del alto).
   El marco de la foto se acorta para que las villas iluminadas queden arriba del texto,
   y el texto se compacta (H1 ≈30 px, lead más corto en interlínea). */
@media (max-width:899px) and (max-height:700px){
  #inicio .ivh__media{bottom:24%}
  #inicio .ivh__img,#inicio .ivh__video{object-position:50% 38%}
  #inicio .ivh__shade{background:
    linear-gradient(180deg,rgba(5,9,15,.78) 0,rgba(5,9,15,.2) calc(var(--nav-h) + 56px),rgba(5,9,15,0) calc(var(--nav-h) + 120px)),
    linear-gradient(0deg,rgba(5,9,15,1) 0%,rgba(5,9,15,.96) 34%,rgba(5,9,15,.7) 44%,rgba(5,9,15,.15) 54%,rgba(5,9,15,0) 60%)}
  #inicio .ivh__sign{gap:8px;padding-top:calc(var(--nav-h) + 8px)}
  #inicio .ivh__logo{width:76px}
  #inicio .ivh__eyebrow{font-size:.75rem;letter-spacing:.16em}
  #inicio .ivh__title{font-size:calc(clamp(1.75rem,8.4vw,2.4rem)*var(--ivh-fit,1));padding-bottom:10px}
  #inicio .ivh__under{padding-top:10px;padding-bottom:max(50px,calc(env(safe-area-inset-bottom,0px) + 42px))}
  #inicio .ivh__lead{font-size:.9375rem;line-height:1.5}
  #inicio .ivh__cta{margin-top:14px}
  #inicio .ivh__cta .btn{min-height:52px}
}
/* Celular en horizontal */
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  #inicio{min-height:100svh}
  #inicio{height:100svh}
  #inicio .ivh__sign,#inicio .ivh__scroll{display:none}
  #inicio .ivh__media{bottom:0}
  #inicio .ivh__title{grid-row:2;font-size:clamp(1.8rem,8.5vh,2.6rem);padding-bottom:12px}
  #inicio .ivh__under{grid-row:3;padding:12px 0 18px}
  #inicio .ivh__lead{font-size:.9rem;max-width:60ch}
  #inicio .ivh__cta .btn{width:auto;min-width:260px;min-height:52px}
}

/* Celular: un solo logotipo (el de la barra); la firma del hero queda solo con «WTM (World Token Market)» */
@media (max-width:899px){
  #inicio .ivh__logo{display:none}
  #inicio .ivh__sign{padding-top:calc(var(--nav-h) + 22px)}
}
@media (max-width:899px) and (max-height:700px){
  #inicio .ivh__sign{padding-top:calc(var(--nav-h) + 14px)}
}