/* ============================================================
   SAPEROCO STUDIO — web pública
   Identidad del Manual de Marca 2026: Magenta / Cian / Crema,
   Boldonse (display) + General Sans (texto), las mismas fuentes
   que carga el portal de familias.
   ============================================================ */
:root {
  --crema: #fcedf5;
  --crema-deep: #f3d9e7;
  --magenta: #d35d88;
  --magenta-deep: #a63f65;
  --cian: #18a4d3;
  --cian-deep: #0f78a8;
  --ink: #241521;
  --ink-soft: #4a2f42;

  --font-display: "Boldonse", "Arial Black", sans-serif;
  --font-body:
    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;

  --wrap: 1180px;
  --edge: clamp(20px, 5vw, 64px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* grano: textura física, de cartel impreso */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

/* ---------- Botones ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  padding: 0.95em 1.7em;
  border-radius: 999px;
  border: 2px solid currentColor;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.pill:hover {
  transform: translateY(-2px);
}
.pill:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.pill--solid {
  background: var(--ink);
  color: var(--crema);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 0 var(--magenta-deep);
}
.pill--solid:hover {
  box-shadow: 6px 6px 0 0 var(--magenta-deep);
}
.pill--ghost {
  background: transparent;
  color: var(--ink);
}
.pill--ghost:hover {
  background: var(--ink);
  color: var(--crema);
}

.sticker {
  position: absolute;
  width: clamp(64px, 9vw, 120px);
  filter: drop-shadow(0 6px 14px rgba(36, 21, 33, 0.28));
  pointer-events: none;
}

/* ---------- Cabecera ---------- */
header.sitio {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(252, 237, 245, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}
header.sitio .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--edge);
  max-width: var(--wrap);
  margin: 0 auto;
}
header.sitio .marca {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
header.sitio .marca img {
  height: 30px;
  width: auto;
}
header.sitio nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 30px);
}
header.sitio nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding-bottom: 2px;
}
header.sitio nav a:hover {
  color: var(--ink);
}
header.sitio nav a.activo {
  color: var(--magenta-deep);
  border-bottom: 2px solid var(--magenta-deep);
}
header.sitio nav a.pill {
  color: var(--crema);
  padding: 0.6em 1.3em;
  font-size: 0.8rem;
}

/* ---------- Barra de saltos dentro de una página ---------- */
.barra-saltos {
  background: var(--crema);
  padding: 22px var(--edge) 6px;
}
.barra-saltos .inner {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
}
.barra-saltos .salto {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.7em 1.4em;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 0 var(--sombra);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.barra-saltos .salto.magenta {
  --sombra: var(--magenta);
}
.barra-saltos .salto.cian {
  --sombra: var(--cian);
}
.barra-saltos .salto:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--sombra);
}
.barra-saltos .salto:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Al saltar con un enlace interno, dejar hueco para la cabecera pegajosa */
:target,
section[id],
.ficha[id] {
  scroll-margin-top: 84px;
}

/* enlaces que se ocultan en móvil: el menú corto cabe siempre */
header.sitio nav a.solo-ancho {
  display: none;
}
@media (min-width: 760px) {
  header.sitio nav a.solo-ancho {
    display: inline;
  }
}

section {
  position: relative;
  padding: clamp(64px, 9vw, 104px) var(--edge);
}
.inner {
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(56px, 10vw, 108px) var(--edge) clamp(72px, 9vw, 120px);
  overflow: hidden;
  background: radial-gradient(
    ellipse 60% 50% at 82% 8%,
    var(--crema-deep) 0%,
    transparent 60%
  );
}
.fondo-pintadera {
  position: absolute;
  z-index: 0;
  opacity: 0.14;
}
.hero .inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
}
.hero .eyebrow {
  color: var(--magenta-deep);
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(3rem, 10vw, 7.4rem);
  color: var(--ink);
}
.hero h1 .punto {
  color: var(--cian-deep);
}
.hero .lede {
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--ink-soft);
  margin-top: 6px;
}
.hero .ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 8px;
}

/* ---------- Etiqueta de sección numerada ---------- */
.track-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 46px);
}
.track-label .num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--magenta);
  line-height: 1;
}
.track-label .txt {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  flex: 1;
}

