/*!
 * Cosmetics & Hygiene Innovation & Trends Day — Hero
 * Plugin: CTH Innovation Day · shortcode [cth_hero]
 */
/* ==========================================================================
   0 · TOKENS
   ========================================================================== */
#cth-hero{
  --cth-ink:#173f59;
  --cth-primary:#2e6c90;
  --cth-primary-dk:#1f5a80;
  --cth-primary-xdk:#184a6b;
  --cth-sky:#3f97b4;
  --cth-azure:#42baf0;
  --cth-cyan:#9fe7fb;
  --cth-ice:#eef8fc;
  --cth-muted:#4c6878;
  /* Valores por defecto: se ajustan desde C&H Day → Ajustes (se inyectan en el atributo style del hero) */
  --cth-prod-scale:1;
  --cth-logo-h:390;
  --cth-line:rgba(46,108,144,.16);
  --cth-ease:cubic-bezier(.16,1,.3,1);
  --cth-ease-io:cubic-bezier(.65,0,.35,1);
  --cth-sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cth-script:"Allura","Snell Roundhand","Brush Script MT",cursive;
}

/* ==========================================================================
   1 · RESET BLINDADO (aísla el hero del tema y del kit de Elementor)
   ========================================================================== */
#cth-hero,
#cth-hero *,
#cth-hero *::before,
#cth-hero *::after{box-sizing:border-box}

#cth-hero :where(h1,h2,p,dl,dt,dd,div,span,a,button,time,small,strong,canvas,svg,img,form,fieldset,legend,label,input){
  margin:0;padding:0;border:0;background:none;
  font:inherit;color:inherit;letter-spacing:normal;word-spacing:normal;
  text-transform:none;text-decoration:none;text-shadow:none;text-indent:0;
  box-shadow:none;border-radius:0;float:none;min-width:0;min-height:0;max-width:none;
}
#cth-hero img{display:block;height:auto;border:0;opacity:1;filter:none}
#cth-hero svg{display:block;overflow:visible}
#cth-hero ::selection{background:var(--cth-cyan);color:var(--cth-ink)}

/* ==========================================================================
   2 · CONTENEDOR
   ========================================================================== */
#cth-hero{
  position:relative;isolation:isolate;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:100vh;min-height:100svh;
  margin:0;padding:clamp(84px,11vh,124px) 20px clamp(76px,10vh,112px);
  background:#fff;color:var(--cth-ink);
  font-family:var(--cth-sans);font-size:16px;font-weight:400;line-height:1.5;
  text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow:visible;
}

/* Capa decorativa (recortada) */
#cth-hero .cth__stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}

/* ==========================================================================
   3 · MOLÉCULAS (canvas)
   ========================================================================== */
#cth-hero .cth__galaxy{position:absolute;inset:0;width:100%;height:100%;opacity:0;animation:cth-fade 2.4s var(--cth-ease) .2s forwards}

/* ==========================================================================
   4 · ONDAS / SEDA
   ========================================================================== */
#cth-hero .cth__waves{position:absolute;will-change:transform}
#cth-hero .cth__waves-in{position:relative;width:100%;height:100%}
#cth-hero .cth__wave{position:absolute;inset:0;width:100%;height:100%;will-change:transform;backface-visibility:hidden}

#cth-hero .cth__waves--tr{top:0;right:0;width:clamp(220px,36vw,640px);aspect-ratio:650/540}
#cth-hero .cth__waves--tr .cth__waves-in{animation:cth-in-tr 2s var(--cth-ease) both}
#cth-hero .cth__waves--tr .cth__wave{transform-origin:100% 0}

#cth-hero .cth__waves--bl{bottom:0;left:0;width:clamp(240px,37vw,680px);aspect-ratio:1016/753}
#cth-hero .cth__waves--bl .cth__waves-in{animation:cth-in-bl 2.2s var(--cth-ease) .1s both}
#cth-hero .cth__waves--bl .cth__wave{transform-origin:0 100%}

