@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dancing-script-latin-700-normal.woff2) format('woff2')}

/* Layout: una sola columna en celular que se abre a dos en escritorio; arcoíris pastel desde la orilla en el hero,
   tiras gingham como separadores y el formulario como tarjeta protagonista. Tema único claro por marca (el kit prohíbe fondos oscuros). */
:root {
  color-scheme: light;
  --crema: #FFFBF5;
  --blanco: #FFFFFF;
  --marino: #0E1B55;
  --marino-suave: #4A5480;
  --azul: #4FC8F8;
  --rosa: #F7A6C1;
  --amarillo: #FAD54A;
  --rosa-pastel: #F6CBD3;
  --cielo: #C4E2F0;
  --menta: #CFE4C2;
  --mantequilla: #F7E4A6;
  --lavanda: #C9B8D9;
  --rosa-intenso: #EE6C9C;
  --coral: #E0605F;
  --linea: #EDE4D6;
  --borde-campo: #3A3F4C; /* el mismo de la app: los campos se distinguen del fondo (WCAG 1.4.11) */
  --f-titulo: "Fredoka", "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-texto: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script: "Dancing Script", "Brush Script MT", cursive;
  --r-ctrl: 18px;
  --r-caja: 28px;
  --sombra: 0 10px 30px -12px rgba(14, 27, 85, .22);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--marino);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-titulo); line-height: 1.1; margin: 0; text-wrap: balance; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marino); outline-offset: 3px; border-radius: 10px; }
footer :focus-visible { outline-color: var(--azul); }

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

/* ---------- Aviso demo ---------- */
.demo-strip {
  background: var(--marino);
  color: var(--crema);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.demo-strip .wrap { padding-block: 8px; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; }
.demo-strip span.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo); flex: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--r-ctrl);
  border: 2px solid transparent;
  font-family: var(--f-titulo); font-weight: 600; font-size: 18px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.btn:active { transform: translateY(0); }
.btn-azul { background: var(--azul); color: var(--marino); }
.btn-rosa { background: var(--rosa); color: var(--marino); }
.btn-linea { background: var(--blanco); color: var(--marino); border-color: var(--marino); }
.btn-wa { background: #25D366; color: var(--marino); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Encabezado ---------- */
.top .wrap { padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.top img { width: 120px; height: auto; display: block; }
.top .btn { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.arcos {
  position: absolute; right: -220px; bottom: -330px;
  width: 720px; height: 720px; border-radius: 50%;
  background:
    radial-gradient(circle, var(--crema) 0 34%, transparent 34.2%),
    radial-gradient(circle, var(--lavanda) 0 42%, transparent 42.2%),
    radial-gradient(circle, var(--cielo) 0 50%, transparent 50.2%),
    radial-gradient(circle, var(--menta) 0 58%, transparent 58.2%),
    radial-gradient(circle, var(--mantequilla) 0 66%, transparent 66.2%),
    radial-gradient(circle, var(--rosa-pastel) 0 74%, transparent 74.2%);
  opacity: .75; pointer-events: none;
}
.hero .wrap { position: relative; padding-block: 18px 56px; display: grid; gap: 32px; align-items: center; }
.hero-txt { display: grid; gap: 18px; min-width: 0; }
.chip-estado {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--mantequilla); border-radius: 999px; padding: 6px 14px;
  font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.chip-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rosa-intenso); animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.5); opacity: .5; } }
.script { font-family: var(--f-script); font-weight: 700; color: var(--azul); font-size: 34px; line-height: 1; margin-bottom: -6px; }
.hero h1 { font-size: clamp(40px, 9vw, 68px); letter-spacing: -.01em; }
.hero h1 em { font-style: normal; color: var(--rosa-intenso); }
.hero-sub { font-size: 19px; color: var(--marino-suave); max-width: 32ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.hero-foto { position: relative; min-width: 0; }
.hero-foto figure { margin: 0; border-radius: var(--r-caja); overflow: hidden; box-shadow: var(--sombra); border: 6px solid var(--blanco); aspect-ratio: 900 / 576; max-width: 100%; background: var(--rosa-pastel); }
.hero-foto figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-logo { position: absolute; width: 150px; right: -6px; bottom: -40px; animation: flotar 5s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-8px) rotate(-2deg); } }
.etiqueta-render { position: absolute; left: 16px; top: 16px; background: rgba(255,251,245,.92); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }

