/* El Team · landing de Founders (video con desbloqueo + formulario de 4 pasos). Parte de la hoja de landing-l1 (misma estética)
   y agrega al final las clases del video y del formulario (sección "Founders").
   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 fondo blanco con retícula de puntos, como la landing de la clase. */
@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: 400; font-display: swap; src: url("fonts/poppins-400.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;
  /* Founders: el formulario (botón y progreso en rosa; opciones en rosa muy suave) */
  --f-boton: #FF4F93;
  --f-opcion: #FFF6FA;
  --f-opcion-borde: #FFC2DA;
  --f-opcion-activa: #FFE4EF;
  --f-texto: "Poppins", system-ui, sans-serif;
}

* { 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: var(--fondo); }
/* Fondo blanco con la retícula de puntos (31 oct: se quitó la imagen de iconos de arriba) */
.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, .campo textarea { 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, .campo textarea: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: 360px) {
  .pasos-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pasos-dos li { white-space: normal; font-size: 0.68rem; padding: 8px 6px; }
}
@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; }
}


/* =====================================================================================================
   FOUNDERS · video con desbloqueo y formulario de 4 pasos (clases que usa app.js, fase C)
   Cuerpo del formulario en Poppins 400, títulos y botones en Poppins 600, todo alineado a la izquierda,
   sin fondos de color detrás del texto. Castoro queda para la intro del hero.
   ===================================================================================================== */

/* ---------- Contenedores de la página ---------- */
.columna { width: 100%; max-width: 40rem; margin-inline: auto; }
.hero-f { display: grid; justify-items: center; text-align: center; gap: 18px; padding-block: 8px clamp(20px, 4vw, 40px); }
.hero-f .nombre-evento { font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: 0.02em; }
.hero-f .promesa { max-width: 34rem; text-align: center; text-align-last: center; }
.tarjeta { padding: clamp(22px, 4vw, 36px); display: grid; gap: 22px; }
.intro-f { font: 400 0.95rem/1.6 var(--f-texto); color: var(--gris); }
.video-hecho { font: 600 0.9rem/1.4 var(--titulo); color: var(--verde); }

