/* El Team · landing del L1 (registro en dos pasos)
   Estética light tipo iPhone / Gemini (27 oct): fondo blanco con manchas de color difuminadas y una retícula
   de puntos, tarjetas de vidrio esmerilado, botones en pastilla con brillo y mucho aire.
   Tipografía: Poppins Bold Italic para el título grande (Black Italic en el paso 2), Poppins SemiBold para el resto de títulos,
   etiquetas y botones, y Castoro para el texto.
   Colores: el degradado del logo viejo de Instagram en versión clara en el botón, en "Ahora haz que se note." y en
   las palabras clave, y arriba la imagen de la identidad completa (img/fondo-iconos.webp). */
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/poppins-900italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/poppins-700italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Castoro"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/castoro-regular.woff2") format("woff2"); }

:root {
  /* La paleta de la identidad */
  --amarillo: #FCAF45;
  --naranja: #F77737;
  --rosa: #E1306C;
  --morado: #833AB4;
  --azul: #5851DB;
  --turquesa: #3FA9F5;
  --verde: #12A36B;
  --manzana: #7DB61C;      /* "posiciónate" */
  /* El degradado de Instagram en versión clara (botón y barrita del paso activo) */
  --degradado: linear-gradient(100deg, #FFC85C 0%, #FF9466 20%, #FF6680 40%, #F25AA6 60%, #B266EE 80%, #7B7BF5 100%);
  /* El mismo al revés, para palabras clave en texto (estilo Gemini): lavanda, morado, rosado, durazno */
  --degradado-texto: linear-gradient(95deg, #7F78F2 0%, #B05CEB 35%, #EC4E9F 68%, #FF8A5B 100%);
  /* Neutros tipo iOS */
  --fondo: #FFFFFF;
  --tinta: #1D1D1F;
  --gris: #6E6E73;         /* 5,0:1 sobre blanco */
  --linea: rgba(29, 29, 31, 0.08);
  --borde-campo: #8E8E93;  /* 3,3:1 sobre blanco */
  --relleno-campo: #FAFAFC;
  --vidrio: rgba(255, 255, 255, 0.72);
  --sombra: 0 1px 2px rgba(29, 29, 31, 0.04), 0 24px 60px -24px rgba(178, 102, 238, 0.28);
  --whatsapp: linear-gradient(100deg, #1DB954 0%, #0F9D63 100%);
  --error: #C2412F;
  --titulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: "Castoro", Georgia, "Times New Roman", serif;
  --r: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1.0625rem/1.7 var(--texto); font-synthesis: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--morado); }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.envoltura { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { margin: 0; color: var(--tinta); text-wrap: balance; }
h2, h3, .boton, .etiqueta, .pastilla, .chip, .camino, .pasos-dos li { font-family: var(--titulo); font-weight: 600; font-style: normal; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; }
.etiqueta { font-size: 0.78rem; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }
/* Palabra clave con degradado, como en Gemini */
.clave { background: var(--degradado-texto); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.linea-degradado { display: block; width: 72px; height: 3px; border-radius: 3px; background: var(--degradado); opacity: 0.85; }

/* ---------- Iconos ---------- */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chip-ico { --tono: var(--azul); --tono-claro: #ECEBFF; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; color: var(--tono); background: linear-gradient(140deg, #FFFFFF 0%, var(--tono-claro) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 8px 18px -10px var(--tono); }
.t-turquesa { --tono: #1E8FE0; --tono-claro: #DDF0FF; }
.t-rosa { --tono: #D62976; --tono-claro: #FFE0EC; }
.t-manzana { --tono: #5E9A0E; --tono-claro: #E8F7D2; }
.t-morado { --tono: #833AB4; --tono-claro: #F1E3FB; }
.t-naranja { --tono: #E0601A; --tono-claro: #FFE9D9; }

/* ---------- Vidrio ---------- */
.vidrio { background: var(--vidrio); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--sombra), inset 0 0 0 1px var(--linea); border-radius: var(--r); }

/* ---------- Fondo luminoso: manchas de color difuminadas y retícula de puntos ---------- */
.luz { position: relative; isolation: isolate; background: url("img/fondo-iconos.webp") top center / 100% auto no-repeat, var(--fondo); }
/* Arriba va la imagen de la identidad completa (los iconos sobre el degradado), a todo el ancho y sin recortar.
   La imagen trae su propio desvanecido suave abajo, así que se funde sola con el blanco. */
.cierre.luz { background:
    radial-gradient(34% 40% at 0% 60%, rgba(255, 200, 92, 0.26), transparent 70%),
    radial-gradient(34% 40% at 100% 45%, rgba(178, 102, 238, 0.22), transparent 70%),
    radial-gradient(30% 30% at 75% 95%, rgba(242, 90, 166, 0.14), transparent 70%),
    var(--fondo); }
.luz::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(29, 29, 31, 0.13) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 80%); }

/* ---------- Barra superior ---------- */
.barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; text-decoration: none; color: var(--tinta); }
.logo img { height: 38px; width: auto; }
.logo .texto { display: none; font: 600 1rem/1 var(--titulo); }
.logo img.falta { display: none; }
.logo img.falta + .texto { display: inline; }
.pastilla { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; line-height: 1.2; color: var(--tinta); padding: 10px 16px; border-radius: 999px; }
.pastilla .estrella { width: 16px; height: 16px; flex: none; }

/* ---------- Hero: la info a un lado y el registro al otro; en el teléfono, el registro casi sin bajar ---------- */
.heroe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "texto form" "horarios form" "social form"; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: 22px; align-items: start; padding-block: clamp(20px, 4vw, 48px) clamp(56px, 8vw, 96px); }
.heroe-texto { grid-area: texto; display: grid; justify-items: start; gap: 18px; min-width: 0; padding-top: 12px; }
.lado-form { grid-area: form; position: relative; justify-self: end; width: 100%; max-width: 460px; }
.horarios { grid-area: horarios; }
.social { grid-area: social; align-self: start; }
.chip { display: inline-flex; align-items: center; gap: 10px; font-size: 0.88rem; line-height: 1.2; color: var(--tinta); padding: 8px 18px 8px 9px; border-radius: 999px; }
.chip .chip-ico { width: 32px; height: 32px; border-radius: 10px; }
.chip .ico { width: 17px; height: 17px; }
.chip span { color: var(--gris); }
.nombre-evento { font-family: var(--titulo); font-weight: 700; font-style: italic; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.15; letter-spacing: 0.03em; text-transform: uppercase; }
/* "Ahora haz que se note.": texto con el mismo degradado del botón */
.nombre-evento em { font-style: inherit; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.camino { font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.2; letter-spacing: -0.01em; }
.camino .c1 { color: #7473F0; }
.camino .c2 { color: #EC4E9F; }
.camino .c3 { color: #F27A3C; }
.promesa { font-size: clamp(1.02rem, 1.5vw, 1.12rem); line-height: 1.6; color: #4A4A50; max-width: 34rem; text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto; }
.horarios { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.88rem; }
.horarios li { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px var(--linea); color: var(--gris); }
.horarios b { color: var(--tinta); font-weight: 400; }
.horarios li { display: inline-flex; align-items: center; gap: 6px; }
.banderas { display: inline-flex; gap: 3px; }
.bandera { width: 18px; height: 12px; border-radius: 2.5px; box-shadow: 0 0 0 0.5px rgba(29, 29, 31, 0.18); flex: none; }
.social { display: inline-flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--gris); }
.social b { color: var(--tinta); font-weight: 400; }
.mini-avatares { display: flex; }
.mini-avatares img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; background: #F1F1F4; margin-left: -10px; box-shadow: 0 2px 6px rgba(29, 29, 31, 0.12); }
.mini-avatares img:first-child { margin-left: 0; }

/* Dos tarjetitas que flotan sobre las esquinas del formulario (solo en pantallas anchas) */
.flotantes { display: none; }
@media (min-width: 1100px) {
  .flotantes { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .flotante { position: absolute; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; font: 600 0.88rem/1.25 var(--titulo); white-space: nowrap; }
  .flotante small { display: block; font: 400 0.82rem/1.3 var(--texto); color: var(--gris); }
  .flotante .chip-ico { width: 38px; height: 38px; border-radius: 12px; }
  .flotante:nth-child(1) { top: -30px; left: -70px; transform: rotate(-4deg); }
  .flotante:nth-child(2) { bottom: -30px; right: -48px; transform: rotate(3deg); }
}

/* ---------- Los dos pasos ---------- */
.pasos-dos { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 999px; background: #F2F2F5; }
.pasos-dos li { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; font-size: 0.8rem; line-height: 1.2; color: var(--gris); padding: 8px 10px; border-radius: 999px; }
.pasos-dos li::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #C7C7CC; }
.pasos-dos .activo { background: #FFFFFF; color: var(--tinta); box-shadow: 0 1px 3px rgba(29, 29, 31, 0.1), 0 4px 12px -6px rgba(29, 29, 31, 0.15); }
.pasos-dos .activo::before { background: var(--degradado); }
.pasos-dos .hecho { color: var(--tinta); }
.pasos-dos .hecho::before { background: var(--verde); }

/* ---------- El formulario (paso 1) ---------- */
.formulario { width: 100%; max-width: 480px; margin-inline: auto; padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; position: relative; z-index: 1; }
.formulario h2 { font-size: 1.5rem; }
.formulario .siguiente { color: var(--gris); font-size: 0.95rem; line-height: 1.55; }
.campo { display: grid; gap: 7px; }
.campo label { font-size: 0.95rem; }
.campo input, .campo select { font: 400 1rem/1.3 var(--texto); color: var(--tinta); background: var(--relleno-campo); border: 1px solid var(--borde-campo); border-radius: 14px; padding: 14px 15px; width: 100%; min-width: 0; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.campo input:focus, .campo select:focus { border-color: var(--azul); outline: 2px solid transparent; box-shadow: 0 0 0 4px rgba(88, 81, 219, 0.16); background: #FFFFFF; }
.campo [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(194, 65, 47, 0.14); }
.telefono { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 8px; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.boton { font-size: 1.1rem; line-height: 1.1; letter-spacing: -0.01em; border: 0; border-radius: 999px; padding: 18px 26px; cursor: pointer; background: var(--degradado); color: #FFFFFF; text-shadow: 0 1px 6px rgba(120, 20, 70, 0.35); text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 10px; width: 100%; text-align: center; box-shadow: 0 14px 30px -12px rgba(242, 90, 166, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.boton:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(242, 90, 166, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.boton:disabled { opacity: 0.7; cursor: wait; transform: none; }
.letra-chica { font-size: 0.85rem; line-height: 1.5; color: var(--gris); }
.aviso { font-size: 0.95rem; color: var(--error); }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(56px, 8vw, 104px); }
.cabeza { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 44rem; margin: 0 auto clamp(32px, 5vw, 52px); }
.cabeza p { color: var(--gris); font-size: 1.1rem; }

.llevas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: paso; }
.llevas li { position: relative; padding: 26px; display: grid; gap: 14px; align-content: start; counter-increment: paso; overflow: hidden; }
/* El número grande y tenue en la esquina, como en Gemini */
.llevas li::after { content: "0" counter(paso); position: absolute; top: 14px; right: 20px; font: 600 3.4rem/1 var(--titulo); letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(29, 29, 31, 0.12); }
.llevas p { color: var(--gris); font-size: 0.98rem; line-height: 1.6; }

.publicos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.publicos li { display: grid; gap: 12px; align-content: start; text-align: center; justify-items: center; padding: 22px 18px 26px; border-radius: var(--r); background: linear-gradient(180deg, var(--tono-claro, #F4F4F8) 0%, #FFFFFF 85%); box-shadow: inset 0 0 0 1px var(--linea); }
.publicos img { width: 100%; max-width: 180px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(29, 29, 31, 0.12)); }
.publicos img.falta { background: rgba(255, 255, 255, 0.7); border: 1.5px dashed rgba(29, 29, 31, 0.15); border-radius: 50%; filter: none; }
.publicos p { color: var(--gris); font-size: 0.95rem; line-height: 1.55; }

.autor { display: grid; gap: 26px; max-width: 52rem; margin: 0 auto; padding: clamp(26px, 4vw, 44px); }
.autor .cabeza-autor { display: grid; gap: 12px; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cifra { padding: 16px 18px; border-radius: 18px; background: #F7F7FA; display: grid; gap: 2px; }
.cifra b { font: 600 clamp(1.4rem, 3vw, 2rem)/1.1 var(--titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--gris); font-size: 0.9rem; }
.clientes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.clientes li { font: 600 0.85rem/1.2 var(--titulo); padding: 8px 14px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--linea); color: #3A3A3F; }

.cierre .envoltura { display: grid; justify-items: center; gap: clamp(28px, 4vw, 40px); padding-block: clamp(64px, 9vw, 112px); }
.cierre-texto { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 40rem; position: relative; z-index: 1; }
.cierre-texto p { color: var(--gris); font-size: 1.1rem; }

.pie { padding-block: 28px 44px; color: var(--gris); font-size: 0.82rem; line-height: 1.6; display: grid; gap: 8px; text-align: center; justify-items: center; }
.pie a, .legal a { color: inherit; display: inline-block; padding-block: 10px; }

/* ---------- Paso 2 (gracias) y página puente ---------- */
.pagina-corta { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.centro { display: grid; place-items: center; padding-block: clamp(16px, 5vw, 56px); }
.paso-dos { width: 100%; max-width: 34rem; display: grid; gap: 26px; text-align: center; justify-items: center; padding: clamp(26px, 5vw, 44px) clamp(20px, 4vw, 40px); }
.paso-dos .pasos-dos { width: 100%; max-width: 24rem; }
.paso-dos h1 { font-family: var(--titulo); font-weight: 900; font-style: italic; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; }
.paso-dos h1 em { font-style: inherit; display: block; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.paso-dos .intro { font-size: clamp(1.1rem, 2.4vw, 1.25rem); line-height: 1.6; max-width: 28rem; }
.paso-dos strong { font-weight: 400; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.boton-wa { background: var(--whatsapp); color: #FFFFFF; font-size: clamp(1.2rem, 3.6vw, 1.45rem); padding: 22px 28px; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 0 22px 2px rgba(37, 211, 102, 0.5), 0 18px 40px -14px rgba(15, 157, 99, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); text-shadow: 0 1px 4px rgba(0, 60, 30, 0.25); animation: late 1.6s ease-in-out infinite, neon 1.6s ease-in-out infinite; }
.boton-wa:hover { box-shadow: 0 22px 44px -14px rgba(15, 157, 99, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.boton-wa svg { width: 1.45em; height: 1.45em; flex: none; }
@keyframes late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
/* El brillo de neón que parpadea: un aro que se expande y un resplandor verde que sube y baja */
@keyframes neon {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 0 18px 2px rgba(37, 211, 102, 0.45), 0 18px 40px -14px rgba(15, 157, 99, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { filter: brightness(1.14); box-shadow: 0 0 0 14px rgba(37, 211, 102, 0), 0 0 42px 10px rgba(37, 211, 102, 0.7), 0 18px 40px -14px rgba(15, 157, 99, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
@media (prefers-reduced-motion: reduce) { .boton-wa, .giro { animation: none; } html { scroll-behavior: auto; } }
.redireccion { color: var(--gris); font-size: 0.95rem; }
.redireccion b { color: var(--tinta); font-weight: 400; font-variant-numeric: tabular-nums; }
.paso-dos ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--gris); font-size: 0.98rem; line-height: 1.55; text-align: left; justify-self: stretch; }
.paso-dos ul li { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.paso-dos ul li::before { content: "✓"; color: var(--verde); font-family: var(--titulo); font-weight: 600; }
.nota-prueba { font-size: 0.85rem; color: #8A4B00; background: #FFF4D6; border-radius: 12px; padding: 8px 12px; }
.puente { min-height: 40vh; align-content: center; }
.puente h1 em { display: inline; }
.giro { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(88, 81, 219, 0.15); border-top-color: var(--rosa); animation: giro 0.9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* Sin desenfoque (navegadores viejos): el vidrio se vuelve blanco casi opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidrio { background: rgba(255, 255, 255, 0.94); }
}

/* Modo de alto contraste (Windows): que se vean los pasos y los textos con degradado */
@media (forced-colors: active) {
  .pasos-dos li::before { background: CanvasText; }
  .pasos-dos .activo::before { background: Highlight; }
  .clave, .nombre-evento em, .paso-dos h1 em { color: CanvasText; background: none; }
  .llevas li::after { -webkit-text-stroke: 0; color: GrayText; }
}

/* ---------- Política ---------- */
.legal { max-width: 44rem; padding-block: 40px 64px; display: grid; gap: 14px; }
.legal h1 { font-family: var(--titulo); font-weight: 600; font-size: 2rem; letter-spacing: -0.02em; }
.legal h2 { font-size: 1.3rem; margin-top: 10px; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .heroe { grid-template-columns: 1fr; grid-template-areas: "texto" "form" "horarios" "social"; grid-template-rows: none; row-gap: 20px; justify-items: center; padding-block: 8px 56px; }
  .heroe-texto { justify-items: center; text-align: center; gap: 14px; padding-top: 0; }
  .lado-form { justify-self: center; }
  .horarios { justify-content: center; }
  .heroe-texto > .etiqueta, .linea-degradado { display: none; }
  .publicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .llevas { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 1rem; }
  .barra { padding-block: 14px; }
  .logo img { height: 32px; }
  .pastilla { font-size: 0.78rem; padding: 8px 12px; }
  .chip { font-size: 0.85rem; padding: 6px 14px 6px 7px; }
  .chip .chip-ico { width: 28px; height: 28px; border-radius: 9px; }
  .nombre-evento { font-size: 2.45rem; }
  .camino { font-size: 0.95rem; }
  /* Ancho medido para que el párrafo justificado llene sus 3 líneas sin huecos entre palabras */
  .promesa { font-size: 1rem; line-height: 1.55; max-width: 18rem; }
  .formulario { gap: 14px; }
  .formulario .siguiente { display: none; }
  .horarios { font-size: 0.82rem; gap: 6px; }
  .horarios li { padding: 5px 11px; }
  .publicos { gap: 12px; }
  .publicos li { padding: 16px 12px 20px; }
  .cifras { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .cifra { padding: 12px; }
  .cifra b { font-size: 1.2rem; white-space: nowrap; }
  .cifra span { font-size: 0.8rem; }
  .formulario { padding: 20px; }
  .telefono { grid-template-columns: 6.6rem minmax(0, 1fr); }
  .boton-wa { padding: 20px 20px; }
  .autor { padding: 24px 20px; }
  .pasos-dos li { font-size: 0.72rem; padding: 9px 4px; white-space: nowrap; letter-spacing: -0.01em; }
  .pasos-dos li::before { display: none; }
}
@media (max-width: 400px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra { display: flex; align-items: baseline; gap: 10px; }
}


/* ---------- Computadora: el bloque de la izquierda angosto (el ancho del título) y las dos columnas centradas (versión B, 27 oct) ---------- */
@media (min-width: 861px) {
  .heroe { grid-template-columns: minmax(0, 25rem) minmax(0, 460px); justify-content: center; column-gap: clamp(48px, 8vw, 120px); }
  .horarios { flex-wrap: nowrap; justify-content: space-between; gap: 6px; font-size: 0.85rem; }
  .horarios li { white-space: nowrap; padding: 6px 12px; }
  /* Solo la bandera; el nombre del país queda para lectores de pantalla */
  .horarios .pais { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* El título ocupa exactamente el ancho del bloque */
  .heroe-texto { container-type: inline-size; }
  .nombre-evento { font-size: 14.4cqi; letter-spacing: 0.02em; line-height: 1.12; }
  .promesa { max-width: none; }
}