/* TOF · manual de marca en las plantillas (fases 2 y 3), reglas escritas a mano.
   Va después de tof-marca-mapa.css (generado) y tof-marca-comun.css (fase 1).
   /blog y /casos ya siguen el manual con sus propias hojas: las reglas genéricas
   los excluyen, igual que la tarjeta de caso compartida. La Home conserva su
   cielo y su mar, y el titular de su hero sigue en Manrope (decisiones del
   13-11-2026); el resto de la Home sí cambia. */

/* ───────── Colores por uso (tokens/build/tof.css) ─────────
   Las utilidades de Tailwind leen estas variables (bg-bg, text-fg, border-border…). */
body.serene-site.serene-site {
  --background: 255 255 255;
  --foreground: 28 30 45;
  --card: 255 255 255;
  --card-foreground: 28 30 45;
  --muted: 247 247 249;
  --muted-foreground: 96 98 117;
  --border: 213 214 220;
  --input: 147 148 163;
  --secondary: 247 247 249;
  --secondary-foreground: 28 30 45;
  --serene-deep: #1c1e2d;
  background: #fff;
  color: #1c1e2d;
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
}
body.serene-chrome .serene-legal-page {
  --background: 255 255 255;
  --foreground: 28 30 45;
  --muted-foreground: 96 98 117;
  --border: 213 214 220;
  --secondary: 247 247 249;
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
}

/* ───────── Titulares ─────────
   Excepción (decisión del 13-11-2026): el titular del hero de la Home conserva
   su tipografía original en Manrope (serene-home.css); el generador del mapa
   tampoco la toca. */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is(h1, h2, h3, .display):not(.public-case-card *, .serene-home-hero *) {
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
  font-weight: 650;
  font-stretch: 112.5%;
  font-synthesis: none;
  letter-spacing: -.022em;
}
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is(h1, h2):not(.serene-home-hero *) { line-height: 1.05; }
body.serene-chrome .serene-home-hero h1.public-rotating-headline { font-stretch: 100%; }
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is(h3, .display):not(h1, h2) { line-height: 1.2; }

