/* ==========================================================================
   Sitio público de Piruli — chrome compartido (nav, pie, botones, secciones).
   Se carga SÓLO en páginas que declaran ViewData["Publico"] = true.

   REGLA DE COLOR: aquí no se inventa ningún hex. Todo sale de los tokens
   oficiales de site.css; los pasteles se DERIVAN con color-mix() del color
   oficial hacia blanco, que es justo lo que hace el mockup de marca.
   REGLA DE TIPOGRAFÍA (Brandbook, Marina 7-oct-2026, ticket 291820):
   títulos en --font-display (Baloo 2) NEGRITAS y MAYÚSCULAS; textos en
   --font-body (Montserrat); y donde antes iba cursiva, --font-script, que
   DENTRO de .publico es la letra de "jugar también es crecer" (Gochi Hand),
   ya no Dancing Script. No se agregan fuentes.
   ========================================================================== */

.publico {
  /* Acento de la sección. El Home y las páginas coral no declaran nada.
     Relleno = coral EXACTO del Brandbook #FA8D7A con texto BLANCO: 2.29:1,
     reprueba AA. Trade-off de accesibilidad ACEPTADO por Enrique Araiza el
     2026-09-24 (ticket 291820); el porqué y el historial viven en site.css,
     que es quien sombrea --brand-primary dentro de .publico. */
  --pb-acento: var(--brand-primary);
  --pb-acento-ink: var(--brand-primary-ink);   /* blanco, 2.29:1 aceptado */
  /* UN SOLO BEIGE para todo el sitio público (Marina, 28-sep): #EFDFD7 al 50 %.
     Los fondos de sección (página, nav, pie, encabezado de área, tarjetas de
     testimonios) usan su equivalente SÓLIDO sobre blanco, #F7EFEB: un fondo
     translúcido cambia de tono según lo que tenga debajo, y eso era justo el
     "hay dos beiges" que vio Marina (el encabezado de área era beige al 70 %
     sobre crema y la portada crema pura). Los círculos de valores y de rasgos
     sí van translúcidos al 50 %, encima de ese mismo beige. */
  --pb-beige: #F8F5F4;   /* fondo de todo el sitio público (Marina, 7-oct) */
  --pb-beige-circulo: rgba(239, 223, 215, .5);
  /* Hover/selección de los rellenos coral (flechas del carrusel, Instagram,
     redes del pie). Antes caían en --brand-primary-hover #C6472F, el "rojo
     vino" que reportó Marina (28-sep). Ahora pasan de coral a ROSA pastel
     (#E79FA2, el mismo rosa de la tarjeta de Nido), blanco encima 2.13:1:
     dentro del trade-off de estilo aceptado. Un solo token para los tres. */
  --pb-hover: #E79FA2;
  --pb-ancho: 1180px;
  /* La "cursiva" del sitio público es la letra de "jugar también es crecer"
     (Marina, 7-oct): todo lo que usa --font-script la hereda. Gochi Hand sólo
     tiene peso 400: nunca se le pone negrita (saldría sintética). */
  --font-script: "Gochi Hand", "Segoe Script", cursive;
}
/* Kínder va en azul. Se usa el azul de texto (#3E6CB0) y no el azul base,
   porque blanco sobre el azul base da 3.77:1 y no alcanza AA en texto normal;
   sobre #3E6CB0 da 5.29:1. */
