/* Oli · sitio.css — tokens, base, tipografía y componentes globales (todas las páginas) */

/* ───────── Fuentes (auto-hospedadas) ───────── */
@font-face { font-family: "Fraunces Display"; src: url("/fonts/fraunces-display-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "Fraunces Display"; src: url("/fonts/fraunces-display-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "Fraunces Texto"; src: url("/fonts/fraunces-texto-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "Fraunces Texto"; src: url("/fonts/fraunces-texto-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; 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: "Fraunces Italica"; src: url("/fonts/fraunces-italica-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; 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: "Fraunces Italica"; src: url("/fonts/fraunces-italica-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; 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; }
/* Inter viene de Google como un solo archivo variable (400–600): una sola descarga para ambos pesos */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; 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: "Inter"; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; 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: "Dancing Script"; src: url("/fonts/dancing-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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: "Dancing Script"; src: url("/fonts/dancing-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; 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; }

/* Respaldos con métricas ajustadas: el cambio de fuente no mueve nada */
@font-face { font-family: "Fraunces Respaldo"; src: local("Georgia"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Dancing Respaldo"; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 92%; ascent-override: 100%; descent-override: 30.4%; line-gap-override: 0%; }
@font-face { font-family: "Inter Respaldo"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ───────── Tokens ───────── */
:root {
  color-scheme: light;
  --cream: #FBF1EA; --cream-deep: #F5E6D8; --beige: #EFD9C5; --sand: #E6CDB5; --bone: #D8C5B7;
  --off-white: #FAF7F4; --white: #FFFFFF;
  --ink: #3A2418; --graphite: #5B4034; --slate: #7A5F52; --ash: #A38B7E;
  --terracota: #B85C3E; --terracota-deep: #8C3A21; --terracota-soft: #F6D9D0;
  --naranja: #C97A54; --rosa: #E6B8A2;
  --mostaza: #D9A441; --mostaza-deep: #7C5A1F; --mostaza-soft: #F7E7C4;
  --success: #7BA37A; --success-soft: #E3EFE3; --danger: #C25A4A;
  --cat-recreativo: #D9A441; --cat-recreativo-soft: #F1D894; --cat-recreativo-ink: #5C4112;
  --cat-academico: #C97A54; --cat-academico-soft: #F0CDB6; --cat-academico-ink: #4A2614;
  --cat-cultural: #B85C3E; --cat-cultural-soft: #E8B9A5; --cat-cultural-ink: #3D1A0F;
  --cat-servicios: #E6B8A2; --cat-servicios-soft: #F5DAC8; --cat-servicios-ink: #5A2F22;

  --fondo: var(--cream); --fondo-hundido: var(--cream-deep); --montura: var(--off-white);
  --texto: var(--ink); --texto-2: var(--graphite); --texto-3: var(--slate);
  --enlace: var(--terracota-deep); --acento: var(--terracota); --foco: var(--terracota-deep);
  --filete: var(--sand); --filete-fuerte: var(--bone); --borde-input: var(--slate);
  --trazo-liga: var(--terracota);

  --ease-suave: cubic-bezier(.22, 1, .36, 1);
  --ease-salida: cubic-bezier(.55, 0, 1, .45);
  --ease-sello: linear(0, .5 35%, 1.06 60%, .98 78%, 1);
  --ease-resorte: linear(0, .62 18%, 1.04 42%, .99 62%, 1);
  --d-micro: 160ms; --d-ui: 260ms; --d-ui-lenta: 380ms; --d-narrativa: 900ms;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 64px; --s-9: 96px;
  --s-seccion: clamp(80px, 9vw, 152px);

  --r-pildora: 999px; --r-input: 10px; --r-panel: 16px; --r-papel: 2px; --r-banda: 0;

  --sombra-papel: 0 1px 0 var(--bone), 0 10px 24px -14px rgba(58, 36, 24, .28);
  --sombra-alzada: 0 1px 0 var(--bone), 0 18px 36px -18px rgba(58, 36, 24, .32);
  --velo: rgba(58, 36, 24, .45);

  --cols: 4; --gutter: clamp(16px, 2vw, 28px); --margen: clamp(16px, 5vw, 80px); --max: 1360px;
  --hilo: var(--terracota); --hilo-grosor: 3px;
  --z-base: 0; --z-hilo: 1; --z-contenido: 2; --z-header: 40; --z-menu: 100; --z-skip: 1000;

  --f-display: "Fraunces Display", "Fraunces Respaldo", Georgia, serif;
  --f-texto: "Fraunces Texto", "Fraunces Respaldo", Georgia, serif;
  --f-italica: "Fraunces Italica", "Fraunces Respaldo", Georgia, serif;
  --f-sans: "Inter", "Inter Respaldo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-firma: "Dancing Script", "Dancing Respaldo", cursive;

  --t-display: clamp(2.75rem, 1.6rem + 5.6vw, 8.25rem);
  --t-h1-int: clamp(2.5rem, 1.7rem + 4vw, 6rem);
  --t-h2: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  --t-h3: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
  --t-precio: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  --t-hora: clamp(2rem, 1.4rem + 3vw, 4.5rem);
  --t-lead: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-folio: .875rem;
  --t-caption: .875rem;
  --t-boton: 1rem;
  --medida-cuerpo: 64ch; --medida-lead: 34ch; --medida-legal: 66ch;

  --subrayado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6 C 12 1.6 22 5 34 3.2 S 58 1.8 70 3.6 S 96 4.8 119 2.6' fill='none' stroke='%23B85C3E' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --subrayado-rosa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6 C 12 1.6 22 5 34 3.2 S 58 1.8 70 3.6 S 96 4.8 119 2.6' fill='none' stroke='%23E6B8A2' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --cols: 8; } }
@media (min-width: 1024px) { :root { --cols: 12; --hilo-grosor: 4px; } }

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 88px;
  font-synthesis: none;
  interpolate-size: allow-keywords;
}
body {
  margin: 0;
  background-color: var(--cream);
  background-image: url("/img/grano-256.webp");
  background-size: 256px;
  color: var(--texto);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class], nav ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 600; }
p, li { text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--enlace); }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ───────── Tipografía ───────── */
.h1-int { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h1-int); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.h2, .seccion h2 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.015em; color: var(--ink); }
.h2 em, .seccion h2 em { font-family: var(--f-italica); font-weight: 400; color: var(--terracota); letter-spacing: -.01em; }
h3, .h3 { font-family: var(--f-texto); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; color: var(--ink); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--graphite); max-width: var(--medida-lead); }
.caption, .nota { font-size: var(--t-caption); line-height: 1.45; color: var(--slate); }
.firma { font-family: var(--f-firma); font-weight: 600; color: var(--terracota); font-style: normal; letter-spacing: 0; }

