/* barcelonaaerobus.com — estilos
   Pensado primero para el móvil (90 % de las visitas). Azul noche mediterráneo y amarillo de
   señalética para lo que se puede pulsar; contraste AA o mejor en todos los textos. */

@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/public-sans-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/public-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --tinta: #0b2240;
    --tinta-2: #12305a;
    --tinta-3: #24477a;
    --amarillo: #ffc629;
    --amarillo-2: #ffd659;
    --amarillo-suave: #fff4d1;
    --papel: #f3f5f8;
    --blanco: #ffffff;
    --texto: #142030;
    --texto-suave: #4a5869;
    --texto-claro: #c9d4e3;
    --linea: #d8dee7;
    --enlace: #0a5aab;
    --a1: #0a5aab;
    --a2: #b93f0b;
    --verde: #17733d;
    --radio: 12px;
    --sombra: 0 1px 2px rgb(11 34 64 / .06), 0 6px 20px rgb(11 34 64 / .07);
    --letra: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ancho: 1180px;
    --margen: 16px;
    --barra: 0px;
}
@media (min-width: 720px) { :root { --margen: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 1.0625rem/1.6 var(--letra); padding-bottom: var(--barra); }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--enlace); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tinta); border-radius: 3px; }
h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; color: var(--tinta); }
h1 { font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
h3 { font-size: 1.15rem; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
strong { font-weight: 700; }

.envoltorio { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 80; background: var(--amarillo); color: var(--tinta); padding: 10px 14px; font-weight: 700; border-radius: 6px; }
.saltar:focus { top: 8px; }

.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.ico--peq { width: 1em; height: 1em; vertical-align: -.15em; }

/* Franja superior: distribuidor oficial + idioma */
.franja { background: var(--tinta-2); color: var(--texto-claro); font-size: .8rem; line-height: 1.35; }
.franja__dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.franja__aviso { display: flex; gap: 7px; align-items: center; margin: 0; padding: 5px 0; font-weight: 600; }
.franja__aviso .ico { color: var(--amarillo); }
.idiomas { position: relative; flex: none; }
.idiomas summary { list-style: none; display: flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 700; padding: 5px 8px; border-radius: 6px; min-height: 34px; color: var(--blanco); }
.idiomas summary::-webkit-details-marker { display: none; }
.idiomas summary:hover, .idiomas[open] summary { background: rgb(255 255 255 / .1); }
.idiomas__nombre { display: none; }
@media (min-width: 720px) { .idiomas__codigo { display: none; } .idiomas__nombre { display: inline; } }
.idiomas summary { border: 1px solid rgb(255 255 255 / .25); }
.idiomas ul { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; list-style: none; margin: 0; padding: 6px; min-width: 170px; background: var(--blanco); border-radius: var(--radio); box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.idiomas a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: .95rem; }
.idiomas a:hover { background: var(--papel); }
.idiomas a[aria-current] { font-weight: 700; background: var(--amarillo-suave); }

/* Cabecera */
.cabecera { background: var(--tinta); color: var(--blanco); position: relative; z-index: 30; }
.cabecera__dentro { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-right: auto; min-width: 0; }
.marca__signo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--amarillo); color: var(--tinta); border-radius: 10px; }
.marca__signo .ico { width: 24px; height: 24px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.marca__texto strong { font-size: 1.12rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.marca__texto small { color: var(--texto-claro); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera__compra { display: none !important; }
@media (min-width: 1200px) and (max-width: 1399px) { .cabecera__compra span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cabecera__compra { padding-inline: 12px !important; } }
@media (min-width: 1200px) { .cabecera__compra { display: inline-flex !important; order: 3; min-height: 44px; padding: 8px 16px; font-size: 1rem; white-space: nowrap; } }

.menu-boton { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--blanco); border: 1px solid var(--tinta-3); border-radius: 10px; padding: 9px 12px; font: 600 .95rem var(--letra); cursor: pointer; min-height: 44px; }
.navegacion { display: none; }
.navegacion.abierta { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--tinta); border-top: 1px solid var(--tinta-3); padding: 10px var(--margen) 24px; max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: 0 20px 30px rgb(0 0 0 / .3); }
.navegacion ul { list-style: none; margin: 0; padding: 0; }
.navegacion a { color: var(--blanco); text-decoration: none; }
.navegacion__principal { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px !important; }
.navegacion__principal a { display: block; padding: 12px; border-radius: 10px; background: var(--tinta-2); font-weight: 650; }
.navegacion__principal a[aria-current] { background: var(--amarillo); color: var(--tinta); }
.navegacion__extendida { display: grid; gap: 18px; }
.navegacion__extendida p { margin: 0 0 6px; font-weight: 800; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.navegacion__extendida a { display: block; padding: 7px 0; color: #dbe3ee; }

@media (min-width: 1000px) {
    .menu-boton { display: none; }
    .navegacion, .navegacion.abierta { display: block; position: static; background: none; border: 0; padding: 0; box-shadow: none; max-height: none; overflow: visible; }
    .navegacion { min-width: 0; }
    .navegacion__principal { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0 2px; margin: 0 !important; }
    :lang(el) .navegacion__principal a, :lang(ru) .navegacion__principal a { font-size: .86rem; padding-inline: 6px; }
    :lang(el) .marca__texto small, :lang(ru) .marca__texto small { display: none; }
    .navegacion__principal a { background: none; padding: 10px 8px; font-size: .94rem; border-radius: 8px; white-space: nowrap; }
    .navegacion__principal a:hover { background: var(--tinta-2); }
    .navegacion__principal a[aria-current] { background: none; color: var(--amarillo); box-shadow: inset 0 -3px 0 var(--amarillo); border-radius: 0; }
    .navegacion__extendida { display: none; }
    .cabecera__dentro { gap: 14px; }
    .marca { flex: none; }
}

/* Migas de pan */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 14px 0 0; font-size: .84rem; color: var(--texto-suave); }
.migas li + li::before { content: "›"; margin-right: 4px; color: #8693a3; }
.migas a { color: var(--texto-suave); }

/* Estructura de página */
.pagina { padding-top: 18px; padding-bottom: 56px; }
.pagina__cuerpo { min-width: 0; }
.pagina--con-seccion { display: grid; gap: 32px; }
@media (min-width: 1000px) {
    .pagina--con-seccion { grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; }
    .seccion { position: sticky; top: 16px; align-self: start; }
}

.cabecera-pagina { margin-bottom: 24px; max-width: 54rem; }
.antetitulo { display: inline-block; margin-bottom: 10px; font-weight: 800; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); background: var(--amarillo); padding: 3px 9px; border-radius: 5px; }
.entradilla { font-size: 1.16rem; line-height: 1.55; color: #2b3949; max-width: 48rem; }
.seccion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; font-size: .95rem; }
.seccion ul { list-style: none; margin: 0 0 12px; padding: 0; }
.seccion a:not(.boton) { display: block; padding: 8px 10px; border-radius: 7px; color: var(--texto); text-decoration: none; }
.seccion a:not(.boton):hover { background: var(--papel); }
.seccion a[aria-current] { background: var(--tinta); color: var(--blanco) !important; font-weight: 650; }

/* Componentes de contenido */
.prosa { max-width: 46rem; }
.prosa h2 { margin-top: 1.6em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.4em; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1em; }
.prosa li { margin-bottom: .4em; }
.prosa li::marker { color: #7b8899; }
.bloque { margin: 36px 0; }
.bloque > h2 { margin-bottom: 14px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 28px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.datos > div { background: var(--blanco); padding: 13px 16px; box-shadow: 1px 0 0 var(--linea), 0 1px 0 var(--linea); }
.datos dt { font-size: .8rem; color: var(--texto-suave); margin-bottom: 2px; }
.datos dd { margin: 0; font-weight: 750; font-size: 1.08rem; line-height: 1.3; color: var(--tinta); }
.aviso { display: flex; gap: 12px; margin: 0 0 24px; padding: 14px 18px; background: var(--blanco); border: 1px solid var(--linea); border-left: 5px solid var(--tinta); border-radius: var(--radio); max-width: 46rem; }
.aviso > :last-child, .aviso p:last-child { margin-bottom: 0; }
.aviso > * { flex: 1; }
.aviso--alerta { background: var(--amarillo-suave); border-color: #edd48a; border-left-color: #b88700; }
.aviso:has(> :nth-child(2)) { flex-direction: column; gap: 8px; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; margin: 0 0 28px; }
.tarjeta { display: block; position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s; }
.tarjeta > .ico { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--tinta); color: var(--amarillo); margin-bottom: 12px; }
.tarjeta h2, .tarjeta h3 { margin: 0 0 6px; font-size: 1.12rem; }
.tarjeta p { margin: 0; color: var(--texto-suave); font-size: .95rem; }
a.tarjeta:hover { border-color: var(--tinta); transform: translateY(-2px); }
a.tarjeta:hover h2, a.tarjeta:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.tarjetas--compactas { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.tarjetas--compactas .tarjeta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.tarjetas--compactas .tarjeta > .ico { margin: 0; width: 36px; height: 36px; padding: 7px; }
.tarjetas--compactas h2, .tarjetas--compactas h3 { margin: 0; font-size: 1.02rem; }
.tarjeta__dato { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--tinta); background: var(--amarillo-suave); padding: 2px 8px; border-radius: 5px; }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 24px; max-width: 46rem; }
.pasos li { counter-increment: paso; position: relative; padding: 2px 0 18px 50px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; background: var(--amarillo); color: var(--tinta); font-weight: 800; border-radius: 50%; }
.pasos li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--linea); }
.pasos strong { display: block; }

.tabla { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.tabla table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tabla thead th { background: var(--tinta); color: var(--blanco); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.tabla tbody th { font-weight: 700; color: var(--tinta); }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla tbody tr:nth-child(even) { background: #f8f9fb; }
.tabla .destacada { background: var(--amarillo-suave) !important; }
.tabla td.num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }

/* En el móvil, las tablas de comparativa pasan a fichas apiladas */
@media (max-width: 719px) {
    .tabla--fichas { border: 0; background: none; overflow: visible; }
    .tabla--fichas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tabla--fichas table, .tabla--fichas tbody, .tabla--fichas tr, .tabla--fichas th, .tabla--fichas td { display: block; }
    .tabla--fichas tr { background: var(--blanco) !important; border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 10px; padding: 12px 14px; }
    .tabla--fichas tr.destacada { background: var(--amarillo-suave) !important; border-color: #ecd27c; }
    .tabla--fichas th, .tabla--fichas td { border: 0; padding: 2px 0; }
    .tabla--fichas tbody th { font-size: 1.08rem; margin-bottom: 4px; }
    .tabla--fichas td[data-col]::before { content: attr(data-col) ": "; color: var(--texto-suave); font-weight: 400; }
    .tabla--fichas td.num { white-space: normal; }
}

.faq { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 8px; max-width: 46rem; }
.faq summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 700; position: relative; list-style: none; color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--texto-suave); }
.faq[open] summary::after { content: "–"; }
.faq > div { padding: 0 16px 6px; }
.nota { font-size: .86rem; color: var(--texto-suave); max-width: 46rem; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; background: var(--amarillo); color: var(--tinta); border: 2px solid var(--amarillo); border-radius: 10px; font: 800 1.05rem/1.15 var(--letra); text-decoration: none; cursor: pointer; text-align: center; }
.boton:hover { background: var(--amarillo-2); border-color: var(--amarillo-2); text-decoration: none; }
.boton--sec { background: transparent; border-color: var(--tinta); }
.boton--sec:hover { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.boton--claro { color: var(--blanco); border-color: var(--blanco); background: transparent; }
.boton--claro:hover { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.boton--grande { min-height: 58px; font-size: 1.2rem; padding-inline: 24px; }
.boton--ancho { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }

/* Bloque de compra (funciones.php → bloqueCompra) */
.compra { display: grid; gap: 18px; margin: 0 0 32px; padding: 22px 20px; background: var(--tinta); color: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); }
.compra h2 { color: var(--blanco); font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem); margin-bottom: 12px; }
.compra__etiqueta { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; background: rgb(255 198 41 / .15); color: var(--amarillo); font-weight: 800; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.compra__ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #dfe7f1; }
.compra__ventajas li { display: flex; gap: 8px; align-items: baseline; }
.compra__ventajas .ico { color: var(--amarillo); }
.compra__accion { background: var(--tinta-2); border-radius: 12px; padding: 16px; }
.compra__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; }
.compra__precio small { font-size: .9rem; color: var(--texto-claro); }
.compra__precio strong { font-size: 2.1rem; font-weight: 850; color: var(--amarillo); line-height: 1; }
.compra__precio span { flex-basis: 100%; font-size: .85rem; color: var(--texto-claro); }
.compra__nota { margin: 10px 0 0; font-size: .8rem; color: var(--texto-claro); }
@media (min-width: 760px) {
    .compra { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; padding: 28px 30px; }
}

/* Barra fija de compra en el móvil */
.barra-compra { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom)); background: var(--tinta); color: var(--blanco); box-shadow: 0 -6px 20px rgb(0 0 0 / .2); transition: transform .2s; }
.barra-compra p { margin: 0; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.barra-compra p strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-compra p span { font-size: .85rem; color: var(--amarillo); font-weight: 700; }
.barra-compra .boton { flex: none; min-height: 48px; padding: 8px 16px; font-size: 1.02rem; }
.barra-compra--oculta { transform: translateY(110%); }
:root { --barra: 72px; }
@media (min-width: 1200px) { .barra-compra { display: none; } :root { --barra: 0px; } }

/* Insignias de línea */
.linea { display: inline-grid; place-items: center; min-width: 2.4em; padding: 2px 7px; border-radius: 6px; font-weight: 850; font-size: .9em; line-height: 1.3; color: var(--blanco); background: var(--a1); letter-spacing: .02em; }
.linea--a2 { background: var(--a2); }

/* Recorrido de una línea (funciones.php → recorrido) */
.recorridos { display: grid; gap: 14px; margin: 0 0 28px; }
@media (min-width: 720px) { .recorridos { grid-template-columns: 1fr 1fr; } }
.recorrido { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px 6px; --color: var(--a1); }
.recorrido:has(.linea--a2) { --color: var(--a2); }
.recorrido__titulo { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 800; color: var(--tinta); }
.recorrido ol { list-style: none; margin: 0; padding: 0; }
.recorrido__parada { position: relative; padding: 0 0 16px 30px; }
.recorrido__parada::before { content: ""; position: absolute; left: 4px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--blanco); border: 3px solid var(--color); z-index: 1; }
.recorrido__parada:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 12px; bottom: -6px; width: 4px; background: var(--color); }
.recorrido__parada--inicio::before, .recorrido__parada--fin::before { background: var(--color); width: 18px; height: 18px; left: 2px; top: 3px; }
.recorrido__parada strong { display: block; line-height: 1.3; color: var(--tinta); }
.recorrido__parada span { display: block; font-size: .87rem; color: var(--texto-suave); line-height: 1.4; }