/* ---------- El video ---------- */
.video-caja { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #0E0E14; box-shadow: var(--sombra); }
.video-caja iframe, .video-caja #reproductor { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* La portada va sobre el iframe hasta que arranca. Si la imagen falla, queda el degradado */
.video-portada { position: absolute; inset: 0; z-index: 2; width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #FFFFFF; font: 600 clamp(1.05rem, 3.6vw, 1.35rem)/1.2 var(--titulo); letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  background: linear-gradient(180deg, rgba(14, 14, 20, 0.2) 0%, rgba(14, 14, 20, 0.62) 100%), url("img/portada.jpg") center / cover no-repeat, var(--degradado); }
.video-portada::before { content: ""; width: clamp(64px, 18vw, 92px); height: clamp(64px, 18vw, 92px); border-radius: 50%; flex: none;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.6v12.8a.6.6 0 0 0 .92.5l10-6.4a.6.6 0 0 0 0-1l-10-6.4a.6.6 0 0 0-.92.5z' fill='%23FF4F93'/%3E%3C/svg%3E") 54% 50% / 46% no-repeat;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5), 0 16px 36px -10px rgba(0, 0, 0, 0.5); animation: late 1.8s ease-in-out infinite; }
.video-portada:hover::before { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.22), 0 16px 36px -10px rgba(0, 0, 0, 0.5); }
.video-progreso { height: 6px; margin-top: 12px; border-radius: 999px; background: #ECECF1; overflow: hidden; }
.video-progreso > * { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--degradado); transition: width 0.4s linear; }
.video-aviso { margin-top: 8px; font: 400 0.9rem/1.5 var(--f-texto); color: var(--gris); text-align: center; }
.video-aviso a { color: var(--azul); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Continuar (bloqueado hasta ver el video) ---------- */
.continuar { font-family: var(--titulo); }
.continuar .ico { width: 1.15em; height: 1.15em; }
.continuar[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(0.25); animation: none; }
.continuar[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.continuar:not([aria-disabled="true"]) { animation: late 1.6s ease-in-out infinite; }

/* ---------- "Ya recibí tu aplicación" ---------- */
.recibida { padding: clamp(24px, 5vw, 40px); display: grid; gap: 18px; justify-items: center; text-align: center; font: 400 1rem/1.6 var(--f-texto); }
.recibida h2 { font-size: clamp(1.5rem, 4.4vw, 2rem); }
.recibida .boton-wa { max-width: 26rem; }
.recibida small, .recibida .letra-chica { font-family: var(--f-texto); }

/* ---------- Barra de pasos ---------- */
.progreso { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: p; }
.progreso li { position: relative; padding-top: 14px; font: 600 0.74rem/1.25 var(--titulo); color: var(--gris); letter-spacing: -0.005em; overflow-wrap: break-word; }
.progreso li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 999px; background: #E9E9EF; }
.progreso li.hecho::before, .progreso li[aria-current="step"]::before { background: var(--f-boton); }
.progreso li[aria-current="step"] { color: var(--tinta); }

/* ---------- Pasos y preguntas ---------- */
form[data-founders] { font: 400 1rem/1.55 var(--f-texto); display: grid; gap: 22px; text-align: left; }
.paso { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 22px; }
.paso h2 { font: 600 clamp(1.35rem, 4.6vw, 1.7rem)/1.2 var(--titulo); letter-spacing: -0.015em; text-align: left; }
.pregunta { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.pregunta > label, .pregunta > legend { display: block; width: 100%; padding: 0; font: 600 0.98rem/1.4 var(--titulo); color: var(--tinta); }
.ayuda { font: 400 0.9rem/1.5 var(--f-texto); color: var(--gris); }
.pregunta input:not([type="radio"]):not([type="checkbox"]), .pregunta select, .pregunta textarea { font: 400 1rem/1.4 var(--f-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; }
.pregunta input:not([type="radio"]):not([type="checkbox"]):focus, .pregunta select:focus, .pregunta textarea:focus { border-color: var(--azul); outline: 2px solid transparent; box-shadow: 0 0 0 4px rgba(88, 81, 219, 0.16); background: #FFFFFF; }
.pregunta [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(194, 65, 47, 0.14); }
.pregunta .aviso { font: 400 0.88rem/1.4 var(--f-texto); margin: 0; }
.aviso:empty { display: none; }
textarea { min-height: 7.5rem; resize: vertical; display: block; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 14px; }

/* Opción única: tarjeta de 56 px mínimo; el radio sigue siendo un <input> real y accesible */
.opciones { display: grid; gap: 10px; }
.opciones label, .opcion-casilla { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; background: var(--f-opcion); border: 1.5px solid var(--f-opcion-borde); border-radius: 14px; cursor: pointer; font: 400 0.97rem/1.4 var(--f-texto); color: var(--tinta); transition: background 0.15s ease, border-color 0.15s ease; }
.opciones label:has(input:checked), .opcion-casilla:has(input:checked) { background: var(--f-opcion-activa); border-color: var(--f-boton); }
.opciones label:focus-within, .opcion-casilla:focus-within { outline: 3px solid var(--azul); outline-offset: 2px; }
.opciones label strong { font-weight: 600; text-decoration: none; }
.opciones input[type="radio"], .opcion-casilla input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; background: #FFFFFF; border: 2px solid #D79BB6; cursor: pointer; }
.opciones input[type="radio"] { border-radius: 50%; }
.opciones input[type="radio"]:checked { border-color: var(--f-boton); background: var(--f-boton); box-shadow: inset 0 0 0 4px #FFFFFF; }
.opcion-casilla input[type="checkbox"] { border-radius: 6px; }
.opcion-casilla input[type="checkbox"]:checked { border-color: var(--f-boton); background: var(--f-boton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.opciones input:focus-visible, .opcion-casilla input:focus-visible { outline: none; }
.pregunta .telefono { grid-template-columns: 7.4rem minmax(0, 1fr); }

/* ---------- Botonera ---------- */
.botonera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.boton-atras { font: 600 0.95rem/1.2 var(--titulo); color: var(--gris); background: none; border: 0; padding: 14px 10px; min-height: 48px; cursor: pointer; border-radius: 999px; flex: none; }
.boton-atras:hover { color: var(--tinta); }
.boton-f, .botonera .boton { font: 600 1.05rem/1.1 var(--titulo); letter-spacing: -0.01em; color: #FFFFFF; text-shadow: none; background: var(--f-boton); border: 0; border-radius: 999px; padding: 17px 26px; min-height: 56px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 10px; text-align: center; text-decoration: none; flex: 1; width: auto; box-shadow: 0 14px 30px -14px rgba(255, 79, 147, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.boton-f:hover, .botonera .boton:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(255, 79, 147, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.boton-f:disabled { opacity: 0.7; cursor: wait; transform: none; }

/* ---------- Página de cierre (fase E) ---------- */
.cerrado { width: 100%; max-width: 34rem; margin-inline: auto; display: grid; gap: 22px; justify-items: center; text-align: center; padding: clamp(26px, 5vw, 44px) clamp(20px, 4vw, 40px); }
.cerrado h1 { font-family: var(--titulo); font-weight: 900; font-style: italic; font-size: clamp(2rem, 6.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.cerrado h1 em { font-style: inherit; display: block; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.cerrado .intro { font-size: clamp(1.05rem, 2.4vw, 1.2rem); line-height: 1.6; max-width: 28rem; }

@media (min-width: 521px) {
  .dos-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .progreso { gap: 4px; }
  .progreso li { font-size: 0.68rem; }
  .tarjeta { padding: 20px; }
  .pregunta .telefono { grid-template-columns: 6.6rem minmax(0, 1fr); }
  .hero-f .nombre-evento { font-size: 2.35rem; }
  .botonera .boton-f, .botonera .boton { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-portada::before, .continuar:not([aria-disabled="true"]) { animation: none; }
  .video-progreso > * { transition: none; }
}
@media (forced-colors: active) {
  .progreso li::before { background: GrayText; }
  .progreso li.hecho::before, .progreso li[aria-current="step"]::before { background: Highlight; }
  .cerrado h1 em { color: CanvasText; background: none; }
  .opciones input[type="radio"]:checked, .opcion-casilla input[type="checkbox"]:checked { forced-color-adjust: none; background-color: Highlight; border-color: Highlight; }
}

/* =====================================================================================================
   FOUNDERS C · ajustes que pidió la página principal (fase C). No tocan nada de lo anterior.
   ===================================================================================================== */
/* El video y el botón ocupan todo el ancho de la columna (el hero centra sus hijos) */
.hero-f > .video-bloque, .hero-f > .continuar { width: 100%; justify-self: stretch; }
.video-bloque { min-width: 0; }
/* La línea del cierre: texto que se parte bien en el teléfono (el .chip normal es flex y separa las piezas) */
.hero-f > .chip { display: inline-block; padding: 9px 18px; text-align: center; line-height: 1.45; text-wrap: balance; }
/* "Continuar" bloqueado: si lo tocan antes de tiempo, el aviso se sacude un poco */
.video-aviso.sacudir { animation: sacudir 0.4s ease-in-out; color: var(--tinta); }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* Modo simulado (?simular=1, solo en localhost): un rótulo para que no se confunda con el video real */
.video-caja.simulado #reproductor::after { content: "Simulador local del video"; position: absolute; left: 12px; bottom: 10px; font: 600 0.75rem/1 var(--titulo); color: rgba(255, 255, 255, 0.7); }
/* El título de cada página recibe el foco al cambiar de página: sin el aro del foco del ratón */
.paso h2:focus { outline: none; }
.paso h2:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }
#formulario .video-hecho { text-align: center; margin-bottom: 12px; }
.recibida .letra-chica a { color: var(--gris); }
@media (prefers-reduced-motion: reduce) { .video-aviso.sacudir { animation: none; } }

/* =====================================================================================================
   FOUNDERS D · ajustes del 31 oct después de la primera prueba en el teléfono
   Fondo blanco con la retícula de puntos (sin la imagen de iconos), hero más compacto en el teléfono y más grande
   en el escritorio, la miniatura real del VSL de portada, el aviso de pantalla completa, el código de país con buscador,
   los perfiles en un cuadro 2x2 con sus ilustraciones y los colores de la identidad rotando en las opciones.
   ===================================================================================================== */
.luz::before { -webkit-mask-image: radial-gradient(90% 75% at 50% 30%, #000 0%, transparent 85%); mask-image: radial-gradient(90% 75% at 50% 30%, #000 0%, transparent 85%); }

/* ---------- Hero ---------- */
.hero-f { gap: 12px; padding-top: 0; }
.hero-f .nombre-evento { font-size: 1.85rem; line-height: 1.12; text-wrap: balance; }
.hero-f .promesa { font-size: 0.98rem; line-height: 1.5; max-width: 21rem; }
.hero-f > .video-bloque { margin-top: 6px; }
/* "Ahora haz que se note." en dos líneas parejas (y no "…QUE SE / NOTE.") */
.hero-f .nombre-evento em { display: block; text-wrap: balance; }
@media (min-width: 861px) {
  .columna.hero-f { max-width: 64rem; gap: 16px; }
  .hero-f .nombre-evento { font-size: clamp(2rem, 3.6vw, 3.1rem); white-space: nowrap; }
  .hero-f .nombre-evento .solo-movil { display: none; }
  .hero-f .nombre-evento em { display: inline; }
  .hero-f .promesa { max-width: none; font-size: 1.3rem; }
  .hero-f > .video-bloque { max-width: 60rem; justify-self: center; margin-top: 10px; }
  .hero-f > .continuar { max-width: 40rem; justify-self: center; }
}

/* ---------- Portada: la miniatura del VSL tal cual, y el play en una pastilla abajo a la derecha (no tapa el texto) ---------- */
.video-portada { justify-content: flex-end; align-items: flex-end; padding: clamp(10px, 2.4vw, 18px); text-shadow: none;
  background: url("img/portada.jpg") center / cover no-repeat, #0E0E14; }
.video-portada::before { display: none; }
.video-play { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #FFFFFF; color: var(--tinta); font: 600 clamp(0.9rem, 2.6vw, 1.05rem)/1 var(--titulo); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55); animation: late 1.8s ease-in-out infinite; }
.video-play::before { content: ""; width: clamp(30px, 7vw, 38px); height: clamp(30px, 7vw, 38px); flex: none; border-radius: 50%;
  background: var(--f-boton) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.6v12.8a.6.6 0 0 0 .92.5l10-6.4a.6.6 0 0 0 0-1l-10-6.4a.6.6 0 0 0-.92.5z' fill='%23fff'/%3E%3C/svg%3E") 56% 50% / 52% no-repeat; }
.video-portada:hover .video-play { transform: translateY(-1px); }

/* ---------- Aviso de pantalla completa: solo en pantallas táctiles ---------- */
.video-consejo { margin: 0 0 10px; font: 400 0.84rem/1.45 var(--f-texto); color: var(--morado); text-align: center; text-wrap: balance; }
.ico-max { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -0.42em; margin-inline: 2px; }
.ico-max circle { fill: #3A3A3F; }
.ico-max path { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .video-consejo { display: none; } }

/* ---------- Código del país con buscador ---------- */
.pregunta .telefono { position: relative; }
.codigo-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.codigo-boton { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; height: 100%; min-height: 52px; padding: 0 10px 0 14px; font: 400 1rem/1 var(--f-texto); color: var(--tinta); background: var(--relleno-campo); border: 1px solid var(--borde-campo); border-radius: 14px; cursor: pointer; white-space: nowrap; }
.codigo-boton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.codigo-boton[aria-expanded="true"] { border-color: var(--azul); box-shadow: 0 0 0 4px rgba(88, 81, 219, 0.16); background: #FFFFFF; }
.codigo-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.codigo-boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.codigo-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); padding: 8px; background: #FFFFFF; border: 1px solid var(--linea); border-radius: 16px; box-shadow: 0 24px 50px -18px rgba(29, 29, 31, 0.35); }
.codigo-panel[hidden] { display: none; }
.pregunta .codigo-buscar { padding: 12px 14px; border-radius: 12px; }
.codigo-lista { list-style: none; margin: 6px 0 0; padding: 0; max-height: 15.5rem; overflow-y: auto; overscroll-behavior: contain; }
.codigo-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font: 400 0.97rem/1.3 var(--f-texto); cursor: pointer; }
.codigo-lista li[aria-selected="true"], .codigo-lista li:hover { background: #F2F2F7; }
.codigo-num { color: var(--gris); font-variant-numeric: tabular-nums; flex: none; }
.codigo-lista .codigo-vacio { color: var(--gris); cursor: default; }
.codigo-lista .codigo-vacio:hover { background: none; }

/* ---------- Colores de las opciones: los 6 pasteles del degradado, siempre en este orden (amarillo, durazno, rosa,
   lila, lavanda, celeste). Cada pregunta arranca en un color distinto: app.js le pone data-tono a cada opción. ---------- */
.opciones label { --c: #E0457F; --c-claro: #FFE8F0; --c-borde: #FFD0E1; --c-activa: #FFD0E1; }
.opciones label[data-tono="0"] { --c: #C98A00; --c-claro: #FFF4D8; --c-borde: #FFE9B0; --c-activa: #FFE9B0; }
.opciones label[data-tono="1"] { --c: #E0653A; --c-claro: #FFECE3; --c-borde: #FFD9C7; --c-activa: #FFD9C7; }
.opciones label[data-tono="2"] { --c: #E0457F; --c-claro: #FFE8F0; --c-borde: #FFD0E1; --c-activa: #FFD0E1; }
.opciones label[data-tono="3"] { --c: #9B4FD6; --c-claro: #F5E9FD; --c-borde: #EBD3FA; --c-activa: #EBD3FA; }
.opciones label[data-tono="4"] { --c: #5B55E0; --c-claro: #EDEBFE; --c-borde: #DAD7FD; --c-activa: #DAD7FD; }
.opciones label[data-tono="5"] { --c: #2F86E0; --c-claro: #E9F3FE; --c-borde: #D2E6FD; --c-activa: #D2E6FD; }
.opciones label { background: var(--c-claro); border-color: var(--c-borde); }
.opciones label:has(input:checked) { background: var(--c-activa); border-color: var(--c); }
.opciones label input[type="radio"] { border-color: var(--c-borde); }
.opciones label input[type="radio"]:checked { border-color: var(--c); background: var(--c); }

/* ---------- Perfiles: cuadro 2x2 con la ilustración y el color de cada uno ---------- */
.opciones.perfiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.opciones .perfil { position: relative; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 10px 14px; text-align: center; }
.opciones .perfil input[type="radio"] { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; }
.perfil img { width: auto; height: clamp(96px, 26vw, 130px); object-fit: contain; margin-bottom: 4px; }
.perfil strong { font: 600 1rem/1.2 var(--titulo); color: var(--c); }
.perfil span { font-size: 0.8rem; line-height: 1.4; color: #4A4A50; }
.opciones label.p-artista { --c: #D4007F; --c-claro: #FFF0F8; --c-borde: #FBC3E3; --c-activa: #FFE0F1; }
.opciones label.p-profesional { --c: #3F8C00; --c-claro: #F4FBEC; --c-borde: #C9E8A8; --c-activa: #E6F6D3; }
.opciones label.p-freelance { --c: #7A3CC8; --c-claro: #F7F1FE; --c-borde: #DBC8F5; --c-activa: #EEE3FC; }
.opciones label.p-ugc { --c: #4459D6; --c-claro: #F2F4FF; --c-borde: #C7CFF7; --c-activa: #E3E7FF; }
.opciones label.perfil-nose { grid-column: 1 / -1; min-height: 48px; --c: #6E6E73; --c-claro: #F7F7F9; --c-borde: #DADADF; --c-activa: #ECECF0; }
@media (min-width: 521px) {
  .perfil span { font-size: 0.86rem; }
}
/* En el teléfono el play queda en un círculo en la esquina: la pastilla tapaba "como ser relevante?" */
@media (max-width: 600px) {
  .video-play { padding: 0; gap: 0; font-size: 0; }
  .video-play::before { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .video-play { animation: none; } }