/* Conecta Mascotas — el front. NO EDITAR ACA: lo genera
   `tienda/construir-front.py`, y los colores salen de `tienda/paleta.py`. */

:root{
  --verde:#26452F; --crema:#EFE8DA; --ambar:#BE8A00;
  --tinta:#000000; --gris:#6B6559; --linea:#E2DCCE; --papel:#fff;
  --ancho:1220px;
  --suave:#F7F3EA;
  --g:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--g);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* EL ANCHO ES LA SEGUNDA TIPOGRAFIA.
   `MARCA.md` §5 pide «tipografia seca», asi que no entra una serif de
   titulos: el contraste lo hace el EJE DE ANCHO de la misma Archivo, que
   es variable de 62 a 125. Los titulares van anchos, los rotulos van
   angostos y el texto se queda en el ancho normal. Son tres voces sin
   traer ni un archivo de fuente mas.
   Si el navegador no soporta el eje —o la fuente no carga— todo cae al
   ancho normal y la pagina se sigue leyendo igual. */
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.03;
  font-variation-settings:'wdth' 116}
p{margin:0}

.w{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 28px}

/* ── rótulo: el ladrillo tipográfico que ordena toda la página ── */
.rot{font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gris);
  font-variation-settings:'wdth' 84}
.num{font-family:var(--g);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  font-variation-settings:'wdth' 84}

/* ── encabezado ── */
.sup{position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--linea)}
.sup .w{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:66px}
.sup .logo img{height:40px;width:auto}
.sup nav{display:flex;gap:26px;align-items:center}
.sup nav a{text-decoration:none;font-size:14px;font-weight:600;
  letter-spacing:.01em}
.sup nav a:hover{color:var(--verde)}
/* Abajo del encabezado: verde grueso con su linea de ambar.
   Arriba: verde solo. El ambar en el borde superior de la pagina competia
   con la franja de la apertura, que es donde ese color tiene que llamar. */
.filo{height:11px;background:linear-gradient(to bottom,
  var(--verde) 0 8px, var(--ambar) 8px 11px)}
.filo.arriba{background:var(--verde)}

/* ── hero: verde, no foto ──
   La foto del atardecer se comia la pantalla sin decir que se vende. Ahora
   el fondo es el verde de la marca, el texto se queda a la izquierda y a la
   derecha entra lo que hay. */
.hero{background:var(--verde);color:#fff;position:relative;
  overflow:hidden}
/* `start` y no `center`: la columna de la derecha es mas alta —caja mas
   rotulo— y al centrar las dos, el texto quedaba flotando a media altura
   con el borde de la caja mas arriba. Alineados por arriba, las dos
   columnas empiezan en la misma linea. */
.hero .w{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;
  align-items:start;padding-top:54px;padding-bottom:58px}
/* Las dos columnas TIENEN que poder encoger. Un hijo de grid trae
   `min-width:auto`, o sea que no baja de lo que mide su contenido: los
   recortes del trio, con `max-width:none`, empujaban la columna y el hero
   entero se hacia mas ancho que la pantalla. Como `.hero` lleva
   `overflow:hidden` —lo necesita la franja del titular— el desborde no
   aparecia en `scrollWidth`: simplemente RECORTABA el titular. */
.hero .w > *{min-width:0}
.trio{min-width:0}
/* Mas chico y en UNA sola linea, tambien en el telefono: partido en dos
   («…SAN / BERNARDO») se leia como un error, no como un rotulo. El cuerpo
   y el espaciado bajan con la pantalla para que quepa sin cortarse. */
.hero .rot{color:rgba(255,255,255,.6);margin-bottom:16px;white-space:nowrap;
  font-size:clamp(8.5px,1vw,11px);letter-spacing:clamp(.08em,.5vw,.2em)}
/* Una franja continua que cruza el hero de borde a borde, por detras de
   todo. El truco: el titular es el ancla y un `::before` se estira 100vw a
   cada lado, asi la franja sale del contenedor centrado sin romperlo.
   `z-index:-1` la manda detras del texto pero deja arriba la caja de
   productos, que la tapa por la derecha.
   El tono es el mismo verde apenas oscurecido —#223F2B contra #26452F—. */
