/* =====================================================================
   FAMILIA — añadidos de la versión 2 (laboratorio)
   ---------------------------------------------------------------------
   Piezas pensadas para que la página se sienta cercana y de confianza,
   no como un catálogo:
     1. Calculadora "¿En qué etapa va tu peque?" (recuerda al niño)
     2. "Revísala tú misma en 30 segundos" (3 chequeos con dibujo)
     3. Checklist "Antes de arrancar" (se guarda en el navegador)
     4. Pared de familias (testimonios estilo foto pegada)
     5. Contadores que suben solos al llegar a "Quiénes somos"
     6. Señal de "Abierto ahora" en vivo
     7. Carta escrita a mano de Emeline
   ===================================================================== */

/* =====================================================================
   1 + 2 — Bloque "Tu peque" (calculadora y auto-chequeo)
   ===================================================================== */
.peque { background: var(--bg-alt); }

.peque__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .peque__grid { grid-template-columns: 1fr; } }

.pcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.pcard__head { margin-bottom: 16px; }
.pcard__head h3 { font-size: 1.24rem; margin-bottom: 4px; }
.pcard__head p { color: var(--muted); font-size: .92rem; }

/* ---- Formulario ---- */
.pform { display: grid; gap: 12px; }
.pform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .pform__row { grid-template-columns: 1fr; } }

.pfield { display: grid; gap: 5px; }
.pfield label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.pfield input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-warm);
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.pfield input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--sage); }

/* ---- Resultado ---- */
.presult {
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--rose-soft);
  border: 1px solid var(--accent);
  display: none;
}
.presult.is-on { display: block; animation: pIn .5s var(--ease-out-expo) both; }
@keyframes pIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.presult__hi { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); }
.presult__stage { font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; line-height: 1.15; margin: 6px 0 8px; }
.presult__txt { font-size: .94rem; color: var(--ink); margin-bottom: 12px; }

/* Barra que muestra en qué punto de la etapa va */
.pbar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  overflow: hidden;
  margin-bottom: 8px;
}
.pbar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad-principal);
  transition: width .9s var(--ease-out-expo);
}
.presult__next { font-size: .84rem; color: var(--muted); }

.presult__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Saludo cuando ya lo conocemos de una visita anterior */
.pback {
  display: none;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: .88rem;
  font-weight: 500;
}
.pback.is-on { display: inline-flex; }
.pback button {
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ---- 2. Auto-chequeo en 3 pasos ---- */
.chk__tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.chk__tab {
  border: 1px solid var(--line);
  background: var(--surface-warm);
  color: var(--muted);
  padding: 9px 15px;
  border-radius: 999px;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-out-expo);
}
.chk__tab:hover { transform: translateY(-2px); }
.chk__tab.is-on { background: var(--brand); border-color: var(--brand); color: var(--white); }
.chk__tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.chk__panel { display: none; }
.chk__panel.is-on { display: block; animation: pIn .45s var(--ease-out-expo) both; }

/* ---- Foto de cada chequeo ----
   Se guardan completas y el encuadre se hace aquí con object-position, para
   poder apuntar a lo que importa de cada foto (el broche, las manos en el
   arnés, la silla) sin recortar el archivo y perder margen. */
.chk__art {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--brand-soft);
  margin-bottom: 16px;
}
.chk__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease-out-expo);
}
.chk__art:hover img { transform: scale(1.05); }

.chk__panel[data-chk="pinza"]  .chk__art img { object-position: 50% 55%; }
.chk__panel[data-chk="broche"] .chk__art img { object-position: 50% 52%; }
.chk__panel[data-chk="firme"]  .chk__art img { object-position: 50% 50%; }

.chk__t { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.chk__d { font-size: .92rem; color: var(--muted); }
.chk__d strong { color: var(--ink); }

/* =====================================================================
   3 — Checklist "Antes de arrancar"
   ===================================================================== */
.antes { background: var(--surface-warm); }

.antes__grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 860px) { .antes__grid { grid-template-columns: 1fr; } }

/* Anillo grande con el avance */
.antes__ring { display: grid; place-items: center; text-align: center; }
.antes__ring svg { width: 150px; height: 150px; transform: rotate(-90deg); }
.antes__ring circle { fill: none; stroke-width: 9; }
.antes__ring .r-bg { stroke: var(--brand-soft); }
.antes__ring .r-fg {
  stroke: var(--brand-vivo);
  stroke-linecap: round;
  /* 2 · π · 62 ≈ 389.56 */
  stroke-dasharray: 389.56;
  stroke-dashoffset: 389.56;
  transition: stroke-dashoffset .6s var(--ease-out-expo), stroke .4s ease;
}
.antes__ring.is-full .r-fg { stroke: var(--brand); }
.antes__num { margin-top: -96px; margin-bottom: 52px; }
.antes__num strong { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 2rem; line-height: 1; color: var(--brand); }
.antes__num span { font-size: .8rem; color: var(--muted); }