#cth-hero .cth__wave--1{animation:cth-silk-a 13s var(--cth-ease-io) infinite alternate}
#cth-hero .cth__wave--2{animation:cth-silk-b 16s var(--cth-ease-io) infinite alternate}
#cth-hero .cth__wave--3{animation:cth-silk-c 19s var(--cth-ease-io) infinite alternate}

/* ==========================================================================
   5 · PRODUCTOS FLOTANTES
   ========================================================================== */
#cth-hero .cth__p{position:absolute;width:calc(var(--w) * var(--cth-prod-scale,1));top:var(--t,auto);right:var(--r,auto);bottom:var(--b,auto);left:var(--l,auto);will-change:transform;z-index:1}
#cth-hero .cth__p-in{animation:cth-in-prod 1.6s var(--cth-ease) var(--d,.4s) both}
#cth-hero .cth__p img{width:100%;animation:cth-float var(--f,8s) ease-in-out var(--fd,0s) infinite;filter:drop-shadow(0 18px 22px rgba(23,63,89,.14))}

#cth-hero .cth__p--tube   {--w:clamp(150px,17vw,320px); --t:3%; --l:7%;--d:.45s;--f:9s}
#cth-hero .cth__p--jar    {--w:clamp(115px,12.5vw,230px);--t:11%;--r:5%; --d:.6s; --f:7.5s;--fd:-2s}
#cth-hero .cth__p--pump   {--w:clamp(170px,19.5vw,350px);--b:1%; --r:2.5%;--d:.75s;--f:10s;--fd:-4s}
#cth-hero .cth__p--serum  {--w:clamp(100px,11vw,195px);--b:11%;--l:5%; --d:.9s; --f:8.5s;--fd:-1s}
#cth-hero .cth__p--mascara{--w:clamp(75px,8vw,145px); --t:44%;--r:2.5%;--d:1.05s;--f:7s;--fd:-3s}

/* ==========================================================================
   6 · LAYOUT · Columna izquierda (evento) + columna derecha (formulario)
   ========================================================================== */
#cth-hero .cth__content{
  position:relative;z-index:3;width:100%;max-width:1240px;
  display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;
  gap:clamp(36px,6vw,56px);
}
#cth-hero .cth__intro{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;will-change:transform,opacity}

/* Logo */
#cth-hero .cth__logo{width:min(1000px,84vw,96vh);aspect-ratio:1200 / var(--cth-logo-h,557);overflow:hidden;margin:0;font-size:0;line-height:0;animation:cth-in-logo 1.4s var(--cth-ease) .2s both}
#cth-hero .cth__logo img{width:100%;max-width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* SAVE the DATE */
#cth-hero .cth__std{
  position:relative;display:inline-flex;flex-direction:column;align-items:flex-end;
  margin-top:clamp(6px,1.2vh,18px);
  font-family:var(--cth-sans);font-weight:800;font-size:clamp(2.9rem,min(9vw,11.2vh),7.25rem);
  line-height:.86;letter-spacing:-.015em;color:var(--cth-primary);
}
#cth-hero .cth__line{display:block;overflow:hidden;padding:.02em .02em .04em}
#cth-hero .cth__line > span{display:block;animation:cth-in-line 1.15s var(--cth-ease) both}
#cth-hero .cth__line--save > span{animation-delay:.55s}
#cth-hero .cth__line--date > span{animation-delay:.68s}
#cth-hero .cth__row{position:relative;display:block}
#cth-hero .cth__the{
  position:absolute;right:100%;top:-.08em;margin-right:-.2em;z-index:1;
  font-family:var(--cth-script);font-weight:400;font-size:.78em;line-height:1;
  letter-spacing:0;color:var(--cth-sky);transform:rotate(-8deg);transform-origin:100% 60%;
  padding:0 .06em;white-space:nowrap;
  animation:cth-in-write 1.3s var(--cth-ease-io) 1.05s both;
}