/* ───────── Contenedor y grid ───────── */
.contenedor { width: min(100% - 2 * var(--margen), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; }
.seccion { position: relative; padding-block: var(--s-seccion); }
.seccion > .contenedor { position: relative; z-index: var(--z-contenido); }

/* Folio del margen: nombre de la sección, en minúsculas normales */
.folio { display: none; font-family: var(--f-sans); font-weight: 600; font-size: var(--t-folio); letter-spacing: .01em; line-height: 1.4; color: var(--terracota-deep); }
.folio--informa { display: block; margin-bottom: var(--s-4); }
@media (min-width: 1024px) {
  .folio { display: block; grid-column: 1 / 3 !important; padding-top: .9em; margin: 0; }
  .folio--informa { margin-bottom: 0; }
}

/* ───────── Enlace de salto ───────── */
.salto {
  position: absolute; left: var(--s-4); top: var(--s-3); z-index: var(--z-skip);
  padding: 12px 20px; border-radius: var(--r-pildora);
  background: var(--ink); color: var(--cream); font-weight: 600; text-decoration: none;
  translate: 0 -200%;
}
.salto:focus-visible { translate: 0 0; outline-color: var(--terracota-deep); }

/* ───────── Liga con subrayado de lápiz ───────── */
.liga, .texto a, .prosa a, .liga-texto {
  color: var(--enlace); text-decoration: none; font-weight: 600;
  background-image: var(--subrayado); background-repeat: no-repeat;
  background-size: 100% 6px; background-position: 0 100%;
  padding-bottom: 3px;
}
.liga { display: inline-flex; align-items: center; min-height: 44px; background-position: 0 calc(100% - 8px); padding-bottom: 0; }
.banda-ink .liga, .banda-ink .texto a { color: var(--cream); background-image: var(--subrayado-rosa); }
@media (prefers-reduced-motion: no-preference) {
  .liga, .texto a, .prosa a, .liga-texto { transition: background-size 140ms var(--ease-suave); }
  .liga:hover, .liga:focus-visible, .texto a:hover, .texto a:focus-visible, .liga-texto:hover, .liga-texto:focus-visible { animation: liga-redibuja 220ms var(--ease-suave); }
}
@keyframes liga-redibuja { from { background-size: 0% 6px; } to { background-size: 100% 6px; } }

/* Enlaces de navegación: el trazo aparece solo en hover, foco y página actual */
.nav-liga {
  color: var(--ink); text-decoration: none; font-weight: 600;
  background-image: var(--subrayado); background-repeat: no-repeat;
  background-size: 0% 6px; background-position: 0 calc(100% - 6px);
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-liga:hover, .nav-liga:focus-visible, .nav-liga[aria-current="page"] { background-size: 100% 6px; }
@media (prefers-reduced-motion: no-preference) {
  .nav-liga { transition: background-size 140ms var(--ease-suave); }
  .nav-liga:hover, .nav-liga:focus-visible { transition-duration: 220ms; }
}

/* ───────── Botón primario «tinta que se llena» ───────── */
.boton {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pildora);
  background: var(--terracota); color: var(--white);
  font-family: var(--f-sans); font-weight: 600; font-size: var(--t-boton); letter-spacing: .005em; line-height: 1.2;
  text-decoration: none; touch-action: manipulation; cursor: pointer;
}
@media (min-width: 1024px) { .boton { min-height: 48px; } }
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--terracota-deep);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
}
.boton:focus-visible::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
@media (hover: hover) {
  .boton:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
}
@media (prefers-reduced-motion: no-preference) {
  .boton::before { transition: clip-path 170ms var(--ease-salida); }
  .boton:hover::before, .boton:focus-visible::before { transition: clip-path var(--d-ui) var(--ease-suave); }
  .boton { transition: translate 320ms var(--ease-resorte); }
  .boton:active { translate: 0 1px; transition-duration: 90ms; }
}

