/*
Theme Name: The Indoor Forecast
Theme URI: https://theindoorforecast.com/
Author: Alfredo Ramses
Description: El tema propio de The Indoor Forecast (oct 2026): la casa en corte, con el tiempo de cada cuarto. NO se edita esta hoja: sale de la maqueta (blogs/indoorforecast/theme/maqueta-desde-cero/assets/site.css) con exportar_tema.py.
Version: 1.0.4
Requires at least: 6.5
Requires PHP: 8.1
License: Propietaria
Text Domain: theindoorforecast
*/
/* las letras, alojadas en el tema (bajar_fuentes.py) */
@font-face{font-family:'Petrona';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/petrona-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Petrona';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/petrona-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Petrona';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/petrona-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Petrona';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/petrona-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/schibsted-grotesk-700-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/schibsted-grotesk-700-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==========================================================================
   The Indoor Forecast · portada (maqueta v1.1, 11 oct 2026)
   Solo los valores de theme/DISENO.md: colores, letras (Schibsted Grotesk 700/800 y
   Petrona 400/400i/600), escala 11·12·13·14·16·18·20·24·30·38·48 px y radios 8·12·999 px.
   Excepción documentada en DISENO.md → Excepciones: el H1 de la portada (64 / 40 / 34 px).
   Nada de clamp(): los tamaños cambian en escalones.
   La mascota (la animación) viene de assets/mascota.css, copiado por build.py.
   ========================================================================== */

:root {
  --fondo: #EEF6F8;
  --blanco: #FFFFFF;
  --tinta: #0D1D2A;
  --prot: #087B8B;
  --clara: #9FD8DF;
  --ok: #1F9E89;
  --aviso: #FFD296;
  --alerta: #EB426C;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Petrona", Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--prot); }
h1, h2, h3, .sch, button, input, select, .btn, .kicker, .pastilla, .etiqueta, nav a {
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
}
h1, h2, h3 { color: var(--tinta); margin: 0; letter-spacing: -0.02em; }
h1 { font-weight: 800; font-size: 34px; line-height: 1.05; }
h2 { font-weight: 800; font-size: 24px; line-height: 1.15; }
h3 { font-weight: 700; font-size: 18px; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--prot); outline-offset: 3px; }
.salto {
  position: absolute; left: -9999px; top: 8px; z-index: 10;
  background: var(--tinta); color: var(--blanco); padding: 8px 14px; border-radius: 8px;
}
.salto:focus { left: 16px; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.kicker {
  font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--prot);
}
.fecha { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--tinta); }
.lema { font-size: 18px; line-height: 1.5; margin-top: 6px; max-width: 56ch; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border: 0; border-radius: 8px;
  background: var(--prot); color: var(--blanco);
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--tinta); }
.enlace {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px;
  color: var(--prot); text-decoration: none;
}
.enlace:hover { text-decoration: underline; text-underline-offset: 4px; }
.ico { width: 20px; height: 20px; flex: none; }
.pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--tinta);
}
.pastilla.good, .pastilla--bien { background: var(--ok); }
.pastilla.fair, .pastilla--ojo { background: var(--aviso); }
.pastilla.poor, .pastilla--alerta { background: var(--alerta); }
.pastilla--bien { background: var(--ok); }

/* ---------- Barra fina sobre la cabecera (12 px, sin animación) ---------- */
.barra-fina { background: var(--tinta); color: var(--fondo); }
.barra-in {
  width: min(1200px, 100% - 40px); margin: 0 auto; min-height: 36px;
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 6px 0;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2;
}
.bf-et { color: var(--clara); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.bf-et::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px;
  background: var(--ok); vertical-align: 1px; }
.bf-ctx { color: var(--fondo); }
.bf-sala { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--fondo); }
.bf-sala b { color: var(--blanco); font-weight: 800; }
.bf-est { padding: 2px 9px; border-radius: 999px; color: var(--tinta); font-size: 12px; }
.bf-est[data-estado="good"] { background: var(--ok); }
.bf-est[data-estado="fair"] { background: var(--aviso); }
.bf-est[data-estado="poor"] { background: var(--alerta); }
@media (max-width: 639px) {
  .bf-ctx { display: none; }
  .bf-et { font-size: 0; letter-spacing: 0; }
  .bf-et::before { margin-right: 0; }
  .bf-sala { margin-left: 0; }
  .barra-in { flex-wrap: nowrap; min-height: 32px; }
}

/* ---------- Cabecera ---------- */
/* La cabecera va pegada arriba al bajar (Alfre, 11 oct: «el header debe verse siempre») y, pasados 80 px,
   se compacta: menos alto, logo más pequeño y una sombra suave. Los paneles se desplazan dentro si no caben. */
.cab { position: sticky; top: 0; z-index: 50; background: var(--fondo); border-bottom: 1px solid var(--clara);
  transition: box-shadow 0.3s ease; }
.cab.pegada { box-shadow: 0 6px 20px rgb(13 29 42 / 0.10); }
.cab.pegada .cab-in { min-height: 60px; }
.cab.pegada .marca { width: 44px; }
.cab-in, .cab .marca, .logo-txt { transition: min-height 0.3s ease, width 0.3s ease, font-size 0.3s ease; }
.cab .panel { max-height: calc(100vh - 140px); overflow-y: auto; }
.cab-in {
  width: min(1200px, 100% - 40px); margin-inline: auto;
  display: flex; align-items: center; gap: 16px; min-height: 76px;
}
.marca-link { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; }
.cab .marca { width: 52px; height: auto; flex: none; }
.logo-txt {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800;
  font-size: 20px; line-height: 1.0; letter-spacing: -0.01em;
  display: flex; flex-direction: column;
}
.logo-txt .b { color: var(--prot); }
.nav { display: none; gap: 24px; margin-left: auto; }
.nav a {
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  color: var(--tinta); text-decoration: none; padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--prot); }
.cab-botones { display: flex; gap: 4px; margin-left: auto; }
.cab-b {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--tinta); border-radius: 8px;
  background: var(--blanco); color: var(--tinta); cursor: pointer;
}
.cab-b[aria-expanded="true"] { background: var(--tinta); color: var(--blanco); }
.cab-b--menu { display: grid; }
.panel {
  background: var(--blanco); border-top: 1px solid var(--clara);
  padding: 20px 0 24px;
}
.panel-in { width: min(1200px, 100% - 40px); margin-inline: auto; }
.busca-t { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 20px; }
.busca-caja {
  display: flex; gap: 8px; margin-top: 12px; align-items: center;
  border: 1px solid var(--tinta); border-radius: 8px; padding: 0 8px 0 14px; background: var(--blanco);
}
.busca-caja input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta);
  font-size: 16px; min-height: 48px; padding: 0;
}
.busca-caja input:focus { outline: none; }
.busca-caja:focus-within { outline: 3px solid var(--prot); outline-offset: 3px; }
.busca-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--prot);
  background: var(--blanco); color: var(--prot); cursor: pointer; text-decoration: none;
}
.busca-res { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 4px; }
.busca-res a { display: block; padding: 10px 4px; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--clara); }
.busca-res a:hover { color: var(--prot); }
.busca-res mark { background: var(--aviso); color: var(--tinta); padding: 0 2px; }
.busca-vacio { margin-top: 12px; }
.movil-nav { display: grid; gap: 4px; }
.movil-nav a {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 20px;
  color: var(--tinta); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--clara);
}