/* ---------- Gingham ---------- */
.gingham {
  height: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(246,203,211,.85) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(0deg, rgba(196,226,240,.85) 0 13px, transparent 13px 26px),
    var(--crema);
}

/* ---------- Secciones ---------- */
.sec .wrap { padding-block: 64px; display: grid; gap: 32px; }
.sec-head { display: grid; gap: 10px; max-width: 640px; }
.ceja { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--marino-suave); }
.sec-head h2 { font-size: clamp(30px, 6vw, 44px); }
.sec-head p { color: var(--marino-suave); font-size: 18px; }

/* Galería */
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 78%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.galeria figure { margin: 0; scroll-snap-align: start; display: grid; gap: 10px; }
.galeria .ph { position: relative; border-radius: var(--r-caja); overflow: hidden; aspect-ratio: 4 / 5; background: var(--cielo); max-width: 100%; }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.galeria figure:hover img { transform: scale(1.04); }
.galeria figcaption { display: grid; gap: 2px; padding-inline: 4px; }
.galeria figcaption b { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; }
.galeria figcaption span { color: var(--marino-suave); font-size: 15px; }
.nota { font-size: 14px; color: var(--marino-suave); display: flex; gap: 8px; align-items: flex-start; }
.nota::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--rosa-intenso); }