.antes__list { display: grid; gap: 10px; }

.acheck {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .2s var(--ease-out-expo);
}
.acheck:hover { transform: translateX(3px); border-color: var(--sage); }
.acheck input { position: absolute; opacity: 0; width: 0; height: 0; }

.acheck__box {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-out-expo);
}
.acheck__box svg { width: 14px; height: 14px; color: var(--white); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .3s var(--ease-out-expo); }
.acheck input:focus-visible + .acheck__box { outline: 3px solid var(--focus); outline-offset: 2px; }

.acheck.is-done { background: var(--brand-soft); border-color: var(--sage); }
.acheck.is-done .acheck__box { background: var(--brand); border-color: var(--brand); transform: scale(1.06); }
.acheck.is-done .acheck__box svg { opacity: 1; transform: scale(1); }

.acheck__t { font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.3; min-width: 0; }
.acheck__t small { display: block; font-size: .82rem; font-weight: 400; color: var(--muted); margin-top: 3px; }
.acheck.is-done .acheck__t { color: var(--brand); }

.antes__done {
  display: none;
  margin-top: 14px;
  padding: 15px 18px;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--white);
  animation: pIn .5s var(--ease-out-expo) both;
}
.antes__done.is-on { display: block; }
.antes__done strong { display: block; font-size: 1.05rem; margin-bottom: 3px; }
.antes__done span { font-size: .9rem; opacity: .9; }

.antes__reset {
  margin-top: 12px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* =====================================================================
   4 — Pared de familias (testimonios como fotos pegadas)
   ===================================================================== */
.pared { position: relative; }
.pared .tcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 20px 26px;
  box-shadow: 0 10px 26px rgba(20, 60, 60, .10);
  transition: transform .35s var(--ease-out-expo), box-shadow .35s ease;
}
/* Cada tarjeta ligeramente torcida, como pegada a mano en la pared */
.pared .tcard:nth-child(3n+1) { transform: rotate(-1.4deg); }
.pared .tcard:nth-child(3n+2) { transform: rotate(.9deg); }
.pared .tcard:nth-child(3n+3) { transform: rotate(-.5deg); }
.pared .tcard:hover { transform: rotate(0) translateY(-6px); box-shadow: var(--shadow); z-index: 2; }

/* Cintita adhesiva arriba */
.pared .tcard::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 78px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(216, 167, 167, .55), rgba(216, 167, 167, .32));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.pared .tcard blockquote { font-style: italic; }

/* =====================================================================
   5 — Contadores que suben solos
   ===================================================================== */
.stat strong { font-variant-numeric: tabular-nums; }

/* =====================================================================
   6 — Señal de "Abierto ahora"
   ===================================================================== */
.abierto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--muted);
}
.abierto__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
}
.abierto.is-open { border-color: rgba(37, 211, 102, .45); background: rgba(37, 211, 102, .10); color: #14663a; }
.abierto.is-open .abierto__dot { background: var(--whatsapp); animation: abPulse 1.9s ease-in-out infinite; }
@keyframes abPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%      { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}
.abierto.is-closed { border-color: var(--line); background: var(--bg-alt); }
.abierto small { font-weight: 400; opacity: .85; }

/* =====================================================================
   7 — Carta escrita a mano de Emeline
   ===================================================================== */
.carta {
  position: relative;
  margin-top: 26px;
  padding: 28px 30px 24px;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(122, 143, 124, .13) 31px 32px),
    var(--surface-warm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.carta::after {
  /* Doblez de papel en la esquina */
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 42px; height: 42px;
  background: linear-gradient(135deg, transparent 50%, var(--brand-soft) 50%);
  border-bottom-right-radius: var(--radius-lg);
}
.carta__t {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  color: var(--brand);
  margin-bottom: 10px;
}
.carta p { font-size: .98rem; line-height: 32px; color: var(--ink); margin-bottom: 8px; }
.carta__firma {
  margin-top: 14px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--accent-dark);
  transform: rotate(-2deg);
  display: inline-block;
}
.carta__rol { display: block; font-family: "Poppins", sans-serif; font-style: normal; font-size: .78rem; color: var(--muted); transform: rotate(2deg); margin-top: 2px; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .chk-pinch, .chk-strap, .chk-angle,
  .abierto.is-open .abierto__dot { animation: none !important; }
  .presult.is-on, .chk__panel.is-on, .antes__done.is-on { animation: none; }
  .pbar span { transition: none; }
  .pared .tcard { transform: none !important; }
}

/* =====================================================================
   ACCESO A LAS HERRAMIENTAS (bloque corto en la portada)
   ---------------------------------------------------------------------
   La portada quedó muy cargada, así que las herramientas viven en
   guia.html y aquí solo queda la puerta de entrada.
   ===================================================================== */
.herram { background: var(--bg-alt); }

.herram__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  /* Filo con el verde vivo de la marca */
  border-left: 5px solid var(--brand-vivo);
}
@media (max-width: 860px) { .herram__box { grid-template-columns: 1fr; gap: 22px; padding: 24px; } }