.publico.acento-azul     { --pb-acento: var(--brand-blue-text); --pb-acento-ink: #fff; }
/* Fiestas va en amarillo con texto y flecha BLANCOS, como el resto de los
   botones. Blanco sobre --brand-yellow #FFD975 da 1.36:1: REPRUEBA WCAG AA
   (4.5:1) y es prácticamente invisible. TRADE-OFF ACEPTADO por Enrique Araiza
   el 2026-09-24 (ticket 291820, a pedido de Marige): estética de marca sobre
   contraste. No es un bug; no "arreglarlo" sin nueva decisión de Enrique. */
.publico.acento-amarillo { --pb-acento: var(--brand-yellow);    --pb-acento-ink: #fff; }
/* Nido va en rosa claro del Brandbook (Marige, 25-sep: Nido = rosa, Cuídame =
   coral). Blanco sobre --brand-pink #F9D0D1 da 1.40:1: reprueba AA. Mismo
   trade-off que el amarillo, dentro de la autorización general de Enrique para
   cambios de color de Marige (ticket 291820). */
.publico.acento-rosa     { --pb-acento: var(--brand-pink);      --pb-acento-ink: #fff; }
/* Tiendita va en verde, como las letras de su logo y su franja del inicio
   (Marige, 10-oct): el mismo verde del botón de la franja (5.3:1 con blanco). */
.publico.acento-verde    { --pb-acento: #2F7D46;                --pb-acento-ink: #fff; }

.publico-main { display: block; }

/* site.css le deja 60px de margen inferior al body (herencia del pie fijo viejo).
   En el sitio público eso deja una franja en blanco debajo del pie. */
body.publico { margin-bottom: 0; background-color: var(--pb-beige); }

/* TODOS los títulos del sitio público en MAYÚSCULAS (Marina, 28-sep). Por
   text-transform y nunca en el marcado: el buscador y el lector de pantalla
   reciben el título en caja normal. */
.publico-main :is(h1, h2, h3) { text-transform: uppercase; }
/* Y en Baloo 2 NEGRITAS (Brandbook, Marina 7-oct). Las secciones con su
   propia clase de título ya declaran 800; esto cubre los h1–h3 sin clase.
   :where() deja la especificidad en 0,1,0 para que el lema a mano (400) gane. */
.publico-main :where(h1, h2, h3) { font-weight: 800; }

/* El sticky va en el <header>, no en el <nav>: si se pone en el nav, su bloque
   contenedor es el header —que mide exactamente lo mismo— y no le queda
   recorrido para pegarse. */
.pb-header { position: sticky; top: 0; z-index: 1030; }

/* El Home y las páginas de categoría se pintan a todo lo ancho; cada sección
   centra su propio contenido con .pb-wrap. */
.pb-wrap {
  width: 100%;
  max-width: var(--pb-ancho);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* --------------------------------------------------------------- botones -- */
.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .8rem 1.5rem;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.pb-btn--cta {
  background: var(--pb-acento);
  color: var(--pb-acento-ink);
  box-shadow: 0 6px 16px rgba(51, 66, 74, .18);
}
.pb-btn--cta:hover,
.pb-btn--cta:focus-visible { color: var(--pb-acento-ink); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(51, 66, 74, .24); }
.pb-btn--claro {
  background: #fff;
  color: var(--brand-ink);
  border-color: var(--line-strong);
}
.pb-btn--claro:hover, .pb-btn--claro:focus-visible { color: var(--brand-ink); transform: translateY(-2px); }
.pb-btn .pb-flecha { font-size: 1.1em; line-height: 1; }

/* Foco visible en todo el sitio público (se navega mucho con teclado en kioscos). */
.publico a:focus-visible,
.publico button:focus-visible {
  outline: 3px solid var(--brand-blue-text);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------- nav -- */
.pb-nav {
  background: var(--pb-beige);
  border-bottom: 1px solid var(--line);
}
.pb-nav-inner {
  max-width: var(--pb-ancho);
  margin-inline: auto;
  padding: .7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pb-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.pb-brand img { height: 42px; width: auto; display: block; }
.pb-brand-lema {
  font-family: var(--font-script);
  color: var(--brand-coral);
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}
.pb-nav-toggle {
  margin-left: auto;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: var(--r-sm);
  padding: .45rem .6rem;
  color: var(--brand-ink);
  line-height: 0;
}
.pb-nav-menu { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.pb-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.pb-nav-links a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--brand-ink);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.pb-nav-links a:hover { color: var(--brand-coral); }
.pb-nav-links a[aria-current="page"] { color: var(--brand-coral); border-bottom-color: var(--brand-coral); }
.pb-nav-actions { display: flex; align-items: center; gap: .9rem; flex: none; }
/* Enlace de acceso al portal: existe SIEMPRE aunque el mockup no lo dibuje.
   Es la única puerta de los tutores a su cuenta; se deja discreto, no oculto. */
.pb-nav-cuenta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  color: var(--brand-slate-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pb-nav-cuenta:hover { color: var(--brand-coral); }
.pb-nav-actions .pb-btn { padding: .6rem 1.15rem; font-size: .92rem; }

@media (max-width: 991.98px) {
  .pb-nav-menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
    padding: .5rem 0 .9rem;
  }
  .pb-nav-links { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .pb-nav-links a { padding: .5rem 0; }
  .pb-nav-actions { flex-direction: column; align-items: stretch; gap: .6rem; }
  .pb-nav-actions .pb-btn { justify-content: center; }
  .pb-nav-cuenta { justify-content: center; }
  .pb-nav-inner { flex-wrap: wrap; }
}
@media (min-width: 992px) {
  .pb-nav-toggle { display: none; }
  .pb-nav-menu.collapse:not(.show) { display: flex; }
}

/* ------------------------------------------------- ilustración de marca -- */
/* Los dibujos oficiales del Brandbook (ave + elemento) traen cada uno su propia
   proporción: nido es ancho y bajo, kínder alto y angosto. Se fija el ALTO y se
   deja libre el ancho; encajarlos en un cuadro los deformaría. */
.pb-ilustracion { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------- círculos de ícono + texto -- */
/* Un solo componente para las dos filas de círculos del sitio: los valores de
   "¿Por qué Piruli?" en la portada y los rasgos de cada área. Vivían duplicados
   y se despintaban distinto en cada página. El número de columnas lo decide
   quien lo usa con --pb-circulos-cols. */
.pb-circulos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--pb-circulos-cols, 5), minmax(0, 1fr));
  gap: 1.25rem .75rem;
}
@media (max-width: 991.98px) { .pb-circulos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .pb-circulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pb-circulo { display: flex; flex-direction: column; align-items: center; gap: .6rem; min-width: 0; text-align: center; }
.pb-circulo-marco {
  width: 84px;
  height: 84px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-circulo-bg, var(--brand-pink));
  color: var(--brand-slate-strong);
}
.pb-circulo-marco svg { width: 36px; height: 36px; }
.pb-circulo span {
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-ink);
  overflow-wrap: break-word;
}
/* Rotación de pasteles de la paleta oficial. Con 7n el ciclo no se repite en la
   fila de 7 de la portada y alterna bien en las filas de 5 y 6 de las áreas. */
.pb-circulo:nth-child(7n+1) { --pb-circulo-bg: color-mix(in srgb, var(--brand-coral) 30%, #fff); }
.pb-circulo:nth-child(7n+2) { --pb-circulo-bg: color-mix(in srgb, var(--brand-yellow) 45%, #fff); }
.pb-circulo:nth-child(7n+3) { --pb-circulo-bg: color-mix(in srgb, var(--brand-blue) 22%, #fff); }
.pb-circulo:nth-child(7n+4) { --pb-circulo-bg: color-mix(in srgb, var(--brand-green) 26%, #fff); }
.pb-circulo:nth-child(7n+5) { --pb-circulo-bg: color-mix(in srgb, var(--brand-orange) 28%, #fff); }
.pb-circulo:nth-child(7n+6) { --pb-circulo-bg: var(--brand-pink); }
.pb-circulo:nth-child(7n+7) { --pb-circulo-bg: color-mix(in srgb, var(--brand-gray) 28%, #fff); }
@supports not (background: color-mix(in srgb, red 20%, #fff)) {
  .pb-circulo-marco { background: var(--brand-pink); }
}

/* ------------------------------------------------------------------- pie -- */
/* Mockup 12091 (Marina, 29-sep): crema con ondas celestes arriba y abajo,
   títulos en Baloo azul, lema en manuscrita coral y a mano en azul. */
.pb-pie {
  --pie-azul: #3E6CB0;
  --pie-celeste: #E3EDF9;
  position: relative;
  background: var(--pb-beige);
  padding: 4.25rem 0 0;
  overflow: hidden;
}
.pb-pie::before {
  content: "";
  position: absolute; inset: 0 -5% auto;
  height: 44px;
  background: var(--pie-celeste);
  border-radius: 0 0 50% 50% / 0 0 44px 44px;
}
.pb-pie-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 2rem;
  align-items: start;
  padding-bottom: 2.5rem;
}
.pb-pie-logo { display: inline-flex; align-items: flex-end; gap: .5rem; text-decoration: none; }
.pb-pie-logo img { height: 74px; width: auto; display: block; }
.pb-pie-lema {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  color: #F0735F;
  margin: .9rem 0 .2rem;
}
.pb-pie-lema svg { width: .9em; height: .9em; vertical-align: -.05em; }
.pb-pie-sublema { font-family: var(--font-script); font-size: 1.4rem; color: var(--brand-blue); margin: 0; }
.pb-pie h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--pie-azul);
  margin-bottom: .9rem;
}
.pb-pie-links { list-style: none; margin: 0; padding: 0; }
.pb-pie-links li { margin-bottom: .55rem; }
.pb-pie-links a {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--brand-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pb-pie-links a:hover { color: #F0735F; }
/* Íconos de "Platiquemos" en círculos de color, como el mockup. */
.pb-pie-ico {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-pie-ico svg { width: 19px; height: 19px; }
.pb-pie-ico--coral { background: var(--brand-primary); color: #fff; }
.pb-pie-ico--azul { background: #D6E4F6; color: var(--pie-azul); }
.pb-pie-ico--amarillo { background: #FFE6A3; color: #D98A00; }
.pb-pie-ico--rosa { background: var(--brand-pink); color: #F0735F; }
.pb-pie-ico--verde { background: #D7ECD4; color: #3F7F3A; }
.pb-social { display: flex; gap: .6rem; }
.pb-social a {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* Ícono BLANCO sobre el coral #FA8D7A de los botones (Marige, 24-sep;
     2.29:1, trade-off aceptado por Enrique). */
  background: var(--brand-primary);
  color: #fff;
}
.pb-social a:hover,
.pb-social a:focus-visible,
.pb-social a:active { background: var(--pb-hover); color: #fff; }
.pb-social svg { width: 21px; height: 21px; }
.pb-pie-ave { display: block; width: 84px; height: auto; margin: 2.5rem 0 0 auto; }

.pb-pie-cierre {
  background: var(--pie-celeste);
  border-radius: 50% 50% 0 0 / 30px 30px 0 0;
  padding: 1.5rem 0 1.25rem;
}
.pb-pie-cierre .pb-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.pb-pie-legal { font-family: var(--font-body); font-size: .85rem; color: var(--brand-ink); margin: 0; text-decoration: none; }
a.pb-pie-legal:hover { color: #F0735F; }

@media (max-width: 991.98px) {
  .pb-pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-pie-marca { grid-column: 1 / -1; }
  .pb-pie-ave { margin: 1rem 0 0; }
}
@media (max-width: 575.98px) {
  .pb-pie-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .pb-pie-cierre .pb-wrap { justify-content: center; text-align: center; }
}

/* Sin animación para quien la desactiva en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .publico * { transition: none !important; animation: none !important; }
  .pb-btn:hover { transform: none; }
}
/* Enlaces legales de la franja del pie (mockup 12091): "Aviso de privacidad | Términos y condiciones". */
.pb-pie-legales { display: flex; align-items: center; gap: .9rem; }
.pb-pie-legal-sep { color: var(--brand-ink); font-size: .85rem; }