.hero h1{position:relative;display:block;font-size:clamp(34px,4.8vw,62px);
  color:#fff;padding:.24em 0;line-height:1.12}
/* `z-index:0` y el texto en un `span` con `z-index:1`. Con `-1` la franja
   se iba DETRAS del fondo verde del hero y desaparecia: no hay forma de
   quedar entre el fondo de un ancestro y su contenido sin apilar a mano. */
.hero h1::before{content:"";position:absolute;top:0;bottom:0;
  left:-100vw;right:-100vw;background:#223F2B;z-index:0}
.hero h1 span{position:relative;z-index:1}
.hero-t{max-width:none}
.hero-t p{margin-top:18px;max-width:none;color:rgba(255,255,255,.85);
  font-size:17px}
/* Dos planos, no un bloque plano: la caja crema FLOTA con sombra y la barra
   ambar se mete por debajo. Eso da volumen sin inventar ningun color nuevo.
   La caja va en crema —no blanca— porque el blanco partia el hero en dos
   mundos: el verde de la marca y un rectangulo de papel de nadie. */
.hero-i{position:relative;display:flex;flex-direction:column}
/* La caja no termina en un filo recto: es crema llena hasta el 80% y de ahi
   se desvanece rapido contra el verde. Se sigue leyendo como un rectangulo
   claro de inmediato, pero sin el borde duro de un recorte pegado.
   La sombra va como `drop-shadow` y no `box-shadow`: la de caja se dibuja
   sobre el rectangulo completo y habria devuelto justo el borde que el
   degradado esta quitando. */
.trio-caja{position:relative;z-index:2;display:block;padding:30px 28px 28px;
  background:radial-gradient(118% 128% at 50% 46%,
    var(--crema) 0 80%, rgba(239,232,218,0) 100%);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.42))}
/* Foto REAL de producto, no dibujo. Va sobre crema porque el packshot viene
   con fondo blanco: sobre el verde oscuro se recortaria como un parche.
   ⚠️ Hoy es solo el snack. De juguete y accesorio NO hay una sola foto en el
   proyecto —los catalogos de Rahue y Stay Happy son los dos de snacks—, asi
   que la burbuja nombra los tres y la imagen muestra el que existe. */
/* Tres productos REALES, recortados con fondo transparente, uno al lado del
   otro. Se igualan por ALTO —no por ancho— porque vienen con proporciones
   distintas: una bolsa, un palito y un frasco. Sin alto fijo, el palito se
   veria enorme al lado de la bolsa.
   ⚠️ Los tres son snacks: en el proyecto no hay ni una foto de juguete ni de
   accesorio. La burbuja nombra los tres tipos; las fotos muestran el que
   existe. Cuando lleguen las otras dos, se cambian los archivos y listo. */
.trio{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(14px,2.6vw,34px);height:clamp(140px,17vw,196px)}
/* Dos sombras encadenadas, no una: la primera es corta y pegada —la de
   contacto, la que dice que el producto se apoya en algo— y la segunda es
   larga y difusa, la del ambiente. Con una sola el recorte parece una
   calcomania; con las dos tiene volumen.
   `drop-shadow` y no `box-shadow` porque sigue la silueta del PNG, no el
   rectangulo de la imagen. */
.trio img{height:100%;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 2px 2px rgba(26,50,34,.34))
         drop-shadow(0 16px 22px rgba(26,50,34,.30))}
/* La burbuja: el rotulo de lo que hay, en ambar. Es el unico ambar del
   hero, y por eso se ve. */
/* Sin barra: solo el texto, en BLANCO sobre el verde. Da 10,63:1 —el ambar
   daba 3,46:1 y obligaba a un cuerpo minimo para ser legible—, asi que en
   blanco el tamano ya es una decision de diseno y no de contraste. */
.burbuja{background:none;color:#fff;text-align:center;
  font-weight:800;font-size:clamp(18px,2vw,24px);letter-spacing:-.015em;
  padding:0;margin:24px 0 0}

/* ── la franja de la apertura ──
   Era blanca y solo traia tres datos, y el llamado del 2 de noviembre vivia
   al final de la pagina, donde casi nadie llegaba. Ahora son una sola cosa,
   en ambar y justo despues del hero: la fecha manda y los datos la
   acompanan. */
/* La franja entera en el AMBAR DE LA PALETA —`#BE8A00`, `#BE8A00`—, no en
   el ambar oscurecido. Hasta el 05-09-2026 iba en `#A87A00` para que el
   «GRATIS» en crema alcanzara 3,16:1; con el texto en negro esa razon
   desaparece y el ambar de la marca da MAS contraste: 6,82:1 contra los
   5,45:1 que daba el oscuro. El oscuro se queda solo donde siempre fue su
   trabajo —el hover de los botones y del pie de las tarjetas—, que necesita
   ser un paso mas oscuro que la superficie. */
