/* Lavandería Autoservicio KWL-Aqua · Collado Villalba
 *
 * REGISTRO: el VERDE de su marca. No lo he elegido yo: es el de las bolsas que
 * reparten, que es la única foto que tienen publicada. Casi todas las
 * lavanderías de autoservicio tiran a azul; la suya es verde, así que verde.
 *
 * Encima, blanco de ropa limpia, y como acento el AMARILLO DE LA MONEDA —
 * porque su propia web lo dice: «tan sencillo como echar una moneda».
 *
 * Tipografía: Outfit para los rótulos y Plus Jakarta Sans para leer. Las dos
 * limpias y sin florituras, que es lo que pide una lavandería.
 */

@font-face { font-family:'Outfit'; src:url(fonts/outfit.woff2) format('woff2'); font-weight:400 800; font-display:swap; }
@font-face { font-family:'Jakarta'; src:url(fonts/jakarta.woff2) format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  --verde:    #14a37a;   /* el de sus bolsas */
  --verde-os: #0d5c48;
  --verde-mu: #072e26;
  --verde-cl: #4ed3a8;
  --agua:     #eef7f4;
  --blanco:   #ffffff;
  --moneda:   #f2b418;
  --tinta:    #10231e;
  --tinta-ap: #5b7a72;
  --rotulo: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --texto: 'Jakarta', ui-sans-serif, system-ui, sans-serif;
  --ancho: 1140px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--agua); color:var(--tinta); font-family:var(--texto); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, picture, canvas, svg { max-width:100%; }
