/* ===========================================================
   Gira Gira by Speed Queen — hoja de estilo de producción
   Valores: assets/tokens.css (única fuente). Diseño: maquetas aprobadas.
   Añade el responsive, que no venía diseñado (ver README § Responsive).
   =========================================================== */
@import url("tokens.css?v=00f194bc");

*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--gg-crema);font-family:var(--gg-font);color:var(--gg-tinta);
  -webkit-font-smoothing:antialiased;font-size:var(--gg-body-sm);line-height:1.6}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:var(--gg-naranja);text-decoration:none}
a:hover{color:var(--gg-naranja-hover)}
button,input{font-family:inherit}
:focus-visible{outline:2px solid var(--gg-naranja);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Movimiento ----------
   Reveal al entrar en viewport. El estado inicial solo se aplica si hay JS
   (html.js): sin JS el contenido tiene que verse igual, no quedarse invisible. */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .75s var(--gg-ease) var(--d,0ms),transform .75s var(--gg-ease) var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

@keyframes ggspin{to{transform:rotate(360deg)}}
.gira{animation:ggspin 58s linear infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .gira{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.wrap{max-width:var(--gg-max);margin:0 auto;padding:0 var(--gg-gutter)}
h1,h2,h3,h4{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:1.05}
p{margin:0}
.kicker{font-weight:700;font-size:var(--gg-meta);letter-spacing:var(--gg-track-kicker);
  text-transform:uppercase;color:var(--gg-naranja)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 22px;border-radius:var(--gg-radio);
  font-weight:700;font-size:var(--gg-meta);letter-spacing:.07em;text-transform:uppercase;
  border:1px solid transparent;transition:background .15s,color .15s,border-color .15s;min-height:44px}
.btn svg{width:14px;height:14px;flex:none}
.btn-p{background:var(--gg-naranja);color:#fff}
.btn-p:hover{background:var(--gg-naranja-hover);color:#fff}
.btn-s{background:#fff;border-color:var(--gg-naranja);color:var(--gg-naranja)}
.btn-s:hover{background:var(--gg-naranja);color:#fff}
.btn-w{background:#fff;color:var(--gg-naranja)}
.btn-w:hover{background:var(--gg-crema);color:var(--gg-naranja-hover)}

/* ---------- Nav ---------- */
/* z-index alto a propósito: Leaflet pinta sus capas y controles hasta 1000 y
   se comía la barra fija al hacer scroll sobre el mapa. */
.nav{position:sticky;top:0;z-index:1200;background:var(--gg-crema);border-bottom:1px solid var(--gg-borde)}
.nav-in{max-width:var(--gg-max);margin:0 auto;padding:0 var(--gg-gutter);height:var(--gg-nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:28px}
.nav-logo img{height:var(--gg-logo-nav);width:auto}
.nav-menu{display:flex;align-items:center;gap:clamp(16px,1.9vw,28px);list-style:none;margin:0;padding:0}
.nav-menu a,.nav-cta,.nav-tel{white-space:nowrap}
.nav-menu a{font-weight:700;font-size:12.5px;letter-spacing:var(--gg-track-nav);
  text-transform:uppercase;color:var(--gg-tinta)}
.nav-menu a:hover,.nav-menu a[aria-current]{color:var(--gg-naranja)}
.nav-end{display:flex;align-items:center;gap:18px}
.nav-tel{font-weight:700;font-size:12.5px;color:var(--gg-tinta);white-space:nowrap}
.nav-tel:hover{color:var(--gg-naranja)}
.nav-cta{padding:13px 18px;font-size:11px}
/* Selector de idioma: discreto, pero con área pulsable suficiente */
/* WhatsApp junto al teléfono: escribir o llamar, sin salir de la barra */
.nav-wa{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--gg-radio);background:var(--gg-wa);color:#fff;flex:none;transition:background .18s}
.nav-wa:hover{background:var(--gg-wa-hover);color:#fff}
.nav-lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--gg-borde-2);border-radius:var(--gg-radio);font-weight:700;font-size:11px;
  letter-spacing:.06em;color:var(--gg-tinta);transition:border-color .18s,color .18s}
.nav-lang:hover{border-color:var(--gg-naranja);color:var(--gg-naranja)}
.burger{display:none;background:none;border:0;padding:10px;color:var(--gg-tinta);min-height:44px;min-width:44px}
.burger svg{width:24px;height:24px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.04fr .96fr;min-height:580px}
.hero-media{position:relative;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-c{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:56px var(--gg-gutter);overflow:hidden}
/* Las franjas van a sangre, pero su contenido se alinea al contenedor de
   1360px: por eso el texto del hero se topa a media caja y se pega a ella. */
.hero-c>.in{position:relative;width:100%;max-width:calc(var(--gg-max) / 2 - var(--gg-gutter));margin-left:auto}
.hero-c .mark{position:absolute;right:-170px;top:-70px;width:470px;opacity:.05}
.hero h1{font-size:48px;line-height:1.02;margin:14px 0 0}
.hero h1 .o{color:var(--gg-naranja)}
.hero-p{font-size:var(--gg-body);line-height:1.75;color:var(--gg-grafito);margin:18px 0 0;max-width:52ch;text-wrap:pretty}
.hero-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Chip "Abierto ahora" sobre la foto del hero.
   El punto verde va en el tono claro: sobre foto el #2E8B57 se pierde. */
.hero-chip{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:var(--gg-tinta);padding:10px 14px;border-radius:var(--gg-radio);
  font-family:var(--gg-font-mono);font-size:11.5px;font-weight:500;letter-spacing:.02em;
  box-shadow:0 6px 18px -8px rgba(26,26,26,.45)}
/* sobre blanco el punto vuelve al verde saturado, que es el que sí contrasta */
.hero-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--gg-abierto-texto);flex:none}

/* Tarjeta buscador dentro del hero: atajo a las tres sedes más cercanas.
   El localizador completo con mapa sigue más abajo. */
.hero-bs{margin-top:26px;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:18px;max-width:480px}
.hero-bs form{display:flex;gap:8px;flex-wrap:wrap}
.hero-bs input{flex:1 1 190px;min-width:0;padding:12px 13px;border:1px solid var(--gg-borde-2);
  border-radius:var(--gg-radio);font-size:var(--gg-body-sm);background:var(--gg-crema);color:var(--gg-tinta);min-height:44px}
.hero-bs input::placeholder{color:var(--gg-placeholder)}
.hero-bs .geo-btn{display:inline-flex;align-items:center;gap:7px;padding:12px 14px;min-height:44px;
  background:var(--gg-naranja);color:#fff;border:0;border-radius:var(--gg-radio);cursor:pointer;
  font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hero-bs .geo-btn:hover{background:var(--gg-naranja-hover)}
.hero-bs .geo-st{font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-top:10px}
.hero-bs .geo-st:empty{display:none}
.hero-cerca{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--gg-borde-4)}
/* Solo tres a la vista: el resto está en el DOM para que el JS pueda
   reordenarlas por cercanía sin volver a pedir nada al servidor. */
.hero-cerca li{border-bottom:1px solid var(--gg-borde-4)}
.hero-cerca li:nth-child(n+4){display:none}
.hero-cerca a{display:flex;align-items:center;gap:12px;padding:11px 0;color:var(--gg-tinta);min-height:44px}
.hero-cerca a:hover .nm{color:var(--gg-naranja)}
.hero-cerca .nm{display:block;font-weight:700;font-size:var(--gg-body-sm)}
.hero-cerca .ad{display:block;font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-top:2px}
.hero-cerca .km{margin-left:auto;font-family:var(--gg-font-mono);font-size:11px;font-weight:600;
  color:var(--gg-naranja);white-space:nowrap}
.hero-bs .todas{display:inline-block;margin-top:13px;font-weight:700;font-size:var(--gg-meta);
  letter-spacing:var(--gg-track-label);text-transform:uppercase}

/* ---------- Sobre nosotros: "¿Por qué elegirnos?" (bento) ----------
   Tarjeta oscura destacada a la izquierda ocupando dos filas y cuatro
   tarjetas blancas numeradas. El copy es el aprobado por el cliente. */
.pq{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.pq .c{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.pq .c:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(26,26,26,.42);border-color:var(--gg-naranja)}
/* Cada ventaja lleva foto arriba y el texto debajo */
.pq .c-im{position:relative;overflow:hidden;background:var(--gg-arena);height:190px;flex:none}
.pq .c-im img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--gg-ease)}
.pq .c:hover .c-im img{transform:scale(1.04)}
.pq .c-tx{position:relative;padding:24px;flex:1}
.pq>.f .c-im{height:230px}
.pq>.f .c-tx{padding:32px 34px;display:flex;flex-direction:column;justify-content:center}
.pq .c .ic{display:grid;place-items:center;width:48px;height:48px;background:#FCEAE2;
  border-radius:var(--gg-radio);color:var(--gg-naranja)}
.pq .c .ic svg{width:23px;height:23px}
.pq .c .num{position:absolute;top:24px;right:24px;font-family:var(--gg-font-mono);
  font-size:12px;font-weight:600;color:var(--gg-placeholder)}
.pq .c h3{font-size:17px;margin-top:20px;letter-spacing:-.01em}
.pq .c p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:9px;line-height:1.65}

/* Tarjeta destacada: oscura, alta y con el símbolo girando de fondo */
.pq>.f{grid-row:span 2;background:var(--gg-tinta);border-color:var(--gg-tinta);
  overflow:hidden;display:flex;flex-direction:column;padding:0}
.pq>.f:hover{transform:none;box-shadow:none;border-color:var(--gg-tinta)}
.pq>.f .ic{width:52px;height:52px;background:rgba(255,122,82,.16);color:var(--gg-naranja-claro)}
.pq>.f h3{font-size:28px;color:#fff;margin-top:26px;line-height:1.1}
.pq>.f p{color:rgba(255,255,255,.76);margin-top:14px;font-size:var(--gg-body)}
.pq>.f .mark{position:absolute;right:-70px;bottom:-70px;width:260px;opacity:.10;pointer-events:none}

/* Variante de 3 tarjetas (empresas): la destacada ocupa la columna izquierda */
.pq-3{grid-template-columns:1.15fr 1fr 1fr}
.pq-3>.f{grid-row:span 1}

/* Sectores que trabajan con nosotros: rejilla 2×3 con icono */
.sec-g{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.sec-c{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:14px 16px;font-size:var(--gg-body-sm);font-weight:600;
  line-height:1.4;transition:border-color .2s var(--gg-ease)}
.sec-c:hover{border-color:var(--gg-naranja)}
.sec-c .ic{display:grid;place-items:center;width:28px;height:28px;flex:none;
  background:#FCEAE2;border-radius:2px;color:var(--gg-naranja)}

/* Hueco reservado para las fotos de las pantallas publicitarias */
.pg-ad-ph{display:grid;place-content:center;justify-items:center;gap:6px;min-height:280px;
  border:2px dashed var(--gg-borde-2);border-radius:var(--gg-radio);background:var(--gg-crema-2);
  text-align:center;padding:24px}
.pg-ad-ph span{font-weight:700;font-size:var(--gg-body-sm);color:var(--gg-gris)}
.pg-ad-ph small{font-size:var(--gg-meta);color:var(--gg-gris-suave)}

/* CTA naranja de cierre en la página de empresas */
.emp-cta{position:relative;overflow:hidden;background:var(--gg-naranja);color:#fff;
  border-radius:var(--gg-radio);padding:40px 44px}
.emp-cta .mark{position:absolute;right:-70px;bottom:-90px;width:240px;opacity:.12}
.emp-cta .in{position:relative;max-width:60ch}
.emp-cta h2{color:#fff;font-size:30px;line-height:1.1}
.emp-cta p{color:rgba(255,255,255,.94);font-size:17px;line-height:1.6;margin-top:12px;max-width:56ch}
.emp-cta .ayuda-b{margin-top:22px}

/* Intro con la primera frase destacada */
.pg-i2{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.pg-i2 .lead{font-size:21px;line-height:1.45;font-weight:600;letter-spacing:-.01em}
.pg-i2 .rule{width:38px;height:3px;background:var(--gg-naranja);margin:18px 0}
.pg-i2 p.rest{font-size:var(--gg-body);color:var(--gg-grafito);line-height:1.75;max-width:56ch}
.pg-i2 .im{position:relative;aspect-ratio:4/3;border-radius:var(--gg-radio);overflow:hidden;background:var(--gg-arena)}
.pg-i2 .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Ventajas (bento) ----------
   Ya no es una franja de columnas con filetes: tarjeta naranja destacada a la
   izquierda ocupando dos filas, y cuatro tarjetas blancas en 2×2. */
/* Aire simétrico: antes iba pegado al hero por arriba y descuadraba. */
.vent{display:grid;grid-template-columns:1.15fr repeat(2,1fr);gap:16px;padding-block:56px}
.vent>div{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:26px 24px;
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.vent>div:not(.vent-f):hover{transform:translateY(-4px);box-shadow:var(--gg-sombra-card);border-color:var(--gg-naranja)}

/* Tarjeta destacada */
.vent>.vent-f{grid-row:span 2;background:var(--gg-naranja);border-color:var(--gg-naranja);
  display:flex;flex-direction:column;justify-content:center;padding:40px 34px}
.vent-f .kicker{color:rgba(255,255,255,.85)}
.vent-f h2{font-size:34px;line-height:1.08;color:#fff;margin-top:14px}
.vent-f .rule{width:38px;height:3px;background:#fff;margin:20px 0}
.vent-f .lead{font-size:var(--gg-body);color:rgba(255,255,255,.92);line-height:1.65}

/* Chip de icono */
.vent .ic{display:grid;place-items:center;width:44px;height:44px;background:#FCEAE2;
  border-radius:var(--gg-radio);color:var(--gg-naranja)}
.vent .ic svg{width:22px;height:22px}
.vent .n{font-size:38px;font-weight:800;color:var(--gg-naranja);letter-spacing:-.025em;margin-top:20px;line-height:1}
.vent .lb{font-weight:700;font-size:11px;letter-spacing:var(--gg-track-kicker);text-transform:uppercase;margin-top:10px}
.vent .tx{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:8px;line-height:1.6}

/* ---------- Localizador ---------- */
.loca{background:var(--gg-crema-2);padding:54px 0 58px}
.loca-g{display:grid;grid-template-columns:.62fr 1.38fr;gap:44px;align-items:stretch}
/* el mapa se estira a la altura de la lista (evita el hueco al añadir sedes) */
.loca-g .mapa{height:auto;min-height:430px;align-self:stretch}
.loca h2{font-size:var(--gg-h2)}
.loca .sub{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:10px;line-height:1.7}
.loca-form{display:flex;gap:8px;margin:20px 0 4px;flex-wrap:wrap}
.loca-form input{flex:1;min-width:170px;padding:12px 14px;border:1px solid var(--gg-borde-2);
  border-radius:var(--gg-radio);background:#fff;font-size:var(--gg-meta);color:var(--gg-tinta);min-height:44px}
.loca-form input::placeholder{color:var(--gg-placeholder)}
.loca-form input:focus{outline:none;border-color:var(--gg-naranja)}
.geo-btn{display:inline-flex;align-items:center;gap:7px;padding:12px 16px;background:var(--gg-naranja);
  color:#fff;border:0;border-radius:var(--gg-radio);font-weight:700;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;min-height:44px}
.geo-btn:hover{background:var(--gg-naranja-hover)}
.geo-st{font-size:var(--gg-meta);color:var(--gg-gris-claro);min-height:18px;margin:8px 0 4px}
.loca-list{margin-top:6px}
.loca-list a{display:flex;align-items:flex-start;gap:10px;padding:13px 0;
  border-bottom:1px solid var(--gg-borde-3);color:var(--gg-tinta)}
.loca-list a:hover,.loca-list a:hover .ad{color:var(--gg-naranja)}
.loca-list .pin{width:17px;height:17px;color:var(--gg-naranja);flex:none;margin-top:1px}
.loca-list a>span{display:block;min-width:0}
.loca-list .nm{display:block;font-weight:700;font-size:var(--gg-meta);text-transform:uppercase;letter-spacing:.04em}
.loca-list .ad{display:block;font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-top:3px}
.loca-list .km{margin-left:auto;font-size:11px;color:var(--gg-gris-suave);white-space:nowrap;padding-left:8px}
.loca-all{display:inline-block;margin-top:16px;font-weight:700;font-size:var(--gg-meta);
  letter-spacing:.06em;text-transform:uppercase}
.mapa{height:430px;border:1px solid var(--gg-borde-2);border-radius:var(--gg-radio);overflow:hidden;background:var(--gg-crema-2)}
.mapa iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.35) contrast(.95)}

/* ---------- Cuatro pasos (bento) ----------
   Tres columnas: la 01 es una foto grande a la izquierda que ocupa las dos
   filas; 02 y 03 se reparten la fila de arriba a la derecha; la 04 cruza
   esas dos columnas abajo. En 02 y 03 la foto va arriba y el texto en un
   panel debajo; en la 04 el panel va a la izquierda y la foto a la derecha. */
.sec{padding-block:64px}
.sec>h2{font-size:var(--gg-h2)}

/* Cabecera de sección: titular a la izquierda, frase de apoyo a la derecha */
.sec-hd{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.sec-hd h2{font-size:42px;line-height:1.02}
.sec-hd .apoyo{border-left:2px solid var(--gg-naranja);padding-left:16px;max-width:34ch;
  font-size:var(--gg-body-sm);line-height:1.65;color:var(--gg-grafito);margin-top:6px}

.bento{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto;
  gap:16px;margin-top:30px}
/* Especificidad de una sola clase: así .pz-4 puede pasar a display:grid. */
.pz{position:relative;border-radius:var(--gg-radio);overflow:hidden;display:flex;flex-direction:column}
.pz-1{grid-column:1;grid-row:1/3;min-height:520px}
.pz-2{grid-column:2;grid-row:1}
.pz-3{grid-column:3;grid-row:1}
.pz-4{grid-column:2/4;grid-row:2}

.pz .im{position:relative;overflow:hidden;background:var(--gg-arena)}
.pz .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--gg-ease)}
.pz:hover .im img{transform:scale(1.04)}
.pz .tx{position:relative;padding:22px 24px 24px}
.pz h3{font-size:26px;letter-spacing:-.015em;color:#fff}
.pz p{font-size:var(--gg-body-sm);line-height:1.6;margin-top:7px;color:rgba(255,255,255,.86)}
/* Numeral fantasma: decorativo, nunca debe tapar el texto */
.pz .n{position:absolute;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.16);pointer-events:none;user-select:none}

/* 01 — foto a sangre, texto sobre el degradado, chapa naranja con el número */
.pz-1 .im{position:absolute;inset:0}
.pz-1 .im::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,26,26,0) 40%,rgba(26,26,26,.85) 100%)}
.pz-1 .tx{margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:0 20px;
  align-items:center;padding:30px 32px 34px}
.pz-1 .n{position:static;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--gg-naranja);color:#fff;font-size:22px;letter-spacing:0;grid-row:1/3}
.pz-1 h3{font-size:34px;align-self:end}
.pz-1 p{margin-top:4px;align-self:start}

/* 02 — bodegón de pago sobre fondo crema y panel oscuro debajo.
   La imagen es un producto: se muestra ENTERA (contain) y con holgura,
   nunca recortada. El fondo crema del archivo se continúa en la caja. */
.pz-2{background:var(--gg-tinta-2)}
.pz-2 .im{background:#F6EDE3;display:grid;place-items:center;padding:18px 20px}
.pz-2 .im img{width:100%;height:100%;object-fit:contain}
.pz-2:hover .im img{transform:scale(1.03)}   /* menos zoom: es un bodegón, no una foto de ambiente */
.pz-2 .n{font-size:70px;right:18px;bottom:8px}

/* 03 — panel naranja bajo la foto */
.pz-3{background:var(--gg-naranja)}
.pz-3 .n{font-size:74px;right:18px;bottom:8px}
.pz-3 p{max-width:26ch}   /* que la copia no pase por debajo del numeral */

/* La franja de texto de la 02 y la de la 03 tienen que empezar a la MISMA
   altura: van una al lado de la otra y el escalón se nota. Se fija la altura
   de las dos imágenes y el panel ocupa el resto. Va DESPUÉS de los dos bloques
   anteriores a propósito: si se pone antes, la regla de cada tarjeta la pisa. */
.pz-2 .im,.pz-3 .im{flex:none;height:236px}
.pz-2 .tx,.pz-3 .tx{flex:1}

/* 04 — panel naranja a la izquierda, foto a la derecha.
   En el HTML la foto va primero, así que aquí se recolocan por rejilla. */
.pz-4{background:var(--gg-naranja);display:grid;grid-template-columns:.82fr 1.18fr;min-height:300px}
.pz-4 .im{grid-column:2;grid-row:1;height:100%}
.pz-4 .tx{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px 32px 34px}
.pz-4 .n{font-size:96px;left:28px;top:26px}

/* ---------- Qué puedes lavar ---------- */
.lavar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:28px}
.lavar figure{margin:0}
.lavar .ph{position:relative;aspect-ratio:3/4;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);background:var(--gg-arena);overflow:hidden}
.lavar .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--gg-ease)}
.lavar figure:hover .ph{border-color:var(--gg-naranja)}
.lavar figure:hover .ph img{transform:scale(1.05)}
.lavar .ph{transition:border-color .25s var(--gg-ease)}
.lavar .bd{position:absolute;left:10px;bottom:10px;background:var(--gg-naranja);color:#fff;
  font-weight:700;font-size:9.5px;letter-spacing:.06em;padding:4px 7px;border-radius:2px}
.lavar figcaption{font-weight:700;font-size:var(--gg-body-sm);margin-top:9px}

/* ---------- Tarjetas de lavandería (home) ---------- */
.locs{background:var(--gg-crema-2);padding:60px 0}
.locs-hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
/* La tarjeta de "próxima apertura" no lleva foto sino un cartel SVG: con
   object-fit:cover se le cortaba el símbolo por arriba y por abajo. Va con
   contain y el fondo del propio cartel, así se ve entero y sin cantos. */

/* Tres columnas: seis locales entran en dos filas y la foto respira. */
.locs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;margin-top:26px}
.lc{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);overflow:hidden;
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.lc:hover{transform:translateY(-5px);box-shadow:var(--gg-sombra-card);border-color:var(--gg-naranja)}
.lc .im{position:relative;height:186px;overflow:hidden}
.lc .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lc .bd{position:absolute;left:8px;top:8px;width:22px;height:22px;background:var(--gg-naranja);
  color:#fff;font-weight:700;font-size:11px;display:grid;place-items:center;border-radius:2px}
.lc .km{position:absolute;right:8px;top:8px;background:rgba(26,26,26,.82);color:#fff;
  font-weight:700;font-size:9.5px;padding:3px 6px;border-radius:2px}
.lc .bo{padding:18px}
.lc h3{font-size:17px;text-transform:uppercase;letter-spacing:-.01em}
.lc h3 a{color:var(--gg-tinta)}
.lc h3 a:hover{color:var(--gg-naranja)}
.lc .ad{font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-top:5px;line-height:1.5}
.lc .hr{display:flex;align-items:center;gap:6px;font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-top:8px}
.lc .hr svg{width:13px;height:13px;color:var(--gg-naranja)}
.lc .go{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  margin-top:12px;padding:10px 0 0;border-top:1px solid var(--gg-borde-4);background:none;border-left:0;border-right:0;border-bottom:0;
  font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gg-tinta);min-height:44px}
.lc .go:hover{color:var(--gg-naranja)}
.lc .det{display:none;padding-top:10px;border-top:1px solid var(--gg-borde-4);margin-top:10px}
.lc .det.on{display:block}
.lc .det p{font-size:11px;color:var(--gg-grafito);line-height:1.6}
.lc .chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
.lc .chips span{border:1px solid var(--gg-borde);background:var(--gg-crema);font-size:11.5px;padding:3px 7px;border-radius:2px}
.lc .det a{display:block;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-top:7px}

/* ---------- Franja empresas ---------- */
.emp{display:grid;grid-template-columns:1fr 1fr;height:340px}
.emp-c{position:relative;background:var(--gg-naranja);color:#fff;padding:56px 60px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.emp-c .mark{position:absolute;right:-60px;bottom:-70px;width:300px;opacity:.13}
.emp-c .in{position:relative}
.emp-c h2{font-size:var(--gg-h2-xl);line-height:1.05;color:#fff}
.emp-c p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.94);margin-top:16px;max-width:44ch}
.emp-c .btn{margin-top:26px;align-self:flex-start}
.emp-m{position:relative;overflow:hidden}
.emp-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Opiniones + FAQ ---------- */
.op-faq{display:flex;flex-direction:column;gap:44px}
.ops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:28px}

/* Tarjeta de valoración por local: la tarjeta ENTERA es el enlace a su ficha
   de Google, que es adonde queremos mandar tráfico. */
.op--g{display:flex;flex-direction:column;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:20px;color:var(--gg-tinta);
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.op--g:hover{transform:translateY(-4px);box-shadow:var(--gg-sombra-op);border-color:var(--gg-naranja);color:var(--gg-tinta)}
.op--g::before{content:none}          /* sin comilla decorativa: no es una cita */
.op--g .st{color:var(--gg-naranja);font-size:13px;letter-spacing:.1em;line-height:1}
.op-n{font-weight:800;font-size:23px;letter-spacing:-.02em;margin-top:10px;line-height:1}
.op-m{font-weight:700;font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:6px}
.op-a{margin-top:auto;padding-top:14px;font-weight:700;font-size:10.5px;
  letter-spacing:var(--gg-track-label);text-transform:uppercase;color:var(--gg-naranja)}
/* La comilla serif es el único sitio de la web con serifa: marca la cita. */
.op::before{content:"\201C";position:absolute;top:14px;right:20px;font-family:Georgia,"Times New Roman",serif;
  font-size:64px;line-height:1;color:var(--gg-naranja);opacity:.18;pointer-events:none}
.op{position:relative;transition:box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.op:hover{box-shadow:var(--gg-sombra-op);border-color:var(--gg-naranja)}
.op{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);
  padding:20px;min-height:170px;display:flex;flex-direction:column}
.op .st{color:var(--gg-naranja);font-size:13px;letter-spacing:.08em}
.op p{font-size:var(--gg-meta);line-height:1.7;color:var(--gg-grafito);margin-top:12px}
.op .who{margin-top:auto;padding-top:14px;font-weight:600;font-size:11px;color:var(--gg-gris-suave)}
.faq{margin-top:24px;border-top:1px solid var(--gg-borde-3)}
.faq details{border-bottom:1px solid var(--gg-borde-3)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:16px 0;font-size:12px;line-height:1.5;font-weight:600;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gg-naranja)}
.faq summary i{font-style:normal;color:var(--gg-naranja);font-size:16px;flex:none;transition:transform .2s}
.faq details[open] summary i{transform:rotate(45deg)}
.faq .ans{padding:0 0 16px;font-size:var(--gg-meta);line-height:1.75;color:var(--gg-grafito);max-width:80ch}

/* ---------- SEO por municipio ---------- */
.seo-mun{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:36px 0 44px;
  border-top:1px solid var(--gg-borde)}
.seo-mun>div{border-top:2px solid var(--gg-naranja);padding-top:12px}
.seo-mun a{font-weight:700;font-size:12px;color:var(--gg-tinta);line-height:1.45;display:block}
.seo-mun a:hover{color:var(--gg-naranja)}
.seo-mun p{font-size:11px;color:var(--gg-gris-claro);margin-top:7px;line-height:1.55}

/* ---------- Footer ---------- */
.foot{background:var(--gg-crema-2);border-top:1px solid var(--gg-borde);padding:52px 0 0}
.foot-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px}
.foot img.lg{height:var(--gg-logo-footer);width:auto}
.foot h4{font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--gg-tinta);margin-bottom:12px}
.foot a{display:block;font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-bottom:7px}
.foot a:hover{color:var(--gg-naranja)}
.foot .tel{font-weight:700;font-size:13px;color:var(--gg-tinta);margin-top:12px}
.foot .mini{font-size:var(--gg-meta);color:var(--gg-gris-claro);line-height:1.7;margin-top:12px}
.foot-soc{display:flex;gap:8px;margin-top:4px}
.foot-soc a{width:30px;height:30px;border:1px solid var(--gg-borde-2);border-radius:var(--gg-radio);
  display:grid;place-items:center;margin:0;color:var(--gg-tinta)}
.foot-soc a:hover{border-color:var(--gg-naranja);color:var(--gg-naranja)}
.foot-soc svg{width:15px;height:15px}
.foot-bar{margin-top:40px;border-top:1px solid var(--gg-borde);padding:16px 0 22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:var(--gg-micro);color:var(--gg-gris-suave)}
.foot-bar nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-bar a{display:inline;margin:0;font-size:var(--gg-micro);color:var(--gg-gris-suave)}

/* ===========================================================
   FICHA DE LOCAL
   =========================================================== */
.crumbs{font-size:11px;color:var(--gg-gris-claro);padding:16px 0}
.crumbs a{color:var(--gg-gris-claro)}
.crumbs a:hover{color:var(--gg-naranja)}
.crumbs span{margin:0 7px;opacity:.6}
.fh{display:grid;grid-template-columns:2fr 1fr;gap:16px;height:340px}
.fh .big,.fh .col{position:relative;overflow:hidden;border-radius:var(--gg-radio)}
.fh .big img,.fh .col img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh .col{display:grid;grid-template-rows:1fr 1fr;gap:16px;position:static}
.fh .col>div{position:relative;overflow:hidden;border-radius:var(--gg-radio)}
.f-head{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:36px 0 8px;align-items:start}
.f-open{display:inline-block;font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gg-abierto-texto);background:var(--gg-abierto-fondo);border:1px solid var(--gg-abierto-borde);
  padding:5px 9px;border-radius:var(--gg-radio)}
/* Próxima apertura: naranja de marca, nunca el verde de "abierto ahora" */
.f-open--prox{color:var(--gg-naranja);background:#FDEFE9;border-color:#F6C7B8;
  display:inline-flex;align-items:center;gap:6px}
.f-open--prox svg{width:13px;height:13px}
.f-head h1{font-size:32px;line-height:1.1;margin-top:14px}
.f-head .intro{font-size:var(--gg-body);line-height:1.75;color:var(--gg-grafito);margin-top:14px}
.nap{border:1px solid var(--gg-borde);border-radius:var(--gg-radio);background:#fff;padding:18px 20px}
.nap .r{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--gg-borde-4)}
.nap .r:last-child{border-bottom:0}
.nap svg{width:15px;height:15px;color:var(--gg-naranja);flex:none;margin-top:2px}
.nap .k{font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.nap .v{font-size:var(--gg-meta);color:var(--gg-grafito);line-height:1.6;margin-top:2px}
.nap .v a{color:var(--gg-grafito)}
.nap .v a:hover{color:var(--gg-naranja)}
.f-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.chips2{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chips2 span{border:1px solid var(--gg-borde);background:var(--gg-crema);font-size:10.5px;
  padding:5px 9px;border-radius:var(--gg-radio);color:var(--gg-grafito)}
.maq{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.mq{border:1px solid var(--gg-borde);background:#fff;border-radius:var(--gg-radio);padding:16px}
.mq .lb{font-weight:700;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gg-gris-suave)}
.mq .kg{font-size:24px;font-weight:800;margin-top:8px;letter-spacing:-.02em}
.mq .tx{font-size:11px;color:var(--gg-gris);margin-top:8px;line-height:1.5}
.f-map{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:8px;align-items:start}
.f-map .mapa{height:330px}
.f-map h2{font-size:var(--gg-h2-sm);margin-bottom:14px}
.f-map .li{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--gg-borde-4);font-size:var(--gg-meta);
  color:var(--gg-grafito);line-height:1.6}
.f-map .li b{color:var(--gg-tinta)}
.f-map .li svg{width:14px;height:14px;color:var(--gg-naranja);flex:none;margin-top:3px}
.otras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.otra{display:flex;gap:12px;align-items:center;border:1px solid var(--gg-borde);background:#fff;
  border-radius:var(--gg-radio);padding:10px;color:var(--gg-tinta)}
.otra:hover{border-color:var(--gg-naranja);color:var(--gg-naranja)}
.otra img{width:64px;height:52px;object-fit:cover;border-radius:2px;flex:none}
.otra>span{display:block;min-width:0}
.otra .nm{display:block;font-weight:700;font-size:11.5px;line-height:1.3}
.otra .ad{display:block;font-size:10.5px;color:var(--gg-gris-claro);margin-top:3px}
.f-cta{display:grid;grid-template-columns:1fr 1fr;height:280px;margin-top:56px}

/* ===========================================================
   RESPONSIVE  (no venía diseñado — README § Responsive)
   =========================================================== */
@media (max-width:1024px){
  /* Tabla de colapso del handoff (7 agosto 2026), tramo tablet */
  .lavar{grid-template-columns:repeat(3,minmax(0,1fr))}   /* qué puedes lavar 6 -> 3 */
  .locs-g{grid-template-columns:repeat(2,minmax(0,1fr))}  /* tarjetas de local 3 -> 2 */
  .ops{grid-template-columns:repeat(2,minmax(0,1fr))}     /* opiniones -> 2 */
  .seo-mun{grid-template-columns:repeat(3,minmax(0,1fr))}
  .maq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .otras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-g{grid-template-columns:1.4fr 1fr 1fr}            /* footer home 5 -> 3 */
}
@media (max-width:1024px){

  .hero{grid-template-columns:1fr;min-height:0}
  .hero-media{height:260px;order:-1}
  .hero-c{padding:34px var(--gg-gutter) 40px}
  .hero-c>.in{max-width:none;margin-left:0}
  .hero h1{font-size:33px}
  .hero-c .mark{width:300px;right:-110px;top:-50px}
  .hero-bs{max-width:none}

  /* ≤1024: Sobre nosotros -> 2 col con la destacada a ancho completo */
  .pq,.pq-3{grid-template-columns:repeat(2,1fr)}
  .sec-g{grid-template-columns:1fr}
  .emp-cta{padding:36px 26px}
  .emp-cta h2{font-size:28px}
  .pg-ad-ph{min-height:200px}
  .pq>.f{grid-row:auto;grid-column:1/-1;padding:32px 26px}
  .pq>.f h3{font-size:24px}
  .pg-i2{grid-template-columns:1fr;gap:28px}

  /* ≤1024: dos columnas y la destacada a ancho completo arriba */
  .vent{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vent>.vent-f{grid-row:auto;grid-column:1/-1;padding:32px 26px}
  .vent-f h2{font-size:28px}

  .loca-g{grid-template-columns:1fr}
  .mapa{height:300px}
  .locs-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* El bento pasa a dos columnas: 01 arriba a lo ancho y el resto debajo. */
  .sec-hd{grid-template-columns:1fr;gap:18px}
  .sec-hd h2{font-size:32px}
  .bento{grid-template-columns:1fr 1fr;gap:12px}
  .pz-1{grid-column:1/-1;grid-row:auto;min-height:340px}
  .pz-2{grid-column:1;grid-row:auto}
  .pz-3{grid-column:2;grid-row:auto}
  .pz-4{grid-column:1/-1;grid-row:auto;min-height:250px}
  .pz-1 h3{font-size:27px}
  .pz h3{font-size:22px}
  .emp{grid-template-columns:1fr;height:auto}
  .emp-m{height:240px;order:-1}
  .emp-c{padding:34px var(--gg-gutter)}
  .emp-c h2{font-size:28px}
  .emp-c p{font-size:15px}
  .ops{grid-template-columns:1fr}
  .f-head,.f-map,.f-cta{grid-template-columns:1fr;gap:24px}
  .f-cta{height:auto}
  .fh{grid-template-columns:1fr;height:auto}
  .fh .big{height:230px}
  .fh .col{grid-template-rows:none;grid-template-columns:1fr 1fr;height:120px}
  .f-head h1{font-size:26px}
}
@media (max-width:640px){
  /* Móvil: padding lateral a 20px, según el handoff */
  :root{--gg-gutter:20px}

  .lavar{grid-template-columns:repeat(2,minmax(0,1fr))}   /* qué puedes lavar -> 2 */
  .locs-g,.seo-mun,.maq,.otras,.ops,.vent,.pq,.pq-3{grid-template-columns:1fr}
  .foot-g{grid-template-columns:1fr 1fr}                  /* footer home 3 -> 2 */
  .hero h1{font-size:34px}                                /* H1 móvil 34px */
  h2,.sec-hd h2,.vent h2{font-size:30px}                  /* H2 grandes 30px */
  .hero-act .btn{flex:1 1 100%;justify-content:center}
  .foot-bar{flex-direction:column;gap:10px}
  /* A 620px cada paso ocupa el ancho completo; la 04 apila foto y texto. */
  .bento{grid-template-columns:1fr}
  .pz-2,.pz-3{grid-column:1/-1}
  .pz-4{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0}
  .pz-4 .im{grid-column:1;grid-row:1;height:200px}
  .pz-4 .tx{grid-column:1;grid-row:2}
  .pz-4 .n{font-size:72px;left:20px;top:14px}
  .pz-1{min-height:300px}
  .pz-1 .tx{padding:22px 22px 26px;gap:0 14px}
  .pz-1 .n{width:52px;height:52px;font-size:18px}
  .pz-1 h3{font-size:26px}
  .sec-hd h2{font-size:26px}
  .op::before{font-size:48px}
  /* Buscadores: en móvil el input y el botón se apilan a lo ancho para no salirse.
     Importante: al pasar el form a columna hay que resetear el flex del input;
     si no, su flex-basis (190px, pensado como ancho en fila) se aplica al ALTO y
     el cajón crece a 190px de alto. Con flex:0 0 auto vuelve a su altura normal. */
  .loca-form,.hero-bs form{flex-direction:column;align-items:stretch}
  .loca-form input,.hero-bs input{flex:0 0 auto}
  .loca-form input,.hero-bs input,.loca-form .geo-btn,.hero-bs .geo-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{.nav,.foot-bar,.burger{display:none}}

/* ---------- Texto SEO propio de cada ficha ---------- */
.f-txt{max-width:74ch;padding-bottom:14px}
.f-txt h2{font-size:var(--gg-h2)}
.f-txt p{font-size:var(--gg-body);line-height:1.8;color:var(--gg-grafito);margin-top:16px;text-wrap:pretty}

/* ---------- Áreas táctiles ≥44px en táctil (README § Responsive) ---------- */
@media (max-width:1024px){
  .nav-tel{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
  .loca-all,.f-ver,.lc .det a{display:inline-flex;align-items:center;min-height:44px}
  .foot-c a{display:inline-flex;align-items:center;min-height:40px}
  .foot-legal a{display:inline-flex;align-items:center;min-height:40px}
  .loca-list a{padding-block:15px}
}

/* ---------- Mapa del localizador (Leaflet + OpenStreetMap) ---------- */
.mapa{background:var(--gg-crema-2)}
.leaflet-container{font-family:var(--gg-font);background:var(--gg-crema-2)}
.gg-pin{background:none;border:0}
.gg-pin .gg-pin-b{display:grid;place-items:center;width:28px;height:28px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--gg-naranja);color:#fff;font-weight:700;font-size:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff}
.gg-pin .gg-pin-b::before{content:"";position:absolute;inset:0}
.gg-pin .gg-pin-b{position:relative}
.gg-pin span{transform:rotate(-45deg)}
.gg-pin .gg-pin-b{line-height:1}
.leaflet-popup-content-wrapper{border-radius:var(--gg-radio);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.leaflet-popup-content{margin:12px 14px;font-size:12.5px;line-height:1.6;color:var(--gg-tinta)}
.leaflet-popup-content strong{font-weight:700;font-size:13px}
.gg-pop-h{color:var(--gg-gris-claro);font-size:11.5px}
.gg-pop-a{display:inline-block;margin-top:6px;font-weight:700;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gg-naranja)}
.leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}

/* ---------- Valoración de Google en la ficha de local ----------
   Enlaza a la ficha de Google del local: reforzarla es el objetivo nº1
   del proyecto, así que el enlace tiene que estar a la vista. */
.vl{margin-top:16px;padding:18px 20px;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio)}
.vl-st{color:var(--gg-naranja);font-size:15px;letter-spacing:.12em;line-height:1}
.vl-n{font-weight:800;font-size:26px;letter-spacing:-.02em;margin-top:8px;line-height:1}
.vl-en{font-weight:600;font-size:13px;letter-spacing:0;color:var(--gg-gris)}
.vl-nota{display:block;font-size:var(--gg-meta);color:var(--gg-gris-claro);margin-top:6px;line-height:1.5}
.vl-a{display:inline-flex;align-items:center;gap:6px;margin-top:13px;min-height:44px;
  font-weight:700;font-size:var(--gg-meta);letter-spacing:var(--gg-track-label);text-transform:uppercase}

/* ---------- Bloque de ayuda con WhatsApp ---------- */
.ayuda{margin-top:26px;padding:22px 24px;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:16px}
.ayuda h3{font-size:15px;text-transform:none;letter-spacing:0}
.ayuda p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:5px;line-height:1.6;max-width:44ch}
.ayuda-b{display:flex;gap:10px;flex-wrap:wrap}
.btn-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-wa:hover{background:#1DA851;border-color:#1DA851;color:#fff}
@media (max-width:640px){
  .ayuda{flex-direction:column;align-items:stretch}
  .ayuda-b .btn{flex:1;justify-content:center}
}

/* ---------- Desplegable de lavanderías en el menú ---------- */
.has-dd{position:relative}
.dd-t{display:inline-flex;align-items:center;gap:5px}
.dd-i{transition:transform .18s}
.has-dd:hover .dd-i,.has-dd:focus-within .dd-i{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:-14px;min-width:290px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);
  box-shadow:0 14px 40px -12px rgba(26,26,26,.28);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.has-dd:hover .dd,.has-dd:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}  /* puente para el ratón */
.dd li a{display:block;padding:9px 12px;border-radius:2px;text-transform:none;letter-spacing:0}
.dd li a:hover{background:var(--gg-crema-2)}
.dd .dd-n{display:block;font-weight:700;font-size:12.5px;color:var(--gg-tinta);text-transform:uppercase;letter-spacing:.03em}
.dd .dd-d{display:block;font-size:11.5px;color:var(--gg-gris-claro);margin-top:2px;font-weight:400}
.dd li a:hover .dd-n{color:var(--gg-naranja)}
.dd .dd-all{border-top:1px solid var(--gg-borde-4);margin-top:4px;padding-top:3px}
.dd .dd-all a{font-weight:700;font-size:11px;color:var(--gg-naranja);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:1024px){
  /* en móvil el desplegable va siempre abierto dentro del menú */
  .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    min-width:0;padding:0 0 6px 12px;background:none}
  .dd li a{padding:11px 0;border-bottom:1px solid var(--gg-borde-4)}
  .dd-i{display:none}
  .dd .dd-all{border-top:0}
}


/* Justo por encima del corte (1025–1100px) el menú horizontal se sale unos
   60px: son los seis enlaces más el logo, el teléfono y el CTA. En vez de
   mover el breakpoint del handoff, se aprieta el espaciado en esa franja. */
@media (min-width:1025px) and (max-width:1100px){
  .nav-in{gap:16px}
  .nav-menu{gap:14px}
  .nav-end{gap:12px}
  .nav-cta{padding:12px 13px;font-size:10.5px}
  .nav-logo img{height:52px}
}

/* ---------- Menú móvil ----------
   El handoff (revisión de las 15:44) fija la hamburguesa en ≤1024px. */
@media (max-width:1024px){
  .nav-menu,.nav-tel{display:none}
  .burger{display:grid;place-items:center}
  .nav.open .nav-menu{display:flex;position:absolute;left:0;right:0;top:var(--gg-nav-h);
    flex-direction:column;align-items:stretch;gap:0;background:var(--gg-crema);
    border-bottom:1px solid var(--gg-borde);padding:4px var(--gg-gutter) 14px}
  .nav.open .nav-menu li a{display:block;padding:14px 0;border-bottom:1px solid var(--gg-borde-4);font-size:13px}
  .nav-end .nav-cta{display:none}
  .nav-end .nav-tel{display:inline-block}   /* tel siempre visible: es la conversión */
}

/* ===========================================================
   Páginas internas
   =========================================================== */
.pg-h{display:grid;grid-template-columns:.92fr 1.08fr;min-height:360px}
.pg-h-c{display:flex;flex-direction:column;justify-content:center;padding:56px 56px 56px 72px}
/* el titular usa todo el ancho de la columna; solo el párrafo mantiene medida de lectura,
   así no queda un hueco muerto entre el texto y la foto */
.pg-h-c .in{max-width:none}
.pg-h h1{font-size:38px;line-height:1.05;margin-top:14px;text-wrap:balance}
.pg-lead{font-size:var(--gg-body);line-height:1.75;color:var(--gg-grafito);margin-top:16px;
  max-width:46ch;text-wrap:pretty}
.pg-h-m{position:relative;overflow:hidden;min-height:300px}
.pg-h-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Cabecera simple de página interna: eyebrow + H1 grande + párrafo con filo naranja.
   Es el patrón de "Cómo funciona" y se reutiliza en el resto de internas. */
.pg-head{padding:66px 0 8px}
.pg-head h1{font-size:56px;line-height:1;margin-top:14px}
.pg-head-p{border-left:3px solid var(--gg-naranja);padding-left:20px;margin-top:24px;
  max-width:60ch;font-size:var(--gg-body);line-height:1.75;color:var(--gg-grafito)}

/* "Todo incluido, sin sorpresas": banda cálida con cuatro tarjetas blancas */
.incluido{background:var(--gg-crema-2);border-block:1px solid var(--gg-borde);padding:62px 0}
.incluido>.wrap>h2{font-size:var(--gg-h2)}
.inc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.inc-c{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:26px 24px}
.inc-c .ic{display:block;color:var(--gg-naranja)}
.inc-c .ic svg{width:26px;height:26px}
.inc-c h3{font-size:15px;margin-top:15px;letter-spacing:-.01em}
.inc-c p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:8px;line-height:1.6}

/* CTA oscuro de cierre, con el símbolo girando de fondo */
.cta-dark{position:relative;background:var(--gg-tinta);color:#fff;overflow:hidden}
.cta-dark .mark{position:absolute;right:6%;top:50%;margin-top:-180px;width:360px;opacity:.08}
.cta-dark-in{position:relative;padding:78px var(--gg-gutter);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:18px}
.cta-dark h2{font-size:38px;color:#fff}
.cta-dark p{max-width:54ch;color:rgba(255,255,255,.82);font-size:var(--gg-body);line-height:1.7}
.cta-dark .btn{margin-top:6px}

/* cómo funciona */
.pg-pasos{display:grid;gap:20px}
.pg-paso{display:grid;grid-template-columns:1fr 1.15fr;gap:0;background:#fff;
  border:1px solid var(--gg-borde);border-radius:var(--gg-radio);overflow:hidden;min-height:230px}
.pg-paso:nth-child(even) .im{order:2}
.pg-paso .im{position:relative;overflow:hidden;min-height:200px}
.pg-paso .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pg-paso .tx{padding:34px 38px;display:flex;flex-direction:column;justify-content:center}
.pg-paso .n{font-size:var(--gg-step);font-weight:800;color:var(--gg-naranja);line-height:1;letter-spacing:-.03em}
.pg-paso h2{font-size:20px;margin:12px 0 8px}
.pg-paso p{font-size:var(--gg-body-sm);color:var(--gg-gris);line-height:1.7;max-width:52ch}

/* qué puedes lavar */
.pg-lav-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pg-lav{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);overflow:hidden}
.pg-lav img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pg-lav div{padding:20px 22px 24px}
.pg-lav h2{font-size:16px}
.pg-lav p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:7px;line-height:1.65}

/* empresas */
.pg-v-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:26px}
.pg-v{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:24px;
  border-top:3px solid var(--gg-naranja)}
