/* ════════════════════════════════════════════════════════════════════════
   CIFRA · las guías (19-oct-2026)
   Páginas para leer, una por marca, pensadas para lo que se busca en Google («cómo hacer un
   escandallo», «WhatsApp con IA para clínicas»…). La cabecera va en el color de la puerta de
   la marca, así que el telón se abre en ella igual que en la página de la marca; el texto va
   en una columna de lectura con el índice al lado en el ordenador.
   Va después de marca.css, de la que usa la cabecera, las burbujas de WhatsApp y los temas.
   ════════════════════════════════════════════════════════════════════════ */

/* ── La cabecera: la de la marca, sin escena y más corta ────────────────── */
.heroe.guia-heroe { padding-bottom: clamp(44px, 7vh, 80px); }
/* en Hostelería y Automoción la cabecera y el texto son del mismo color: no hace falta separarlos */
.t-hosteleria .heroe.guia-heroe, .t-automocion .heroe.guia-heroe { padding-bottom: 0; }
.guia-heroe .heroe__texto { max-width: 900px; }
.heroe.guia-heroe h1 { max-width: 19ch; font-size: calc(clamp(38px, 4.8vw, 66px) * var(--t-escala)); }
.migas { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 30px; font: 500 12px/1.4 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-puerta-2); }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: var(--sobre-puerta); }
.migas span { opacity: .55; }
.guia__entrada { max-width: 640px; font-size: clamp(17px, 1.35vw, 20px); color: color-mix(in oklab, var(--sobre-puerta) 82%, var(--puerta)); text-wrap: pretty; }
.guia__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font: 500 12.5px/1.4 var(--f-dato); letter-spacing: .04em; color: var(--sobre-puerta-2); }

/* La barra fina de arriba: lo que llevas leído (solo donde el navegador sabe hacerlo sin JS) */
.guia-progreso { display: none; }
@supports (animation-timeline: scroll()) {
  .guia-progreso { display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; background: var(--vivo); transform-origin: 0 50%; animation: guia-progreso linear both; animation-timeline: scroll(root); }
  @keyframes guia-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── El cuerpo: índice a la izquierda y texto en una columna ───────────── */
.guia { padding-block: clamp(40px, 5vw, 72px) clamp(72px, 9vw, 120px); }
.guia__rejilla { display: grid; grid-template-columns: 220px minmax(0, 700px); justify-content: start; gap: clamp(40px, 6vw, 96px); align-items: start; }
.guia__indice { position: sticky; top: calc(var(--alto-barra) + 28px); }
.guia__indice p { margin-bottom: 14px; font: 500 11.5px/1.3 var(--f-dato); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.guia__indice ol { display: grid; gap: 2px; border-left: 1px solid var(--linea); }
.guia__indice a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--tinta-2); font-size: 14.5px; line-height: 1.35; text-decoration: none; transition: color .2s, border-color .3s var(--suave); }
.guia__indice a:hover { color: var(--tinta); }
.guia__indice a[aria-current="location"] { color: var(--tinta); border-left-color: var(--vivo); }
@media (max-width: 960px) {
  .guia__rejilla { grid-template-columns: minmax(0, 1fr); }
  .guia__indice { display: none; }   /* en el móvil hace de índice «Lo corto», al principio */
}

/* ── El texto ───────────────────────────────────────────────────────────── */
.guia__texto { font-size: 18px; line-height: 1.7; }
.guia__texto > * + * { margin-top: 1.1em; }
.guia__texto h2 { margin-top: 2.6em; font-size: calc(clamp(26px, 2.6vw, 34px) * var(--t-escala)); line-height: 1.15; scroll-margin-top: calc(var(--alto-barra) + 28px); }
.guia__texto h2 + * { margin-top: .8em; }
.guia__texto h3 { margin-top: 1.9em; font-size: calc(21px * var(--t-escala)); line-height: 1.25; }
.guia__texto h3 + * { margin-top: .6em; }
/* en Automoción los titulares van en mayúsculas anchas; dentro del texto se leen mejor sin ellas */
.t-automocion .guia__texto h2, .t-automocion .guia__texto h3, .t-automocion .guia__cifra h2 { text-transform: none; font-stretch: 112%; }
.guia__texto p, .guia__texto li { color: var(--tinta-2); text-wrap: pretty; }
.guia__texto strong { color: var(--tinta); font-weight: 600; }
.guia__texto a:not(.boton) { color: var(--tinta); text-decoration-color: var(--vivo); text-decoration-thickness: 2px; }
.guia__texto ul, .guia__texto ol { display: grid; gap: .55em; }
.guia__texto ul li { position: relative; padding-left: 1.45em; }
.guia__texto ul li::before { content: ""; position: absolute; left: .2em; top: .7em; width: .42em; height: .42em; border-radius: 50%; background: var(--vivo); }
.guia__texto ol { counter-reset: paso; }
.guia__texto ol li { position: relative; padding-left: 2.5em; counter-increment: paso; }
.guia__texto ol li::before { content: counter(paso); position: absolute; left: 0; top: .12em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: color-mix(in oklab, var(--vivo) 18%, transparent); color: var(--tinta); font: 500 .78em/1 var(--f-dato); }

/* Lo corto: la respuesta entera en cuatro líneas, arriba del todo */
.guia__corto { padding: 22px 24px 24px; border-radius: var(--r); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.guia__texto .guia__corto > p:first-child { margin-bottom: 14px; font: 500 11.5px/1 var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: var(--realce); }
.guia__corto li { font-size: 16.5px; line-height: 1.55; }

/* Las fórmulas, en la letra de las cifras */
.formula { padding: 14px 18px; border-radius: var(--r-peq); background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--linea); font: 500 15.5px/1.5 var(--f-dato); letter-spacing: -0.01em; }
.guia__texto .formula { color: var(--tinta); }

