/* El diagnóstico gratis de GastroMaps · prototipo (28/10/2026)
   La marca, la de gastromaps.net y el Office: Plus Jakarta Sans, la tinta casi negra, el papel y la cinta de cuatro colores
   (tema-gastromaps). Primero el móvil: a ese ancho llega quien pulsa un anuncio. */
@font-face { font-family: "Jakarta"; src: url("plus-jakarta-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("plus-jakarta-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --tinta: #07080c;
    --tinta-2: #1b1d24;
    --papel: #fbfcfe;
    --linea: #e8eaf0;
    --gris: #5d626d;
    --azul: #1a73e8;
    --azul-suave: #e8f0fe;
    --rojo: #d93025;
    --rojo-suave: #fce8e6;
    --amarillo: #fbbc05;
    --amarillo-suave: #fef7e0;
    --verde: #188038;
    --verde-suave: #e6f4ea;
    --radio: 14px;
    --lado: clamp(16px, 5vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Jakarta", "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.55; color: var(--tinta); background: var(--papel); }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
em { font-style: normal; color: var(--azul); }
a { color: var(--azul); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
.saltar { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 50; }
.saltar:focus { left: 8px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.prototipo { background: var(--amarillo); color: var(--tinta); font-size: .78rem; font-weight: 700; text-align: center; padding: 6px var(--lado); }

/* ── Cabecera y pie ── */
.cabecera { background: var(--tinta); padding: 14px var(--lado); display: flex; align-items: center; justify-content: space-between; }
.cabecera__logo img { display: block; width: 132px; }
.cinta { display: inline-flex; gap: 4px; }
.cinta i { width: 18px; height: 4px; border-radius: 2px; background: var(--azul); }
.cinta i:nth-child(2) { background: #ea4335; }
.cinta i:nth-child(3) { background: var(--amarillo); }
.cinta i:nth-child(4) { background: #34a853; }
.pie { background: var(--tinta); color: #c5c9d3; text-align: center; padding: 36px var(--lado) 48px; font-size: .9rem; }
.pie img { width: 120px; }
.pie nav { display: flex; gap: 18px; justify-content: center; margin-top: 10px; }
.pie a { color: #c5c9d3; text-decoration: none; }

/* ── Botones y piezas ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 1.4em; border: 0; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.boton--principal { background: var(--azul); color: #fff; }
.boton--principal:hover { background: #1765cc; }
.boton--principal:disabled { background: #aab4c3; cursor: not-allowed; }
.boton--linea { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); }
.ceja { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }

/* ── 1 · Portada ── */
.portada { background: var(--tinta); color: #fff; padding: 40px var(--lado) 56px; }
.portada .ceja { color: var(--amarillo); }
.portada h1 { font-size: clamp(2rem, 8vw, 3.4rem); max-width: 16ch; }
.portada em { color: #8ab4f8; }
.portada__aviso { background: #fce8e6; color: #a50e0e; border-radius: 12px; padding: 12px 16px; margin: 0 0 20px; max-width: 46ch; font-weight: 700; }
.portada__entrada { color: #d3d7e0; font-size: 1.08rem; max-width: 46ch; margin: 16px 0 26px; }
.buscador { position: relative; max-width: 560px; display: grid; gap: 12px; }
.buscador__caja { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 0 18px; min-height: 56px; }
.buscador__caja svg { width: 22px; height: 22px; fill: none; stroke: var(--gris); stroke-width: 2; flex: none; }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1.02rem; background: transparent; color: var(--tinta); }
.buscador .boton { width: 100%; }
.sugerencias { list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: var(--radio); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.sugerencias li { padding: 10px 12px; border-radius: 10px; color: var(--tinta); cursor: pointer; }
.sugerencias li[aria-selected="true"], .sugerencias li:hover { background: var(--azul-suave); }
.sugerencias li small { display: block; color: var(--gris); }
.sugerencias li.no { cursor: default; color: var(--gris); }
.sugerencias li.no:hover { background: transparent; }
.portada__puntos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; color: #d3d7e0; }
.portada__puntos li { padding-left: 26px; position: relative; }
.portada__puntos li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: #34a853; }
.portada__puntos b { color: #fff; }

/* ── 2 · Analizando ── */
.analizando { padding: 48px var(--lado) 64px; max-width: 640px; margin: 0 auto; }
.analizando h2 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: 8px; }
.analizando__nota { margin: 0 0 14px; color: var(--gris); }
/* La barra, arriba (29/10/2026): debajo de la lista quedaba fuera de la pantalla del móvil */
.analizando .barra { margin-bottom: 24px; }
.fases { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.fases li { display: flex; gap: 12px; align-items: flex-start; color: var(--gris); }
.fases li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--linea); }
.fases li.en-curso { color: var(--tinta); font-weight: 700; }
.fases li.en-curso::before { border-color: var(--azul); border-right-color: transparent; animation: gira 0.9s linear infinite; }
.fases li.hecha { color: var(--tinta); }
.fases li.hecha::before { border-color: #34a853; background: #34a853 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") center / 14px no-repeat; }
.fases li small { display: block; font-weight: 400; color: var(--gris); }
/* Al acabar cada paso, lo que de verdad ha leído (29/10/2026) */
.fases li small.con-dato { color: #1e7e34; font-weight: 600; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fases li.en-curso::before { animation: none; } }
.barra { height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.barra span { display: block; height: 100%; width: 0; background: var(--azul); transition: width .25s linear; }
@media (prefers-reduced-motion: reduce) { .barra span { transition: none; } }

/* ── 3 · El informe ── */
.informe { position: relative; }
.informe__cuerpo { max-width: 880px; margin: 0 auto; padding: 28px var(--lado) 56px; display: grid; gap: 18px; }
.informe.bloqueado .informe__cuerpo { filter: blur(7px); user-select: none; pointer-events: none; max-height: 1500px; overflow: hidden; }
.informe:not(.bloqueado) .candado { display: none; }
.candado { position: absolute; z-index: 5; top: 24px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 2 * var(--lado))); background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 24px 60px rgba(7, 8, 12, .28); }
.candado h2 { font-size: 1.45rem; }
.candado__perdida { margin: 12px 0 4px; font-size: 1.12rem; }
.candado__perdida b { color: var(--rojo); }
.candado__nota { margin: 0 0 14px; font-size: .82rem; color: var(--gris); }
.candado__reloj { margin: 0 0 16px; padding: 10px 14px; background: var(--amarillo-suave); border-radius: 10px; font-weight: 700; }
.candado__reloj b { font-variant-numeric: tabular-nums; color: var(--rojo); }
.formulario { display: grid; gap: 6px; }
.formulario label { font-size: .9rem; font-weight: 700; }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"] { min-height: 48px; padding: 0 14px; border: 1.5px solid #c9ced8; border-radius: 10px; font: inherit; margin-bottom: 6px; }
.formulario input:focus { border-color: var(--azul); outline: 0; box-shadow: 0 0 0 3px var(--azul-suave); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; font-size: .85rem !important; margin: 4px 0 8px; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.formulario__error { margin: 0 0 6px; color: var(--rojo); font-size: .9rem; font-weight: 700; }
.formulario__pie { margin: 8px 0 0; font-size: .8rem; color: var(--gris); text-align: center; }

/* Las tarjetas del informe */
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: clamp(18px, 4vw, 28px); }
.tarjeta h2 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); margin-bottom: 8px; }
.tarjeta h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.tarjeta > p { margin: 0 0 10px; }
.fuente { margin: 14px 0 0 !important; font-size: .78rem; color: var(--gris); }

/* La cabecera del informe: el restaurante y su nota de salud */
.resumen { display: grid; gap: 18px; align-items: center; }
.resumen__local h1 { font-size: clamp(1.6rem, 6vw, 2.3rem); }
.resumen__local p { margin: 6px 0 0; color: var(--gris); }
.anillo { --v: 0; --c: var(--rojo); width: 148px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--linea) 0); }
.anillo > div { width: 116px; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.anillo b { font-size: 2.4rem; display: block; }
.anillo small { color: var(--gris); font-size: .8rem; }
.estado { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--rojo-suave); color: var(--rojo); }
.desglose { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.desglose li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .92rem; }
.desglose li i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; }
.desglose li i::before { content: ""; display: block; height: 100%; width: var(--p); background: var(--c, var(--rojo)); }
@media (min-width: 720px) { .resumen { grid-template-columns: 1.2fr auto 1fr; } }

/* El impacto estimado */
.impacto { background: var(--tinta); color: #fff; border: 0; }
.impacto .ceja { color: var(--amarillo); }
.impacto__cifras { display: grid; gap: 14px; margin: 10px 0 12px; }
.impacto__cifras div { background: var(--tinta-2); border-radius: 12px; padding: 14px 16px; }
.impacto__cifras b { display: block; font-size: clamp(1.7rem, 7vw, 2.3rem); color: #ff8a80; }
.impacto__cifras span { color: #c5c9d3; font-size: .9rem; }
.impacto details { margin-top: 10px; color: #d3d7e0; font-size: .9rem; }
.impacto summary { cursor: pointer; font-weight: 700; color: #fff; }
.impacto ol { padding-left: 1.2em; }
.impacto .aviso { color: #c5c9d3; font-size: .85rem; margin: 0; }
@media (min-width: 640px) { .impacto__cifras { grid-template-columns: 1fr 1fr; } }

/* Los frenos */
.frenos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: f; }
.frenos li { counter-increment: f; display: grid; grid-template-columns: 34px 1fr; gap: 2px 12px; padding: 14px; border-radius: 12px; background: var(--rojo-suave); }
.frenos li::before { content: counter(f); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--rojo); color: #fff; font-weight: 700; display: grid; place-items: center; }
.frenos li b { font-size: 1rem; }
.frenos li span { font-size: .92rem; color: #3c3f46; }

/* La competencia */
.busquedas { list-style: none; margin: 10px 0 16px; padding: 0; display: grid; gap: 8px; }
.busquedas li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; }
.busquedas li b { white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--rojo-suave); color: var(--rojo); font-size: .88rem; }
.ranking { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ranking th, .ranking td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--linea); }
.ranking th { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.ranking td:nth-child(n+2), .ranking th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.ranking tr.tu td { background: var(--amarillo-suave); font-weight: 700; }

/* Las reseñas */
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.cifras div { padding: 14px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linea); }
.cifras b { display: block; font-size: 1.6rem; }
.cifras div.mal b { color: var(--rojo); }
.cifras span { font-size: .85rem; color: var(--gris); }
@media (min-width: 720px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.reparto { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.reparto li { display: grid; grid-template-columns: 2.2em 1fr 3.5em; gap: 10px; align-items: center; font-size: .88rem; }
.reparto li i { height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.reparto li i::before { content: ""; display: block; height: 100%; width: var(--p); background: var(--amarillo); }
.reparto li span:last-child { text-align: right; color: var(--gris); }
.subir { padding: 14px 16px; border-radius: 12px; background: var(--azul-suave); }
.subir b { color: var(--azul); }

/* Lo que dicen: fortalezas y quejas */
.temas { display: grid; gap: 12px; }
@media (min-width: 720px) { .temas { grid-template-columns: 1fr 1fr; } }
.temas__col { display: grid; gap: 12px; align-content: start; }
.temas__col h3 { margin: 6px 0 0; }
.tema { padding: 14px 16px; border-radius: 12px; border-left: 4px solid var(--verde); background: var(--verde-suave); }
.tema--queja { border-left-color: var(--rojo); background: var(--rojo-suave); }
.tema b { display: block; }
.tema small { color: var(--gris); }
.tema q { display: block; margin-top: 6px; font-style: italic; quotes: "«" "»"; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.pildoras li { padding: 5px 12px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linea); font-size: .88rem; }
.pildoras li b { color: var(--azul); }

/* Las listas de comprobación: ficha y web */
.revision { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.revision li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.revision li::before { content: "✓"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--verde-suave); color: var(--verde); font-weight: 700; }
.revision li.no::before { content: "✕"; background: var(--rojo-suave); color: var(--rojo); }
.revision li small { grid-column: 2; color: var(--gris); }
@media (min-width: 720px) { .revision { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* El plan de acción */
.plan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: p; }
.plan li { counter-increment: p; padding: 16px; border-radius: 12px; border: 1px solid var(--linea); }
.plan li::before { content: "Paso " counter(p); display: block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.plan li b { display: block; margin: 2px 0 4px; }
.etiqueta { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--azul-suave); color: var(--azul); }
.etiqueta--tu { background: var(--verde-suave); color: var(--verde); }
.cierre { background: var(--azul); color: #fff; border: 0; text-align: center; }
.cierre h2 { color: #fff; }
.cierre p { color: #e8f0fe; }
.cierre .boton { background: #fff; color: var(--azul); margin-top: 8px; }

/* La beta (28/10/2026): el campo trampa para robots, fuera de la vista y del lector de pantalla */
.trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.sugerencias li.no { cursor: default; }

/* ── La página legal (29/10/2026) ── */
.legal { max-width: 760px; margin: 0 auto; padding: 40px var(--lado) 64px; line-height: 1.6; }
.legal h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); margin: 4px 0 6px; }
.legal__fecha { color: var(--gris); margin: 0 0 28px; }
.legal h2 { font-size: 1.45rem; margin: 36px 0 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
.legal h3 { font-size: 1.08rem; margin: 22px 0 6px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--azul); }
.legal__datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.legal__datos dt { color: var(--gris); }
.legal__datos dd { margin: 0; }
@media (max-width: 480px) { .legal__datos { grid-template-columns: 1fr; gap: 0; } .legal__datos dd { margin-bottom: 8px; } }
.legal__volver { margin-top: 36px; font-weight: 700; }

/* ── EL INFORME CON MÁS FILO (30/10/2026, el feedback de Eloy) ── */
/* La mini galería: sus fotos de Google, en una tira que se desliza en el móvil */
.galeria { grid-column: 1 / -1; margin: 4px 0 0; }
.galeria__fotos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.galeria__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; scroll-snap-align: start; background: var(--linea); }
.galeria figcaption { margin-top: 6px; font-size: .78rem; color: var(--gris); }
@media (max-width: 719px) { .galeria__fotos { grid-auto-columns: 42%; } }
@media (min-width: 720px) { .galeria__fotos { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; } }
/* Ya sale arriba: lo que aún se le escapa */
.aun { margin: 6px 0 12px; padding-left: 1.2em; color: #ffd7d3; }
.aun li { margin-bottom: 4px; }
/* La competencia que se anuncia: en rojo cuando él no lo hace */
.publicidad--duele { border-color: #f6c7c2; box-shadow: inset 4px 0 0 var(--rojo); }
.publicidad td:nth-child(2), .publicidad td:nth-child(3) { font-size: .88rem; }
/* La web: el veredicto antes de la lista */
.veredicto { margin: 0 0 6px !important; padding: 10px 14px; border-radius: 10px; background: var(--rojo-suave); color: #8c1d18; font-weight: 700; }
/* El plan: lo de GastroMaps, con el cómo difuminado y la llave para contarlo */
.plan__como { display: block; }
.plan__cerrado .plan__como { filter: blur(5px); user-select: none; }
.plan__llave { margin: 14px 0 0 !important; padding: 14px 16px; border-radius: 12px; background: var(--azul-suave); font-weight: 700; }
.plan__llave a { white-space: nowrap; }
/* El cierre: agendar por WhatsApp (lo principal) y bajarse el PDF */
.cierre__botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.cierre .boton--wa { background: #fff; color: var(--azul); }
.cierre .boton--claro { background: transparent; color: #fff; border: 1.5px solid #fff; margin-top: 8px; }
@media (max-width: 480px) { .cierre__botones .boton { width: 100%; } }

/* EL PDF: lo que sale al imprimir o guardar como PDF (30/10/2026): solo el informe, sin la beta, la cabecera ni los botones */
@media print {
    @page { margin: 14mm; }
    body { background: #fff; }
    .prototipo, .saltar, .cabecera .cinta, .candado, .cierre__botones, .pie nav, .plan__llave a { display: none !important; }
    .cabecera, .pie { background: #fff; color: var(--tinta); padding: 0 0 10px; }
    .cabecera__logo img, .pie img { filter: invert(1); }
    .tarjeta { break-inside: avoid; box-shadow: none; }
    .impacto { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
    .impacto .ceja, .impacto summary { color: var(--tinta); }
    .impacto__cifras div { background: #f4f5f8; }
    .impacto__cifras span, .impacto details, .impacto .aviso { color: var(--gris); }
    .aun { color: #8c1d18; }
    .cierre { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
    .cierre h2, .cierre p { color: var(--tinta); }
    .galeria__fotos { overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
    a { color: var(--tinta); }
}