/* Botón con borde (secundario) */
.boton-borde {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: var(--r-pildora);
  background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; touch-action: manipulation;
}
@media (hover: hover) { .boton-borde:not(:disabled):hover { background: var(--ink); color: var(--cream); } }
.boton-borde:disabled { opacity: .45; cursor: default; }
.boton-borde:focus-visible { background: var(--ink); color: var(--cream); }
@media (prefers-reduced-motion: no-preference) { .boton-borde { transition: background-color var(--d-micro) var(--ease-suave), color var(--d-micro) var(--ease-suave); } }

/* Insignia oficial de App Store */
.insignia { display: inline-block; padding: 12px 0; line-height: 0; border-radius: 9px; }
.insignia img { height: 48px; width: auto; }
@media (min-width: 1024px) { .insignia img { height: 46px; } }
@media (hover: hover) { .insignia:hover img { opacity: .88; } }
@media (prefers-reduced-motion: no-preference) { .insignia img { transition: opacity 160ms var(--ease-suave); } }

/* Bloque de descarga estándar */
.descarga { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-5); row-gap: 0; }
.descarga__nota { flex-basis: 100%; font-size: var(--t-caption); color: var(--slate); margin-top: 2px; }
/* Antes del lanzamiento: sin insignia (la app aún no está publicada), un aviso por correo */
.descarga--pronto .boton { margin-block: 8px; }
.descarga--pronto .descarga__nota { margin-top: 6px; }
.menu__pronto { font-size: var(--t-caption); color: var(--slate); }