/* Las tablas del ejemplo */
.guia__tabla { overflow-x: auto; }
.guia__tabla table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.4; }
.guia__tabla caption { caption-side: bottom; padding-top: 10px; text-align: left; font-size: 13.5px; color: var(--tinta-3); }
.guia__tabla th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--linea-2); text-align: left; font: 500 11.5px/1.3 var(--f-dato); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.guia__tabla td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--linea); color: var(--tinta-2); vertical-align: top; }
.guia__tabla .n { text-align: right; font-family: var(--f-dato); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guia__tabla th:last-child, .guia__tabla td:last-child { padding-right: 0; }
.guia__tabla tfoot td { border-bottom: 0; color: var(--tinta); font-weight: 600; }
.guia__tabla .sube { color: var(--realce); font-weight: 600; }
@media (max-width: 520px) { .guia__tabla table { font-size: 14px; } }

/* Las notas al margen: lo que conviene no pasar por alto */
.guia__nota { padding: 16px 20px 18px; border-radius: var(--r-peq); background: color-mix(in oklab, var(--dorado) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--dorado) 34%, transparent); font-size: 16.5px; line-height: 1.6; }
.guia__nota::before { content: "Ojo"; display: block; margin-bottom: 6px; font: 500 11px/1.2 var(--f-dato); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in oklab, var(--dorado) 70%, var(--tinta)); }
.guia__texto .guia__nota p { color: var(--tinta); }

/* Un chat de ejemplo: las burbujas de WhatsApp de las demos (marca.css), quietas */
.guia__chat { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; border-radius: var(--r); font-size: 15.5px; }
.guia__chat .demo { align-self: flex-start; margin-bottom: 4px; color: #54656F; }
.guia__chat .burbuja { max-width: 86%; }

/* Una reseña de ejemplo con su respuesta */
.ejemplo-resena { padding: 20px 22px; border-radius: var(--r); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); font-size: 16.5px; line-height: 1.6; }
.ejemplo-resena__estrellas { display: block; font-size: 15px; letter-spacing: 3px; color: #D69A2D; }
.ejemplo-resena__estrellas i { font-style: normal; color: var(--linea-2); }
.guia__texto .ejemplo-resena blockquote { margin: 6px 0 0; color: var(--tinta); }
.guia__texto .ejemplo-resena__respuesta { margin-top: 14px; padding-left: 16px; border-left: 2px solid var(--vivo); color: var(--tinta-2); }
.ejemplo-resena__respuesta b { display: block; margin-bottom: 4px; font: 500 11px/1.3 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.guia__texto .demo-pie { font: 500 11px/1.4 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }

/* El final: lo que hace CIFRA con esto, sin gritar */
.guia__cifra { margin-top: 3.4em; padding: clamp(26px, 4vw, 40px); border-radius: var(--r-grande); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linea); }
.guia__texto .guia__cifra > * + * { margin-top: 14px; }
.guia__cifra .antetitulo { color: var(--realce); }
.guia__texto .guia__cifra h2 { margin-top: 10px; }
.guia__cifra .heroe__acciones { margin-top: 24px; }

/* ── Las guías, en tarjetas del color de cada marca (al final de cada guía y en el índice) ── */
.guias-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tarjeta-guia { display: grid; align-content: space-between; gap: 32px; height: 100%; min-height: 230px; padding: 22px 22px 24px; border-radius: var(--r); background: var(--puerta); color: var(--sobre-puerta); text-decoration: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sobre-puerta) 14%, transparent); transition: transform .45s var(--suave); }
.tarjeta-guia:hover { transform: translateY(-4px); }
.tarjeta-guia small { font: 500 11px/1.2 var(--f-dato); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.tarjeta-guia b { display: block; font-family: var(--f-titulo); font-weight: var(--t-peso); font-style: var(--t-estilo); font-stretch: var(--t-ancho); text-transform: var(--t-mayus); letter-spacing: var(--t-espaciado); font-size: calc(24px * var(--t-escala)); line-height: 1.08; }
.tarjeta-guia span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.45; color: var(--sobre-puerta-2); }
/* en el índice van las cinco: dos grandes arriba y tres abajo, para que ninguna se quede sola */
@media (min-width: 900px) {
  .guias-lista--cinco { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .guias-lista--cinco > li { grid-column: span 2; }
  .guias-lista--cinco > li:nth-child(-n+2) { grid-column: span 3; }
  .guias-lista--cinco > li:nth-child(-n+2) .tarjeta-guia { min-height: 280px; }
  .guias-lista--cinco > li:nth-child(-n+2) b { font-size: calc(32px * var(--t-escala)); }
}
.otras-guias__titulo { margin-bottom: 22px; font-size: calc(clamp(26px, 2.6vw, 34px) * var(--t-escala)); }
/* en cada guía, la tarjeta de la propia guía no sale */
.guia[data-guia="escandallo"] ~ .otras-guias [data-guia="escandallo"],
.guia[data-guia="clinicas"] ~ .otras-guias [data-guia="clinicas"],
.guia[data-guia="taller"] ~ .otras-guias [data-guia="taller"],
.guia[data-guia="notificaciones"] ~ .otras-guias [data-guia="notificaciones"],
.guia[data-guia="resenas"] ~ .otras-guias [data-guia="resenas"] { display: none; }