.pg-v h3{font-size:14px;text-transform:none;letter-spacing:0}
.pg-v p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:8px;line-height:1.65}
.pg-2c{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.pg-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.pg-list li{display:flex;gap:10px;align-items:flex-start;font-size:var(--gg-body-sm);color:var(--gg-grafito)}
.pg-list svg{color:var(--gg-naranja);flex:none;margin-top:3px}
.pg-box{background:var(--gg-crema-2);border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:28px}
.pg-box h3{font-size:16px;text-transform:none;letter-spacing:0}
.pg-box p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:9px;line-height:1.7}
.pg-nota{font-size:11.5px;color:var(--gg-gris-claro);margin-top:14px}

/* FAQ y legales */
.pg-faq{margin-top:8px}
.pg-legal{max-width:74ch}
.pg-legal h1{font-size:32px}
.pg-legal h2{font-size:17px;margin-top:32px}
.pg-legal p{font-size:var(--gg-body-sm);color:var(--gg-grafito);line-height:1.8;margin-top:12px}
.pg-aviso{background:#FFF6E8;border:1px solid #F0DBB4;border-radius:var(--gg-radio);
  padding:14px 16px;font-size:12.5px;color:#7A5A1E;margin-top:18px}

/* contacto */
.ct-vias{display:grid;gap:12px;margin-top:22px}
.ct-via{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:16px 18px;color:var(--gg-tinta);min-height:44px}
.ct-via:hover{border-color:var(--gg-naranja);color:var(--gg-tinta)}
.ct-via .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--gg-crema-2);color:var(--gg-naranja);flex:none}
.ct-via .ic.wa{background:#25D366;color:#fff}
.ct-via b{display:block;font-size:14px}
.ct-via span span{font-size:12px;color:var(--gg-gris-claro)}
.ct-locs{display:grid;gap:10px;margin-top:22px}
.ct-loc{display:grid;gap:3px;background:#fff;border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:14px 16px;color:var(--gg-tinta)}
.ct-loc:hover{border-color:var(--gg-naranja)}
.ct-n{font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.ct-loc:hover .ct-n{color:var(--gg-naranja)}
.ct-d{font-size:12px;color:var(--gg-gris-claro)}
.ct-h{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--gg-gris-suave);margin-top:3px}

/* 404 */
.pg-404{text-align:center;padding-block:100px}
.pg-404 h1{font-size:38px;margin-top:12px}
.pg-404 .pg-lead{margin:16px auto 26px;max-width:46ch}
.pg-404 .hero-act{justify-content:center}

@media (max-width:1024px){
  .pg-h{grid-template-columns:1fr}
  .pg-h-m{order:-1;height:240px;min-height:0}
  .pg-h-c{padding:32px var(--gg-gutter) 36px}
  .pg-h h1{font-size:30px}
  .pg-head{padding:40px 0 4px}
  .pg-head h1{font-size:38px}
  .inc-g{grid-template-columns:repeat(2,1fr)}
  .cta-dark h2{font-size:30px}
  .cta-dark .mark{display:none}
  .pg-lav-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-v-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-2c{grid-template-columns:1fr;gap:32px}
  .pg-paso{grid-template-columns:1fr}
  .pg-paso:nth-child(even) .im{order:0}
  .pg-paso .tx{padding:26px var(--gg-gutter)}
}
@media (max-width:640px){
  .pg-lav-g,.pg-v-g,.inc-g{grid-template-columns:1fr}
  .pg-head h1{font-size:31px}
  .pg-404{padding-block:60px}
}

/* ===========================================================
   Contenido nuevo (sobre nosotros, blog, empresas, próx. apertura)
   =========================================================== */
.dd-soon{font-style:normal;font-family:var(--gg-font);font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--gg-naranja);padding:2px 6px;border-radius:2px;vertical-align:2px}

.pg-intro{max-width:74ch}
.pg-intro p{font-size:var(--gg-body);line-height:1.85;color:var(--gg-grafito)}
.pg-title{max-width:60ch}
.pg-title h1{font-size:34px;margin-top:12px}
.pg-sub{font-size:var(--gg-body-sm);color:var(--gg-gris);margin:10px 0 0;max-width:64ch;line-height:1.7}
.light-sec{background:var(--gg-crema-2);margin-top:0}
.sec.light-sec{border-top:1px solid var(--gg-borde)}

/* trío/quinteto de ventajas con icono (sobre nosotros / empresas) */
.pg-v-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.pg-v-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-v{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:24px;border-top:3px solid var(--gg-naranja)}
.pg-v-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gg-crema-2);color:var(--gg-naranja);margin-bottom:14px}
.pg-v h3{font-size:15px;text-transform:none;letter-spacing:0}
.pg-v p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin-top:8px;line-height:1.65}