.datos{background:#BE8A00;color:#000000}
/* La foto del modulo, a la izquierda y chica. Antes ocupaba media pantalla
   abajo, en el bloque del lugar; aca acompana a la fecha, que es donde de
   verdad significa algo: «esto abre, y esto es». */
/* TRES columnas: la foto, la oferta y el cuando. Es el orden en que se
   pregunta —que es esto, que me llevo, cuando y donde—.
   La foto sale del contenedor y ocupa la franja ENTERA, pegada al borde
   izquierdo y de arriba a abajo: adentro del `.w` quedaba flotando con aire
   por los cuatro lados y parecia un recorte pegado. */
.datos{display:grid;grid-template-columns:clamp(190px,21vw,300px) 1fr;
  align-items:stretch}
.datos-foto{width:100%;height:100%;object-fit:cover;display:block}
.datos-cuerpo{display:grid;grid-template-columns:290px 1fr;gap:34px;
  align-items:center;padding:36px 28px 34px 40px}
/* Fila explicita en las dos: se les da una columna al reves del orden
   del HTML, y sin `grid-row` la segunda no puede retroceder a la fila 1
   —la colocacion automatica solo avanza— y caia a una fila nueva. */
.datos-t{grid-column:2;grid-row:1}
/* La columna del medio va CENTRADA: alineada a la izquierda dejaba un vacio
   grande entre el titular y la columna de datos, y el bloque se veia
   descolgado hacia un lado. */
.datos-t{text-align:center}
.gancho{font-size:clamp(24px,3.2vw,42px);line-height:1.06}
/* «GRATIS» EN BLANCO y el resto del gancho en negro. Decision de Arlette,
   14-09-2026.
   La regla de la casa —«el texto sobre el ambar es negro»— existe por
   contraste, y aca no se rompe: el blanco sobre `#BE8A00` da 3,08:1, que
   esta bajo el minimo de 4,5:1 del texto normal pero sobre el de 3:1 del
   texto GRANDE, y esta palabra mide entre 39 y 68 px en negrita. La regla
   sigue valiendo para todo lo demas de la franja, que es texto chico y
   sigue en negro.
   Sin `text-shadow`: ensucia el filo y el contraste ya alcanza. */
.gratis{display:block;font-size:1.62em;line-height:.98;
  letter-spacing:-.035em;color:#fff}
/* La condicion, en letra chica de verdad: lo que manda es el gancho. */
.chica{margin:14px auto 0;max-width:46ch;font-size:14.5px;line-height:1.5;
  color:rgba(0,0,0,.72)}
/* La tercera columna: los tres datos uno bajo el otro, separados de la
   fecha por un filo vertical. */
/* Va PRIMERO, antes del gancho: se dice cuando y donde, y despues que te
   llevas. Sin fondo propio —la franja entera ya es de este color—; lo que
   la separa es un filo a su derecha. */
.datos-f{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:13px;
  border-right:2px solid rgba(0,0,0,.24);padding-right:28px}
.datos-f .rot{color:rgba(0,0,0,.55)}
/* El enlace pasa a negro: en verde sobre este ambar daba 2,76:1, por debajo
   del minimo legible de 4,5:1. En negro da 5,45:1.
   Va como `.datos .datos-f a` porque `.datos a{color:var(--verde)}` tiene la
   misma especificidad y esta escrita despues: ganaba por orden. */
.datos .datos-f a{color:var(--tinta)}
.datos .datos-f a:hover{color:var(--verde)}
/* «Pronto apertura» encabeza la columna de los datos: es el titular del
   cuando, y ahi manda mas que como rotulo chico sobre el gancho. */
.pronto{font-size:clamp(17px,1.8vw,23px);font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.1;
  margin-bottom:4px}
.datos-f > div{min-width:0}
.datos b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em}
.datos .rot{margin-bottom:4px;color:rgba(0,0,0,.6)}
.datos a{color:var(--verde);text-decoration-thickness:2px;
  text-underline-offset:3px}
.datos a:hover{color:#1b3323}

/* ── la entrada a los momentos ── */
.intro{background:var(--verde);color:#fff;padding:84px 0 76px;
  text-align:center}
.intro .rot{color:rgba(255,255,255,.6)}
.intro h2{color:#fff}
.intro h2{font-size:clamp(30px,3.9vw,50px);max-width:19ch;margin:14px auto 0}
.intro .baja{margin:20px auto 0;max-width:56ch;
  color:rgba(255,255,255,.82);font-size:18px}
/* Centrados y en UNA fila mientras quepan: partidos, dejan de leerse como
   una secuencia, que es lo unico que tienen que decir. Con tres cabian
   siempre; desde el 14-09-2026 son CINCO y en un telefono una sola fila
   obligaria a un cuerpo ilegible, asi que abajo de 560px se permite que
   caigan a dos lineas. El orden se sigue leyendo igual.
   El aire de arriba y el de abajo son iguales: 20px a cada lado, y la linea
   de abajo es la que abre la seccion siguiente. */
/* Ahora la banda se cierra sola —filo arriba y abajo—: la linea de abajo la
   ponia la seccion siguiente, y con la entrada en verde esa seccion ya no
   empieza pegada. */
.tres{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;
  gap:0 0;margin-top:34px;padding:20px 0;
  border-top:2px solid var(--ambar);
  border-bottom:2px solid var(--ambar)}
.tres span{font-size:clamp(15px,2.5vw,32px);font-weight:800;
  letter-spacing:-.02em;white-space:nowrap}
.tres a{text-decoration:none;color:#fff}
.tres a:hover{color:var(--ambar)}
/* El punto va como `::after` del span ANTERIOR, no como `::before` del
   siguiente: cuando los cinco se parten en dos lineas en el telefono, un
   `::before` abre la segunda linea con un punto suelto. Pegado por detras
   se va con la palabra que lo precede y la linea nueva empieza en palabra. */
.tres span:not(:last-child)::after{content:"·";color:var(--ambar);
  margin:0 clamp(9px,1.4vw,18px);font-weight:800}

/* La seccion que sigue a la introduccion arranca con 20px, los mismos que
   separan la linea de arriba de las tres palabras. Asi la banda queda con el
   mismo aire por los dos lados. */
.intro + .sec{padding-top:70px}

/* ── secciones ── */
.sec{padding:86px 0}
/* El encabezado de cada momento va en una banda VERDE, no en una linea
   sobre blanco: asi cada tramo del surtido arranca con un corte claro. */
.sec-cab{display:flex;align-items:baseline;gap:18px;margin-bottom:26px;
  background:var(--verde);color:#fff;padding:20px 24px}
.sec-cab h2{font-size:clamp(24px,3vw,38px);color:#fff}
.sec-cab .num{color:var(--ambar);padding-top:6px}
.sec-cab p{margin-left:auto;max-width:34ch;color:rgba(255,255,255,.78);
  font-size:14.5px;text-align:right}

/* ── la placa: el bloque que manda ── */
/* La placa va en BLANCO y la entrada a los momentos en verde: antes era al
   reves. Decision de Arlette, 02-09-2026. */
.placa{background:var(--papel);color:var(--tinta)}
.placa .w{padding-top:96px;padding-bottom:96px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
/* Foto REAL en vez de la ilustracion: Arlette la encontro artificial. Es de
   Pexels, licencia de uso comercial sin atribucion.
   ⚠️ La placa del perro dice «Fluffy not fat», en ingles. Se ve chico, pero
   esta ahi. Cuando exista una foto propia, se reemplaza este archivo. */
.placa img{width:100%;height:auto;box-shadow:0 24px 48px -22px rgba(0,0,0,.7)}
.placa .rot{margin-bottom:20px}
.placa h2{font-size:clamp(34px,4.6vw,60px)}
.placa .baja{margin-top:20px;color:var(--gris);max-width:44ch}
.pasos{list-style:none;margin:38px 0 0;padding:0;display:grid;gap:0;
  counter-reset:paso}
.pasos li{counter-increment:paso;display:grid;grid-template-columns:44px 1fr;
  gap:18px;padding:18px 0;border-top:1px solid var(--linea)}
.pasos li:last-child{border-bottom:1px solid var(--linea)}
.pasos li::before{content:"0" counter(paso);color:var(--ambar);
  font-size:13px;font-weight:800;letter-spacing:.12em;padding-top:4px}
/* Los dos van en la columna 2. Sin esto el `span` cae a la del numero
   —44px— y el texto sale una palabra por linea. */
.pasos b{grid-column:2;display:block;font-size:17px}
.pasos span{grid-column:2;color:var(--gris);font-size:15px}
.pasos li::before{grid-row:span 2}

/* ── el catálogo ── */
.cat-cab{padding:44px 0 8px;max-width:56ch}
.cat-cab h1{font-size:clamp(34px,4.6vw,58px);margin-top:12px}
.cat-cab .baja{margin-top:18px;color:var(--gris);font-size:18px}
.cat-cab + .sec{padding-top:34px}

/* ── la fila de un momento en la portada ──
   Dos productos y la puerta al resto. Antes iban los tres o cuatro en una
   grilla de tres columnas, y «La espera» —que tiene dos— dejaba un hueco
   crema a la derecha que se leia como un error. */
.fila-mom{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
/* La foto del momento detras, con el verde encima. El degradado no es
   decoracion: la foto sola no deja leer el texto blanco, y un verde plano
   la taparia entera. Asi se ve de que se trata y se lee igual. */
.vermas{position:relative;color:#fff;text-decoration:none;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px 28px;gap:6px;background-size:cover;background-position:center}
.vermas::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,52,36,.55) 0%,
    rgba(28,52,36,.88) 62%, rgba(28,52,36,.96) 100%);
  transition:opacity .2s}
.vermas:hover::before{opacity:.82}
.vermas > *{position:relative;z-index:1}
.vermas b{font-size:22px;letter-spacing:-.025em}
.vermas span{color:rgba(255,255,255,.72);font-size:14px}
.vermas em{font-style:normal;font-size:26px;color:var(--ambar);margin-top:14px;
  transition:transform .18s}
.vermas:hover em{transform:translateX(6px)}
.volver-link{margin:34px 0 90px;font-size:15px;font-weight:600}
.volver-link a{color:var(--verde)}

/* ── productos ── */
/* Cuatro columnas y tarjetas SUELTAS, cada una con su borde.
   Antes eran tres columnas pegadas y el borde lo hacia el fondo de la
   grilla asomando por el `gap`. Eso tenia dos problemas: las tarjetas
   salian enormes, y donde faltaba un producto —«La espera» tiene dos— el
   fondo quedaba a la vista como un hueco crema. Con borde propio, la celda
   que sobra simplemente no existe. */
.grilla{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  background:none;border:0}
.pc{border:1px solid var(--linea)}
/* Tarjetas mas chicas: la foto pasa de cuadrada a 5:4 y con menos aire.
   En cuadrado, a tres columnas, cada packshot medía casi 400px de alto y la
   pagina se leia como una galeria de fotos y no como un surtido. */
/* LA TARJETA ES UNA REPISA DEL MUEBLE, y por eso lleva sus colores en el
   mismo orden: interior crema, canto ambar, y el pie en blanco.
   Hasta el 11-09-2026 era al reves —foto sobre blanco, pie mostaza entero—
   por un motivo que ya no existe: los packshots venian con fondo blanco y
   sobre la crema se recortaban como un parche de papel. `recortar-packshots.py`
   les saca el fondo, asi que ahora el producto se APOYA en la crema con su
   sombra, como el trio del hero, en vez de flotar en un vacio blanco.
   De paso el ambar deja de ser cuatro losas mostaza en fila y vuelve a ser
   lo que es en el mueble: un canto de 3 mm. */
.pc{background:var(--papel);padding:0;text-decoration:none;
  display:flex;flex-direction:column;overflow:hidden}
/* FLEX y no grid. La baldosa fija su alto con `aspect-ratio`, pero la FILA
   de una grilla se mide por su contenido: la imagen estiraba la fila, la
   caja se quedaba en su alto y `overflow:hidden` cortaba lo que sobraba.
   Se noto recien con los recortes, que son verticales (595x900); los
   packshots viejos eran cuadrados y nunca llegaban a sobrar. En flex el
   `max-height:100%` de la imagen se mide contra el alto de la caja, que si
   esta decidido. */
.pc .foto{background:var(--crema);aspect-ratio:5/4;display:flex;
  align-items:center;justify-content:center;
  padding:20px 30px;margin-bottom:0;position:relative;
  overflow:hidden;border-bottom:3px solid var(--ambar)}
/* Las dos sombras del hero, encadenadas: una corta de contacto —la que
   dice que el producto se apoya en la repisa— y una larga de ambiente.
   `drop-shadow` sigue la silueta del png; `box-shadow` dibujaria el
   rectangulo de la imagen. */
/* `width/height:100%` con `object-fit:contain`, y NO `max-height:100%`.
   Los packshots viejos eran cuadrados de 1200x1200 y con el maximo bastaba;
   los recortes salen verticales —595x900— y el maximo en porcentaje no los
   frenaba: la bolsa se salia de la baldosa por arriba y por abajo, y
   `overflow:hidden` la cortaba. Con `contain` la imagen se encaja sola y el
   aire lo pone el relleno de la baldosa. */
.pc .foto img{max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 1px 1px rgba(26,50,34,.30))
         drop-shadow(0 11px 15px rgba(26,50,34,.26));
  transition:transform .22s}
.pc:hover .foto img{transform:translateY(-5px)}
/* La foto de ambiente: sin aire, sin sombra y a sangre dentro de la
   baldosa. El canto ambar se mantiene, que es lo que la amarra a la
   tarjeta de al lado. */
.pc .foto.llena{padding:0}
.pc .foto.llena img{max-width:none;max-height:none;width:100%;height:100%;
  object-fit:cover;filter:none}
.pc:hover .foto.llena img{transform:scale(1.04)}
.pc .cuerpo{background:var(--papel);padding:14px 18px 16px;margin-top:auto;
  transition:background .18s}
.pc:hover .cuerpo{background:var(--suave)}
/* Cada parte del pie en su propia linea. Eran `span` sueltos y fluian en
   linea: donde el titulo era corto, «Ver la ficha» se subia al lado de la
   marca y el pie quedaba de dos lineas en vez de tres. Por eso una tarjeta
   terminaba mas arriba que la de al lado. */
.pc h3{font-size:17px;letter-spacing:-.02em;margin-bottom:5px;line-height:1.15;
  min-height:2.3em}
.pc .meta{display:block;color:var(--gris);font-size:13px}
/* En VERDE, no en negro. Iba negro mientras el pie era ambar —el verde ahi
   daba 2,76:1—; sobre el blanco de ahora da 11,6:1 y ademas es lo unico de
   color en el pie, que es lo que hace que se lea como un enlace. */
.pc .ver{margin-top:11px;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:var(--verde);display:flex;align-items:center;gap:8px}
.pc:hover .ver{gap:13px}
.sello{position:absolute;top:10px;left:10px;background:var(--verde);color:#fff;
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 8px}

/* ── el momento sin surtido ── */
.solo-isla{display:grid;grid-template-columns:1fr auto;gap:26px;
  align-items:center;background:var(--crema);padding:34px 34px;
  border-left:5px solid var(--ambar)}
.solo-isla p{color:var(--verde);font-weight:600;max-width:52ch}

/* ── el lugar ── */
/* Toda la seccion es verde y adentro van dos cosas: la direccion y el mapa
   como tarjeta, con verde alrededor. Antes el mapa era media seccion a
   sangre y se leia como un tajo, no como un apoyo a la direccion. */
.lugar{background:var(--verde)}
.lugar-i{display:grid;grid-template-columns:1fr 1fr;gap:52px;
  align-items:center;width:100%;max-width:var(--ancho);margin:0 auto;
  padding:64px 28px}
.lugar-t{color:#fff;display:flex;flex-direction:column;justify-content:center}
.lugar-t .rot{color:rgba(255,255,255,.55);margin-bottom:16px}
.lugar-t h2{font-size:clamp(30px,3.6vw,46px);color:#fff}
.lugar-t .dir{margin-top:10px;color:rgba(255,255,255,.84)}
.mall{background:#fff;padding:16px 22px;align-self:flex-start;
  margin-bottom:28px}
.mall img{height:74px;width:auto}
/* Sin cuenta regresiva aca: ya vive en la franja ambar, bajo CUÁNDO. Dos
   relojes en la misma pagina compiten y ninguno gana. */
.cuenta{margin-top:28px;font-size:30px;font-weight:800;letter-spacing:-.02em;
  color:var(--ambar)}

/* ── el mapa ──
   OpenStreetMap incrustado: sin llave, sin rastreo y de estilo apagado.
   `loading="lazy"` para que no pese en la primera carga, y un filo ambar
   arriba que lo amarra al resto del bloque. */
/* El mapa, como TARJETA: proporcion fija, filo ambar arriba y sombra. Es un
   objeto que acompana a la direccion, no una mitad de pantalla a sangre. */
.mapa{display:block;position:relative;background:#e8e3d8;overflow:hidden;
  aspect-ratio:4/3;border-top:4px solid var(--ambar);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
/* Sin `min-height` propio: el mapa se estira a lo que mida la fila, y la
   fila la decide el texto. Con 420px fijos el mapa mandaba y dejaba media
   columna verde vacia en anchos medios. */
.mapa img{width:100%;height:100%;object-fit:cover;
  object-position:center;transition:transform .4s}
.mapa:hover img{transform:scale(1.03)}
/* La licencia de OpenStreetMap exige el credito. No quitarlo. */
.credito{position:absolute;right:0;bottom:0;background:rgba(255,255,255,.82);
  color:#333;font-size:10px;letter-spacing:.02em;padding:3px 7px}

/* ── botón ── */
.btn{display:inline-block;background:var(--ambar);color:#000000;
  text-decoration:none;font-weight:800;font-size:15px;letter-spacing:.01em;
  padding:15px 30px;margin-top:26px;align-self:flex-start}
.btn:hover{background:#A87A00}
.btn.linea{background:transparent;color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn.linea:hover{background:rgba(255,255,255,.1)}

/* ── ficha de producto ── */
.miga{padding:26px 0 0;font-size:13.5px;color:var(--gris)}
.miga a{color:var(--gris)}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:64px;
  padding:34px 0 92px;align-items:start}
/* Flex por el mismo motivo que la baldosa de la tarjeta. */
.ficha .marco{background:var(--crema);aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;padding:52px;position:relative}
/* Las mismas dos sombras de la tarjeta, y el mismo encaje: el marco es
   cuadrado y el recorte es vertical, asi que sin `contain` se sale. */
.ficha .marco img{max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 2px 2px rgba(26,50,34,.30))
         drop-shadow(0 20px 26px rgba(26,50,34,.26))}
.ficha h1{font-size:clamp(30px,4vw,50px);margin-bottom:12px}
.ficha .desc{color:var(--gris);font-size:18px}
.ficha .mom{display:inline-block;margin-top:20px;background:var(--crema);
  color:var(--verde);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 14px}
.acor{border-top:1px solid var(--linea);padding:0}
.acor:last-of-type{border-bottom:1px solid var(--linea)}
.acor summary{cursor:pointer;list-style:none;padding:20px 0;
  font-weight:700;font-size:16px;display:flex;justify-content:space-between;
  align-items:center;gap:16px}
.acor summary::-webkit-details-marker{display:none}
.acor summary::after{content:"+";color:var(--ambar);font-weight:800;
  font-size:20px;line-height:1}
.acor[open] summary::after{content:"–"}
.acor .cuerpo{padding:0 0 22px;color:var(--gris);font-size:15.5px}
.acor dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 22px}
.acor dt{font-weight:700;color:var(--tinta)}
.acor dd{margin:0}
.bloques{margin-top:34px}

/* ── el Club ──
   LA SEGUNDA —y ultima— superficie ambar de la pagina. `paleta.py` dice que
   el ambar es el acento y va en UN solo lugar; la regla que quedo al armar
   este front es mas precisa y sirve mejor: el ambar marca los dos momentos
   en que la pagina PIDE algo —ven el 2 de noviembre, dejanos tu correo—.
   Todo lo demas informa, y va en verde o en blanco. Si el ambar apareciera
   ademas en una seccion que solo cuenta cosas, dejaria de significar eso.

   Es el mismo ambar de la franja de apertura, no uno nuevo: las dos tienen
   que leerse como la misma familia. Desde el 05-09-2026 las dos van en el
   ambar de la paleta `#BE8A00` y no en el oscurecido. */
/* EN CREMA CON BANDA AMBAR, no en ambar entero. La regla de arriba se
   mantiene —el ambar marca los dos momentos en que la pagina pide algo—,
   lo que cambia es COMO: la franja de apertura se queda en ambar lleno
   porque es la oferta y tiene que gritar, y el Club lo dice con una banda
   y su boton. Dos losas mostaza de pantalla completa en la misma pagina
   se leian como un formulario de tramite, y ademas contradecian a
   `paleta.py`, que dice que en el mueble el ambar es una franja delgada
   y en la web es EL BOTON. */
.club{background:var(--crema);color:#000000;
  border-top:10px solid var(--ambar)}
.club-i{display:grid;grid-template-columns:1fr 1fr;gap:52px;
  align-items:center;padding-top:66px;padding-bottom:62px}
.club-t{min-width:0}
.club .rot{color:rgba(0,0,0,.6);margin-bottom:14px}
.club h2{font-size:clamp(28px,3.4vw,44px);max-width:16ch}
/* Los negros translucidos NO son decorativos, son medidos. Sobre el ambar
   de la paleta `rgba(0,0,0,.82)` da 5,65:1 y `.78` da 5,31:1 —los dos sobre
   el minimo de 4,5:1—. Sobre el ambar oscuro que habia antes daban 4,69:1 y
   4,41:1, y el `.78` no pasaba: al aclarar la franja se gano margen, no se
   perdio. Aun asi no bajarlos «para suavizar»: el piso esta cerca. */
.club .baja{margin-top:15px;max-width:38ch;color:rgba(0,0,0,.82)}

.club-f{display:flex;flex-direction:column;gap:15px;min-width:0}
/* El campo y el boton pegados, sin separacion: son una sola pieza y asi se
   lee que el boton hace algo CON lo que escribiste. */
.club-linea{display:flex}
.club-linea input{flex:1 1 auto;min-width:0;border:0;border-radius:0;
  background:#fff;color:var(--tinta);font-family:inherit;font-size:16px;
  padding:17px 18px}
.club-linea input::placeholder{color:#8a8578}
.club-linea input:focus-visible{outline:3px solid var(--verde);
  outline-offset:-3px}
/* El boton NO puede ser el ambar de `.btn`: sobre esta franja seria
   invisible. Va en el verde del segundo paso de la rampa de marca
   (`DEGRADADO_MARCA[1]`), no en un color nuevo: contra el ambar da 4,24:1
   —el minimo para un elemento de interfaz es 3:1— y el blanco encima, 12,9:1.
   El verde de la casa, #26452F, se quedaba en 2,73:1 contra la franja
   oscura de antes; contra el ambar de la paleta sube a 3,46:1 y ya pasaria
   el minimo de 3:1. Se mantiene el paso mas oscuro porque da mas margen
   (4,24:1), pero la razon original ya no es la que era. */
/* El boton vuelve al AMBAR con texto negro, que es lo que manda `paleta.py`:
   «el ambar es EL BOTON, y nada mas». Estuvo en verde mientras la seccion
   entera era ambar, donde un boton ambar habria sido invisible.
   Va en el AMBAR OSCURO y no en el de la casa: sobre esta crema el #BE8A00
   da 2,52:1 contra el fondo y un control necesita 3:1 para que se vea DONDE
   empieza y donde termina. El #A87A00 —el segundo paso de la misma rampa,
   no un color nuevo— da 3,16:1, y el negro encima, 5,45:1. */
.club-linea button{flex:0 0 auto;border:0;border-radius:0;cursor:pointer;
  background:#A87A00;color:#000000;font-family:inherit;font-weight:800;
  font-size:15px;letter-spacing:.01em;padding:17px 30px}
.club-linea button:hover{background:#8F6800}

.club-ok{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:14px;line-height:1.45;color:rgba(0,0,0,.82);max-width:46ch}
.club-ok input{flex:0 0 auto;width:17px;height:17px;margin:2px 0 0;
  accent-color:var(--verde);cursor:pointer}
.club-chica{font-size:12.5px;line-height:1.5;max-width:48ch;
  color:rgba(0,0,0,.82)}

/* La trampa para robots y la etiqueta del campo: fuera de la pantalla, pero
   NO con `display:none` ni `visibility:hidden` —eso las esconde tambien del
   lector de pantalla, y la etiqueta tiene que seguir existiendo para quien
   navega a ciegas—. */
.trampa,.oculto{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}

/* ── gracias ── */
.gracias{background:var(--verde);color:#fff}
.gracias .w{padding-top:110px;padding-bottom:110px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.gracias .rot{color:rgba(255,255,255,.55);margin-bottom:16px}
.gracias h1{font-size:clamp(34px,4.6vw,58px);max-width:16ch}
.gracias .baja{margin-top:18px;max-width:44ch;color:rgba(255,255,255,.84)}
.gracias .btn{align-self:center}

/* ── pie ── */
.pie{background:var(--verde);color:#fff;margin-top:0}
/* DOS columnas, no tres: la de «Dónde estamos» repetia la direccion que
   esta justo arriba, con el mapa al lado. Un pie no es el lugar para decir
   otra vez lo que la seccion anterior acaba de decir mejor.
   Las dos que quedan usan el mismo ritmo interno: rotulo, bloque, aire. */
.pie .w{padding-top:60px;padding-bottom:56px;display:grid;
  grid-template-columns:1.3fr 1fr;gap:52px;align-items:start}
.pie > .w > div > *:first-child{margin-top:0}
.pie .rot{color:rgba(255,255,255,.5);margin:26px 0 8px}
.pie p{color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.55}
.pie p{max-width:34ch}
.pie p b{font-weight:700;color:#fff}
.pie a{color:#fff}
.pie img{height:40px;width:auto;margin-bottom:16px}

/* ── las marcas ──
   Texto, no logos: los logos de cada proveedor pelean entre si y le
   regalan la portada a ellos (`maqueta-marcas.html`). Una grilla de
   nombres, todos del mismo peso: ninguna marca manda sobre otra. */
.marcas{background:var(--papel);border-top:1px solid var(--linea)}
.marcas .w{padding-top:66px;padding-bottom:66px}
.marcas .rot{margin-bottom:14px}
.marcas h2{font-size:clamp(28px,3.4vw,44px);max-width:20ch}
.marcas .baja{margin-top:15px;max-width:46ch;color:var(--gris)}
.marcas ul{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linea);border-left:1px solid var(--linea)}
.marcas li{border-right:1px solid var(--linea);border-bottom:1px solid var(--linea);
  height:170px;padding:30px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-weight:800;font-size:26px;
  letter-spacing:-.01em;font-variation-settings:'wdth' 108}
.marcas li img{max-width:100%;max-height:100%;width:auto;height:auto}

@media (max-width:900px){
  .placa .w{grid-template-columns:1fr;gap:40px;
    padding-top:64px;padding-bottom:64px}
  .lugar-i{grid-template-columns:1fr;gap:32px;padding:46px 22px}

  .datos{grid-template-columns:1fr}
  .datos-foto{height:190px}
  .datos-cuerpo{grid-template-columns:1fr;gap:24px;padding:28px 22px}
  .datos-t,.datos-f{grid-column:1;grid-row:auto}
  .datos-f{flex-direction:row;flex-wrap:wrap;gap:16px 30px;
    border-right:0;border-bottom:2px solid rgba(0,0,0,.24);
    padding-right:0;padding-bottom:20px}
  .datos-f > div{flex:1 1 120px}
  .pronto{flex-basis:100%}
  .datos-foto{max-height:200px}


  .ficha{grid-template-columns:1fr;gap:34px}
  .hero .w{gap:26px;padding-top:52px;padding-bottom:52px}
  .hero-t p{max-width:none}
  .hero-i{padding:22px 18px 20px}
  .grilla{grid-template-columns:repeat(2,1fr);gap:14px}
  .fila-mom{grid-template-columns:1fr 1fr}
  .vermas{grid-column:1 / -1;flex-direction:row;
    align-items:center;gap:14px;padding:22px 24px}
  .vermas em{margin-top:0;margin-left:auto}
  .club-i{grid-template-columns:1fr;gap:30px;
    padding-top:52px;padding-bottom:50px}
  .club h2{max-width:none}
  .marcas .w{padding-top:52px;padding-bottom:52px}
  .gracias .w{padding-top:78px;padding-bottom:78px}
  .pie .w{grid-template-columns:1fr;gap:30px}
  .sec{padding:56px 0}
  .intro{padding:56px 0 50px}
  .sec-cab{flex-wrap:wrap}
  .sec-cab p{margin-left:0;text-align:left}
  .solo-isla{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grilla{grid-template-columns:1fr}
  .fila-mom{grid-template-columns:1fr}
  /* Recien aca se apilan: mas arriba las dos cajas caben al lado. */
  .hero .w{grid-template-columns:1fr;gap:26px}
  .sup .w{height:58px}
  .sup .logo img{height:32px}
  .sup nav{gap:16px}
  .tres{flex-wrap:wrap;row-gap:6px}
  .club-linea{flex-direction:column}
  .marcas ul{grid-template-columns:1fr}
  .marcas li{height:120px;padding:24px}
  .club-linea button{padding:16px 24px}
  .datos-f{gap:12px 14px}
  /* A este ancho tres columnas de 108px se salian por la derecha:
     3x108 + 2x18 = 360 y solo hay 324 utiles. */
  .datos-f > div{flex:1 1 86px}
  .datos b{font-size:15px}
  .datos .rot{font-size:10px;letter-spacing:.16em}
}