img { height:auto; display:block; }
a { color:inherit; }
.saltar { position:absolute; left:-9999px; top:0; z-index:99; background:var(--verde-os); color:#fff; padding:.8rem 1.2rem; font-weight:700; text-decoration:none; }
.saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--moneda); outline-offset:3px; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.3rem; padding:.75rem clamp(1rem,4vw,2.2rem); background:var(--verde-os); color:#fff; transition:box-shadow .25s; }
.cab--pegada { box-shadow:0 8px 26px -18px #0a2a22aa; }
.cab__marca { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.cab__marca svg { width:38px; height:38px; flex:none; }
.cab__nom { font-family:var(--rotulo); font-weight:800; font-size:1.06rem; line-height:1.08; letter-spacing:-0.01em; display:flex; flex-direction:column; gap:.24rem; }
.cab__nom span { font-family:var(--texto); font-size:.6rem; font-weight:600; letter-spacing:.2em; color:#ffffffa8; text-transform:uppercase; white-space:nowrap; }
.nav { display:flex; gap:1.4rem; margin-left:auto; }
.nav a { text-decoration:none; font-size:.86rem; font-weight:600; color:#ffffffc4; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.nav a:hover { color:#fff; border-color:var(--moneda); }
.cab__wa { display:inline-flex; align-items:center; gap:.5rem; background:var(--moneda); color:#3d2c00; text-decoration:none; padding:.6rem 1.1rem; border-radius:6px; font-weight:700; font-size:.87rem; transition:filter .18s, transform .18s; }
.cab__wa svg { width:17px; height:17px; flex:none; }
.cab__wa:hover { filter:brightness(1.08); transform:translateY(-1px); }
@media (max-width:940px) { .nav { display:none; } .cab__wa { margin-left:auto; } }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada { background:linear-gradient(160deg, var(--verde-os) 0%, var(--verde-mu) 100%); color:#fff; position:relative; overflow:hidden; }
.portada__caja { position:relative; z-index:2; max-width:var(--ancho); margin:0 auto; padding:clamp(2.4rem,6vw,4.4rem) clamp(1rem,4vw,2.2rem); display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:center; }
@media (max-width:940px) { .portada__caja { grid-template-columns:1fr; } }
.rotulo { margin:0 0 1rem; font-size:.71rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--moneda); display:flex; align-items:center; gap:.7rem; }
.rotulo::before { content:''; width:26px; height:3px; background:var(--moneda); flex:none; }
.portada h1 { font-family:var(--rotulo); font-weight:800; font-size:clamp(2.2rem,5.6vw,4rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1.1rem; max-width:15ch; text-wrap:balance; }
.portada h1 em { font-style:normal; color:var(--moneda); }
.portada__bajo { margin:0 0 1.7rem; max-width:33rem; font-size:clamp(1rem,1.5vw,1.12rem); color:#ffffffc8; }
.portada__acc { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.8rem; align-items:center; }
.bot { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; text-decoration:none; font-weight:700; font-size:.94rem; min-height:44px; border-radius:6px; transition:transform .18s, filter .18s, border-color .18s, color .18s; }
.bot svg { width:18px; height:18px; flex:none; }
.bot--fuerte { background:var(--moneda); color:#3d2c00; }
.bot--fuerte:hover { filter:brightness(1.08); transform:translateY(-2px); }
.bot--linea { border:1.5px solid #ffffff4d; color:#fff; }
.bot--linea:hover { border-color:var(--verde-cl); color:var(--verde-cl); transform:translateY(-2px); }
.estado { display:inline-flex; align-items:baseline; gap:.5rem; padding:.55rem .95rem; border-radius:6px; font-size:.86rem; border:1px solid #ffffff26; background:#ffffff0f; }
.estado b { font-weight:700; }
.estado--si b { color:var(--verde-cl); }
.estado--no b { color:#ffc9a0; }
.estado span { color:#ffffffa8; }
.portada__pie { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:1.2rem; border-top:1px solid #ffffff26; font-size:.82rem; color:#ffffffa0; }
.portada__pie b { display:block; font-family:var(--rotulo); font-weight:800; font-size:1.7rem; line-height:1.12; color:#fff; letter-spacing:-0.01em; }
@media (max-width:560px) { .portada__pie { gap:.65rem; font-size:.74rem; } .portada__pie b { font-size:1.35rem; } }
.portada__foto img { border-radius:12px; box-shadow:0 26px 54px -28px #000a; }
.portada__foto figcaption { margin-top:.7rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:#ffffff7a; text-align:center; }

/* ── Secciones ────────────────────────────────────────────────────── */
.sec { padding:clamp(3.2rem,7vw,5.6rem) clamp(1rem,4vw,2.2rem); }
.sec__caja { max-width:var(--ancho); margin:0 auto; }
.sec--blanco { background:var(--blanco); }
h2 { font-family:var(--rotulo); font-weight:800; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1rem; max-width:22ch; text-wrap:balance; }
.entradilla { margin:0 0 2.2rem; max-width:58ch; font-size:1.04rem; color:var(--tinta-ap); }
.sube { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.sube.dentro { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .sube { opacity:1; transform:none; } }

/* ── La calculadora ───────────────────────────────────────────────── */
.calc { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (max-width:900px) { .calc { grid-template-columns:1fr; } }
.calc__tambor { display:grid; place-items:center; }
.calc__tambor canvas { width:min(320px,100%); aspect-ratio:1; }
.calc__mandos { background:var(--blanco); border:1px solid #d9e8e3; border-radius:14px; padding:1.6rem 1.5rem; }
.campo { margin-bottom:1.3rem; }
.campo__t { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 .5rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-ap); }
.campo__t b { font-family:var(--rotulo); font-size:1.5rem; font-weight:800; color:var(--verde-os); letter-spacing:-.02em; }
.campo input[type=range] { width:100%; accent-color:var(--verde); min-height:44px; }
.campo__extremos { display:flex; justify-content:space-between; margin:0; font-size:.76rem; color:var(--tinta-ap); }
.interruptor { display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border:1.5px solid #d9e8e3; border-radius:10px; cursor:pointer; font-weight:600; font-size:.95rem; min-height:44px; transition:border-color .18s, background .18s; }
.interruptor:hover { border-color:var(--verde); }
.interruptor input { width:20px; height:20px; accent-color:var(--verde); flex:none; }
.interruptor span { color:var(--tinta-ap); font-weight:400; font-size:.88rem; }

.total { margin-top:1.4rem; padding-top:1.3rem; border-top:2px solid var(--agua); }
.total__cifras { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media (max-width:420px) { .total__cifras { grid-template-columns:1fr 1fr; } }
.total__cifras div b { display:block; font-family:var(--rotulo); font-weight:800; font-size:1.9rem; line-height:1.08; color:var(--verde-os); letter-spacing:-0.01em; }
.total__cifras div span { font-size:.76rem; color:var(--tinta-ap); }
.total ul { list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.4rem; }
.total li { display:flex; justify-content:space-between; gap:1rem; font-size:.93rem; color:var(--tinta-ap); }
.total li b { color:var(--tinta); font-weight:700; }
.total__aviso { margin:0; font-size:.9rem; color:var(--verde-os); font-weight:600; min-height:2.6em; }

/* ── Cómo funciona ────────────────────────────────────────────────── */
.pasos { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; list-style:none; margin:0; padding:0; counter-reset:p; }
@media (max-width:900px) { .pasos { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .pasos { grid-template-columns:1fr; } }
.pasos li { background:var(--blanco); border:1px solid #d9e8e3; border-radius:12px; padding:1.4rem 1.25rem; display:flex; flex-direction:column; gap:.45rem; }
.pasos li::before { counter-increment:p; content:counter(p); font-family:var(--rotulo); font-weight:800; font-size:1rem; width:34px; height:34px; display:grid; place-items:center; background:var(--verde); color:#fff; border-radius:50%; margin-bottom:.3rem; }
.pasos h3 { margin:0; font-family:var(--rotulo); font-weight:700; font-size:1.04rem; }
.pasos p { margin:0; font-size:.92rem; color:var(--tinta-ap); }

/* ── Las máquinas ─────────────────────────────────────────────────── */
.maquinas { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:900px) { .maquinas { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .maquinas { grid-template-columns:1fr; } }
.maquinas li { background:var(--agua); border:1px solid #d9e8e3; border-radius:12px; padding:1.3rem 1.2rem; }
.maquinas .tipo { font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--verde); }
.maquinas h3 { margin:.3rem 0 .1rem; font-family:var(--rotulo); font-weight:700; font-size:1.02rem; }
.maquinas .cap { font-size:.9rem; color:var(--tinta-ap); }
.maquinas .pre { display:block; margin-top:.6rem; font-family:var(--rotulo); font-weight:800; font-size:1.7rem; color:var(--verde-os); letter-spacing:-.02em; }

/* ── Dónde ────────────────────────────────────────────────────────── */
.donde { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }
@media (max-width:860px) { .donde { grid-template-columns:1fr; } }
.ficha { display:grid; gap:1.15rem; align-content:center; }
.ficha__fila { display:flex; gap:.9rem; align-items:flex-start; }
.ficha__fila svg { width:21px; height:21px; color:var(--verde); flex:none; margin-top:.2rem; }
.ficha__fila b { display:block; font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:var(--tinta-ap); font-weight:700; margin-bottom:.18rem; }
.ficha__fila > div { font-size:1.01rem; }
.otras { background:var(--verde-os); color:#fff; border-radius:14px; padding:1.6rem 1.5rem; align-content:center; display:grid; }
.otras h3 { font-family:var(--rotulo); font-weight:700; font-size:1.1rem; margin:0 0 .9rem; }
.otras ul { list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.otras li { padding-bottom:.9rem; border-bottom:1px solid #ffffff1f; }
.otras li:last-child { border-bottom:0; padding-bottom:0; }
.otras b { display:block; font-weight:700; }
.otras span { font-size:.9rem; color:#ffffffa8; }
.otras a { color:var(--moneda); text-decoration:none; font-size:.9rem; font-weight:600; }
.otras a:hover { text-decoration:underline; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background:var(--verde-mu); color:#ffffff9c; padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2.2rem) 1.9rem; font-size:.87rem; }
.pie__caja { max-width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
@media (max-width:780px) { .pie__caja { grid-template-columns:1fr; } }
.pie h3 { font-family:var(--rotulo); font-weight:700; color:#fff; font-size:1rem; margin:0 0 .7rem; }
.pie a { color:#ffffffbb; text-decoration:none; }
.pie a:hover { color:var(--moneda); text-decoration:underline; }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.pie__legal { max-width:var(--ancho); margin:2rem auto 0; padding-top:1.3rem; border-top:1px solid #ffffff1f; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.79rem; }

/* ── Legales ──────────────────────────────────────────────────────── */
.legal { max-width:46rem; margin:0 auto; padding:clamp(2.4rem,6vw,4.2rem) clamp(1rem,4vw,2.2rem); }
.legal h1 { font-family:var(--rotulo); font-weight:800; font-size:clamp(1.8rem,4.6vw,2.5rem); line-height:1.1; margin:0 0 1.5rem; letter-spacing:-0.01em; }
.legal h2 { font-size:1.16rem; margin:2.1rem 0 .6rem; max-width:none; }
.legal a { color:#0d7a5c; }
.legal .volver { display:inline-block; margin-bottom:1.5rem; font-weight:700; text-decoration:none; color:var(--verde-os); }
.legal .volver:hover { text-decoration:underline; }

/* MEDIDO en un móvil de 390 px: el subtítulo de la marca lleva "nowrap" y, al no
   poder encoger, empujaba el botón de WhatsApp fuera de la pantalla — la página
   se movía de lado. En móvil el subtítulo sobra: el nombre ya está ahí. */
@media (max-width: 560px) {
  .cab__nom span { display: none; }
  .cab__marca { min-width: 0; }
  .cab__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}