/* Tagline */
#cth-hero .cth__tagline{
  margin-top:clamp(14px,2.6vh,28px);
  font-size:clamp(1rem,1.75vw,1.5rem);font-weight:400;line-height:1.35;letter-spacing:.01em;
  color:var(--cth-primary);text-wrap:balance;animation:cth-in-up 1.2s var(--cth-ease) 1.15s both;
}

/* Detalles */
#cth-hero .cth__details{
  display:inline-flex;align-items:stretch;justify-content:center;
  margin-top:clamp(22px,4vh,42px);padding:12px 6px;
  background:rgba(255,255,255,.82);border:1px solid var(--cth-line);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 44px -28px rgba(23,63,89,.38);
  animation:cth-in-card 1.2s var(--cth-ease) 1.2s both;
}
#cth-hero .cth__d{display:flex;align-items:center;gap:12px;padding:4px 22px;text-align:left;animation:cth-in-up 1s var(--cth-ease) both}
#cth-hero .cth__d:nth-child(1){animation-delay:1.4s}
#cth-hero .cth__d:nth-child(2){animation-delay:1.5s}
#cth-hero .cth__d:nth-child(3){animation-delay:1.6s}
#cth-hero .cth__d + .cth__d{border-left:1px solid var(--cth-line)}
#cth-hero .cth__ico{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--cth-ice);color:var(--cth-primary)}
#cth-hero .cth__ico svg{width:18px;height:18px}
#cth-hero .cth__d dt{font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--cth-muted)}
#cth-hero .cth__d dd{margin-top:3px;font-size:15px;font-weight:600;line-height:1.3;color:var(--cth-ink);white-space:nowrap}

/* CTA */
#cth-hero .cth__ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:clamp(22px,4vh,38px);animation:cth-in-up 1.1s var(--cth-ease) 1.75s both}

/* ---- Escritorio: dos columnas ------------------------------------------ */
@media (min-width:1100px){
  #cth-hero .cth__content{grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);justify-items:stretch;gap:clamp(40px,5vw,88px)}
  #cth-hero .cth__intro{align-items:flex-start;text-align:left}
  #cth-hero{padding-top:clamp(64px,9vh,116px);padding-bottom:clamp(56px,8vh,100px)}
  #cth-hero .cth__logo{width:min(560px,100%)}
  #cth-hero .cth__std{font-size:clamp(2.8rem,min(5.4vw,8.8vh),5.8rem);align-self:center;margin-left:.34em}
  #cth-hero .cth__tagline{margin-top:clamp(10px,1.8vh,22px);font-size:clamp(1rem,1.4vw,1.3rem)}
  #cth-hero .cth__details{display:grid;grid-template-columns:auto auto minmax(0,1fr);width:100%;max-width:660px;margin-top:clamp(18px,3vh,34px);padding:12px 4px}
  #cth-hero .cth__d{padding:4px 18px}
  #cth-hero .cth__d dd{font-size:14.5px;white-space:normal}
  #cth-hero .cth__ctas{align-self:center;justify-content:center;margin-top:clamp(18px,3vh,32px)}
  /* productos reubicados para no chocar con las columnas */
  /* anclados al contenido (máx. 1240 px) para que no se vayan a los bordes en pantallas anchas */
  #cth-hero .cth__p--tube {--w:clamp(110px,9.5vw,190px);--t:-3%;--l:calc(50% - 150px)}
  #cth-hero .cth__p--jar  {--w:clamp(96px,8vw,156px);--t:clamp(6px,2vh,36px);--r:max(20px,calc(50% - 660px))}
  #cth-hero .cth__p--pump {--w:clamp(150px,13.5vw,260px);--b:-6%;--r:max(24px,calc(50% - 680px))}
  #cth-hero .cth__p--serum{--w:clamp(70px,6vw,116px);--b:1.5%;--l:calc(50% - 30px)}
}
/* Escritorio compacto: el borde derecho queda muy justo, se reacomodan dispensador y suero */
@media (min-width:1100px) and (max-width:1599px){
  #cth-hero .cth__p--pump {--w:clamp(150px,13vw,200px);--b:-7%;--r:auto;--l:calc(50% - 80px)}
  #cth-hero .cth__p--serum{--w:clamp(60px,5.2vw,82px);--b:3%;--l:1.2%}
  #cth-hero .cth__cue{display:none}
}
@media (min-width:1100px) and (max-width:1279px){
  #cth-hero .cth__details{grid-template-columns:repeat(3,minmax(0,1fr))}
  #cth-hero .cth__d{flex-direction:column;align-items:flex-start;gap:8px;padding:4px 14px}
  #cth-hero .cth__d dd{white-space:normal}
}
@media (min-width:1100px) and (max-height:860px){
  #cth-hero .cth__card{padding:24px 28px}
  #cth-hero .cth__form-title{margin-top:8px}
  #cth-hero .cth__grid{gap:10px 14px;margin-top:16px}
  #cth-hero .cth__opt-box{padding:11px 12px 10px;gap:8px}
  #cth-hero .cth__input,#cth-hero .cth__input:hover,#cth-hero .cth__input:focus,#cth-hero .cth__input:active{height:46px!important;min-height:46px!important}
  #cth-hero .cth__btn--submit,#cth-hero .cth__btn--submit:hover,#cth-hero .cth__btn--submit:focus,#cth-hero .cth__btn--submit:active{margin-top:14px!important}
}

