/* ==========================================================
   Parquet Planet · Alquiler de maquinaria
   Una sola hoja para toda la web. Colores sacados del logo real:
   verde oscuro #1c7538, verde claro #5a9b47, negro.
   ========================================================== */

:root{
  --verde:#1c7538;
  --verde-2:#5a9b47;
  --verde-claro:#e6f1e8;
  --verde-tinta:#0f4a24;
  --negro:#0f1512;
  --carbon:#161d18;
  --texto:#171c19;
  --gris-texto:#5c675f;
  --gris:#f3f5f3;
  --gris-2:#e4e8e5;
  --blanco:#ffffff;
  --radio:18px;
  --radio-s:10px;
  --sombra:0 10px 30px rgba(15,21,18,.08);
  --sombra-2:0 18px 44px rgba(15,21,18,.14);
  --f-titulo:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-texto:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ancho:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blanco);color:var(--texto);
  font-family:var(--f-texto);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  opacity:1;transition:opacity .15s ease;
}
body.saliendo{opacity:0}
body.entrando{opacity:0}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--f-titulo);line-height:1.1;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:700}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em}
.contenedor{width:min(var(--ancho),calc(100% - 2.5rem));margin-inline:auto}
.seccion{padding:clamp(4rem,9vw,7.5rem) 0}
.seccion--gris{background:var(--gris)}
.seccion--oscura{background:var(--negro);color:#fff}
.seccion--verde{background:var(--verde);color:#fff}
.etiqueta{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-bottom:1rem;
}
.etiqueta::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.seccion--oscura .etiqueta,.seccion--verde .etiqueta{color:#9ed18c}
.seccion--verde .etiqueta{color:#d8f0cf}
.cabecera-seccion{max-width:720px;margin-bottom:clamp(2rem,5vw,3.5rem)}
.cabecera-seccion p{font-size:1.1rem;color:var(--gris-texto);margin-top:1rem}
.seccion--oscura .cabecera-seccion p{color:#b9c4bc}
.seccion--verde .cabecera-seccion p{color:#e5f1e0}
.cabecera-seccion--centro{margin-inline:auto;text-align:center}

/* ---------- Iconos SVG ---------- */
.ico{width:1.2em;height:1.2em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico--g{width:2.4rem;height:2.4rem;stroke-width:1.6}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--pri{background:var(--verde);color:#fff;box-shadow:0 8px 20px rgba(28,117,56,.25)}
.btn--pri:hover{background:var(--verde-tinta)}
.btn--sec{background:var(--negro);color:#fff}
.btn--sec:hover{background:#000}
.btn--borde{border:1.5px solid var(--gris-2);color:var(--texto);background:#fff}
.btn--borde:hover{border-color:var(--verde);color:var(--verde)}
.btn--claro{background:#fff;color:var(--verde-tinta)}
.btn--claro:hover{background:var(--verde-claro)}
.btn--fantasma{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn--fantasma:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--peq{padding:.6rem 1.05rem;font-size:.85rem}
.btn--bloque{width:100%}
.btn .ico{width:1.05em;height:1.05em}

/* ---------- Barra de progreso ---------- */
.progreso{position:fixed;top:0;left:0;height:3px;width:0;background:var(--verde-2);z-index:1001;transition:width .1s linear}

/* ---------- Cabecera ---------- */
.cab{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
  padding:1.1rem 0;
}
.cab--solida,.cab--mini{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(15,21,18,.06)}
.cab--mini{padding:.6rem 0}
.cab__fila{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.cab__logo img{height:44px;width:auto;transition:height .3s ease}
.cab--mini .cab__logo img{height:36px}
.cab__nav{display:flex;align-items:center;gap:1.8rem}
.cab__nav a{font-weight:500;font-size:.95rem;position:relative;padding:.25rem 0}
.cab__nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--verde);transition:width .25s var(--ease)}
.cab__nav a:hover::after,.cab__nav a.activo::after{width:100%}
.cab__acciones{display:flex;align-items:center;gap:.6rem}
.cab__otra{font-size:.85rem;display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:999px;border:1.5px solid var(--gris-2);font-weight:500;transition:border-color .2s,color .2s,transform .2s}
.cab__otra:hover{border-color:var(--verde);color:var(--verde);transform:translateY(-2px)}
.cab--transparente:not(.cab--mini){color:#fff}
.cab--transparente:not(.cab--mini) .cab__otra{border-color:rgba(255,255,255,.35);color:#fff}
.cab--transparente:not(.cab--mini) .cab__nav a::after{background:#fff}
.cab--transparente:not(.cab--mini) .cab__logo{background:#fff;padding:.35rem .6rem;border-radius:10px}
.cab__burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center}
.cab__burger span{display:block;width:22px;height:2px;background:currentColor;position:relative;transition:transform .3s,background .3s}
.cab__burger span::before,.cab__burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;transition:transform .3s,top .3s}
.cab__burger span::before{top:-7px}.cab__burger span::after{top:7px}
.menu-abierto .cab__burger span{background:transparent}
.menu-abierto .cab__burger span::before{top:0;transform:rotate(45deg)}
.menu-abierto .cab__burger span::after{top:0;transform:rotate(-45deg)}

/* Menú móvil */
.menu-movil{
  position:fixed;inset:0;background:var(--negro);color:#fff;z-index:999;
  display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem 2rem;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.menu-abierto .menu-movil{opacity:1;pointer-events:auto}
.menu-movil a{font-family:var(--f-titulo);font-size:2rem;font-weight:600;padding:.5rem 0;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s var(--ease)}
.menu-abierto .menu-movil a{opacity:1;transform:none}
.menu-movil a:nth-child(2){transition-delay:.05s}.menu-movil a:nth-child(3){transition-delay:.1s}.menu-movil a:nth-child(4){transition-delay:.15s}.menu-movil a:nth-child(5){transition-delay:.2s}.menu-movil a:nth-child(6){transition-delay:.25s}
.menu-movil__pie{margin-top:2.5rem;display:flex;flex-direction:column;gap:.8rem}
.menu-movil__pie a{font-family:var(--f-texto);font-size:1rem;font-weight:500;opacity:1;transform:none;display:inline-flex;gap:.5rem;align-items:center}

/* ---------- Intro (solo la primera vez) ---------- */
.intro{
  position:fixed;inset:0;z-index:2000;background:var(--negro);color:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .45s var(--ease);
}
.intro--fuera{transform:translateY(-100%)}
.intro__suelo{position:absolute;inset:-10% -10%;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;transform:rotate(-8deg);opacity:.9}
.intro__tabla{
  height:clamp(38px,6vh,64px);border-radius:4px;background:var(--verde);
  opacity:0;transform:translateX(-60px);
  animation:tablaEntra .35s var(--ease) forwards;
}
.intro__tabla:nth-child(3n){background:var(--verde-2)}
.intro__tabla:nth-child(5n){background:#2b8a47}
.intro__tabla:nth-child(7n){background:#134f27}
.intro__centro{position:relative;text-align:center;padding:2rem}
.intro__placa{
  background:#fff;border-radius:22px;padding:1.6rem 2.2rem;display:inline-block;
  opacity:0;transform:scale(.92);animation:placa .4s var(--ease) .45s forwards;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.intro__placa img{height:clamp(52px,9vw,84px);width:auto}
.intro__texto{
  margin-top:1.4rem;font-family:var(--f-titulo);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-size:clamp(.8rem,2vw,1.05rem);color:#cfe6c8;
  opacity:0;transform:translateY(10px);animation:sube .4s var(--ease) .65s forwards;
}
.intro__saltar{
  position:absolute;right:1.5rem;bottom:1.5rem;color:#9fb3a5;font-size:.85rem;
  display:inline-flex;gap:.4rem;align-items:center;padding:.6rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  transition:color .2s,border-color .2s;
}
.intro__saltar:hover{color:#fff;border-color:#fff}
@keyframes tablaEntra{to{opacity:1;transform:none}}
@keyframes placa{to{opacity:1;transform:none}}
@keyframes sube{to{opacity:1;transform:none}}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:var(--negro);
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,21,18,.35) 0%,rgba(15,21,18,.15) 40%,rgba(15,21,18,.92) 100%)}
.hero__contenido{position:relative;padding:9rem 0 4rem}
.hero__sup{display:inline-flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:500;padding:.5rem .9rem;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(6px);margin-bottom:1.6rem}
.hero__sup .punto{width:8px;height:8px;border-radius:50%;background:#8fd67a;box-shadow:0 0 0 4px rgba(143,214,122,.25)}
.hero h1{max-width:12ch}
.hero h1 em{font-style:normal;color:#9ed18c}
.palabra>span{padding-bottom:.08em}
.hero__texto{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:52ch;color:#d5ddd7;margin:1.4rem 0 2rem}
.hero__botones{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:3.5rem;max-width:860px}
.cifra{
  position:relative;padding:1.4rem 1.5rem 1.6rem;border-radius:18px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s,transform .3s var(--ease);overflow:hidden;
}
.cifra:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.cifra__ico{width:40px;height:40px;border-radius:12px;background:rgba(158,209,140,.16);color:#9ed18c;display:grid;place-items:center;margin-bottom:1rem}
.cifra__ico .ico{width:20px;height:20px}
.cifra strong{display:block;font-family:var(--f-titulo);font-size:clamp(2.2rem,3.4vw,3rem);font-weight:700;line-height:1;letter-spacing:-.03em}
.cifra strong small{font-size:.5em;font-weight:600;margin-left:.15em;color:#9ed18c}
.cifra > span{display:block;font-size:.9rem;color:#c7d0c9;margin-top:.5rem}
.cifra__barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.cifra__barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--verde-2),#9ed18c);transition:width 1.6s var(--ease)}
.es-visible .cifra__barra i{width:100%}
.es-visible .cifra:nth-child(2) .cifra__barra i{transition-delay:.25s}
.es-visible .cifra:nth-child(3) .cifra__barra i{transition-delay:.5s}

/* Palabra con color en movimiento */
.brillo{
  font-style:normal;
  background:linear-gradient(100deg,#9ed18c 0%,#5a9b47 25%,#c9f2b8 50%,#2e9a52 75%,#9ed18c 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:brillo 6s ease-in-out infinite;
  padding-right:.06em;
}
.portada .brillo{background-image:linear-gradient(100deg,var(--verde) 0%,#5a9b47 25%,#8fd67a 50%,var(--verde-tinta) 75%,var(--verde) 100%)}
.portada--oscura .brillo{background-image:linear-gradient(100deg,#9ed18c 0%,#5a9b47 25%,#c9f2b8 50%,#2e9a52 75%,#9ed18c 100%)}
@keyframes brillo{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero__scroll{position:absolute;right:2rem;bottom:2rem;width:32px;height:52px;border:1.5px solid rgba(255,255,255,.35);border-radius:20px}
.hero__scroll::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:rueda 1.8s ease-in-out infinite}
@keyframes rueda{0%{transform:translateY(0);opacity:1}70%{transform:translateY(18px);opacity:0}100%{opacity:0}}

/* Palabras que entran una a una */
.palabra{display:inline-block;overflow:hidden;vertical-align:bottom}
.palabra>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease)}
.es-visible .palabra>span{transform:none}

/* ---------- Marquesina ---------- */
.marquesina{overflow:hidden;background:var(--verde);color:#fff;padding:.9rem 0;font-family:var(--f-titulo);font-weight:600;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.marquesina__pista{display:flex;gap:3rem;width:max-content;animation:desliza 40s linear infinite}
.marquesina__pista span{display:inline-flex;align-items:center;gap:3rem;white-space:nowrap}
.marquesina__pista i{width:8px;height:8px;border-radius:50%;background:#9ed18c;display:inline-block}
.marquesina:hover .marquesina__pista{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ---------- Tarjetas de máquina ---------- */
.cuadricula{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem}
.tarjeta{
  background:#fff;border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--sombra);transition:transform .3s var(--ease),box-shadow .3s ease;
  position:relative;
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-2)}
.tarjeta__media{aspect-ratio:4/3;overflow:hidden;background:var(--gris);position:relative}
.tarjeta__media img{width:100%;height:100%;object-fit:contain;background:#fff;padding:.8rem}
.tarjeta__media video{width:100%;height:100%;object-fit:cover}
.tarjeta__cat{position:absolute;top:.9rem;left:.9rem;background:rgba(255,255,255,.92);color:var(--verde);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px}
.tarjeta__cuerpo{padding:1.25rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.tarjeta h3{font-size:1.12rem}
.tarjeta p{color:var(--gris-texto);font-size:.93rem;margin:0;flex:1}
.tarjeta__pie{display:flex;align-items:center;justify-content:space-between;margin-top:.8rem;gap:.8rem}
.precio{font-family:var(--f-titulo);line-height:1}
.precio strong{font-size:1.5rem;font-weight:700}
.precio small{display:block;font-size:.75rem;color:var(--gris-texto);font-family:var(--f-texto);margin-top:.25rem}
.tarjeta__enlace{position:absolute;inset:0;z-index:1}
.tarjeta .btn{position:relative;z-index:2}
.tarjeta.oculta{display:none}
.tarjeta.entra{animation:aparece .45s var(--ease) both}
@keyframes aparece{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Filtros */
.filtros{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filtro{padding:.55rem 1.05rem;border-radius:999px;border:1.5px solid var(--gris-2);font-weight:500;font-size:.9rem;background:#fff;transition:background .2s,color .2s,border-color .2s,transform .2s}
.filtro:hover{border-color:var(--verde);color:var(--verde);transform:translateY(-2px)}
.filtro.activo{background:var(--negro);border-color:var(--negro);color:#fff}
.filtros__contador{margin-left:auto;align-self:center;color:var(--gris-texto);font-size:.9rem}

/* ---------- Bloque de ventajas ---------- */
.ventajas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.ventaja{padding:1.8rem;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra)}
.seccion--oscura .ventaja{background:var(--carbon);box-shadow:none;border:1px solid rgba(255,255,255,.07)}
.ventaja__ico{width:52px;height:52px;border-radius:14px;background:var(--verde-claro);color:var(--verde);display:grid;place-items:center;margin-bottom:1.1rem}
.seccion--oscura .ventaja__ico{background:rgba(158,209,140,.12);color:#9ed18c}
.ventaja h3{margin-bottom:.4rem}
.ventaja p{color:var(--gris-texto);margin:0;font-size:.95rem}
.seccion--oscura .ventaja p{color:#b9c4bc}

/* ---------- Pasos (cómo funciona) ---------- */
.pasos{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:paso}
.pasos::before{content:"";position:absolute;top:32px;left:10%;right:10%;height:2px;background:var(--gris-2)}
.pasos__linea{position:absolute;top:32px;left:10%;height:2px;width:0;background:var(--verde);transition:width 1.4s var(--ease)}
.es-visible .pasos__linea{width:80%}
.paso{position:relative;text-align:center;padding:0 .5rem}
.paso__num{
  width:64px;height:64px;border-radius:50%;background:#fff;border:2px solid var(--gris-2);
  display:grid;place-items:center;margin:0 auto 1.3rem;font-family:var(--f-titulo);font-weight:700;font-size:1.3rem;
  position:relative;transition:border-color .4s,background .4s,color .4s;
}
.es-visible .paso__num{border-color:var(--verde);background:var(--verde);color:#fff}
.es-visible .paso:nth-child(2) .paso__num{transition-delay:.5s}
.es-visible .paso:nth-child(3) .paso__num{transition-delay:1s}
.paso h3{margin-bottom:.5rem}
.paso p{color:var(--gris-texto);font-size:.95rem;margin:0}

/* ---------- Banda con vídeo ---------- */
.banda{position:relative;min-height:70vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--negro)}
.banda video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.banda__velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,21,18,.9) 0%,rgba(15,21,18,.55) 55%,rgba(15,21,18,.2) 100%)}
.banda__contenido{position:relative;padding:5rem 0;max-width:600px}
.banda__contenido p{color:#d5ddd7;font-size:1.1rem}
.banda__contenido h2{margin-bottom:1rem}

/* Dos columnas con vídeo vertical */
.dos-col{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.reel{border-radius:var(--radio);overflow:hidden;aspect-ratio:9/14;background:var(--gris);box-shadow:var(--sombra-2);max-width:380px;margin-inline:auto}
.reel video{width:100%;height:100%;object-fit:cover}
.lista-check{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}
.lista-check li{display:flex;gap:.8rem;align-items:flex-start}
.lista-check .ico{color:var(--verde);margin-top:.2rem}
.seccion--oscura .lista-check .ico{color:#9ed18c}

/* ---------- Ficha de máquina ---------- */
.ficha{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}
.galeria__principal{border-radius:var(--radio);overflow:hidden;aspect-ratio:4/3;background:#fff;border:1px solid var(--gris-2)}
.galeria__principal img{width:100%;height:100%;object-fit:contain;padding:1.5rem;transition:opacity .35s ease}
.galeria__principal video{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.galeria__principal.cambia img{opacity:0}
.galeria__mini{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;margin-top:.6rem}
.galeria__mini button{aspect-ratio:1;border-radius:var(--radio-s);overflow:hidden;border:2px solid transparent;padding:0;transition:border-color .2s,transform .2s;background:var(--gris);position:relative}
.galeria__mini button:hover{transform:translateY(-2px)}
.galeria__mini button.activo{border-color:var(--verde)}
.galeria__mini img{width:100%;height:100%;object-fit:contain;background:#fff}
.galeria__mini .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,21,18,.35);color:#fff}
.panel{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:1.8rem;position:sticky;top:96px}
.panel__cat{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--verde)}
.panel h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:.4rem 0 .6rem}
.panel__corto{color:var(--gris-texto)}
.tarifas-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:1.4rem 0}
.tarifa-mini{background:var(--gris);border-radius:var(--radio-s);padding:.9rem .6rem;text-align:center;border:2px solid transparent;transition:border-color .2s,background .2s}
.tarifa-mini.activo{border-color:var(--verde);background:var(--verde-claro)}
.tarifa-mini strong{display:block;font-family:var(--f-titulo);font-size:1.35rem}
.tarifa-mini span{font-size:.75rem;color:var(--gris-texto)}
.calculadora{border-top:1px solid var(--gris-2);padding-top:1.2rem;margin-top:.4rem}
.calculadora label{font-size:.85rem;font-weight:600;display:block;margin-bottom:.5rem}
.contador-dias{display:flex;align-items:center;gap:.6rem}
.contador-dias button{width:42px;height:42px;border-radius:12px;border:1.5px solid var(--gris-2);font-size:1.3rem;display:grid;place-items:center;transition:border-color .2s,color .2s}
.contador-dias button:hover{border-color:var(--verde);color:var(--verde)}
.contador-dias output{font-family:var(--f-titulo);font-weight:700;font-size:1.3rem;min-width:4.5rem;text-align:center}
.calculadora__total{display:flex;justify-content:space-between;align-items:baseline;margin:1.1rem 0 .3rem}
.calculadora__total strong{font-family:var(--f-titulo);font-size:2rem;transition:transform .2s}
.calculadora__total strong.salta{transform:scale(1.08)}
.calculadora__nota{font-size:.8rem;color:var(--gris-texto);margin:0 0 1.1rem}
.panel .btn+.btn{margin-top:.6rem}
.ficha__bloques{margin-top:3.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem}
.bloque h3{margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.bloque h3 .ico{color:var(--verde)}
.specs{width:100%;border-collapse:collapse;font-size:.95rem}
.specs td{padding:.6rem 0;border-bottom:1px solid var(--gris-2)}
.specs td:last-child{text-align:right;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.45rem .85rem;border-radius:999px;background:var(--verde-claro);color:var(--verde-tinta);font-size:.85rem;font-weight:500}
.miga{font-size:.85rem;color:var(--gris-texto);margin-bottom:1.5rem;display:flex;gap:.5rem;align-items:center}
.miga a:hover{color:var(--verde)}
.relacionadas{margin-top:5rem}

/* ---------- Tabla de tarifas ---------- */
.tabla-caja{overflow-x:auto;border-radius:var(--radio);box-shadow:var(--sombra);background:#fff}
.tabla{width:100%;border-collapse:collapse;min-width:720px}
.tabla th,.tabla td{padding:1.1rem 1.2rem;text-align:left;border-bottom:1px solid var(--gris-2)}
.tabla th{font-family:var(--f-titulo);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-texto);font-weight:600;background:var(--gris)}
.tabla td:not(:first-child),.tabla th:not(:first-child){text-align:right}
.tabla td strong{font-family:var(--f-titulo);font-size:1.05rem}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background .2s}
.tabla tbody tr:hover{background:var(--gris)}
.tabla .destacado{color:var(--verde);font-weight:700}
.tabla a{font-weight:600}
.tabla a:hover{color:var(--verde)}
.tabla__cat{font-size:.72rem;color:var(--gris-texto);text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:.15rem}
.tabla .ahorro{display:inline-block;margin-left:.4rem;font-size:.7rem;background:var(--verde-claro);color:var(--verde-tinta);padding:.15rem .45rem;border-radius:999px;font-weight:700}
.condiciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem;margin-top:2.5rem}
.condicion{padding:1.4rem;border-radius:var(--radio);background:var(--gris)}
.condicion h4{font-size:1rem;margin-bottom:.4rem;display:flex;gap:.5rem;align-items:center}
.condicion .ico{color:var(--verde)}
.condicion p{margin:0;font-size:.9rem;color:var(--gris-texto)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.7rem}
.faq details{background:#fff;border-radius:var(--radio-s);box-shadow:var(--sombra);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--f-titulo)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform .3s var(--ease);color:var(--verde)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq .faq__cuerpo{padding:0 1.4rem 1.3rem;color:var(--gris-texto)}
.faq .faq__cuerpo p{margin:0}

/* ---------- Formulario de reserva ---------- */
.reserva{display:grid;grid-template-columns:1fr .8fr;gap:3rem;align-items:start}
.formulario{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:2rem}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.85rem;font-weight:600}
.campo input,.campo select,.campo textarea{
  font:inherit;padding:.8rem .95rem;border-radius:12px;border:1.5px solid var(--gris-2);background:#fff;color:var(--texto);
  transition:border-color .2s,box-shadow .2s;width:100%;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(28,117,56,.12)}
.campo textarea{min-height:110px;resize:vertical}
.campo small{color:var(--gris-texto);font-size:.78rem}
.consentimiento{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--gris-texto);margin:1.2rem 0}
.consentimiento input{margin-top:.25rem;accent-color:var(--verde)}
/* ---------- ¿Qué vas a hacer? y las sugerencias ---------- */
/* La pregunta de las recomendaciones va remarcada: es la que hace que el
   cliente se anime a llevarse más cosas (David, 16/09/2026). */
.trabajos__pregunta{
  display:flex;align-items:flex-start;gap:.6rem;
  background:var(--verde-claro);border-left:4px solid var(--verde);
  border-radius:0 12px 12px 0;padding:.9rem 1rem;margin:1.3rem 0 .9rem;
  font-family:var(--f-titulo);font-size:1rem;font-weight:600;line-height:1.35;
  color:var(--verde-tinta);
}
.trabajos__pregunta .ico{width:20px;height:20px;color:var(--verde);flex:none;margin-top:.1rem}
.trabajos{display:flex;flex-wrap:wrap;gap:.5rem}
.trabajo{
  display:inline-flex;align-items:center;gap:.45rem;
  background:#fff;border:1px solid var(--gris-2);border-radius:999px;
  padding:.5rem .9rem .5rem .75rem;font-size:.88rem;font-weight:500;color:var(--texto);
  transition:background .2s,border-color .2s,color .2s;
}
.trabajo .ico{width:17px;height:17px;color:var(--verde);flex:none;transition:color .2s}
.trabajo:hover{border-color:var(--verde);background:var(--verde-claro)}
.trabajo.activo{background:var(--verde);border-color:var(--verde);color:#fff}
.trabajo.activo .ico{color:#fff}

.sugeridas{
  background:var(--gris);border-radius:16px;padding:1.1rem;margin-top:.9rem;
  animation:sugEntra .35s var(--ease);
}
.sugeridas--con{margin-top:1.2rem;background:var(--verde-claro)}
@keyframes sugEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sugeridas__titulo{font-size:.88rem;color:var(--gris-texto);margin:0 0 .8rem}
.sugeridas--con .sugeridas__titulo{color:var(--verde-tinta);font-weight:600}
.sugeridas__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.6rem}

.sug{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:.6rem;align-items:center;
  background:#fff;border-radius:12px;padding:.55rem .6rem;
}
.sug img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:8px}
.sug__texto{min-width:0}
.sug__texto a{display:block;font-size:.86rem;font-weight:600;line-height:1.2;color:var(--verde-tinta)}
.sug__texto a:hover{color:var(--verde)}
.sug__texto span{display:block;font-size:.74rem;color:var(--gris-texto);margin-top:.15rem}
.sug__btn{
  grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  background:var(--verde-claro);color:var(--verde-tinta);border-radius:999px;
  padding:.4rem .7rem;font-size:.8rem;font-weight:600;margin-top:.15rem;
  transition:background .2s,color .2s;
}
.sug__btn .ico{width:14px;height:14px}
.sug__btn:hover{background:var(--verde);color:#fff}
.sug__btn--hecho{background:var(--verde);color:#fff}
.sugeridas--con .sug__btn{background:var(--gris)}
.sugeridas--con .sug__btn:hover,.sugeridas--con .sug__btn--hecho{background:var(--verde);color:#fff}

/* ---------- Calendario de la reserva ---------- */
.calendario{
  background:#fff;border:1px solid var(--gris-2);border-radius:16px;padding:1rem 1.1rem 1.2rem;
  user-select:none;
}
.calendario__barra{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.9rem}
.calendario__pie{font-size:.88rem;font-weight:600;color:var(--verde-tinta);text-align:center;flex:1}
.calendario__flecha{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:1.2rem;line-height:1;color:var(--verde-tinta);background:var(--gris);transition:background .2s,opacity .2s;
}
.calendario__flecha:hover:not(:disabled){background:var(--verde-claro)}
.calendario__flecha:disabled{opacity:.3;cursor:default}
.calendario__meses{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.calendario__titulo{
  text-align:center;font-family:var(--f-titulo);font-size:.95rem;font-weight:600;
  text-transform:capitalize;margin-bottom:.6rem;
}
.calendario__semana,.calendario__dias{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.calendario__semana span{
  text-align:center;font-size:.72rem;font-weight:600;color:var(--gris-texto);
  text-transform:uppercase;letter-spacing:.04em;padding-bottom:.35rem;
}
.dia{
  aspect-ratio:1;display:grid;place-items:center;font-size:.86rem;font-weight:500;
  border-radius:9px;color:var(--texto);transition:background .15s,color .15s;
}
.dia--hueco{visibility:hidden}
.dia:not(.dia--fuera):not(.dia--hueco):hover{background:var(--verde-claro);color:var(--verde-tinta)}
.dia--fuera{color:var(--gris-2);cursor:default}
.dia--dentro{background:var(--verde-claro);color:var(--verde-tinta);border-radius:0}
.dia--inicio,.dia--fin{background:var(--verde)!important;color:#fff!important;font-weight:700}
.dia--inicio{border-radius:9px 0 0 9px}
.dia--fin{border-radius:0 9px 9px 0}
.dia--inicio.dia--fin{border-radius:9px}
@media (max-width:620px){
  .calendario__meses{grid-template-columns:1fr}
  .calendario__meses .calendario__mes:last-child{display:none}
}

/* Cuántas unidades se añaden desde la ficha */
.anadir-uds{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin:0 0 .8rem;font-size:.9rem;font-weight:600;color:var(--verde-tinta);
}
.anadir-uds small{font-weight:400;font-size:.8rem;color:var(--gris-texto)}

/* La copia de la foto que sale volando hacia el carrito */
.vuela{
  position:fixed;z-index:1500;pointer-events:none;border-radius:12px;
  background:#fff center/contain no-repeat;box-shadow:0 12px 30px rgba(15,21,18,.25);
}

/* ---------- Carrito de reserva ---------- */
/* Contador que sale en el botón «Reservar» de la cabecera */
.cuenta{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 .35rem;
  margin-left:.15rem;border-radius:999px;background:#fff;color:var(--verde-tinta);
  font-size:.75rem;font-weight:700;line-height:1;
}
/* `display:inline-grid` gana al `hidden` del navegador, así que hay que decirlo
   a mano: si no, el contador enseñaba un 0 con el carrito vacío. */
.cuenta[hidden]{display:none}
.cuenta{transition:transform .25s var(--ease)}
.cuenta.salta{transform:scale(1.5)}
.carrito{display:flex;flex-direction:column;gap:.6rem}
.carrito__linea{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;gap:.9rem;align-items:center;
  background:#fff;border:1px solid var(--gris-2);border-radius:14px;padding:.6rem .7rem;
}
.carrito__linea img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:10px}
.carrito__texto{min-width:0}
.carrito__texto a{display:block;font-weight:600;font-size:.95rem;line-height:1.25;color:var(--verde-tinta)}
.carrito__texto a:hover{color:var(--verde)}
.carrito__texto span{display:block;font-size:.8rem;color:var(--gris-texto);margin-top:.15rem}
.carrito__uds{display:flex;align-items:center;gap:.1rem;background:var(--gris);border-radius:999px;padding:.2rem}
.carrito__uds button{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:1.05rem;line-height:1;color:var(--verde-tinta);transition:background .2s;
}
.carrito__uds button:hover:not(:disabled){background:#fff}
.carrito__uds button:disabled{opacity:.35;cursor:default}
.carrito__uds span{min-width:22px;text-align:center;font-weight:600;font-size:.9rem}
.carrito__quitar{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--gris-texto);
  transition:background .2s,color .2s;
}
.carrito__quitar:hover{background:#fdecec;color:#8a1f1f}
.carrito__quitar .ico{width:16px;height:16px;transform:rotate(45deg)}
.carrito__mas{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem;
  font-size:.88rem;font-weight:600;color:var(--verde);
}
.carrito__mas:hover{text-decoration:underline}
.carrito__vacio{
  background:var(--gris);border-radius:14px;padding:1.6rem 1.4rem;text-align:center;
}
.carrito__vacio strong{display:block;font-family:var(--f-titulo);font-size:1rem;margin-bottom:.35rem}
.carrito__vacio p{font-size:.9rem;color:var(--gris-texto);margin:0 0 1rem}
/* Aviso de «añadida» en la ficha de la máquina */
.anadido{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  font-size:.88rem;color:var(--verde-tinta);margin:.7rem 0 0;
}
.anadido .ico{width:16px;height:16px;color:var(--verde)}
.anadido a{font-weight:600;color:var(--verde);display:inline-flex;align-items:center;gap:.25rem}
.anadido a:hover{text-decoration:underline}
.anadido a .ico{width:14px;height:14px}
@media (max-width:520px){
  .carrito__linea{grid-template-columns:44px minmax(0,1fr) auto;row-gap:.5rem}
  .carrito__linea img{width:44px;height:44px}
  .carrito__uds{grid-column:2;justify-self:start}
  .carrito__quitar{grid-column:3;grid-row:1}
}

/* max-height + overflow: al meter dentro el botón de pagar (17/09/2026) el
   recuadro pasó de 500 a 785 px y en un portátil de 800 px de alto el botón
   quedaba siempre fuera de la pantalla, porque un sticky más alto que la
   ventana solo enseña su parte de arriba. Mismo remedio que en `.lateral`. */
.resumen{background:var(--negro);color:#fff;border-radius:var(--radio);padding:2rem;position:sticky;top:96px;max-height:calc(100vh - 112px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
/* En móvil el recuadro NO es sticky (`.panel,.resumen{position:static}` más
   abajo), así que ahí no debe recortarse nunca: se ve entero y en su sitio. */
@media (max-width:1000px){.resumen{max-height:none;overflow:visible}}
.resumen h3{margin-bottom:1rem}
.resumen__linea{display:flex;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem;gap:1rem}
.resumen__linea span:first-child{color:#b9c4bc}
.resumen__total{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.1rem;font-family:var(--f-titulo)}
.resumen__total strong{font-size:2rem}
.resumen__nota{font-size:.8rem;color:#9fb3a5;margin:.8rem 0 1.4rem}
.resumen .btn{width:100%}
.resumen .btn+.btn{margin-top:.6rem}
.aviso-error{display:none;background:#fdecec;color:#8a1f1f;padding:.8rem 1.1rem;border-radius:12px;margin-top:.9rem;font-size:.9rem;font-weight:500}
.aviso-error.visible{display:block}
.campo input.falta,.campo select.falta{border-color:#c0392b}
.aviso-ok{display:none;background:var(--verde-claro);color:var(--verde-tinta);padding:1rem 1.2rem;border-radius:12px;margin-top:1rem;font-weight:500}
.aviso-ok.visible{display:block}
.aviso-ok a{color:inherit;font-weight:700;text-decoration:underline}

/* ---------- Contacto ---------- */
.contacto-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2rem}
.dato{padding:1.4rem;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra);display:flex;gap:1rem;align-items:flex-start}
.dato .ico{color:var(--verde);margin-top:.15rem}
.dato strong{display:block;font-family:var(--f-titulo);font-size:.95rem;margin-bottom:.2rem}
.dato span,.dato a{color:var(--gris-texto);font-size:.92rem}
.dato a:hover{color:var(--verde)}
/* Dónde estamos: la dirección y un enlace a Google Maps, sin mapa incrustado (no se carga nada de terceros) */
.lugar{padding:1.4rem;border-radius:var(--radio);background:#fff;box-shadow:var(--sombra);display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.lugar>.ico{color:var(--verde);flex:none}
.lugar__texto{flex:1 1 200px}
.lugar__texto strong{display:block;font-family:var(--f-titulo);font-size:.95rem;margin-bottom:.2rem}
.lugar__texto span{color:var(--gris-texto);font-size:.92rem}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden}
.cta-final__caja{position:relative;background:var(--verde);color:#fff;border-radius:28px;padding:clamp(2.5rem,6vw,4.5rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;overflow:hidden}
.cta-final__caja::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.08)}
.cta-final__caja p{color:#e5f1e0;font-size:1.1rem;max-width:48ch}
.cta-final__acciones{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end;position:relative;z-index:1}

/* ---------- Puente a la otra web ---------- */
.puente{background:var(--gris)}
.puente__caja{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.puente__caja img{border-radius:var(--radio);box-shadow:var(--sombra-2)}
.puente__logo{height:48px;width:auto;margin-bottom:1.2rem}

/* ---------- Pie ---------- */
.pie{background:var(--negro);color:#c7d0c9;padding:4rem 0 2rem;font-size:.92rem}
.pie__cuadricula{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
.pie__logo{background:#fff;display:inline-block;padding:.6rem .9rem;border-radius:12px;margin-bottom:1rem}
.pie__logo img{height:38px;width:auto}
.pie h4{color:#fff;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.pie a:hover{color:#fff}
.pie__abajo{border-top:1px solid rgba(255,255,255,.1);margin-top:3rem;padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.82rem;color:#8b978f}

/* ---------- WhatsApp flotante ---------- */
.wa-flotante{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:900;width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(37,211,102,.4);
  transition:transform .2s,box-shadow .2s;
}
.wa-flotante:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(37,211,102,.5)}
.wa-flotante .ico{width:28px;height:28px;stroke-width:0;fill:currentColor}

/* ---------- Ayudante «¿Qué máquina necesito?» ----------
   Va justo encima del botón de WhatsApp, en todas las páginas. */
.ayudante-btn{
  position:fixed;right:1.2rem;bottom:5.2rem;z-index:900;
  display:inline-flex;align-items:center;gap:.5rem;height:48px;padding:0 1.1rem 0 .95rem;
  border-radius:999px;background:var(--negro);color:#fff;
  box-shadow:0 10px 24px rgba(15,21,18,.3);
  font-size:.88rem;font-weight:600;
  transition:transform .2s,box-shadow .2s,background .2s;
}
.ayudante-btn .ico{width:20px;height:20px;color:#9ed18c;flex:none}
.ayudante-btn:hover{transform:translateY(-3px);background:var(--verde);box-shadow:0 14px 30px rgba(28,117,56,.4)}
.ayudante-btn span{white-space:nowrap}

.ayudante{
  position:fixed;right:1.2rem;bottom:9.4rem;z-index:1001;
  width:min(380px,calc(100% - 2.4rem));
  /* Le dejamos 6,5rem libres arriba para la cabecera fija: si no, la barra del
     título se metía debajo y no había forma de leerla (David, 16/09/2026). */
  max-height:min(560px,calc(100vh - 9.4rem - 6.5rem));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:20px;
  box-shadow:0 24px 60px rgba(15,21,18,.28),0 0 0 1px rgba(15,21,18,.06);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;
  transition:opacity .25s ease,transform .3s var(--ease);
}
.ayudante--visible{opacity:1;transform:none;pointer-events:auto}
.ayudante__barra{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.9rem 1rem;border-bottom:1px solid var(--gris-2);flex:none;
}
.ayudante__barra strong{font-family:var(--f-titulo);font-size:.98rem;line-height:1.2;color:var(--verde-tinta)}
.ayudante__cerrar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--gris-texto);transition:background .2s,color .2s;
}
.ayudante__cerrar:hover{background:var(--gris);color:var(--texto)}
.ayudante__cerrar .ico{width:17px;height:17px}
.ayudante__cuerpo{padding:1rem;overflow-y:auto;flex:1;min-height:0}
.ayudante__texto{font-size:.86rem;color:var(--gris-texto);margin:0 0 .8rem}
.ayudante__texto--sub{margin-top:1rem}
.ayudante__chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip-ayuda{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--gris);border-radius:999px;padding:.4rem .75rem;
  font-size:.82rem;font-weight:500;color:var(--texto);line-height:1.2;
  transition:background .2s,color .2s;
}
.chip-ayuda .ico{width:15px;height:15px;color:var(--verde);flex:none;transition:color .2s}
.chip-ayuda:hover{background:var(--verde-claro);color:var(--verde-tinta)}
.chip-ayuda.activo{background:var(--verde);color:#fff}
.chip-ayuda.activo .ico{color:#fff}
.chip-ayuda--cat{font-size:.78rem;background:#fff;box-shadow:inset 0 0 0 1px var(--gris-2)}
.chip-ayuda--cat:hover{box-shadow:inset 0 0 0 1px var(--verde)}
.chip-ayuda--cat.activo{box-shadow:none}
.ayudante__resultado{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--gris-2);
  animation:sugEntra .3s var(--ease);
}
.ayudante__titulo{
  font-family:var(--f-titulo);font-size:.95rem;font-weight:600;
  color:var(--verde-tinta);margin:0 0 .5rem;
}
.ayudante__lista{display:flex;flex-direction:column;gap:.5rem}
.ayudante__lista .sug{background:var(--gris)}
.ayudante__wa{
  display:flex;align-items:center;justify-content:center;gap:.45rem;flex:none;
  padding:.85rem 1rem;border-top:1px solid var(--gris-2);
  font-size:.86rem;font-weight:600;color:var(--verde);
  transition:background .2s;
}
.ayudante__wa:hover{background:var(--verde-claro)}
.ayudante__wa .ico{width:17px;height:17px}
/* Con el ayudante abierto, el aviso de ayuda no molesta */
.ayudante-abierto .aviso{opacity:0;pointer-events:none}
@media (max-width:520px){
  .ayudante-btn{padding:0 .95rem;bottom:5rem}
  .ayudante-btn span{display:none}
  .ayudante-btn{width:48px;justify-content:center}
  .ayudante{bottom:9rem;max-height:calc(100vh - 9rem - 6rem)}
}

/* ---------- Aviso emergente (una vez por visita) ---------- */
.aviso{
  position:fixed;right:1.2rem;bottom:5.6rem;z-index:890;width:min(360px,calc(100% - 2.4rem));
  background:#fff;color:var(--texto);border-radius:20px;padding:1.4rem 1.4rem 1.3rem;
  box-shadow:0 24px 60px rgba(15,21,18,.22),0 0 0 1px rgba(15,21,18,.06);
  opacity:0;transform:translateY(18px) scale(.97);pointer-events:none;
  transition:opacity .4s ease,transform .5s var(--ease);
}
.aviso--visible{opacity:1;transform:none;pointer-events:auto}
.aviso__cerrar{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--gris-texto);transition:background .2s,color .2s}
.aviso__cerrar:hover{background:var(--gris);color:var(--texto)}
.aviso__ico{width:44px;height:44px;border-radius:14px;background:var(--verde-claro);color:var(--verde);display:grid;place-items:center;margin-bottom:.9rem}
.aviso__ico .ico{width:22px;height:22px}
.aviso h3{font-size:1.1rem;margin-bottom:.35rem;padding-right:1.5rem}
.aviso p{font-size:.92rem;color:var(--gris-texto);margin:0 0 1rem}
.aviso .btn{width:100%}
.aviso__nota{display:block;text-align:center;font-size:.78rem;color:var(--gris-texto);margin-top:.6rem}

/* ---------- Cabecera de página interior ---------- */
.portada{padding:9rem 0 3.5rem;background:var(--gris)}
.portada h1{max-width:16ch}
.portada p{font-size:1.15rem;color:var(--gris-texto);max-width:56ch;margin-top:1rem}
.portada--oscura{background:var(--negro);color:#fff}
.portada--oscura p{color:#b9c4bc}

/* ---------- Animación al hacer scroll ---------- */
[data-rv]{opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .4s var(--ease)}
[data-rv].es-visible{opacity:1;transform:none}
[data-rv="1"]{transition-delay:.04s}[data-rv="2"]{transition-delay:.08s}[data-rv="3"]{transition-delay:.12s}[data-rv="4"]{transition-delay:.16s}[data-rv="5"]{transition-delay:.2s}[data-rv="6"]{transition-delay:.24s}[data-rv="7"]{transition-delay:.28s}[data-rv="8"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .brillo{animation:none}
  [data-rv]{opacity:1;transform:none;transition:none}
  .intro{display:none}
  .marquesina__pista{animation:none}
  *{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* minmax(0,…) y no 1fr a secas: con 1fr la columna nunca baja del ancho
     mínimo de su contenido, y bastaba un botón largo para desbordar. */
  .ficha,.reserva,.dos-col,.puente__caja{grid-template-columns:minmax(0,1fr)}
  .panel,.resumen{position:static}
  .pie__cuadricula{grid-template-columns:1fr 1fr}
  .cta-final__caja{grid-template-columns:1fr}
  .cta-final__acciones{justify-content:flex-start}
  .reel{max-width:320px}
}
@media (max-width:820px){
  .cab__nav,.cab__acciones .cab__otra{display:none}
  /* En el móvil el carrito se queda en la cabecera, solo con el icono y el número */
  .cab__acciones #ir-reserva{padding:.55rem .75rem;gap:.3rem}
  .ir-reserva__texto{display:none}
  .menu-abierto #ir-reserva{visibility:hidden}
  .cab__burger{display:flex}
  /* El carrito SE QUEDA en el móvil (17/09/2026). Antes se escondía con el resto
     de botones y no estaba tampoco en el menú de la hamburguesa: quien añadía
     máquinas desde el móvil no veía el carrito ni el número por ningún sitio, y
     la foto que vuela al añadir volaba hacia un botón invisible. Aquí se queda
     redondo y solo con el dibujo, con el número en una burbuja. */
  .cab__reservar-txt{display:none}
  .cab__reservar{position:relative;width:44px;height:44px;padding:0;border-radius:999px;flex:0 0 auto}
  .cab__reservar .cuenta{
    position:absolute;top:-3px;right:-3px;margin:0;
    background:#fff;color:var(--verde-tinta);box-shadow:0 0 0 2px var(--verde);
  }
  .cab__reservar .ico{width:1.25em;height:1.25em}
  .cab--transparente:not(.cab--mini) .cab__burger{color:#fff}
  .menu-abierto .cab{background:transparent;box-shadow:none}
  .menu-abierto .cab__burger{color:#fff}
  .menu-abierto .cab__logo{background:#fff;padding:.35rem .6rem;border-radius:10px}
  .hero__cifras{grid-template-columns:1fr;gap:.7rem}
  .cifra{padding:1.1rem 1.2rem 1.3rem;display:grid;grid-template-columns:40px 1fr;column-gap:1rem;align-items:center}
  .cifra__ico{margin:0;grid-row:1/3}
  .cifra strong{font-size:1.9rem}
  .cifra > span{margin-top:.15rem}
  .hero__scroll{display:none}
  .pasos{grid-template-columns:1fr;gap:2.5rem}
  .pasos::before,.pasos__linea{display:none}
  .paso{text-align:left;display:grid;grid-template-columns:64px 1fr;gap:1.2rem;align-items:start}
  .paso__num{margin:0}
  .campos{grid-template-columns:1fr}
  .campo--ancho{grid-column:auto}
  /* Móviles estrechos (320-380 px): los botones que ocupan toda la línea pueden
     partir el texto. Con el white-space:nowrap de .btn, uno como «Preguntar por
     WhatsApp» pedía 257 px y, con el relleno del panel, empujaba la columna
     hasta 315 px: la ficha y la reserva se salían de la pantalla y salía la
     rayita de mover a los lados. */
  .btn--bloque{white-space:normal;text-align:center}
  .tarifas-mini{gap:.4rem}
  .galeria__mini{grid-template-columns:repeat(5,1fr)}
  .hero__contenido{padding:8rem 0 4rem}
  .banda__velo{background:linear-gradient(180deg,rgba(15,21,18,.9),rgba(15,21,18,.6))}
}
@media (max-width:520px){
  .pie__cuadricula{grid-template-columns:1fr}
  .hero__botones .btn{width:100%}
  .filtros__contador{display:none}
  /* En móviles estrechos cualquier botón puede partir el texto. El
     white-space:nowrap de .btn hacía que uno largo («Ver condiciones y preguntas
     frecuentes» pedía 343 px) se saliera de una pantalla de 320 px y apareciera
     la rayita de mover a los lados. */
  .btn{white-space:normal;text-align:center;max-width:100%}
}

/* ==========================================================
   TIENDA (portada): categorías a la izquierda y las máquinas
   de cada categoría con precios Diario · Fianza
   ========================================================== */
.tienda{padding:6.5rem 0 3.5rem}
.miga--tienda{margin-bottom:1rem}
.tienda__banda{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  background:var(--verde);color:#fff;border-radius:14px;padding:1rem 1.4rem;margin-bottom:1.6rem;
}
.tienda__banda h1{font-size:clamp(1.4rem,2.6vw,1.9rem);max-width:none}
.tienda__banda .brillo{background-image:linear-gradient(100deg,#fff 0%,#c9f2b8 25%,#fff 50%,#9ed18c 75%,#fff 100%)}
.buscador{
  display:flex;align-items:center;gap:.6rem;background:#fff;color:var(--texto);border-radius:999px;
  padding:.35rem .6rem .35rem 1.1rem;min-width:min(320px,100%);flex:0 1 320px;
}
.buscador input{border:0;background:none;font:inherit;font-size:.95rem;color:inherit;flex:1;min-width:0;outline:none}
.buscador input::-webkit-search-cancel-button{-webkit-appearance:none}
.buscador .ico{color:var(--verde);width:1.3rem;height:1.3rem}
.tienda__cuadricula{display:grid;grid-template-columns:280px minmax(0,1fr);gap:2rem;align-items:start}

/* Barra lateral de categorías */
.lateral{position:sticky;top:96px}
/* Con 10 categorías la barra es más alta que la pantalla: se desplaza por dentro para llegar a todas */
@media (min-width:901px){.lateral{max-height:calc(100vh - 112px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gris-2) transparent}}
.lateral__lista{background:#fff;overflow:hidden;border-top:1px solid var(--gris-2)}
.lateral__cat{
  display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:.8rem;
  padding:.85rem 1rem;border-bottom:1px solid var(--gris-2);transition:background .2s,color .2s;
}
.lateral__cat:last-child{border-bottom:0}
.lateral__cat:hover{background:var(--gris)}
.lateral__cat.activo{background:var(--verde-claro);color:var(--verde-tinta)}
.lateral__ico{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--verde);display:grid;place-items:center;transition:background .2s,color .2s}
.lateral__ico .ico{width:20px;height:20px}
.lateral__cat.activo .lateral__ico{background:var(--verde);color:#fff}
.lateral__nombre{font-weight:600;font-size:.95rem;line-height:1.2}
.lateral__nombre small{display:block;font-weight:400;font-size:.76rem;color:var(--gris-texto);margin-top:.15rem}
.lateral__n{font-size:.78rem;font-weight:600;color:var(--gris-texto);background:var(--gris);padding:.2rem .55rem;border-radius:999px}
.lateral__cat.activo .lateral__n{background:#fff}
.lateral__ayuda{margin-top:1rem;background:var(--negro);color:#fff;border-radius:var(--radio);padding:1.3rem}
.lateral__ayuda strong{display:block;font-family:var(--f-titulo);font-size:1rem;margin-bottom:.3rem}
.lateral__ayuda p{font-size:.88rem;color:#b9c4bc;margin:0 0 .9rem}

/* Bloque de cada categoría */
.bloque-cat{margin-bottom:2.2rem;scroll-margin-top:96px}
.bloque-cat__banda{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:2px solid var(--verde);padding-bottom:.6rem;margin-bottom:1.2rem;
}
.bloque-cat__banda h2{font-size:1.25rem;display:flex;align-items:center;gap:.6rem}
.bloque-cat__banda h2 .ico{color:var(--verde);width:1.3em;height:1.3em}
.bloque-cat__banda span{font-size:.85rem;color:var(--gris-texto)}
.bloque-cat__todo{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:600;font-size:.9rem;color:var(--verde);
  text-transform:uppercase;letter-spacing:.06em;transition:gap .2s;
}
.bloque-cat__todo:hover{gap:.7rem}

/* Cada máquina */
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
/* Tarjetas planas, como en las tiendas de alquiler: sin borde, sin sombra, foto sobre blanco */
.prod{padding:.5rem .6rem 1rem;text-align:center;display:flex;flex-direction:column;background:#fff}
.prod__foto{display:block;aspect-ratio:1;overflow:hidden;background:#fff;position:relative;margin-bottom:.9rem}
.prod__foto img{width:100%;height:100%;object-fit:contain;transition:transform .35s var(--ease)}
.prod:hover .prod__foto img{transform:scale(1.04)}
.prod__etiqueta{position:absolute;top:.4rem;left:.4rem;background:var(--gris);color:var(--gris-texto);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .55rem;border-radius:999px}
/* overflow-wrap: en móviles estrechos, con dos tarjetas por fila, una palabra
   larga en mayúsculas («MULTIHERRAMIENTA» pedía 155 px para una columna de 133)
   se salía de la tarjeta y de la pantalla. */
.prod h3{font-size:.98rem;font-weight:600;line-height:1.25;text-transform:uppercase;letter-spacing:.01em;color:var(--verde-tinta);overflow-wrap:break-word;hyphens:auto}
.prod h3 a:hover{color:var(--verde)}
.prod__marca{display:block;font-size:.78rem;color:var(--gris-texto);margin-top:.25rem}
.prod__corto{font-size:.84rem;color:var(--gris-texto);margin:.45rem 0 0;flex:1}
.panel__marca{font-size:.9rem;color:var(--gris-texto);margin:-.3rem 0 .5rem}
.prod__stock{font-size:.8rem;color:var(--gris-texto);margin-top:.6rem}
.prod__stock strong,.panel__stock strong{color:var(--texto)}
.panel__stock{font-size:.9rem;color:var(--gris-texto);margin:-.6rem 0 1rem}
.prod__precios{display:flex;justify-content:center;margin-top:.9rem;border-top:1px solid var(--gris-2);padding-top:.8rem}
.prod__precios div{flex:1;padding:0 .3rem;border-left:1px solid var(--gris-2)}
.prod__precios div:first-child{border-left:0}
.prod__precios span{display:block;font-size:.74rem;color:var(--gris-texto)}
.prod__precios strong{display:block;font-family:var(--f-titulo);font-size:.95rem;font-weight:700;margin-top:.1rem;white-space:nowrap}
.prod__fianza{font-size:.8rem;color:var(--gris-texto);margin-top:.7rem}
.prod__fianza strong{color:var(--texto)}
.borrador-aviso{display:flex;gap:.5rem;align-items:center;background:var(--gris);color:var(--gris-texto);font-size:.85rem;padding:.7rem .9rem;border-radius:10px;margin:.8rem 0 0}
.borrador-aviso .ico{color:var(--verde)}
/* Máquinas que solo se alquilan a empresas y autónomos (Eduardo, 22/09/2026):
   etiqueta en la esquina de la foto y aviso en su ficha */
.prod__etiqueta--pro{left:auto;right:.4rem;background:var(--verde);color:#fff}
/* Cuántas máquinas salen al buscar (David, 23/09/2026) */
.tienda__resultados{font-size:.9rem;color:var(--gris-texto);margin:0 0 1rem}
/* El campo de empresa se esconde cuando alquila un particular */
.campo[hidden]{display:none}
/* Botón apagado: cuando un particular lleva una máquina que es solo para profesionales */
.btn--apagado{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
/* El mismo aviso debajo de la foto, en rojo, que es donde David quiere que se vea (23/09/2026) */
.aviso-pro{display:flex;gap:.6rem;align-items:center;background:#fdeceb;color:#a32019;font-size:.92rem;line-height:1.4;font-weight:500;padding:.8rem 1rem;border-radius:12px;margin:1rem 0 0}
.aviso-pro .ico{flex:none;width:1.3rem;height:1.3rem;color:#c62f26}
.solo-empresas{display:flex;gap:.7rem;align-items:center;background:var(--verde-claro);color:var(--verde-tinta);font-size:.9rem;line-height:1.4;padding:.8rem 1rem;border-radius:12px;margin:.9rem 0 0}
.solo-empresas .ico{flex:none;width:1.3rem;height:1.3rem;color:var(--verde)}

/* Sin resultados en el buscador: siempre con salida */
.tienda__vacio{background:var(--gris);border-radius:var(--radio);padding:2rem;text-align:center}
.tienda__vacio strong{display:block;font-family:var(--f-titulo);font-size:1.1rem;margin-bottom:.4rem}
.tienda__vacio p{color:var(--gris-texto);margin-bottom:1.2rem}
.tienda__vacio-acciones{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

@media (max-width:1100px){
  .prods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tienda__cuadricula{grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:900px){
  .tienda__cuadricula{grid-template-columns:minmax(0,1fr);gap:1.2rem}
  .lateral{min-width:0}
  /* La tira de carpetas se queda pegada bajo la cabecera al bajar (David, 17/09/2026):
     antes era `position:static` y se iba con la página, así que a mitad de lista no
     había forma de cambiar de carpeta sin volver arriba. `--cab-alto` lo escribe
     main.js midiendo la cabecera (que encoge al bajar); mientras no exista, 60 px.
     La clase .pegada la pone main.js solo cuando de verdad está pegada: ahí se
     afina y se le pone sombra para separarla de lo que pasa por debajo. */
  .lateral{position:sticky;top:var(--cab-alto,60px);z-index:50;background:#fff;padding:.45rem 0 .55rem;transition:padding .2s ease}
  .lateral::after{content:"";position:absolute;left:-1.25rem;right:-1.25rem;top:0;bottom:0;background:#fff;z-index:-1;box-shadow:0 10px 24px -14px rgba(15,21,18,0);transition:box-shadow .25s ease}
  .lateral.pegada{padding:.3rem 0 .4rem}
  .lateral.pegada::after{box-shadow:0 10px 24px -14px rgba(15,21,18,.28)}
  .lateral.pegada .lateral__cat{padding:.35rem .75rem .35rem .35rem}
  .lateral.pegada .lateral__ico{width:26px;height:26px}
  .lateral.pegada .lateral__ico .ico{width:14px;height:14px}
  .lateral__lista{display:flex;overflow-x:auto;scrollbar-width:none;border-radius:999px;padding:.35rem;gap:.3rem;border-top:0;background:var(--gris);scroll-behavior:smooth}
  .lateral__lista::-webkit-scrollbar{display:none}
  .lateral__cat{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:999px;padding:.5rem .9rem .5rem .5rem;white-space:nowrap;flex:none}
  .lateral__ico{width:30px;height:30px;border-radius:50%}
  .lateral__ico .ico{width:16px;height:16px}
  .lateral__nombre{font-size:.88rem}
  .lateral__nombre small,.lateral__n{display:none}
  .lateral__ayuda{display:none}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .tienda{padding-top:5.5rem}
}
@media (max-width:520px){
  /* En móvil las dos tarjetas por fila son estrechas: los precios van uno debajo de otro */
  .prod{padding:.8rem}
  .prod h3{font-size:.88rem}
  .prod__precios{flex-direction:column;gap:.3rem;text-align:left}
  .prod__precios div{display:flex;justify-content:space-between;align-items:baseline;border-left:0;padding:0}
  .prod__precios span{font-size:.78rem}
  .prod__precios strong{font-size:.92rem;margin:0}
}

/* ---------- Pantallas muy anchas (monitores ultrapanorámicos) ----------
   Erik y los clientes de David tienen monitores enormes. Hasta 1500 px la web
   se queda exactamente como estaba; a partir de ahí el contenido va ensanchando
   por tramos y entran más máquinas por fila, en vez de dejar una columna
   estrecha en el centro con dos desiertos blancos a los lados.
   Los textos NO se ensanchan: siguen con su tope en `ch` para que la línea no
   se haga imposible de leer, que es el error típico en estas pantallas. */
@media (min-width:1500px){
  :root{--ancho:1400px}
  .prods{grid-template-columns:repeat(5,minmax(0,1fr))}
  .tienda__cuadricula{grid-template-columns:300px minmax(0,1fr)}
}
@media (min-width:1900px){
  :root{--ancho:1720px}
  .prods{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tienda__cuadricula{grid-template-columns:320px minmax(0,1fr);gap:2.5rem}
  /* Ficha y reserva: la columna de la derecha no necesita crecer más */
  .ficha{grid-template-columns:minmax(0,1fr) 460px}
  .reserva{grid-template-columns:minmax(0,1fr) 420px}
  /* La foto de la máquina NO se estira hasta llenar la pantalla: son fotos de
     800 px y ampliadas se ven borrosas. Se queda centrada a tamaño sano. */
  .galeria{max-width:820px}
  .dos-col,.puente__caja{gap:5rem}
}
/* De 6 columnas no pasamos a propósito: casi todas las carpetas tienen entre 3 y 5
   máquinas, y con más columnas las filas se quedaban medio vacías. A partir de aquí
   solo se gana aire y tarjetas algo más grandes, no más huecos. */
@media (min-width:2400px){
  :root{--ancho:1900px}
}

/* ===================================================   COOKIES, MAPA TAPADO Y PÁGINAS LEGALES (17/09/2026)
   ========================================================== */

/* El cartelito de cookies. Va abajo del todo, ancho completo y por encima del
   botón de WhatsApp y del ayudante (z-index 950). No tapa la pantalla entera a
   propósito: es un aviso, no un muro. Desde que el mapa dejó de ser de Google
   (17/09/2026) no hay nada de terceros que aceptar o rechazar: un solo botón,
   «Entendido», y el cartel solo informa. */
.cookies{
  position:fixed;left:0;right:0;bottom:0;z-index:950;padding:1rem;
  transform:translateY(120%);transition:transform .45s var(--ease);
}
.cookies--dentro{transform:none}
.cookies--fuera{transform:translateY(120%)}
.cookies[hidden]{display:none}
.cookies__caja{
  max-width:1100px;margin:0 auto;background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(15,21,18,.26),0 0 0 1px rgba(15,21,18,.07);
  padding:1.2rem 1.4rem;display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
}
.cookies__texto{flex:1 1 360px;min-width:0}
/* Solo el titular va en su línea. Con `.cookies__texto strong` a secas también
   cogía los negrita de dentro del párrafo y el texto se partía a trozos. */
.cookies__texto > strong{display:block;margin-bottom:.2rem}
.cookies__texto p{font-size:.88rem;color:var(--gris-texto);margin:0;max-width:78ch}
.cookies__texto a{color:var(--verde);text-decoration:underline}
.cookies__botones{display:flex;gap:.7rem;flex:0 0 auto}
.cookies__botones .btn{min-width:130px}
@media (max-width:620px){
  .cookies__caja{padding:1.1rem;gap:1rem}
  .cookies__botones{width:100%}
  .cookies__botones .btn{flex:1 1 0;min-width:0}
}

/* El hueco del mapa mientras no hay permiso: nunca en blanco, siempre con su
   explicación y su botón (ver [[feedback-nunca-pantallas-sin-salida]]). */
.mapa--tapado{display:grid;place-items:center;background:var(--gris);text-align:center}
.mapa__cartel{padding:2rem 1.5rem;max-width:46ch}
.mapa__cartel h3{margin-bottom:.5rem}
.mapa__cartel p{font-size:.9rem;color:var(--gris-texto);margin-bottom:1.2rem}

/* Páginas legales: texto largo, cómodo de leer y de repasar. */
.legal h2{font-size:1.15rem;margin:2rem 0 .7rem;color:var(--verde-tinta)}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1rem;margin:1.4rem 0 .5rem}
.legal p,.legal li{font-size:.94rem;line-height:1.7;max-width:74ch}
.legal p{margin-bottom:.8rem}
.legal ul{margin:0 0 1rem 1.1rem;list-style:disc}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--verde);text-decoration:underline}
.legal__datos{list-style:none;margin-left:0}
.legal__datos li{padding:.35rem 0;border-bottom:1px solid var(--gris-2)}
.legal__datos li:last-child{border-bottom:0}
.legal__tabla{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.9rem}
.legal__tabla th,.legal__tabla td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--gris-2);vertical-align:top}
.legal__tabla th{background:var(--gris);font-weight:600;color:var(--verde-tinta)}
.legal__fecha{margin-top:2rem;font-size:.85rem;color:var(--gris-texto)}
@media (max-width:620px){
  .legal__tabla{font-size:.84rem}
  .legal__tabla th,.legal__tabla td{padding:.5rem .45rem}
}

/* Enlaces legales del pie */
.pie__legal{display:flex;gap:1.1rem;flex-wrap:wrap}
.pie__legal a{color:#8b978f;transition:color .2s}
.pie__legal a:hover{color:#fff}

/* El botón de pagar, dentro del recuadro negro (17/09/2026) --------------------
   Antes estaba al final del formulario. En el móvil el recuadro del precio va
   DESPUÉS del formulario, así que se pulsaba «Reservar y pagar con tarjeta» sin
   haber visto en ningún momento el total ni la fianza. Ahora el botón va pegado
   al «Total a pagar», y debajo quedan las dos salidas de siempre (WhatsApp y
   llamar) para quien prefiera preguntar antes de pagar. */
.resumen__letra{font-size:.78rem;color:#9fb3a5;line-height:1.55;margin:.9rem 0 0}
.resumen__o{
  font-size:.82rem;color:#9fb3a5;text-align:center;margin:1.6rem 0 .9rem;
  display:flex;align-items:center;gap:.8rem;
}
.resumen__o::before,.resumen__o::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
/* El aviso de error también vive ahora sobre fondo negro: el rosa claro de
   siempre cantaría, así que aquí va en rojo oscuro con el texto claro. */
.resumen .aviso-error{background:rgba(192,57,43,.18);color:#ffb4ab;box-shadow:inset 0 0 0 1px rgba(255,120,110,.35)}

/* ==========================================================
   MAPA 3D Y «CÓMO LLEGAR» (17/09/2026)
   ========================================================== */

/* El mapa es más alto que el de antes: en 3D, con el ángulo inclinado, un mapa
   bajo no deja ver los edificios y pierde toda la gracia. */
.mapa3d{aspect-ratio:16/10;min-height:340px;position:relative}
@media (min-width:900px){.mapa3d{aspect-ratio:16/7;height:min(56vh,520px)}}
.mapa3d canvas{outline:none}

/* El pin: la placa blanca con el logo y su puntita, como un alfiler de verdad */
.mapa3d__pin{
  width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(15,21,18,.28),0 0 0 3px var(--verde);
  position:relative;cursor:pointer;
}
.mapa3d__pin::after{
  content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:14px;height:14px;background:var(--verde);border-radius:0 0 3px 0;
}
.mapa3d__pin img{width:30px;height:30px;object-fit:contain;position:relative;z-index:1}
.maplibregl-popup-content{border-radius:14px;padding:.8rem 1rem;font-family:var(--f-texto);font-size:.88rem;box-shadow:0 14px 34px rgba(15,21,18,.2)}
.maplibregl-popup-content strong{color:var(--verde-tinta)}
.maplibregl-ctrl-group{border-radius:12px!important;overflow:hidden}

/* Cómo llegar: antes era un botón de contorno suelto y pasaba desapercibido.
   Ahora es una tarjeta verde clara con su frase y dos botones, uno por tienda de
   mapas, porque el de Google en un iPhone deja al cliente a medio camino. */
.comollegar{
  margin-top:1.6rem;background:var(--verde-claro);border-radius:var(--radio);
  padding:1.6rem 1.8rem;display:flex;align-items:center;justify-content:space-between;
  gap:1.6rem;flex-wrap:wrap;
}
.comollegar__texto{flex:1 1 320px;min-width:0}
.comollegar__texto h3{color:var(--verde-tinta);margin-bottom:.25rem}
.comollegar__texto p{font-size:.92rem;color:var(--verde-tinta);opacity:.78;margin:0;max-width:52ch}
.comollegar__botones{display:flex;gap:.7rem;flex-wrap:wrap;flex:0 0 auto}
.btn--grande{padding:1rem 1.9rem;font-size:1rem}
@media (max-width:620px){
  .comollegar{padding:1.3rem;flex-direction:column;align-items:stretch;text-align:center}
  .comollegar__texto p{margin-inline:auto}
  .comollegar__botones{flex-direction:column}
  .comollegar__botones .btn{width:100%}
}

/* ==========================================================
   LOS TRES PASOS, EN SECUENCIA (17/09/2026)
   Cómo funciona: 1 se dibuja → la línea avanza → 2 se dibuja → avanza → 3.
   Todo cuelga de .es-visible (lo pone revelar() al llegar con el scroll).
   Reloj de la secuencia, en segundos:
     0.0  número 1 se enciende y su dibujo se traza (1,0 s)
     0.9  texto 1
     1.1  la línea avanza del 1 al 2 y el punto viaja con ella (0,8 s)
     1.9  número 2 + dibujo 2
     2.8  texto 2
     3.0  la línea avanza del 2 al 3
     3.8  número 3 + dibujo 3
     4.7  texto 3 y el detalle final (el tic, la moneda) da un pequeño bote
   ========================================================== */
.pasos--secuencia{--t1:0s;--l1:1.1s;--t2:1.9s;--l2:3s;--t3:3.8s}

/* La línea de fondo y la verde que avanza: en dos tramos, no de un tirón */
.pasos--secuencia .pasos__linea{transition:none;width:0}
.pasos--secuencia.es-visible .pasos__linea{animation:pasos-linea 2.7s var(--l1) var(--ease) forwards}
@keyframes pasos-linea{
  0%{width:0} 29.6%{width:40%}           /* 0,8 s avanzando hasta el 2 */
  70.4%{width:40%}                       /* espera mientras se dibuja el 2 */
  100%{width:80%}                        /* 0,8 s hasta el 3 */
}
/* El punto que viaja por la línea */
.pasos__punto{
  position:absolute;top:32px;left:10%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--verde);box-shadow:0 0 0 5px rgba(28,117,56,.18);opacity:0;
}
.pasos--secuencia.es-visible .pasos__punto{animation:pasos-punto 2.7s var(--l1) var(--ease) forwards}
@keyframes pasos-punto{
  0%{left:10%;opacity:0} 4%{opacity:1} 29.6%{left:50%;opacity:1} 34%{opacity:0}
  70.4%{left:50%;opacity:0} 74%{opacity:1} 100%{left:90%;opacity:0}
}

/* Los números: apagados hasta que les toca. Son los hijos 3, 4 y 5 del bloque
   (los dos primeros son la línea y el punto). */
.pasos--secuencia .paso__num{transition:none;transform:scale(.92)}
.pasos--secuencia .paso__num span{position:relative;z-index:1}
.pasos--secuencia.es-visible .paso:nth-child(3) .paso__num{animation:paso-num .5s var(--t1) var(--ease) forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) .paso__num{animation:paso-num .5s var(--t2) var(--ease) forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) .paso__num{animation:paso-num .5s var(--t3) var(--ease) forwards}
@keyframes paso-num{
  0%{border-color:var(--gris-2);background:#fff;color:var(--texto);transform:scale(.92)}
  55%{transform:scale(1.12)}
  100%{border-color:var(--verde);background:var(--verde);color:#fff;transform:scale(1)}
}

/* El dibujo: trazo a trazo. pathLength="1" en el SVG hace que dasharray:1 valga
   para todos los trazos, midan lo que midan. */
.paso__dibujo{
  width:112px;height:112px;margin:0 auto 1rem;display:block;
  fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  border-radius:50%;background:var(--verde-claro);padding:14px;
  opacity:0;transform:translateY(8px);
}
.paso__dibujo *{stroke-dasharray:1;stroke-dashoffset:1}
.pasos--secuencia.es-visible .paso:nth-child(3) .paso__dibujo{--d:var(--t1);animation:paso-dibujo .5s var(--t1) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) .paso__dibujo{--d:var(--t2);animation:paso-dibujo .5s var(--t2) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) .paso__dibujo{--d:var(--t3);animation:paso-dibujo .5s var(--t3) ease forwards}
@keyframes paso-dibujo{to{opacity:1;transform:none}}
/* Cada trazo entra un poco después del anterior, y el último (el tic, la moneda)
   da un bote al terminar: es el «ya está» de cada paso. */
.pasos--secuencia.es-visible .paso__dibujo *{animation:paso-trazo .55s var(--d) ease-out forwards}
.pasos--secuencia.es-visible .paso__dibujo *:nth-child(2){animation-delay:calc(var(--d) + .15s)}
.pasos--secuencia.es-visible .paso__dibujo *:nth-child(3){animation-delay:calc(var(--d) + .3s)}
.pasos--secuencia.es-visible .paso__dibujo *:nth-child(4){animation-delay:calc(var(--d) + .45s)}
@keyframes paso-trazo{to{stroke-dashoffset:0}}
.pasos--secuencia .paso__tic{stroke-width:3.2;transform-origin:center;transform-box:fill-box}
.pasos--secuencia.es-visible .paso__dibujo .paso__tic{
  animation:paso-trazo .45s calc(var(--d) + .6s) ease-out forwards,paso-bote .4s calc(var(--d) + 1.05s) var(--ease);
}
@keyframes paso-bote{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* El título y el texto de cada paso llegan cuando su dibujo ha terminado */
.pasos--secuencia .paso h3,.pasos--secuencia .paso p{opacity:0;transform:translateY(10px)}
.pasos--secuencia.es-visible .paso:nth-child(3) h3{animation:paso-texto .5s calc(var(--t1) + .9s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(3) p{animation:paso-texto .5s calc(var(--t1) + 1.05s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) h3{animation:paso-texto .5s calc(var(--t2) + .9s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) p{animation:paso-texto .5s calc(var(--t2) + 1.05s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) h3{animation:paso-texto .5s calc(var(--t3) + .9s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) p{animation:paso-texto .5s calc(var(--t3) + 1.05s) ease forwards}
@keyframes paso-texto{to{opacity:1;transform:none}}

/* En móvil los pasos van en columna: la línea y el punto van en vertical, por el
   carril de los números (64 px de ancho, centro en 31 px), y el dibujo se coloca
   bajo el número, en la misma columna. */
@media (max-width:820px){
  .pasos--secuencia{grid-template-columns:1fr}
  .pasos--secuencia::before{display:block;top:32px;bottom:32px;left:31px;right:auto;width:2px;height:auto}
  .pasos--secuencia .pasos__linea{display:block;top:32px;left:31px;width:2px;height:0}
  .pasos--secuencia.es-visible .pasos__linea{animation-name:pasos-linea-v}
  .pasos--secuencia .pasos__punto{left:31px;margin:-7px 0 0 -6px}
  .pasos--secuencia.es-visible .pasos__punto{animation-name:pasos-punto-v}
  .pasos--secuencia .paso{grid-template-columns:64px 1fr;grid-template-areas:"num titulo" "dibujo texto";column-gap:1.2rem}
  .pasos--secuencia .paso__num{grid-area:num}
  .pasos--secuencia .paso h3{grid-area:titulo;align-self:center;margin:0}
  .pasos--secuencia .paso__dibujo{grid-area:dibujo;width:64px;height:64px;padding:9px;margin:.6rem 0 0;stroke-width:3}
  .pasos--secuencia .paso p{grid-area:texto}
}
@keyframes pasos-linea-v{0%{height:0}29.6%{height:40%}70.4%{height:40%}100%{height:82%}}
@keyframes pasos-punto-v{
  0%{top:32px;opacity:0} 4%{opacity:1} 29.6%{top:calc(32px + 40%);opacity:1} 34%{opacity:0}
  70.4%{top:calc(32px + 40%);opacity:0} 74%{opacity:1} 100%{top:calc(32px + 82%);opacity:0}
}

/* Si el visitante ha pedido menos animación: todo puesto, sin secuencia */
@media (prefers-reduced-motion:reduce){
  .pasos--secuencia .paso__num,.pasos--secuencia .paso__dibujo,.pasos--secuencia .paso h3,.pasos--secuencia .paso p{animation:none!important;opacity:1;transform:none}
  .pasos--secuencia .paso__num{border-color:var(--verde);background:var(--verde);color:#fff}
  .pasos--secuencia .paso__dibujo *{animation:none!important;stroke-dashoffset:0}
  .pasos--secuencia .pasos__linea{animation:none!important;width:80%}
  .pasos--secuencia .pasos__punto{display:none}
}

/* ==========================================================
   LOS PASOS, «AL SIGUIENTE NIVEL» (17/09/2026, tarde)
   David: «me mola lo que pone y cómo se ve, pero súbelo». Misma secuencia y
   mismos tiempos; lo que cambia es la luz y la presencia de los textos:
   · el bloque va sobre una lámina verde muy clara con un halo, para que la
     sección se note al llegar;
   · los números pasan a degradado verde con brillo y sueltan una ONDA al
     encenderse (un anillo que se expande y se apaga);
   · los dibujos van sobre un disco con degradado y un resplandor verde que
     nace justo cuando termina de trazarse; los trazos, un pelín más gruesos;
   · la línea lleva degradado y el punto viajero, una estela;
   · encima de cada título, una etiqueta «PASO 1» en verde; el título, más
     grande y en tinta; el texto, más oscuro (mejor contraste) y con la frase
     que importa en negrita verde (<strong>), que llega la última con un pop.
   Todo sigue colgando de .es-visible y de las mismas variables --t1/--t2/--t3.
   ========================================================== */
.pasos--secuencia{
  padding:3rem 2rem 2.6rem;border-radius:calc(var(--radio) + 8px);
  background:
    radial-gradient(60% 80% at 50% 0%,rgba(90,155,71,.16),transparent 70%),
    linear-gradient(180deg,#f2f8f2,#ffffff 78%);
  box-shadow:inset 0 0 0 1px rgba(28,117,56,.08),0 30px 70px -40px rgba(15,74,36,.35);
}
.pasos--secuencia::before{top:calc(3rem + 32px);left:calc(10% + 1rem);right:calc(10% + 1rem);background:rgba(28,117,56,.14)}
.pasos--secuencia .pasos__linea{
  top:calc(3rem + 32px);left:calc(10% + 1rem);height:3px;margin-top:-.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--verde-2),var(--verde) 55%,#2fa055);
  box-shadow:0 0 14px rgba(47,160,85,.55);
}
.pasos--secuencia .pasos__punto{
  top:calc(3rem + 32px);left:calc(10% + 1rem);width:16px;height:16px;margin:-8px 0 0 -8px;
  background:radial-gradient(circle at 40% 35%,#8fd97f,var(--verde) 70%);
  box-shadow:0 0 0 6px rgba(47,160,85,.16),0 0 22px rgba(47,160,85,.8);
}
/* la estela: una cola difuminada que va detrás del punto */
.pasos--secuencia .pasos__punto::after{
  content:"";position:absolute;top:50%;right:100%;height:3px;width:70px;margin-top:-1.5px;
  background:linear-gradient(90deg,transparent,rgba(47,160,85,.75));border-radius:3px;
}

/* Números: degradado, brillo y la onda al encenderse */
.pasos--secuencia .paso__num{border-width:2px;font-size:1.45rem}
.pasos--secuencia .paso__num::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--verde-2);
  opacity:0;transform:scale(1);pointer-events:none;
}
@keyframes paso-num{
  0%{border-color:var(--gris-2);background:#fff;color:var(--texto);transform:scale(.92);box-shadow:none}
  55%{transform:scale(1.14)}
  100%{
    border-color:transparent;color:#fff;transform:scale(1);
    background:linear-gradient(145deg,#2c9a4e,var(--verde) 60%,var(--verde-tinta));
    box-shadow:0 10px 26px -8px rgba(28,117,56,.75),0 0 0 6px rgba(47,160,85,.12);
  }
}
.pasos--secuencia.es-visible .paso:nth-child(3) .paso__num::before{animation:paso-onda 1s var(--t1) ease-out forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) .paso__num::before{animation:paso-onda 1s var(--t2) ease-out forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) .paso__num::before{animation:paso-onda 1s var(--t3) ease-out forwards}
@keyframes paso-onda{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}

/* Dibujos: disco con degradado, trazo más grueso y resplandor al terminar */
.paso__dibujo{
  stroke-width:3;padding:15px;
  background:linear-gradient(160deg,#eef7ee,#d9ecd9);
  box-shadow:inset 0 0 0 1px rgba(28,117,56,.12);
}
.paso__dibujo .paso__tic{stroke:#2fa055}
.pasos--secuencia.es-visible .paso:nth-child(3) .paso__dibujo{animation:paso-dibujo .5s var(--t1) ease forwards,paso-resplandor .9s calc(var(--t1) + .95s) ease-out forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) .paso__dibujo{animation:paso-dibujo .5s var(--t2) ease forwards,paso-resplandor .9s calc(var(--t2) + .95s) ease-out forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) .paso__dibujo{animation:paso-dibujo .5s var(--t3) ease forwards,paso-resplandor .9s calc(var(--t3) + .95s) ease-out forwards}
@keyframes paso-resplandor{
  0%{box-shadow:inset 0 0 0 1px rgba(28,117,56,.12),0 0 0 0 rgba(47,160,85,.55)}
  100%{box-shadow:inset 0 0 0 1px rgba(28,117,56,.12),0 0 0 22px rgba(47,160,85,0),0 14px 34px -14px rgba(28,117,56,.55)}
}

/* Textos: etiqueta, título grande, párrafo con más contraste y la frase clave */
.paso__etiqueta{
  display:inline-block;font-family:var(--f-titulo);font-weight:700;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--verde);
  padding:.28rem .7rem;border-radius:999px;background:rgba(28,117,56,.1);margin-bottom:.55rem;
  opacity:0;transform:translateY(8px);
}
.pasos--secuencia .paso h3{font-size:1.65rem;font-weight:700;color:var(--verde-tinta);margin-bottom:.6rem}
.pasos--secuencia .paso p{color:#3a443d;font-size:1rem;line-height:1.6}
.pasos--secuencia .paso p strong{
  color:var(--verde);font-weight:700;display:inline-block;
  opacity:0;transform:scale(.9);
}
.pasos--secuencia.es-visible .paso:nth-child(3) .paso__etiqueta{animation:paso-texto .45s calc(var(--t1) + .8s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) .paso__etiqueta{animation:paso-texto .45s calc(var(--t2) + .8s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) .paso__etiqueta{animation:paso-texto .45s calc(var(--t3) + .8s) ease forwards}
.pasos--secuencia.es-visible .paso:nth-child(3) p strong{animation:paso-pop .45s calc(var(--t1) + 1.45s) var(--ease) forwards}
.pasos--secuencia.es-visible .paso:nth-child(4) p strong{animation:paso-pop .45s calc(var(--t2) + 1.45s) var(--ease) forwards}
.pasos--secuencia.es-visible .paso:nth-child(5) p strong{animation:paso-pop .45s calc(var(--t3) + 1.45s) var(--ease) forwards}
@keyframes paso-pop{0%{opacity:0;transform:scale(.9)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}

@media (max-width:820px){
  .pasos--secuencia{padding:2rem 1.2rem}
  .pasos--secuencia::before{top:calc(2rem + 32px);bottom:calc(2rem + 32px);left:calc(1.2rem + 31px);right:auto;width:2px}
  .pasos--secuencia .pasos__linea{top:calc(2rem + 32px);left:calc(1.2rem + 31px);width:3px;height:0;margin:0 0 0 -.5px;background:linear-gradient(180deg,var(--verde-2),var(--verde) 55%,#2fa055)}
  /* Sin el relleno lateral de .paso (.5rem): si no, la línea vertical se queda
     9 px a la izquierda del centro de los números. */
  .pasos--secuencia .paso{padding:0}
  .pasos--secuencia .pasos__punto{left:calc(1.2rem + 31px);margin:-8px 0 0 -7px}
  .pasos--secuencia .pasos__punto::after{right:auto;top:auto;bottom:100%;left:50%;width:3px;height:60px;margin:0 0 0 -1.5px;background:linear-gradient(180deg,transparent,rgba(47,160,85,.75))}
  .pasos--secuencia .paso h3{font-size:1.35rem}
  .pasos--secuencia .paso__etiqueta{grid-area:titulo;align-self:end;margin:0}
  .pasos--secuencia .paso{grid-template-areas:"num etiqueta" "num titulo" "dibujo texto";grid-template-rows:auto auto auto}
  .pasos--secuencia .paso__etiqueta{grid-area:etiqueta}
  .pasos--secuencia .paso h3{align-self:start}
}
@keyframes pasos-punto-v{
  0%{top:calc(2rem + 32px);opacity:0} 4%{opacity:1} 29.6%{top:calc(2rem + 32px + 40%);opacity:1} 34%{opacity:0}
  70.4%{top:calc(2rem + 32px + 40%);opacity:0} 74%{opacity:1} 100%{top:calc(2rem + 32px + 82%);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pasos--secuencia .paso__etiqueta,.pasos--secuencia .paso p strong{animation:none!important;opacity:1;transform:none}
  .pasos--secuencia .paso__num::before{display:none}
  .pasos--secuencia .paso__num{background:linear-gradient(145deg,#2c9a4e,var(--verde) 60%,var(--verde-tinta));border-color:transparent}
}
/* Lo que lleva el atributo hidden se oculta siempre, aunque su clase le dé display (antes el aviso «Añadida a tu reserva» y el contador «0» se veían desde el principio) */
[hidden]{display:none!important}
.campo label.falta{color:#c0392b}
/* Aviso de cookies de Google Ads (solo hasta que se decide) */
.pp-cookies{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1000;max-width:560px;margin:0 auto;background:#fff;color:#1d2420;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.8rem;font-size:.9rem;line-height:1.45}
.pp-cookies[hidden]{display:none!important}
.pp-cookies a{color:inherit;text-decoration:underline}
.pp-cookies__botones{display:flex;gap:.6rem;justify-content:flex-end}
.pie__cookies{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
/* Con el aviso de cookies abierto, WhatsApp sube por encima en vez de esconderse: en móvil es la vía por la que alquila la gente */
body:has(.pp-cookies:not([hidden])) .wa-flotante{bottom:calc(var(--alto-cookies,200px) + 1.8rem)}

/* Firma del pie (30/09/2026): enlace a niuxer.com, con el mismo tono que los enlaces legales */
.pie__abajo a[href="https://niuxer.com"]{color:#9ed18c;text-decoration:underline;text-underline-offset:2px}
.pie__abajo a[href="https://niuxer.com"]:hover{color:#fff}
/* En el móvil el botón de WhatsApp y la bombilla del ayudante flotan abajo a la derecha: hueco al final del pie para que no tape la última línea */
@media (max-width:820px){.pie__abajo{padding-bottom:128px}}
/* En ordenador, hueco a la derecha del pie para que el botón de WhatsApp no tape «Web creada por NIUXER» */
@media (min-width:821px){.pie__abajo{padding-right:96px}}
body:has(.pp-cookies:not([hidden])) .ayudante-btn{opacity:0;pointer-events:none}
/* Buscador de la tienda (16/10/2026): mientras se busca, las categorías salen en el orden que les pone
   main.js (primero las que mejor coinciden) y el contador de resultados va siempre arriba */
body.tienda-buscando .tienda__contenido{display:flex;flex-direction:column}
body.tienda-buscando .tienda__resultados{order:-100}

/* ==========================================================
   Captación (21/10/2026)
   ========================================================== */
/* Franja «qué, dónde, cómo» bajo el H1 de la portada */
.franja{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;flex-wrap:wrap;background:var(--verde-claro);color:var(--verde-tinta);border-radius:14px;padding:.9rem 1.2rem;margin:-.6rem 0 1rem}
.franja__texto{margin:0;font-weight:600;font-size:.95rem;line-height:1.45}
.franja__acciones{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.franja__tel{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.95rem;color:var(--verde-tinta);padding:.4rem .3rem;white-space:nowrap}
.franja__tel .ico{color:var(--verde)}
/* Los 4 bloques de «cómo funciona», una línea cada uno */
.pasos-cortos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem}
.pasos-cortos li{display:flex;align-items:baseline;gap:.5rem;font-size:.88rem;line-height:1.4;min-width:0}
.pasos-cortos .ico{color:var(--verde);align-self:center}
.pasos-cortos strong{white-space:nowrap;font-weight:600}
.pasos-cortos span{color:var(--gris-texto)}
.pasos-cortos__mas{margin:.5rem 0 1.6rem;font-size:.85rem}
.pasos-cortos__mas a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){
  .franja{margin-top:-.8rem;padding:.8rem 1rem}
  .franja__acciones{width:100%}
  .franja__acciones .btn{flex:1 1 0;white-space:nowrap;padding-inline:.7rem}
  .franja__tel{flex:1 0 100%;justify-content:center;padding:.15rem 0 0}
  .pasos-cortos{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .pasos-cortos span{display:none}
  .pasos-cortos__mas{margin:.35rem 0 1rem}
}

/* Aviso de cookies compacto en el móvil: dos líneas de texto y los botones en fila */
.pp-cookies__corto{display:none}
@media (max-width:620px){
  .pp-cookies{left:.6rem;right:.6rem;bottom:.6rem;padding:.65rem .8rem;gap:.5rem;font-size:.8rem;line-height:1.35;border-radius:14px}
  .pp-cookies p{margin:0}
  .pp-cookies__largo{display:none}
  .pp-cookies__corto{display:inline}
  .pp-cookies__botones .btn{flex:1 1 0;padding:.5rem .8rem}
}

/* Ficha: la cabeza (categoría, nombre, precio y fianza) y el cuerpo del panel */
.ficha__hoy{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--gris-texto);margin:.2rem 0 1rem}
.ficha__hoy .ico{color:var(--verde)}
.ficha__hoy a{color:var(--verde-tinta);font-weight:700;white-space:nowrap}
.panel__cabeza .tarifas-mini{margin:1.1rem 0 1rem}
.panel__cabeza .solo-empresas{margin:0 0 1rem}
.seccion--ficha{padding-top:7.5rem}
/* Barra fija de la ficha: solo en móvil y tableta */
.barra-ficha{display:none}
@media (max-width:1000px){
  .seccion--ficha{padding-top:5.5rem}
  .seccion--ficha .miga{margin-bottom:.8rem}
  .ficha{gap:1.2rem}
  /* La cabeza sube por encima de la foto; el resto del panel sigue siendo la caja de debajo */
  .panel{display:contents}
  .panel__cabeza{order:-1}
  .panel__cabeza h1{margin:.25rem 0 .3rem}
  .panel__cabeza .tarifas-mini{margin:.7rem 0 .7rem}
  .panel__cabeza .solo-empresas{margin:0 0 .7rem}
  .ficha__hoy{margin:0}
  .panel__cuerpo{background:#fff;border-radius:var(--radio);box-shadow:var(--sombra);padding:1.4rem}
  .barra-ficha{display:block;position:fixed;left:0;right:0;bottom:0;z-index:950;background:#fff;box-shadow:0 -8px 24px rgba(15,21,18,.12);padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom))}
  .barra-ficha__nota{margin:0 0 .45rem;font-size:.78rem;line-height:1.3;color:var(--gris-texto);text-align:center}
  .barra-ficha__botones{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:640px;margin:0 auto}
  .barra-ficha .btn{padding:.75rem .5rem;font-size:.88rem;white-space:normal;line-height:1.2;text-align:center}
  /* La barra ya lleva WhatsApp: fuera el flotante, y lo demás que flota sube por encima de la barra */
  body.con-barra .wa-flotante{display:none}
  body.con-barra .ayudante-btn{bottom:calc(var(--alto-barra,72px) + .8rem)}
  body.con-barra .ayudante{bottom:calc(var(--alto-barra,72px) + 4.6rem);max-height:calc(100vh - var(--alto-barra,72px) - 11rem)}
  body.con-barra .aviso{bottom:calc(var(--alto-barra,72px) + .8rem)}
  body.con-barra .pp-cookies{bottom:calc(var(--alto-barra,72px) + .5rem)}
  body.con-barra .pie__abajo{padding-bottom:calc(var(--alto-barra,72px) + 80px)}
}