/* Propuesta TicMas (ticmas.soymaker.tech). Hoja propia: la página no hereda el tema Edurock,
   pero usa sus colores y su tipografía (Roboto, #355080, #DAD93F). */
:root {
  --azul: #355080;
  --azul-hondo: #021428;
  --amarillo: #DAD93F;
  --texto: #4d5a64;
  --tenue: #6a7783;
  --papel: #fbfbf7;
  --linea: rgba(53, 80, 128, .09);
  --linea-fuerte: rgba(53, 80, 128, .16);
  --borde: #dfe4ec;
  --blanco: #fff;
  --ok: #2f8a4c;
  --mal: #b8402f;
  --agua: #3d8fd1;
  --ticmas: #15125c;
  --ticmas-teal: #1d8a9a;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(2, 20, 40, .06), 0 8px 24px rgba(2, 20, 40, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background-color: var(--papel);
  /* hoja cuadriculada de cuaderno */
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3 { color: var(--azul-hondo); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; letter-spacing: -.01em; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--azul); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }

.envoltura { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .envoltura { padding: 0 32px; } }

/* resaltador amarillo, como subrayar en el cuaderno */
.resalta { background: linear-gradient(transparent 58%, var(--amarillo) 58%, var(--amarillo) 92%, transparent 92%); padding: 0 .08em; }
.antetitulo { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul); margin-bottom: 14px; }
.seccion { padding: 88px 0; }
.seccion__intro { max-width: 680px; margin-bottom: 40px; }
.seccion__intro p { font-size: 1.125rem; }