/* ==========================================================================
   7 · BOTONES BLINDADOS (no heredan hover/focus/active del tema ni de Elementor)
   ========================================================================== */
#cth-hero .cth__btn,
#cth-hero .cth__btn:hover,
#cth-hero .cth__btn:focus,
#cth-hero .cth__btn:active,
#cth-hero .cth__btn:visited{
  -webkit-appearance:none!important;appearance:none!important;
  position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
  height:54px!important;min-height:54px!important;width:auto;margin:0!important;padding:0 28px!important;
  border:0!important;border-radius:999px!important;outline:0!important;
  font-family:var(--cth-sans)!important;font-size:15px!important;font-weight:600!important;
  line-height:1!important;letter-spacing:.02em!important;text-transform:none!important;
  text-decoration:none!important;text-shadow:none!important;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  overflow:hidden;transform:translateZ(0);
  transition:transform .5s var(--cth-ease),box-shadow .5s var(--cth-ease),background-color .35s ease,color .35s ease!important;
}
#cth-hero .cth__btn svg{width:18px;height:18px;flex:0 0 18px;transition:transform .5s var(--cth-ease)}

/* Primario */
#cth-hero .cth__btn--primary,
#cth-hero .cth__btn--primary:hover,
#cth-hero .cth__btn--primary:focus,
#cth-hero .cth__btn--primary:active,
#cth-hero .cth__btn--primary:visited{
  color:#fff!important;
  background:linear-gradient(135deg,var(--cth-primary) 0%,var(--cth-primary-dk) 55%,var(--cth-primary-xdk) 100%)!important;
  box-shadow:0 14px 30px -14px rgba(24,74,107,.75),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#cth-hero .cth__btn--primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .9s var(--cth-ease);
}

/* Secundario */
#cth-hero .cth__btn--ghost,
#cth-hero .cth__btn--ghost:hover,
#cth-hero .cth__btn--ghost:focus,
#cth-hero .cth__btn--ghost:active,
#cth-hero .cth__btn--ghost:visited{
  color:var(--cth-primary-dk)!important;
  background:rgba(255,255,255,.8)!important;
  box-shadow:inset 0 0 0 1.5px rgba(46,108,144,.38)!important;
}

