/* MOLDE DE LANDING — hoja de estilos.
Sale de `demos/mar-del-plata/latercera-v2`, que a su vez es el sistema de
`edison-lawn-tenis` (CSS + un solo IntersectionObserver, cero librerías) traducido a
fondo oscuro. El reproductor de video con audio viene de `forzaclub`, y la banda con la
foto casi clavada, de `Plantillas/panaderia-san-benedetto`.
── LO ÚNICO QUE SE TOCA POR CLIENTE ES LA PIEL ──
La piel son los dos `@font-face` de acá abajo y el bloque `:root`. Todo lo demás del
archivo está escrito contra esas variables y no hay que abrirlo. Si aparece la
tentación de tocar una regla de más abajo para un cliente, casi siempre lo que falta es
una variable nueva en `:root`.
── EL MOLDE ES DE FONDO OSCURO ──
Esto es un techo conocido, no un descuido: los velos, los bordes y los textos apagados
se calculan con `--tinta-rgb` y `--crema-rgb`, así que una piel clara se logra dando
vuelta esos dos pares (tinta = el papel, crema = la tinta del texto). Anda, pero hay
que mirar las capturas: las sombras siguen siendo negras y algunos velos quedan
pesados. Si el negocio pide sí o sí una página clara y luminosa, el preset `astra` o
`gastro` llegan más rápido que forzar este.
── POR QUÉ HAY VARIABLES `-rgb` ──
Los velos, los bordes translúcidos y los brillos necesitan el color con alfa. Como
`rgba()` no acepta un hex de una variable, cada color que se usa con transparencia
viaja además en su versión "10, 14, 10". Van juntas y con el mismo valor: si se cambia
`--tinta` hay que cambiar `--tinta-rgb`. */
/* ── Tipografías, servidas desde el proyecto ──
Nunca desde Google Fonts: un a un dominio ajeno son dos viajes encadenados
—primero baja el CSS, y recién ahí empieza a bajar la fuente—. Los .woff2 van en
`assets/fonts/` ya subseteados al alfabeto latino, y precargados desde el .
La DISPLAY se elige midiéndola contra el logo del cliente, que es el trabajo que no se
puede automatizar. Si viene en un solo grosor (Anton, por ejemplo), los títulos NO
llevan `font-weight: 700`: pedírselo hace que el navegador la engorde por su cuenta y
la letra sale sucia, con los trazos embarrados. Por eso el peso de los títulos está
fijado en 400 más abajo y se sube acá solo si la fuente elegida trae ese grosor de
verdad.
La manuscrita de guiño es opcional y la trae el preset `gastro`: acá no va, salvo que
el logo del cliente tenga algo cursivo. Meterla porque queda linda es inventarle a la
marca algo que no tiene. */
@font-face {
font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap;
src: url('assets/fonts/jost-600.woff2?v=1') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/switzer-400.woff2?v=1') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap;
src: url('assets/fonts/switzer-500.woff2?v=1') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap;
src: url('assets/fonts/switzer-600.woff2?v=1') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap;
src: url('assets/fonts/switzer-700.woff2?v=1') format('woff2');
}
/* ── LA PIEL ──
Los colores salen del logo del cliente (`armar.mjs preparar` los extrae y calcula el
contraste de cada uno, pero no elige: elige el agente). Dos reglas que no se negocian:
1. `--crema-soft` sobre `--tinta` tiene que dar 4,5:1 o más. Es el gris de todas las
bajadas, o sea la mitad del texto de la página.
2. El verde de WhatsApp (`--wa`) es SOLO de los botones que abren un chat. Si el acento
del cliente también es verde, hay que separarlos bien —o correr el acento a otro
lado—: si se mezclan, se deja de saber qué abre el WhatsApp. */
:root {
--tinta: #F4F8F7; /* el fondo base */
--tinta-rgb: 244, 248, 247; /* el mismo, para los velos y las sombras */
--tinta-alt: #E6EFED; /* la banda alterna: secciones con .alt */
--panel: #FFFFFF; /* tarjetas y bloques sobre cualquiera de los dos fondos */
--crema: #11302C; /* el texto */
--crema-rgb: 17, 48, 44; /* el mismo, para bordes y textos apagados */
--crema-soft: #456260; /* las bajadas. Contraste ≥ 4,5:1 sobre --tinta */
--acento: #27AFA1; /* el color de la marca: superficies y bandas */
--acento-rgb: 39, 175, 161;
--acento-hi: #0E7A70; /* la versión clara: texto y detalles chicos sobre oscuro */
--acento-hi-rgb: 14, 122, 112;
--acento-2: #27AFA1;
/* El color del texto que va ENCIMA de --acento-2 (la tira que se desplaza). No se deduce
de la piel: --acento-2 suele ser un color claro y vistoso, así que el texto de la
página no le sirve. Si la tira queda ilegible, es esta variable. */
--acento-2-ink: #0B2A26; /* el segundo acento, el que da el brillo */
--acento-2-rgb: 39, 175, 161;
--acento-3: #BEE6E0; /* el terciario: links y detalles */
--acento-3-hi: #DCF1EE;
--wa: #25D366; /* el verde de WhatsApp: se reconoce antes de leer el botón */
--wa-rgb: 37, 211, 102;
--wa-ink: #04220F; /* el texto adentro del botón de WhatsApp */
--star: #E0A32A; /* las estrellas de las opiniones */
--display: 'Jost', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
/* El peso con el que se dibujan los títulos. Va acá porque depende de la fuente elegida:
una que viene en un solo grosor (Anton) tiene que quedarse en 400 —pedirle 700 hace que
el navegador la engorde solo y la letra sale sucia—, y una variable puede ir a 600 o 700
de verdad. */
--display-peso: 600;
/* El velo del hero y el color del texto que va encima. En una piel oscura repiten
`--tinta-rgb` y `--crema`; en una clara van oscuro y blanco (ver el comentario del
bloque .hero). */
/* Cuánto aire llevan las letras de los títulos. Sale de la fuente elegida: una
condensada se apretuja sola y no quiere nada, y una geométrica ancha —las de los
logotipos en versalitas— necesita aire o se ve amontonada. */
--display-tracking: .005em;
/* El tope del titular del hero. Va acá porque el ancho de una fuente decide cuánto entra
en un renglón: la misma frase que en una condensada entra en dos líneas, en una
geométrica se parte en tres y rompe el bloque. */
--h1-max: 5.4rem;
--hero-velo: 10, 24, 23;
--hero-tinta: #FFFFFF;
--body: 'Switzer', system-ui, -apple-system, sans-serif;
--maxw: 1140px;
--radius: 14px;
--ease: cubic-bezier(.22, 1, .36, 1);
/* De qué color es la sombra y cuánta fuerza tiene. En una piel OSCURA la sombra es negra
y a fondo (0,0,0 y 1); en una CLARA tiene que ser el marrón del papel y a un tercio, o
queda un manchón sucio alrededor de cada tarjeta. Lo mismo el brillo de los botones:
sobre fondo oscuro suma luz, sobre fondo claro resta. Por eso no son colores fijos. */
/* La palabra más larga del h1 y el ancho medio de una mayúscula en la display elegida
(Anton ~.42, Oswald ~.46, Alfa Slab ~.60, Archivo ~.62). Con los dos, el h1 de celular
nunca se sale de la pantalla, sea cual sea el nombre del negocio. */
/* Cuánto acento se lava sobre la foto del hero. Sube el color de marca, pero si la foto ya
tiene ese color —una marca roja sobre una pila de ladrillos— hay que bajarlo o queda todo
del mismo tono. Y el filete bajo el titular: va en 0 salvo que la marca lo tenga en su
propio logotipo, como El Jardín. */
--hero-lavado: .10;
--h1-filete: 0;
--h1-l2: 1em;
--h1-l2-track: inherit;
/* Cómo se separa del fondo una ficha (la chapa de puntaje, las reseñas, los cuatro
puntos). En piel OSCURA lo hace la sombra: un filete no se vería. En piel CLARA es al
revés — la sombra deja una banda sucia debajo de cada tarjeta y lo que limpia es un
filete de 1px, que es como se ven las de San Benedetto. Las FOTOS no entran acá: una
foto levantada de la página con sombra queda bien en las dos pieles. */
--ficha-borde: rgba(17, 48, 44, .12);
--ficha-sombra: 0 1px 2px rgba(17, 48, 44, .05), 0 10px 30px rgba(17, 48, 44, .06);
--h2-min: 2.2rem;
--h2-max: 3.5rem;
--faq-fuente: var(--display);
--faq-peso: 600;
--faq-caja: none;
--h1-chars: 12;
--h1-ancho: .5;
--sombra-rgb: 17, 48, 44;
--sombra-k: .28;
--glow-k: .18;
--shadow: 0 14px 34px rgba(var(--sombra-rgb), calc(.5 * var(--sombra-k)));
/* Alto de la banda con la foto casi clavada, y cuánto se corre la foto respecto del
scroll. La deriva NO es decorativa: con 0 la foto queda clavada del todo y en Safari
se siente pegajosa, porque ahí el motion atado al scroll corre en el hilo principal y
queda un frame atrás. Ese atraso solo se nota en algo que debería estar quieto. */
--banda: 54vh;
--deriva: .4;
/* Los brillos: en vez de repetir el mismo box-shadow en cinco lugares, viven acá. */
--glow-acento: 0 0 28px rgba(var(--acento-hi-rgb), calc(.38 * var(--glow-k)));
--glow-acento-2: 0 0 26px rgba(var(--acento-2-rgb), calc(.42 * var(--glow-k)));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--tinta);
color: var(--crema);
font-family: var(--body);
font-size: 16.5px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* El `height: auto` no es de adorno: los llevan width y height como atributos para
* reservar el espacio y no mover la página al cargar, y sin esto el alto del atributo se
* respeta al pie de la letra mientras el ancho lo achica `max-width`. Resultado: la foto
* estirada a lo alto. Las reglas que sí fijan un alto (el hero, el marquee) son más
* específicas y siguen ganando. */
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--acento-3-hi); }
h1, h2, h3 {
font-family: var(--display); font-weight: var(--display-peso); line-height: 1.08;
letter-spacing: var(--display-tracking); text-transform: uppercase; margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
/* Va por DEBAJO del alto del header bajado (~60px): la sección entra apenas por detrás
del header y del bloque anterior no asoma nada. El aire lo pone el padding propio de
la sección, que ya mide más de 100px. Con el valor "correcto" (8rem, que era la regla
vieja) lo que se ve al tocar un link del nav es una tira del bloque anterior. */
.section[id] { scroll-margin-top: 2.5rem; }
/* Fuera del flujo para no empujar la foto del hero: el header es fixed y no ocupa lugar
propio, así que la foto llega hasta el borde de arriba. */
#top { position: absolute; top: 0; height: 1px; width: 1px; }
.title { font-size: clamp(var(--h2-min), 5.2vw, var(--h2-max)); margin-bottom: 1.5rem; }
.lead { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--crema-soft); max-width: 60ch; }
.alt { background: var(--tinta-alt); }
/* ── Header ──
Arriba de todo es invisible y flota sobre la foto del hero; al bajar toma el fondo
tinta con desenfoque. El velo degradado del ::before garantiza que el blanco se lea
sobre cualquiera de las cuatro fotos del pase. El disparador es un centinela de 1px,
no el evento scroll, que corre en cada frame. */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: rgba(var(--tinta-rgb), 0);
/* Arriba de todo el header flota sobre la foto del hero, así que su texto va del color
del hero; al bajar, cuando toma fondo propio, pasa al color de la página. Con una piel
clara esto es lo que evita que el nav quede en gris oscuro sobre una foto oscura. */
color: var(--hero-tinta);
border-bottom: 1px solid transparent;
transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* La barra del header no se encajona en el ancho del texto: con los 1140px del contenido,
en una pantalla grande el logo y el botón de WhatsApp quedan flotando cerca del medio y
la navegación se apretuja. El nav es cromo, no texto que haya que leer en línea corta,
así que se estira y usa los bordes de la pantalla. */
.site-header .wrap {
max-width: min(1560px, 100%);
padding-inline: clamp(1.1rem, 3vw, 2.6rem);
}
.site-header::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(var(--hero-velo), .8), rgba(var(--hero-velo), 0) 92%);
transition: opacity .35s ease;
}
.site-header.scrolled {
background: rgba(var(--tinta-rgb), .88);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom-color: rgba(var(--crema-rgb), .1);
box-shadow: 0 6px 24px rgba(var(--sombra-rgb), calc(.4 * var(--sombra-k)));
color: var(--crema);
}
.site-header.scrolled::before { opacity: 0; }
/* Con el panel del menú abierto el header seguía transparente y el logo quedaba flotando
sobre la foto del hero. `:has` lo pinta sin tocar el JS: el panel ya lleva su clase. */
/* Y el color del texto también: arriba del hero el header escribe con --hero-tinta, que en
una piel CLARA es blanco. Con el panel abierto el fondo pasa a ser claro, así que sin esto
el nombre del negocio desaparece — se ve sólo abriendo el menú, nunca en una captura. */
.site-header:has(.site-nav.abierto) { background: var(--tinta); color: var(--crema); }
.site-header:has(.site-nav.abierto)::before { opacity: 0; }
/* El achique toca el layout (padding y tamaño del logo) en vez de escalar: un scale es
solo visual, el logo seguiría ocupando sus 46px y la barra no bajaría. Se puede porque
el header es fixed y el recálculo no sale de estos cinco elementos. */
.header-in {
position: relative; display: flex; align-items: center; gap: .8rem;
padding-block: .75rem; transition: padding-block .35s ease;
}
.site-header.scrolled .header-in { padding-block: .6rem; }
/* El ancho y el redondeo salen de la proporción del archivo, que la calcula `armar.mjs`:
* un escudo va cuadrado y redondo, y un logotipo apaisado va a lo largo y sin recorte. Con
* el 50% fijo, a un logotipo la elipse le come la primera y la última letra. */
.mark {
width: 51px; height: 46px; border-radius: 50%; flex: none;
/* Sin esto, un logo que no llega al umbral de 'apaisado' (1.4) entra en una caja
cuadrada y se estira. Con contain nunca se deforma, sea cual sea su proporción. */
object-fit: contain;
transition: width .35s ease, height .35s ease;
}
.site-header.scrolled .mark { width: 44px; height: 40px; }
/* Un logo de tinta oscura desaparece sobre la foto del hero, que es justo la primera pantalla.
Si el proyecto trae `assets/logo-hero.webp` —el mismo logo con el texto en claro— se usa ese
mientras el header está encima del hero, y se vuelve al normal al bajar. El símbolo de color
se deja como está: lo que hay que aclarar es el logotipo, no la marca entera.
Sin ese archivo no cambia nada, así que las páginas que no lo tienen siguen igual.
Va con el panel del menú abierto también: ahí el fondo ya es claro y el logo claro
desaparecería (25/08/2026). */
.mark-hero { display: none; }
.site-header:not(.scrolled):not(.menu-abierto) .mark-hero { display: block; }
/* El :not(:only-of-type) es lo que evita que el header quede SIN logo arriba del hero:
si el proyecto no trae logo-hero, el .mark-base es el único del brand y no se
esconde. Antes esta regla lo ocultaba igual y la primera pantalla salía sin marca. */
.site-header:not(.scrolled):not(.menu-abierto) .mark-base:not(:only-of-type) { display: none; }
.brand { display: flex; align-items: center; gap: .7rem; min-height: 44px; text-decoration: none; color: inherit; }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font-family: var(--display); font-size: 1.16rem; font-weight: var(--display-peso); letter-spacing: .01em; text-transform: uppercase; }
.brand small {
font-size: .72rem; color: inherit; opacity: .85; letter-spacing: .04em;
/* La bajada del header va SIEMPRE en una línea. Partida en dos renglones desalinea el
logo y hace crecer el header justo donde menos lugar hay. */
white-space: nowrap;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { font-size: .88rem; font-weight: 500; color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
/* Ya bajado, el header tiene fondo propio y los links pueden respirar un poco apagados;
arriba, sobre la foto, van a full o se pierden. */
.site-header.scrolled .site-nav a { opacity: .9; }
/* El hover era --acento-3-hi, casi blanco: con el header bajado (fondo claro) desaparecía.
Sobre la foto va el verde agua de la marca; con fondo claro, la versión oscura. */
.site-nav a:hover { color: var(--acento); }
.site-header.scrolled .site-nav a:hover { color: var(--acento-hi); opacity: 1; }
.soc { display: flex; gap: .7rem; margin-left: -.4rem; }
/* La palabra solo acompaña al ícono en el panel del celular: en la barra de escritorio
el ícono solo alcanza y "Instagram" escrito al lado compite con los links. */
.soc-txt { display: none; }
.soc a { display: flex; align-items: center; justify-content: center; min-width: 24px; min-height: 44px; color: inherit; }
.soc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.header-in .btn-wa { margin-left: 1.4rem; padding: .55rem 1rem; font-size: .85rem; }
/* ── Menú hamburguesa (solo celular) ── */
.burger {
display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
background: 0; border: 0; cursor: pointer;
/* 44×44 es el mínimo tocable, y acá importa más que en ningún otro lado: es el único
control del header en el celular. El dibujo sigue siendo el mismo, lo que crece es
la caja que registra el dedo. */
min-width: 44px; min-height: 44px; padding: 0; margin-right: -10px;
}
.burger span {
width: 22px; height: 2px; border-radius: 2px; background: currentColor;
transition: transform .3s var(--ease), opacity .2s ease;
}
/* Las tres barritas se cruzan en X: la del medio se apaga y las otras dos giran. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 899px) {
/* El auto va acá y no en .site-nav: abajo de 900px el nav es `position: absolute`, así
que no ocupa lugar en la fila y su margin-left no empuja nada. Sin esto la hamburguesa
queda pegada al nombre del negocio en vez de irse al borde derecho. */
.burger { display: flex; margin-left: auto; }
.soc-txt { display: inline; }
/* Panel sólido y no translúcido: arriba de todo el header es transparente sobre la foto
del hero, y con fondo semitransparente el menú quedaría ilegible sobre la foto. */
.site-nav {
position: absolute; top: 100%; left: 0; right: 0; margin: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--panel); padding: .4rem 1.2rem 1.1rem;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 20px 40px rgba(var(--sombra-rgb), calc(.5 * var(--sombra-k)));
/* El visibility no es decorativo: sin él el panel sigue en el flujo de foco y se
tabula hacia links que están fuera de pantalla. */
transform: translateY(-115%); visibility: hidden;
transition: transform .4s var(--ease), visibility .4s;
}
.site-nav.abierto { transform: translateY(0); visibility: visible; }
.site-nav a {
display: block; color: var(--crema); font-size: 1.02rem; font-weight: 500;
padding-block: .85rem; border-bottom: 1px solid rgba(var(--crema-rgb), .1);
}
/* El SVG va como bloque y el conjunto con line-height 1: un SVG inline se apoya en la
línea base del texto y arrastra el hueco del descender, que lo dejaba un par de
píxeles más arriba que la palabra. */
.site-nav .soc { margin: .9rem 0 0; }
.site-nav .soc a {
display: inline-flex; align-items: center; gap: .55rem;
/* --acento-hi y no --acento-3-hi: el panel del menú es `--panel`, que en una piel
clara es BLANCO, y el tinte 3-hi es el más pálido de la paleta —sobre blanco
queda en 1,2:1 y la palabra "Instagram" directamente no se ve—. `--acento-hi`
es, por definición, el que contrasta contra el panel de cada piel. */
color: var(--acento-hi); font-weight: 600; font-size: .98rem; line-height: 1;
border-bottom: 0; padding-block: 0;
}
.site-nav .soc svg { display: block; width: 22px; height: 22px; }
.header-in .btn-wa { margin-left: .6rem; margin-right: .2rem; order: 3; }
/* Sin la bajada el nombre entra en un renglón; con ella el header del celular se
partía en cuatro líneas y se comía media pantalla del hero. */
.brand small { display: none; }
.brand b { font-size: .98rem; }
.mark, .site-header.scrolled .mark { width: 42px; height: 38px; }
}
@media (max-width: 560px) {
/* En el celular el del header se saca: era un segundo círculo verde igual al flotante,
en la misma pantalla. El flotante alcanza y queda donde llega el pulgar. */
.header-in .btn-wa { display: none; }
}
/* ── Botones ──
El verde de WhatsApp significa una sola cosa en toda la página: "esto te abre un
chat". Ningún otro elemento lo usa. */
.btn-wa {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--wa); color: var(--wa-ink);
font-weight: 600; text-decoration: none;
padding: .85rem 1.5rem; border-radius: 999px;
position: relative; overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
box-shadow: 0 6px 18px rgba(var(--wa-rgb), calc(.3 * var(--sombra-k))), var(--glow-acento);
cursor: pointer;
}
.btn-wa svg { fill: var(--wa-ink); flex: none; }
@media (hover: hover) {
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--wa-rgb), calc(.5 * var(--sombra-k))), 0 0 40px rgba(var(--acento-hi-rgb), calc(.5 * var(--glow-k))); }
}
.btn-wa::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%);
transform: translateX(-120%);
}
@media (hover: hover) { .btn-wa:hover::after { transition: transform .6s ease; transform: translateX(120%); } }
.btn-wa--xl { padding: 1rem 1.9rem; font-size: 1.04rem; }
.btn-wa--xl::after { animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.btn-ghost {
display: inline-flex; align-items: center; gap: .5rem;
color: var(--crema); font-weight: 600; text-decoration: none;
padding: .95rem 1.6rem; border-radius: 999px;
border: 1.5px solid rgba(var(--crema-rgb), .5);
transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
@media (hover: hover) { .btn-ghost:hover { background: rgba(var(--crema-rgb), .12); border-color: var(--crema); transform: translateY(-2px); } }
/* Los del hero van del color del hero y no del de la página: están sobre el velo oscuro,
así que con una piel clara el color de texto normal los deja invisibles. */
.hero-cta .btn-ghost { color: var(--hero-tinta); border-color: rgba(255, 255, 255, .55); }
@media (hover: hover) { .hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: var(--hero-tinta); } }
/* FAB flotante: círculo, solo ícono */
.wa-float {
position: fixed; right: 1.1rem; bottom: max(1.25rem, env(safe-area-inset-bottom));
z-index: 70; width: 3.5rem; height: 3.5rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: var(--wa); color: var(--wa-ink);
box-shadow: 0 8px 22px rgba(var(--wa-rgb), calc(.45 * var(--sombra-k))), var(--glow-acento);
transition: transform .2s ease;
}
.wa-float svg { fill: var(--wa-ink); }
@media (hover: hover) { .wa-float:hover { transform: scale(1.07); } }
.wa-float::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid var(--wa); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
/* ── Hero: foto a pantalla completa con pase de cuatro ── */
/* El hero tiene su propio par de colores y NO usa el de la página. Esto no es un lujo: en
una piel oscura el velo oscurece la foto y el texto claro se lee, pero en una piel clara
ese mismo velo la BLANQUEA y la foto desaparece detrás de una lechada. La salida es la
que usa cualquier web clara con hero de foto: velo oscuro y texto blanco arriba, resto de
la página claro. Con una piel oscura, `--hero-velo` y `--hero-tinta` valen lo mismo que
`--tinta-rgb` y `--crema`, y no cambia nada. */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end;
color: var(--hero-tinta); overflow: clip;
}
.hero-media { position: absolute; inset: 0; }
/* Las cuatro fotos apiladas; solo la que tiene .activa está visible. El cruce es un
fundido largo para que no se sienta un cambio de diapositiva. */
.hero-media picture {
position: absolute; inset: 0; display: block;
opacity: 0; transition: opacity 1.2s ease;
}
.hero-media picture.activa { opacity: 1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Las fotos son 4:3 y el celular las recorta a lo alto. En la del plantel la gente está
en la mitad de abajo, así que el encuadre se corre para no cortarles la cabeza. */
@media (max-width: 700px) {
.hero-media picture:nth-child(2) img { object-position: center 62%; }
}
.hero::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(80% 55% at 22% 78%, rgba(var(--acento-rgb), var(--hero-lavado)), transparent 60%),
linear-gradient(90deg, rgba(var(--hero-velo), .78) 0%, rgba(var(--hero-velo), .4) 58%, rgba(var(--hero-velo), .18) 100%),
linear-gradient(200deg, rgba(var(--hero-velo), .3) 0%, rgba(var(--hero-velo), .52) 52%, rgba(var(--hero-velo), .9) 100%);
}
.hero-in { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vw, 5rem); }
.hero h1 {
font-size: clamp(3.1rem, 9.2vw, var(--h1-max)); font-weight: var(--display-peso);
line-height: .96; margin-bottom: .38em; color: var(--hero-tinta);
text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}
/* El filete del logotipo, repetido DENTRO del titular, entre la marca y su bajada: es el
gesto propio del cartel de El Jardín y de cualquier marca armada así. Va con --h1-l2, que
achica y espacia la segunda línea: juntos reproducen el lockup del logotipo —la marca
grande, el filete, la bajada chica— en vez de dos renglones del mismo tamaño.
El alto y los márgenes se atan a --h1-filete con min() porque con el filete en 0 la barra
no se veía pero el bloque SEGUÍA ocupando 7px + .6em: en un titular de 6.4rem eso son casi
70px de aire metidos entre las dos líneas del nombre, en toda página que no use filete —o
sea casi todas— y sin que nada avise (25/08/2026, Cuniberti). Con min() un filete real
—siempre de decenas de px— da los mismos valores de antes, así que las páginas ya
publicadas se reconstruyen idénticas. */
.hero h1 .ln:first-child::after {
content: ''; display: block; background: var(--acento-2);
width: var(--h1-filete); height: min(7px, var(--h1-filete));
margin-block: min(.34em, var(--h1-filete)) min(.26em, var(--h1-filete));
}
.hero h1 .ln:last-child { font-size: var(--h1-l2); letter-spacing: var(--h1-l2-track); }
/* Sin opacidad: sobre una foto, bajarle aunque sea un 10% al blanco lo mete adentro del
fondo. El contraste lo da el velo, no la transparencia del texto. */
.hero .lead { color: var(--hero-tinta); max-width: 48ch; font-size: clamp(1.05rem, 2.2vw, 1.2rem); }
.hero-cred {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
margin: 1.3rem 0 1.7rem; font-size: .92rem; font-weight: 500; color: var(--hero-tinta);
}
.hero-cred .stars { color: var(--star); letter-spacing: .12em; font-size: 1rem; }
.hero-cred .sep { opacity: .4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
/* El botón mide 30px aunque el punto sea de 9: abajo de 24px el dedo no acierta y
Lighthouse lo marca como target chico. El punto lo dibuja el ::after. */
.hero-dots { display: flex; gap: .15rem; margin-top: calc(1.7rem - 7px); margin-bottom: -7px; margin-left: -.6rem; }
.hero-dots button {
/* 34×44 en vez de 30×30: el punto que se ve mide 9px, lo que crece es la zona tocable. */
width: 34px; height: 44px; padding: 0; border: 0; background: none;
cursor: pointer; display: grid; place-items: center;
}
.hero-dots button::after {
content: ''; width: 9px; height: 9px; border-radius: 999px;
/* Sobre la foto del hero manda --hero-tinta, no --crema: en una piel clara --crema es el
negro del texto, así que el punto quedaba negro sobre una foto oscura y no se veía. */
background: color-mix(in srgb, var(--hero-tinta) 45%, transparent);
transition: background .3s ease, width .3s ease;
}
.hero-dots button[aria-current="true"]::after { background: var(--acento-2); width: 24px; box-shadow: var(--glow-acento-2); }
/* ── Motion del hero ──
El titular sube desde atrás del renglón: cada línea va en una cajita con el desborde
oculto. El padding + margin negativo le da aire a las colas de las letras para que el
recorte no se las coma, sin tocar el interlineado. */
.ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; padding-top: .16em; margin-top: -.16em; }
@keyframes sube { from { transform: translateY(112%); } to { transform: none; } }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js-anim .hero .ln > span { display: block; animation: sube .8s var(--ease) both; }
.js-anim .hero .ln:nth-of-type(2) > span { animation-delay: .12s; }
.js-anim .hero .lead { animation: entra .55s var(--ease) .3s both; }
.js-anim .hero-cred { animation: entra .55s var(--ease) .42s both; }
.js-anim .hero-cta { animation: entra .55s var(--ease) .54s both; }
.js-anim .hero-dots { animation: entra .55s var(--ease) .66s both; }
/* Parallax y salida del hero atados al scroll, que corren fuera del hilo principal.
El @supports no es opcional: sin él, un navegador que no entiende la línea de tiempo
de scroll ejecuta la animación una vez al cargar, que es lo contrario de lo buscado. */
@supports (animation-timeline: scroll()) {
@keyframes parallax { to { transform: translateY(7%); } }
@keyframes heroSale { to { opacity: 0; transform: translateY(-40px); } }
.js-anim .hero-media {
animation: parallax linear both;
animation-timeline: scroll(); animation-range: 0 100vh;
}
.js-anim .hero-in {
animation: heroSale linear both;
animation-timeline: scroll(); animation-range: 25vh 88vh;
}
}
/* ── Venta: lo primero que se ve al bajar del hero ──
El texto pesa más que la foto (1.15 contra 1) porque acá lo que vende son los cuatro
puntos concretos del negocio. La foto acompaña. */
.venta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.venta-ph img {
border-radius: var(--radius); width: 100%;
height: clamp(340px, 42vw, 520px); object-fit: cover;
box-shadow: var(--shadow);
}
.features {
list-style: none; margin: 2rem 0 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
}
.features li {
display: flex; align-items: center; gap: .8rem;
background: var(--panel); border-radius: 12px; padding: .95rem 1.1rem;
border: 1px solid var(--ficha-borde);
}
/* El ícono va en su propia chapita de color: sobre el panel oscuro un trazo suelto se
pierde. Y son íconos dibujados, no emojis: el emoji lo dibuja cada sistema operativo a
su manera y en pantalla grande se lee como un adorno pegado encima. */
.features svg {
flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 10px;
background: rgba(var(--acento-hi-rgb), .14); color: var(--acento-hi);
stroke: currentColor; fill: none; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.features b { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.venta .btn-wa { margin-top: 2rem; }
@media (max-width: 1000px) { .features { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
.venta-grid { grid-template-columns: 1fr; }
.venta-ph { order: -1; }
/* En una sola columna el botón pegado a la izquierda queda descolgado debajo de una
grilla de tarjetas que sí ocupa todo el ancho. Centrado cierra el bloque. */
.venta .btn-wa { display: flex; margin-inline: auto; width: fit-content; }
}
/* ── Las tres líneas de negocio: bandas grandes con video ──
Van como bandas y no como tarjetas porque cada una es un negocio distinto con su
propio precio y su propia conversación de WhatsApp, y porque el material que hay
para mostrarlas es video vertical, que en una tarjeta chica no se ve. */
.panel {
display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center;
padding-inline: max(clamp(1.1rem, 4vw, 2rem), (100% - var(--maxw)) / 2);
}
/* Los servicios alternan el lado del medio para que no se lean como la misma plantilla
repetida cuatro veces. El HTML de todos es igual —texto y después medio—, así que la
inversión la hace el `order` y no el orden de los tags: así el que lee con lector de
pantalla siempre escucha el título antes que "video de tal cosa".
OJO: acá va -1, no 2. Con `order: 2` el medio queda IGUAL que sin la clase (el texto
tiene order 0 y ya venía primero), y eso es exactamente lo que le pasaba a la primera
versión de La Tercera: los cuatro servicios tenían el video a la derecha y la clase
`panel--inv` no hacía nada. Se ve solo midiendo, no mirando una captura. */
.panel--inv .panel-media { order: -1; }
@media (max-width: 860px) {
.panel { grid-template-columns: 1fr; }
.panel-media, .panel--inv .panel-media { order: -1; }
}
.panel .lista { margin: 1.3rem 0 0; padding: 0; list-style: none; color: var(--crema-soft); font-size: .97rem; }
.panel .lista li { padding-left: 1.35rem; position: relative; margin-bottom: .45rem; }
.panel .lista li::before {
content: ''; position: absolute; left: 0; top: .52em;
width: 8px; height: 8px; border-radius: 50%; background: var(--acento-2);
}
.panel-quote {
margin: 1.5rem 0 0; padding: 1.1rem 1.3rem; background: var(--panel);
border-left: 3px solid var(--acento-3); border-radius: 0 10px 10px 0; font-size: .95rem;
}
.panel-quote .stars { color: var(--star); font-size: .85rem; letter-spacing: .1em; display: block; margin-bottom: .3rem; }
.panel-quote b { display: block; margin-top: .45rem; font-size: .82rem; color: var(--crema-soft); font-weight: 500; }
.panel .btn-wa { margin-top: 1.6rem; }
/* ── Reproductor de video (patrón de forzaclub) ──
El video arranca CON AUDIO al tocar play, que es lo que se pidió. Por eso no puede
autoreproducirse: ningún navegador deja arrancar con sonido sin que alguien toque algo.
`preload="none"` es lo que hace que esto no pese: los tres mp4 suman 8 MB y no se baja
ni un byte hasta que alguien aprieta play. Mientras tanto se ve el poster, que son 60K. */
.reel-player {
position: relative; border-radius: 18px; overflow: hidden;
aspect-ratio: 9 / 16; background: #000; box-shadow: var(--shadow);
max-width: 380px; margin-inline: auto; width: 100%;
}
.reel-player video { width: 100%; height: 100%; object-fit: cover; }
/* Para el video que no viene vertical. Forzado al marco 9:16 el recorte se come casi la
mitad del cuadro por los costados, así que ese reproductor toma la forma del video. */
.reel-player--cuadrado { aspect-ratio: 1; max-width: 440px; }
.reel-play, .reel-restart {
position: absolute; border: 0; cursor: pointer; display: grid; place-items: center;
transition: transform .2s ease, opacity .25s ease, background .2s ease;
}
/* El play va con el segundo acento y nunca con el verde de WhatsApp: un play verde haría
dudar antes de tocarlo, porque en el resto de la página ese verde abre un chat. */
.reel-play {
inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
background: var(--acento-2); color: var(--tinta);
box-shadow: 0 10px 30px rgba(var(--sombra-rgb), calc(.55 * var(--sombra-k))), var(--glow-acento-2);
}
.reel-play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
@media (hover: hover) { .reel-play:hover { transform: scale(1.08); background: color-mix(in srgb, var(--acento-2) 88%, #fff); } }
/* Mientras corre, el botón central se va; al pausar o terminar vuelve, y ahí funciona
como "reproducir de nuevo". */
.is-playing .reel-play { opacity: 0; pointer-events: none; transform: scale(.7); }
.reel-restart {
right: .8rem; bottom: .8rem; width: 42px; height: 42px; border-radius: 50%;
background: rgba(var(--tinta-rgb), .6); color: var(--crema);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
}
.reel-restart svg { width: 20px; height: 20px; fill: currentColor; }
.is-playing .reel-restart { opacity: 1; pointer-events: auto; }
.reel-restart:hover { background: rgba(var(--tinta-rgb), .85); }
/* Aviso de que tiene sonido: si no, el que lo toca en el celular a la noche se lleva
un susto y lo primero que hace es cerrar la página. */
.reel-nota {
text-align: center; font-size: .82rem; color: var(--crema-soft);
margin: .8rem 0 0; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.reel-nota svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* ── Tira de texto que se desplaza (bloque opcional) ──
Reusa el keyframe mq (-50%), que cierra sin salto porque el contenido está duplicado
exacto en el HTML. No se frena con el mouse encima (pedido de Ciro, 22/09/2026): la tira
y el carrusel siguen moviéndose siempre. */
.tira { overflow: hidden; background: var(--acento-2); padding-block: .95rem; }
.tira-track {
display: flex; align-items: center; gap: 2.2rem; width: max-content;
animation: mq 34s linear infinite;
}
.tira-track span {
font-family: var(--display); font-weight: var(--display-peso); text-transform: uppercase;
letter-spacing: .01em; font-size: clamp(.92rem, 1.8vw, 1.12rem);
white-space: nowrap; color: var(--acento-2-ink);
}
.tira-track i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--acento-2-ink) 55%, transparent); flex: none; }
/* ── Galería: carrusel de fotos (bloque opcional) ──
Está hecha para fotos VERTICALES, porque es el formato que suele haber: si el material
viene del Instagram del negocio, casi todo va a ser 4:5 o 9:16. Recortar eso a lo ancho
pierde media foto. Con menos de 8 fotos buenas el bloque no va: el carrusel se repite
antes de terminar de pasar y se nota. */
.mq { overflow: hidden; margin-top: 2.6rem; position: relative; }
.mq-track { display: flex; gap: 14px; width: max-content; animation: mq 46s linear infinite; }
.mq img { height: clamp(230px, 30vw, 330px); width: auto; border-radius: 12px; }
@keyframes mq { to { transform: translateX(-50%); } }
/* El keyframe recorre la mitad del track, no una distancia fija. En el celular las fotos
son más bajas, el track queda más angosto y esa misma mitad son menos píxeles: con los
46s de escritorio el carrusel se siente frenado. */
@media (max-width: 860px) { .mq-track { animation-duration: 30s; } }
.gal-ig { text-align: center; margin: 2rem 0 0; font-size: .95rem; color: var(--crema-soft); }
/* El handle va con la tinta plena y no heredando el gris de la bajada: es el único link de
la sección y tiene que pesar más que el texto que lo presenta, no menos. Heredando
--crema-soft quedaba más tenue que "Más en" y Lighthouse lo marcaba por contraste
(a11y 96 en Cuniberti, 25/08/2026). El subrayado sí queda tenue, que es lo que lo hace
leerse como link sin gritar. */
.gal-ig a { color: var(--crema); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
/* ── Opiniones: fichas con formato de Google ──
Es el bloque estándar de todas las landings del taller. Cinco piezas que no se
negocian: la chapa de puntaje arriba, el logo de Google en cada ficha, la fecha
ABSOLUTA de la reseña —"hace 2 meses" empieza a mentir al mes siguiente—, carrusel con
scroll-snap en el celular y grilla de tres en escritorio, y la pista de deslizar solo
en el celular. */
/* El título va centrado como la chapa de puntaje que tiene debajo: a la izquierda quedaba
desalineado con el único elemento con el que comparte ancho. */
.opiniones .title { text-align: center; }
.g-resumen {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
width: fit-content; margin: 0 auto; padding: 1rem 1.5rem;
background: var(--panel); border-radius: var(--radius);
border: 1px solid var(--ficha-borde); box-shadow: var(--ficha-sombra);
}
.g-logo { width: 1.5rem; height: 1.5rem; flex: none; }
.g-resumen .puntaje { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; margin: 0; }
.estrellas-fijas { color: var(--star); letter-spacing: .06em; font-size: 1.02rem; }
.g-resumen small { display: block; color: var(--crema-soft); font-size: .86rem; }
.g-resumen a {
margin-left: .4rem; font-weight: 600; font-size: .92rem;
/* 44px de alto táctil. Es un link suelto en su propia línea, no uno metido dentro de un
renglón de texto, así que la excepción de la norma no lo cubre y Lighthouse lo marca.
El subrayado pasa de border-bottom a text-decoration para que el padding no lo despegue
del texto: con border-bottom quedaba flotando 10px más abajo. */
display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem;
color: var(--acento-hi);
text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px;
}
@media (hover: hover) { .g-resumen a:hover { color: var(--crema); } }
/* En celular el carrusel se sale del `.wrap` a propósito y se pone él mismo la sangría:
así la primera ficha respeta el margen de la página, la última no queda pegada al borde
y —lo importante— la siguiente asoma lo suficiente para que se entienda que hay más. Sin
esto asomaban once píxeles, que no se leen como un carrusel sino como algo mal dibujado. */
.op-viewport {
display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; margin-top: 1.8rem; padding-bottom: .5rem;
--sangria: clamp(1.1rem, 4vw, 2rem);
margin-inline: calc(-1 * var(--sangria));
padding-inline: var(--sangria);
scroll-padding-inline: var(--sangria);
}
.op-viewport::-webkit-scrollbar { display: none; }
/* En escritorio deja de ser carrusel: si no, las últimas fichas no se ven nunca. */
@media (min-width: 900px) {
.op-viewport {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
overflow: visible; margin-top: 2.2rem; padding-bottom: 0;
margin-inline: 0; padding-inline: 0;
}
}
.op {
/* `start` y no `center`: con la sangría de arriba, cada ficha frena alineada con el
margen de la página, que es donde el ojo la espera. */
flex: 0 0 min(340px, 84vw); scroll-snap-align: start;
background: var(--panel); border-radius: var(--radius); padding: 1.4rem;
display: flex; flex-direction: column; margin: 0;
border: 1px solid var(--ficha-borde); box-shadow: var(--ficha-sombra);
transition: transform .25s ease;
}
@media (hover: hover) { .op:hover { transform: translateY(-4px); } }
.op-cab { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.op-ava {
width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
display: grid; place-items: center; color: #fff;
font-weight: 700; font-size: .88rem; line-height: 1;
}
.op-cab div { margin-right: auto; min-width: 0; }
.op cite { display: block; font-style: normal; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.op small { display: block; color: var(--crema-soft); font-size: .8rem; }
.op .estrellas { color: var(--star); letter-spacing: .08em; font-size: 1rem; }
.op p { margin: .6rem 0 0; font-size: .97rem; color: rgba(var(--crema-rgb), .9); }
.pista { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .85rem; color: var(--crema-soft); }
.pista svg {
width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2;
animation: desliza 1.6s ease-in-out infinite;
}
@keyframes desliza { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (min-width: 900px) { .pista { display: none; } }
/* ── Ubicación ── */
.locale-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.locale-info { display: flex; flex-direction: column; gap: 1.05rem; }
.locale-item { display: flex; gap: .8rem; align-items: flex-start; }
/* --acento-hi y no --acento-3-hi, por lo mismo que el ícono de redes del menú: el tinte 3-hi
es el más pálido de la paleta y está pensado para fondo oscuro. En una piel clara estos
tres íconos y el "Cómo llegar" quedaban en 1,1:1, o sea invisibles. `--acento-hi` es, por
definición, el que contrasta contra el fondo de cada piel. */
.locale-item svg { flex: none; margin-top: .2rem; stroke: var(--acento-hi); fill: none; stroke-width: 1.8; width: 22px; height: 22px; }
.locale-item b { display: block; font-size: .95rem; }
.locale-item span { color: var(--crema-soft); font-size: .92rem; }
.locale-item a { color: var(--acento-hi); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
/* El fondo no es decorativo: hasta que el iframe recibe su src pinta blanco, y sin esto
el hueco del mapa se ve como un rectángulo blanco en medio de una sección oscura. */
.locale-map {
position: relative; border-radius: var(--radius); box-shadow: var(--shadow);
background: var(--panel); overflow: hidden;
}
.locale-map iframe { width: 100%; height: 380px; border: 0; display: block; border-radius: var(--radius); }
@media (max-width: 860px) { .locale-grid { grid-template-columns: 1fr; } }
/* Panel de sucursales del WhatsApp. `