/* ───────── Chips ───────── */
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-pildora);
  background: var(--terracota-soft); color: var(--terracota-deep);
  font-family: var(--f-sans); font-weight: 600; font-size: 15px; line-height: 1.2; touch-action: manipulation;
}
button.chip .chip__check { width: 14px; height: 14px; margin-left: -4px; display: none; }
button.chip[aria-pressed="true"], .no-js .chip[data-activo] { background: var(--terracota-deep); color: var(--white); }
button.chip[aria-pressed="true"] .chip__check { display: block; }
.chip__check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  button.chip { transition: background-color 320ms var(--ease-resorte), color 320ms var(--ease-resorte); }
  button.chip[aria-pressed="true"] .chip__check path { animation: traza 180ms var(--ease-suave) both; }
}
@keyframes traza { 0% { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip--pronto { min-height: 28px; padding: 0 12px; background: var(--mostaza-soft); color: var(--mostaza-deep); font-size: 13px; }

/* ───────── Lámina: el único marco de captura ─────────
   Las capturas de la app van en un teléfono dibujado a mano: contorno grafito de 1.5 px,
   bisel de papel y esquinas redondas. Sin notch realista: la propia captura trae su barra.
   .lamina--corte: capturas parciales; el teléfono se «rasga» abajo como recorte de revista. */
.lamina { position: relative; margin: 0; rotate: var(--giro, 0deg); }
.lamina__img { position: relative; overflow: hidden; background: var(--cream-deep); }
.lamina img { width: 100%; height: auto; }
.lamina:not(.polaroid) .lamina__img {
  --bisel: 7px; --radio: 34px;
  padding: var(--bisel); border-radius: var(--radio);
  background: var(--off-white);
  box-shadow: 0 0 0 1.5px var(--graphite), 0 22px 40px -22px rgba(58, 36, 24, .42);
}
@media (max-width: 639px) { .lamina:not(.polaroid) .lamina__img { --bisel: 5px; --radio: 26px; } }
.lamina:not(.polaroid) picture { display: block; overflow: hidden; border-radius: calc(var(--radio) - var(--bisel)); background: var(--cream); }
.lamina--corte:not(.polaroid) .lamina__img {
  padding-bottom: 0; border-radius: var(--radio) var(--radio) 0 0;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 13px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 13px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
  box-shadow: 0 0 0 1.5px var(--graphite);
}
/* El recorte rasgado proyecta su sombra con la forma del papel (la máscara se come el box-shadow) */
.lamina--corte:not(.polaroid), :is(.sumario__pila, .pasos__pila) .lamina:not(.polaroid) { filter: drop-shadow(0 16px 18px rgba(58, 36, 24, .18)); }
.lamina--corte:not(.polaroid) picture { border-radius: calc(var(--radio) - var(--bisel)) calc(var(--radio) - var(--bisel)) 0 0; }
/* Pilas que cambian con el scroll (inicio y familias): un solo marco del mismo tamaño;
   lo que cambia es la pantalla de adentro */
:is(.sumario__pila, .pasos__pila) .lamina:not(.polaroid) .lamina__img {
  padding-bottom: 0; border-radius: var(--radio) var(--radio) 0 0;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 13px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - 13px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
  box-shadow: 0 0 0 1.5px var(--graphite);
}
:is(.sumario__pila, .pasos__pila) picture { aspect-ratio: 780 / 850; border-radius: calc(var(--radio) - var(--bisel)) calc(var(--radio) - var(--bisel)) 0 0 !important; }
/* Cada pantalla llena el marco desde arriba: ninguna deja una franja vacía abajo */
:is(.sumario__pila, .pasos__pila) picture img { height: 100%; object-fit: cover; object-position: center top; }
/* .lamina--hoja: una captura de media pantalla (sin la parte de arriba del teléfono) va como recorte
   de papel, rasgado arriba y abajo: nunca un corte recto que parezca error */
.lamina--hoja:not(.polaroid) .lamina__img {
  padding: 16px 10px; border-radius: 0; background: var(--off-white); box-shadow: none;
  -webkit-mask: url("/img/svg/papel-rasgado.svg") top / 620px 14px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 26px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
  mask: url("/img/svg/papel-rasgado.svg") top / 620px 14px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 26px) no-repeat, url("/img/svg/rasgado-abajo.svg") bottom / 520px 14px repeat-x;
}
.lamina--hoja:not(.polaroid) picture { border-radius: 10px; }
.lamina--hoja:not(.polaroid) { filter: drop-shadow(0 14px 16px rgba(58, 36, 24, .16)); }
.lamina figcaption { display: flex; align-items: center; font-size: 14px; line-height: 1.3; color: var(--slate); padding: 12px 4px 0; }
.polaroid { background: var(--montura); padding: 10px 10px 0; border-radius: var(--r-papel); box-shadow: var(--sombra-papel); }
.polaroid .lamina__img { border-radius: 1px; }
.polaroid figcaption { min-height: 34px; padding: 6px 2px 8px; }
.lamina--washi::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: -12px; width: 88px; height: 24px;
  translate: -50% 0; rotate: -4deg;
  background: var(--rosa); opacity: .75;
  -webkit-mask: url("/img/svg/washi.svg") center / 100% 100% no-repeat; mask: url("/img/svg/washi.svg") center / 100% 100% no-repeat;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lamina img { transition: scale 260ms var(--ease-suave); }
  .lamina:hover img { scale: 1.02; }
}
/* Recorte a mano: la lámina aparece como si la recortaran del papel */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .recorte {
      animation: recorte linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
    .js .recorte img {
      animation: recorte-img linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }
  }
}
@keyframes recorte { from { clip-path: inset(14% 9% 16% 11% round 2px); } to { clip-path: inset(0 round 2px); } }
@keyframes recorte-img { from { scale: 1.06; } to { scale: 1; } }