@media (hover:hover){
  #cth-hero .cth__btn:hover{transform:translate3d(0,-2px,0)}
  #cth-hero .cth__btn--primary:hover{box-shadow:0 20px 38px -16px rgba(24,74,107,.85),inset 0 1px 0 rgba(255,255,255,.2)!important}
  #cth-hero .cth__btn--primary:hover::after{transform:translateX(120%)}
  #cth-hero .cth__btn--ghost:hover{background:var(--cth-ice)!important;box-shadow:inset 0 0 0 1.5px var(--cth-primary)!important}
  #cth-hero .cth__btn--ghost:hover svg{transform:translate3d(0,3px,0)}
}
#cth-hero .cth__btn:active{transform:scale(.97)!important}

/* Foco accesible propio (solo teclado) */
#cth-hero .cth__btn:focus-visible{
  box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--cth-primary-dk)!important;
}
#cth-hero .cth__btn--primary:focus-visible{
  box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--cth-primary-dk),0 14px 30px -14px rgba(24,74,107,.75)!important;
}

/* ==========================================================================
   8 · FORMULARIO DE REGISTRO (blindado contra estilos de formularios del tema)
   ========================================================================== */
#cth-hero [hidden]{display:none!important}
#cth-hero .cth__form-wrap{position:relative;width:100%;max-width:560px;min-width:0;animation:cth-in-card 1.3s var(--cth-ease) .85s both}
@media (min-width:1100px){#cth-hero .cth__form-wrap{justify-self:end;max-width:520px}}
#cth-hero .cth__card{
  position:relative;overflow:hidden;
  padding:clamp(22px,2.6vw,36px);
  background:rgba(255,255,255,.93);border:1px solid var(--cth-line);border-radius:28px;
  box-shadow:inset 0 1px 0 #fff,0 44px 90px -44px rgba(23,63,89,.5),0 14px 32px -20px rgba(23,63,89,.25);
  text-align:left;
}
#cth-hero .cth__card::before{ /* hilo de seda superior */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cth-primary-dk),var(--cth-azure) 55%,var(--cth-cyan));
}
#cth-hero .cth__card::after{ /* brillo sutil */
  content:"";position:absolute;right:-120px;top:-120px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(159,231,251,.35),rgba(159,231,251,0));pointer-events:none;
}
#cth-hero .cth__form,#cth-hero .cth__done{position:relative;z-index:1}

/* Encabezado */
#cth-hero .cth__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--cth-muted)}
#cth-hero .cth__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cth-azure);box-shadow:0 0 0 4px rgba(66,186,240,.18)}
#cth-hero .cth__form-title{margin-top:12px;font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:800;line-height:1.1;letter-spacing:-.015em;color:var(--cth-primary)}
#cth-hero .cth__form-sub{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--cth-muted)}

/* Rejilla de campos */
#cth-hero .cth__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px}
#cth-hero .cth__field{display:flex;flex-direction:column;gap:6px;min-width:0}
#cth-hero .cth__field--full{grid-column:1 / -1}
#cth-hero .cth__label,
#cth-hero .cth__legend{display:block;float:none;width:auto;margin:0;padding:0;border:0;font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--cth-ink)}
#cth-hero fieldset.cth__field{margin:0;padding:0;border:0;min-width:0}

/* Inputs */
#cth-hero .cth__input,
#cth-hero .cth__input:hover,
#cth-hero .cth__input:focus,
#cth-hero .cth__input:active{
  -webkit-appearance:none!important;appearance:none!important;
  display:block!important;width:100%!important;max-width:100%!important;
  height:50px!important;min-height:50px!important;margin:0!important;padding:0 16px!important;
  border:1px solid rgba(46,108,144,.24)!important;border-radius:14px!important;
  background:#f7fbfd!important;background-image:none!important;
  color:var(--cth-ink)!important;font-family:var(--cth-sans)!important;font-size:16px!important;font-weight:500!important;
  line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;
  box-shadow:none!important;outline:0!important;
  transition:border-color .25s ease,box-shadow .35s var(--cth-ease),background-color .25s ease!important;
}
#cth-hero .cth__input::placeholder{color:#8098a6!important;opacity:1!important;font-weight:400!important}
#cth-hero .cth__input:hover{border-color:rgba(46,108,144,.42)!important}
#cth-hero .cth__input:focus{border-color:var(--cth-primary)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(66,186,240,.2)!important}
#cth-hero .cth__input[aria-invalid="true"]{border-color:#c2410c!important;background:#fffaf7!important}
#cth-hero .cth__input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px rgba(194,65,12,.14)!important}
#cth-hero .cth__input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #f2f9fc inset!important;-webkit-text-fill-color:var(--cth-ink)!important}

