/* ==========================================================================
   TEMA AMARILLO — añadido el 29/10/2026
   Inspirado en una agencia de Manchester (amarillo #ffd400 + negro + sombras
   duras). Manda sobre portada.css porque va después.
   ========================================================================== */

:root{
  --bg:#ffd400; --bg2:#ffdf33;
  --card:#fffbe8; --card2:#eef2d2;
  --line:#141414;
  --txt:#141414; --mut:#4a4a4a;
  --acc:#141414; --acc2:#e0361b;
  --ok:#1f7a3d; --warn:#a3480b; --cn:#141414;
  --r:14px;
}

body{
  background:var(--bg);
  color:var(--txt);
}

/* ---------- cabecera ---------- */
header, .cabecera{background:var(--bg)}
nav.main a{color:var(--txt);font-weight:700}
nav.main a:hover{background:var(--negro, #141414);color:#ffd400}
.brand{font-weight:900;letter-spacing:-.02em;text-transform:lowercase}
.brand .cn{background:#141414;color:#ffd400;border-radius:999px;padding:2px 8px}

/* ---------- tipografía ---------- */
.hero h1{
  font-size:clamp(38px,6.2vw,68px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.02;
  text-transform:lowercase;
  margin:0 0 18px;
}
.hero h1 .grad{
  background:#141414 !important;
  color:#ffd400 !important;
  -webkit-text-fill-color:#ffd400 !important;
  padding:0 12px 6px;border-radius:12px;border:0;
  box-shadow:none;
  display:inline-block;transform:rotate(-1.2deg);
}
.sec-head h2{
  font-size:clamp(26px,3.6vw,40px);
  font-weight:900;letter-spacing:-.03em;text-transform:lowercase;
}
.kicker{
  display:inline-block;
  background:#141414;color:#ffd400;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-size:11.5px;padding:6px 12px;border-radius:999px;
  margin-bottom:16px;
}
.hero .lead{font-size:19px;font-weight:500;color:#1b1b1b}

/* ---------- botones ---------- */
.btn{
  border:3px solid #141414;border-radius:14px;
  background:#fffbe8;color:#141414;
  font-weight:800;
  box-shadow:5px 5px 0 #141414;
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #141414}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #141414}
.btn.primary{background:#141414;color:#ffd400}
.btn.primary:hover{filter:none}

/* ---------- tarjetas y bloques ---------- */
.door, .card, .price-item, .form-wrap, .modal-caja{
  background:var(--card);
  border:4px solid #141414;
  border-radius:18px;
  box-shadow:8px 8px 0 #141414;
}
.door.destacada{border-color:#141414;background:#fff}
.door .etiqueta-gratis{
  background:#141414;color:#ffd400;font-weight:800;
  border-radius:999px;padding:5px 12px;
}
.door .ico{font-size:34px}
.door h3, .card h3{font-weight:900;letter-spacing:-.02em}
.trust span, .pill{
  background:#fffbe8;border:3px solid #141414;border-radius:999px;
  font-weight:700;color:#141414;
}
.step .n{background:#141414;color:#ffd400;border-radius:999px;font-weight:900}

/* ---------- secciones sobre amarillo ---------- */
section{padding-top:44px;padding-bottom:44px}
#requisitos, #precios, #apuntate, #apartados, .hero{background:var(--bg)}
#chino, #salud, #programacion, #apuntate{background:transparent}

/* ---------- pulpo ---------- */
.hero{position:relative}
.hero .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(200px,330px);
  gap:26px;align-items:center;text-align:left;
}
.hero .kicker, .hero h1, .hero .lead, .hero .cta, .hero .trust{grid-column:1;justify-self:start;width:fit-content}
.hero .trust{display:flex;flex-wrap:wrap;gap:8px}
.hero h1 .grad{white-space:nowrap}
.hero .pulpo{
  grid-column:2;grid-row:1 / span 5;
  position:static;width:100%;height:auto;
  pointer-events:none;user-select:none;
  filter:drop-shadow(8px 8px 0 rgba(20,20,20,.14));
}

/* ---------- pie ---------- */
footer, .pie{
  background:#141414;color:#ffd400;
  border-top:4px solid #141414;
}
footer a, .pie a{color:#ffd400;font-weight:700}

/* ---------- móvil ---------- */
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero .kicker, .hero h1, .hero .lead, .hero .cta, .hero .trust{grid-column:1;justify-self:start;width:fit-content}
.hero .trust{display:flex;flex-wrap:wrap;gap:8px}
.hero h1 .grad{white-space:nowrap}
  .hero .pulpo{grid-column:1;grid-row:auto;margin:16px auto 0;width:min(58vw,240px)}
  .hero{padding-top:34px}
  .door, .card{box-shadow:6px 6px 0 #141414}
}


/* ---------- selector de idioma ---------- */
.elige{
  background:#141414;color:#ffd400;
  border-radius:18px;padding:16px 20px;margin:6px 0 26px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.elige-titulo{margin:0;font-weight:900;font-size:17px;letter-spacing:-.01em}
.elige-titulo span{display:block;font-weight:600;font-size:14px;opacity:.85}
.elige-botones{display:flex;gap:10px;flex-wrap:wrap}
.elige-botones button{
  background:#ffd400;color:#141414;border:3px solid #ffd400;border-radius:12px;
  padding:10px 16px;font-weight:900;font-size:15px;box-shadow:none;cursor:pointer;
  font-family:inherit;transition:transform .12s;
}
.elige-botones button:hover{transform:translateY(-2px);background:#fff;border-color:#fff}
.elige-botones button small{display:block;font-weight:600;font-size:11.5px;opacity:.75}
@media (max-width:640px){ .elige{flex-direction:column;align-items:flex-start} }


/* ---------- menus como botones (estilo sello torcido) ---------- */
header.top .wrap{
  flex-wrap:nowrap;gap:14px;align-items:center;
  padding-top:12px;padding-bottom:12px;
}
header.top .brand{flex:0 0 auto}
header.top nav.main{
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  margin-left:auto;overflow-x:auto;scrollbar-width:none;
}
header.top nav.main::-webkit-scrollbar{display:none}

header.top nav.main a,
header.top nav.main button.btn.lang{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  background:#141414;color:#ffd400;
  border:3px solid #141414;border-radius:14px;
  padding:9px 14px;font-weight:900;font-size:14px;line-height:1;
  text-decoration:none;white-space:nowrap;
  box-shadow:4px 4px 0 rgba(20,20,20,.85);
  transition:transform .14s, box-shadow .14s, background .14s;
  font-family:inherit;cursor:pointer;
}
/* el toque torcido, alternando */
header.top nav.main > *:nth-child(odd){transform:rotate(-1.6deg)}
header.top nav.main > *:nth-child(even){transform:rotate(1.4deg)}
header.top nav.main > *:hover{transform:rotate(0) translateY(-2px);box-shadow:6px 6px 0 rgba(20,20,20,.9)}
header.top nav.main > *:active{transform:rotate(0) translateY(1px);box-shadow:2px 2px 0 rgba(20,20,20,.9)}

header.top nav.main a.btn.primary,
header.top nav.main a.btn.primary:hover{background:#141414;color:#ffd400}
header.top nav.main a .gratis{
  background:#ffd400;color:#141414;border-radius:999px;
  padding:1px 7px;font-size:11.5px;font-weight:900;
}
header.top nav.main button.btn.lang{background:#141414;color:#ffd400}

/* iconos */
header.top nav.main a:nth-of-type(1)::before{content:"🀄"}
header.top nav.main a:nth-of-type(2)::before{content:"🌱"}
header.top nav.main a:nth-of-type(3)::before{content:"💻"}
header.top nav.main a:nth-of-type(4)::before{content:"🎓"}
header.top nav.main a:nth-of-type(5)::before{content:"🚀"}

/* pie: mismos sellos en amarillo sobre negro */
footer nav{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
footer nav a{
  display:inline-flex;align-items:center;gap:5px;
  background:#ffd400;color:#141414;border:3px solid #ffd400;border-radius:12px;
  padding:7px 13px;font-weight:900;font-size:13.5px;text-decoration:none;
  transition:transform .14s;
}
footer nav a:nth-child(odd){transform:rotate(-1.4deg)}
footer nav a:nth-child(even){transform:rotate(1.3deg)}
footer nav a:hover{transform:rotate(0) translateY(-2px);background:#fff;border-color:#fff}
footer nav a:nth-of-type(1)::before{content:"🀄"}
footer nav a:nth-of-type(2)::before{content:"🌱"}
footer nav a:nth-of-type(3)::before{content:"💻"}
footer nav a:nth-of-type(4)::before{content:"🔒"}
footer nav a:nth-of-type(5)::before{content:"📄"}
footer nav a:nth-of-type(6)::before{content:"✉️"}

/* en chino las pastillas son mas cortas: que no salten de linea */
html[lang^="zh"] header.top nav.main a,
html[lang^="zh"] header.top nav.main button.btn.lang{font-size:13.5px;padding:8px 12px;letter-spacing:.02em}

@media (max-width:900px){
  header.top .wrap{flex-wrap:wrap}
  header.top nav.main{width:100%;margin-left:0}
}


/* ---------- tamaño de letra: mas grande, sobre todo en chino ---------- */
/* el chino ocupa mas altura visual: subimos un 12% el cuerpo */
html[lang^="zh"] body{font-size:17.5px}

/* pastillas del menu */
header.top nav.main a,
header.top nav.main button.btn.lang{
  font-size:15.5px;padding:10px 16px;border-radius:16px;
}
html[lang^="zh"] header.top nav.main a,
html[lang^="zh"] header.top nav.main button.btn.lang{
  font-size:18px;padding:11px 18px;letter-spacing:.06em;
}
header.top nav.main a .gratis{font-size:12.5px;padding:2px 8px}
html[lang^="zh"] header.top nav.main a .gratis{font-size:14px;padding:2px 9px}

/* caja del selector de idioma */
.elige{padding:22px 26px;border-radius:22px;margin:10px 0 30px}
.elige-titulo{font-size:24px;line-height:1.25;letter-spacing:-.01em}
.elige-titulo span{font-size:0.82em;margin-top:4px;opacity:.95}
html[lang^="zh"] .elige-titulo{font-size:26px}
html[lang^="zh"] .elige-titulo span{font-size:0.92em;letter-spacing:.04em}

.elige-botones button{font-size:17.5px;padding:14px 22px;border-radius:14px;line-height:1.25}
.elige-botones button small{font-size:13.5px;margin-top:3px}
html[lang^="zh"] .elige-botones button{font-size:19px}
html[lang^="zh"] .elige-botones button small{font-size:15px;letter-spacing:.04em}

/* el pie tambien, un poco mas grande */
footer nav a{font-size:14.5px;padding:8px 14px}
html[lang^="zh"] footer nav a{font-size:16.5px}
footer .wrap, footer{font-size:15px}

@media (max-width:900px){
  .elige-titulo{font-size:20px}
  html[lang^="zh"] .elige-titulo{font-size:22px}
  .elige-botones button{font-size:16px;padding:12px 16px}
}


/* el boton de idioma, siempre visible y sin recortes */
header.top nav.main{padding-right:6px}
header.top nav.main button.btn.lang{flex:0 0 auto}
html[lang^="zh"] header.top nav.main{gap:8px}
html[lang^="zh"] header.top nav.main a{font-size:17px;padding:10px 15px}
html[lang^="zh"] header.top nav.main a .gratis{font-size:13.5px}


/* =====================================================================
   REPASO DE TIPOGRAFÍA — 29/10/2026
   Objetivo: que todo se lea cómodo, y el chino algo más grande porque a
   igual tamaño de letra ocupa menos altura visual.
   ===================================================================== */

/* --- tarjetas de la portada --- */
.door{padding:30px 28px}
.door h3{font-size:23px;line-height:1.2;margin-bottom:10px}
.door p{font-size:16.5px;line-height:1.55;color:#2c2c2c}
.door ul li{font-size:16px;line-height:1.5;margin-bottom:8px}
.door .bi{font-size:14px;opacity:.85;display:inline-block;margin-left:4px}
.door .btn{font-size:16px;padding:13px 20px}

.card{padding:26px 24px}
.card h3{font-size:21px}
.card p{font-size:16px}

/* --- botones grandes del hero y pastillas de confianza --- */
.hero .cta{gap:14px}
.hero .cta .btn{font-size:17.5px;padding:16px 26px;border-radius:16px}
.hero .trust{gap:10px;margin-top:22px}
.hero .trust span{
  font-size:15px;padding:9px 16px;border-width:3px;
}

/* --- secciones --- */
.sec-head p{font-size:17px;max-width:640px}
.kicker{font-size:12.5px;letter-spacing:.14em;padding:7px 14px}

/* --- pasos de "cómo empezar" --- */
.step p{font-size:15.5px}
.step h4{font-size:18px}

/* --- pie: alineado y ordenado --- */
footer .wrap{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:26px;padding-top:30px;padding-bottom:30px;text-align:left;
}
footer .wrap > div:first-child{text-align:left;line-height:1.5}
footer .wrap > div:first-child strong{font-size:17px}
footer nav{align-self:center}
footer, footer .wrap{color:#ffd400}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
@media (max-width:820px){
  footer .wrap{flex-direction:column;align-items:flex-start;text-align:left}
  footer nav{align-self:flex-start}
}

/* --- chino: un pelín más grande que el latino --- */
html[lang^="zh"] .door p,
html[lang^="zh"] .card p{font-size:17px;line-height:1.7}
html[lang^="zh"] .door ul li,
html[lang^="zh"] .card ul li{font-size:16.5px;line-height:1.7}
html[lang^="zh"] .door h3,
html[lang^="zh"] .card h3{font-size:24px;letter-spacing:.02em}
html[lang^="zh"] .hero .trust span{font-size:16px}
html[lang^="zh"] .sec-head p{font-size:18px}
html[lang^="zh"] .bi{font-size:14.5px}


/* ---------- carácter del día ---------- */
.caracter-caja{
  display:flex;gap:34px;align-items:center;flex-wrap:wrap;
  background:#fffbe8;border:5px solid #141414;border-radius:22px;
  box-shadow:10px 10px 0 #141414;padding:30px 34px;
}
.caracter-hz{
  font-family:"Noto Serif SC","Songti SC","SimSun",serif;
  font-size:118px;line-height:1;background:#141414;color:#ffd400;
  border-radius:18px;padding:12px 28px;min-width:190px;text-align:center;
  transform:rotate(-2deg);
}
.caracter-info{flex:1 1 260px}
.caracter-py{font-size:30px;font-weight:900;color:#e0361b;letter-spacing:.06em}
.caracter-es{font-size:22px;font-weight:800;margin:2px 0 8px}
.caracter-ej{font-size:17px;color:#4a4a4a;margin-bottom:16px}
.caracter-acc{display:flex;gap:12px;flex-wrap:wrap}
.caracter-acc .btn{font-size:16px;padding:12px 18px}
html[lang^="zh"] .caracter-es{font-size:24px}
html[lang^="zh"] .caracter-ej{font-size:18px}
@media (max-width:640px){
  .caracter-caja{gap:20px;padding:22px}
  .caracter-hz{font-size:84px;min-width:130px;padding:10px 18px}
}


/* textos de la seccion "clases en preparacion": alineados como el resto */
.price-note{text-align:left !important;font-size:16.5px;color:#2c2c2c;max-width:none}
#precios .wrap{max-width:1120px}
html[lang^="zh"] .price-note{font-size:17.5px;line-height:1.75}


/* =====================================================================
   Botones del hero con el mismo aire que la palabra "chino":
   bloque negro, letra amarilla con serif y un pelín torcidos.
   Al pasar el ratón se enderezan y suben, como el menú de arriba.
   ===================================================================== */
.hero .cta .btn,
.hero .cta .btn.primary{
  background:#141414;
  color:#ffd400;
  -webkit-text-fill-color:#ffd400;
  font-family:Georgia,"Iowan Old Style","Times New Roman","Songti SC","SimSun",serif;
  font-weight:700;
  font-size:22px;
  line-height:1.15;
  padding:15px 26px;
  border:3px solid #141414;
  border-radius:14px;
  box-shadow:6px 6px 0 rgba(20,20,20,.85);
  transition:transform .14s, box-shadow .14s, background .14s;
}
.hero .cta .btn:nth-child(1){transform:rotate(-1.6deg)}
.hero .cta .btn:nth-child(2){transform:rotate(1.4deg)}
.hero .cta .btn:hover,
.hero .cta .btn.primary:hover{
  background:#000;
  transform:rotate(0) translateY(-3px);
  box-shadow:8px 8px 0 rgba(20,20,20,.9);
}
.hero .cta .btn:active{transform:rotate(0) translateY(1px);box-shadow:2px 2px 0 rgba(20,20,20,.9)}

/* las pastillas de confianza, en el mismo idioma visual pero pequeñas */
.hero .trust span{
  background:#141414;
  color:#ffd400;
  -webkit-text-fill-color:#ffd400;
  border:3px solid #141414;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  padding:9px 16px;
  box-shadow:4px 4px 0 rgba(20,20,20,.8);
  transition:transform .14s, box-shadow .14s, background .14s;
}
.hero .trust span:nth-child(odd){transform:rotate(-1.2deg)}
.hero .trust span:nth-child(even){transform:rotate(1.1deg)}
.hero .trust span:hover{
  background:#000;
  transform:rotate(0) translateY(-2px);
  box-shadow:6px 6px 0 rgba(20,20,20,.9);
}

/* el mismo estilo para los botones del caracter del dia */
.caracter-acc .btn,
.caracter-acc .btn.primary{
  background:#141414;color:#ffd400;-webkit-text-fill-color:#ffd400;
  font-family:Georgia,"Iowan Old Style","Times New Roman","Songti SC","SimSun",serif;
  font-weight:700;border-radius:14px;border:3px solid #141414;
  box-shadow:5px 5px 0 rgba(20,20,20,.85);
  transition:transform .14s, box-shadow .14s;
}
.caracter-acc .btn:hover{transform:rotate(0) translateY(-2px);background:#000;box-shadow:7px 7px 0 rgba(20,20,20,.9)}

html[lang^="zh"] .hero .cta .btn{font-size:24px}
html[lang^="zh"] .hero .trust span{font-size:15.5px}

@media (max-width:640px){
  .hero .cta .btn{font-size:19px;padding:13px 18px;width:100%}
  .hero .trust span{font-size:14px;padding:8px 12px}
}


/* =====================================================================
   ESCENA ANIMADA DEL HERO — el pulpo-robot corre hacia ti con un corazón
   Todo con CSS: rayos girando, líneas de velocidad, corazones que suben
   y el robot flotando. Sin vídeo, sin librerías.
   ===================================================================== */
.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(260px,440px)}
.escena{
  position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:1/1;isolation:isolate;
  grid-column:2;            /* a la derecha del texto */
  grid-row:1 / span 5;      /* a la altura de todo el bloque */
}
.escena > *{grid-area:1/1}

/* rayos de sol girando */
.rayos{
  width:104%;aspect-ratio:1/1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(20,20,20,.13) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side, rgba(0,0,0,.95) 26%, rgba(0,0,0,.5) 58%, transparent 76%);
          mask-image:radial-gradient(closest-side, rgba(0,0,0,.95) 26%, rgba(0,0,0,.5) 58%, transparent 76%);
  animation:girar 60s linear infinite;
  z-index:0;
}
@keyframes girar{to{transform:rotate(360deg)}}

/* líneas de velocidad */
.velocidad{
  width:118%;height:118%;z-index:1;opacity:.5;
  background:repeating-linear-gradient(115deg,
      transparent 0 26px, rgba(20,20,20,.16) 26px 30px);
  -webkit-mask-image:radial-gradient(closest-side, transparent 42%, #000 72%);
          mask-image:radial-gradient(closest-side, transparent 42%, #000 72%);
  animation:correr .55s linear infinite;
}
@keyframes correr{to{background-position:-64px 0}}

/* halo que late detrás del robot */
.halo{
  width:74%;aspect-ratio:1/1;border-radius:50%;z-index:2;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,244,180,.75) 42%, transparent 70%);
  animation:latir 3.2s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{transform:scale(.96);opacity:.85}
  50%{transform:scale(1.06);opacity:1}
}

/* corazones que suben */
.corazon{
  position:absolute;z-index:4;color:#e0361b;font-size:26px;line-height:1;
  opacity:0;animation:subir 6s ease-in infinite;
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.corazon.c1{left:12%;top:62%;animation-delay:0s}
.corazon.c2{left:78%;top:70%;font-size:18px;animation-delay:1.6s}
.corazon.c3{left:24%;top:78%;font-size:14px;animation-delay:3.1s}
.corazon.c4{left:68%;top:56%;font-size:20px;animation-delay:4.4s}
@keyframes subir{
  0%{opacity:0;transform:translateY(0) scale(.7) rotate(-8deg)}
  15%{opacity:.95}
  70%{opacity:.9}
  100%{opacity:0;transform:translateY(-150px) scale(1.15) rotate(10deg)}
}

/* el robot */
.hero-img{
  position:relative;z-index:3;width:100%;max-width:440px;height:auto;
  filter:drop-shadow(10px 16px 0 rgba(20,20,20,.16));
  animation:flotar 3.6s ease-in-out infinite alternate;
}
@keyframes flotar{
  from{transform:translateY(-6px) rotate(-1.2deg)}
  to{transform:translateY(8px) rotate(1deg)}
}

/* iconos generados de las tarjetas */
.ico-img{
  width:72px;height:72px;object-fit:contain;margin-bottom:10px;
  filter:drop-shadow(4px 4px 0 rgba(20,20,20,.15));
}
html[lang^="zh"] .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(240px,420px)}

/* el pulpo original sigue en el pie y demas sitios */
.hero .pulpo{display:none}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .escena{grid-column:1;grid-row:auto;max-width:360px;margin:16px auto 0;aspect-ratio:1/1}
  .corazon{font-size:18px}
}

/* si el sistema pide menos movimiento, se queda quieto */
@media (prefers-reduced-motion:reduce){
  .rayos,.velocidad,.halo,.hero-img,.corazon{animation:none}
  .corazon{display:none}
}


/* =====================================================================
   EL CARTEL DEL ROBOT — imagen fotorrealista enmarcada como un póster,
   para que no desentone con el estilo de imprenta de la web.
   ===================================================================== */
.hero .escena{
  grid-column:1 / -1;      /* ocupa todo el ancho, debajo del texto */
  grid-row:auto;
  width:100%;max-width:100%;
  aspect-ratio:auto;
  display:block;position:relative;
  margin-top:30px;
  isolation:isolate;
}
.hero .escena .rayos{
  position:absolute;left:50%;top:50%;width:760px;height:760px;
  transform:translate(-50%,-50%);z-index:0;
}
.hero .escena .velocidad{
  position:absolute;inset:-40px;z-index:0;opacity:.35;
}
.cartel{
  position:relative;z-index:1;margin:0;
  background:#141414;padding:12px 12px 0;border-radius:16px;
  box-shadow:16px 16px 0 rgba(20,20,20,.9);
  transform:rotate(-.8deg);
  animation:flotar 6s ease-in-out infinite alternate;
}
.cartel img{
  display:block;width:100%;height:auto;border-radius:10px;
  max-height:min(56vh,520px);object-fit:cover;object-position:50% 42%;
}
.cartel figcaption{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  color:#ffd400;font-weight:800;font-size:15px;letter-spacing:.02em;
  padding:10px 6px 12px;
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
}
.cartel figcaption span{color:#ffd400;font-family:"Noto Serif SC","Songti SC",serif}
html[lang^="zh"] .cartel figcaption{font-size:17px}

/* corazones flotando por encima del cartel */
.hero .escena .corazon{z-index:2}

@media (max-width:820px){
  .cartel{transform:none;box-shadow:10px 10px 0 rgba(20,20,20,.9)}
  .cartel img{max-height:none}
  .hero .escena .rayos{width:420px;height:420px}
}
@media (prefers-reduced-motion:reduce){
  .cartel{animation:none}
}


.cartel figcaption strong{color:#fff;font-weight:900}
html[lang^="zh"] .cartel figcaption strong{color:#fff}


/* =====================================================================
   HERO A SANGRE con el robot detrás.
   El texto va siempre sobre amarillo; el robot aparece por la derecha
   fundiéndose con el fondo para que no haya corte.
   ===================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  min-height:min(78vh,700px);
  display:flex;align-items:center;
  padding:40px 0 30px;
}
.hero-fondo{
  position:absolute;top:0;right:0;bottom:0;
  width:min(68%,940px);z-index:0;pointer-events:none;
}
.hero-fondo img{
  width:100%;height:100%;object-fit:cover;object-position:62% 45%;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%);
}
/* velo amarillo a la izquierda para que el texto se lea siempre */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
      #ffd400 0%, #ffd400 34%,
      rgba(255, 212, 0,.92) 46%, rgba(255, 212, 0,.35) 58%, transparent 70%);
}
.hero .wrap{position:relative;z-index:2}

/* el texto vuelve a una sola columna, sin rejilla de dos */
.hero .wrap{display:block;text-align:left;max-width:1120px}
.hero h1{max-width:14ch}
.hero .lead{max-width:44ch}
.hero .cta{justify-content:flex-start}
.hero .trust{justify-content:flex-start}

@media (max-width:900px){
  .hero{min-height:0;padding-bottom:0}
  .hero-fondo{
    position:relative;width:100%;height:auto;margin-top:26px;
    order:2;
  }
  .hero-fondo img{
    height:auto;max-height:46vh;object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 12%);
  }
  .hero::after{display:none}
  .hero .wrap{display:flex;flex-direction:column}
  .hero h1{max-width:none}
}


/* =====================================================================
   MÓVIL — al final del archivo para que mande de verdad
   ===================================================================== */
@media (max-width:900px){
  /* menú: que quepa en dos líneas en vez de cortarse */
  header.top nav.main{
    flex-wrap:wrap;overflow:visible;justify-content:flex-start;
    width:100%;margin-left:0;gap:8px;
  }
  header.top nav.main a,
  header.top nav.main button.btn.lang{font-size:14.5px;padding:8px 12px}
  header.top .wrap{flex-wrap:wrap}

  /* hero: robot debajo del texto, a lo ancho */
  .hero{min-height:0;padding:26px 0 0;display:block}
  .hero::after{display:none}
  .hero .wrap{display:block}
  .hero .hero-fondo{
    position:relative;right:0;top:auto;bottom:auto;
    width:100%;max-width:100%;height:auto;
    margin:22px 0 0;z-index:0;
  }
  .hero .hero-fondo img{
    width:100%;height:auto;max-height:52vh;object-fit:cover;object-position:58% 40%;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 14%);
    border-radius:0 0 18px 18px;
  }
  .hero h1{max-width:none;font-size:clamp(30px,8.4vw,42px)}
  .hero .lead{max-width:none}
  .hero .cta{max-width:none}
  .hero .cta .btn{width:100%;justify-content:center;font-size:16px;padding:13px 14px}
  .hero .trust{max-width:none}
}
@media (max-width:520px){
  header.top nav.main a,
  header.top nav.main button.btn.lang{font-size:13.5px;padding:7px 10px}
}


/* el fallo del texto cortado: los bloques del hero tenían width:fit-content */
.hero .kicker, .hero h1, .hero .lead, .hero .cta, .hero .trust{width:auto;max-width:100%}
@media (max-width:900px){
  .hero .kicker, .hero h1, .hero .lead, .hero .cta, .hero .trust{width:100%;max-width:100%}
  .hero .lead{font-size:17px;line-height:1.6}
}


/* ninguna página debe poder desplazarse en horizontal */
html, body{max-width:100%;overflow-x:hidden}
.hero{overflow-x:clip}


/* =====================================================================
   HÉROE UNIFICADO — el robot ocupa todo el fondo, centrado y difuminado
   por las dos orillas; el texto va encima con un velo para que se lea.
   Igual en la versión amarilla y en la oscura.
   ===================================================================== */
.hero{
  position:relative;overflow:hidden;
  display:flex;align-items:center;
  min-height:min(84vh,720px);
  padding:0;
}
.hero-fondo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;margin:0;
}
.hero-fondo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  border-radius:0;
}
/* fundido inferior hacia el color de la página */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, var(--bg) 92%);
}
.hero .wrap{
  position:relative;z-index:2;
  display:block;text-align:left;
  max-width:1200px;margin:0 auto;
  padding-top:56px;padding-bottom:56px;
}
/* velo suave detrás del texto */
.hero .wrap::before{
  content:"";position:absolute;z-index:-1;
  inset:-36px -70px -30px -70px;
  background:radial-gradient(62% 66% at 34% 50%,
      rgba(255, 212, 0,.97) 0%, rgba(255, 212, 0,.94) 42%,
      rgba(255, 212, 0,.55) 68%, rgba(255, 212, 0,0) 84%);
  filter:blur(4px);
  pointer-events:none;
}
.hero h1{
  max-width:15ch;
  text-shadow:0 1px 0 rgba(255, 212, 0,.9), 0 0 22px rgba(255, 212, 0,.95);
}
.hero .lead{max-width:42ch;text-shadow:0 0 14px rgba(255, 212, 0,.95)}
.hero .cta{justify-content:flex-start}
.hero .trust{justify-content:flex-start}
.hero .kicker, .hero .cta, .hero .trust{
  width:auto;max-width:100%;
}

/* en móvil: imagen de fondo más baja y texto encima, sin velo radial */
@media (max-width:900px){
  .hero{min-height:0;display:block;padding:0 0 6px}
  .hero .wrap{padding:26px 18px 10px}
  .hero .wrap::before{
    inset:-18px -14px -10px -14px;
    background:linear-gradient(180deg, rgba(255, 212, 0,.98) 0%, rgba(255, 212, 0,.94) 70%, rgba(255, 212, 0,0) 100%);
    filter:none;
  }
  .hero-fondo{position:relative;inset:auto;height:auto;margin-top:-40px}
  .hero-fondo img{
    height:auto;aspect-ratio:16/10;object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 16%);
            mask-image:linear-gradient(to bottom, transparent 0%, #000 16%);
  }
  .hero::after{display:none}
  .hero h1{max-width:none}
  .hero .lead{max-width:none}
}


/* equilibrio final: el robot se ve, el texto se lee */
.hero-fondo img{object-position:66% 40%}
.hero .wrap::before{
  inset:-40px -60px -34px -80px;
  background:radial-gradient(54% 60% at 28% 46%,
      rgba(255, 212, 0,.97) 0%, rgba(255, 212, 0,.93) 38%,
      rgba(255, 212, 0,.45) 64%, rgba(255, 212, 0,0) 82%);
}
.hero h1{
  text-shadow:0 2px 0 rgba(255, 212, 0,.95),
              0 0 18px rgba(255, 212, 0,1),
              0 0 46px rgba(255, 212, 0,.95);
}
.hero .lead{text-shadow:0 0 12px rgba(255, 212, 0,1), 0 0 26px rgba(255, 212, 0,.95)}


/* el párrafo no debe salir del velo */
.hero .lead{max-width:40ch}
.hero .trust{max-width:640px}
@media (max-width:1100px){ .hero .lead{max-width:36ch} }
@media (max-width:900px){ .hero .lead{max-width:none} .hero .trust{max-width:none} }


/* el bloque de texto ocupa todo el ancho disponible (es un flex item) */
.hero .wrap{width:100%;flex:1 1 auto;max-width:1200px;margin:0 auto;box-sizing:border-box}
@media (max-width:900px){ .hero .wrap{max-width:100%;width:100%;padding:26px 18px 10px} }


/* velo lineal: cubre todo el bloque de texto y se disuelve hacia la derecha */
.hero .wrap::before{
  inset:-40px -90px -40px -140px;
  background:linear-gradient(90deg,
      rgba(255, 212, 0,.99) 0%, rgba(255, 212, 0,.98) 44%,
      rgba(255, 212, 0,.88) 54%, rgba(255, 212, 0,.45) 64%,
      rgba(255, 212, 0,.12) 72%, rgba(255, 212, 0,0) 80%);
  filter:blur(8px);
}
.hero .lead{max-width:44ch}


/* =====================================================================
   PANEL DE CRISTAL para el texto del héroe
   ===================================================================== */
.hero .wrap{
  position:relative;z-index:2;
  background:rgba(255,251,232,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
  border:4px solid #141414;
  border-radius:26px;
  box-shadow:16px 16px 0 rgba(20,20,20,.85);
  padding:34px 38px;
  max-width:820px;margin:0 auto 0 0;
  text-align:left;width:auto;flex:0 1 auto;
}
.hero .wrap::before{display:none}
.hero .lead{max-width:52ch}
.hero h1{max-width:16ch}
html[lang^="zh"] .hero h1{max-width:18ch}

@media (max-width:900px){
  .hero .wrap{
    margin:18px auto -70px;max-width:100%;width:calc(100% - 28px);
    padding:24px 20px;border-radius:20px;
    box-shadow:10px 10px 0 rgba(20,20,20,.85);
  }
  .hero .lead{max-width:none}
}


/* el panel no debe tapar al robot: más estrecho y a la izquierda */
.hero .wrap{
  max-width:640px;margin:0 auto 0 24px;
  padding:28px 30px;border-radius:22px;
  -webkit-backdrop-filter:blur(7px) saturate(1.05);
          backdrop-filter:blur(7px) saturate(1.05);
  background:rgba(255,251,232,.8);
}
.hero h1{max-width:14ch;font-size:clamp(32px,3.8vw,50px)}
.hero .lead{max-width:46ch;font-size:17.5px}
.hero .cta .btn{font-size:16px;padding:12px 16px}
.hero .trust span{font-size:13px;padding:7px 11px}
@media (max-width:1150px){
  .hero .wrap{max-width:580px;margin-left:14px}
  .hero h1{font-size:clamp(30px,4vw,44px)}
}
@media (max-width:900px){
  .hero .wrap{max-width:calc(100% - 24px);margin:16px auto -60px;padding:22px 18px}
  .hero h1{font-size:clamp(28px,7.4vw,38px)}
  .hero .lead{font-size:16px}
}


/* el panel va pegado a la izquierda, con el robot a la vista */
.hero{justify-content:flex-start}
.hero .wrap{
  max-width:600px;
  margin-left:24px !important;
  margin-right:auto !important;
  align-self:center;
  flex:0 0 auto;
  width:auto;
}
@media (max-width:900px){
  .hero .wrap{margin-left:auto !important;margin-right:auto !important;width:calc(100% - 24px)}
}


/* limpieza: ningún velo suelto sobre la foto */
.hero::after, .hero::before{display:none !important}
.hero .wrap::before, .hero .wrap::after{display:none !important}
/* fundido suave del borde inferior de la foto hacia la sección */
.hero-fondo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:linear-gradient(180deg, transparent 0%, var(--bg) 96%);
  pointer-events:none;
}
.hero-fondo{position:absolute;inset:0}


/* robot recortado: se coloca a la derecha, sin fundidos ni máscaras */
.hero-fondo img{
  object-fit:contain;
  object-position:82% 50%;
  -webkit-mask-image:none; mask-image:none;
  filter:drop-shadow(0 26px 34px rgba(20,20,20,.35));
}
.hero-fondo::after{display:none}
.hero{min-height:min(78vh,660px)}
@media (max-width:900px){
  .hero-fondo img{object-position:50% 50%;max-height:44vh}
}


/* encuadre final del robot recortado */
.hero{min-height:min(80vh,700px)}
.hero-fondo{inset:26px 0 26px 0}
.hero-fondo img{object-position:76% 50%}
@media (max-width:900px){
  .hero-fondo{inset:0}
  .hero-fondo img{object-position:50% 50%}
}


/* el robot se intuye DETRAS del panel (como en la captura que le gusta) */
html:not([data-tema="noche"]) .hero .wrap{
  background:rgba(255,251,232,.62) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08) !important;
          backdrop-filter:blur(10px) saturate(1.08) !important;
}

/* =====================================================================
   Panel de idioma: mas grande y el chino en tipografia de pincel
   ===================================================================== */
@font-face{
  font-family:"PincelUI";
  src:url("/assets/fuentes/pincel-ui.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
.elige{padding:26px 30px !important;border-radius:24px !important}
.elige-titulo{font-size:30px !important;line-height:1.2 !important}
.elige-titulo span{
  font-family:"PincelUI","Noto Serif SC",serif !important;
  font-size:26px !important;margin-top:8px !important;letter-spacing:.04em !important;
  opacity:1 !important;
}
.elige-botones{gap:14px !important}
.elige-botones button{
  font-size:21px !important;padding:16px 26px !important;border-radius:16px !important;
  line-height:1.25 !important;
}
.elige-botones button small{font-size:16px !important;margin-top:4px !important}
.elige-botones button[data-lang="zh"]{font-family:"PincelUI","Noto Serif SC",serif !important}
.elige-botones button[data-lang="zh"] small{font-size:17px !important}
@media (max-width:640px){
  .elige{padding:20px 18px !important}
  .elige-titulo{font-size:23px !important}
  .elige-titulo span{font-size:21px !important}
  .elige-botones button{font-size:18px !important;padding:13px 18px !important}
  .elige-botones button small{font-size:14.5px !important}
}