.polaroid { max-width: 260px; }  /* (ver arriba: la polaroid conserva la montura de papel) */
.polaroid .lamina__img { aspect-ratio: 4 / 5; }
.polaroid img { height: 100%; object-fit: cover; }
.polaroid:not(:has(figcaption)) { padding-bottom: 34px; }

/* ───────── Hilo ───────── */
.hilo-tramo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-hilo); overflow: visible; }
.hilo-tramo path { fill: none; stroke: var(--hilo); stroke-width: var(--hilo-grosor); stroke-linecap: round; stroke-linejoin: round; }
.hilo-tramo .gemelo { opacity: .3; stroke-width: calc(var(--hilo-grosor) - 1px); }
@media (max-width: 1023px) { .hilo-tramo:not(.hilo-hero) { display: none; } }

/* ───────── Separadores ───────── */
.rasgado-arriba::before, .rasgado-abajo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px; background: inherit; background-image: none; background-color: inherit;
  -webkit-mask: url("/img/svg/papel-rasgado.svg") 0 0 / 1440px 100% repeat-x; mask: url("/img/svg/papel-rasgado.svg") 0 0 / 1440px 100% repeat-x;
  pointer-events: none;
}
.rasgado-arriba::before { top: -17px; }
.rasgado-abajo::after { bottom: -17px; scale: 1 -1; -webkit-mask-position: 37% 0; mask-position: 37% 0; }
@media (min-width: 1024px) {
  .rasgado-arriba::before, .rasgado-abajo::after { height: 28px; }
  .rasgado-arriba::before { top: -27px; }
  .rasgado-abajo::after { bottom: -27px; }
}

/* Costura: el cambio de papel más discreto. El papel rasgado se guarda para la banda principal de cada página;
   los demás cambios llevan una puntada, como la del hilo */
.costura-arriba::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, var(--bone) 0 9px, transparent 9px 18px);
}

/* ───────── Cabecera ───────── */
.cabecera {
  position: sticky; top: 0; z-index: var(--z-header);
  /* Papel del mismo tono que la página y opaco: nada se transparenta bajo la barra */
  background-color: var(--cream);
  border-bottom: 1px solid var(--sand);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cabecera {
      animation: cabecera-solida linear both;
      animation-timeline: scroll(root);
      animation-range: 0 96px;
    }
  }
}
@keyframes cabecera-solida {
  from { background-color: rgba(251, 241, 234, 0); border-bottom-color: rgba(230, 205, 181, 0); }
  to { background-color: var(--cream); border-bottom-color: var(--sand); }
}
@media (prefers-reduced-motion: no-preference) {
  .cabecera { transition: translate 240ms var(--ease-suave); }
  .cabecera.escondida { translate: 0 -100%; }
}
.cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 64px; }
@media (min-width: 1024px) { .cabecera__in { height: 76px; } }
.marca {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--terracota); text-decoration: none;
  font-family: var(--f-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; line-height: 1;
}
.marca svg { width: 44px; height: 19px; view-transition-name: oli-logo; }
.marca svg path { fill: none; stroke: currentColor; stroke-width: 80; stroke-linecap: round; stroke-linejoin: round; }
.cabecera__der { display: flex; align-items: center; gap: var(--s-6); }
.nav-principal { display: none; }
.nav-principal ul { display: flex; gap: var(--s-6); }
.cabecera .boton-borde { display: none; }
@media (min-width: 1024px) {
  .nav-principal { display: block; }
  .cabecera .boton-borde { display: inline-flex; }
}

/* Menú móvil */
.menu-boton, .menu-nojs {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 1.5px solid var(--ink); border-radius: var(--r-pildora); background: transparent;
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; touch-action: manipulation;
}
.menu-boton svg { width: 22px; height: 14px; }
.menu-boton svg path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.no-js .menu-boton { display: none; }
.js .menu-nojs { display: none; }
@media (min-width: 1024px) { .menu-boton, .menu-nojs { display: none !important; } }