/* Incluye */
.incluye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.inc { background: var(--blanco); border-radius: var(--r-caja); padding: 22px 18px; display: grid; gap: 10px; align-content: start; border: 2px solid var(--linea); }
.inc .ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; }
.inc .ico svg { width: 30px; height: 30px; stroke: var(--marino); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.inc h3 { font-size: 21px; font-weight: 600; }
.inc p { font-size: 15px; color: var(--marino-suave); }
.inc-banda { background: var(--lavanda); border-radius: var(--r-caja); padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.inc-banda p { font-family: var(--f-titulo); font-weight: 600; font-size: 19px; }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.pasos li::before {
  counter-increment: paso; content: counter(paso);
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-titulo); font-weight: 700; font-size: 26px;
  border: 3px solid var(--marino);
}
.pasos li:nth-child(1)::before { background: var(--azul); }
.pasos li:nth-child(2)::before { background: var(--rosa); }
.pasos li:nth-child(3)::before { background: var(--amarillo); }
.pasos h3 { font-size: 21px; font-weight: 600; margin-top: 4px; }
.pasos p { color: var(--marino-suave); font-size: 16px; margin-top: 4px; }

/* ---------- Formulario ---------- */
.sec-form { background: var(--cielo); position: relative; overflow: hidden; overflow: clip; } /* clip: con hidden, scrollIntoView desplazaba la sección por dentro y la tarjeta se corría */
.sec-form::before, .sec-form::after { content: ""; position: absolute; border-radius: 999px; border: 22px solid; pointer-events: none; }
.sec-form::before { width: 220px; height: 220px; border-color: var(--rosa); left: -110px; top: -60px; opacity: .8; }
.sec-form::after { width: 180px; height: 180px; border-color: var(--amarillo); right: -80px; bottom: -70px; opacity: .9; }
.sec-form .wrap { position: relative; z-index: 1; }
.form-card { background: var(--blanco); border-radius: var(--r-caja); box-shadow: var(--sombra); padding: 26px 20px 24px; display: grid; gap: 22px; max-width: 640px; width: 100%; justify-self: center; }
.prog { display: grid; gap: 8px; }
.prog-txt { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--marino-suave); }
.prog-bar { height: 10px; background: var(--crema); border-radius: 999px; overflow: hidden; border: 2px solid var(--linea); }
.prog-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--rosa), var(--amarillo)); border-radius: 999px; transition: width .35s ease; }
.paso { display: grid; gap: 18px; animation: entra .35s ease; }
@keyframes entra { from { opacity: 0; transform: translateX(16px); } }
.paso h3 { font-size: clamp(25px, 5vw, 32px); font-weight: 600; }
.paso .ayuda { color: var(--marino-suave); font-size: 16px; margin-top: -8px; }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 800; font-size: 15px; }
.campo input[type="text"], .campo input[type="tel"], .campo input[type="date"], .campo textarea {
  width: 100%; min-height: 54px; padding: 12px 16px;
  border-radius: var(--r-ctrl); border: 2px solid var(--borde-campo); background: var(--crema);
  font: inherit; font-size: 18px; color: var(--marino);
}
.campo textarea { min-height: 84px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--marino); background: var(--blanco); box-shadow: 0 0 0 4px var(--azul); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips.edad { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.chip {
  min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: 2px solid var(--borde-campo); background: var(--crema);
  font-weight: 700; font-size: 16px; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.chips.edad .chip { padding: 0; font-family: var(--f-titulo); font-size: 20px; font-weight: 600; }
.chip:hover { border-color: var(--azul); }
.chip[aria-pressed="true"] { background: var(--azul); border-color: var(--marino); transform: scale(1.03); }
.chips.tema .chip[aria-pressed="true"] { background: var(--rosa); }
.check { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 16px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--rosa-intenso); }
.fecha-bonita { font-family: var(--f-titulo); font-weight: 600; font-size: 18px; color: var(--marino); min-height: 1.4em; }
.error { color: var(--marino); background: var(--rosa-pastel); border: 2px solid var(--coral); border-radius: var(--r-ctrl); padding: 10px 14px; font-weight: 700; font-size: 15px; }
.nota-form { font-size: 15px; color: var(--marino-suave); text-align: center; margin-top: -8px; }
.nota-form a { display: inline-block; padding: 10px 4px; color: var(--marino); font-weight: 800; text-underline-offset: 3px; white-space: nowrap; }
.nav-form { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.nav-form .btn-atras { background: none; border: 0; font-weight: 800; color: var(--marino-suave); cursor: pointer; min-height: 48px; padding: 0 6px; text-decoration: underline; text-underline-offset: 4px; }
.nav-form .btn { flex: 1; max-width: 260px; margin-left: auto; }

/* Resumen */
.burbuja {
  background: #E7F8DC; border-radius: 22px 22px 22px 6px; padding: 16px 18px;
  font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 2px solid #CDEBB9;
}
.burbuja-meta { font-size: 13px; color: var(--marino-suave); font-weight: 700; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.acciones { display: grid; gap: 12px; }
.acciones .fila { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones .fila .btn { flex: 1; min-width: 140px; font-size: 16px; min-height: 48px; }
.listo { display: grid; gap: 6px; text-align: center; justify-items: center; }
.listo .globo { width: 64px; height: 76px; }

/* Preguntas */
.faq { display: grid; gap: 12px; }
.faq details { background: var(--blanco); border-radius: var(--r-ctrl); border: 2px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative; font-family: var(--f-titulo); font-weight: 600; font-size: 19px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; background: var(--rosa-pastel); display: grid; place-items: center; font-size: 22px; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--rosa); }
.faq .resp { padding: 0 20px 18px; color: var(--marino-suave); display: grid; gap: 8px; }
.pill-confirmar { justify-self: start; background: var(--mantequilla); color: var(--marino); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }

/* Ubicación + pie */
.ubica { background: var(--rosa-pastel); border-radius: var(--r-caja); padding: 28px 22px; display: grid; gap: 18px; }
.ubica h2 { font-size: clamp(28px, 6vw, 40px); }
.datos { display: grid; gap: 12px; }
.dato { display: grid; gap: 2px; }
.dato span { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-suave); }
.dato b a { text-decoration-color: var(--rosa-intenso); text-underline-offset: 4px; }
.dato b { font-family: var(--f-titulo); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; }
footer { background: var(--marino); color: var(--crema); }
footer .wrap { padding-block: 32px calc(110px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; justify-items: center; text-align: center; }
footer img { width: 130px; height: auto; }
footer p { font-size: 14px; opacity: .8; }

/* Barra fija de celular */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(255,251,245,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 2px solid var(--linea);
  transition: transform .25s ease;
}
.barra-cta .btn { width: 100%; }
.barra-cta.oculta { transform: translateY(120%); }

/* ---------- Escritorio ---------- */
@media (min-width: 720px) {
  .galeria { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .incluye { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .pasos li { grid-template-columns: 1fr; }
  .form-card { padding: 36px 40px 32px; }
  .ubica { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 40px; }
}
@media (min-width: 920px) {
  .hero .wrap { grid-template-columns: 1.05fr 1fr; padding-block: 28px 84px; gap: 48px; }
  .hero-logo { width: 190px; right: -24px; bottom: -56px; }
  .arcos { right: -160px; bottom: -380px; width: 860px; height: 860px; }
  .sec .wrap { padding-block: 88px; }
  .sec-form .wrap { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; }
  .sec-form .sec-head { align-self: center; }
  .barra-cta { display: none; }
  footer .wrap { padding-block: 40px; }
}
@media (max-width: 400px) {
  .chips.edad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .incluye { gap: 10px; }
  .inc { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Ajustes de producción ===== */
.hero-logo{height:auto}
.salto{position:absolute;left:-999px;top:0;background:var(--marino);color:#fff;padding:10px 16px;border-radius:0 0 12px 0;z-index:100;font-weight:800;text-decoration:none}
.salto:focus{left:0}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--coral);background:#FFF5F4;box-shadow:0 0 0 4px rgba(224,96,95,.18)}
.btn[aria-busy="true"]{position:relative;pointer-events:none;opacity:.85}
.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;border:3px solid var(--marino);border-right-color:transparent;margin-left:10px;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.fondo-cielo{background:var(--cielo)}.fondo-rosa{background:var(--rosa-pastel)}.fondo-mant{background:var(--mantequilla)}.fondo-menta{background:var(--menta)}
.fondo-blanco{background:var(--blanco)}.sin-pad-top{padding-top:0}.mt0{margin-top:0}.alinea-ini{justify-self:start}
.aviso-envio{background:var(--mantequilla);border-radius:var(--r-ctrl);padding:12px 16px;font-weight:700;margin-bottom:14px}
.piel-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:15px}
.piel-links a,.piel-links button{color:var(--marino-suave);background:none;border:0;padding:0;font:inherit;text-decoration:underline;cursor:pointer}
/* cookies */
.cookies{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--blanco);border:2px solid var(--marino);border-radius:20px;box-shadow:var(--sombra);padding:16px;display:grid;gap:12px;max-width:640px;margin-inline:auto}
.cookies p{font-size:15px;line-height:1.45}
.cookies .fila{display:flex;gap:10px;flex-wrap:wrap}
.cookies .btn{min-height:44px;padding:0 20px;font-size:16px;flex:1}
/* páginas internas */
.pag{padding-block:40px 72px}
.pag .wrap{max-width:780px}
.pag h1{font-size:clamp(30px,5vw,44px);margin-bottom:8px}
.pag h2{font-size:clamp(20px,3vw,26px);margin:34px 0 8px}
.pag p,.pag li{margin-bottom:10px}
.pag ul{padding-left:22px;margin:0 0 10px}
.pag .meta{color:var(--marino-suave);font-size:15px}
.pag a{text-decoration-color:var(--rosa-intenso);text-underline-offset:3px}
.centro{text-align:center}
.centro .wrap{display:grid;justify-items:center;gap:16px}
.centro img.logo-g{width:200px;height:auto}
.folio{display:inline-block;background:var(--mantequilla);border-radius:99px;padding:6px 18px;font-weight:800;font-family:var(--f-titulo)}
.centro .fila{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.v404{font-family:var(--f-titulo);font-size:clamp(80px,22vw,160px);line-height:1;color:var(--rosa-intenso)}