/* Franjas de frecuencia (horarios) */
.franjas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.franjas li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--papel); border-radius: 8px; }
.franjas time { font-variant-numeric: tabular-nums; font-weight: 650; }
.franjas b { flex: none; font-weight: 850; color: var(--tinta); background: var(--amarillo-suave); padding: 2px 9px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.franjas .noche b { background: #dfe6f3; }

/* Precios */
.precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 24px; }
.precio { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.precio h2, .precio h3 { margin: 0; font-size: 1.15rem; }
.precio p { margin: 0; color: var(--texto-suave); font-size: .95rem; }
.precio .precio__importe { font-size: 2rem; font-weight: 850; color: var(--tinta); line-height: 1.1; }
.precio--destacado { border: 2px solid var(--amarillo); box-shadow: var(--sombra); }
.precio .boton { margin-top: auto; }

/* Lugares (qué ver) */
.lugares { display: grid; gap: 14px; margin: 0 0 28px; }
@media (min-width: 760px) { .lugares { grid-template-columns: 1fr 1fr; } }
.lugar { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.lugar h2, .lugar h3 { font-size: 1.15rem; display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.lugar h2 .ico, .lugar h3 .ico { color: var(--tinta); background: var(--amarillo); padding: 5px; width: 30px; height: 30px; border-radius: 8px; }
.lugar p { margin-bottom: .7em; }
.lugar p:last-child { margin-bottom: 0; }
.lugar__como { font-size: .92rem; color: var(--texto-suave); border-top: 1px dashed var(--linea); padding-top: 10px; }
.lugar__como strong { color: var(--tinta); }

/* Portada */
.portada__cabecera { position: relative; overflow: hidden; background: var(--tinta); color: var(--blanco); padding: 28px 0 0; }
.portada__cabecera .envoltorio { position: relative; z-index: 1; }
.portada__cabecera h1 { color: var(--blanco); font-size: clamp(2.3rem, 1.5rem + 4vw, 4rem); margin-bottom: .1em; letter-spacing: -.025em; }
.portada__subtitulo { font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); font-weight: 700; color: var(--amarillo); margin: 0 0 14px; }
.portada__lema { max-width: 36rem; font-size: 1.08rem; color: #d7e0eb; }
.portada__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 22px; max-width: 38rem; }
.portada__datos > div { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); border-radius: 12px; padding: 10px 12px; }
.portada__datos dt { font-size: 1.55rem; font-weight: 850; line-height: 1.1; color: var(--blanco); }
.portada__datos dd { margin: 0; font-size: .86rem; color: var(--texto-claro); }
.portada__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.portada__botones .boton { flex: 1 1 200px; }
.portada__ilustracion { display: block; width: 100%; height: auto; margin-top: 26px; }
@media (min-width: 760px) { .portada__datos { grid-template-columns: repeat(4, 1fr); } .portada__botones .boton { flex: 0 1 auto; } }
@media (min-width: 1000px) {
    .portada__cabecera { padding-top: 48px; }
    .portada__cabecera .envoltorio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
    .portada__ilustracion { margin: 0; align-self: end; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
    .portada__hero-texto { padding-bottom: 48px; }
}
.portada__bloque { padding-top: 40px; }
.portada__titulo { display: flex; align-items: center; gap: 10px; }
.portada__titulo .ico { color: var(--tinta); background: var(--amarillo); padding: 5px; width: 1.15em; height: 1.15em; border-radius: 8px; }
.portada__intro { max-width: 46rem; font-size: 1.05rem; color: #2b3949; }
.portada__oscura { background: var(--tinta); color: var(--blanco); padding: 44px 0 40px; margin-top: 44px; }
.portada__oscura h2 { color: var(--blanco); }
.portada__oscura .portada__intro { color: #d7e0eb; }
.portada > :last-child { padding-bottom: 56px; }

.lineas { display: grid; gap: 12px; margin: 0 0 20px; }
@media (min-width: 720px) { .lineas { grid-template-columns: 1fr 1fr; } }
.linea-tarjeta { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--linea); border-left: 6px solid var(--a1); color: var(--texto); text-decoration: none; }
.linea-tarjeta--a2 { border-left-color: var(--a2); }
.linea-tarjeta .linea { font-size: 1.3rem; padding: 6px 10px; }
.linea-tarjeta strong { display: block; font-size: 1.1rem; color: var(--tinta); }
.linea-tarjeta span:not(.linea) { color: var(--texto-suave); font-size: .93rem; }
a.linea-tarjeta:hover strong { text-decoration: underline; }

.pasos-compra { list-style: none; counter-reset: p; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .pasos-compra { grid-template-columns: repeat(3, 1fr); } }
.pasos-compra li { counter-increment: p; background: var(--tinta-2); border-radius: var(--radio); padding: 18px; }
.pasos-compra li > .ico { width: 34px; height: 34px; color: var(--amarillo); margin-bottom: 8px; }
.pasos-compra h3 { color: var(--blanco); margin-bottom: 6px; }
.pasos-compra h3::before { content: counter(p) ". "; color: var(--amarillo); }
.pasos-compra p { margin: 0; color: #d7e0eb; font-size: .97rem; }

/* Pie */
.pie { background: var(--tinta); color: var(--texto-claro); font-size: .92rem; padding: 44px 0 28px; }
.pie a { color: #e6ecf4; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px; }
.pie__columnas li { padding: 4px 0; }
.pie__titulo { margin: 0 0 8px; font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amarillo); }
.pie__aviso { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--tinta-3); max-width: 52rem; color: #b3c0d1; font-size: .86rem; }
.pie__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--tinta-3); }
.pie__idiomas, .pie__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Aviso de cookies: los dos botones con la misma importancia visual (criterio de la AEPD) */
.cookies { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + var(--barra)); max-width: 560px; margin-inline: auto; padding: 16px 18px; background: var(--tinta); color: #e6ecf4; border: 1px solid var(--tinta-3); border-radius: var(--radio); box-shadow: 0 10px 30px rgb(0 0 0 / .3); font-size: .92rem; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 12px; }
.cookies a { color: var(--amarillo); }
.cookies__botones { display: flex; gap: 10px; }
.cookies__botones .boton { flex: 1; min-height: 44px; font-size: 1rem; }
.enlace-boton { background: none; border: 0; padding: 0; color: #e6ecf4; font: inherit; cursor: pointer; }
.enlace-boton:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
    .franja, .cabecera, .pie, .seccion, .migas, .barra-compra, .compra { display: none; }
    body { background: #fff; padding: 0; }
}