/* Mensajes de error */
#cth-hero .cth__err{font-size:12px;font-weight:500;line-height:1.35;color:#b42318}
#cth-hero .cth__err:empty{display:none}

/* Opciones de participación */
#cth-hero .cth__opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
#cth-hero .cth__opt{position:relative;display:block;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#cth-hero .cth__opt-input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;pointer-events:none}
#cth-hero .cth__opt-box{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;height:100%;
  padding:14px 12px 13px;border:1px solid rgba(46,108,144,.24);border-radius:16px;background:#f7fbfd;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .45s var(--cth-ease),transform .45s var(--cth-ease);
}
#cth-hero .cth__opt-box::after{ /* indicador de selección */
  content:"";position:absolute;top:11px;right:11px;width:16px;height:16px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(46,108,144,.32);background:#fff center/10px no-repeat;
  transition:background-color .25s ease,box-shadow .25s ease;
}
#cth-hero .cth__opt-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#fff;color:var(--cth-primary);box-shadow:inset 0 0 0 1px var(--cth-line);transition:background .3s ease,color .3s ease}
#cth-hero .cth__opt-ico svg{width:19px;height:19px}
#cth-hero .cth__opt-txt{font-size:13px;font-weight:600;line-height:1.3;color:var(--cth-ink);padding-right:14px}
@media (hover:hover){
  #cth-hero .cth__opt:hover .cth__opt-box{border-color:rgba(46,108,144,.45);transform:translate3d(0,-2px,0)}
}
#cth-hero .cth__opt-input:checked + .cth__opt-box{
  border-color:var(--cth-primary);background:#fff;
  box-shadow:0 0 0 3px rgba(66,186,240,.2),0 14px 26px -18px rgba(23,63,89,.6);
}
#cth-hero .cth__opt-input:checked + .cth__opt-box .cth__opt-ico{background:linear-gradient(140deg,#5fb6d2,var(--cth-primary));color:#fff;box-shadow:none}
#cth-hero .cth__opt-input:checked + .cth__opt-box::after{
  background-color:var(--cth-primary);box-shadow:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#cth-hero .cth__opt-input:focus-visible + .cth__opt-box{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--cth-primary-dk)}
#cth-hero .cth__field.is-invalid .cth__opt-box{border-color:rgba(194,65,12,.55)}

/* Honeypot anti-spam (invisible para personas) */
#cth-hero .cth__hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Estado del envío */
#cth-hero .cth__status{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:13.5px;font-weight:500;line-height:1.45;color:#8a1c12;background:#fff4f1;box-shadow:inset 0 0 0 1px rgba(180,35,24,.18)}
#cth-hero .cth__status:empty{display:none}