/* ---------- Adelanto de la portada ---------- */
.adelanto {
  padding-top: clamp(20px, 3vw, 34px);
}
.adelanto-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 840px) {
  .adelanto-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.tarjeta-adelanto {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(28px, 3.4vw, 40px);
  border-radius: 26px;
  border: 2px solid var(--ink);
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
  box-shadow: 6px 6px 0 0 var(--ink);
}
.tarjeta-adelanto:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 0 var(--ink);
}
.tarjeta-adelanto.magenta {
  background: var(--magenta);
  color: var(--crema);
}
.tarjeta-adelanto.cian {
  background: var(--cian);
  color: var(--ink);
}
.tarjeta-adelanto h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
}
.tarjeta-adelanto p {
  margin: 0;
  max-width: 34ch;
  font-size: 1rem;
}
.tarjeta-adelanto .ir {
  margin-top: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.84rem;
}
.tarjeta-adelanto .deco {
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 190px;
  opacity: 0.2;
  pointer-events: none;
}

.tira-portal {
  margin-top: 22px;
  border: 2px dashed var(--magenta-deep);
  border-radius: 18px;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 0.98rem;
}
.tira-portal strong {
  font-weight: 700;
}
.tira-portal a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--magenta-deep);
}

/* ---------- Quiénes somos ---------- */
.about-grid {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: 1fr;
}
@media (min-width: 840px) {
  .about-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.about h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 22px;
}
.about p {
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 54ch;
}
.about p + p {
  margin-top: 1.1em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.chip {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.82rem;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  color: var(--ink);
}
.tarjeta-simbolo {
  background: var(--magenta);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 8px 8px 0 0 var(--ink);
}
.tarjeta-simbolo img {
  width: min(240px, 72%);
}

/* ---------- Valores ---------- */
.valores {
  background: var(--ink);
  color: var(--crema);
}
.valores .track-label .txt {
  color: var(--crema);
  border-color: var(--crema);
  opacity: 0.9;
}
.valores .track-label .num {
  color: var(--cian);
}
.valores-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(2, 1fr);
  background: rgba(252, 237, 245, 0.16);
  border-radius: 22px;
  overflow: hidden;
}
@media (min-width: 760px) {
  .valores-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.valor {
  background: var(--ink);
  padding: clamp(26px, 3vw, 34px) clamp(20px, 2.4vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.valor img {
  width: 40px;
  opacity: 0.92;
}
.valor h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.valor p {
  font-size: 0.92rem;
  color: rgba(252, 237, 245, 0.72);
  margin: 0;
}

/* ---------- Manifiesto ---------- */
.manifiesto {
  background: var(--magenta);
  color: var(--crema);
  overflow: hidden;
}
.manifiesto .track-label .txt {
  color: var(--crema);
  border-color: rgba(252, 237, 245, 0.6);
}
.manifiesto .track-label .num {
  color: var(--ink);
}
.frases {
  display: grid;
}
.frase {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 22px);
  border-top: 2px solid rgba(252, 237, 245, 0.35);
  padding: clamp(18px, 2.6vw, 28px) 0;
  flex-wrap: wrap;
}
.frase:last-child {
  border-bottom: 2px solid rgba(252, 237, 245, 0.35);
}
.frase .rasgo {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.82rem, 1.3vw, 0.98rem);
  color: var(--ink);
  width: 100%;
  max-width: 210px;
  flex-shrink: 0;
}
.frase q {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  quotes: "\201C" "\201D";
  flex: 1;
  min-width: 240px;
}

/* ---------- Para quién ---------- */
.publico h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 8px;
}
.publico .sub {
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: clamp(30px, 4vw, 48px);
}
.personas {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .personas {
    grid-template-columns: repeat(3, 1fr);
  }
}
.persona {
  background: var(--crema-deep);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.persona .tag {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.84rem;
  color: var(--cian-deep);
}
.persona p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink);
}