.herram__txt h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; }
.herram__txt p { color: var(--muted); margin-bottom: 18px; }

.herram__list { list-style: none; display: grid; gap: 12px; }
.herram__list li {
  display: grid;
  gap: 2px;
  padding: 14px 16px 14px 46px;
  border-radius: var(--radius);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  position: relative;
  transition: border-color .25s ease, transform .25s var(--ease-out-expo);
}
.herram__list li:hover { border-color: var(--brand-vivo); transform: translateX(3px); }
/* Vistito con el verde vivo: aquí sí funciona porque es un gráfico, no texto */
.herram__list li::before {
  content: "";
  position: absolute;
  left: 16px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--brand-vivo-soft);
  border: 2px solid var(--brand-vivo);
}
.herram__list strong { font-size: .96rem; color: var(--ink); }
.herram__list span { font-size: .85rem; color: var(--muted); }

/* =====================================================================
   TASA CERO BAC — la clienta pidió que se vea bien grande
   ---------------------------------------------------------------------
   Antes iba como un logo de 74px en una franja discreta y no se leía.
   Ahora es un bloque propio, con el logo a tamaño real.
   ===================================================================== */
.bacbanner {
  padding: 46px 0;
  background:
    radial-gradient(700px 320px at 85% 20%, rgba(56, 176, 141, .16), transparent 65%),
    var(--brand-soft);
  border-top: 1px solid rgba(56, 176, 141, .3);
  border-bottom: 1px solid rgba(56, 176, 141, .3);
}
.bacbanner__inner {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 860px) {
  .bacbanner { padding: 34px 0; }
  .bacbanner__inner { grid-template-columns: 1fr; gap: 26px; }
}

.bacbanner__tag {
  display: inline-block;
  padding: 6px 15px;
  border-radius: 999px;
  background: var(--white);
  color: var(--brand);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.bacbanner h2 {
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--brand);
}
.bacbanner p {
  font-size: clamp(.98rem, 1.6vw, 1.1rem);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: 22px;
}
.bacbanner p strong { color: var(--ink); }

/* El logo, por fin a un tamaño donde se lee */
.bacbanner__logo {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.bacbanner__logo img {
  width: 100%;
  /* El archivo mide 766px de ancho. En pantallas retina (2x) eso da
     383px nítidos como máximo, así que no lo estiramos más allá. */
  max-width: 360px;
  height: auto;
}
@media (max-width: 860px) {
  .bacbanner__logo { padding: 24px; }
  .bacbanner__logo img { max-width: 280px; }
}

/* Botón más grande para que acompañe al bloque */
.btn--lg { padding: 15px 30px; font-size: 1.02rem; }

/* Recordatorio junto a los productos */
.bacnote {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding: 18px 24px;
  border-radius: var(--radius);
  background: var(--white);
  border: 2px solid var(--brand-vivo);
  box-shadow: var(--shadow-sm);
}
.bacnote img { width: 200px; height: auto; flex: 0 0 auto; }
.bacnote span { font-size: 1.02rem; color: var(--ink); }
.bacnote b { color: var(--brand); }
@media (max-width: 560px) {
  .bacnote { gap: 12px; padding: 16px; }
  .bacnote img { width: 150px; }
  .bacnote span { font-size: .95rem; }
}

/* Acciones al completar la lista */
.antes__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.antes__acciones .btn--ghost {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: var(--white);
}
.antes__acciones .btn--ghost:hover { background: rgba(255, 255, 255, .24); }

/* Al imprimir, dejar solo la lista: sirve para pegarla en la guantera */
@media print {
  .header, .footer, .cinema, .herram, .bacstrip, .bacnote,
  .chat-widget, .wa-float, .newsletter, .crumb,
  .antes__acciones, .antes__reset, .peque__grid { display: none !important; }
  .antes { background: #fff; }
  .acheck { break-inside: avoid; border-color: #999; }
}