.boton { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid var(--azul); transition: background-color .2s, color .2s, transform .2s; }
.boton--lleno { background: var(--azul); color: #fff; }
.boton--lleno:hover { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.boton--borde { color: var(--azul); background: var(--blanco); }
.boton--borde:hover { background: var(--azul); color: #fff; }
.boton:active { transform: translateY(1px); }

/* ── Cabecera ─────────────────────────────────────────── */
.cabecera { position: sticky; top: 0; z-index: 20; background: rgba(251, 251, 247, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.marcas { display: flex; align-items: center; gap: 14px; }
.marcas img { height: 38px; width: auto; }
.marcas img.marcas__ticmas { height: 26px; }
.marcas__x { color: var(--tenue); font-weight: 700; }
.cabecera__nota { font-size: .85rem; color: var(--tenue); text-align: right; }
@media (max-width: 560px) { .cabecera__nota { display: none; } .marcas img { height: 32px; } .marcas img.marcas__ticmas { height: 22px; } }

/* ── Portada ──────────────────────────────────────────── */
.portada { padding: 64px 0 72px; }
.portada .envoltura { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .portada .envoltura { grid-template-columns: 1fr 1.05fr; } }
.portada p.portada__bajada { font-size: 1.2rem; max-width: 34em; }
.portada__pie { margin-top: 14px; font-size: .9rem; color: var(--tenue); text-align: center; }

/* Navegador simulado con el espacio de TicMas */
.navegador { background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra), 0 30px 60px -30px rgba(21, 18, 92, .35); overflow: hidden; }
.navegador__barra { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #eef1f6; border-bottom: 1px solid var(--borde); }
.navegador__puntos { display: flex; gap: 6px; }
.navegador__puntos i { width: 10px; height: 10px; border-radius: 50%; background: #cfd6e2; }
.navegador__url { flex: 1; min-width: 0; font-size: .82rem; color: #3b4652; background: #fff; border-radius: 999px; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navegador__url b { color: var(--ticmas); }
.mini { padding: 16px 18px 20px; }
.mini__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mini__cabeza img { height: 24px; width: auto; }
.mini__menu { display: flex; gap: 14px; font-size: .78rem; font-weight: 700; color: var(--ticmas); }
.mini__menu span:first-child { border-bottom: 2px solid var(--ticmas-teal); }
@media (max-width: 480px) { .mini__menu span:nth-child(n+3) { display: none; } }
.mini__titulo { margin: 18px 0 14px; }
.mini__pildora { display: inline-block; background: var(--ticmas-teal); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; }
.mini__titulo strong { display: block; color: var(--ticmas); font-size: 1.35rem; font-weight: 900; margin-top: 6px; line-height: 1.1; }
.mini__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini__kit { border: 1px solid #e6e8f2; border-radius: 10px; overflow: hidden; background: #fff; }
.mini__kit img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: #e9f3fb; }
.mini__kit div { padding: 7px 8px 9px; }
.mini__kit b { display: block; font-size: .74rem; color: var(--ticmas); line-height: 1.2; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: #eef1fb; color: var(--ticmas); }
.chip--3d { background: var(--amarillo); color: var(--azul-hondo); }
@media (max-width: 420px) { .mini__rejilla { grid-template-columns: repeat(2, 1fr); } .mini__kit:nth-child(3) { display: none; } }

/* ── Por qué nosotros ─────────────────────────────────── */
.razones { display: grid; gap: 18px; counter-reset: razon; }
@media (min-width: 720px) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .razones { grid-template-columns: repeat(3, 1fr); } }
.razon { position: relative; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 24px 22px; box-shadow: var(--sombra); counter-increment: razon; }
.razon::before { content: counter(razon, decimal-leading-zero); display: block; font-size: .85rem; font-weight: 900; color: var(--azul); margin-bottom: 10px; }
.razon p { margin: 0; font-size: 1rem; }

/* ── Armado en 3D con el scroll ───────────────────────── */
.armado { position: relative; height: 560vh; }
.armado__fijo { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; max-width: 1180px; margin: 0 auto; }
@media (min-width: 900px) { .armado__fijo { grid-template-columns: 360px 1fr; grid-template-rows: 1fr; align-items: center; column-gap: 24px; padding: 0 32px; } }
.armado__lienzo { position: relative; min-height: 0; height: 100%; order: 1; }
@media (min-width: 900px) { .armado__lienzo { order: 2; } }
.armado__lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.armado__cargando, .armado__respaldo { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--tenue); font-size: .95rem; }
.armado__respaldo img { max-width: min(460px, 90%); border-radius: var(--radio); box-shadow: var(--sombra); margin: 0 auto 12px; }
.armado__texto { order: 2; padding: 0 16px 20px; }
@media (min-width: 900px) { .armado__texto { order: 1; padding: 0; } }
.fase { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 22px; }
.fase__paso { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .82rem; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .06em; }
.fase__paso span:last-child { font-variant-numeric: tabular-nums; color: var(--tenue); letter-spacing: 0; text-transform: none; font-weight: 400; }
.fase h3 { margin: 8px 0 6px; font-size: 1.35rem; }
.fase p { margin: 0; font-size: 1rem; min-height: 4.8em; }
.barra-avance { height: 6px; border-radius: 999px; background: #e7ebf2; margin-top: 16px; overflow: hidden; }
.barra-avance i { display: block; height: 100%; width: 0; background: var(--azul); border-radius: inherit; }
.fases-lista { display: none; list-style: none; padding: 0; margin: 18px 0 0; gap: 6px; }
@media (min-width: 900px) { .fases-lista { display: grid; } }
.fases-lista li { font-size: .92rem; color: var(--tenue); display: flex; gap: 10px; align-items: center; }
.fases-lista li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #b7c2d3; flex: none; }
.fases-lista li.hecha::before { background: var(--azul); border-color: var(--azul); }
.fases-lista li.actual { color: var(--azul-hondo); font-weight: 700; }
.fases-lista li.actual::before { border-color: var(--azul); background: var(--amarillo); }
.armado__etiqueta { position: absolute; left: 16px; top: 14px; z-index: 2; font-size: .78rem; font-weight: 700; color: var(--azul); background: rgba(255,255,255,.85); border: 1px solid var(--borde); border-radius: 999px; padding: 4px 12px; }
@media (max-width: 899px) { .fase p { min-height: 0; font-size: .95rem; } .fase { padding: 14px 16px; } .fase h3 { font-size: 1.1rem; } }

/* ── Actividad de las jeringas ────────────────────────── */
.actividad .envoltura { display: grid; gap: 28px; }
@media (min-width: 900px) { .actividad .envoltura { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.jeringas { position: sticky; top: 76px; z-index: 1; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; }
.jeringas svg { width: 100%; height: auto; max-height: 56vh; display: block; margin: 0 auto; }
@media (max-width: 899px) { .jeringas svg { max-height: 30vh; } .jeringas { top: 72px; padding: 10px; } }
.jeringas__pie { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; color: var(--tenue); margin-top: 6px; }
.jeringas__pie b { color: var(--azul-hondo); font-variant-numeric: tabular-nums; }
.preguntas { display: grid; gap: 22px; padding-bottom: 12vh; }
.pregunta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; transition: border-color .3s; }
.pregunta.bien { border-color: var(--ok); }
.pregunta__num { font-size: .8rem; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .06em; }
.pregunta h3 { margin: 6px 0 14px; }
.opciones { display: grid; gap: 8px; }
.opcion { text-align: left; font: inherit; font-size: 1rem; min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--borde); background: #fff; color: var(--azul-hondo); cursor: pointer; transition: border-color .2s, background-color .2s; }
.opcion:hover { border-color: var(--azul); }
.opcion[aria-pressed="true"].es-mal { border-color: var(--mal); background: #fbeeeb; }
.opcion[aria-pressed="true"].es-bien { border-color: var(--ok); background: #e9f5ec; }
.pregunta.bien .opcion:not(.es-bien) { opacity: .55; }
.retro { margin: 12px 0 0; font-size: .95rem; min-height: 1.5em; }
.retro.bien { color: var(--ok); }
.retro.mal { color: var(--mal); }
.muybien { display: none; position: relative; overflow: hidden; text-align: center; background: var(--azul); color: #fff; border-radius: var(--radio); padding: 34px 22px; box-shadow: var(--sombra); }
.muybien { scroll-margin-top: 25vh; }
@media (max-width: 899px) { .muybien { scroll-margin-top: calc(30vh + 180px); } }
.muybien.visible { display: block; animation: aparece .5s cubic-bezier(.2,.8,.2,1.2); }
.muybien strong { display: block; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; color: var(--amarillo); line-height: 1.1; }
.muybien p { margin: 10px auto 0; max-width: 30em; color: #e5ebf5; }
.confeti { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: cae 2.4s ease-in forwards; }
@keyframes aparece { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cae { to { transform: translateY(260px) rotate(540deg); opacity: 0; } }

/* ── Ecosistema ───────────────────────────────────────── */
.ecosistema { display: grid; gap: 14px; }
@media (min-width: 640px) { .ecosistema { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ecosistema { grid-template-columns: repeat(3, 1fr); } }
.pieza { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.pieza__tipo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.pieza h3 { margin: 0; }
.pieza p { margin: 0; font-size: .97rem; }
.pieza--destacada { background: var(--azul-hondo); border-color: var(--azul-hondo); color: #c9d4e4; }
.pieza--destacada h3 { color: #fff; }
.pieza--destacada .pieza__tipo { color: var(--amarillo); }
.pieza--destacada code { color: var(--amarillo); font-family: inherit; font-weight: 700; }

/* ── Cierre ───────────────────────────────────────────── */
.cierre { padding: 96px 0 72px; }
.cierre__caja { background: var(--blanco); border: 2px solid var(--azul-hondo); border-radius: 20px; padding: clamp(28px, 5vw, 56px); display: grid; gap: 28px; box-shadow: 8px 8px 0 var(--amarillo); }
@media (min-width: 860px) { .cierre__caja { grid-template-columns: 1.4fr 1fr; align-items: center; } }
.cierre__caja p { font-size: 1.1rem; margin: 0; }
.cierre__acciones { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* mismo amarillo y texto que el botón flotante de cita del sitio (partials/boton-cita.html) */
.boton--cita { background: var(--amarillo); border-color: var(--amarillo); color: #16283F; box-shadow: 0 10px 24px rgba(2, 20, 40, .18); }
.boton--cita:hover { background: #e6e558; border-color: #e6e558; }

/* ── Librito: manual impreso de 3 hojas ───────────────── */
/* Cada página mide 5,5 × 8,5 in como el cuadernillo real; los tamaños van en --u (1 % del ancho de una página).
   Colores y tipografías (Fredoka, Nunito) del manual impreso infantil. */
.librito { --ink: #24304a; --ink2: #5b6782; --coral: #ff5d73; --coral-d: #d93a52; --mint: #21c49a; --mint-d: #14946f; --sol: #ffc93c; }
.libro { container-type: inline-size; --u: .5cqi; position: relative; width: min(100%, 980px, (100vh - 220px) * 11 / 8.5); aspect-ratio: 11 / 8.5; margin: 0 auto; perspective: 2600px; transition: transform .7s cubic-bezier(.3, .1, .2, 1); cursor: pointer; }
.libro[data-vista="0"] { transform: translateX(-25%); }
.libro[data-vista="3"] { transform: translateX(25%); }
.hoja { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: left center; transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.hoja.pasada { transform: rotateY(-180deg); }
.pag { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; display: flex; flex-direction: column; color: var(--ink); font-family: "Nunito", "Segoe UI", sans-serif; font-weight: 700; font-size: calc(3.1 * var(--u)); line-height: 1.35; padding: calc(7 * var(--u)) calc(6.5 * var(--u)) calc(11 * var(--u)) calc(8.5 * var(--u)); border-radius: 0 8px 8px 0; box-shadow: 0 18px 40px -18px rgba(2, 20, 40, .45), 0 2px 6px rgba(2, 20, 40, .12); }
.pag::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(7 * var(--u)); background: linear-gradient(90deg, rgba(2, 20, 40, .13), transparent); pointer-events: none; }
.pag--dorso { transform: rotateY(180deg); border-radius: 8px 0 0 8px; padding: calc(7 * var(--u)) calc(8.5 * var(--u)) calc(11 * var(--u)) calc(6.5 * var(--u)); }
.pag--dorso::after { left: auto; right: 0; background: linear-gradient(270deg, rgba(2, 20, 40, .13), transparent); }
.pag h3, .pag h4 { font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.05; }
.pg-folio { position: absolute; bottom: calc(3.5 * var(--u)); right: calc(5 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(3.4 * var(--u)); }
.pag--dorso .pg-folio { right: auto; left: calc(5 * var(--u)); }

.pag--portada { text-align: center; align-items: center; background: linear-gradient(180deg, #bfe7ff 0%, #e9f7ff 55%, #fff4d6 100%); padding: calc(9 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u)); }
.pg-rotulo { display: inline-block; background: #fff; border-radius: 99px; padding: calc(1 * var(--u)) calc(3.5 * var(--u)); font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(3 * var(--u)); color: var(--ink2); }
.pag .pg-titulo-portada { font-size: calc(12.5 * var(--u)); margin: calc(3 * var(--u)) 0 calc(1 * var(--u)); line-height: .95; }
.pg-titulo-portada span { display: block; color: var(--coral); }
.pg-sub { margin: 0; font-family: "Fredoka", sans-serif; font-weight: 500; font-size: calc(4.4 * var(--u)); color: #1f63d6; }
.pg-modelo { flex: 1; min-height: 0; width: 100%; object-fit: contain; margin: calc(3 * var(--u)) 0; filter: drop-shadow(0 calc(2 * var(--u)) calc(1.5 * var(--u)) rgba(36, 48, 74, .2)); }
.pg-dueno { width: 100%; display: flex; gap: calc(2 * var(--u)); align-items: flex-end; background: #fff; border-radius: calc(4 * var(--u)); padding: calc(3 * var(--u)) calc(4 * var(--u)); font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(4 * var(--u)); text-align: left; }
.pg-dueno i { flex: 1; border-bottom: 2px dashed #b9c4d6; height: calc(4 * var(--u)); }
.pg-marcas { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-top: calc(3.5 * var(--u)); font-size: calc(2.8 * var(--u)); color: var(--ink2); }
.pg-marcas img { height: calc(4.6 * var(--u)); width: auto; }

.pg-cabeza h3 { font-size: calc(7.5 * var(--u)); }
.pg-lead { color: var(--ink2); margin: calc(2 * var(--u)) 0 calc(3 * var(--u)); font-size: calc(3.4 * var(--u)); }
.pg-jeringas { width: 100%; height: auto; max-height: 30%; margin: calc(1 * var(--u)) 0 calc(3 * var(--u)); }
.pg-como { list-style: none; counter-reset: c; padding: 0; margin: 0; display: grid; gap: calc(2.2 * var(--u)); }
.pg-como li { counter-increment: c; display: flex; gap: calc(2.5 * var(--u)); align-items: center; color: var(--ink2); font-size: calc(3.5 * var(--u)); }
.pg-como li::before { content: counter(c); flex: none; width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); border-radius: 50%; background: #3a86ff; color: #fff; display: grid; place-items: center; font-family: "Fredoka", sans-serif; font-weight: 600; }
.pg-como li:nth-child(2)::before { background: var(--sol); }
.pg-como li:nth-child(3)::before { background: var(--mint); }
.pg-como li:nth-child(4)::before { background: var(--coral); }
.pg-como b { color: var(--ink); }
.pg-aviso, .pg-nota { margin-top: auto; background: #fff3c4; border: 2px solid #ffe08a; border-radius: calc(3 * var(--u)); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); color: #6b4c00; font-weight: 800; font-size: calc(3.2 * var(--u)); }

.pg-paso { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 2.5px solid #ffe1e6; border-radius: calc(4 * var(--u)); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); }
.pg-paso + .pg-paso { margin-top: calc(3 * var(--u)); }
.pg-paso__cab { display: flex; gap: calc(2.5 * var(--u)); align-items: center; }
.pg-num { flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: var(--coral); box-shadow: 0 calc(.8 * var(--u)) 0 var(--coral-d); color: #fff; display: grid; place-items: center; font-family: "Fredoka", sans-serif; font-weight: 700; font-size: calc(5 * var(--u)); }
.pg-num--verde { background: var(--mint); box-shadow: 0 calc(.8 * var(--u)) 0 var(--mint-d); }
.pg-paso h4 { font-size: calc(4.6 * var(--u)); }
.pg-pildoras { display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--u)); margin-top: calc(1 * var(--u)); }
.pg-pildora { padding: calc(.5 * var(--u)) calc(2 * var(--u)); border-radius: 99px; font-weight: 800; font-size: calc(2.6 * var(--u)); border: 1.5px solid; }
.pg-pildora--azul { background: #e1edff; border-color: #b3d0ff; color: #1a4fae; }
.pg-pildora--sol { background: #fff3c4; border-color: #ffe08a; color: #7a5600; }
.pg-pildora--coral { background: #ffe1e6; border-color: #ffb3bf; color: #a3203a; }
.pg-foto { flex: 1; min-height: 0; position: relative; margin: calc(1.5 * var(--u)) 0; background: radial-gradient(ellipse at 50% 60%, #eaf6ff 0%, #fff 72%); border-radius: calc(3 * var(--u)); }
.pg-foto img { position: absolute; inset: calc(1 * var(--u)); width: calc(100% - calc(2 * var(--u))); height: calc(100% - calc(2 * var(--u))); object-fit: contain; }
.pg-paso p { margin: 0; color: var(--ink2); font-size: calc(3.1 * var(--u)); }
.pg-paso .pg-nota { margin-top: calc(1.5 * var(--u)); padding: calc(1.5 * var(--u)) calc(2.5 * var(--u)); font-size: calc(2.9 * var(--u)); }
.pg-nota--prueba { background: #d8f7ee; border-color: #9ae6cf; color: #0e6f53; }

.pg-preg { background: #f6f9ff; border-radius: calc(3.5 * var(--u)); padding: calc(3 * var(--u)) calc(3.5 * var(--u)); margin-bottom: calc(2.6 * var(--u)); font-size: calc(3.4 * var(--u)); }
.pg-preg b { font-family: "Fredoka", sans-serif; color: var(--coral); }
.pg-ops { display: flex; flex-wrap: wrap; gap: calc(2 * var(--u)); margin-top: calc(2 * var(--u)); }
.pg-ops span { background: #fff; border: 2px solid #e2e8f4; border-radius: 99px; padding: calc(1 * var(--u)) calc(3.5 * var(--u)); font-family: "Fredoka", sans-serif; font-weight: 500; }
.pg-preg--dibujo { flex: 1; display: flex; flex-direction: column; margin-bottom: 0; }
.pg-caja { flex: 1; min-height: calc(12 * var(--u)); margin-top: calc(2 * var(--u)); border: 3px dashed #b9c4d6; border-radius: calc(4 * var(--u)); background: #fff; }

.pg-sopa { border-collapse: separate; border-spacing: calc(.9 * var(--u)); margin: calc(3 * var(--u)) auto 0; }
.pg-sopa td { width: calc(7.4 * var(--u)); height: calc(7.4 * var(--u)); text-align: center; vertical-align: middle; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(4.2 * var(--u)); background: #f6f9ff; border-radius: calc(1.4 * var(--u)); padding: 0; }
.pg-palabras { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(1.4 * var(--u)); margin-top: calc(3 * var(--u)); }
.pg-palabras span { background: #fff; border: 2px solid #e2e8f4; border-radius: 99px; padding: calc(.4 * var(--u)) calc(2.4 * var(--u)); font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(2.9 * var(--u)); }
.pg-logro { margin-top: auto; background: #d8f7ee; border: 2px solid #9ae6cf; border-radius: calc(3 * var(--u)); padding: calc(2.4 * var(--u)) calc(3 * var(--u)); color: #0e6f53; font-size: calc(3.3 * var(--u)); text-align: center; }
.pg-logro b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: calc(4.4 * var(--u)); display: block; }

.librito__controles { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; }
.librito__estado { min-width: 9em; text-align: center; font-weight: 700; color: var(--azul-hondo); font-variant-numeric: tabular-nums; }
.librito__controles .boton:disabled { opacity: .35; cursor: default; }

/* En el celular no cabe el libro abierto: se ve una página a la vez */
@media (max-width: 759px) {
  .libro, .libro[data-vista] { --u: 1cqi; aspect-ratio: 5.5 / 8.5; width: min(100%, 420px); transform: none; perspective: none; }
  .hoja, .hoja.pasada { left: 0; width: 100%; transform: none; transform-style: flat; }
  .pag, .pag--dorso { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; border-radius: 8px; }
  .pag.activa { opacity: 1; visibility: visible; }
  .librito__controles { gap: 8px; }
  .librito__controles .boton { padding: 10px 14px; }
  .librito__estado { min-width: 6.5em; font-size: .9rem; }
}

/* ── Franja de experiencia ────────────────────────────── */
.franja { background: var(--azul-hondo); color: #d3dcea; padding: 26px 0; }
.franja__lista { list-style: none; margin: 0 auto; display: grid; gap: 18px 28px; }
@media (min-width: 560px) { .franja__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .franja__lista { grid-template-columns: .8fr .9fr 1fr 1.5fr; } }
.franja__item { display: flex; gap: 14px; align-items: center; font-size: .95rem; line-height: 1.35; }
.franja__item b { display: block; color: var(--amarillo); font-size: 1.3rem; font-weight: 900; line-height: 1.15; }
.franja__icono { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(218, 217, 63, .13); color: var(--amarillo); display: grid; place-items: center; }
.franja__icono svg { width: 24px; height: 24px; }

/* ── Placa (PCB) y caja: usan el mismo bloque fijo que la mesa ─ */
.armado--pcb { height: 380vh; }
.armado--caja { height: 440vh; }
.armado__lienzo--svg { display: grid; place-items: center; padding: 44px 0 12px; }
.armado__lienzo--svg svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 24px rgba(2, 20, 40, .22)); }
.pcb-pistas path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pcb-serigrafia { opacity: 0; }
.pcb-c { transform-box: fill-box; transform-origin: center; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .armado--pcb, .armado--caja { height: auto; }
  .pcb-pistas path { stroke-dashoffset: 0; }
  .pcb-serigrafia, .pcb-c { opacity: 1; }
}

/* ── Envíos: mapa de Colombia ─────────────────────────── */
.envios .envoltura { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .envios .envoltura { grid-template-columns: 1fr 1fr; gap: 56px; } }
.envios__lista { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.envios__lista li { position: relative; padding-left: 32px; font-size: 1.02rem; }
.envios__lista li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 50%; background: var(--amarillo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23021428' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.envios__lista b { color: var(--azul-hondo); }
.envios__contador { margin: 0; color: var(--tenue); }
.envios__contador b { font-size: 2.2rem; font-weight: 900; color: var(--azul); font-variant-numeric: tabular-nums; margin-right: 4px; }
.envios__mapa { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; }
.mapa { width: 100%; height: auto; max-height: 78vh; display: block; margin: 0 auto; }
.mapa__ruta path { transition: none; }
.mapa__ciudad circle { fill: #b7c2d3; stroke: #fff; stroke-width: 2; transition: fill .3s, r .3s; }
.mapa__ciudad text { opacity: .35; transition: opacity .3s; paint-order: stroke; stroke: #e7eef8; stroke-width: 4px; stroke-linejoin: round; }
.mapa__ciudad.llego circle { fill: var(--azul); }
.mapa__ciudad.llego text { opacity: 1; }
.mapa__ciudad--base circle, .mapa__ciudad--base.llego circle { fill: var(--amarillo); stroke: var(--azul-hondo); }
.mapa__ciudad--base text { opacity: 1; }

/* ── Pie con nuestros datos ───────────────────────────── */
.pie { background: var(--azul-hondo); color: #c9d4e4; padding: 52px 0 24px; font-size: .95rem; }
.pie__rejilla { display: grid; gap: 32px; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie__marca img { height: 64px; width: auto; background: #fff; border-radius: 12px; padding: 6px 10px; margin-bottom: 14px; }
.pie__marca p { margin: 0; max-width: 30em; }
.pie h3 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.pie a:hover { border-bottom-color: var(--amarillo); }
.pie a:focus-visible { outline-color: var(--amarillo); }
.pie__base { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: #93a3bb; }

/* Aparición suave al entrar en pantalla */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.revela.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; transition: none; }
  .armado { height: auto; }
  .armado__fijo { position: relative; top: 0; height: auto; min-height: 80vh; }
  .armado__lienzo { min-height: 60vh; }
  .muybien.visible, .confeti { animation: none; }
  .libro, .hoja, .pag { transition: none; }
}