/* ---------- Únete ---------- */
.unete {
  background: var(--cian);
  color: var(--ink);
  overflow: hidden;
}
.unete .inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .unete .inner {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}
.unete h2 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  color: var(--ink);
}
.unete .lede {
  max-width: 44ch;
  margin-top: 16px;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.unete .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.unete .track-label .txt {
  border-color: var(--ink);
}
.unete .pill--solid {
  box-shadow: 4px 4px 0 0 var(--ink);
}
.unete .pill--solid:hover {
  box-shadow: 6px 6px 0 0 var(--ink);
}

.ficha {
  background: var(--crema);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 26px 26px 22px;
}
.ficha dl {
  margin: 0;
  display: grid;
  gap: 0;
}
.ficha dt {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.76rem;
  color: var(--ink-soft);
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--crema-deep);
}
.ficha dl > dt:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.ficha dd {
  margin: 5px 0 0;
  font-size: 1rem;
  font-weight: 500;
}
.ficha dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Horario de atención: cada canal con su cabecera de color */
.horarios {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.canal {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
}
.canal.wa {
  --acento: var(--cian-deep);
}
.canal.rec {
  --acento: var(--magenta-deep);
}
.canal .etiqueta {
  display: block;
  background: var(--acento);
  color: var(--crema);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  padding: 8px 16px;
}
.canal .franjas {
  padding: 4px 16px 10px;
}
.canal .franja {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  font-size: 0.94rem;
  border-bottom: 1px solid var(--crema-deep);
}
.canal .franja:last-child {
  border-bottom: none;
}
.canal .franja .dia {
  color: var(--ink-soft);
}
.canal .franja .conector {
  color: var(--acento);
  font-weight: 700;
  text-align: center;
}
.canal .franja .hora {
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.canal .franja .hora.provisional {
  font-weight: 500;
  font-style: italic;
  color: var(--ink-soft);
  white-space: normal;
}

/* ---------- Grupos ---------- */
.bloque-claro {
  background: var(--crema);
}
.grupos-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  margin-bottom: 26px;
}
.grupos-cabecera h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
  margin: 0;
}
.grupos-cabecera .pista {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.grupos-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 620px) {
  .grupos-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .grupos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.grupo {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 20px 22px;
  border-top-width: 7px;
  border-top-color: var(--acento);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grupo .nombre {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--acento);
  line-height: 1.1;
}
.grupo .linea {
  display: flex;
  gap: 10px;
  font-size: 0.94rem;
}
.grupo .linea .et {
  color: var(--ink-soft);
  min-width: 62px;
  flex-shrink: 0;
}
.grupo .linea .va {
  font-weight: 600;
}
.grupo.clase {
  --acento: var(--magenta-deep);
}
.grupo.competicion {
  --acento: var(--cian-deep);
}

/* ---------- Precios ---------- */
.precios {
  background: var(--crema-deep);
}
.tabla-precios {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 8px 26px;
  max-width: 640px;
}
.tabla-precios .fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--crema-deep);
}
.tabla-precios .fila:last-child {
  border-bottom: none;
}
.tabla-precios .concepto {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.98rem;
}
.tabla-precios .concepto b {
  font-weight: 700;
}
.tabla-precios .importe {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--magenta-deep);
  white-space: nowrap;
}
.tabla-precios .fila.destacada .concepto {
  font-weight: 700;
}
.nota-hermanos {
  margin-top: 22px;
  display: inline-block;
  background: var(--magenta);
  color: var(--crema);
  border-radius: 999px;
  padding: 0.8em 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
}
.precios .apunte {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---------- Pie ---------- */
footer.sitio {
  background: var(--ink);
  color: var(--crema);
  padding: 44px var(--edge) 34px;
}
footer.sitio .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
footer.sitio .marca img {
  height: 24px;
  width: auto;
}
footer.sitio .meta {
  font-size: 0.82rem;
  color: rgba(252, 237, 245, 0.6);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
footer.sitio a {
  text-decoration: none;
}
footer.sitio a:hover {
  text-decoration: underline;
}

/* ---------- Movimiento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .flota {
    animation: flotar 7s ease-in-out infinite;
  }
  @keyframes flotar {
    0%,
    100% {
      transform: translateY(0) rotate(var(--r, 0deg));
    }
    50% {
      transform: translateY(-10px) rotate(var(--r, 0deg));
    }
  }
}

/* ---------- Páginas legales ---------- */
/* Texto largo de leer, no de ojear: columna estrecha e interlineado amplio.
   70ch es el ancho al que la vista salta de línea sin perderse. */
.legal {
  background: var(--crema);
  padding: clamp(48px, 7vw, 88px) var(--edge);
}
.legal .inner {
  max-width: 70ch;
}
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--magenta-deep);
  line-height: 1.05;
  margin: 0 0 14px;
}
.legal .lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0 0 40px;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 38px 0 12px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--magenta-deep);
  margin: 24px 0 8px;
}
.legal p {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--ink);
}
.legal a {
  color: var(--magenta-deep);
  font-weight: 600;
}
.legal .apunte {
  margin-top: 36px;
  padding: 16px 18px;
  background: var(--crema-deep);
  border-radius: 14px;
  font-size: 0.95rem;
}
.legal .fecha {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}