.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  border: 0; padding: 0; background: var(--cream-deep); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu:not(:popover-open):not(.abierto) { display: none; }
.menu__in { min-height: 100%; display: flex; flex-direction: column; padding: 0 var(--margen) var(--s-7); }
.menu__in:focus { outline: none; }
.menu__arriba { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.menu__cerrar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: var(--r-pildora); background: transparent; font-weight: 600; font-size: 15px; }
.menu__cerrar svg { width: 14px; height: 14px; }
.menu__cerrar svg path { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.menu .menu__lista { margin-top: var(--s-7); }
.menu__lista a {
  display: inline-flex; align-items: center; min-height: 56px;
  font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none;
  background-image: var(--subrayado); background-repeat: no-repeat; background-size: 0% 6px; background-position: 0 calc(100% - 4px);
}
.menu__lista a:hover, .menu__lista a:focus-visible, .menu__lista a[aria-current="page"] { background-size: 100% 6px; }
.menu__lista a[aria-current="page"] { color: var(--terracota-deep); }
.menu__lista li { overflow: clip; overflow-clip-margin: 6px; }
.menu__ola { width: 120px; height: auto; margin-top: var(--s-7); color: var(--terracota); overflow: visible; }
.menu__ola path { fill: none; stroke: currentColor; stroke-width: 80; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .menu:popover-open .menu__lista a, .menu.abierto .menu__lista a { animation: menu-liga 420ms var(--ease-suave) both; animation-delay: calc(120ms + var(--i, 0) * 40ms); }
  .menu:popover-open .menu__ola path, .menu.abierto .menu__ola path { stroke-dasharray: 1; animation: traza 700ms var(--ease-suave) 380ms both; }
}
@keyframes menu-liga { from { translate: 0 105%; } to { translate: 0 0; } }
.menu__abajo { margin-top: auto; padding-top: var(--s-7); display: grid; gap: var(--s-2); }
.menu__abajo .liga { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
  .menu {
    transition: clip-path 240ms var(--ease-salida), overlay 240ms allow-discrete, display 240ms allow-discrete;
    clip-path: circle(0 at calc(100% - 40px) 32px);
  }
  .menu:popover-open, .menu.abierto { clip-path: circle(150% at calc(100% - 40px) 32px); transition-duration: 380ms; transition-timing-function: var(--ease-suave); }
  @starting-style { .menu:popover-open { clip-path: circle(0 at calc(100% - 40px) 32px); } }
}
body.menu-abierto { overflow: hidden; }

/* ───────── Pie ───────── */
.pie { position: relative; background-color: var(--cream-deep); background-image: none; padding-top: var(--s-9); overflow-x: clip; overflow-y: visible; }
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 18px; background-color: var(--cream-deep);
  -webkit-mask: url("/img/svg/papel-rasgado.svg") 0 0 / 1440px 100% repeat-x; mask: url("/img/svg/papel-rasgado.svg") 0 0 / 1440px 100% repeat-x; }
@media (min-width: 1024px) { .pie::before { top: -27px; height: 28px; } }
.pie__nav { display: grid; gap: var(--s-6); font-size: 15px; }
/* En teléfono: Oli y Ayuda lado a lado (4 y 3 ligas); Legal ocupa la fila de abajo, con sus dos ligas en renglón */
@media (max-width: 767px) {
  .pie__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--s-5); row-gap: var(--s-5); }
  .pie__grupo:nth-child(3) { grid-column: 1 / -1; }
  .pie__grupo:nth-child(3) ul { display: flex; flex-wrap: wrap; column-gap: var(--s-6); }
  .pie__grupo .nav-liga { overflow-wrap: anywhere; }
}
@media (min-width: 768px) { .pie__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pie__grupo h2 { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-folio); letter-spacing: .01em; color: var(--terracota-deep); margin-bottom: var(--s-2); }
.pie__grupo ul { display: grid; gap: 0; }
.pie__grupo .nav-liga { font-weight: 400; color: var(--ink); }
.pie__negocios { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--bone); font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; column-gap: .5ch; }
.pie > .contenedor { container-type: inline-size; }
/* La ola mide 1.9em y «Oli» ~1.13em: el bloque llena justo el ancho del contenedor */
.pie__wordmark {
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  margin-top: var(--s-8); white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; color: var(--terracota);
  font-size: 27vw; font-size: calc(100cqi / var(--wm-ratio, 3.03)); line-height: .78; letter-spacing: -.035em;
}

.pie__wordmark svg { width: 1.9em; height: auto; flex: none; margin-bottom: .12em; overflow: visible; }
.pie__wordmark svg path { fill: none; stroke: currentColor; stroke-width: 80; stroke-linecap: round; stroke-linejoin: round; }
.pie__firma { margin-top: var(--s-7); text-align: center; font-family: var(--f-italica); font-style: italic; font-size: 24px; color: var(--graphite); line-height: 1.3; }
.pie__firma .firma { font-size: 1.25em; }
.pie__legal { margin-top: var(--s-5); padding-bottom: var(--s-7); text-align: center; }
.pie__legal a { color: var(--terracota-deep); }
@media (prefers-reduced-motion: no-preference) {
  .js .pie__wordmark svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .pie__wordmark.dibujada svg path { transition: stroke-dashoffset var(--d-narrativa) var(--ease-suave); stroke-dashoffset: 0; }
}

