/* ============================================================
   INVERSIÓN · 05-cierre  (#empieza)  — prefijo ci
   «La ventana»: marco de oro líquido que se llena desde la base, gotas
   lentas en el canto superior y la terraza al anochecer adentro.
   Estado por defecto (sin JS / ?reduce) = estado final: oro lleno, todo visible.
   ============================================================ */
#empieza{position:relative;isolation:isolate;overflow:clip;color:var(--cream);
  padding-block:clamp(72px,11vw,170px);
  background:
    radial-gradient(70% 46% at 50% 100%,rgba(216,166,70,.10),transparent 70%),
    linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 55%,var(--ink) 100%);
  --rim:9px}

/* ---------- Marco ---------- */
#empieza .ci__frame{position:relative;width:min(80vw,1560px);min-height:70vh;min-height:70svh;margin-inline:auto;
  display:flex;align-items:flex-end;border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--ink-2);
  box-shadow:0 50px 140px -50px rgba(216,166,70,.38),0 30px 80px -30px rgba(0,0,0,.8);
  transform-origin:50% 60%;will-change:transform}
#empieza .ci__media{position:absolute;inset:0;z-index:0;overflow:hidden;transform-origin:50% 55%;will-change:transform}
#empieza .ci__img,#empieza .ci__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 50%;
  display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;color:transparent;font-size:0}
#empieza .ci__media picture{position:absolute;inset:0;display:block}
#empieza .ci__video{opacity:0;transition:opacity 1.4s var(--ease)}
#empieza.ci--video .ci__video{opacity:1}

/* Velo tinta: texto a la izquierda/abajo con contraste AA; el mar se entona a tinta */
#empieza .ci__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,9,15,.92) 0%,rgba(5,9,15,.78) 30%,rgba(5,9,15,.32) 58%,rgba(5,9,15,0) 78%),
    linear-gradient(0deg,rgba(5,9,15,.88) 0%,rgba(5,9,15,.35) 34%,rgba(5,9,15,0) 60%),
    linear-gradient(180deg,rgba(5,9,15,.42) 0%,rgba(5,9,15,0) 22%)}

/* Luz de oro que se mete desde el canto */
#empieza .ci__glow{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(5,9,15,.7),inset 0 0 70px -12px rgba(216,166,70,.42),inset 0 -40px 90px -50px rgba(244,213,138,.35)}

/* ---------- Canto de oro líquido (se llena de abajo arriba por los 4 lados) ---------- */
#empieza .ci__rim{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;padding:var(--rim);overflow:hidden;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  background:rgba(216,166,70,.10)}
#empieza .ci__liq{position:absolute;inset:0;display:block;overflow:hidden;will-change:transform;
  background:
    linear-gradient(180deg,#FFF4D2 0,#F7E2A8 2px,rgba(244,213,138,0) 18px),
    linear-gradient(0deg,#8F6524 0%,#C9A050 18%,#F4D58A 46%,#E0B661 64%,#F7E2A8 82%,#C9A050 100%)}
/* brillo lento que recorre el oro (solo transform: compuesto, sin repintar) */
#empieza .ci__liq:after{content:"";position:absolute;top:0;bottom:0;left:-100%;width:300%;
  background:linear-gradient(100deg,rgba(255,246,220,0) 44%,rgba(255,246,220,.62) 50%,rgba(255,246,220,0) 56%);
  transform:translate3d(-34%,0,0);animation:ci-sheen 11s linear infinite;animation-play-state:paused}
#empieza.is-live .ci__liq:after{animation-play-state:running}
@keyframes ci-sheen{from{transform:translate3d(-34%,0,0)}to{transform:translate3d(34%,0,0)}}

/* ---------- Gotas que cuelgan del canto superior ---------- */
#empieza .ci__drops{position:absolute;left:0;right:0;top:0;height:160px;z-index:5;pointer-events:none;opacity:0;transition:opacity .8s}
#empieza.is-drip .ci__drops{opacity:1}
#empieza .ci__drop{position:absolute;top:calc(var(--rim) - 1px);left:var(--x);width:18px;height:150px;margin-left:-9px}
#empieza .ci__drop:before,#empieza .ci__drop:after{content:"";position:absolute;left:50%;top:0;
  animation-duration:var(--du,10s);animation-delay:var(--dl,0s);animation-iteration-count:infinite;animation-play-state:paused}