/* ───────── Antetítulos y etiquetas: frase normal, sin espaciado, Mona Sans ───────── */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is([class~="uppercase"], [class*="tracking-[0."], [class*="tracking-[."], [class~="tracking-wide"], [class~="tracking-wider"], [class~="tracking-widest"]):not(.public-case-card *) {
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is([class~="uppercase"], [class*="tracking-[0."]):is([class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[10.5px]"], [class*="text-[11px]"], [class~="text-xs"], [class*="text-[12px]"]):not(.public-case-card *) {
  font-size: 14px;
  line-height: 1.4;
}

/* La utilidad font-inter (entradillas de Nosotros y Equipo) también pasa a Mona Sans. */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) [class~="font-inter"] {
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
}

/* ───────── Monoespaciada solo para datos ─────────
   Enlaces, correos y numeraciones pasan a Mona Sans con cifras tabulares. */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) [class~="font-mono"]:not(.public-case-card *) {
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ───────── Fondos: blanco o gris suave, sin cielo ni degradados (salvo el cielo de la Home) ───────── */
body.serene-chrome .serene-breadcrumb { background: #fff; }
body.serene-chrome main [style*="radial-gradient"]:not(.serene-home-hero *) { background: none !important; }
/* Tarjeta oscura de «Ejemplo de proyecto» (segmentos): fondo oscuro liso. */
body.serene-chrome main .bg-fg[style*="linear-gradient"] { background: #1c1e2d !important; }
/* Línea que une los pasos del ejemplo: borde fino, sin degradado. */
body.serene-chrome main [aria-hidden][style*="linear-gradient(to bottom"] { background: #d5d6dc !important; }

/* ───────── Decoración que el manual no admite ─────────
   Números gigantes desvaídos, palabras de fondo, manchas difuminadas y contadores «01 / 03». */
body.serene-chrome main .display:is(.opacity-20, .opacity-25),
body.serene-chrome main [class*="select-none"][class*="md:text-[2"],
body.serene-chrome main [aria-hidden]:is([class~="blur-3xl"], [class*="blur-[80px]"], [class*="blur-[120px]"]),
body.serene-chrome main div:is([class~="blur-3xl"], [class*="blur-[120px]"]):not(:has(*)),
body.serene-chrome .serene-partner-index-position,
body.serene-chrome .serene-consultancy-card span[class~="font-mono"][class*="tracking-[0.16em]"],
body.serene-chrome .serene-value-card span[class~="font-mono"][class*="tracking-[0.18em]"] { display: none; }

/* ───────── Esquinas: 4 px en botones, etiquetas, campos y tarjetas; 8 px en contenedores ───────── */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is([class~="rounded-xl"], [class~="rounded-2xl"], [class~="rounded-m"], [class*="rounded-[14px]"], [class*="rounded-[16px]"], [class*="rounded-[18px]"], [class*="rounded-[20px]"]):not(.public-case-card, .public-case-card *) { border-radius: 4px; }
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is([class~="rounded-3xl"], [class*="rounded-[24px]"], [class*="rounded-[28px]"], [class*="rounded-[32px]"]):not(.public-case-card, .public-case-card *) { border-radius: 8px; }
/* Píldoras y círculos que no son fotos: etiquetas, puntos y botones de icono pasan a cuadrado de 4 px. */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is([class~="rounded-pill"], [class~="rounded-full"]):not(img, picture, :has(> img, > picture), .public-case-card *, .serene-home-hero *) { border-radius: 4px; }

/* Puntos y viñetas pequeños: cuadrados. */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) [class~="rounded-full"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"], [class~="h-2.5"], [class~="h-3"]):not(.serene-home-hero *) { border-radius: 1px; }
body.serene-chrome .serene-legal-page ul[class~="list-disc"] { list-style: none; }
body.serene-chrome .serene-legal-page ul[class~="list-disc"] > li { position: relative; }
body.serene-chrome .serene-legal-page ul[class~="list-disc"] > li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: -18px;
  width: 8px;
  height: 8px;
  background: var(--m-azul, #2e31c8);
}

/* ───────── Etiquetas ─────────
   La categoría de la ficha de caso era ámbar (color de estado): pasa a la etiqueta «Marca». */
body.serene-chrome main a[class~="bg-amber-100"] {
  height: auto;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #e6ecfc;
  color: #2e31c8;
  font-size: 14px;
  font-weight: 500;
}
body.serene-chrome main a[class~="bg-amber-100"]:hover { background: #cad5f7; }

/* «Caso de éxito» bajo los logos de la Home: etiqueta «Marca». */
body.serene-chrome .serene-home-clients a:is([href^="/casos/"], [href^="/en/cases/"]) {
  border-radius: 4px;
  background: #e6ecfc;
  color: #2e31c8;
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
  font-weight: 500;
}
body.serene-chrome .serene-home-clients a:is([href^="/casos/"], [href^="/en/cases/"]):hover { background: #cad5f7; }

/* Core Streams (Nosotros): títulos en texto principal, icono Lucide en azul y viñeta cuadrada. */
body.serene-chrome .serene-about-values :is(h2, h3) { color: #1c1e2d; }
body.serene-chrome .serene-about-values .serene-value-card:hover h3 { color: #2e31c8; }
body.serene-chrome .serene-value-card > div:first-of-type > span:first-child { color: #2e31c8; }
body.serene-chrome .serene-value-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-top: .45em;
  background: #2e31c8;
  vertical-align: top;
}

/* Cifras (componente «Cifra»): línea azul de 2 px encima y número en azul TOF. */
body.serene-chrome :is(.serene-vertical-metric, .serene-segment-metric-list > *) {
  padding-top: 14px;
  border-top: 2px solid #2e31c8;
}
body.serene-chrome :is(.serene-vertical-metric, .serene-segment-metric-list) .display {
  color: #2e31c8;
  font-variant-numeric: tabular-nums;
}

/* /casos: la cabecera deja el degradado celeste (fondo blanco). */
body.serene-chrome .tof-cases-hero { background: #fff; }

/* Datos que no son cifras: Mona Sans. */
body.serene-chrome :is(.serene-partner-use-case-number, .serene-tier-range) {
  font-family: "Mona Sans", "Inter", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Diagramas de las cabeceras: sombra de elevación 1 del manual. */
body.serene-chrome main .serene-diagram { box-shadow: 0 1px 2px rgba(21, 21, 85, .06), 0 4px 12px -2px rgba(21, 21, 85, .06), 0 24px 48px -16px rgba(21, 21, 85, .16); }

/* Mona Sans al 112,5 % es más ancha que Manrope: los titulares de columnas estrechas
   (pasos del proceso, tarjetas pequeñas) vuelven a la anchura normal para no partirse. */
body.serene-chrome main:not(:has(.tof-blog, .tof-cases-hero)) :is(h3, h4):is([class*="text-[1"], [class~="text-base"], [class~="text-lg"], [class~="text-xl"]):not([class*="md:text-[2"], [class*="md:text-[3"]) { font-stretch: 100%; letter-spacing: -.01em; }

/* Pasos del proceso (cinco columnas): «Acompañamiento» cabe sin partirse. */
@media (min-width: 1024px) {
  body.serene-chrome main p[class~="font-sans"][class~="text-[22px]"][class~="font-semibold"] { font-size: 19px; letter-spacing: -.01em; }
}
/* Numeración de «Qué incluye» (expertise): cifra de apoyo, no número gigante. */
body.serene-chrome main li .display[class*="text-[48px]"] { font-size: 32px; font-stretch: 100%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Títulos de grupo en la columna estrecha de /partners. */
body.serene-chrome .serene-partners-group h2 { font-size: clamp(28px, 2.4vw, 34px); font-stretch: 100%; }

/* ───────── Iconos Lucide a 1,5 px ───────── */
body.serene-chrome main svg[stroke-width="2"] { stroke-width: 1.5; }