/* ───────── Firma que se escribe ───────── */
/* La palabra espera trazada a lápiz (tenue) y la tinta la recorre de izquierda a derecha:
   nunca queda un hueco en el titular. El relleno extra deja caber los rasgos de la letra. */
@property --trazo { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.firma-escribe { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .firma-escribe {
    padding: .3em .1em .42em .06em; margin: -.3em -.1em -.42em -.06em;
    -webkit-mask-image: linear-gradient(90deg, #000 var(--trazo), rgb(0 0 0 / .2) calc(var(--trazo) + .5%));
    mask-image: linear-gradient(90deg, #000 var(--trazo), rgb(0 0 0 / .2) calc(var(--trazo) + .5%));
  }
  .js .firma-escribe::after {
    content: ""; position: absolute; left: calc(.06em - 3px); top: 58%; width: 6px; height: 6px; border-radius: 50%;
    background: var(--terracota); opacity: 0;
  }
  .js .firma-escribe.escribir { animation: firma 760ms steps(20, end) both; }
  .js .firma-escribe.escribir::after { animation: firma-punto 760ms steps(20, end) both; }
}
@keyframes firma { from { --trazo: 0%; } to { --trazo: 101%; } }
@keyframes firma-punto {
  0% { opacity: 1; translate: 0 0; }
  92% { opacity: 1; }
  100% { opacity: 0; translate: var(--ancho-firma, 100px) 0; }
}

/* ───────── View Transitions entre páginas ───────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: 200ms var(--ease-salida) both vt-sale; }
::view-transition-new(root) { animation: 360ms var(--ease-suave) both vt-entra; }
::view-transition-group(titulo) { animation-duration: 420ms; animation-timing-function: var(--ease-suave); }
@keyframes vt-sale { to { opacity: 0; translate: 0 -10px; } }
@keyframes vt-entra { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }


/* ───────── Sello: estampado y anillo ───────── */
.sello-caja { position: relative; }
.sello-caja::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  opacity: 0; pointer-events: none; clip-path: circle(0 at 50% 50%);
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-sello]:not(.estampado) .sello { opacity: 0; scale: 1.18; rotate: -8deg; }
  .estampado .sello { animation: estampa 650ms var(--ease-sello) both; }
  .estampado::after { animation: halo 300ms var(--ease-suave) 380ms both; }
  .gira .anillo { animation: gira 60s linear infinite; }
  .gira.pausado .anillo, .gira.fuera .anillo, .gira:hover .anillo, .gira:focus-within .anillo { animation-play-state: paused; }
}
@keyframes estampa {
  0% { opacity: 0; scale: 1.18; rotate: -8deg; }
  18% { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: -3deg; }
}
@keyframes halo { from { opacity: .18; clip-path: circle(0 at 50% 50%); } to { opacity: 0; clip-path: circle(60% at 50% 50%); } }
@keyframes gira { to { rotate: 360deg; } }

.sello-caja { color: var(--terracota); }
.sello { width: 100%; height: auto; rotate: -3deg; overflow: visible; }
.sello .anillo { transform-origin: 110px 110px; transform-box: view-box; }
.estrellas { display: inline-flex; gap: 3px; }
/* 4.6 se dibuja como 4.6: la quinta estrella va llena al 60 % y el resto queda en contorno */
.estrella--parcial .estrella__borde { fill: none; }
@keyframes casilla { from { scale: .6; } to { scale: 1; } }
@keyframes estampa-mini { from { scale: 1.6; rotate: -12deg; opacity: 0; } 30% { opacity: 1; } to { scale: 1; rotate: 0deg; opacity: 1; } }

/* ───────── Iconos ───────── */
.icono { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ───────── Páginas internas: piezas compartidas ───────── */
.hero-int { position: relative; overflow: clip; padding-top: clamp(32px, 6vw, 104px); padding-bottom: clamp(24px, 4vw, 64px); }
.hero-int > .contenedor { position: relative; z-index: var(--z-contenido); row-gap: var(--s-5); }
.hero-int h1 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h1-int); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.h1-seo { display: block; margin-bottom: .55em; font-family: var(--f-texto); font-style: normal; font-weight: 500; font-size: clamp(1.125rem, 1rem + .55vw, 1.5rem); line-height: 1.25; letter-spacing: 0; color: var(--terracota-deep); }
.hero-int h1 .firma { font-size: 1.08em; line-height: 1.18; vertical-align: -.04em; }
.hero-int__texto { display: grid; gap: var(--s-5); align-content: start; }
.hero-int__texto .lead { max-width: 36ch; }
@media (min-width: 1024px) {
  .hero-int .folio { grid-row: 1; }
  .hero-int__texto { grid-column: 3 / 8; grid-row: 1; }
  .hero-int__arte { grid-column: 9 / 13; grid-row: 1; align-self: center; }
}
.seccion__cabeza { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
.seccion__cabeza > p:not(.folio) { max-width: var(--medida-cuerpo); }
@media (min-width: 1024px) {
  .seccion .folio { grid-row: 1; }
  .seccion__cabeza { grid-column: 3 / 12; grid-row: 1; }
}
.texto p + p { margin-top: var(--s-4); }
.seccion h2.h3, h2.h3 { font-family: var(--f-texto); font-weight: 500; font-size: var(--t-h3); line-height: 1.15; letter-spacing: 0; }

/* Arranque de sección: filete de papel con un tramo de hilo */
.arranque { position: relative; border-top: 1px solid var(--sand); padding-top: var(--s-7); }
.arranque::before { content: ""; position: absolute; left: 0; top: -2px; width: 48px; height: 3px; border-radius: 2px; background: var(--hilo); }

/* Hilo en páginas sin GSAP: se traza con el scroll (CSS) */
.hilo-css { position: absolute; pointer-events: none; overflow: visible; z-index: var(--z-hilo); }
.hilo-css path { fill: none; stroke: var(--hilo); stroke-width: var(--hilo-grosor); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hilo-css .gemelo { opacity: .3; stroke-width: calc(var(--hilo-grosor) - 1px); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .con-hilo { view-timeline: --tramo block; }
    .js .hilo-css path { stroke-dasharray: 1; animation: traza linear both; animation-timeline: --tramo; animation-range: entry 10% cover 50%; }
  }
}

/* Botón de pausa sobre papel */
.boton-pausa--papel { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: var(--r-pildora); background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; touch-action: manipulation; }
@media (hover: hover) { .boton-pausa--papel:hover { background: var(--cream-deep); } }

/* Chip «Visita confirmada» */
.chip--visita { min-height: 32px; padding: 0 14px 0 10px; background: var(--success-soft); color: var(--ink); font-size: 14px; }
.chip--visita .icono { width: 16px; height: 16px; color: var(--success); stroke-width: 2.4; }

/* Reseña de ejemplo en fila editorial, sin tarjeta ni avatar */
.resena { border-block: 1px solid var(--sand); padding-block: var(--s-5); display: grid; gap: var(--s-3); justify-items: start; }
.resena blockquote { font-family: var(--f-italica); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.35; color: var(--ink); max-width: 34ch; }

/* «Paso N» */
.paso-num { font-family: var(--f-italica); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--terracota); }

/* Listas con icono de texto (sí / no) */
.lista-icono { display: grid; }
.lista-icono li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-4); border-top: 1px solid var(--sand); }
.lista-icono li:last-child { border-bottom: 1px solid var(--sand); }
.lista-icono .icono { color: var(--terracota-deep); margin-top: 2px; }