/* cuello: nace ancho en el canto y se afina */
#empieza .ci__drop:before{width:16px;height:30px;margin-left:-8px;transform-origin:50% 0;transform:scaleY(0);
  clip-path:polygon(0 0,100% 0,64% 100%,36% 100%);
  background:linear-gradient(180deg,#E0B661,#F4D58A 55%,#C9A050);animation-name:ci-neck}
/* gota */
#empieza .ci__drop:after{width:12px;height:16px;margin-left:-6px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;
  background:radial-gradient(circle at 36% 34%,#FFF4D2 0 14%,#F4D58A 30%,#D8A646 62%,#8F6524 100%);
  box-shadow:0 0 14px rgba(244,213,138,.55);opacity:0;transform:translateY(0) scale(.2);animation-name:ci-bead}
#empieza .ci__drop--d:after{width:11px;height:14px;margin-left:-5.5px}
#empieza.is-drip.is-live .ci__drop:before,#empieza.is-drip.is-live .ci__drop:after{animation-play-state:running}
@keyframes ci-neck{
  0%{transform:scaleY(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  48%{transform:scaleY(.55);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  63%{transform:scaleY(1)}
  66%{transform:scaleY(.22)}
  80%,100%{transform:scaleY(0)}}
@keyframes ci-bead{
  0%{opacity:0;transform:translateY(0) scale(.2);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  10%{opacity:1}
  48%{opacity:1;transform:translateY(14px) scale(.8,.86);animation-timing-function:cubic-bezier(.5,0,.8,.4)}
  63%{opacity:1;transform:translateY(27px) scale(.92,1.14)}
  66%{opacity:1;transform:translateY(31px) scale(1,1.06);animation-timing-function:cubic-bezier(.55,0,1,.6)}
  84%{opacity:0;transform:translateY(128px) scale(.8,1.3)}
  100%{opacity:0;transform:translateY(128px) scale(.8,1.3)}}

/* ---------- Contenido ---------- */
#empieza .ci__body{position:relative;z-index:4;width:100%;max-width:min(920px,60%);
  padding:clamp(32px,4.4vw,80px) clamp(30px,4.6vw,84px)}
#empieza .ci__logo{display:block;width:clamp(120px,10.5vw,170px);height:auto;margin:0 0 clamp(20px,2.6vh,30px);filter:drop-shadow(0 2px 16px rgba(5,9,15,.9))}
#empieza .ci__title{font-size:clamp(2.3rem,min(5.2vw,8.6vh),5.4rem);line-height:.98;text-wrap:balance}
#empieza .ci__title em{display:inline;padding:.02em .08em .14em 0;margin:-.02em -.08em -.14em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* El acento se mantiene en una línea solo con ancho de escritorio; en celular se parte para no salirse del marco */
@media (min-width:900px){#empieza .ci__title em{display:inline-block;white-space:nowrap}}
#empieza .ci__lead{margin-top:clamp(16px,2.4vh,26px);max-width:44ch;color:var(--cream);text-wrap:balance}
#empieza .ci__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(24px,3.6vh,40px)}
#empieza .ci__cta{min-height:56px;padding-inline:2.1em;font-size:1rem}
#empieza .ci__aviso{display:inline-flex;align-items:center;min-height:44px;font:600 .94rem/1.3 var(--sans);color:var(--gold-2);
  text-decoration:underline;text-decoration-color:rgba(244,213,138,.45);text-underline-offset:.26em;transition:text-decoration-color .3s,color .3s}
#empieza .ci__aviso:hover{text-decoration-color:var(--gold-2);color:#FFF1C8}

/* Relleno de oro de la cifra (lo activa cierre.js; sin JS queda el .gold normal) */
#empieza .ci__title em.gold.ci-fill{animation:none;-webkit-text-stroke:.6px rgba(244,213,138,.38);
  background-image:var(--ci-wave),var(--gold-grad),linear-gradient(rgba(244,213,138,.16),rgba(244,213,138,.16));
  background-repeat:repeat-x,no-repeat,no-repeat;
  background-size:1.4em .2em,220% var(--ci-h,0px),100% 100%;
  background-position:var(--ci-wx,0px) var(--ci-wy,200%),0% 100%,0 0;
  --ci-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7 C 10 1, 30 1, 40 7 S 70 13, 80 7 V12 H0Z' fill='%23E0B661'/%3E%3C/svg%3E")}

/* ---------- Celular y tableta ---------- */
@media (max-width:899.98px){
  #empieza{--rim:6px;padding-block:clamp(56px,14vw,96px)}
  #empieza .ci__frame{width:calc(100% - var(--gut)*2);min-height:78vh;min-height:78svh;
    padding-top:max(34vh,210px);padding-top:max(34svh,210px)}
  /* vertical 2:3: el piso oscuro (tercio inferior) queda bajo el texto; cortina, cama, linterna y mar suben a la parte limpia */
  #empieza .ci__img,#empieza .ci__video{top:-30%;height:130%;inset-inline:0;object-position:32% 50%}
  #empieza .ci__shade{background:
    linear-gradient(0deg,rgba(5,9,15,.94) 0%,rgba(5,9,15,.82) 38%,rgba(5,9,15,.3) 52%,rgba(5,9,15,0) 62%),
    linear-gradient(180deg,rgba(5,9,15,.32) 0%,rgba(5,9,15,0) 14%)}
  #empieza .ci__body{max-width:none;padding:clamp(20px,5.6vw,40px) clamp(20px,5.6vw,40px) clamp(16px,4.4vw,32px)}
  #empieza .ci__body:before{content:"";position:absolute;inset:-60px 0 0;z-index:-1;pointer-events:none;
    background:linear-gradient(0deg,rgba(5,9,15,.9) 0%,rgba(5,9,15,.84) 62%,rgba(5,9,15,.68) 82%,rgba(5,9,15,0) 100%)}
  #empieza .ci__logo{width:clamp(84px,24vw,124px);margin-bottom:14px}
  #empieza .ci__title{font-size:clamp(2.05rem,9.2vw,3.4rem);line-height:1}
  #empieza .ci__lead{font-size:max(15px,1rem);line-height:1.5;margin-top:12px;max-width:none;text-wrap:pretty}
  #empieza .ci__acts{flex-direction:column;align-items:stretch;gap:4px;margin-top:18px}
  #empieza .ci__cta{width:100%;min-height:54px;justify-content:center}
  #empieza .ci__aviso{justify-content:center;font-size:15px}
  #empieza .ci__drop{height:130px}
}
@media (max-width:899.98px) and (min-width:600px){
  #empieza .ci__body{max-width:560px}
}
@media (max-width:359.98px){
  #empieza .ci__title{font-size:1.9rem}
}
/* 360×640 y celulares bajos: menos cielo reservado, el texto nunca se corta */
@media (max-width:899.98px) and (max-height:700px){
  #empieza{scroll-margin-top:calc(var(--nav-h) + 8px)}
  #empieza .ci__frame{min-height:72vh;min-height:72svh;padding-top:max(18svh,112px)}
  #empieza .ci__body{padding-top:16px}
  #empieza .ci__logo{width:72px;margin-bottom:10px}
  #empieza .ci__acts{margin-top:14px}
  #empieza .ci__title{font-size:clamp(1.9rem,8.4vw,2.4rem)}
}
/* Pantallas bajas de escritorio: el texto nunca se corta (el marco crece con su contenido) */
@media (min-width:900px) and (max-height:760px){
  #empieza .ci__logo{width:120px;margin-bottom:16px}
}

/* ---------- Gama baja / sin backdrop: nada que cambie ---------- */
/* ---------- Movimiento reducido: oro lleno, sin gotas, sin escala ---------- */
html.reduce #empieza .ci__frame,html.reduce #empieza .ci__media{transform:none!important}
html.reduce #empieza .ci__drops{display:none}
html.reduce #empieza .ci__liq{transform:none!important}
html.reduce #empieza .ci__liq:after{animation:none;opacity:0}
@media (prefers-reduced-motion:reduce){
  #empieza .ci__drops{display:none}
  #empieza .ci__liq:after{animation:none;opacity:0}
}

/* integración · celular: el marco llega antes tras los pasos */
@media (max-width:899.98px){ #empieza{padding-top:28px} }

/* Celular: la terraza (vertical) arriba, COMPLETA y sin texto encima; logotipo, titular y botón debajo, dentro del mismo marco de oro */
@media (max-width:899.98px){
  #empieza .ci__frame,#empieza .ci__frame[style]{flex-direction:column;align-items:stretch;min-height:0;padding-top:0}
  #empieza .ci__frame:before{content:"";display:block;flex:none;width:100%;aspect-ratio:4/5}
  #empieza .ci__media{inset:0 0 auto 0;aspect-ratio:4/5}
  #empieza .ci__img,#empieza .ci__video{top:0;height:100%;object-position:50% 40%}
  #empieza .ci__shade{inset:0 0 auto 0;aspect-ratio:4/5;background:linear-gradient(180deg,rgba(5,9,15,0) 84%,rgba(8,18,28,.9) 100%)}
  #empieza .ci__body{padding-top:18px}
  #empieza .ci__body:before{inset:0}
}