.pg-cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--gg-tinta);border-radius:var(--gg-radio);padding:34px 38px;color:#fff}
.pg-cta-band h2{color:#fff;font-size:22px}
.pg-cta-band p{color:#C7C1B8;margin-top:8px;font-size:var(--gg-body-sm);max-width:52ch}
.pg-cta-band .btn-p{white-space:nowrap}

/* pantallas publicitarias (empresas) */
.pg-ad{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;
  background:var(--gg-crema-2);border:1px solid var(--gg-borde);border-radius:var(--gg-radio);overflow:hidden}
.pg-ad-t{padding:34px 0 34px 36px}
.pg-ad-t h2{font-size:22px}
.pg-ad-t p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin:12px 0 18px;line-height:1.7}
.pg-ad-i{align-self:stretch;min-height:260px;position:relative;overflow:hidden}
.pg-ad-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* blog */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px}
.bl-card{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);overflow:hidden;display:flex;flex-direction:column}
.bl-img{display:block;aspect-ratio:16/10;overflow:hidden}
.bl-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.bl-card:hover .bl-img img{transform:scale(1.04)}
.bl-b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.bl-cat{font-family:var(--gg-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gg-naranja)}
.bl-b h2{font-size:17px;margin:8px 0 0;line-height:1.2;text-transform:none;letter-spacing:0}
.bl-b h2 a{color:var(--gg-tinta)}
.bl-b h2 a:hover{color:var(--gg-naranja)}
.bl-b p{font-size:var(--gg-body-sm);color:var(--gg-gris);margin:9px 0 0;line-height:1.6}
.bl-more{margin-top:auto;padding-top:14px;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gg-naranja);display:inline-flex;align-items:center;gap:6px}