/* ---------- Héroe: «A day in your house». En móvil, todo en columna: texto, casa, reloj, ficha. ---------- */
/* Rejilla con nombres: en el móvil texto → casa → ficha; en escritorio el texto y la ficha a la izquierda
   y la casa (con su reloj) a la derecha, a dos filas. */
.heroe {
  display: grid; gap: 24px; padding: 24px 20px 40px; align-items: start;
  grid-template-areas: "txt" "casa" "ficha";
}
.heroe-txt { grid-area: txt; }
.casa { grid-area: casa; }
.fichas { grid-area: ficha; min-width: 0; }
.heroe-txt h1 { max-width: 14ch; }
.parte {
  position: relative; margin-top: 18px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 24px; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--tinta); max-width: 26ch;
}
.parte-hueco { display: block; visibility: hidden; }      /* fija el alto: lo que se teclea no empuja la página */
.parte-tec { position: absolute; left: 0; top: 0; right: 0; }
.frase-clima { margin-top: 14px; font-size: 18px; line-height: 2; max-width: 46ch; }
.sel { position: relative; display: inline-block; margin: 0 2px; vertical-align: baseline; }
.sel select {
  appearance: none; -webkit-appearance: none;
  font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--prot);
  background: var(--blanco); border: 1px solid var(--clara); border-radius: 8px;
  padding: 4px 34px 4px 10px; min-height: 40px; cursor: pointer;
}
.sel::after {
  content: ""; position: absolute; right: 12px; top: 50%; margin-top: -3px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--prot);
  pointer-events: none;
}
/* La casa */
.casa { min-width: 0; }
.casa-dibujo { position: relative; isolation: isolate; border-radius: 12px; overflow: hidden; }
.casa-img { width: 100%; height: auto; }

/* Veladura de cada cuarto: solo si algo pasa. Good = nada; Fair y Poor, un tinte suave.
   El cuarto elegido se nota en su etiqueta y un poco más de tinte, no en un marco. */
.veladura { position: absolute; z-index: 2; pointer-events: none; }
.veladura::before {
  content: ""; position: absolute; inset: 0; border-radius: 6px; opacity: 0; background: var(--tinta);
  transition: background-color 0.6s ease, opacity 0.6s ease;
}
.veladura[data-est="fair"]::before { background: var(--aviso); opacity: 0.22; }
.veladura[data-est="poor"]::before { background: var(--alerta); opacity: 0.14; }
.veladura[data-sel="si"][data-est="good"]::before { background: var(--clara); opacity: 0.28; }
.veladura[data-sel="si"][data-est="fair"]::before { opacity: 0.36; }
.veladura[data-sel="si"][data-est="poor"]::before { opacity: 0.22; }
.veladura[data-vel="atico"]::before { border-radius: 0; clip-path: polygon(49% 0%, 100% 97.5%, 100% 100%, 0% 100%, 0% 97.5%); }

/* Afuera: todo lo que no es la casa. De día, nada; al amanecer y al atardecer, melocotón suave;
   de noche, tinta con la luna y las estrellas, y la casa queda encendida por dentro. */