/* Cierre de página interna */
.cierre-int { background-color: var(--cream-deep); background-image: none; padding-bottom: var(--s-8); }
.cierre-int h2 { max-width: 16ch; }
.cierre-int .acciones { margin-top: var(--s-3); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); }
.pie { margin-top: 0; }

@media print {
  .cabecera, .pie, .menu, .hilo-tramo, .salto { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ───────── Alto contraste forzado (Windows): los controles conservan su contorno ───────── */
@media (forced-colors: active) {
  .boton, .boton-borde, .boton-crema, .boton-pausa, .boton-pausa--papel, .menu-boton, .menu__cerrar, .chip, .cupon, .ficha-demo {
    border: 2px solid ButtonText; forced-color-adjust: auto;
  }
  .boton::before { display: none; }
  .chip[aria-pressed="true"] { border-color: Highlight; outline: 2px solid Highlight; outline-offset: 1px; }
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
  .boton-borde:disabled { border-color: GrayText; color: GrayText; }
  .hilo-tramo path, .hilo-css path, .cerro path { forced-color-adjust: none; }
  .estrella { fill: CanvasText; stroke: CanvasText; }
  .estrella--parcial .estrella__borde { fill: none; }
}

/* Entrar al panel (negocios con cuenta): solo en escritorio; en móvil vive en el menú. */
.cabecera__panel { display: none; white-space: nowrap; }
@media (min-width: 1024px) { .cabecera__panel { display: inline-flex; } }