/* ============================================================================
FondasChile — sistema de diseño
Anclado en el material real de una fonda: el azul noche del 18, el rojo del
banderín, la cal del muro y el trigo del techo de ramada.
1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
6 Secciones · 7 Mapa · 8 Publicidad · 9 Movimiento · 10 Responsive
============================================================================ */
/* =========================================================
1 · TOKENS
========================================================= */
:root {
/* superficies — retocado sobre el azul y el coral exactos del isotipo */
--tinta: #14245a; /* el navy del logo */
--tinta-2: #223072;
--tinta-3: #33438c;
--cal: #fdfaf6; /* el hueso del logo */
--cal-2: #f3ece0;
--papel: #ffffff;
/* texto */
--texto: #1b1e2c;
--texto-2: #56596b;
--texto-3: #8a8d9d;
--texto-inv: #f7f3ea;
--texto-inv-2: rgba(247,243,234,.72);
--texto-inv-3: rgba(247,243,234,.52);
/* acentos */
--rojo: #ee4144; /* el coral del logo */
--rojo-osc: #c92a34;
--rojo-suave: #fce7e8;
--rojo-claro: #ff9294; /* el coral, aclarado para texto sobre fondo tinta */
--trigo: #e3a534; /* el techo de ramada, el mimbre */
--trigo-suave: #fbeeD3;
--verde: #2e7d5b; /* gratis, confirmado */
--verde-suave: #dff0e7;
--azul: #2f5fa8; /* lista para publicar: aún no confirmada */
--azul-suave: #e2ebf7;
/* bordes */
--borde: #e6ddcd;
--borde-2: #f1e9dc;
--borde-osc: rgba(247,243,234,.14);
/* tipografía */
--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--texto-f: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--dato: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* escala tipográfica — razón 1.25 */
--t-xs: 0.75rem;
--t-sm: 0.875rem;
--t-md: 1rem;
--t-lg: 1.25rem;
--t-xl: 1.563rem;
--t-2xl: 1.953rem;
--t-3xl: 2.441rem;
/* movimiento */
--ease: cubic-bezier(.16,1,.3,1);
--ease-soft: cubic-bezier(.32,.72,0,1);
/* medidas */
--ancho: 1200px;
--gutter: clamp(1rem, 4vw, 2.25rem);
--r-sm: 8px;
--r: 14px;
--r-lg: 22px;
--nav-h: 60px;
--sombra: 0 1px 2px rgba(22,24,43,.05), 0 6px 20px rgba(22,24,43,.07);
--sombra-2: 0 2px 4px rgba(22,24,43,.07), 0 16px 40px rgba(22,24,43,.13);
}
/* =========================================================
2 · RESET
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
-webkit-text-size-adjust: 100%;
overflow-x: clip;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
font-family: var(--texto-f);
font-size: 16px;
line-height: 1.6;
color: var(--texto);
background: var(--cal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
font-family: var(--display);
text-wrap: balance;
line-height: 1.06;
letter-spacing: -0.035em;
font-weight: 800;
}
::selection { background: var(--rojo-suave); color: var(--tinta); }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 4px; }
/* =========================================================
3 · UTILIDADES
========================================================= */
.contenedor {
width: 100%;
max-width: var(--ancho);
margin-inline: auto;
padding-inline: var(--gutter);
}
.solo-lectores {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.salto {
position: fixed; top: -100px; left: 1rem; z-index: 999;
background: var(--rojo); color: #fff;
padding: .7rem 1.2rem; border-radius: var(--r-sm); font-weight: 600;
}
.salto:focus { top: .75rem; }
/* Guirnalda de banderines — el separador de la casa.
Va como SVG incrustado: los triángulos con degradados CSS se rompen en
cuanto cambia el alto, y esto se ve igual en todos los navegadores. */
.guirnalda {
height: 20px;
background-color: var(--tinta);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='20' viewBox='0 0 66 20'%3E%3Crect width='66' height='2' fill='%23fdfaf6' opacity='.5'/%3E%3Cpath d='M0 2h22L11 19z' fill='%230a3d91'/%3E%3Cpath d='M22 2h22L33 19z' fill='%23fdfaf6'/%3E%3Cpath d='M44 2h22L55 19z' fill='%23ee4144'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: 0 0;
}
/* =========================================================
4 · TIPOGRAFÍA
========================================================= */
.eyebrow {
font-family: var(--dato);
font-size: var(--t-xs);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--rojo-claro);
font-weight: 500;
}
.eyebrow-osc { color: var(--rojo); }
.eyebrow-enlaces a { text-decoration: underline; text-decoration-color: rgba(255,146,148,.5); text-underline-offset: 3px; }
.eyebrow-enlaces a:hover { color: var(--texto-inv); text-decoration-color: currentColor; }
.titulo-seccion {
font-size: clamp(1.6rem, 3.6vw, var(--t-3xl));
margin-bottom: .35rem;
}
.bajada-seccion {
color: var(--texto-2);
max-width: 58ch;
font-size: var(--t-md);
}
.cabeza-seccion { margin-bottom: 1.6rem; }
.cabeza-seccion.con-accion {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
/* =========================================================
5 · COMPONENTES
========================================================= */
/* --- barra superior --- */
.barra {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,.88);
color: var(--texto);
border-bottom: 1px solid rgba(20,36,90,.08);
}
@supports (backdrop-filter: blur(14px)) {
.barra { background: rgba(255,255,255,.74); backdrop-filter: blur(16px) saturate(160%); }
}
.barra-fila {
display: flex; align-items: center;
gap: 1.2rem; min-height: var(--nav-h);
}
.marca { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.barra-buscador { position: relative; flex: 1 1 220px; max-width: 300px; }
.selectores-mini { display: flex; gap: .5rem; flex: 0 0 auto; margin-top: 0; justify-content: flex-start; }
.selectores-mini .selector-boton {
color: var(--texto-2); background: var(--papel); border-color: var(--borde);
padding: .5rem .9rem; font-size: .82rem;
}
.selectores-mini .selector-nota { display: none; }
.selectores-mini .selector-boton:hover, .selectores-mini .selector-boton[aria-expanded="true"] { border-color: var(--rojo); background: var(--cal-2); }
@media (max-width: 1360px) { .selectores-mini { display: none; } }
.buscador-mini .buscador-caja {
padding: .3rem .3rem .3rem .9rem;
box-shadow: none; border: 1px solid var(--borde);
}
.buscador-mini input { padding: .5rem 0; font-size: var(--t-sm); }
.barra .menu { margin-left: auto; }
@media (max-width: 1180px) {
.barra-buscador { display: none; }
}
.marca-logo { height: 46px; width: auto; }
.marca-glifo {
width: 30px; height: 30px; flex: 0 0 auto;
display: grid; place-items: center;
background: var(--rojo);
border-radius: 9px;
color: #fff;
}
.marca-txt {
font-family: var(--display);
font-size: 1.15rem; font-weight: 800; letter-spacing: -0.04em;
}
.marca-txt b { color: var(--rojo); font-weight: 800; }
.menu ul { display: flex; align-items: center; gap: clamp(.7rem, 1.6vw, 1.75rem); flex-wrap: nowrap; }
.menu a {
font-size: var(--t-sm); font-weight: 500;
color: var(--texto-2);
padding: .5rem 0;
border-bottom: 2px solid transparent;
display: inline-block;
white-space: nowrap;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.menu a:hover { color: var(--texto); border-bottom-color: var(--rojo); }
.menu a.es-cta, .menu button.es-cta {
color: #fff; background: var(--rojo);
padding: .5rem 1.1rem; border-radius: 999px; border: 0; font-weight: 600;
box-shadow: 0 4px 12px rgba(238,65,68,.28);
}
.menu a.es-cta:hover { background: var(--rojo-osc); color: #fff; }
.menu-boton-guia.es-cta { border-bottom: 0; }
.menu-boton-guia.es-cta:hover, .menu-boton-guia.es-cta[aria-expanded="true"] {
background: var(--rojo-osc); color: #fff; border-bottom-color: transparent;
}
/* --- botones --- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .85rem 1.6rem;
background: var(--rojo); color: #fff;
font-weight: 600; font-size: var(--t-sm);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(238,65,68,.3);
transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--rojo-osc); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(238,65,68,.36); }
.btn:active { transform: translateY(0); }
.btn-fantasma {
background: transparent; color: var(--texto-inv);
border: 1px solid rgba(247,243,234,.34); box-shadow: none;
}
.btn-fantasma:hover { background: rgba(247,243,234,.1); border-color: rgba(247,243,234,.6); box-shadow: none; }
.btn-claro { background: var(--cal); color: var(--tinta); box-shadow: 0 6px 18px rgba(22,24,43,.22); }
.btn-claro:hover { background: #fff; }
.btn-linea {
background: transparent; color: var(--texto);
border: 1px solid var(--borde); box-shadow: none;
padding: .6rem 1.15rem;
}
.btn-linea:hover { background: var(--papel); border-color: var(--rojo); box-shadow: var(--sombra); }
.btn-linea-claro {
background: transparent; color: var(--texto-inv);
border: 1px solid rgba(247,243,234,.34); box-shadow: none;
padding: .6rem 1.15rem;
}
.btn-linea-claro:hover { background: rgba(247,243,234,.1); border-color: rgba(247,243,234,.6); }
/* --- buscador --- */
.buscador { position: relative; max-width: 640px; margin-inline: auto; }
.buscador-pregunta {
font-family: var(--display); font-weight: 800; letter-spacing: -0.02em;
font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--texto-inv);
margin: 0 0 .8rem;
}
.buscador-pregunta em { font-style: normal; color: var(--rojo-claro); }
.buscador-caja {
display: flex; align-items: center; gap: .5rem;
background: var(--papel);
border-radius: 999px;
padding: .4rem .4rem .4rem 1.2rem;
box-shadow: 0 4px 14px rgba(22,24,43,.16), 0 20px 50px rgba(22,24,43,.22);
transition: box-shadow .25s var(--ease);
}
.buscador-caja:focus-within { box-shadow: 0 0 0 4px rgba(227,165,52,.45), 0 20px 50px rgba(22,24,43,.26); }
.buscador-lupa { color: var(--texto-3); flex: 0 0 auto; }
.buscador input {
flex: 1 1 auto; min-width: 0;
font: inherit; font-size: var(--t-md);
border: 0; background: none; color: var(--texto);
padding: .75rem 0;
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus { outline: none; }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador .btn { flex: 0 0 auto; padding: .75rem 1.4rem; }
/* --- resultados en vivo del buscador (typeahead) --- */
.buscador-resultados {
position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 60;
background: var(--papel);
border: 1px solid var(--borde);
border-radius: var(--r);
box-shadow: var(--sombra-2);
overflow: hidden;
max-height: min(60vh, 420px);
overflow-y: auto;
}
.br-grupo-tit {
font-family: var(--dato); font-size: .68rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
padding: .7rem 1rem .3rem;
}
.br-fila {
display: flex; align-items: center; gap: .75rem;
width: 100%; text-align: left;
padding: .65rem 1rem;
border-top: 1px solid var(--borde-2);
}
.br-grupo-tit + .br-fila { border-top: 0; }
.br-fila:hover, .br-fila.es-activa { background: var(--cal-2); }
.br-icono {
width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
display: grid; place-items: center; color: #fff;
}
.br-icono.es-fonda { background: var(--rojo); }
.br-icono.es-comuna { background: var(--tinta-3); }
.br-icono.es-region { background: var(--tinta); }
.br-icono.es-artista { background: var(--trigo); }
.br-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.br-nombre { display: block; font-weight: 700; font-size: var(--t-sm); color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-nombre mark { background: var(--trigo-suave); color: var(--texto); border-radius: 3px; }
.br-sub { display: block; font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-vacio { padding: 1rem; font-size: var(--t-sm); color: var(--texto-3); text-align: center; }
.selectores { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .7rem; }
.selectores select {
font: inherit; font-size: var(--t-sm); font-weight: 600;
color: var(--texto-inv);
background: rgba(247,243,234,.1);
border: 1px solid rgba(247,243,234,.28);
border-radius: 999px;
padding: .55rem 2.1rem .55rem 1rem;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f7f3ea' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .85rem center;
transition: border-color .2s var(--ease), background .2s var(--ease);
cursor: pointer;
}
.selectores select:hover,
.selectores select:focus-visible { border-color: var(--rojo-claro); }
.selectores select option { color: var(--texto); background: var(--papel); }
.selector-personalizado { position: relative; }
.selector-boton {
display: inline-flex; align-items: center; gap: .5rem;
font-size: var(--t-sm); font-weight: 600;
color: var(--texto-inv);
background: rgba(247,243,234,.1);
border: 1px solid rgba(247,243,234,.28);
border-radius: 999px;
padding: .55rem 1.1rem;
transition: border-color .2s var(--ease), background .2s var(--ease);
}
.selector-boton:hover, .selector-boton[aria-expanded="true"] { border-color: var(--rojo-claro); background: rgba(247,243,234,.16); }
.selector-boton svg { transition: transform .2s var(--ease); flex: 0 0 auto; }
.selector-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
.selector-panel {
position: absolute; left: 0; top: calc(100% + .5rem); z-index: 60;
width: max(220px, 100%);
max-height: min(60vh, 380px);
overflow-y: auto;
background: var(--papel);
border: 1px solid var(--borde);
border-radius: var(--r);
box-shadow: var(--sombra-2);
padding: .4rem;
}
.selector-item {
display: flex; align-items: center; gap: .6rem;
width: 100%; text-align: left;
padding: .6rem .7rem;
border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 600; color: var(--texto);
transition: background .15s var(--ease);
}
.selector-item:hover, .selector-item.es-activa { background: var(--cal-2); }
.selector-item-punto {
width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
background: var(--rojo);
}
.selector-item.es-vacio .selector-item-punto { background: var(--borde); }
.selector-item.es-vacio { color: var(--texto-3); font-weight: 500; }
.selector-item-nombre { flex: 1 1 auto; }
.selector-item-cuenta {
font-family: var(--dato); font-size: .72rem; font-weight: 700;
color: var(--rojo); background: var(--rojo-suave);
padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}
.selector-item.es-vacio .selector-item-cuenta { color: var(--texto-3); background: var(--cal-2); }
.selector-nota {
margin-top: .3rem; padding: .7rem .8rem;
border-top: 1px solid var(--borde-2);
font-size: var(--t-xs); color: var(--texto-3); line-height: 1.5;
}
.selector-nota a { color: var(--rojo); font-weight: 700; }
/* --- selector de idioma compacto (🌐) del header, en todas las páginas --- */
.selector-idioma > summary { list-style: none; cursor: pointer; }
.selector-idioma > summary::-webkit-details-marker,
.selector-idioma > summary::marker { display: none; content: ""; }
.selector-idioma .selector-panel { position: absolute; right: 0; left: auto; }
.selector-idioma:not([open]) .selector-panel { display: none; }
.selector-idioma[open] .selector-panel { display: block; }
header.barra .selector-idioma > summary.selector-boton {
color: var(--texto-2); background: var(--papel); border-color: var(--borde);
font-size: .82rem;
}
header.barra .selector-idioma > summary.selector-boton:hover { border-color: var(--rojo); background: var(--cal-2); }
.selector-boton-idioma {
padding: .5rem .65rem !important; width: 34px; height: 34px;
justify-content: center; font-size: 1rem !important; line-height: 1;
}
.selector-idioma-nota {
font-size: .72rem; color: var(--texto-3); padding: .3rem .7rem .5rem;
border-bottom: 1px solid var(--borde-2); margin-bottom: .3rem;
}
.selector-item-nombre small { color: var(--texto-3); font-weight: 500; }
.selector-atajo {
font-size: var(--t-sm); font-weight: 600;
color: var(--texto-inv-2);
border: 1px solid rgba(247,243,234,.28);
border-radius: 999px;
padding: .55rem 1.1rem;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.selector-atajo:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.sugerencias { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.sugerencia {
font-size: var(--t-sm);
padding: .4rem .9rem;
border-radius: 999px;
border: 1px solid rgba(247,243,234,.26);
color: var(--texto-inv-2);
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.sugerencia:hover { background: var(--rojo); color: #fff; border-color: var(--rojo); }
/* --- tarjeta de fonda --- */
.rejilla {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
.ficha {
position: relative;
display: flex; flex-direction: column;
background: var(--papel);
border: 1px solid var(--borde);
border-radius: var(--r);
padding: 1.25rem 1.3rem 1.15rem;
box-shadow: var(--sombra);
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* el buscador del home y los filtros de región ocultan tarjetas poniendo el
atributo hidden — sin esta regla, display:flex de arriba le gana al
display:none del navegador y la tarjeta "oculta" se sigue viendo. */
.ficha[hidden] { display: none; }
.ficha:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); border-color: var(--rojo); }
.ficha::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
border-radius: var(--r) 0 0 var(--r);
background: var(--franja, transparent);
transition: background .3s var(--ease);
}
.ficha.es-destacada { --franja: linear-gradient(180deg, var(--rojo), var(--tinta)); }
.ficha.es-cancelada { --franja: var(--texto-3); opacity: .82; }
.ficha.es-cancelada .ficha-titulo { text-decoration: line-through; text-decoration-thickness: 1px; }
.ficha.es-pipeline { --franja: var(--azul); }
.ficha-foto {
position: relative;
margin: -1.25rem -1.3rem .95rem;
height: 148px;
background-size: cover;
background-position: center;
border-radius: var(--r) var(--r) 0 0;
overflow: hidden;
}
.ficha-foto::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,36,90,.12) 0%, rgba(20,36,90,0) 30%, rgba(20,36,90,.4) 100%);
}
.ficha-foto-logo {
position: absolute; z-index: 1; left: .6rem; bottom: .6rem;
width: 34px; height: 34px; border-radius: 50%;
object-fit: cover; background: #fff;
border: 2px solid #fff; box-shadow: 0 2px 6px rgba(20,24,43,.35);
}
/* la ubicación va sobre la foto, no como texto gris bajo el título — es lo
primero que se lee de la tarjeta, para que a simple vista se sepa de qué
comuna es la fonda sin tener que buscarlo. */
.ficha-ubicacion {
position: absolute; z-index: 1; top: .6rem; left: .6rem; right: .6rem;
display: inline-flex; align-items: center; gap: .32rem; width: fit-content; max-width: 100%;
background: rgba(255,255,255,.95); color: var(--texto);
font-family: var(--dato); font-size: .7rem; font-weight: 600; letter-spacing: .01em;
padding: .32rem .62rem .32rem .5rem; border-radius: 999px;
box-shadow: 0 2px 6px rgba(20,24,43,.25);
text-decoration: none;
}
.ficha-ubicacion svg { flex: 0 0 auto; color: var(--rojo); }
.ficha-ubicacion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ficha-ubicacion { cursor: pointer; }
a.ficha-ubicacion:hover { background: #fff; }
/* las dos fotos de skyline de Santiago son sobre todo cielo (nublado, sin
nada festivo) — "center" (el recorte por defecto) deja la tarjeta como
una franja de nubes. Se baja el encuadre para que se vea el edificio/parque. */
.ficha-foto[style*="cat-santiago1.jpg"] { background-position: center 75%; }
.ficha-foto[style*="cat-santiago2.jpg"] { background-position: center 85%; }
.ficha-alto { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.ficha-titulo { font-size: var(--t-lg); letter-spacing: -0.03em; }
.ficha-titulo a::after { content: ""; position: absolute; inset: 0; }
.ficha-lineup {
font-size: var(--t-xs); font-weight: 700; color: var(--rojo-osc);
margin-top: .5rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* el precio ahora es una fila más de datos, no un precio grande con botón
"Ver fonda" al lado — toda la tarjeta ya es un solo link (el ::after del
título la cubre entera), un CTA aparte era ruido de vitrina de venta. */
.ficha-datos {
margin-top: .95rem; padding-top: .85rem;
border-top: 1px solid var(--borde-2);
display: grid; gap: .4rem;
font-size: var(--t-sm); color: var(--texto-2);
font-variant-numeric: tabular-nums;
}
.ficha-datos li { display: flex; align-items: center; gap: .55rem; }
.ficha-datos svg { color: var(--rojo); flex: 0 0 auto; }
.ficha-datos-precio { font-weight: 700; color: var(--texto); }
.ficha-datos-precio.es-gratis { color: var(--verde); }
.ficha-datos-precio.es-gratis svg { color: var(--verde); }
/* etiquetas de estado */
.marca-estado {
flex: 0 0 auto;
font-family: var(--dato);
font-size: .68rem; font-weight: 500;
letter-spacing: .07em; text-transform: uppercase;
padding: .25rem .6rem; border-radius: 999px;
white-space: nowrap;
}
.marca-estado.es-destacada { background: var(--trigo-suave); color: #8a5c00; }
.marca-estado.es-verificar { background: var(--cal-2); color: var(--texto-2); }
.marca-estado.es-cancelada { background: var(--rojo-suave); color: var(--rojo-osc); }
.marca-estado.es-gratis { background: var(--verde-suave); color: var(--verde); }
.marca-estado.es-pipeline { background: var(--azul-suave); color: var(--azul); }
.verificado {
font-family: var(--dato);
font-size: .68rem; color: var(--texto-3);
margin-top: .7rem;
display: flex; align-items: center; gap: .35rem;
}
.verificado::before {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--verde); flex: 0 0 auto;
}
/* --- cinta horizontal (categorías y destacadas) --- */
.cinta {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 78%;
gap: .85rem;
overflow-x: auto;
overflow-y: visible;
padding: .4rem var(--gutter) .4rem;
margin-inline: calc(var(--gutter) * -1);
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
cursor: grab;
user-select: none;
scroll-behavior: auto;
}
.cinta:active { cursor: grabbing; }
.cinta::-webkit-scrollbar { display: none; }
/* --- categorías: cuadrícula compacta de chips, sin scroll lateral --- */
.cat-grid {
display: flex; flex-wrap: wrap;
gap: .6rem;
}
.cat-chip {
display: inline-flex; align-items: center; gap: .7rem;
background: var(--papel);
border: 1px solid var(--borde);
border-radius: 999px;
padding: .45rem 1.05rem .45rem .45rem;
box-shadow: var(--sombra);
transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-chip:hover { border-color: var(--rojo); transform: translateY(-2px); box-shadow: var(--sombra-2); }
.cat-chip-icono {
width: 36px; height: 36px; flex: 0 0 auto;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ic, var(--tinta));
color: #fff;
}
.cat-chip-txt { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; font-size: var(--t-sm); }
.cat-chip-txt small { font-family: var(--dato); font-size: .72rem; font-weight: 500; color: var(--texto-3); letter-spacing: .02em; }
/* --- filtros --- */
.filtros {
display: flex; gap: .5rem;
overflow-x: auto;
padding-bottom: .5rem;
margin-bottom: 1.2rem;
scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }
.filtro {
flex: 0 0 auto;
font-size: var(--t-sm); font-weight: 500;
padding: .5rem 1.05rem;
border-radius: 999px;
border: 1px solid var(--borde);
background: var(--papel);
color: var(--texto-2);
white-space: nowrap;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filtro:hover { border-color: var(--rojo); color: var(--texto); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--texto-inv); border-color: var(--tinta); }
.filtro b { font-variant-numeric: tabular-nums; font-weight: 600; opacity: .55; margin-left: .2rem; }
.filtros-extra { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 1.2rem; }
.filtros-extra-grupo { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.filtros-extra-label { font-size: var(--t-xs); font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-right: .1rem; }
.filtro-sec { padding: .35rem .8rem; font-size: var(--t-xs); }
/* --- rango de precio: dos superpuestos, solo el
thumb de cada uno recibe clics, para poder arrastrar mínimo y máximo
por separado sobre la misma pista --- */
.filtro-precio-grupo { gap: .7rem; }
.rango-precio { position: relative; width: 200px; height: 1.6rem; flex: 0 0 auto; }
.rango-precio-pista {
position: absolute; top: 50%; left: 2px; right: 2px; height: 4px;
background: var(--borde); border-radius: 999px; transform: translateY(-50%);
}
.rango-precio-relleno {
position: absolute; top: 0; height: 100%; background: var(--tinta); border-radius: 999px;
}
.rango-precio input[type="range"] {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;
-webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.rango-precio input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; background: transparent; height: 100%; }
.rango-precio input[type="range"]::-moz-range-track { background: transparent; height: 100%; border: none; }
.rango-precio input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; pointer-events: auto;
width: 16px; height: 16px; margin-top: 6px;
border-radius: 50%; background: var(--tinta); border: 2px solid var(--papel);
box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: grab;
}
.rango-precio input[type="range"]::-moz-range-thumb {
pointer-events: auto; width: 14px; height: 14px;
border-radius: 50%; background: var(--tinta); border: 2px solid var(--papel);
box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: grab;
}
.rango-precio-valor { font-size: var(--t-xs); color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* --- chips de filtros activos: resumen de lo que hay aplicado, cada uno
con su propia "x" para quitarlo, más un "limpiar todo" --- */
.filtros-activos {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
margin-bottom: 1rem;
}
/* mismo motivo que .pantalla-completa-contador[hidden]: sin esta línea el
atributo `hidden` no lo oculta, porque este componente define `display` */
.filtros-activos[hidden] { display: none; }
.chip-activo {
display: inline-flex; align-items: center; gap: .4rem;
font-size: var(--t-xs); font-weight: 600; color: var(--tinta);
background: var(--rojo-suave); border-radius: 999px;
padding: .3rem .5rem .3rem .8rem;
}
.chip-activo button {
display: grid; place-items: center;
width: 1.1rem; height: 1.1rem; border-radius: 50%;
background: rgba(0,0,0,.08); color: inherit; line-height: 1;
font-size: .85rem;
}
.chip-activo button:hover { background: var(--rojo); color: #fff; }
.chip-limpiar-todo {
font-size: var(--t-xs); font-weight: 700; color: var(--texto-3);
text-decoration: underline; text-underline-offset: .15em;
}
.chip-limpiar-todo:hover { color: var(--rojo); }
/* --- barra de resultados: cantidad a la izquierda, orden a la derecha --- */
.resultado-barra {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: .6rem 1rem; margin-bottom: 1rem;
}
.resultado-barra .resultado-nota { margin-bottom: 0; }
.orden-selector { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); color: var(--texto-2); }
.orden-selector select {
font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--texto);
padding: .4rem 1.8rem .4rem .7rem; border-radius: 999px; border: 1px solid var(--borde);
background: var(--papel) url('data:image/svg+xml;utf8,') no-repeat right .55rem center;
appearance: none; -webkit-appearance: none; cursor: pointer;
}
.orden-selector select:hover { border-color: var(--rojo); }
/* --- "cerca de mí": geolocalización opcional sobre la lista --- */
.cerca-de-mi-fila { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.btn-cerca-de-mi {
display: inline-flex; align-items: center; gap: .5rem;
font-size: var(--t-sm); font-weight: 700;
padding: .5rem 1.05rem .5rem .85rem;
border-radius: 999px;
border: 1px solid var(--borde);
background: var(--papel);
color: var(--tinta);
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-cerca-de-mi:hover { border-color: var(--rojo); color: var(--rojo); }
.btn-cerca-de-mi[aria-pressed="true"] { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.btn-cerca-de-mi[disabled] { opacity: .6; cursor: default; }
.cerca-de-mi-estado { font-size: var(--t-xs); color: var(--texto-3); }
.ficha-distancia {
display: inline-flex; align-items: center; gap: .3rem;
font-size: var(--t-xs); font-weight: 700; color: var(--rojo-osc);
background: var(--rojo-suave); border-radius: 999px;
padding: .25rem .6rem; margin-top: .5rem;
}
.resultado-nota {
font-size: var(--t-sm); color: var(--texto-2);
margin-bottom: 1rem;
font-variant-numeric: tabular-nums;
}
.sin-resultados {
grid-column: 1 / -1;
text-align: center;
padding: 3rem 1.5rem;
border: 1px dashed var(--borde);
border-radius: var(--r);
background: var(--papel);
}
.sin-resultados h3 { font-size: var(--t-lg); margin-bottom: .4rem; }
.sin-resultados p { color: var(--texto-2); max-width: 42ch; margin: 0 auto 1.2rem; font-size: var(--t-sm); }
/* --- regiones --- */
.regiones { display: grid; gap: .7rem; }
.region {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
background: var(--papel);
border: 1px solid var(--borde);
border-radius: var(--r-sm);
padding: .85rem 1.1rem;
transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.region:hover { border-color: var(--rojo); transform: translateX(4px); }
.region-nom { font-family: var(--display); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.02em; }
.region-n { font-family: var(--dato); font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }
.region.es-vacia { opacity: .55; }
.region.es-vacia:hover { transform: none; border-color: var(--borde); }
.region.es-actual { background: var(--tinta); border-color: var(--tinta); cursor: default; }
.region.es-actual .region-nom { color: #fff; }
.region.es-actual .region-n { color: var(--trigo); font-weight: 700; }
.region.es-actual:hover { transform: none; }
/* --- guía --- */
.guias { display: grid; gap: .8rem; }
.guia {
background: var(--papel);
border: 1px solid var(--borde);
border-radius: var(--r);
padding: 1.15rem 1.2rem;
transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.guia:hover { border-color: var(--rojo); transform: translateY(-3px); box-shadow: var(--sombra); }
.guia-tema { font-family: var(--dato); font-size: var(--t-xs); color: var(--rojo); letter-spacing: .1em; text-transform: uppercase; }
.guia h3 { font-size: var(--t-md); margin: .4rem 0 .3rem; letter-spacing: -0.02em; }
.guia p { font-size: var(--t-sm); color: var(--texto-2); }
/* =========================================================
6 · SECCIONES
========================================================= */
.hero {
position: relative;
background: var(--tinta);
color: var(--texto-inv);
padding: clamp(2.6rem, 8vw, 5rem) 0 clamp(2.4rem, 6vw, 3.6rem);
overflow: hidden;
}
.hero-foto {
position: absolute; inset: 0; z-index: 0;
background-image:
linear-gradient(180deg, rgba(15,26,66,.90) 0%, rgba(15,26,66,.80) 45%, rgba(15,26,66,.96) 100%),
url("assets/img/hero.jpg?v=20260830");
background-size: cover;
background-position: center 58%;
}
.hero-luz {
position: absolute; inset: -50% -20% -30% -20%; z-index: 1;
background:
radial-gradient(36% 42% at 18% 26%, rgba(238,65,68,.5), transparent 70%),
radial-gradient(32% 38% at 84% 16%, rgba(227,165,52,.42), transparent 72%),
radial-gradient(60% 55% at 50% 96%, rgba(51,67,140,.85), transparent 76%);
filter: blur(70px);
pointer-events: none;
animation: deriva 30s ease-in-out infinite alternate;
}
.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero h1 {
font-size: clamp(2rem, 5.6vw, 3.6rem);
letter-spacing: -0.03em;
max-width: 26ch;
margin: .7rem auto 0;
}
.hero h1 em { font-style: normal; color: var(--rojo-claro); }
.hero-bajada {
font-size: clamp(1rem, 1.9vw, 1.15rem);
color: var(--texto-inv-2);
max-width: 54ch;
margin: 1rem auto 1.9rem;
}
.hero-cifras {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 1.2rem clamp(1.5rem, 4vw, 3rem);
margin-top: 2.4rem; padding-top: 1.5rem;
border-top: 1px solid var(--borde-osc);
}
.cifra { text-align: left; }
.cifra dt {
font-family: var(--dato); font-size: var(--t-xs);
letter-spacing: .13em; text-transform: uppercase;
color: var(--texto-inv-3);
}
.cifra dd {
font-family: var(--display); font-weight: 800;
font-size: clamp(1.5rem, 3.4vw, 2.1rem);
color: var(--rojo-claro);
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.seccion { padding: clamp(2.4rem, 6vw, 4rem) 0; }
.seccion-cal { background: var(--cal-2); }
.seccion-osc { background: var(--tinta); color: var(--texto-inv); }
.seccion-osc .bajada-seccion { color: var(--texto-inv-2); }
.franja-cta {
background: linear-gradient(115deg, var(--tinta) 0%, var(--tinta-3) 100%);
color: var(--texto-inv);
padding: clamp(2.2rem, 5vw, 3.2rem) 0;
}
.franja-inner { display: grid; gap: 1.4rem; align-items: center; }
.franja-botones { display: flex; flex-wrap: wrap; gap: .7rem; }
.franja-inner h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.franja-inner p { color: var(--texto-inv-2); margin-top: .5rem; max-width: 50ch; }
.pie {
background: var(--tinta); color: var(--texto-inv-2);
padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.5rem;
}
.pie-grid { display: grid; gap: 2rem; }
.pie-logo { height: 40px; width: auto; }
.pie-tit {
font-family: var(--dato); font-size: var(--t-xs);
letter-spacing: .13em; text-transform: uppercase;
color: var(--rojo-claro); margin-bottom: .85rem;
}
.pie-lista { display: grid; gap: .5rem; font-size: var(--t-sm); }
.pie-lista a:hover { color: var(--texto-inv); }
.pie-disclaimer {
margin-top: 2.2rem;
padding: .9rem 1.1rem;
background: rgba(247,243,234,.06);
border: 1px solid rgba(247,243,234,.16);
border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 600;
color: var(--texto-inv-2);
max-width: 68ch;
}
.pie-legal {
margin-top: 2.4rem; padding-top: 1.2rem;
border-top: 1px solid var(--borde-osc);
font-size: var(--t-xs); color: var(--texto-inv-3);
display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
/* --- tarjeta de aliado en el pie (Gisfraz) --- */
.pie-gisfraz {
margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.5rem;
padding: 1.1rem 1.3rem; background: rgba(247,243,234,.06); border: 1px solid rgba(247,243,234,.16);
border-radius: var(--r-sm);
}
.pie-gisfraz-icono {
flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 999px;
background: var(--rojo); display: grid; place-items: center;
}
.pie-gisfraz-txt { flex: 1 1 260px; min-width: 0; }
.pie-gisfraz-kick {
display: block; font-family: var(--dato); font-size: .62rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--rojo-claro); margin-bottom: .2rem;
}
.pie-gisfraz-tit { font-weight: 700; font-size: var(--t-sm); color: var(--texto-inv); }
.pie-gisfraz-sub { font-size: var(--t-xs); color: var(--texto-inv-3); margin-top: .15rem; }
.pie-gisfraz .btn-linea-inv {
flex: 0 0 auto; color: #fff; background: var(--rojo); font-weight: 600; font-size: var(--t-sm);
padding: .5rem 1.1rem; border-radius: 999px; white-space: nowrap;
}
.pie-gisfraz .btn-linea-inv:hover { background: var(--rojo-osc); }
/* =========================================================
7 · MAPA — la firma de la casa (Leaflet + OpenStreetMap)
========================================================= */
.mapa-regiones {
display: flex; flex-wrap: wrap; gap: .5rem;
padding-bottom: 1.3rem;
}
.mapa-region-btn {
font-size: var(--t-sm); font-weight: 600;
padding: .5rem 1.05rem; border-radius: 999px;
border: 1px solid rgba(247,243,234,.24);
color: var(--texto-inv-2);
white-space: nowrap;
transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mapa-region-btn:hover { border-color: var(--rojo-claro); color: var(--texto-inv); }
.mapa-region-btn.es-activa { background: var(--rojo); border-color: var(--rojo); color: #fff; }
/* el mapa ocupa todo el ancho del viewport, no el contenedor */
.mapa-full {
width: 100%;
height: clamp(420px, 62vh, 640px);
background: var(--tinta-2);
}
.mapa-full .leaflet-container { width: 100%; height: 100%; font-family: var(--texto-f); background: var(--tinta-2); }
.mapa-full .leaflet-control-attribution {
background: rgba(20,36,90,.72); color: var(--texto-inv-3); font-size: 10px;
}
.mapa-full .leaflet-control-attribution a { color: var(--texto-inv-2); }
.mapa-full .leaflet-control-zoom a {
background: var(--papel); color: var(--texto); border-color: var(--borde) !important;
}
.mapa-full .leaflet-control-zoom a:hover { background: var(--cal); }
/* marcador propio: un punto redondo con anillo, sin depender de las imágenes por defecto de Leaflet */
.mapa-pin span {
display: block; width: 16px; height: 16px; border-radius: 50%;
border: 2.5px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mapa-popup { font-family: var(--texto-f); min-width: 200px; }
.mapa-popup strong { display: block; font-family: var(--display); font-size: var(--t-md); font-weight: 800; letter-spacing: -0.02em; color: var(--texto); }
.mapa-popup p { font-size: var(--t-sm); color: var(--texto-2); margin-top: .3rem; }
.mapa-popup a {
display: inline-flex; align-items: center; gap: .3rem;
margin-top: .6rem; font-size: var(--t-sm); font-weight: 700; color: var(--rojo);
}
.mapa-popup-tag {
display: inline-block; margin-top: .3rem;
font-family: var(--dato); font-size: .68rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase;
padding: .15rem .5rem; border-radius: 999px;
}
.mapa-popup-tag.es-cancel { background: var(--borde); color: var(--texto-2); }
.mapa-popup-tag.es-ver { background: var(--trigo-suave); color: #7a5a10; }
.leaflet-popup-content-wrapper { border-radius: var(--r-sm); }
.leaflet-popup-content { margin: .8rem .9rem; }
.mapa-nota { font-family: var(--dato); font-size: .7rem; color: var(--texto-inv-3); text-align: center; }
/* =========================================================
8 · PUBLICIDAD — alturas reservadas para no mover el layout
========================================================= */
.ad {
display: grid; place-items: center;
background: var(--cal-2);
border: 1px dashed var(--borde);
border-radius: var(--r-sm);
color: var(--texto-3);
overflow: hidden;
margin-inline: auto;
width: 100%;
}
.ad > .ad-marca {
font-family: var(--dato); font-size: .62rem;
letter-spacing: .18em; text-transform: uppercase;
}
.ad-billboard { max-width: 970px; min-height: 100px; }
.ad-infeed { min-height: 250px; }
.ad-lateral { min-height: 600px; max-width: 300px; }
.ad-pie { max-width: 728px; min-height: 90px; }
.ad-envoltura { padding: 1.6rem 0; }
.seccion-osc .ad { background: rgba(247,243,234,.05); border-color: var(--borde-osc); color: var(--texto-inv-3); }
@media (min-width: 728px) { .ad-billboard { min-height: 250px; } }
/* la ranura in-feed ocupa una celda de la rejilla */
.rejilla > .ad-infeed { grid-column: 1 / -1; }
@media (min-width: 960px) { .rejilla > .ad-infeed { grid-column: auto; } }
.ad-multiplex-tit {
font-family: var(--dato); font-size: var(--t-xs); letter-spacing: .1em;
text-transform: uppercase; color: var(--texto-3); margin-bottom: .8rem;
}
.ad-multiplex { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.ad-multiplex .ad { min-height: 140px; }
@media (min-width: 640px) { .ad-multiplex { grid-template-columns: repeat(4, 1fr); } }
/* ancla fija — solo celular, se puede cerrar por el resto de la sesión */
.ad-ancla {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: flex; align-items: center; justify-content: center; gap: .6rem;
height: 54px;
background: var(--papel);
border-top: 1px solid var(--borde);
box-shadow: 0 -4px 16px rgba(22,24,43,.12);
color: var(--texto-3);
}
.ad-ancla .ad-marca { font-family: var(--dato); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.ad-ancla-cerrar {
position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; display: grid; place-items: center;
border-radius: 50%; color: var(--texto-3); font-size: 1.1rem; line-height: 1;
}
.ad-ancla-cerrar:hover { background: var(--cal-2); color: var(--texto); }
.ad-ancla[hidden] { display: none; }
@media (min-width: 728px) { .ad-ancla { display: none; } }
body.tiene-ancla .pie { padding-bottom: 54px; }
/* =========================================================
9 · MOVIMIENTO
========================================================= */
@keyframes deriva {
from { transform: translate3d(-2%, 0, 0) scale(1); }
to { transform: translate3d(3%, -4%, 0) scale(1.1); }
}
@keyframes latido {
0%, 100% { transform: scale(1); opacity: .18; }
50% { transform: scale(1.9); opacity: .05; }
}
/* Aparición al entrar en pantalla — nativa donde se puede */
@media (prefers-reduced-motion: no-preference) {
@supports ((animation-timeline: view()) and (animation-range: entry)) {
@keyframes surgir {
from { opacity: 0; transform: translateY(26px); }
}
[data-surgir] {
animation: surgir .8s var(--ease) backwards;
animation-timeline: view();
animation-range: entry 0% cover 26%;
}
}
}
/* Reserva para el respaldo por JavaScript (navegadores sin timeline de scroll) */
.js-surgir[data-surgir] { opacity: 0; transform: translateY(26px); }
.js-surgir [data-surgir].es-visible {
opacity: 1; transform: none;
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* Carrusel: las tarjetas crecen al centrarse */
@media (prefers-reduced-motion: no-preference) {
@supports ((animation-timeline: view()) and (animation-range: entry)) {
@keyframes acercar {
0% { opacity: .45; scale: .93; }
50% { opacity: 1; scale: 1; }
100% { opacity: .45; scale: .93; }
}
.cinta-viva > * {
animation: acercar auto linear both;
animation-timeline: view(inline);
}
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-luz { animation: none; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* =========================================================
11 · FICHA DE FONDA Y LANDINGS (plantillas reusables)
========================================================= */
.migas {
display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
font-size: var(--t-xs); color: var(--texto-3);
padding: 1rem 0 0;
}
.migas a:hover { color: var(--rojo); text-decoration: underline; }
.migas [aria-current="page"] { color: var(--texto); font-weight: 600; }
.ficha-hero { position: relative; color: var(--texto-inv); overflow: hidden; }
.ficha-hero-foto { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ficha-hero-inner { position: relative; padding: 2.2rem 0 2.6rem; }
.sellos-ficha { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.sello {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .72rem; font-weight: 800; letter-spacing: .02em;
padding: .3rem .7rem; border-radius: 999px;
}
.sello.es-ok { background: var(--verde); color: #fff; }
.sello.es-gran { background: rgba(247,243,234,.16); color: var(--texto-inv); border: 1px solid rgba(247,243,234,.3); }
.sello.es-pipeline { background: var(--azul-suave); color: var(--azul); }
.ficha-hero-social { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.ficha-hero-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(247,243,234,.5); }
.ficha-hero-ig { font-size: var(--t-sm); font-weight: 600; color: var(--texto-inv-2); text-decoration: none; }
.ficha-hero-ig:hover { color: var(--texto-inv); text-decoration: underline; }
.ficha-hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); margin-top: .3rem; }
.ficha-hero-rating {
display: flex; align-items: center; gap: .5rem;
font-size: var(--t-sm); color: var(--texto-inv-2); margin-top: .7rem;
}
.estrellas { color: var(--trigo); font-size: 1rem; letter-spacing: .1em; }
.ficha-hero-datos {
display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem;
margin-top: 1.4rem; padding-top: 1.2rem;
border-top: 1px solid rgba(247,243,234,.18);
}
.ficha-hero-datos dt { font-family: var(--dato); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-inv-3); }
.ficha-hero-datos dd { font-family: var(--display); font-weight: 800; font-size: var(--t-lg); margin-top: .2rem; }
.ficha-hero-botones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
/* botones de acción con salida (mapa / ticketera): son el flujo que puede llevar publicidad */
.btn-mapa {
display: inline-flex; align-items: center; gap: .5rem;
padding: .8rem 1.4rem; border-radius: 999px;
background: var(--papel); color: var(--tinta);
font-weight: 700; font-size: var(--t-sm);
box-shadow: 0 6px 18px rgba(0,0,0,.2);
transition: transform .2s var(--ease), background .2s var(--ease);
}
.btn-mapa:hover { transform: translateY(-2px); background: #fff; }
.btn-mapa.es-entradas { background: var(--rojo); color: #fff; }
.btn-mapa.es-entradas:hover { background: var(--rojo-osc); }
.btn-mapa.es-gratis { background: var(--verde); color: #fff; }
.btn-mapa.es-sin-dato {
background: transparent; color: var(--texto-inv-3);
border: 1px dashed rgba(247,243,234,.3); box-shadow: none;
cursor: default; pointer-events: none;
}
.ficha-cuerpo-grid {
display: grid; gap: 2.4rem;
padding: 2.4rem 0 clamp(2.4rem, 5vw, 3.6rem);
}
.bloque-ficha { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--borde); }
.bloque-ficha:last-child { border-bottom: 0; margin-bottom: 0; }
.titulo-bloque { font-size: var(--t-xl); margin-bottom: .9rem; }
.bloque-texto { color: var(--texto-2); max-width: 68ch; }
.subtitulo-bloque { font-size: var(--t-md); margin: 1.3rem 0 .6rem; }
.subtitulo-bloque:first-of-type { margin-top: 1.1rem; }
.bloque-nota-aviso {
margin-top: 1rem; padding: .8rem 1rem;
background: var(--rojo-suave); border-radius: var(--r-sm);
font-size: var(--t-sm); color: var(--rojo-osc);
}
.ficha-flyer {
width: 100%; max-width: 340px; margin: 0 auto 1.2rem;
border-radius: var(--r); box-shadow: var(--sombra-2);
border: 1px solid var(--borde);
}
/* --- preguntas frecuentes --- */
.faq-lista { display: grid; gap: .6rem; }
.faq-item {
border: 1px solid var(--borde); border-radius: var(--r-sm);
padding: .9rem 1rem;
}
.faq-item summary {
cursor: pointer; font-weight: 700; font-size: var(--t-sm);
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--rojo); font-weight: 800; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: .6rem; color: var(--texto-2); font-size: var(--t-sm); }
/* --- botón grande "cómo llegar" dentro del cuerpo --- */
.btn-mapa-grande {
display: flex; align-items: center; justify-content: center; gap: .6rem;
margin-top: 1rem; padding: 1.1rem 1.5rem;
background: var(--tinta); color: #fff;
border-radius: var(--r); font-weight: 800; font-size: var(--t-md);
box-shadow: 0 8px 22px rgba(20,36,90,.28);
transition: transform .2s var(--ease), background .2s var(--ease);
}
.btn-mapa-grande:hover { background: var(--tinta-2); transform: translateY(-2px); }
.dato-caja-botones { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borde-2); }
.dato-caja-botones .btn-mapa { justify-content: center; width: 100%; padding: .65rem 1rem; font-size: var(--t-xs); box-shadow: none; border: 1px solid var(--borde); color: var(--texto); background: var(--papel); }
.dato-caja-botones .btn-mapa.es-entradas { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.lineup { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.lineup li {
font-weight: 700; font-size: var(--t-sm);
background: var(--cal-2); border-radius: 999px;
padding: .5rem 1rem;
}
.lineup li a { display: inline-flex; align-items: center; gap: .5rem; }
.lineup li a:hover { text-decoration: underline; }
.avatar-artista {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; width: 22px; height: 22px; border-radius: 999px;
color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: .02em;
line-height: 1;
}
.ficha-flyer-nota { font-size: var(--t-xs); color: var(--texto-3); }
.ficha-flyer-nota a { color: var(--rojo); font-weight: 600; }
.tabla-horarios { width: 100%; margin-top: 1.1rem; border-collapse: collapse; font-size: var(--t-sm); }
.tabla-horarios th, .tabla-horarios td { text-align: left; padding: .6rem 0; border-top: 1px solid var(--borde-2); }
.tabla-horarios th { font-weight: 600; color: var(--texto); }
.tabla-horarios td { font-family: var(--dato); color: var(--texto-2); text-align: right; }
.mapa-ficha-caja { height: 320px; border-radius: var(--r); overflow: hidden; margin-top: 1.1rem; background: var(--cal-2); }
.mapa-ficha-caja .leaflet-container { width: 100%; height: 100%; font-family: var(--texto-f); }
.proximamente {
background: var(--cal-2); border: 1px dashed var(--borde);
border-radius: var(--r); padding: 1.3rem 1.4rem;
}
.proximamente p { color: var(--texto-2); font-size: var(--t-sm); margin-bottom: .9rem; max-width: 60ch; }
.dato-caja { background: var(--cal-2); border-radius: var(--r); padding: 1.3rem 1.4rem; margin-bottom: 1.4rem; }
.dato-caja-tit { font-family: var(--dato); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); margin-bottom: .9rem; }
.dato-lista { display: grid; gap: .7rem; }
.dato-lista dt { font-size: var(--t-xs); color: var(--texto-3); }
.dato-lista dd { font-weight: 700; font-size: var(--t-sm); }
.etiquetas-ficha { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--borde-2); }
.etiqueta-chip { font-size: var(--t-xs); font-weight: 600; color: var(--texto-2); background: var(--papel); border: 1px solid var(--borde); border-radius: 999px; padding: .3rem .7rem; }
.etiquetas-ficha-hero { border-top: 0; padding-top: 0; margin-top: .8rem; margin-bottom: 0; }
/* --- comida, bebida y música dentro de la ficha --- */
.comida-musica-fila { margin-top: 1rem; }
.comida-musica-fila:first-child { margin-top: 0; }
.comida-musica-etq { font-size: var(--t-xs); font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.comida-musica-fila .etiquetas-ficha { border-top: 0; padding-top: 0; margin-top: 0; }
/* --- lista "cómo llegar": metro / micros / accesos --- */
.lista-como-llegar { display: grid; gap: .4rem; margin: 1rem 0; font-size: var(--t-sm); color: var(--texto-2); }
.lista-como-llegar strong { color: var(--texto); }
/* --- info práctica (niños, mascotas, estacionamiento) en dos columnas --- */
.dato-lista-ancha { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
/* --- filtros de landing de región --- */
.filtros-region {
display: flex; flex-wrap: wrap; gap: .6rem;
padding: 1.2rem 0; margin-bottom: 1.2rem;
border-top: 1px solid var(--borde-2); border-bottom: 1px solid var(--borde-2);
}
.filtros-region select, .filtros-region button {
font-size: var(--t-sm); font-weight: 600;
padding: .55rem 1rem; border-radius: 999px;
border: 1px solid var(--borde); background: var(--papel); color: var(--texto);
}
.filtros-region button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
@media (min-width: 900px) {
.ficha-cuerpo-grid { grid-template-columns: 1fr 300px; align-items: start; }
.ficha-cuerpo-lateral { position: sticky; top: calc(var(--nav-h) + 16px); }
}
/* --- navegación al pie de una ficha/landing --- */
.sigue-explorando {
display: flex; flex-wrap: wrap; gap: .6rem;
padding: 1.6rem 0;
}
.sigue-explorando a {
font-size: var(--t-sm); font-weight: 700; color: var(--texto);
border: 1px solid var(--borde); border-radius: 999px;
padding: .6rem 1.1rem;
transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.sigue-explorando a:hover { border-color: var(--rojo); color: var(--rojo); background: var(--rojo-suave); }
/* --- contacto --- */
.contacto-grid { display: grid; gap: 2.4rem; align-items: start; }
.form-contacto { display: grid; gap: .3rem; margin-top: 1.6rem; max-width: 46rem; }
.form-contacto label { font-size: var(--t-sm); font-weight: 700; margin-top: .8rem; }
.form-contacto input, .form-contacto select, .form-contacto textarea {
font: inherit; font-size: var(--t-md);
padding: .8rem 1rem; border-radius: var(--r-sm);
border: 1px solid var(--borde); background: var(--papel); color: var(--texto);
resize: vertical;
}
.form-contacto input:focus, .form-contacto select:focus, .form-contacto textarea:focus {
outline: none; border-color: var(--rojo); box-shadow: 0 0 0 3px var(--rojo-suave);
}
.form-nota { font-size: var(--t-xs); color: var(--texto-3); margin-top: 1rem; max-width: 50ch; }
.form-contacto .btn { margin-top: 1.2rem; align-self: start; }
@media (min-width: 860px) {
.contacto-grid { grid-template-columns: 1fr 300px; }
}
/* =========================================================
10 · RESPONSIVE
========================================================= */
@media (min-width: 540px) {
.rejilla { grid-template-columns: repeat(2, 1fr); }
.cinta { grid-auto-columns: 46%; }
.regiones { grid-template-columns: repeat(2, 1fr); }
.guias { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
.cinta { grid-auto-columns: 33%; }
.franja-inner { grid-template-columns: 1fr auto; }
.pie-grid { grid-template-columns: 1.7fr 1fr 1fr; }
.mapa-envoltura { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 960px) {
.rejilla { grid-template-columns: repeat(3, 1fr); }
.cinta { grid-auto-columns: 25%; }
.regiones { grid-template-columns: repeat(3, 1fr); }
.guias { grid-template-columns: repeat(3, 1fr); }
.mapa-panel { position: sticky; top: calc(var(--nav-h) + 20px); }
}
/* En pantallas chicas el botón se vuelve redondo: si no, se come el
placeholder y el usuario no sabe qué puede escribir. */
@media (max-width: 539px) {
.buscador-caja { padding-left: 1rem; }
.buscador .btn {
width: 44px; height: 44px; padding: 0;
border-radius: 50%;
font-size: 0;
}
.buscador .btn::before {
content: "";
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.buscador-lupa { display: none; }
}
@media (max-width: 719px) {
.barra-fila { flex-direction: column; align-items: stretch; gap: 0; padding-block: .4rem; min-height: 0; }
.marca { align-self: flex-start; padding-block: .3rem; }
.menu { margin-inline: calc(var(--gutter) * -1); }
.menu ul {
flex-wrap: nowrap; overflow-x: auto;
padding: 0 var(--gutter) .3rem;
gap: 1.1rem;
scrollbar-width: none;
}
.menu ul::-webkit-scrollbar { display: none; }
.menu a { white-space: nowrap; font-size: var(--t-xs); }
.menu a.es-cta { padding: .35rem .8rem; }
}
/* ------------------------------------------------------------------
Calculador de asado
------------------------------------------------------------------ */
.calc-hero { padding: clamp(2.6rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem); text-align: center; }
.calc-hero .titulo-seccion { max-width: 34ch; margin-inline: auto; }
.calc-hero-bajada { max-width: 56ch; margin: .9rem auto 0; color: var(--texto-inv-2); font-size: var(--t-md); }
.calc-pantalla[hidden] { display: none; }
.calc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 800px) { .calc-form-grid { grid-template-columns: 1fr; } }
.calc-tarjeta { background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r); padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.calc-tarjeta.es-ancha { grid-column: 1 / -1; }
.calc-tarjeta-cabeza { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.calc-tarjeta-icono {
width: 2.3rem; height: 2.3rem; flex: 0 0 auto; border-radius: 999px;
background: var(--rojo-suave); color: var(--rojo-osc);
display: grid; place-items: center;
}
.calc-tarjeta-tit { font-weight: 800; font-size: var(--t-sm); }
.calc-campo { margin-bottom: 1.5rem; }
.calc-campo:last-child { margin-bottom: 0; }
.calc-campo-tit { font-weight: 800; font-size: var(--t-sm); margin-bottom: .3rem; }
.calc-campo-sub { font-size: var(--t-xs); color: var(--texto-3); margin-bottom: .7rem; }
.calc-personas { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.calc-stepper-grupo { flex: 1 1 140px; }
.calc-stepper-etq { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--texto-2); margin-bottom: .4rem; }
.calc-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--borde); border-radius: var(--r-sm); overflow: hidden; }
.calc-stepper button {
width: 2.4rem; height: 2.4rem; flex: 0 0 auto;
background: var(--cal-2); color: var(--tinta); font-size: 1.1rem; font-weight: 800;
transition: background .15s var(--ease);
}
.calc-stepper button:hover { background: var(--rojo-suave); color: var(--rojo-osc); }
.calc-stepper input {
flex: 1 1 auto; width: 100%; min-width: 0; text-align: center;
border: 0; border-left: 1px solid var(--borde); border-right: 1px solid var(--borde);
height: 2.4rem; font-family: var(--dato); font-size: var(--t-md); font-weight: 700; color: var(--texto);
-moz-appearance: textfield;
}
.calc-stepper input::-webkit-outer-spin-button, .calc-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-chip-grupo { display: flex; flex-wrap: wrap; gap: .5rem; }
.calc-chip {
padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--borde);
background: var(--papel); color: var(--texto-2); font-size: var(--t-sm); font-weight: 600;
transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.calc-chip:hover { border-color: var(--rojo); color: var(--texto); }
.calc-chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.calc-chip small { display: block; font-size: .68rem; font-weight: 500; opacity: .75; margin-top: .1rem; }
.calc-nota { font-size: var(--t-xs); color: var(--texto-3); margin-top: 1.4rem; max-width: 62ch; }
/* --- botón "Ver mi resultado" integrado al final del formulario — el
flotante se mantiene aparte, este es solo para quien prefiere un botón
normal en el flujo de la página en vez de ir a buscarlo en la esquina --- */
.calc-cta-inline {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
width: 100%; margin-top: .4rem;
padding: 1.05rem 1.8rem; border-radius: 999px;
background: var(--rojo); color: #fff; font-weight: 800; font-size: var(--t-md);
box-shadow: 0 10px 30px rgba(238,65,68,.25);
transition: transform .2s var(--ease), background .2s var(--ease);
}
.calc-cta-inline:hover { background: var(--rojo-osc); transform: translateY(-2px); }
@media (min-width: 640px) { .calc-cta-inline { width: auto; } }
/* --- botón flotante "Simular" --- */
.calc-flotante {
position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60;
display: inline-flex; align-items: center; gap: .6rem;
padding: 1.05rem 1.6rem; border-radius: 999px;
background: var(--rojo); color: #fff; font-weight: 800; font-size: var(--t-sm);
box-shadow: 0 10px 30px rgba(238,65,68,.4);
animation: calc-pulso 2.6s ease-in-out infinite;
transition: transform .2s var(--ease), background .2s var(--ease);
}
.calc-flotante:hover { background: var(--rojo-osc); transform: translateY(-2px); }
.calc-flotante svg { flex: 0 0 auto; }
@keyframes calc-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .calc-flotante { animation: none; } }
@media (max-width: 640px) { .calc-flotante { right: 1rem; bottom: 1rem; padding: .85rem 1.25rem; font-size: var(--t-xs); } }
/* --- pantalla de carga --- */
.calc-carga {
min-height: 56vh; display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center; gap: 1.5rem; padding: 3rem 1rem;
}
.calc-carga-icono {
width: 4.6rem; height: 4.6rem; border-radius: 999px;
background: var(--tinta); color: #fff; display: grid; place-items: center;
animation: calc-girar 1.7s linear infinite;
}
@keyframes calc-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .calc-carga-icono { animation: none; } }
.calc-carga-tit { font-size: var(--t-xl); font-weight: 800; max-width: 32ch; }
.calc-carga-sub { color: var(--texto-2); font-size: var(--t-sm); max-width: 46ch; margin-top: -.8rem; }
.calc-carga-numero { font-family: var(--dato); font-size: 2.6rem; font-weight: 800; color: var(--rojo); line-height: 1; }
.calc-carga-barra { width: 100%; max-width: 360px; height: .5rem; background: var(--cal-2); border-radius: 999px; overflow: hidden; }
.calc-carga-barra-relleno { height: 100%; background: var(--rojo); width: 0%; transition: width 1s linear; border-radius: inherit; }
/* franja de anuncio angosta arriba de la pantalla de carga */
.calc-carga-ad { width: 100%; max-width: 460px; min-height: 60px; margin-bottom: -.5rem; }
/* botón grande "Ver mis resultados" dentro de la pantalla de carga — mismo
peso visual que el flotante de la config, pero estático (no fixed), para
no competir con él: ese sigue solo en la pantalla anterior. */
.calc-carga-boton {
display: inline-flex; align-items: center; gap: .6rem;
padding: 1.05rem 1.8rem; border-radius: 999px;
background: var(--rojo); color: #fff; font-weight: 800; font-size: var(--t-md);
box-shadow: 0 10px 30px rgba(238,65,68,.4);
transition: transform .2s var(--ease), background .2s var(--ease);
}
.calc-carga-boton:hover { background: var(--rojo-osc); transform: translateY(-2px); }
.calc-carga-boton[hidden] { display: none; }
.calc-ad-video {
width: 100%; max-width: 460px; aspect-ratio: 16 / 9; border-radius: var(--r);
background: linear-gradient(135deg, var(--tinta), var(--tinta-2));
display: flex; align-items: center; justify-content: center;
position: relative; color: #fff; overflow: hidden;
}
.calc-ad-video-play {
width: 3.2rem; height: 3.2rem; border-radius: 999px; background: rgba(255,255,255,.16);
display: grid; place-items: center;
}
.calc-ad-video-marca {
position: absolute; top: .8rem; left: .9rem; font-family: var(--dato); font-size: .64rem;
letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75);
background: rgba(0,0,0,.32); padding: .25rem .6rem; border-radius: 999px;
}
.calc-ad-video-saltar {
position: absolute; bottom: .8rem; right: .9rem; font-size: .72rem; color: rgba(255,255,255,.9);
background: rgba(0,0,0,.38); padding: .3rem .7rem; border-radius: 999px; font-family: var(--dato);
}
/* --- pantalla de resultado --- */
.calc-resultado-pantalla { max-width: 46rem; margin: 0 auto; }
.calc-resultado-cabecera { text-align: center; margin-bottom: 1.6rem; }
.calc-resultado-cabecera .eyebrow { justify-content: center; }
.calc-costo-total { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); line-height: 1.05; }
.calc-costo-sub { color: var(--texto-3); font-size: var(--t-sm); margin-top: .3rem; }
.calc-costo-persona {
display: inline-flex; align-items: baseline; gap: .4rem; margin-top: 1rem;
background: var(--rojo-suave); color: var(--rojo-osc); font-weight: 700;
padding: .6rem 1.2rem; border-radius: 999px; font-size: var(--t-sm);
}
.calc-costo-persona b { font-family: var(--dato); font-size: var(--t-md); }
.calc-tabla-costos { width: 100%; border-collapse: collapse; }
.calc-tabla-costos td { padding: .55rem .2rem; border-top: 1px solid var(--borde-2); font-size: var(--t-sm); }
.calc-tabla-costos td.calc-td-desc small { display: block; color: var(--texto-3); font-size: .74rem; }
.calc-tabla-costos td:last-child { text-align: right; font-family: var(--dato); white-space: nowrap; }
.calc-tabla-costos td.calc-fila-grupo {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
color: var(--texto-3); font-weight: 700; border-top: 0; padding: 1.2rem .2rem .3rem;
}
.calc-tabla-costos tr:first-child td.calc-fila-grupo { padding-top: 0; }
.calc-tabla-costos tfoot td { font-weight: 800; border-top: 2px solid var(--tinta); padding-top: .75rem; }
.calc-resultado-botones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; justify-content: center; }
/* --- bloque promocional embebido en otras landings --- */
.bloque-asado {
display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem 1.8rem;
background: var(--tinta); color: var(--texto-inv);
border-radius: var(--r); padding: 1.6rem clamp(1.4rem, 3vw, 2rem);
margin: 2rem 0;
}
.bloque-asado-icono {
flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 999px;
background: var(--rojo); display: grid; place-items: center;
}
.bloque-asado-txt { flex: 1 1 260px; min-width: 0; }
.bloque-asado-txt p.tit { font-weight: 800; font-size: var(--t-md); margin-bottom: .25rem; }
.bloque-asado-txt p.sub { color: var(--texto-inv-2); font-size: var(--t-sm); }
/* ------------------------------------------------------------------
Contador — cuenta regresiva al 18 de septiembre
------------------------------------------------------------------ */
.contador-bloque {
background: var(--tinta); color: var(--texto-inv); border-radius: var(--r);
padding: clamp(1.6rem, 4vw, 2.4rem); text-align: center; margin: 2rem 0;
}
.contador-bloque .eyebrow { justify-content: center; color: var(--rojo-claro); }
.contador-bloque-tit { font-size: var(--t-xl); font-weight: 800; margin-bottom: 1.2rem; }
.contador-grid { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.contador-caja {
background: rgba(247,243,234,.08); border: 1px solid rgba(247,243,234,.14);
border-radius: var(--r-sm); padding: .9rem 1.1rem; min-width: 84px;
}
.contador-numero { font-family: var(--dato); font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.contador-etq { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-inv-3); margin-top: .35rem; }
.contador-bloque .btn { margin-top: 1.5rem; }
.contador-hero { padding: clamp(2.8rem, 7vw, 4.5rem) 0; text-align: center; }
.contador-hero .eyebrow { justify-content: center; }
.contador-hero-tit { max-width: 30ch; margin-inline: auto; }
.contador-hero-sub { max-width: 52ch; margin: .9rem auto 0; color: var(--texto-inv-2); font-size: var(--t-md); }
.contador-hero .contador-grid { margin-top: 2.2rem; }
.contador-hero .contador-caja { min-width: 110px; padding: 1.3rem 1.6rem; }
.contador-hero .contador-numero { font-size: clamp(2.6rem, 8vw, 4.6rem); }
.contador-hero .contador-etq { font-size: var(--t-xs); margin-top: .5rem; }
.contador-hero-fecha { margin-top: 1.6rem; color: var(--texto-inv-2); font-size: var(--t-sm); }
.contador-terminado { font-size: var(--t-lg, var(--t-xl)); font-weight: 800; }
.bloque-asado .btn { flex: 0 0 auto; }
/* --- mini calendario de la semana del 18 --- */
.mini-calendario { display: flex; justify-content: center; gap: .45rem; margin: 1.8rem auto 0; flex-wrap: wrap; max-width: 30rem; }
.mc-dia {
flex: 1 1 38px; min-width: 38px; max-width: 56px;
background: rgba(247,243,234,.06); border: 1px solid rgba(247,243,234,.14);
border-radius: var(--r-sm); padding: .55rem .3rem; text-align: center;
}
.mc-num { display: block; font-family: var(--dato); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.mc-etq { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-inv-3); margin-top: .3rem; }
.mc-dia.es-feriado { background: var(--rojo); border-color: var(--rojo); }
.mc-dia.es-feriado .mc-etq { color: rgba(255,255,255,.8); }
.mc-dia.es-hoy { box-shadow: 0 0 0 2px var(--rojo-claro) inset; }
.mini-calendario-nota { margin-top: .9rem; font-size: var(--t-xs); color: var(--texto-inv-3); max-width: 40ch; margin-inline: auto; }
.mini-calendario-nota a { color: var(--rojo-claro); text-decoration: underline; text-underline-offset: 2px; }
/* --- marca de agua chica, para que el logo salga en capturas de pantalla
de herramientas (contador, calculadora) que la gente comparte en redes --- */
.marca-agua-herramienta {
display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
opacity: .6; font-family: var(--dato); font-size: .68rem; letter-spacing: .04em;
}
.marca-agua-herramienta img { height: 15px; width: auto; display: block; }
.contador-hero .marca-agua-herramienta { color: var(--texto-inv-3); }
.calc-resultado-pantalla .marca-agua-herramienta { color: var(--texto-3); justify-content: center; width: 100%; }
/* --- botón "pantalla completa" del contador --- */
.btn-pantalla-completa {
display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.3rem;
background: rgba(247,243,234,.08); border: 1px solid rgba(247,243,234,.18); color: var(--texto-inv-2);
font-size: var(--t-xs); font-weight: 600; padding: .5rem 1rem; border-radius: 999px;
cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease);
}
.btn-pantalla-completa:hover { background: rgba(247,243,234,.16); color: var(--texto-inv); }
/* --- el contador en pantalla completa: fondo a toda la ventana, sin
publicidad, con el logo grande — pensado para dejarlo prendido de fondo
en una junta, o para capturas de pantalla que se comparten en redes --- */
.pantalla-completa-contador {
position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at 50% 30%, var(--tinta-2), var(--tinta) 70%);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 2rem 1.2rem; text-align: center; color: var(--texto-inv);
}
/* OBLIGATORIO, no lo borres: un componente que define `display` en su CSS
NO se oculta con el atributo `hidden`. El `[hidden] { display: none }`
viene del navegador, y los estilos del sitio siempre le ganan en la
cascada, sin importar la especificidad. Sin esta línea el overlay tapa
la página entera desde que carga. Misma convención que ya usan
.ficha[hidden], .ad-ancla[hidden] y .compartir-panel[hidden]. */
.pantalla-completa-contador[hidden] { display: none; }
/* mientras el contador está en pantalla completa, la página de atrás no
se desplaza — si no, al hacer scroll se mueve el contenido por detrás */
html.con-pantalla-completa-abierta, html.con-pantalla-completa-abierta body { overflow: hidden; }
.pantalla-completa-cerrar {
position: absolute; top: 1.1rem; right: 1.1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
background: rgba(247,243,234,.1); border: 1px solid rgba(247,243,234,.2); color: #fff;
font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.pantalla-completa-cerrar:hover { background: rgba(247,243,234,.2); }
.pantalla-completa-logo { height: clamp(34px, 5vw, 52px); width: auto; margin-bottom: clamp(1rem, 3vw, 1.8rem); }
.pantalla-completa-fecha { font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--texto-inv-2); margin-bottom: .3rem; }
.pantalla-completa-tit { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2.2rem); margin-bottom: clamp(1.6rem, 4vw, 2.6rem); text-wrap: balance; }
.pantalla-completa-grid { display: flex; justify-content: center; gap: clamp(.6rem, 2.4vw, 1.6rem); flex-wrap: wrap; }
.pantalla-completa-caja {
background: rgba(247,243,234,.07); border: 1px solid rgba(247,243,234,.16); border-radius: var(--r);
padding: clamp(1rem, 3vw, 1.8rem) clamp(1.2rem, 3.6vw, 2.4rem); min-width: 90px;
}
.pantalla-completa-num { font-family: var(--dato); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; font-size: clamp(2.6rem, 10vw, 6.5rem); }
.pantalla-completa-etq { display: block; margin-top: .5rem; font-size: clamp(.68rem, 1.6vw, .85rem); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-inv-3); }
.pantalla-completa-terminado { font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 800; max-width: 30ch; }
.pantalla-completa-marca { margin-top: clamp(1.6rem, 4vw, 2.6rem); font-family: var(--dato); font-size: .8rem; letter-spacing: .06em; color: var(--texto-inv-3); }
@media (prefers-reduced-motion: no-preference) { .pantalla-completa-contador { animation: pantalla-completa-in .25s var(--ease); } }
@keyframes pantalla-completa-in { from { opacity: 0; } to { opacity: 1; } }
/* ------------------------------------------------------------------
Guía de feriados — componentes de contenido reutilizables
------------------------------------------------------------------ */
/* respuesta corta, para intención de búsqueda binaria (sí/no) */
.respuesta-corta {
background: var(--tinta); color: var(--texto-inv);
border-radius: var(--r); padding: 1.4rem 1.6rem; margin-bottom: 1.8rem;
display: flex; align-items: flex-start; gap: 1rem;
}
.respuesta-corta-icono {
flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 999px;
display: grid; place-items: center; font-weight: 800; font-size: 1.2rem;
background: var(--rojo);
}
.respuesta-corta-txt p { margin: 0; }
.respuesta-corta-txt .etq { font-family: var(--dato); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rojo-claro); margin-bottom: .3rem; }
.respuesta-corta-txt strong { font-size: var(--t-md); }
/* línea de tiempo de días / momentos */
.linea-tiempo { display: grid; gap: 0; margin: 1.2rem 0; }
.lt-item {
display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
padding: 1rem 0; border-top: 1px solid var(--borde-2);
}
.lt-item:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 560px) { .lt-item { grid-template-columns: 1fr; gap: .3rem; } }
.lt-cuando { font-weight: 700; font-size: var(--t-sm); }
.lt-item.es-bien .lt-cuando { color: var(--verde); }
.lt-item.es-mal .lt-cuando { color: var(--rojo-osc); }
.lt-item.es-neutro .lt-cuando { color: var(--texto-2); }
.lt-desc { color: var(--texto-2); font-size: var(--t-sm); }
.lt-item.es-bien .lt-cuando::before { content: "\2713 "; }
.lt-item.es-mal .lt-cuando::before { content: "\2715 "; }
/* comparación de dos columnas (cierra / abre) */
.comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
@media (max-width: 620px) { .comparacion { grid-template-columns: 1fr; } }
.comparacion-col { border-radius: var(--r); padding: 1.2rem 1.3rem; }
.comparacion-col.es-cierra { background: var(--rojo-suave); }
.comparacion-col.es-abre { background: rgba(46,125,91,.1); }
.comparacion-col-tit { font-weight: 800; font-size: var(--t-sm); margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.comparacion-col.es-cierra .comparacion-col-tit { color: var(--rojo-osc); }
.comparacion-col.es-abre .comparacion-col-tit { color: var(--verde); }
.comparacion-col ul { display: grid; gap: .5rem; font-size: var(--t-sm); color: var(--texto-2); }
.comparacion-col li { padding-left: 1.2rem; position: relative; }
.comparacion-col.es-cierra li::before { content: "\2715"; position: absolute; left: 0; color: var(--rojo-osc); font-size: .8em; }
.comparacion-col.es-abre li::before { content: "\2713"; position: absolute; left: 0; color: var(--verde); font-size: .8em; }
/* lista de compras tipo checklist (guías) */
.dato-lista-check { display: grid; gap: .55rem; font-size: var(--t-sm); color: var(--texto-2); margin: 1rem 0; }
.dato-lista-check li { padding-left: 1.6rem; position: relative; }
.dato-lista-check li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1rem; height: 1rem; border: 1.5px solid var(--borde-2); border-radius: 4px; }
/* cita / estadística destacada */
.cita-destacada {
border-left: 3px solid var(--rojo); padding: .3rem 0 .3rem 1.3rem;
margin: 1.6rem 0; font-size: var(--t-md); color: var(--texto);
}
.cita-destacada strong { font-family: var(--dato); }
/* pasos numerados */
.pasos-numerados { display: grid; gap: 1rem; margin: 1.2rem 0; counter-reset: paso; }
.pasos-numerados li { list-style: none; display: flex; gap: 1rem; counter-increment: paso; }
.pasos-numerados li::before {
content: counter(paso); flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
border-radius: 999px; background: var(--tinta); color: #fff;
display: grid; place-items: center; font-family: var(--dato); font-weight: 700; font-size: var(--t-xs);
}
.pasos-numerados p { color: var(--texto-2); font-size: var(--t-sm); padding-top: .15rem; margin: 0; }
/* botón hacia fuente externa oficial */
.btn-fuente-oficial {
display: inline-flex; align-items: center; gap: .6rem;
background: var(--tinta); color: #fff; padding: 1rem 1.5rem;
border-radius: var(--r); font-weight: 700; margin: 1rem 0;
}
.btn-fuente-oficial:hover { background: var(--tinta-2); }
/* navegación del cluster (hub ↔ hijos) */
.cluster-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: 1.4rem 0; }
@media (max-width: 620px) { .cluster-nav { grid-template-columns: 1fr; } }
.cluster-nav a {
display: block; background: var(--papel); border: 1px solid var(--borde);
border-radius: var(--r-sm); padding: 1.1rem 1.3rem; text-decoration: none;
transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.cluster-nav a:hover { border-color: var(--rojo); transform: translateY(-2px); }
.cluster-nav-tema { font-family: var(--dato); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rojo); }
.cluster-nav-tit { font-weight: 700; color: var(--texto); margin-top: .3rem; }
/* aviso de actualización pendiente (variante roja de .proximamente) */
.aviso-vivo {
background: var(--rojo-suave); border: 1px solid rgba(238,65,68,.3);
border-radius: var(--r-sm); padding: .8rem 1.1rem; margin-bottom: 1.4rem;
font-size: var(--t-sm); color: var(--rojo-osc);
}
/* ficha en pipeline: aún sin confirmación oficial para el año en curso
(variante amarilla de .aviso-vivo) */
.bloque-nota-pipeline {
background: var(--trigo-suave); border: 1px solid rgba(227,165,52,.4);
border-radius: var(--r-sm); padding: .9rem 1.1rem; margin-bottom: 1.4rem;
font-size: var(--t-sm); color: #7a5a10;
}
.bloque-nota-pipeline strong { color: #5c4308; }
/* índice de artistas */
.lista-artistas { display: grid; gap: .1rem; }
.lista-artistas li {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .9rem .2rem; border-bottom: 1px solid var(--borde-2);
}
.lista-artistas li a { font-weight: 700; font-size: var(--t-md); }
.lista-artistas li a:hover { color: var(--rojo); }
.artista-n { font-size: var(--t-xs); color: var(--texto-3); font-family: var(--dato); white-space: nowrap; }
/* foto de cabecera en los artículos de la guía */
.guia-hero-foto { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r); margin-top: 1.5rem; display: block; }
@media (max-width: 640px) { .guia-hero-foto { aspect-ratio: 16 / 9; } }
/* sidebar del hub del cluster */
.guia-cuerpo-grid { display: grid; grid-template-columns: 1fr 20rem; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 900px) { .guia-cuerpo-grid { grid-template-columns: 1fr; } }
.guia-cuerpo-lateral { position: sticky; top: calc(var(--nav-h) + 1rem); display: grid; gap: 1.2rem; }
.guia-indice { background: var(--cal-2); border-radius: var(--r); padding: 1.2rem 1.3rem; }
.guia-indice-tit { font-family: var(--dato); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); margin-bottom: .8rem; }
.guia-indice ol { display: grid; gap: .6rem; padding-left: 1.1rem; font-size: var(--t-sm); }
.guia-indice a { color: var(--texto); font-weight: 600; }
.guia-indice a:hover { color: var(--rojo); }
/* --- menú desplegable "Guía del 18" en la barra superior --- */
.menu-desplegable { position: relative; }
.menu-boton-guia {
display: inline-flex; align-items: center; gap: .35rem;
font-size: var(--t-sm); font-weight: 500; color: var(--texto-2);
padding: .5rem 0; border-bottom: 2px solid transparent;
transition: color .2s var(--ease), border-color .2s var(--ease);
}
.menu-boton-guia:hover, .menu-boton-guia[aria-expanded="true"] { color: var(--texto); border-bottom-color: var(--rojo); }
.menu-boton-guia svg { transition: transform .2s var(--ease); }
.menu-boton-guia[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-panel-guia {
position: absolute; top: calc(100% + .8rem); left: 50%; transform: translateX(-50%);
width: 17rem; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
box-shadow: var(--sombra-2); padding: .7rem; z-index: 80;
}
.menu-panel-ver-todo {
display: block; font-weight: 700; font-size: var(--t-sm); color: var(--rojo);
padding: .5rem .6rem; border-radius: var(--r-sm); margin-bottom: .3rem;
}
.menu-panel-ver-todo:hover { background: var(--cal-2); }
.menu-panel-categoria {
font-family: var(--dato); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--texto-3); padding: .6rem .6rem .2rem;
}
.menu-panel-guia a.menu-panel-item {
display: block; font-size: var(--t-sm); color: var(--texto); padding: .45rem .6rem; border-radius: var(--r-sm);
}
.menu-panel-guia a.menu-panel-item:hover { background: var(--cal-2); color: var(--rojo); }
@media (max-width: 719px) {
.menu-panel-guia { position: static; transform: none; width: auto; margin-top: .5rem; box-shadow: none; }
}
/* --- mega-menú "Guías" / "Herramientas": destacado + grilla de categorías ---
Ojo: todo lo de acá abajo necesita ganarle en especificidad a ".menu a"
(que trae display:inline-block, padding y border-bottom para los links
normales de la barra) — por eso todo va calificado como
".menu-panel-guia a.___" en vez de solo ".___". Sin eso, ".menu a" gana
por especificidad y el menú se ve roto (texto pegado al borde, la
flecha del destacado encimada con el título). No lo saques. */
.menu-panel-mega { width: 32rem; padding: 1rem; }
.menu-panel-guia a.menu-panel-destacado {
display: flex; align-items: center; justify-content: space-between; gap: .8rem;
width: auto; white-space: normal; padding: 1rem 1.2rem; border-bottom: 0;
background: linear-gradient(135deg, var(--rojo), var(--rojo-osc)); color: #fff;
border-radius: var(--r-sm); margin-bottom: .8rem;
box-shadow: 0 6px 16px rgba(238,65,68,.22);
}
.menu-panel-destacado-kick { display: block; font-family: var(--dato); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.menu-panel-destacado-tit { display: block; font-weight: 700; font-size: var(--t-sm); margin-top: .2rem; }
.menu-panel-destacado-flecha { font-size: 1.3rem; flex-shrink: 0; transition: transform .2s var(--ease); }
.menu-panel-guia a.menu-panel-destacado:hover .menu-panel-destacado-flecha { transform: translateX(3px); }
.menu-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .5rem; }
.menu-panel-guia a.menu-panel-cat, .menu-panel-guia span.menu-panel-cat {
display: flex; align-items: center; gap: .65rem; width: auto; white-space: normal;
padding: .55rem .6rem; border-radius: var(--r-sm); border-bottom: 0; text-align: left;
transition: background .15s var(--ease);
}
.menu-panel-guia a.menu-panel-cat:hover { background: var(--cal-2); }
.menu-panel-cat-ic {
flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 999px;
background: var(--rojo-suave); color: var(--rojo-osc); display: grid; place-items: center;
}
.menu-panel-cat-tit { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--texto); line-height: 1.2; }
.menu-panel-guia a.menu-panel-cat:hover .menu-panel-cat-tit { color: var(--rojo); }
.menu-panel-cat-sub { display: block; font-size: .74rem; color: var(--texto-3); margin-top: .1rem; line-height: 1.25; }
.menu-panel-guia span.menu-panel-cat.es-proximamente { cursor: default; }
.menu-panel-guia span.menu-panel-cat.es-proximamente .menu-panel-cat-ic { background: var(--borde); color: var(--texto-3); }
.menu-panel-cat-pill {
display: inline-block; margin-top: .2rem; font-family: var(--dato); font-size: .6rem;
text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
background: var(--papel); border: 1px solid var(--borde); border-radius: 999px; padding: .1rem .5rem;
}
@media (max-width: 719px) {
.menu-panel-mega { width: auto; }
.menu-panel-grid { grid-template-columns: 1fr; }
}
/* --- landing principal /guia/: categorías del blog --- */
.categorias-guia { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; margin: 1.4rem 0; }
.categoria-guia {
display: block; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
padding: 1.4rem 1.5rem; transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.categoria-guia:hover { border-color: var(--rojo); transform: translateY(-2px); }
.categoria-guia-icono {
width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--rojo-suave); color: var(--rojo-osc);
display: grid; place-items: center; margin-bottom: 1rem;
}
.categoria-guia-tit { font-weight: 800; font-size: var(--t-md); color: var(--texto); margin-bottom: .35rem; }
.categoria-guia-desc { color: var(--texto-2); font-size: var(--t-sm); }
.categoria-guia-cuenta {
display: inline-block; margin-top: .9rem; font-family: var(--dato); font-size: .72rem;
color: var(--rojo); font-weight: 700;
}
.categoria-guia.es-pendiente {
background: var(--cal-2); cursor: default; opacity: .72;
}
.categoria-guia.es-pendiente:hover { border-color: var(--borde); transform: none; }
.categoria-guia.es-pendiente .categoria-guia-icono { background: var(--borde); color: var(--texto-3); }
.categoria-guia-pill {
display: inline-block; margin-top: .9rem; font-family: var(--dato); font-size: .68rem;
text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3);
background: var(--papel); border: 1px solid var(--borde); border-radius: 999px; padding: .2rem .7rem;
}
.categoria-guia.es-sugerir { border-style: dashed; }
.categoria-guia.es-sugerir:hover { border-color: var(--rojo); border-style: dashed; }
.categoria-guia.es-sugerir .categoria-guia-icono { background: var(--cal-2); color: var(--texto-2); }
.categoria-guia.es-sugerir .categoria-guia-cuenta { color: var(--texto-2); }
/* =========================================================
12 · GISFRAZ — inserto de la empresa aliada (trajes típicos,
La Florida). Sistema visual propio a propósito ("el chamanto de
Doñihue": carmesí, lino crudo, listas de tinta, Alegreya Sans) —
se lee como un aviso de socio, no como parte nativa del sitio.
Variables escopadas bajo .fc, no tocan los tokens globales.
Solo cara de día: FondasChile no tiene modo oscuro hoy.
========================================================= */
.fc{
--fc-carmesi:#A4142B; --fc-carmesi-hondo:#6E0C1D; --fc-mostaza:#C68A1E;
--fc-verde:#2F5D3F; --fc-lino:#F7F2E9; --fc-hueso:#EDE4D4;
--fc-tinta:#1A1416; --fc-tinta2:#4B3F42; --fc-suave:#7C6F70;
--fc-linea:#DDD2BE; --fc-sup:#FFFFFF;
--fc-listado: repeating-linear-gradient(90deg,
var(--fc-carmesi) 0 22px, var(--fc-lino) 22px 26px, var(--fc-tinta) 26px 30px, var(--fc-lino) 30px 34px,
var(--fc-carmesi) 34px 48px, var(--fc-mostaza) 48px 52px, var(--fc-lino) 52px 56px, var(--fc-tinta) 56px 58px, var(--fc-lino) 58px 62px);
font-family:"Instrument Sans",system-ui,sans-serif;
color:var(--fc-tinta); background:var(--fc-lino);
}
.fc *{ box-sizing:border-box; }
.fc h3{ font-family:"Alegreya Sans",system-ui,sans-serif; font-weight:800; letter-spacing:-.012em; line-height:1.1; margin:0; text-wrap:balance; color:var(--fc-tinta); }
.fc p{ margin:0; text-wrap:pretty; }
.fc .kick{ font-family:"Alegreya Sans",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.19em; text-transform:uppercase; }
.fc .mini{ font-size:.79rem; color:var(--fc-suave); }
.fc .tira{ height:7px; background:var(--fc-listado); }
.fc .btn{ display:inline-flex; align-items:center; gap:9px; background:var(--fc-verde); color:#fff; text-decoration:none;
font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:1rem; letter-spacing:.005em;
padding:13px 22px; border-radius:7px; border:none; cursor:pointer;
transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
box-shadow:0 2px 0 rgba(0,0,0,.16); }
.fc .btn:hover{ transform:translateY(-2px); box-shadow:0 5px 14px -4px rgba(0,0,0,.3); }
.fc .btn:active{ transform:translateY(0); }
.fc .btn.rojo{ background:var(--fc-carmesi); }
.fc .btn.linea{ background:transparent; color:var(--fc-tinta); border:1.5px solid var(--fc-linea); box-shadow:none; }
.fc .btn.linea:hover{ border-color:var(--fc-carmesi); color:var(--fc-carmesi); }
.fc .btn.claro{ background:var(--fc-lino); color:var(--fc-carmesi); }
.fc .wa{ width:17px; height:17px; flex:none; }
/* Pieza 1 · "La siguiente pregunta" — genérica, para fondas fuera de la
zona sur (donde no aplica la pieza 2, la tarjeta del vecino). */
.gz-b1{ padding:0; background:var(--fc-lino); }
.gz-b1 .in{ padding:36px 32px 34px; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:end; }
.gz-b1 .txt{ display:flex; flex-direction:column; gap:11px; max-width:44ch; }
.gz-b1 .kick{ color:var(--fc-carmesi); }
.gz-b1 h3{ font-size:clamp(1.5rem,3.4vw,2.05rem); }
.gz-b1 p{ font-size:1.01rem; color:var(--fc-tinta2); }
@media(max-width:660px){ .gz-b1 .in{ grid-template-columns:1fr; align-items:start; } }
/* Pieza 2 · "La tarjeta del vecino" — solo fondas de la zona sur, a
minutos de la tienda. Es la que más convierte. */
.gz-b2out{ padding:22px; background:var(--fc-lino); }
.gz-b2{ background:var(--fc-sup); border:1px solid var(--fc-linea); border-radius:12px; overflow:hidden; box-shadow:0 10px 30px -18px rgba(26,20,22,.5); }
.gz-b2 .in{ padding:26px 28px; display:flex; flex-direction:column; gap:17px; }
.gz-b2 .pin{ display:inline-flex; align-items:center; gap:7px; background:var(--fc-carmesi); color:#fff; font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:.78rem; letter-spacing:.04em; padding:6px 13px; border-radius:20px; align-self:flex-start; }
.gz-b2 h3{ font-size:clamp(1.28rem,2.8vw,1.6rem); max-width:26ch; }
.gz-b2 .datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:16px; padding:17px 0; border-top:1px solid var(--fc-linea); border-bottom:1px solid var(--fc-linea); }
.gz-b2 .d{ display:flex; flex-direction:column; gap:2px; }
.gz-b2 .d b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:.95rem; }
.gz-b2 .d span{ font-size:.81rem; color:var(--fc-suave); }
.gz-b2 .acc{ display:flex; gap:10px; flex-wrap:wrap; }
/* Pieza 3 · checklist "Lo que te falta para el 18" */
.gz-b3{ background:var(--fc-hueso); padding:32px; display:flex; flex-direction:column; gap:17px; }
.gz-b3 .cab{ display:flex; flex-direction:column; gap:5px; }
.gz-b3 .kick{ color:var(--fc-carmesi); }
.gz-b3 h3{ font-size:1.45rem; }
.gz-b3 ul{ list-style:none; margin:0; padding:0; background:var(--fc-sup); border-radius:10px; overflow:hidden; border:1px solid var(--fc-linea); }
.gz-b3 li{ display:grid; grid-template-columns:24px 1fr auto; gap:13px; align-items:center; padding:14px 17px; border-bottom:1px solid var(--fc-linea); font-size:.96rem; }
.gz-b3 li:last-child{ border-bottom:none; }
.gz-b3 li.hecho{ color:var(--fc-suave); }
.gz-b3 li.hecho .txtli{ text-decoration:line-through; text-decoration-color:var(--fc-linea); }
.gz-b3 .cb{ width:22px; height:22px; border:2px solid var(--fc-linea); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.75rem; background:transparent; cursor:pointer; padding:0; color:transparent; transition:background-color .16s ease,border-color .16s ease,color .16s ease; }
.gz-b3 li.hecho .cb{ background:var(--fc-verde); border-color:var(--fc-verde); color:#fff; }
.gz-b3 li a{ color:var(--fc-carmesi); font-family:"Alegreya Sans",sans-serif; font-weight:800; text-decoration:none; font-size:.88rem; white-space:nowrap; border-bottom:2px solid transparent; transition:border-color .16s ease; }
.gz-b3 li a:hover{ border-bottom-color:var(--fc-carmesi); }
.gz-b3 .prog{ display:flex; align-items:center; gap:11px; font-size:.83rem; color:var(--fc-suave); }
.gz-b3 .barra{ flex:1; height:6px; background:var(--fc-linea); border-radius:4px; overflow:hidden; }
.gz-b3 .barra i{ display:block; height:100%; background:var(--fc-verde); transition:width .3s ease; }
/* Pieza 4 · "¿Alcanzas a retirar?" — usa la comuna para decidir retiro
vs. despacho. */
.gz-b7{ background:var(--fc-lino); padding:32px; display:flex; flex-direction:column; gap:18px; }
.gz-b7 .kick{ color:var(--fc-carmesi); }
.gz-b7 h3{ font-size:1.45rem; max-width:24ch; }
.gz-b7 .campo{ display:flex; gap:9px; flex-wrap:wrap; align-items:stretch; }
.gz-b7 select{ font-family:"Instrument Sans",sans-serif; font-size:1rem; padding:13px 15px; border-radius:8px; border:1.5px solid var(--fc-linea); background:var(--fc-sup); color:var(--fc-tinta); min-width:210px; flex:1; cursor:pointer; }
.gz-b7 .rta{ border-radius:10px; padding:19px 21px; display:none; flex-direction:column; gap:9px; border-left:4px solid; }
.gz-b7 .rta.on{ display:flex; }
.gz-b7 .rta.cerca{ background:color-mix(in srgb,var(--fc-verde) 12%,var(--fc-sup)); border-color:var(--fc-verde); }
.gz-b7 .rta.lejos{ background:color-mix(in srgb,var(--fc-mostaza) 15%,var(--fc-sup)); border-color:var(--fc-mostaza); }
.gz-b7 .rta b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:1.1rem; }
.gz-b7 .rta p{ font-size:.91rem; color:var(--fc-tinta2); }
/* Pieza 6 · para quien organiza (contacto/publicar) */
.gz-b6out{ padding:22px; background:var(--fc-lino); }
.gz-b6{ background:var(--fc-sup); border:1px solid var(--fc-linea); border-radius:12px; overflow:hidden; }
.gz-b6 .in{ padding:28px; display:flex; flex-direction:column; gap:14px; }
.gz-b6 .kick{ color:var(--fc-mostaza); }
.gz-b6 h3{ font-size:1.42rem; max-width:24ch; }
.gz-b6 p{ font-size:.96rem; color:var(--fc-tinta2); max-width:58ch; }
.gz-b6 .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.gz-b6 .chip{ background:var(--fc-hueso); border-radius:20px; padding:6px 14px; font-size:.83rem; font-weight:500; }
/* Landing 8 · /vestuario/ completa */
.gz-l8{ background:var(--fc-lino); }
.gz-l8 .hero8{ background:var(--fc-carmesi); color:#F7F2E9; padding:0; position:relative; }
.gz-l8 .hero8 .in{ padding:48px 32px 44px; display:flex; flex-direction:column; gap:15px; }
.gz-l8 .hero8 .kick{ color:#F3C9AE; }
.gz-l8 .hero8 h3{ font-size:clamp(1.9rem,4.6vw,2.7rem); color:#F7F2E9; max-width:18ch; line-height:1.04; }
.gz-l8 .hero8 p{ font-size:1.06rem; color:#F5DCD9; max-width:50ch; }
.gz-l8 .hero8 .acc{ display:flex; gap:11px; flex-wrap:wrap; margin-top:8px; }
.gz-l8 .hero8 .btn.ghost{ background:transparent; color:#F7F2E9; border:1.5px solid rgba(247,242,233,.45); box-shadow:none; }
.gz-l8 .hero8 .btn.ghost:hover{ background:rgba(247,242,233,.1); }
.gz-l8 .sel{ background:var(--fc-hueso); padding:22px 32px; display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.gz-l8 .sel b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:.95rem; margin-right:6px; }
.gz-l8 .sel .op{ background:var(--fc-sup); border:1.5px solid var(--fc-linea); border-radius:22px; padding:8px 17px; font-size:.88rem; font-weight:600; cursor:pointer; font-family:"Instrument Sans",sans-serif; color:var(--fc-tinta); transition:background-color .16s ease,border-color .16s ease,color .16s ease; }
.gz-l8 .sel .op:hover{ border-color:var(--fc-carmesi); }
.gz-l8 .sel .op[aria-pressed="true"]{ background:var(--fc-carmesi); color:#fff; border-color:var(--fc-carmesi); }
.gz-l8 .rta8{ padding:16px 32px; background:var(--fc-sup); border-bottom:1px solid var(--fc-linea); font-size:.94rem; color:var(--fc-tinta2); }
.gz-l8 .rta8 b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; color:var(--fc-tinta); }
.gz-l8 .secc{ padding:32px; border-bottom:1px solid var(--fc-linea); display:flex; flex-direction:column; gap:17px; }
.gz-l8 .secc h3{ font-size:1.35rem; }
.gz-l8 .cat{ display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:12px; }
.gz-l8 .cat .c{ background:var(--fc-sup); border:1px solid var(--fc-linea); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:5px; border-top:3px solid var(--fc-carmesi); transition:transform .16s ease; }
.gz-l8 .cat .c:nth-child(2){ border-top-color:var(--fc-mostaza); }
.gz-l8 .cat .c:nth-child(3){ border-top-color:var(--fc-tinta); }
.gz-l8 .cat .c:nth-child(4){ border-top-color:var(--fc-verde); }
.gz-l8 .cat .c:nth-child(5){ border-top-color:var(--fc-carmesi); }
.gz-l8 .cat .c:nth-child(6){ border-top-color:var(--fc-mostaza); }
.gz-l8 .cat .c:hover{ transform:translateY(-3px); }
.gz-l8 .cat .c b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:.98rem; }
.gz-l8 .cat .c span{ font-size:.8rem; color:var(--fc-suave); }
.gz-l8 .pasos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:14px; counter-reset:p; }
.gz-l8 .pasos .p{ display:flex; flex-direction:column; gap:7px; counter-increment:p; padding-top:14px; border-top:2px solid var(--fc-linea); }
.gz-l8 .pasos .p::before{ content:counter(p); font-family:"Alegreya Sans",sans-serif; font-weight:900; font-size:1.5rem; line-height:1; color:var(--fc-carmesi); }
.gz-l8 .pasos .p b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:.98rem; }
.gz-l8 .pasos .p span{ font-size:.87rem; color:var(--fc-tinta2); }
.gz-l8 .dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:14px; }
.gz-l8 .caja{ background:var(--fc-sup); border:1px solid var(--fc-linea); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.gz-l8 .caja.dest{ background:var(--fc-hueso); border-color:transparent; }
.gz-l8 .caja b{ font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:1rem; }
.gz-l8 .caja p{ font-size:.88rem; color:var(--fc-tinta2); }
.gz-l8 .colegio{ background:var(--fc-tinta); color:var(--fc-lino); padding:32px; display:flex; flex-direction:column; gap:13px; }
.gz-l8 .colegio h3{ color:inherit; font-size:1.4rem; max-width:26ch; }
.gz-l8 .colegio p{ font-size:.95rem; opacity:.86; max-width:58ch; }
.gz-l8 .colegio .kick{ color:var(--fc-mostaza); }
.gz-l8 .faq{ display:flex; flex-direction:column; gap:0; background:var(--fc-sup); border:1px solid var(--fc-linea); border-radius:10px; overflow:hidden; }
.gz-l8 .faq details{ border-bottom:1px solid var(--fc-linea); }
.gz-l8 .faq details:last-child{ border-bottom:none; }
.gz-l8 .faq summary{ cursor:pointer; padding:15px 18px; font-family:"Alegreya Sans",sans-serif; font-weight:800; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.gz-l8 .faq summary::-webkit-details-marker{ display:none; }
.gz-l8 .faq summary::after{ content:"+"; font-size:1.25rem; color:var(--fc-carmesi); line-height:1; }
.gz-l8 .faq details[open] summary::after{ content:"−"; }
.gz-l8 .faq .r{ padding:0 18px 16px; font-size:.9rem; color:var(--fc-tinta2); }
.gz-l8 .cierre{ padding:36px 32px; display:flex; flex-direction:column; gap:13px; align-items:flex-start; background:var(--fc-hueso); }
.gz-l8 .cierre h3{ font-size:1.5rem; }
.gz-l8 .cierre p{ font-size:.94rem; color:var(--fc-tinta2); max-width:52ch; }
/* =========================================================
11 · COMPARTIR — botón flotante presente en todo el sitio
========================================================= */
.btn-compartir-flotante {
position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 70;
display: inline-flex; align-items: center; gap: .5rem;
padding: .8rem 1.15rem; border-radius: 999px;
background: var(--tinta); color: #fff; font-weight: 700; font-size: var(--t-sm);
box-shadow: var(--sombra-2);
transition: transform .2s var(--ease), background .2s var(--ease);
}
.btn-compartir-flotante:hover { background: var(--rojo); transform: translateY(-2px); }
.btn-compartir-flotante-icono { font-size: 1rem; line-height: 1; }
/* en celular, más arriba para no chocar con la ancla de publicidad (54px) */
@media (max-width: 727px) { .btn-compartir-flotante { bottom: 4.6rem; padding: .7rem 1rem; } }
/* la página del calculador tiene su propio flotante a la derecha — el de
compartir queda a la izquierda siempre, así que no colisionan ahí. */
.compartir-panel {
position: fixed; left: 1.1rem; bottom: 4.4rem; z-index: 71;
display: flex; flex-direction: column; gap: .3rem;
min-width: 190px;
background: var(--papel); border: 1px solid var(--borde); border-radius: var(--r);
box-shadow: var(--sombra-2); padding: .4rem;
}
.compartir-panel[hidden] { display: none; }
@media (max-width: 727px) { .compartir-panel { bottom: 8rem; } }
.compartir-panel button {
display: flex; align-items: center; gap: .6rem;
width: 100%; text-align: left;
padding: .6rem .7rem; border-radius: var(--r-sm);
font-size: var(--t-sm); font-weight: 600; color: var(--texto);
transition: background .15s var(--ease);
}
.compartir-panel button:hover { background: var(--cal-2); }
/* ==================================================================
Calculadora de asado v2 — asistente por fases, pausa publicitaria
rediseñada, lista de compras marcable y reparto entre amigos.
Convención de la casa: cada componente que se alterna con hidden
lleva su protección [hidden] explícita.
================================================================== */
.calc-fases { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 0 0 .8rem; padding: 0; list-style: none; }
.calc-fase-dot {
display: inline-flex; align-items: center; gap: .5rem;
font-family: var(--dato); font-size: .78rem; color: var(--texto-3);
padding: .45rem .9rem; border: 1px solid var(--borde-2); border-radius: 999px;
background: #fff; cursor: default; user-select: none;
}
.calc-fase-dot span {
width: 1.35rem; height: 1.35rem; border-radius: 999px; display: grid; place-items: center;
background: var(--cal-2); color: var(--texto-2); font-weight: 700; font-size: .72rem;
}
.calc-fase-dot.es-activa { border-color: var(--rojo); color: var(--tinta); font-weight: 700; }
.calc-fase-dot.es-activa span { background: var(--rojo); color: #fff; }
.calc-fase-dot.es-lista { cursor: pointer; }
.calc-fase-dot.es-lista span { background: var(--verde); color: #fff; }
.calc-resumen-vivo {
text-align: center; font-family: var(--dato); font-size: .78rem; color: var(--texto-3);
margin: 0 0 1.4rem; min-height: 1.2em;
}
.calc-fase-panel[hidden] { display: none; }
.calc-nav { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; }
.calc-nav [hidden] { display: none; }
.calc-boton-calcular {
display: inline-flex; align-items: center; gap: .6rem;
padding: 1.05rem 2rem; border-radius: 999px;
background: var(--rojo); color: #fff; font-weight: 800; font-size: var(--t-md);
box-shadow: 0 10px 30px rgba(238,65,68,.4);
transition: transform .2s var(--ease), background .2s var(--ease);
}
.calc-boton-calcular:hover { background: var(--rojo-osc); transform: translateY(-2px); }
.calc-boton-calcular[hidden] { display: none; }
.calc-aviso {
text-align: center; color: var(--rojo-osc); background: var(--rojo-suave);
border-radius: 999px; padding: .55rem 1.1rem; font-size: var(--t-sm); font-weight: 600;
width: fit-content; margin: 1rem auto 0;
}
.calc-aviso[hidden] { display: none; }
/* --- pausa publicitaria --- */
.calc-anillo-caja { position: relative; width: 5.4rem; height: 5.4rem; }
.calc-anillo { width: 100%; height: 100%; transform: rotate(-90deg); }
.calc-anillo circle { fill: none; stroke-width: 7; }
.calc-anillo-fondo { stroke: var(--cal-2); }
.calc-anillo-avance {
stroke: var(--rojo); stroke-linecap: round;
stroke-dasharray: 213.6; stroke-dashoffset: 213.6;
transition: stroke-dashoffset 1s linear;
}
@media (prefers-reduced-motion: reduce) { .calc-anillo-avance { transition: none; } }
.calc-anillo-num {
position: absolute; inset: 0; display: grid; place-items: center;
font-family: var(--dato); font-size: 1.7rem; font-weight: 800; color: var(--rojo);
}
.calc-etapas { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0; padding: 0; list-style: none; }
.calc-etapas li {
font-family: var(--dato); font-size: .72rem; color: var(--texto-3);
padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--borde-2); background: #fff;
}
.calc-etapas li.es-activa { border-color: var(--rojo); color: var(--rojo-osc); font-weight: 700; }
.calc-etapas li.es-lista { border-color: var(--verde); color: var(--verde); }
.calc-etapas li.es-lista::before { content: "✓ "; }
.calc-carga-ad-grande { width: 100%; max-width: 400px; min-height: 250px; }
/* --- resultado: métricas --- */
.calc-metricas { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.1rem; }
.calc-metrica {
display: inline-flex; align-items: baseline; gap: .45rem;
background: #fff; border: 1px solid var(--borde-2); border-radius: 999px;
padding: .5rem 1rem; font-size: var(--t-xs); color: var(--texto-3);
}
.calc-metrica b { font-family: var(--dato); font-size: var(--t-sm); color: var(--tinta); }
.calc-metrica[hidden] { display: none; }
.calc-fila-grupo-sub { float: right; font-family: var(--dato); letter-spacing: 0; text-transform: none; }
.calc-tabla-costos tr.calc-fila-total td { font-weight: 800; border-top: 2px solid var(--tinta); padding-top: .75rem; font-size: var(--t-md); }
/* --- lista de compras marcable --- */
.calc-check-grupo { margin-bottom: 1.1rem; }
.calc-check-grupo:last-child { margin-bottom: 0; }
.calc-check-grupo-tit {
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
color: var(--texto-3); font-weight: 700; margin: 0 0 .35rem;
}
.calc-check-item {
display: flex; align-items: center; gap: .75rem;
padding: .5rem .2rem; border-top: 1px solid var(--borde-2); cursor: pointer;
}
.calc-check-item input { width: 1.15rem; height: 1.15rem; accent-color: var(--verde); flex: 0 0 auto; }
.calc-check-txt { flex: 1; font-size: var(--t-sm); }
.calc-check-txt small { display: block; color: var(--texto-3); font-size: .74rem; }
.calc-check-precio { font-family: var(--dato); font-size: var(--t-sm); white-space: nowrap; }
.calc-check-item:has(input:checked) .calc-check-txt,
.calc-check-item:has(input:checked) .calc-check-precio { text-decoration: line-through; opacity: .45; }
.calc-avance { text-align: center; font-family: var(--dato); font-size: .75rem; color: var(--verde); min-height: 1.1em; margin-top: .5rem; }
/* --- repartir las compras --- */
.calc-reparto-cabeza { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.calc-reparto-sel {
font-family: var(--dato); font-size: var(--t-sm); padding: .4rem .7rem;
border: 1px solid var(--borde-2); border-radius: .6rem; background: #fff; color: var(--tinta);
}
.calc-reparto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-top: 1rem; }
.calc-reparto-col { border: 1px solid var(--borde-2); border-radius: var(--r); padding: .9rem 1rem; background: #fff; }
.calc-reparto-tit { display: flex; justify-content: space-between; font-weight: 800; font-size: var(--t-sm); margin: 0 0 .5rem; }
.calc-reparto-tit span { font-family: var(--dato); color: var(--rojo-osc); }
.calc-reparto-col ul { margin: 0; padding: 0; list-style: none; }
.calc-reparto-col li { font-size: .82rem; padding: .28rem 0; border-top: 1px solid var(--borde-2); }
.calc-reparto-col li small { color: var(--texto-3); }
/* --- compartir --- */
.calc-compartir-fila { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.4rem; }
.calc-btn-compartir {
display: inline-flex; align-items: center; gap: .5rem;
padding: .75rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: var(--t-sm);
border: 1px solid var(--borde-2); background: #fff; color: var(--tinta);
transition: transform .2s var(--ease);
}
.calc-btn-compartir:hover { transform: translateY(-1px); }
.calc-btn-compartir.es-wsp { background: var(--verde); border-color: var(--verde); color: #fff; }
/* --- tabla de referencia estática (visible siempre, también sin JS) --- */
.calc-tabla-ref { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.calc-tabla-ref th, .calc-tabla-ref td { padding: .5rem .6rem; border: 1px solid var(--borde-2); text-align: center; }
.calc-tabla-ref th { background: var(--cal-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.calc-tabla-ref td:first-child { text-align: left; font-weight: 600; }
.calc-tabla-ref td { font-family: var(--dato); }
/* ------------------------------------------------------------------
Menú del celular — que quepan los cuatro ítems
------------------------------------------------------------------
Medido en 375 px: los cuatro ítems suman 297 px, pero con separaciones
de 17,6 px el menú llega a 382 y el botón de idioma queda cortado por
la mitad en el borde derecho.
El menú YA es deslizable, así que el botón no se pierde — pero verse
mochado se lee como error, no como "hay más a la derecha". Con una
separación proporcional al ancho de pantalla los cuatro entran enteros
en un iPhone SE y siguen holgados en pantallas más anchas.
Se agrega al final y no se edita la regla original a propósito: este
archivo lo toca también el otro agente, y un bloque marcado al final
es más fácil de ver y de revertir que un cambio en medio.
------------------------------------------------------------------ */
@media (max-width: 719px) {
.menu ul { gap: clamp(.55rem, 3vw, 1.1rem); }
}
/* ------------------------------------------------------------------
Botón flotante de compartir — solo el icono en pantallas chicas
------------------------------------------------------------------
Con la palabra "Compartir" mide 131 px de ancho y en la portada cae
justo encima de la cifra de fondas del hero: se lee "COMUNAS 35
REGIONES 9" y del primer dato no se ve nada. Es el número que sostiene
la credibilidad del sitio, así que no puede quedar tapado.
Solo con el icono baja a unos 44 px y deja las tres cifras libres. No
se pierde accesibilidad: el botón ya trae aria-label="Compartir esta
página", que es lo que anuncia un lector de pantalla — el texto
visible era redundante.
------------------------------------------------------------------ */
@media (max-width: 420px) {
.btn-compartir-flotante {
padding: .7rem;
gap: 0;
}
/* se oculta el del texto, nunca el del icono */
.btn-compartir-flotante > span:not(.btn-compartir-flotante-icono) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}