.afuera { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.afuera-cielo { fill: var(--tinta); fill-opacity: 0; transition: fill 0.8s ease, fill-opacity 0.8s ease; }
.casa-dibujo[data-franja="tarde"] .afuera-cielo { fill: var(--aviso); fill-opacity: 0.45; }
.casa-dibujo[data-franja="noche"] .afuera-cielo { fill: var(--tinta); fill-opacity: 0.9; }
.astros { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.astros .luna, .astros .estrellas { fill: #FFFFFF; opacity: 0; transition: opacity 0.8s ease; }
.casa-dibujo[data-franja="noche"] .astros .luna { opacity: 1; }
.casa-dibujo[data-franja="noche"] .astros .estrellas { opacity: 0.85; }
.noche { display: none; }

/* La ventana del salón: el vaho sube desde abajo y las gotas resbalan (estación fría y salón húmedo) */
.cristal { position: absolute; z-index: 3; pointer-events: none; overflow: hidden; }
.cristal .vaho { opacity: 0; transition: opacity 1.2s ease; }
.cristal .g { fill: #FFFFFF; stroke: var(--prot); stroke-width: 1.4; opacity: 0; transition: opacity 0.8s ease; }
.cristal[data-gotas="si"] .vaho { opacity: 1; }
.cristal[data-gotas="si"] .g { opacity: 1; }
.cristal[data-gotas="si"] .g2 { transition-delay: 0.3s; }
.cristal[data-gotas="si"] .g4 { transition-delay: 0.6s; }
.cristal[data-gotas="si"] .g6 { transition-delay: 0.9s; }
.cristal[data-gotas="si"] .corre { animation: resbala-c 3.6s ease-in 1s infinite; }
.cristal[data-gotas="si"] .g5.corre { animation-delay: 2.4s; }
@keyframes resbala-c {
  0%, 25% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(46px); opacity: 1; }
  100% { transform: translateY(52px); opacity: 0; }
}

/* La mascota, sentada en el suelo a la izquierda de la fachada, entera */
.mascota-casa { position: absolute; left: 0; bottom: 0; width: 11%; min-width: 64px; z-index: 4; pointer-events: none; }
.mascota-casa .marca { display: block; width: 100%; height: auto; }
/* de noche la casita se enciende, como la casa: cuerpo claro y cara tinta */
.casa-dibujo[data-franja="noche"] .mascota-casa .marca { --casa: #EEF6F8; --cara: #0D1D2A; }
.mascota-casa .marca .boca,
.mascota-casa .marca .gota-fuera,
.mascota-casa .marca .sonrisa { transition: opacity 0.3s ease; }
.mascota-casa.suda .marca .sonrisa { opacity: 0; }
.mascota-casa.suda .marca .boca { opacity: 1; }
.mascota-casa.suda .marca .gota-fuera { opacity: 1; }
.mascota-casa.sonrie .marca .boca { opacity: 0; }
.mascota-casa.sonrie .marca .sonrisa { opacity: 1; }
.mascota-casa.sonrie .marca .gota-fuera { opacity: 0; }

/* Las etiquetas: un número por cuarto, con su unidad y su punto de estado. Van por encima de todo. */
.etiqueta {
  position: absolute; z-index: 5; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 0; padding: 3px 5px 4px;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid var(--clara); border-radius: 999px; cursor: pointer;
  font: inherit; line-height: 1.1; white-space: nowrap;
}
.etiqueta:hover { border-color: var(--prot); }
.etiqueta[aria-pressed="true"] { background: var(--prot); border-color: var(--prot); color: var(--blanco); }
.e-nom {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.e-lec { display: flex; align-items: baseline; gap: 3px; }
.e-num {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 14px;
  min-width: 3ch; text-align: right;
}
.e-u { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 11px; }
.e-p { width: 7px; height: 7px; border-radius: 999px; align-self: center; margin-left: 3px; transition: background-color 0.3s; }
.e-p[data-estado="good"] { background: var(--ok); }
.e-p[data-estado="fair"] { background: var(--aviso); }
.e-p[data-estado="poor"] { background: var(--alerta); }
.etiqueta[aria-pressed="true"] .e-p { box-shadow: 0 0 0 2px var(--blanco); }

/* Lo que va bajo la casa: el reloj y la ficha */
.casa-bajo { min-width: 0; }
.reloj { margin-top: 14px; }
.reloj-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.reloj-t { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.3; }
.reloj-btn {
  width: 40px; height: 40px; flex: none; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--tinta); border-radius: 999px; background: var(--blanco); color: var(--tinta); cursor: pointer;
}
.reloj-btn svg { width: 16px; height: 16px; fill: currentColor; }
.reloj-btn .ico-pausa { display: none; }
.reloj.pasando .reloj-btn .ico-play { display: none; }
.reloj.pasando .reloj-btn .ico-pausa { display: inline; }
/* la hora, encima del tirador (14 px, serif: no es un titular) */
.reloj-hora {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-family: "Petrona", Georgia, serif; font-size: 14px; line-height: 18px; color: var(--tinta);
}
.reloj-pista { position: relative; height: 72px; margin-top: 4px; cursor: pointer; touch-action: none; user-select: none; }
.reloj-franjas {
  position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px;
  border: 1px solid var(--tinta); border-radius: 999px; overflow: hidden;
  /* franjas planas: noche 0–6 · amanecer 6–8 · día 8–17 · tarde 17–21 · noche 21–24 */
  background: linear-gradient(90deg, #0D1D2A 0 25%, #FFD296 25% 33.33%, #FFFFFF 33.33% 70.83%, #FFD296 70.83% 87.5%, #0D1D2A 87.5% 100%);
}
.reloj-tirador {
  position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--tinta); color: var(--blanco); border: 3px solid var(--blanco); box-shadow: 0 0 0 1px var(--tinta);
  cursor: grab;
}
.reloj-tirador[data-dia="si"] { background: var(--aviso); color: var(--tinta); }
.reloj-tirador:active { cursor: grabbing; }
.reloj-tirador svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reloj-tirador .ico-luna { display: block; }
.reloj-tirador .ico-sol { display: none; }
.reloj-tirador[data-dia="si"] .ico-luna { display: none; }
.reloj-tirador[data-dia="si"] .ico-sol { display: block; }
.reloj-marcas { position: relative; height: 16px; margin-top: 2px; }
.reloj-marcas span {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.3;
}
.reloj-marcas span:nth-child(1) { left: 0; transform: none; }
.reloj-marcas span:nth-child(2) { left: 25%; }
.reloj-marcas span:nth-child(3) { left: 50%; }
.reloj-marcas span:nth-child(4) { left: 75%; }
.reloj-marcas span:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* El parte de toda la casa: siete casillas bajo el reloj (la elegida, en petróleo) */
.parte-casa { margin-top: 20px; }
.parte-casa-t { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; }
.pc-lista { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; grid-auto-rows: 1fr;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc {
  width: 100%; height: 100%; display: grid; gap: 2px; justify-items: start; align-content: start; text-align: left; cursor: pointer;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--clara); background: var(--blanco); color: var(--tinta);
}
.pc:hover { border-color: var(--prot); }
.pc[aria-pressed="true"] { background: var(--prot); border-color: var(--prot); color: var(--blanco); }
.pc-nom { font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.pc-lec { display: flex; align-items: baseline; gap: 3px; }
.pc-num { font-weight: 800; font-size: 24px; line-height: 1.1; }
.pc-u { font-weight: 700; font-size: 13px; }
.pc-est { font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; color: var(--tinta); }
.pc-est[data-estado="good"] { background: var(--ok); }
.pc-est[data-estado="fair"] { background: var(--aviso); }
.pc-est[data-estado="poor"] { background: var(--alerta); }
.pc-leyenda { display: grid; gap: 3px; align-content: start; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--clara); background: var(--fondo);
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; }
.pc-leyenda .pc-nom { margin-bottom: 2px; }
.pc-leyenda .pc-est { display: inline-block; min-width: 38px; padding: 1px 6px; text-align: center; margin-right: 4px; }

/* La ficha del cuarto elegido: su lectura, el estado, una frase, la curva de 24 h y «Read next» */
.ficha {
  background: var(--blanco);
  border: 1px solid var(--clara); border-radius: 12px; padding: 20px 22px;
  animation: aparece 0.35s ease-out both;
}
.ficha-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ficha-t { font-size: 24px; }
.ficha-lec { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ficha-num {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 48px;
  line-height: 1;
}
.ficha-u { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 20px; }
.ficha-mag { margin-top: 6px; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; color: var(--tinta); }
.ficha-frase { margin-top: 10px; font-size: 16px; line-height: 1.6; max-width: 56ch; }
.spark-caja { margin: 16px 0 0; }
.spark { display: block; width: 100%; height: auto; border-radius: 8px; overflow: hidden; background: var(--blanco); }
.spark .z-good { fill: var(--ok); fill-opacity: 0.28; }
.spark .z-fair { fill: var(--aviso); fill-opacity: 0.85; }
.spark .z-poor { fill: var(--alerta); fill-opacity: 0.2; }
.spark .curva { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .ahora { fill: var(--tinta); stroke: var(--blanco); stroke-width: 2; }
.spark-ejes {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12px; color: var(--tinta);
}
.ficha-arts-t {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--clara);
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--tinta);
}
.ficha-arts { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.ficha-arts a { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35; }

/* ---------- Calculadora: «Will your windows sweat tonight?» ---------- */
.calc { display: grid; gap: 32px; padding: 48px 0; border-top: 1px solid var(--clara); }
.calc-txt p { max-width: 58ch; margin-top: 12px; font-size: 18px; line-height: 1.5; }
.rangos { display: grid; gap: 20px; margin-top: 24px; }
.rango label {
  display: block; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px;
}
.rango-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rango output {
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 24px;
}
.rango input[type="range"] {
  width: 100%; min-height: 40px; margin: 8px 0 0; accent-color: var(--prot); cursor: pointer;
}
.calc-nota { font-size: 14px; line-height: 1.5; margin-top: 20px; max-width: 60ch; }
.calc-vis { display: grid; gap: 16px; }
/* La ventana de guillotina: afuera cambia con la temperatura; el vaho sube desde abajo con el riesgo;
   las gotas son lágrimas; en riesgo alto tres resbalan dejando su rastro y el alféizar se encharca. */
.ventana { width: min(100%, 420px); }
.ventana svg { width: 100%; height: auto; display: block; overflow: visible; }
.ventana .fuera { opacity: 0; transition: opacity 0.8s ease; }
.ventana[data-fuera="frio"] .fuera-frio,
.ventana[data-fuera="templado"] .fuera-templado,
.ventana[data-fuera="calido"] .fuera-calido { opacity: 1; }
.ventana .vaho { opacity: 0; transition: opacity 0.9s ease; }
.ventana .vaho-b { transform-box: fill-box; transform-origin: 50% 100%; }
.ventana[data-riesgo="aviso"] .vaho-b { opacity: 0.55; }
.ventana[data-riesgo="alto"] .vaho { opacity: 0.9; }
.ventana .gota { fill: #FFFFFF; stroke: var(--prot); stroke-width: 1.6; opacity: 0; transition: opacity 0.6s ease; }
.ventana[data-riesgo="aviso"] .gota.ga,
.ventana[data-riesgo="alto"] .gota.ga,
.ventana[data-riesgo="alto"] .gota.gb { opacity: 1; }
.ventana[data-riesgo="alto"] .gota.gb { transition-delay: 0.25s; }
.ventana .rastro { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 120; stroke-dashoffset: 120; }
.ventana[data-riesgo="alto"] .rastro { opacity: 0.6; animation: rastro 3.2s ease-in 0.4s infinite; }
.ventana[data-riesgo="alto"] .r2 { animation-delay: 1.4s; }
.ventana[data-riesgo="alto"] .r3 { animation-delay: 2.3s; }
.ventana .corredoras .corre { opacity: 0; }
.ventana[data-riesgo="alto"] .corre { animation: corre 3.2s ease-in 0.4s infinite; }
.ventana[data-riesgo="alto"] .c2 { animation-delay: 1.4s; }
.ventana[data-riesgo="alto"] .c3 { animation-delay: 2.3s; }
@keyframes corre {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  85% { transform: translateY(90px); opacity: 1; }
  100% { transform: translateY(96px); opacity: 0; }
}
@keyframes rastro {
  0% { stroke-dashoffset: 120; opacity: 0.6; }
  85% { stroke-dashoffset: 0; opacity: 0.6; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.ventana .charco { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleX(0.3);
  transition: opacity 0.8s ease 1s, transform 1.4s ease 1s; }
.ventana[data-riesgo="alto"] .charco { opacity: 1; transform: scaleX(1); }
.ventana .higro-v { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 16px; fill: var(--tinta); }
.ventana .higro-p { fill: var(--ok); stroke: var(--tinta); stroke-width: 1; transition: fill 0.4s ease; }
.ventana[data-riesgo="aviso"] .higro-p { fill: var(--aviso); }
.ventana[data-riesgo="alto"] .higro-p { fill: var(--alerta); }
.veredicto { border-radius: 12px; padding: 18px 20px; color: var(--tinta); background: var(--fondo); }
.veredicto[data-nivel="bajo"] { background: var(--ok); }
.veredicto[data-nivel="aviso"] { background: var(--aviso); }
.veredicto[data-nivel="alto"] { background: var(--alerta); }
.ver-t { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 24px; line-height: 1.15; }
.ver-d { margin-top: 6px; font-size: 16px; line-height: 1.5; }
.calc-datos { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px; }

/* ---------- Latest + Know the words (la columna de la derecha) ---------- */
.ultimos { display: grid; gap: 40px; padding: 48px 0; }
.grid-ult { display: grid; gap: 20px; margin-top: 20px; grid-template-columns: minmax(0, 1fr); }
.ult { min-width: 0; }
.ult a { display: block; text-decoration: none; color: var(--tinta); }
.foto-caja {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; background: var(--clara);
}
.foto-caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), filter 0.6s ease; }

/* Al pasar el ratón (o con el foco del teclado) por una tarjeta: la foto se acerca un poco, aparece la pastilla
   «Read» abajo a la derecha, el titular se pone petróleo con su subrayado que crece y la tarjeta sube 3 px. */
.ult a, .peq a { transition: transform 0.35s cubic-bezier(.2, .7, .2, 1); }
.foto-caja::after {
  content: "Read \2192"; position: absolute; right: 12px; bottom: 12px; z-index: 1;
  padding: 6px 12px; border-radius: 999px; background: var(--prot); color: var(--blanco);
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2;
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.peq .foto-caja::after { right: 8px; bottom: 8px; padding: 4px 9px; font-size: 12px; }
.ult-t, .peq h3 {
  text-decoration: underline 2px transparent; text-underline-offset: 5px;
  transition: text-decoration-color 0.3s ease, color 0.2s ease;
}
.ult a:hover, .peq a:hover, .ult a:focus-visible, .peq a:focus-visible { transform: translateY(-3px); }
.ult a:hover .foto-caja img, .peq a:hover .foto-caja img,
.ult a:focus-visible .foto-caja img, .peq a:focus-visible .foto-caja img { transform: scale(1.05); filter: saturate(1.08); }
.ult a:hover .foto-caja::after, .peq a:hover .foto-caja::after,
.ult a:focus-visible .foto-caja::after, .peq a:focus-visible .foto-caja::after { opacity: 1; transform: none; }
.ult a:hover .ult-t, .peq a:hover h3, .ult a:focus-visible .ult-t, .peq a:focus-visible h3 { text-decoration-color: var(--prot); }
.foto-caja.pregunta { transition: background-color 0.3s ease; }
.ult a:hover .foto-caja.pregunta, .peq a:hover .foto-caja.pregunta { background: var(--tinta); }
.foto-caja.pregunta .ult-t { text-decoration: none; }
.foto-caja.pregunta { background: var(--prot); display: flex; align-items: flex-end; padding: 20px; }
.foto-caja.pregunta .ult-t { margin: 0; font-size: 20px; line-height: 1.2; color: var(--blanco) !important; }
.ult--gr .foto-caja.pregunta .ult-t { font-size: 30px; }
.gran .foto-caja.pregunta .ult-t { font-size: 24px; }
.peq .foto-caja.pregunta .ult-t { font-size: 16px; }
.ult .kicker { margin-top: 14px; }
.ult .ult-t { margin-top: 6px; font-size: 18px; }
.ult--gr .ult-t { font-size: 24px; }
.extracto {
  margin-top: 8px; font-size: 16px; line-height: 1.55; max-width: 60ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ult .fecha { margin-top: 10px; display: block; }
.ult a:hover .ult-t { color: var(--prot); }

.palabras-col {
  background: var(--blanco); border: 1px solid var(--clara); border-radius: 12px; padding: 22px 22px 10px;
  align-self: start;
}
.palabras-col h2 { font-size: 24px; }
.lectura-sub { margin-top: 8px; font-size: 16px; line-height: 1.5; max-width: 56ch; }
.regla { padding: 16px 0 14px; border-top: 1px solid var(--clara); }
.regla h3 { font-size: 18px; }
.fuente { margin-top: 6px; font-size: 14px; line-height: 1.45; max-width: 52ch; }
.barra { display: flex; gap: 2px; margin-top: 10px; border-radius: 8px; border: 1px solid var(--clara); }
.tramo { flex: 1 1 0; min-width: 0; padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; color: var(--tinta);
  position: relative; cursor: default;
  transition: flex-grow 0.45s cubic-bezier(.2, .8, .2, 1), opacity 0.3s ease, filter 0.3s ease; }
/* Al pasar el ratón por una escala: el tramo señalado se ensancha y se ilumina, los demás se apagan un poco,
   y una muesca tinta debajo marca dónde estás, como la aguja de un medidor. */
.barra { overflow: visible; position: relative; }
.barra .tramo:first-child { border-radius: 7px 0 0 7px; }
.barra .tramo:last-child { border-radius: 0 7px 7px 0; }
.barra:hover .tramo { opacity: 0.45; filter: saturate(0.7); }
.barra .tramo:hover { flex-grow: 1.9; opacity: 1; filter: none; }
.tramo::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 0; height: 0; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--tinta);
  opacity: 0; transform: translateY(-4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.tramo:hover::after { opacity: 1; transform: none; }
.tramo .palabra { transition: font-size 0.3s ease; }
.tramo:hover .palabra { font-size: 16px; }
.palabra { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 13px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.rango { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3; }
.t-clara { background: var(--clara); }
.t-good { background: var(--ok); }
.t-aviso { background: var(--aviso); }
.t-alerta { background: var(--alerta); }
.regla .enlace { margin-top: 16px; font-size: 14px; line-height: 1.35; }

/* ---------- Un bloque por apartado ---------- */
.bloque-ap { padding: 48px 0; border-top: 1px solid var(--clara); }
.bloque-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bloque-cab h2 { font-size: 30px; }
.bloque-grid { display: grid; gap: 24px; margin-top: 24px; }
.gran .ult-t { font-size: 24px; }
.gran .extracto { margin-top: 8px; }
.pequenos { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.peq a { display: block; text-decoration: none; color: var(--tinta); }
.peq .txt { min-width: 0; }
.peq .foto-caja { aspect-ratio: 4 / 3; }
.peq h3 { margin-top: 10px; font-size: 16px; }
.peq a:hover h3 { color: var(--prot); }

/* ---------- Start here ---------- */
.empieza { padding: 48px 0; border-top: 1px solid var(--clara); }
.empieza-cab { display: grid; gap: 8px; }
.empieza-cab p { font-size: 18px; line-height: 1.5; max-width: 40ch; }
.pasos { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.paso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  background: var(--blanco); border: 1px solid var(--clara); border-radius: 12px; padding: 20px;
}
.paso-n {
  width: 40px; height: 40px; border-radius: 999px; background: var(--prot); color: var(--blanco);
  display: grid; place-items: center; font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-weight: 800; font-size: 20px;
}
.paso h3 { font-size: 20px; }
.paso p { margin-top: 8px; font-size: 16px; line-height: 1.55; max-width: 52ch; }
.paso .enlace { margin-top: 12px; }

/* ---------- Banda oscura: la noche del barrio (sin formulario) ---------- */
.banda { position: relative; overflow: hidden; background: #0B2030; color: var(--blanco); }
.banda-cielo { position: absolute; left: 0; top: 0; width: 100%; height: 320px; pointer-events: none; }
.banda-cielo circle { fill: #FFFFFF; opacity: 0.7; }
.banda-luna { fill: #FFFFFF; }
.banda-in {
  position: relative; z-index: 1; width: min(1200px, 100% - 40px); margin-inline: auto; padding: 64px 0 24px;
  display: grid; justify-items: center; text-align: center;
}
.banda-kicker { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: var(--clara); }
.banda-txt { display: grid; justify-items: center; max-width: 760px; }
.banda h2 { margin-top: 10px; color: var(--blanco); font-size: 30px; line-height: 1.1; text-wrap: balance; }
.banda h2 span { color: var(--aviso); }
.banda-linea { margin-top: 14px; font-size: 18px; line-height: 1.55; max-width: 52ch; color: var(--fondo); text-wrap: pretty; }
.banda .btn { margin-top: 24px; }
.btn--claro { background: var(--clara); color: var(--tinta); }
.btn--claro:hover { background: var(--blanco); }
/* La calle: ilustración de casas de noche. El cielo del dibujo es #0B2030, y la banda usa ese mismo color
   para que la imagen no tenga borde. Entra con un fundido al aparecer la banda en pantalla. */
.calle { position: relative; display: block; width: 100%; height: auto; min-height: 170px; object-fit: cover;
  object-position: 50% 100%; opacity: 0; transform: translateY(12px); transition: opacity 1s ease, transform 1s ease; }
.banda.vista .calle { opacity: 1; transform: none; }

/* ---------- Pie ---------- */
/* El pie es la calzada de la calle de la banda: mismo azul que el asfalto del dibujo (#0E273B) y la línea
   discontinua del centro (melocotón). Centrado como la banda: marca arriba, los tres grupos de enlaces en fila
   con su rótulo, y una base con el aviso de Amazon y el ©. */
.pie { background: #0E273B; color: var(--fondo); }
.pie-raya { height: 6px; width: 100%;
  background: repeating-linear-gradient(90deg, var(--aviso) 0 48px, transparent 48px 96px); opacity: 0.85; }
.pie-in { width: min(1000px, 100% - 40px); margin-inline: auto; padding: 56px 0 40px; display: grid; gap: 40px;
  justify-items: center; text-align: center; }
.pie-marca { display: grid; justify-items: center; }
.pie-marca img { width: 280px; height: auto; }
.pie-que { margin-top: 16px; font-size: 18px; line-height: 1.5; max-width: 44ch; color: var(--fondo); text-wrap: balance; }
.pie-navs { width: 100%; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr);
  padding-top: 32px; border-top: 1px solid rgba(159, 216, 223, 0.22); }
.pie-col { display: grid; gap: 12px; justify-items: center; align-content: start; }
.pie-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; justify-items: center; }
.pie-t { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--aviso); }
.pie-col a { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 16px; color: var(--blanco); text-decoration: none; }
.pie-col a:hover { color: var(--aviso); }
.pie-base { width: min(1000px, 100% - 40px); margin: 0 auto;
  padding: 18px 0 calc(28px + var(--pie-anuncio, 0px)); border-top: 1px solid rgba(159, 216, 223, 0.22);
  display: grid; gap: 4px; justify-items: center; text-align: center;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--clara); }

/* Volver arriba: círculo tinta con la flecha y el aro melocotón de lo bajado. Encima de la barra de Mediavine. */
.subir { position: fixed; right: 20px; z-index: 40;
  bottom: calc(20px + var(--pie-anuncio, 0px) + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.25s ease; }
.subir.ve { opacity: 1; transform: none; pointer-events: auto; }
.subir svg { width: 56px; height: 56px; display: block; border-radius: 50%; box-shadow: 0 6px 18px rgb(13 29 42 / 0.28); }
.subir-fondo { fill: var(--tinta); stroke: var(--fondo); stroke-width: 2; }
.subir-pista { fill: none; stroke: rgba(159, 216, 223, 0.25); stroke-width: 3; }
.subir-aro { fill: none; stroke: var(--aviso); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: var(--subido, 0) 100; transform: rotate(-90deg); transform-origin: 28px 28px; }
.subir-flecha { fill: none; stroke: #FFFFFF; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.subir:hover .subir-flecha, .subir:focus-visible .subir-flecha { animation: subir-sube 0.8s ease-in-out infinite; }
@keyframes subir-sube { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
.subir-rot { padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: var(--blanco);
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px; white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.subir:hover .subir-rot, .subir:focus-visible .subir-rot { opacity: 1; transform: none; }
.subir:focus-visible { outline: none; }
.subir:focus-visible svg { outline: 3px solid var(--prot); outline-offset: 3px; }
@media (max-width: 639px) { .subir { right: 14px; } .subir svg { width: 48px; height: 48px; } .subir-rot { display: none; }
  .pie-base { padding-bottom: calc(84px + var(--pie-anuncio, 0px)); } }

/* ---------- Animaciones de entrada ---------- */
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 639px) {
  .peq a { display: flex; gap: 14px; align-items: flex-start; }
  .peq .foto-caja { flex: 0 0 128px; }
  .peq h3 { margin-top: 0; }
  .etiqueta { padding: 3px 4px 4px; }
  .reloj-tirador { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .reloj-tirador svg { width: 24px; height: 24px; }
  .reloj-pista { height: 84px; }
  .reloj-marcas span { font-size: 12px; }
}

/* ==========================================================================
   Tamaños. Los escalones: 360–639 (móvil), 640–959 (tableta), 960+ (escritorio).
   ========================================================================== */
@media (min-width: 640px) {
  .heroe { padding: 32px 32px 48px; }
  h1 { font-size: 40px; }
  .parte { font-size: 30px; }
  .grid-ult { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ult--gr { grid-column: 1 / -1; }
  .pequenos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .etiqueta { min-width: 96px; padding: 4px 10px 5px; }
  .e-nom { font-size: 12px; }
  .e-num { font-size: 18px; }
  .e-u { font-size: 12px; }
  .e-p { width: 9px; height: 9px; }
}
@media (min-width: 768px) {
  h2 { font-size: 30px; }
  .bloque-cab h2 { font-size: 38px; }
  .banda h2 { font-size: 38px; }
  .banda h2 { font-size: 48px; }
  .pie-navs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .palabras-col h2 { font-size: 30px; }
}
@media (min-width: 960px) {
  h1 { font-size: 64px; line-height: 1.02; }
  .nav { display: flex; }
  .cab-b--menu { display: none; }
  .logo-txt { font-size: 30px; flex-direction: row; gap: 8px; }
  .cab .marca { width: 72px; }
  .cab-in { min-height: 96px; }
  .cab.pegada .cab-in { min-height: 68px; }
  .cab.pegada .marca { width: 52px; }
  .cab.pegada .logo-txt { font-size: 24px; }
  .marca-link { gap: 14px; }
  .heroe {
    width: min(1200px, 100% - 40px); margin-inline: auto;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-rows: auto 1fr;
    grid-template-areas: "txt casa" "ficha casa"; column-gap: 40px; row-gap: 24px;
    padding: 48px 0 64px;
  }
  .heroe-txt { padding: 8px 0 0; }

  .heroe-txt h1 { max-width: 12ch; }
  .parte { font-size: 30px; }
  .etiqueta { min-width: 118px; padding: 6px 12px 7px; }
  .e-nom { font-size: 12px; }
  .e-num { font-size: 24px; }
  .e-u { font-size: 13px; }
  .e-p { width: 10px; height: 10px; margin-left: 4px; }
  .grid-ult { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ult--gr { grid-column: span 2; }
  .bloque-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ult .ult-t { font-size: 20px; }
  .ult--gr .ult-t { font-size: 30px; }
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
  .calc-txt h2 { font-size: 38px; }
  .ventana { width: 100%; max-width: none; }
}
/* El héroe vive en el mismo contenedor de 1200 px que el resto de secciones: nada sobresale a la derecha
   (Alfre, 11 oct: «la veo cargada a la derecha en comparación con las secciones de abajo»). */
@media (min-width: 1200px) {
  .ultimos { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
  /* Know the words acompaña al lector mientras baja por Latest (Alfre, 11 oct: «se debería mover cuando hace uno scroll») */
  .palabras-col { position: sticky; top: 24px; }
}

/* ==========================================================================
   Movimiento: nada que se mueva sin que lo pida, y nada si el sistema pide calma.
   Con «reducir movimiento»: sin pase del día, sin tecleo, sin gotas que caen, todo en su estado final.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* El blog recién abierto, sin nada publicado (tema, inc/portada.php): «Latest» no se pinta y «Know the words» ocupa el
   ancho, con sus tres escalas en fila (chat principal, 11 oct 2026). En la maqueta no se ve: siempre hay artículos. */
@media (min-width: 960px) {
  .ultimos.ultimos--solo { grid-template-columns: minmax(0, 1fr); }
  .ultimos--solo .palabras-col { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .ultimos--solo .palabras-col > h2, .ultimos--solo .palabras-col > .lectura-sub { grid-column: 1 / -1; }
}

/* ==========================================================================
   📱 EL CELULAR (chat principal, 11 oct 2026, noche). Alfre: «el acomodo es horrible, la letra es gigante… es donde
   entran más los lectores». Su regla del café (memoria «letra-movil-mas-chica»): texto corrido a 16 px como mucho,
   el general ~15, titulares contenidos, más información por pantalla. Probado en SUS anchos: 320 (plegable
   cerrado), 360, 412 (OnePlus 7 Pro) y 768 (plegable abierto, abajo).
   ========================================================================== */
@media (max-width: 720px) {
  h1 { font-size: 27px; line-height: 1.08; }
  h2 { font-size: 21px; }
  h3 { font-size: 17px; }
  .lema { font-size: 15px; }
  .kicker { font-size: 13px; }
  /* Cabecera: un poco más baja; el logo sigue entero */
  .cab-in { min-height: 64px; }
  .cab .marca { width: 44px; }
  .logo-txt { font-size: 18px; }
  /* El héroe */
  .heroe { padding-top: 18px; }
  .heroe-txt h1 { font-size: 27px; }
  .parte { font-size: 17px; line-height: 1.3; margin-top: 8px; }
  .frase-clima { margin-top: 10px; font-size: 15px; line-height: 2.1; }
  .sel select { font-size: 15px; }
  .reloj-t, .parte-casa-t { font-size: 13px; }
  /* Las casillas de la casa: nombre arriba, número y estado en la misma línea (la mitad de alto) */
  .pc-lista { gap: 6px; }
  .pc { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; padding: 7px 10px; border-radius: 8px; }
  .pc-nom { grid-column: 1 / -1; font-size: 11px; }
  .pc-num { font-size: 19px; }
  .pc-u { font-size: 11px; }
  .pc-est { justify-self: end; font-size: 11px; padding: 1px 7px; }
  .pc-leyenda { padding: 7px 10px; border-radius: 8px; font-size: 11px; }
  /* La ficha del cuarto */
  .ficha { padding: 16px; }
  .ficha-t { font-size: 20px; }
  .ficha-num { font-size: 38px; }
  .ficha-u { font-size: 16px; }
  .ficha-mag { font-size: 13px; }
  .ficha-frase { font-size: 15px; line-height: 1.55; }
  .ficha-arts a { font-size: 15px; }
  /* La calculadora: la ventana más pequeña y centrada; los textos a 15 */
  .calc { gap: 22px; padding: 32px 0; }
  .calc-txt p { font-size: 15px; line-height: 1.55; }
  .calc-nota { font-size: 13px; }
  .ventana { width: min(100%, 260px); justify-self: center; }
  .ver-t { font-size: 19px; }
  .ver-d { font-size: 15px; }
  .calc-datos { font-size: 14px; }
  /* Latest, Know the words, bloques, Start here */
  .ultimos { gap: 28px; padding: 32px 0; }
  .ult .ult-t, .ult--gr .ult-t, .gran .ult-t { font-size: 17px; }
  .extracto { font-size: 15px; }
  .palabras-col { padding: 18px 16px 6px; }
  .palabras-col h2 { font-size: 21px; }
  .lectura-sub { font-size: 15px; }
  .regla h3 { font-size: 16px; }
  .fuente { font-size: 13px; }
  .palabra { font-size: 12px; }
  .rango { font-size: 11px; }
  .bloque-ap { padding: 32px 0; }
  .bloque-cab h2 { font-size: 22px; }
  .empieza-cab p { font-size: 15px; }
  .paso h3 { font-size: 17px; }
  .paso p { font-size: 15px; }
  /* La banda */
  .banda h2 { font-size: 23px; }
  .banda-linea { font-size: 15px; }
  .calle { min-height: 120px; }
  /* El pie: los grupos de enlaces EN DOS COLUMNAS (antes, uno debajo de otro: media pantalla de enlaces) */
  .pie-in { padding: 36px 0 28px; gap: 26px; }
  .pie-marca img { width: 200px; }
  .pie-que { font-size: 15px; }
  .pie-navs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; padding-top: 24px; }
  .pie-col ul { gap: 6px; }
  .pie-col a { font-size: 15px; }
  .pie-base { font-size: 12px; }
}

/* El plegable de Alfre ABIERTO (768) y las tabletas: ven el escritorio, y ahí su píxel es más grande (memoria). */
@media (min-width: 721px) and (max-width: 1060px) {
  h1, .heroe-txt h1 { font-size: 34px; }
  .parte { font-size: 22px; }
  .frase-clima { font-size: 16px; }
  .calc-txt p, .empieza-cab p, .banda-linea, .pie-que, .lema { font-size: 16px; }
  .ficha-num { font-size: 42px; }
  .ventana { width: min(100%, 340px); }
  .bloque-cab h2, .banda h2 { font-size: 26px; }
}

/* 📱 Segunda pasada del celular (11 oct 2026): menos alto por pantalla */
@media (max-width: 720px) {
  /* Las casillas: cada una con su alto (no el de la más alta), y la leyenda en UNA fila de lado a lado */
  .pc-lista { grid-auto-rows: auto; }
  /* la leyenda, en la octava casilla (junto a Basement: sin hueco), compacta */
  .pc-leyenda { gap: 2px; padding: 6px 10px; line-height: 1.15; }
  .pc-leyenda .pc-nom { margin-bottom: 1px; }
  .pc-leyenda .pc-est { min-width: 34px; padding: 0 5px; margin-right: 3px; }
  /* Latest: el primero grande; los demás, foto pequeña a la izquierda y el título al lado (como los bloques) */
  .grid-ult { gap: 14px; }
  .grid-ult .ult:not(.ult--gr) a { display: flex; gap: 14px; align-items: flex-start; }
  .grid-ult .ult:not(.ult--gr) .foto-caja { flex: 0 0 112px; }
  .grid-ult .ult:not(.ult--gr) .txt { min-width: 0; }
  .grid-ult .ult:not(.ult--gr) .kicker { margin-top: 0; font-size: 12px; }
  .grid-ult .ult:not(.ult--gr) .ult-t { margin-top: 2px; font-size: 16px; }
  .grid-ult .ult:not(.ult--gr) .extracto { display: none; }
  .grid-ult .ult:not(.ult--gr) .fecha { margin-top: 4px; font-size: 12px; }
  .peq .foto-caja { flex-basis: 112px; }
  /* Start here: la descripción en 3 líneas */
  .paso p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* 📱 Las etiquetas de los cuartos en la casa (11 oct 2026, Alfre en su celular): iban al mismo tamaño que en escritorio
   sobre una casa de 280-370 px, tapaban los cuartos y a 320 la del dormitorio pisaba la del baño. Ahora crecen con la
   pantalla (vw), de 7,5/10 px a 320 hasta 9/13 px a 412 y más. */
@media (max-width: 720px) {
  .etiqueta { padding: 2px 5px 3px; border-width: 1px; }
  .e-nom { font-size: clamp(7.5px, 2.15vw, 9.5px); letter-spacing: 0.02em; }
  .e-lec { gap: 2px; }
  .e-num { font-size: clamp(10px, 3.05vw, 13px); min-width: 0; }
  .e-u { font-size: clamp(7.5px, 2.15vw, 9.5px); }
  .e-p { width: 5px; height: 5px; margin-left: 2px; }
}

/* 🏷️ El letrero de cada cuarto, en pared libre (11 oct 2026, tercera vuelta de Alfre: «el letrero tapa la habitación,
   en PC y en móvil»). Antes: en el centro del cuarto, tapando los muebles. Ahora: centrado en el hueco de pared que da
   ETIQUETA_POS (build.py), en dos líneas CORTAS (en una sola, el del dormitorio y el del baño se tocaban), más
   pequeño y con el fondo un poco transparente. */
.etiqueta { padding: 2px 7px 3px; min-width: 0; background: rgb(255 255 255 / 0.9); box-shadow: 0 1px 3px rgb(13 29 42 / 0.12);
  border-radius: 8px; line-height: 1.05; }
.etiqueta[aria-pressed="true"] { background: var(--prot); }
.e-nom { font-size: 9px; letter-spacing: 0.05em; }
.e-num { font-size: 13px; min-width: 0; text-align: left; }
.e-u { font-size: 9px; }
.e-p { width: 6px; height: 6px; }
@media (min-width: 960px) {
  .etiqueta { min-width: 0; padding: 3px 9px 4px; }
  .e-nom { font-size: 10px; }
  .e-num { font-size: 15px; }
  .e-u { font-size: 10px; }
}
@media (min-width: 1440px) {
  .etiqueta { min-width: 0; padding: 4px 10px 5px; }
  .e-nom { font-size: 11px; }
  .e-num { font-size: 17px; }
}
@media (max-width: 720px) {
  .etiqueta { padding: 1px 4px 2px; border-radius: 6px; }
  .e-nom { font-size: clamp(6px, 1.75vw, 8px); letter-spacing: 0.03em; }
  .e-num { font-size: clamp(8.5px, 2.6vw, 11px); }
  .e-u { font-size: clamp(6px, 1.75vw, 8px); }
  .e-p { width: 4px; height: 4px; margin-left: 2px; }
}

/* ==========================================================================
   The Indoor Forecast · mega menú de la cabecera (maqueta, 11 oct 2026). Prefijo mm-.
   Solo valores de theme/DISENO.md: colores, Schibsted Grotesk (700/800) y Petrona, escala 12·13·14·16·18·20 px,
   radios 8·12·999 px. Va después de site.css: lo que choque con sus clases de cabecera se gana aquí por
   especificidad (.nav .mm-…), sin tocar site.css.
   Con «reducir movimiento», site.css quita todas las transiciones y animaciones: los paneles aparecen de golpe.
   ========================================================================== */

/* Cada elemento del .nav ocupa toda la altura de la cabecera: así el ratón no se cae al bajar hasta el panel. */
.cab-in > .nav { align-self: stretch; gap: 20px; }
.mm-item { display: flex; align-items: center; }

/* Entre 960 y 1119 px la fila de la cabecera va justa (logo a la izquierda, lupa a la derecha): los elementos
   bajan a 12 px y se acercan, y el logo no se encoge. Lo medimos a 960 y 1024: sin desborde. */
.marca-link { flex: none; }
@media (min-width: 960px) and (max-width: 1119px) {
  .cab-in { gap: 12px; }
  .cab .marca-link { gap: 10px; }
  .cab-in > .nav { gap: 12px; }
  .cab .mm-disparo { font-size: 12px; }
}
/* El botón del elemento (AIR, HUMIDITY…). Sin enlace: la salida a cada rama está en el panel. */
.cab .mm-disparo {
  appearance: none; margin: 0; padding: 8px 0; border: 0; border-bottom: 2px solid transparent; white-space: nowrap;
  background: none; cursor: pointer; color: var(--tinta);
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 9px;
  transition: border-bottom-color 0.25s ease, color 0.2s ease;
}
.mm-disparo::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);
}
.cab .mm-disparo:hover, .cab .mm-disparo[aria-expanded="true"] { border-bottom-color: var(--prot); }
.mm-disparo[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); color: var(--prot); }

/* El panel: flota 8 px bajo la cabecera, a la anchura de la casa (1200 px). Cerrado: invisible y sin foco. */
.cab .mm-panel {
  position: absolute; top: calc(100% + 8px); left: 50%; width: min(1200px, 100% - 40px);
  transform: translate(-50%, -6px); opacity: 0; visibility: hidden; z-index: 1;
  background: var(--blanco); border: 1px solid var(--clara); border-radius: 12px;
  box-shadow: 0 16px 40px rgb(13 29 42 / 0.13);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0.3s;
}
/* Puente invisible entre el botón y el panel: el ratón no se «cae» en el hueco de 8 px. */
.cab .mm-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.cab .mm-disparo[aria-expanded="true"] ~ .mm-panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* ==========================================================================
   Revisión del chat principal (11 oct 2026): cada rama con su FOTO (GPT Image, generar_menu.py).
   Alfre: «no me gustó tanto el megamenú, deberías usar imágenes también».
   Una columna por rama (3 o 4): foto 3:2 con el nombre encima sobre un velo tinta, las subcategorías debajo y
   «All …» siempre al pie, para que todas las columnas acaben a la misma altura.
   ========================================================================== */
.cab .mm-cuerpo { padding: 24px; max-height: calc(100vh - 150px); overflow-y: auto; }
.mm-ramas { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 24px; }

@keyframes mm-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mm-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mm-disparo[aria-expanded="true"] ~ .mm-panel .mm-rama { animation: mm-sube 0.5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
.mm-disparo[aria-expanded="true"] ~ .mm-panel .mm-tr { animation: mm-llena 0.6s ease both 0.3s; }

.mm-rama { min-width: 0; display: flex; flex-direction: column; }
/* La foto: el nombre de la rama encima, sobre un velo tinta que sube desde abajo. Al pasar el ratón por la COLUMNA
   (no solo por la foto), la foto se acerca y el velo se aclara: se lee qué rama tienes «en la mano». */
.cab .mm-foto { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 2;
  background: var(--clara); padding: 0; border: 0; text-decoration: none; letter-spacing: 0; }
/* Con 3 ramas las columnas son más anchas: la foto baja a 16:9 para que el panel no crezca. */
.mm-ramas[style*="--n: 3"] .mm-foto { aspect-ratio: 16 / 9; }
.mm-foto img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), filter 0.4s ease; }
.mm-foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(11 32 48 / 0.82) 0%, rgb(11 32 48 / 0.35) 42%, rgb(11 32 48 / 0) 70%);
  transition: opacity 0.4s ease; }
.mm-foto-t { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.15;
  letter-spacing: -0.01em; color: var(--blanco); text-wrap: balance; }
.mm-rama:hover .mm-foto img, .mm-foto:focus-visible img { transform: scale(1.06); filter: saturate(1.08); }
.mm-rama:hover .mm-foto::after { opacity: 0.85; }
.cab .mm-foto:focus-visible { outline: 3px solid var(--prot); outline-offset: 3px; }
/* Las demás columnas se apagan un poco mientras miras una (solo con ratón) */
@media (hover: hover) {
  .mm-ramas:hover .mm-rama { opacity: 0.6; transition: opacity 0.3s ease; }
  .mm-ramas:hover .mm-rama:hover { opacity: 1; }
}

.mm-subs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.cab .mm-sub {
  display: grid; gap: 5px; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--fondo);
  color: var(--tinta); text-decoration: none; letter-spacing: 0;
  transition: color 0.2s ease, padding-left 0.3s cubic-bezier(.2, .7, .2, 1);
}
.cab .mm-sub:hover, .cab .mm-sub:focus-visible { color: var(--prot); padding-left: 8px; }
.mm-sub-n { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 14px; line-height: 1.3; }

/* El medidor: tramos de la escala de esa magnitud con sus colores de estado (DISENO.md). */
.mm-medida { display: flex; align-items: center; gap: 10px; }
.mm-barra { display: flex; gap: 2px; flex: 0 1 96px; height: 6px; border-radius: 999px; overflow: hidden; }
.mm-tr { flex: 1; transform-origin: left center; }
.mm-tr--clara { background: var(--clara); }
.mm-tr--good { background: var(--ok); }
.mm-tr--aviso { background: var(--aviso); }
.mm-tr--alerta { background: var(--alerta); }
.mm-rango { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; color: var(--prot); white-space: nowrap; }

.cab .mm-todas {
  display: inline-flex; gap: 6px; margin-top: auto; padding: 14px 0 0; border: 0;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0;
  color: var(--prot); text-decoration: none;
}
.cab .mm-todas span { transition: transform 0.3s cubic-bezier(.2, .7, .2, 1); }
.cab .mm-todas:hover span, .cab .mm-todas:focus-visible span { transform: translateX(4px); }
.cab .mm-todas:hover, .cab .mm-todas:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- El móvil: el mismo contenido, en acordeón dentro del panel #movil ---------- */
.mm-movil { display: block; }
.mm-acc { border-bottom: 1px solid var(--clara); }
.mm-acc-b {
  appearance: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 14px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 1.2; color: var(--tinta);
}
.mm-acc-b::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);
}
.mm-acc-b[aria-expanded="true"] { color: var(--prot); }
.mm-acc-b[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.mm-acc-p { display: grid; gap: 22px; padding: 4px 0 22px; }
.mm-acc-p:not([hidden]) .mm-rama-m { animation: mm-sube 0.45s cubic-bezier(.2, .7, .2, 1) both; }
.mm-m-cab { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center;
  color: var(--tinta); text-decoration: none; }
.mm-m-cab img { width: 88px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; display: block; }
.mm-m-t { font-family: "Schibsted Grotesk", system-ui, sans-serif; font-weight: 800; font-size: 16px; line-height: 1.25; }
.mm-m-cab:hover .mm-m-t { color: var(--prot); }
.mm-rama-m .mm-subs { margin: 8px 0 0 102px; }
.mm-rama-m .mm-sub { padding: 8px 0; }
.mm-rama-m .mm-medida { flex-wrap: wrap; }
@media (max-width: 359px) { .mm-rama-m .mm-subs { margin-left: 0; } }

/* 📱 El celular (11 oct 2026): el acordeón del menú, más contenido */
@media (max-width: 720px) {
  .mm-acc-b { font-size: 17px; padding: 12px 0; }
  .mm-m-t { font-size: 15px; }
  .mm-rama-m .mm-subs { margin-left: 0; }
  .mm-sub-n { font-size: 14px; }
}