/* entrada del blog */
.pg-post{max-width:74ch}
.pg-post .crumbs{margin-bottom:14px}
.pg-post h1{font-size:32px;line-height:1.1}
.pg-post-meta{font-family:var(--gg-mono);font-size:12px;color:var(--gg-gris-claro);margin-top:10px}
.pg-post-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--gg-radio);margin:22px 0}
.pg-post-body h2{font-size:19px;margin:30px 0 0}
.pg-post-body p{font-size:var(--gg-body);color:var(--gg-grafito);line-height:1.85;margin-top:14px}

/* tarjeta y ficha de PRÓXIMA APERTURA */
.lc--prox .im{background:var(--gg-tinta)}
.hr--prox{color:var(--gg-naranja) !important;font-weight:700}
.lc-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:700;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gg-naranja);min-height:44px}
.prox{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:48px 0}
.prox-badge{display:inline-block;font-family:var(--gg-mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:var(--gg-naranja);padding:6px 12px;border-radius:2px}
.prox-c h1{font-size:36px;line-height:1.05;margin-top:16px}
.prox-lead{font-size:var(--gg-body);color:var(--gg-grafito);line-height:1.75;margin-top:14px;max-width:48ch}
.prox-m{border-radius:var(--gg-radio);overflow:hidden;background:#1A1A1A;
  aspect-ratio:3/2;display:grid;place-items:center}
/* contain: el cartel es un SVG, no una foto. Nunca se recorta. */
.prox-m img{width:100%;height:100%;object-fit:contain;display:block}

@media (max-width:1024px){
  .pg-v-g,.pg-v-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-ad{grid-template-columns:1fr}
  .pg-ad-t{padding:28px var(--gg-gutter)}
  .pg-ad-i{min-height:220px}
  .pg-cta-band{padding:26px 24px}
  .prox{grid-template-columns:1fr;gap:26px;padding:28px 0}
  .prox-m{order:-1}
  .prox-c h1{font-size:30px}
}
@media (max-width:640px){
  .pg-v-g,.pg-v-5,.bl-grid{grid-template-columns:1fr}
}

/* En escritorio no hace falta la caja de 44px (eso es para dedos), pero la
   WCAG 2.2 pide 24px mínimos también para ratón. Sale barato darlo siempre. */
@media (min-width:1025px){
  .nav-menu a,.nav-menu .dd-t,.nav-tel,.crumbs a,.foot-bar a{
    display:inline-flex;align-items:center;min-height:24px}
  .foot a{display:flex;align-items:center;min-height:24px}   /* de bloque: uno por línea */
  .foot a{margin-bottom:5px}
}

/* ===========================================================
   Táctil y legibilidad en móvil y tablet
   Auditadas las 19 páginas a 390, 768 y 1024 px: no hay desbordamiento
   horizontal, pero sí decenas de enlaces por debajo de 44 px de alto y
   texto por debajo de 11,5 px. En un sitio donde la conversión es llamar
   o llegar a la ficha del local, eso es un problema real, no cosmético.
   =========================================================== */
@media (max-width:1024px){
  /* Los tamaños pequeños vienen de tokens: subirlos aquí arregla de golpe
     enlaces, botones, metadatos y etiquetas sin tocar cada componente. */
  :root{--gg-body-sm:13.5px;--gg-meta:13px;--gg-micro:12px}

  /* Enlaces que van solos en su línea: caja táctil de 44 px */
  .crumbs a,
  .hero-bs .todas,
  .loca-all,
  .bl-more,
  .vl-a,
  .op-a,
  .lc-link,
  .lc .det a{display:inline-flex;align-items:center;min-height:44px}
  .foot a{display:flex;align-items:center;min-height:44px;margin-bottom:0}
  .foot h4{font-size:12.5px;margin-bottom:6px}

  /* Las migas se separan para que cada enlace tenga su propia zona */
  .crumbs{font-size:13px;padding:10px 0;display:flex;flex-wrap:wrap;align-items:center}
  .crumbs span{margin:0 9px}

  .bl-cat{font-size:12px}
  .lavar figcaption{font-size:13.5px}

  /* Controles de zoom de Leaflet: los pinta la librería a 30 px */
  .leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px}

  /* Tamaños que estaban escritos a mano y no salían de los tokens */
  .nav-cta,.hero-bs .geo-btn,.geo-btn,.vent .lb,.lc .go,.lc .det p,.lc .det a,
  .op-a,.op .who,.seo-mun p,.nap .k,.f-open,.chips2 span,.lc .chips span,
  .bl-cat,.bl-more,.hero-cerca .km,.loca-list .km,.lc .bd,.prox-badge,
  .vl-a,.vl-nota,.foot-bar,.foot-bar a{font-size:12.5px}
  .f-open,.chips2 span{font-size:12px}

  /* Enlaces del bloque de datos del local y de las listas: zona táctil */
  .nap a,
  .loca-list a,
  .otras a,
  .bl-t a,
  .dd .dd-all a,
  .foot-bar a{display:inline-flex;align-items:center;min-height:44px}
  .nap .v{line-height:1.5}

  /* Últimos restos por debajo del mínimo legible */
  .dd .dd-all a{font-size:12.5px}
  .lavar .bd,.vent .lb{font-size:12px}
  .bl-t a{line-height:1.4;min-height:44px}
  .lc-link{font-size:12.5px;min-height:44px}
  .maq .lb,.maq .tx,.otras .ad,.otras .nm,.f-otras .ad{font-size:12.5px}

  /* Leaflet sólo añade .leaflet-touch en dispositivos táctiles; en el resto
     los controles se quedan en 30 px, así que se apunta también a la clase base. */
  .leaflet-bar a{width:40px;height:40px;line-height:40px}
  .leaflet-container .leaflet-control-attribution{font-size:11.5px}
  .leaflet-container .leaflet-control-attribution a{min-height:0}

  /* Enlaces de la lista del localizador: caja completa pulsable */
  .loca-list a{min-height:52px}

  /* A 1024 px el menú horizontal sigue visible (el hamburguesa entra a 1000)
     y es justo el ancho de un iPad: sus enlaces necesitan altura de dedo. */
  .nav-menu a,.nav-menu .dd-t,.nav-tel{display:inline-flex;align-items:center;min-height:44px}

  /* Listado de lavanderías y tarjetas: el nombre es el enlace principal */
  .lc h3 a,.bl-c h3 a,.bl-grid h3 a{display:inline-flex;align-items:center;min-height:44px}

  /* Ficha de próxima apertura: usa sus propias clases de etiqueta */
  .prox .lb,.prox .tx,.prox-badge{font-size:12.5px}

  /* Enlaces del bloque SEO de municipios y títulos de artículo del blog */
  .seo-mun a,.bl-grid a,.bl-c a,article h3 a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- Texto SEO de la ficha, repartido ----------
   El cliente lo veía raro apilado bajo el mapa. Ahora la entradilla va con
   foto y el resto en dos columnas dentro de una banda. */
/* La fila de cierre ocupa todo el ancho para que la foto tenga presencia; el
   texto se mantiene legible con su propio tope de línea, no el de .f-txt. */
.f-txt--top{max-width:none}
.f-txt--top .f-txt-h{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.f-txt--top>div>h2{max-width:20ch}
.f-txt--top .lead{font-size:17px;line-height:1.7;color:var(--gg-grafito);margin-top:16px;max-width:46ch}
.f-txt--top .im{position:relative;aspect-ratio:4/3;border-radius:var(--gg-radio);
  overflow:hidden;background:var(--gg-arena)}
.f-txt--top .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-txt--band{padding-block:56px}
.f-txt-c{columns:2;column-gap:44px}
.f-txt-c p{font-size:var(--gg-body);line-height:1.8;color:var(--gg-grafito);
  break-inside:avoid;margin-bottom:18px}

@media (max-width:1024px){
  .f-txt--top .f-txt-h{grid-template-columns:1fr;gap:26px}
  .f-txt-c{columns:1}
}

/* ---------- Servicios propios de cada lavandería ----------
   Pet Corner, taquillas y cajero son lo que distingue un local de otro, así
   que van en bloque aparte y a tamaño legible, no como etiquetas pequeñas. */
.sv-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.sv{background:#fff;border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:28px 26px;
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.sv:hover{transform:translateY(-4px);box-shadow:var(--gg-sombra-card);border-color:var(--gg-naranja)}
.sv .ic{display:grid;place-items:center;width:52px;height:52px;background:#FCEAE2;
  border-radius:var(--gg-radio);color:var(--gg-naranja)}
.sv h3{font-size:20px;margin-top:20px;letter-spacing:-.01em}
.sv p{font-size:var(--gg-body);color:var(--gg-grafito);margin-top:10px;line-height:1.7}

/* Las capacidades también se leían pequeñas */
.maq .mq .kg{font-size:30px}
.maq .mq .lb{font-size:11.5px}
.maq .mq .tx{font-size:var(--gg-body-sm)}

@media (max-width:1024px){ .sv-g{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .sv-g{grid-template-columns:1fr} }

/* El cartel de "próxima apertura" es un SVG, no una foto: se muestra entero.
   Va aquí, al final, porque .lc .im img (cover) se define después del bloque
   de tarjetas y con la misma especificidad le ganaba. */
.lc--prox .im{background:#1A1A1A}
.lc--prox .im img{object-fit:contain!important;padding:10px}

/* ---------- Variante SIN foto (Servicios para empresas) ----------
   .pq se diseñó para tarjetas con imagen arriba; al reutilizarla sin foto los
   textos quedaban pegados al borde. Aquí se le devuelven sus márgenes. */
.pq-3 .c{padding:30px 28px;justify-content:flex-start}
.pq-3 .c .ic{width:52px;height:52px}
.pq-3 .c h3{font-size:21px;margin-top:22px;line-height:1.2}
.pq-3 .c p{font-size:var(--gg-body);line-height:1.7;margin-top:12px}
.pq-3 .c .num{top:30px;right:28px}
.pq-3>.f{padding:40px 34px;justify-content:center}
.pq-3>.f .ic{background:rgba(255,122,82,.16);color:var(--gg-naranja-claro)}
.pq-3>.f h3{font-size:26px;margin-top:24px}
.pq-3>.f p{color:rgba(255,255,255,.78)}
.pq-3>.f .mark{right:-80px;bottom:-90px;width:280px;opacity:.09}

/* El icono de cada ventaja es el símbolo de la marca, no un pictograma suelto */
.ic--gg img{width:24px;height:24px}
.pq>.f .ic--gg img{filter:brightness(0) saturate(100%) invert(62%) sepia(52%)
  saturate(2000%) hue-rotate(330deg) brightness(102%) contrast(101%)}

/* ===========================================================
   RONDA 3 — Rediseño visual de la ficha de local (11 ago 2026)
   Solo CSS: no cambia ningún texto ni el HTML. Aplica a las 6
   fichas a la vez. Respeta el sistema: radio 3px (sin pills),
   sin degradados, sin iconos de relleno; el naranja como acento
   y para cifras; una única tarjeta oscura (tinta) como ancla.
   =========================================================== */

/* --- Galería: más altura y foco (zoom sutil al hover) --- */
.fh{height:clamp(360px,42vw,520px)}
.fh .big img,.fh .col>div img{transition:transform .6s var(--gg-ease)}
.fh .big:hover img,.fh .col>div:hover img{transform:scale(1.05)}

/* --- Valoración de Google: tarjeta oscura para destacar el
       objetivo nº1 del proyecto (el enlace a la ficha de Google) --- */
.vl{background:var(--gg-tinta);border-color:var(--gg-tinta);color:#fff}
.vl-st{color:var(--gg-naranja-claro)}
.vl-n{color:#fff}
.vl-en{color:var(--gg-placeholder)}
.vl-nota{color:#C9C3BA}
.vl-a{color:var(--gg-naranja-claro)}
.vl-a:hover{color:#fff}

/* --- Máquinas: de "tarjetitas de kilos" a un lineup de
       capacidades con cifras grandes en naranja --- */
.maq{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mq{position:relative;display:flex;flex-direction:column;min-height:186px;padding:20px 20px 22px;
  border-top:3px solid var(--gg-naranja);
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.mq:hover{transform:translateY(-4px);box-shadow:var(--gg-sombra-card);border-color:var(--gg-naranja)}
.mq .lb{color:var(--gg-gris-suave)}
.mq .kg{font-size:40px;color:var(--gg-naranja);margin-top:14px;line-height:1}
.mq .tx{margin-top:auto;padding-top:10px}
/* La tarjeta de secado (última) ancla el bloque en naranja de marca */
.mq:last-child{background:var(--gg-naranja);border-top-color:var(--gg-naranja-hover)}
.mq:last-child:hover{border-color:var(--gg-naranja-hover);border-top-color:var(--gg-naranja-hover)}
.mq:last-child .lb{color:rgba(255,255,255,.82)}
.mq:last-child .kg{color:#fff}
.mq:last-child .tx{color:rgba(255,255,255,.92)}

/* --- Texto SEO: filete de marca que ancla el título --- */
.f-txt h2{position:relative;padding-top:20px}
.f-txt h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--gg-naranja)}

@media (max-width:1024px){
  .maq{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .maq{grid-template-columns:1fr}
  .mq{min-height:0}
}

/* --- Banner de empresas (home): más presencia y sectores --- */
.emp{height:auto;min-height:360px}
.emp-c .kicker--emp{color:rgba(255,255,255,.82)}
.emp-c .emp-sub{font-size:14px;color:rgba(255,255,255,.9);margin-top:10px;max-width:46ch}
.emp-secs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin:24px 0 4px;padding:0;max-width:52ch}
.emp-secs li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.94)}
.emp-secs li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;background:#fff}
@media (max-width:640px){
  .emp-secs{grid-template-columns:1fr}
}

/* El CSS de Leaflet trae .leaflet-container a{color:#0078A8} y por
   especificidad le ganaba a .gg-pop-a: el enlace del globo salía azul. */
.leaflet-container a.gg-pop-a{color:var(--gg-naranja)}
.leaflet-container a.gg-pop-a:hover{color:var(--gg-naranja-hover)}
.leaflet-popup-content .gg-pop-h{color:var(--gg-gris)}

/* ===========================================================
   ALINEACIÓN DE LAS FRANJAS A SANGRE (11 ago 2026)
   El hero y las cabeceras internas ocupan todo el ancho, pero su TEXTO tiene
   que caer en el mismo eje que el resto de la página. Estaba a 91px mientras
   el contenido de abajo empezaba a 120px: 29px de desfase que se leía como
   "la web no tiene márgenes".
   --gg-orilla = donde empieza el contenido del contenedor de 1360px.
   =========================================================== */
:root{--gg-orilla:max(var(--gg-gutter), calc((100vw - var(--gg-max)) / 2 + var(--gg-gutter)))}

.hero-c{padding-left:var(--gg-orilla)}
.hero-c>.in{max-width:56ch;margin-left:0}

.pg-h-c{padding-left:var(--gg-orilla)}
.pg-h--txt .pg-h-c{padding-right:var(--gg-orilla)}

/* Las bandas de color a sangre alinean su contenido igual */
.emp-c{padding-left:var(--gg-orilla)}
.emp-c .in{max-width:56ch}

@media (max-width:1024px){
  .hero-c,.pg-h-c,.emp-c{padding-left:var(--gg-gutter)}
  .hero-c>.in,.emp-c .in{max-width:none}
}

/* Pin del mapa con el símbolo de marca (11 ago 2026).
   La gota va algo mayor para que el símbolo se lea a tamaño de mapa. */
.gg-pin .gg-pin-b{width:34px;height:34px;font-size:0}
.gg-pin .gg-pin-b img{width:17px;height:17px;transform:rotate(45deg)}
.gg-pin .gg-pin-b:hover{filter:brightness(1.08)}

/* ---------- .pqb — «¿Por qué elegirnos?» (sobre nosotros, Ronda 4) ----------
   Sustituye a .pq en esta página. Motivo: con 5 tarjetas con foto el grid
   quedaba desigual y las 5 imágenes eran casi la misma (filas de lavadoras).
   Ahora: una sola foto grande en la tarjeta 01 + recorte cuadrado y distinto
   en cada uno de los 4 puntos restantes. Tokens: nada nuevo. */
.pqb{margin-top:28px}

/* -- Tarjeta destacada 01: banda oscura, foto 50% / texto 50% -- */
.pqb-f{display:grid;grid-template-columns:1fr 1fr;background:var(--gg-tinta);
  border:1px solid var(--gg-tinta);position:relative;overflow:hidden}
.pqb-f-im{position:relative;min-height:360px;overflow:hidden;background:var(--gg-arena)}
.pqb-f-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pqb-f-tx{position:relative;padding:48px 52px;display:flex;flex-direction:column;justify-content:center}
.pqb-f-tx .num{font-family:var(--gg-font-mono);font-size:var(--gg-step);font-weight:700;
  color:var(--gg-naranja-claro);line-height:1}
.pqb-f-tx h3{margin-top:14px;font-size:28px;color:#fff;line-height:1.1;text-wrap:balance}
.pqb-f-tx p{margin-top:14px;font-size:var(--gg-body);line-height:1.7;
  color:rgba(255,255,255,.78);max-width:none;text-wrap:pretty}
.pqb-f .mark{position:absolute;right:-90px;bottom:-100px;width:300px;opacity:.09;pointer-events:none}

/* -- Puntos 02-05: 2×2, foto cuadrada a la izquierda -- */
.pqb-g{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pqb-g .c{display:grid;grid-template-columns:200px 1fr;background:var(--gg-blanco);
  border:1px solid var(--gg-borde);transition:transform .4s var(--gg-ease),
  box-shadow .4s var(--gg-ease),border-color .4s var(--gg-ease)}
.pqb-g .c:hover{transform:translateY(-3px);box-shadow:var(--gg-sombra-card);border-color:var(--gg-naranja)}
.pqb-g .c-im{position:relative;overflow:hidden;background:var(--gg-arena)}
.pqb-g .c-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--gg-ease)}
.pqb-g .c:hover .c-im img{transform:scale(1.04)}
.pqb-g .c-tx{padding:28px 30px}
.pqb-g .c-tx .num{font-family:var(--gg-font-mono);font-size:12px;font-weight:700;
  letter-spacing:var(--gg-track-label);color:var(--gg-naranja)}
.pqb-g .c-tx h3{margin-top:10px;font-size:17px;line-height:1.18;letter-spacing:-.01em}
.pqb-g .c-tx p{margin-top:10px;font-size:var(--gg-body-sm);line-height:1.7;
  color:var(--gg-gris);text-wrap:pretty}

@media (max-width:1100px){
  .pqb-g{grid-template-columns:1fr}
}
@media (max-width:860px){
  .pqb-f{grid-template-columns:1fr}
  .pqb-f-im{min-height:0;aspect-ratio:16/9}
  .pqb-f-tx{padding:32px 26px}
  .pqb-f-tx h3{font-size:24px;max-width:none}
}
@media (max-width:560px){
  .pqb-g .c{grid-template-columns:1fr}
  .pqb-g .c-im{aspect-ratio:16/9}
  .pqb-g .c-tx{padding:24px 22px}
}

/* === Ficha de local: acento de marca en las cabeceras de sección ===========
   Unifica todas las cabeceras de la ficha con la misma barrita naranja que ya
   llevaba el bloque de cierre (.f-txt h2), para que la página se lea como un
   sistema y no como secciones sueltas. Va al final del fichero a propósito:
   así gana en especificidad y ninguna regla anterior lo pisa. Solo .ficha. */
.ficha .sec>h2,
.ficha .f-map h2:first-child,
.ficha .locs>.wrap>h2{position:relative;padding-top:20px}
.ficha .sec>h2::before,
.ficha .f-map h2:first-child::before,
.ficha .locs>.wrap>h2::before{content:"";position:absolute;top:0;left:0;
  width:38px;height:3px;background:var(--gg-naranja)}

/* === Opiniones de empresas (página /empresas/) =============================
   Tarjetas de testimonio de negocios: mismo lenguaje que el resto (tarjeta
   blanca, borde, radio, hover-lift) pero con la cita como protagonista. */
.tst-hd{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  flex-wrap:wrap;margin-bottom:30px}
.tst-hd h2{font-size:var(--gg-h2-sm);margin-top:4px}
.tst-hd .apoyo{border-left:2px solid var(--gg-naranja);padding-left:16px;max-width:38ch;
  font-size:var(--gg-body-sm);color:var(--gg-grafito);line-height:1.6}
.tst-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tst{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--gg-borde);border-radius:var(--gg-radio);padding:28px 26px 26px;margin:0;
  transition:transform .25s var(--gg-ease),box-shadow .25s var(--gg-ease),border-color .25s var(--gg-ease)}
.tst:hover{transform:translateY(-4px);box-shadow:var(--gg-sombra-card);border-color:var(--gg-naranja)}
.tst .st{color:var(--gg-naranja);font-size:14px;letter-spacing:.12em;line-height:1}
.tst blockquote{margin:16px 0 0;font-size:var(--gg-body);line-height:1.72;color:var(--gg-tinta);
  text-wrap:pretty}
.tst figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--gg-borde-4);
  display:flex;flex-direction:column;gap:3px}
.tst-n{font-weight:700;font-size:13.5px;color:var(--gg-tinta)}
.tst-r{font-size:11.5px;color:var(--gg-gris-claro);letter-spacing:.01em}
@media (max-width:900px){ .tst-g{grid-template-columns:1fr} }
.pg-box-l{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.pg-box-l li{display:flex;gap:10px;align-items:flex-start;font-size:var(--gg-body-sm);
  color:var(--gg-grafito);line-height:1.5}
.pg-box-l li svg{width:15px;height:15px;color:var(--gg-naranja);flex:none;margin-top:2px}

/* === «¿Por qué elegirnos?» — los 5 puntos con el estilo de la tarjeta 01 ===
   (Ronda 5, a petición del cliente). Todas las tarjetas usan .pqb-f, apiladas
   en columna y alternando el lado de la foto. Al final del fichero para ganar
   especificidad sobre las reglas .pqb-g anteriores, ya sin uso. */
.pqb--rows{display:flex;flex-direction:column;gap:18px;margin-top:28px}
.pqb--rows .pqb-f{margin:0}
.pqb--rows .pqb-f-im{min-height:340px}
.pqb-f--flip .pqb-f-im{order:2}
.pqb-f--flip .pqb-f-tx{order:1}
.pqb-f--flip .mark{right:auto;left:-90px}
@media (max-width:720px){
  .pqb--rows .pqb-f-im{min-height:0;aspect-ratio:16/9;order:0}
  .pqb-f--flip .pqb-f-tx{order:0}
}

/* Alterna el fondo de las tarjetas de «¿Por qué elegirnos?»: las pares en
   naranja de marca para que no sean cinco bloques negros seguidos. */
.pqb-f--naranja{background:var(--gg-naranja)}
.pqb-f--naranja .pqb-f-tx .num{color:#fff;opacity:.85}
.pqb-f--naranja .pqb-f-tx p{color:rgba(255,255,255,.94)}
.pqb-f--naranja .mark{opacity:.14}

/* Marca de agua del logo completo en el CTA naranja de empresas: rellena el
   vacío de la derecha sin competir con el texto ni los botones. */
.emp-cta .mark-logo{position:absolute;right:44px;top:50%;transform:translateY(-50%);
  width:min(38%,420px);height:auto;opacity:.16;pointer-events:none;user-select:none}
@media (max-width:900px){ .emp-cta .mark-logo{display:none} }

/* Reseñas dentro de la ficha de local: 5 tarjetas, rejilla que respira más que
   la de empresas porque los textos reales son largos. */
.tst-g--4{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tst-g--4 .tst blockquote{font-size:var(--gg-body-sm);line-height:1.68}
.tst-mas{margin-top:22px}
.tst-mas a{font-weight:700;font-size:var(--gg-meta);letter-spacing:.02em}

/* Bento de pasos y rejilla de coladas ahora son enlaces: heredan color/estilo
   de <a>, así que se restauran los del texto original. */
a.pz{text-decoration:none;color:inherit}
.lavar figure>a{display:block;color:inherit;text-decoration:none}
.lavar figure>a figcaption{color:var(--gg-tinta)}
.lavar figure>a:hover figcaption{color:var(--gg-naranja)}

/* CTA naranja de empresas: el logo completo hace de marca de agua grande y
   ocupa el lado derecho. Se quitó el símbolo suelto: dos marcas superpuestas
   se leían como una mancha. */
.emp-cta .mark-logo{width:min(44%,560px);right:auto;left:72%;
  transform:translate(-50%,-50%);opacity:.18}
@media (max-width:1100px){ .emp-cta .mark-logo{width:56%;left:76%;opacity:.15} }

/* «Deja tu opinión» (página /opiniones/): selector de lavandería + botón que
   lleva a su ficha de Google. Con JS abre la elegida; sin JS, el <noscript>
   muestra los enlaces directos. */
.op-deja{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  background:var(--gg-crema-2);border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:38px 40px}
.op-deja h2{font-size:var(--gg-h2-sm);margin-top:4px}
.op-deja p{font-size:var(--gg-body-sm);color:var(--gg-grafito);line-height:1.7;margin-top:10px;max-width:52ch}
.op-deja-f{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.op-deja-f select{flex:1 1 220px;min-width:0;padding:13px 14px;border:1px solid var(--gg-borde-2);
  border-radius:var(--gg-radio-s);background:#fff;font:inherit;font-size:var(--gg-body-sm);
  color:var(--gg-tinta);min-height:46px}
.op-deja-f .btn{min-height:46px;white-space:nowrap}
.op-deja-ns{font-size:var(--gg-meta)}
@media (max-width:900px){ .op-deja{grid-template-columns:1fr;gap:24px;padding:30px 24px}
  .op-deja-f select,.op-deja-f .btn{width:100%;justify-content:center} }
/* Estado "cerrado" en la ficha: mismo chip, en gris, para que no cante en verde. */
.f-open--cerrado{color:var(--gg-gris);background:var(--gg-crema-2);border-color:var(--gg-borde)}
.f-open--cerrado::before{background:var(--gg-gris-claro)}

/* Banner «Síguenos en nuestras redes», antes del footer en todas las páginas.
   Los iconos sueltos del footer no se veían; esto sí. */
.soc-band{background:var(--gg-naranja);color:#fff;padding:40px 0}
.soc-band-in{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.soc-band .kicker{color:rgba(255,255,255,.85)}
.soc-band h2{color:#fff;font-size:var(--gg-h2-sm);margin-top:4px}
.soc-band p{color:rgba(255,255,255,.94);font-size:var(--gg-body-sm);margin-top:8px;max-width:56ch;line-height:1.6}
.soc-band-b{display:flex;gap:12px;flex-wrap:wrap}
.btn-soc{background:#fff;color:var(--gg-naranja);gap:9px}
.btn-soc:hover{background:var(--gg-tinta);color:#fff}
@media (max-width:640px){ .soc-band{padding:32px 0} .soc-band-b .btn{flex:1 1 100%;justify-content:center} }

/* === Opiniones en la home, replanteadas ==================================
   Antes: 5 tarjetas de nota (todas con el mismo texto) + 4 de reseña = nueve
   cajas blancas iguales. Ahora: un panel oscuro con el dato agregado y la
   lista de locales, y las reseñas como citas sin caja, que respiran. */
.ops2{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start;margin-top:30px}
.ops2-sum{position:relative;background:var(--gg-tinta);color:#fff;border-radius:var(--gg-radio);
  padding:32px 30px}
.ops2-sum .st{color:var(--gg-naranja-claro);font-size:15px;letter-spacing:.12em;line-height:1}
.ops2-big{font-size:56px;font-weight:800;line-height:1;letter-spacing:-.03em;margin-top:14px}
.ops2-lb{font-family:var(--gg-font-mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gg-placeholder);margin-top:8px}
.ops2-tx{font-size:var(--gg-body-sm);line-height:1.65;color:rgba(255,255,255,.8);margin-top:16px}
.ops2-locs{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.14)}
.ops2-locs li + li{margin-top:2px}
.ops2-locs a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;color:#fff;font-size:13.5px;border-bottom:1px solid rgba(255,255,255,.07)}
.ops2-locs li:last-child a{border-bottom:0}
.ops2-locs a:hover{color:var(--gg-naranja-claro)}
.ops2-locs .ol-n{font-family:var(--gg-font-mono);font-weight:700;color:var(--gg-naranja-claro);flex:none}
.ops2-cites{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.cita{margin:0;display:flex;flex-direction:column}
.cita blockquote{margin:0;font-size:16.5px;line-height:1.7;color:var(--gg-tinta);text-wrap:pretty;
  position:relative;padding-top:26px}
.cita blockquote::before{content:"";position:absolute;top:0;left:0;width:30px;height:3px;
  background:var(--gg-naranja)}
.cita figcaption{display:flex;align-items:center;gap:6px;margin-top:16px;
  font-family:var(--gg-font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gg-gris-claro)}
.cita figcaption svg{color:var(--gg-naranja)}
@media (max-width:1024px){ .ops2{grid-template-columns:1fr;gap:30px} }
@media (max-width:560px){ .ops2-cites{gap:28px} .ops2-big{font-size:46px} }

/* === Carrusel de reseñas =================================================
   Scroll horizontal con snap: sin JS ya se desliza con el dedo o la rueda,
   y el JS solo añade las flechas. Así en la ficha y en /opiniones/ se ve una
   reseña cada vez en vez de un muro de tarjetas. */
.car{position:relative;margin-top:26px}
.car-t{display:flex;align-items:stretch;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.car-t::-webkit-scrollbar{display:none}
.car-t:focus-visible{outline:2px solid var(--gg-naranja);outline-offset:4px;border-radius:var(--gg-radio)}
.car-t > *{scroll-snap-align:start;flex:0 0 clamp(260px,30%,360px)}
.car-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.car-b{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
  border:1px solid var(--gg-borde);background:#fff;color:var(--gg-tinta);cursor:pointer;
  transition:background .2s var(--gg-ease),color .2s var(--gg-ease),border-color .2s var(--gg-ease)}
.car-b:hover:not(:disabled){background:var(--gg-naranja);color:#fff;border-color:var(--gg-naranja)}
.car-b:disabled{opacity:.35;cursor:default}
.car .tst{height:100%}
@media (max-width:640px){ .car-t > *{flex:0 0 86%} }

/* .chips fuera de una tarjeta .lc (ficha de próxima apertura): sin esto los
   chips salían pegados como texto corrido, sin caja ni separación. */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{border:1px solid var(--gg-borde);background:var(--gg-crema);font-size:11.5px;
  padding:4px 9px;border-radius:2px;color:var(--gg-grafito)}
.prox .mq{display:block;min-height:0}
.prox .mq .tx{margin-top:8px;padding-top:0}
/* Lista de notas: la cifra y el nº de reseñas alineados y legibles. */
.ops2-locs .ol-n em{font-style:normal;color:var(--gg-placeholder);font-size:11.5px}
.ops2-locs .ol-prox{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:13.5px;color:rgba(255,255,255,.55)}
.ops2-locs .ol-prox .ol-n{font-family:var(--gg-font-mono);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gg-placeholder)}
/* Sin la foto de las pantallas, el bloque de publicidad ocupa todo el ancho. */
.pg-ad:not(:has(.pg-ad-ph)){grid-template-columns:1fr}
.pg-ad:not(:has(.pg-ad-ph)) .pg-ad-t p{max-width:74ch}

/* Ficha de local: la galería va DESPUÉS del encabezado (nombre, dirección y
   botones primero) y con menos altura. Antes ocupaba 520px, casi una pantalla,
   y empujaba el nombre de la lavandería fuera de la vista. */
.ficha .fh{height:clamp(240px,26vw,340px);margin:8px 0 4px}

/* === Opiniones de la home (v3) ===========================================
   Resumen en una banda clara (arena) y debajo el carrusel de opiniones. Se
   deja el negro fuera: ya hay bastantes bloques oscuros en la página. */
.ops3{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
  background:var(--gg-arena);border-radius:var(--gg-radio);padding:26px 30px;margin-top:28px}
.ops3-nota{display:flex;flex-direction:column;justify-content:center;
  padding-right:34px;border-right:1px solid rgba(0,0,0,.10)}
.ops3-nota .st{color:var(--gg-naranja);font-size:14px;letter-spacing:.12em;line-height:1}
.ops3-big{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em;margin-top:8px;
  color:var(--gg-tinta)}
.ops3-lb{font-family:var(--gg-font-mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gg-gris);margin-top:8px;line-height:1.5}
.ops3-locs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.ops3-locs a,.ops3-locs .ol-prox{display:inline-flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--gg-borde);border-radius:999px;padding:8px 15px;
  font-size:13px;color:var(--gg-tinta);transition:border-color .2s var(--gg-ease),color .2s var(--gg-ease)}
.ops3-locs a:hover{border-color:var(--gg-naranja);color:var(--gg-naranja)}
.ops3-locs .ol-n{font-family:var(--gg-font-mono);font-weight:700;color:var(--gg-naranja)}
.ops3-locs .ol-n em{font-style:normal;font-weight:400;color:var(--gg-gris-claro);
  font-size:11px;margin-left:5px}
.ops3-locs .ol-prox{color:var(--gg-gris-claro);background:transparent;border-style:dashed}
.ops3-locs .ol-prox .ol-n{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gg-gris-claro);font-weight:600}
.car--citas{margin-top:30px}
.car--citas .car-t > *{flex:0 0 clamp(260px,31%,380px)}
@media (max-width:860px){
  .ops3{grid-template-columns:1fr;gap:22px;padding:24px}
  .ops3-nota{flex-direction:row;align-items:baseline;gap:14px;padding:0 0 18px 0;
    border-right:0;border-bottom:1px solid rgba(0,0,0,.10)}
  .ops3-lb{margin-top:0}
}

/* ===========================================================
   RONDA 10 — Ficha de lavandería
   Prefijo .fic- para no colisionar con .f-* ni con /empresas/.
   =========================================================== */

/* --- Cabecera: banda de foto + tarjeta solapada --- */
.fic-foto{height:460px;background:var(--gg-arena)}
.fic-foto img{width:100%;height:100%;object-fit:cover;display:block}

.fic-head{background:var(--gg-crema);border:1px solid var(--gg-borde);
  border-radius:var(--gg-radio);padding:38px 46px 0;margin-top:-110px;
  position:relative;max-width:1040px}
.fic-head-top{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.fic-head h1{font-size:48px;font-weight:800;text-transform:uppercase;
  letter-spacing:-.028em;line-height:.98;margin:20px 0 0;max-width:20ch;
  text-wrap:balance}
.fic-head .dir{margin:20px 0 0;font-size:15px;line-height:1.6;color:var(--gg-grafito)}

.fic-estado{display:inline-flex;align-items:center;gap:9px;margin:0;
  font-family:var(--gg-font-mono);font-size:var(--gg-meta);font-weight:600;
  letter-spacing:var(--gg-track-kicker);text-transform:uppercase;
  color:var(--gg-abierto-texto);background:none;border:0;padding:0}
.fic-estado::before{content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:none}
.fic-estado--prox{color:var(--gg-naranja)}

.fic-google{display:inline-flex;align-items:center;gap:9px;
  font-size:var(--gg-body-sm);font-weight:600;color:var(--gg-grafito)}
.fic-google .st{color:var(--gg-naranja);font-size:12px;letter-spacing:1.5px}
.fic-google b{color:var(--gg-tinta)}

.fic-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* --- Franja de datos dentro de la tarjeta --- */
.fic-data{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:34px;border-top:1px solid var(--gg-borde)}
.fic-data>div{padding:22px 22px 24px;border-right:1px solid var(--gg-borde)}
.fic-data>div:first-child{padding-left:0}
.fic-data>div:last-child{padding-right:0;border-right:0}
.fic-data .n{margin:0;font-family:var(--gg-font-mono);font-size:23px;
  font-weight:600;letter-spacing:-.02em;color:var(--gg-tinta)}
.fic-data .d{margin:6px 0 0;font-size:var(--gg-body-sm);color:var(--gg-gris-claro)}

/* --- Máquinas: 5 columnas --- */
.ficha .maq{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:28px}
.ficha .mq{padding:22px 20px}
.ficha .mq .lb{font-family:var(--gg-font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;color:var(--gg-naranja)}
.ficha .mq .kg{font-size:30px;margin-top:12px;letter-spacing:-.025em}
.ficha .mq .tx{font-size:var(--gg-body-sm);margin-top:10px;line-height:1.55}

/* --- Mapa: dos columnas, sin superponer nada sobre el mapa --- */
.fic-map{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start;
  margin-top:60px}
.fic-map .mapa{height:480px;background:var(--gg-arena);
  border:1px solid var(--gg-borde);border-radius:var(--gg-radio);overflow:hidden}
.fic-map .mapa iframe{width:100%;height:100%;border:0;display:block}
.fic-map h2{font-size:30px;font-weight:800;text-transform:uppercase;
  letter-spacing:-.025em;margin:0;padding-bottom:6px}
.fic-map .li{display:flex;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--gg-borde-3);font-size:14px;
  color:var(--gg-grafito);line-height:1.65}
.fic-map .li b{color:var(--gg-tinta)}
.fic-map .li svg{width:17px;height:17px;color:var(--gg-naranja);flex:none;margin-top:2px}
.fic-map .zonas-k{margin:22px 0 0;font-size:var(--gg-micro);font-weight:700;
  letter-spacing:var(--gg-track-label);text-transform:uppercase;color:var(--gg-gris-suave)}
.fic-map .zonas-v{margin:8px 0 0;font-size:14px;line-height:1.65;color:var(--gg-grafito)}

/* --- Opiniones: cabecera con la nota en grande --- */
.fic-op-hd{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;
  align-items:end;padding-bottom:32px;border-bottom:2px solid var(--gg-tinta)}
.fic-op-hd .nota{margin:12px 0 0;font-size:72px;font-weight:800;
  letter-spacing:-.04em;line-height:.85;color:var(--gg-tinta)}
.fic-op-hd .st{margin:12px 0 0;color:var(--gg-naranja);font-size:16px;
  letter-spacing:3px;line-height:1}
.fic-op-hd .n{margin:10px 0 0;font-size:13px;color:var(--gg-gris-claro)}
.fic-op-hd h2{font-size:30px;font-weight:800;text-transform:uppercase;
  letter-spacing:-.025em;line-height:1.05;margin:0}
.fic-op-hd .apoyo{margin:14px 0 0;font-size:var(--gg-body);line-height:1.7;
  color:var(--gg-gris-claro);max-width:52ch;border:0;padding:0}

/* --- Texto SEO final --- */
.fic-seo{background:var(--gg-crema-2);border-top:1px solid var(--gg-borde);
  border-bottom:1px solid var(--gg-borde)}
.fic-seo-in{max-width:var(--gg-max);margin:0 auto;padding:60px var(--gg-gutter)}
.fic-seo h2{font-size:30px;font-weight:800;text-transform:uppercase;
  letter-spacing:-.025em;max-width:26ch;line-height:1.05;margin:0}
.fic-seo .rule{width:42px;height:3px;background:var(--gg-naranja);margin:20px 0 26px}
.fic-seo-t{columns:3;column-gap:48px;max-width:1180px;
  font-size:14.5px;line-height:1.8;color:var(--gg-grafito)}
.fic-seo-t p{margin:0 0 16px;text-wrap:pretty}
.fic-seo-t p:last-child{margin-bottom:0}

/* --- Otras lavanderías: tarjetas con foto --- */
.ficha .otras{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:28px}
.ficha .otra{display:block;padding:0;overflow:hidden;align-items:stretch;
  transition:transform .3s var(--gg-ease),box-shadow .3s var(--gg-ease),border-color .3s}
.ficha .otra:hover{transform:translateY(-4px);box-shadow:var(--gg-sombra-op);
  border-color:var(--gg-naranja)}
.ficha .otra img{width:100%;height:150px;object-fit:cover;display:block;
  background:var(--gg-arena);border-radius:0}
.ficha .otra>span{display:block;padding:16px}
.ficha .otra .nm{display:block;font-size:13px;font-weight:700;line-height:1.3}
.ficha .otra .ad{display:block;margin-top:6px;font-size:var(--gg-meta);
  color:var(--gg-gris-claro)}
.ficha .otra img[src$=".svg"]{object-fit:contain;background:var(--gg-crema-2);
  border-bottom:1px solid var(--gg-borde)}

/* --- Responsive --- */
@media (max-width:1024px){
  .fic-data{grid-template-columns:1fr 1fr}
  .fic-data>div:nth-child(odd){padding-left:0}
  .fic-data>div:nth-child(2){padding-right:0;border-right:0}
  .ficha .maq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ficha .otras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fic-map{grid-template-columns:1fr;gap:32px}
  .fic-map .mapa{height:360px}
  .fic-op-hd{grid-template-columns:1fr;gap:28px;align-items:start}
  .fic-seo-t{columns:1}
}
@media (max-width:760px){
  .fic-foto{height:260px}
  .fic-head{margin-top:-40px;padding:28px 20px 0}
  .fic-head h1{font-size:30px;max-width:none}
  .fic-data{grid-template-columns:1fr}
  .fic-data>div{padding:18px 0;border-right:0;border-bottom:1px solid var(--gg-borde)}
  .fic-data>div:last-child{border-bottom:0}
  .ficha .maq,.ficha .otras{grid-template-columns:1fr}
  .fic-map .mapa{height:300px}
  .fic-map h2{font-size:24px}
  .fic-seo-in{padding:40px 20px}
}
/* Estado "cerrado" en la cabecera de ficha: gris, nunca el verde de abierto
   (el punto usa currentColor, así que cambia con el texto). */
.fic-estado.f-open--cerrado{color:var(--gg-gris-claro);background:none;border:0}
/* Defensa de anchos en la cabecera de ficha: en móvil la tarjeta no debe
   superar el ancho del contenedor, y la línea de estado + nota de Google
   tiene que poder partirse. */
.fic-head{max-width:min(1040px,100%);box-sizing:border-box}
.fic-head-top{max-width:100%}
.fic-google{flex-wrap:wrap;max-width:100%}
.fic-head h1,.fic-head .dir{overflow-wrap:anywhere}
/* Aire entre el mapa y las opiniones (iban pegados). */
.ficha .fic-map{margin-bottom:64px}
/* «Deja tu opinión» dentro de la ficha: variante compacta del de /opiniones/. */
.op-deja--ficha{margin-top:36px;background:#fff;border:1px solid var(--gg-borde)}
.op-deja--ficha .op-deja-f{justify-content:flex-end}
@media (max-width:900px){ .op-deja--ficha .op-deja-f{justify-content:flex-start} }
/* Precio de cada capacidad, bajo los kg. */
.mq .pr{margin-top:6px;font-family:var(--gg-font-mono);font-size:15px;font-weight:600;
  color:var(--gg-grafito);letter-spacing:-.01em}
.mq:last-child .pr{color:rgba(255,255,255,.95)}
/* La tarjeta de secado va en naranja: su etiqueta también en blanco, que en
   naranja sobre naranja no se leía. */
.ficha .mq:last-child .lb{color:#fff}
/* El número de la tarjeta destacada de «Ventajas para tu negocio» iba en gris
   sobre fondo negro y no se leía. */
.pq>.f .num{color:var(--gg-naranja-claro)}

/* === Ronda 12 — márgenes y nav móvil ======================================
   1) Las bandas de foto de la ficha vuelven a respetar el margen lateral del
   sitio: iban a sangre (ancho completo) y rompían la caja del resto de la
   página. Se alinean con .wrap (mismo ancho máximo y mismo gutter). */
.fic-foto{max-width:var(--gg-max);margin-inline:auto;padding-inline:var(--gg-gutter);
  background:transparent;height:auto}
.fic-foto img{height:clamp(240px,32vw,420px);border-radius:var(--gg-radio)}
.fic-head{margin-top:-96px}
@media (max-width:760px){
  .fic-foto img{height:220px}
  .fic-head{margin-top:-36px}
}

/* 2) Nav en móvil. El logo se comprimía a 32px de ancho (ilegible) porque el
   teléfono en texto, el selector de idioma, WhatsApp y la hamburguesa se
   repartían el espacio. Ahora: el logo no encoge y el teléfono pasa a icono,
   que es lo mismo con menos ancho. */
.nav-logo{flex:none}
.nav-tel{display:inline-flex;align-items:center;gap:7px}
@media (max-width:620px){
  .nav-in{gap:10px;padding-inline:var(--gg-gutter)}
  .nav-logo img{height:46px}
  .nav-end{gap:8px}
  .nav-tel span{display:none}            /* solo el icono: ahorra 60px */
  .nav-tel{width:44px;height:44px;justify-content:center;border:1px solid var(--gg-borde);
    border-radius:var(--gg-radio);color:var(--gg-naranja)}
  .nav-tel svg{width:19px;height:19px}
  .nav-lang{min-width:40px;padding-inline:8px;font-size:11px}
}
@media (max-width:380px){
  .nav-logo img{height:40px}
  .nav-lang{display:none}                /* en pantallas muy estrechas, el idioma va en el menú */
}

/* ---- Localizador: resultado "La más cercana" y fila resaltada (24 sep 2026) ---- */
.geo-res{margin:8px 0 0;padding:10px 12px;background:var(--gg-naranja);color:#fff;border-radius:3px;
  font-size:var(--gg-body-sm);font-weight:600;line-height:1.4}
.geo-res a{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:800}
.geo-res a:hover{color:#fff;opacity:.9}
.geo-res[hidden]{display:none}
.hero-bs .geo-res{margin-top:10px}
.loca-list a.is-near .nm,.hero-cerca a.is-near .nm{color:var(--gg-naranja)}
.loca-list a.is-near .km,.hero-cerca a.is-near .km{color:var(--gg-naranja);font-weight:700}
.lc.is-near{border-color:var(--gg-naranja)}

/* ---- FAQ por local en la ficha (SEO local, 24 sep 2026) ---- */
.fic-faq .faq{max-width:860px}
.fic-faq h2{margin-bottom:6px}

/* ---- Idiomas en móvil: dentro del menú, no en la barra (24 sep 2026) ---- */
.mn-lang{display:none}
@media (max-width:620px){
  .nav-end .nav-lang{display:none}
  .mn-lang{display:flex!important;gap:10px;padding:14px 0 4px}
  .mn-lang .nav-lang{display:inline-flex;min-width:48px;min-height:40px;font-size:12px}
}

/* ---- Buscador sin geolocalización obligatoria (24 sep 2026) ---- */
.geo-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0 0;margin:0;font:inherit;
  font-size:var(--gg-meta);font-weight:600;color:var(--gg-gris);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.geo-link:hover{color:var(--gg-naranja)}
.geo-link svg{color:var(--gg-naranja);flex:none}
.geo-res{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.geo-res .geo-res-dir{color:#fff;font-weight:600;font-size:var(--gg-meta);opacity:.95;text-decoration:underline;text-underline-offset:2px}
.geo-res .geo-res-dir:hover{opacity:1}
.geo-st:empty{display:none}