/* Botón de envío */
#cth-hero .cth__btn--submit,
#cth-hero .cth__btn--submit:hover,
#cth-hero .cth__btn--submit:focus,
#cth-hero .cth__btn--submit:active{width:100%!important;margin-top:18px!important}
#cth-hero .cth__btn--submit[disabled]{cursor:progress;opacity:.9}
#cth-hero .cth__spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:cth-spin .8s linear infinite}
#cth-hero .cth__btn--submit.is-loading .cth__spin{display:block}
#cth-hero .cth__btn--submit.is-loading .cth__btn-arrow{display:none}
@media (hover:hover){#cth-hero .cth__btn--submit:hover .cth__btn-arrow{transform:translate3d(4px,0,0)}}

#cth-hero .cth__note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--cth-muted);text-align:center}

/* Confirmación */
#cth-hero .cth__done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(18px,4vh,40px) 4px;outline:0;animation:cth-in-up .8s var(--cth-ease) both}
#cth-hero .cth__done-ico{width:76px;height:76px;color:var(--cth-primary)}
#cth-hero .cth__done-ico circle{stroke-dasharray:214;stroke-dashoffset:214;animation:cth-draw 1s var(--cth-ease) .1s forwards}
#cth-hero .cth__done-ico path{stroke-dasharray:40;stroke-dashoffset:40;animation:cth-draw .6s var(--cth-ease) .7s forwards}
#cth-hero .cth__done-title{margin-top:18px;font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:800;line-height:1.15;letter-spacing:-.015em;color:var(--cth-primary)}
#cth-hero .cth__done-txt{margin-top:10px;max-width:30em;font-size:15px;line-height:1.55;color:var(--cth-muted)}
#cth-hero .cth__done-txt strong{font-weight:600;color:var(--cth-ink);overflow-wrap:anywhere}
#cth-hero .cth__card.is-done{display:flex;flex-direction:column;justify-content:center}
#cth-hero .cth__done .cth__btn{margin-top:22px!important}

/* Indicador de scroll */
#cth-hero .cth__cue{position:absolute;left:50%;bottom:22px;z-index:3;width:1px;height:44px;margin-left:-.5px;overflow:hidden;background:rgba(46,108,144,.16);animation:cth-fade 1s ease 2.2s both}
#cth-hero .cth__cue::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--cth-primary);animation:cth-cue 2.2s var(--cth-ease-io) infinite}

/* Solo lectores de pantalla */
#cth-hero .cth__sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   9 · KEYFRAMES
   ========================================================================== */
@keyframes cth-fade{from{opacity:0}to{opacity:1}}
@keyframes cth-in-up{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes cth-in-card{from{opacity:0;transform:translate3d(0,18px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes cth-in-logo{from{opacity:0;transform:translate3d(0,20px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes cth-in-line{from{transform:translate3d(0,110%,0)}to{transform:none}}
@keyframes cth-in-write{from{opacity:0;clip-path:inset(-30% 100% -30% -10%)}20%{opacity:1}to{opacity:1;clip-path:inset(-30% -10% -30% -10%)}}
@keyframes cth-in-prod{from{opacity:0;transform:translate3d(0,50px,0) scale(.72) rotate(-28deg)}to{opacity:1;transform:none}}
@keyframes cth-in-tr{from{opacity:0;transform:translate3d(14%,-16%,0) scale(1.06)}to{opacity:1;transform:none}}
@keyframes cth-in-bl{from{opacity:0;transform:translate3d(-14%,16%,0) scale(1.06)}to{opacity:1;transform:none}}
@keyframes cth-float{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-12px,0) rotate(2.5deg)}}
@keyframes cth-silk-a{from{transform:rotate(0) skewX(0) scale(1,1)}to{transform:rotate(-2.4deg) skewX(-3deg) scale(1.03,1.07)}}
@keyframes cth-silk-b{from{transform:rotate(1.2deg) skewX(2deg) scale(1.02,1)}to{transform:rotate(-1.6deg) skewX(-2deg) scale(1,1.06)}}
@keyframes cth-silk-c{from{transform:rotate(-1deg) scale(1.04,1.02)}to{transform:rotate(2deg) skewX(3deg) scale(1,1.08)}}
@keyframes cth-spin{to{transform:rotate(360deg)}}
@keyframes cth-draw{to{stroke-dashoffset:0}}
@keyframes cth-cue{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,360%,0)}}

/* ==========================================================================
   10 · RESPONSIVE
   ========================================================================== */
@media (max-width:1099px){
  #cth-hero .cth__cue{display:none}
}
@media (max-width:1024px){
  #cth-hero .cth__p--tube   {--w:clamp(130px,21vw,230px);--t:12px;--l:2%}
  #cth-hero .cth__p--jar    {--w:clamp(100px,15vw,170px);--t:16px;--r:2%}
  #cth-hero .cth__p--pump   {--w:clamp(150px,25vw,260px);--b:0%;--r:-4%}
  #cth-hero .cth__p--serum  {--w:clamp(85px,13vw,140px);--b:9%;--l:1%}
  #cth-hero .cth__p--mascara{display:none}
  #cth-hero .cth__d{padding:4px 16px}
}
@media (max-width:1024px) and (orientation:portrait){
  #cth-hero .cth__std{font-size:clamp(3rem,12vw,7rem)}
  #cth-hero .cth__tagline{font-size:clamp(1rem,2.6vw,1.3rem)}
}
@media (max-width:760px){
  #cth-hero{padding:42px 16px 56px}
  #cth-hero .cth__content{gap:34px}
  #cth-hero .cth__logo{width:min(420px,88vw)}
  #cth-hero .cth__std{margin-top:6px;font-size:clamp(2.9rem,15vw,5rem)}
  #cth-hero .cth__tagline{margin-top:12px;font-size:clamp(.95rem,4vw,1.15rem);max-width:22em}
  #cth-hero .cth__details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:420px;margin-top:22px;padding:14px 2px;border-radius:18px}
  #cth-hero .cth__d{flex-direction:column;align-items:center;gap:7px;padding:0 8px;text-align:center}
  #cth-hero .cth__ico{flex-basis:32px;width:32px;height:32px}
  #cth-hero .cth__ico svg{width:16px;height:16px}
  #cth-hero .cth__d dt{font-size:10px;letter-spacing:.14em}
  #cth-hero .cth__d dd{margin-top:2px;font-size:12.5px;line-height:1.3;white-space:normal}
  #cth-hero .cth__ctas{flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:420px;margin-top:20px}
  #cth-hero .cth__btn,#cth-hero .cth__btn:hover,#cth-hero .cth__btn:focus,#cth-hero .cth__btn:active{width:100%!important;height:52px!important;min-height:52px!important}
  #cth-hero .cth__form-wrap{max-width:460px}
  #cth-hero .cth__card{padding:24px 18px 20px;border-radius:22px}
  #cth-hero .cth__grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:18px}
  #cth-hero .cth__waves--tr{width:clamp(180px,58vw,380px);top:-2%}
  #cth-hero .cth__waves--bl{width:clamp(220px,75vw,440px);bottom:-14vw}
  #cth-hero .cth__p--tube {--w:31vw;--t:6px;--l:-5vw}
  #cth-hero .cth__p--jar  {--w:22vw;--t:18px;--r:3vw}
  #cth-hero .cth__p--pump {--w:38vw;--b:-7%;--r:-12vw}
  #cth-hero .cth__p--serum{--w:17vw;--b:1%;--l:-3vw}
}
@media (max-width:420px){
  #cth-hero .cth__opts{grid-template-columns:minmax(0,1fr);gap:8px}
  #cth-hero .cth__opt-box{flex-direction:row;align-items:center;gap:12px;padding:10px 12px}
  #cth-hero .cth__opt-box::after{top:50%;margin-top:-8px}
  #cth-hero .cth__opt-ico{width:34px;height:34px;flex:0 0 34px}
}
@media (max-width:360px){
  #cth-hero .cth__d{padding:0 5px}
  #cth-hero .cth__d dd{font-size:11.5px}
}
@media (max-height:720px) and (min-width:1100px){
  #cth-hero .cth__cue{display:none}
}

/* Movimiento reducido: todo estático y visible */
@media (prefers-reduced-motion:reduce){
  #cth-hero *,#cth-hero *::before,#cth-hero *::after{animation:none!important;transition-duration:.01ms!important}
  #cth-hero .cth__galaxy{opacity:1}
  #cth-hero .cth__done-ico circle,#cth-hero .cth__done-ico path{stroke-dashoffset:0}
}