/* ═══════════════════════════════════════════════════════════════
   Quintero Solar — el sitio web
   Misma paleta que la aplicación (los colores del logo): verde teal
   profundo, amarillo solar, blanco. Quien vea el sitio y luego la
   aplicación tiene que reconocer el mismo negocio.
   Aquí el verde manda más que en la aplicación: allí importa leer
   números, aquí importa que la primera pantalla se vea de alguien.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --verde:#06564b; --verde-osc:#04413a; --verde-claro:#0d8a76; --verde-vivo:#12a58c;
  --sol:#f5b81c; --sol-osc:#a97a05;
  --texto:#0d1c19; --texto2:#4a625d; --texto3:#8ba09b;
  --fondo:#f7faf9; --tarjeta:#fff; --tarjeta2:#f1f6f5;
  --borde:rgba(6,86,75,.11); --borde-fuerte:rgba(6,86,75,.2);
  --rojo:#c0392b; --ok:#149063;
  --sombra:0 1px 2px rgba(6,86,75,.05), 0 12px 30px -18px rgba(6,86,75,.35);
  --sombra-alta:0 2px 8px rgba(6,86,75,.08), 0 24px 50px -20px rgba(6,86,75,.45);
  --r:18px; --r-s:12px;
  --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --ancho:1120px;
}
@media (prefers-color-scheme: dark){
  :root{
    --texto:#e6efec; --texto2:#a3bab5; --texto3:#71908a;
    --fondo:#081613; --tarjeta:#0f221d; --tarjeta2:#16302a;
    --borde:rgba(255,255,255,.08); --borde-fuerte:rgba(255,255,255,.16);
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -18px rgba(0,0,0,.75);
    --sombra-alta:0 2px 8px rgba(0,0,0,.4), 0 24px 50px -20px rgba(0,0,0,.85);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{background:var(--fondo);color:var(--texto);font:16px/1.6 var(--fuente);
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* OJO: la regla de arriba PISA el «hidden» del navegador (lo que dice la página
   gana a lo que trae el navegador de fábrica), así que una foto escondida se
   vería igual, rota. Hay que decirlo aquí a mano. */
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3{line-height:1.2;margin:0}
.caja{max-width:var(--ancho);margin:0 auto;padding:0 18px}
.oculto{display:none !important}

/* ─── Cabecera ─────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:var(--verde);
       box-shadow:0 1px 0 rgba(255,255,255,.08)}
header .caja{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:800;
      letter-spacing:-.2px;white-space:nowrap}
.logo img{width:34px;height:34px;border-radius:9px;object-fit:cover}
.logo small{display:block;font-weight:500;font-size:11px;color:rgba(255,255,255,.62);
            letter-spacing:.3px;margin-top:-2px}
nav.menu{margin-left:auto;display:flex;gap:4px}
nav.menu a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;font-weight:600;
           padding:9px 13px;border-radius:10px}
nav.menu a:hover,nav.menu a.activo{background:rgba(255,255,255,.12);color:#fff}
.carritoBtn{position:relative;background:var(--sol);color:#3a2a00;border:0;border-radius:11px;
            padding:10px 15px;font:700 14.5px var(--fuente);cursor:pointer;white-space:nowrap}
.carritoBtn b{background:#3a2a00;color:var(--sol);border-radius:9px;padding:1px 7px;
              margin-left:6px;font-size:12.5px}
.menuBtn{display:none;background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:10px;
         width:40px;height:38px;font-size:20px;cursor:pointer;line-height:1}
@media (max-width:860px){
  nav.menu{position:fixed;inset:62px 0 auto 0;background:var(--verde-osc);flex-direction:column;
           gap:0;padding:8px;display:none;box-shadow:var(--sombra-alta)}
  nav.menu.abierto{display:flex}
  nav.menu a{padding:13px}
  .menuBtn{display:block;margin-left:auto}
  .carritoBtn{padding:10px 12px}
}

/* ─── Portada ──────────────────────────────────────────────── */
.portada{background:linear-gradient(160deg,var(--verde) 0%,var(--verde-osc) 60%,#032f2a 100%);
         color:#fff;padding:0 0 76px;position:relative;overflow:hidden}
/* El hueco de arriba lo pone la caja y no la portada: así el banner queda
   pegado al menú, y si algún día no hay banner el título no se pega tampoco. */
.portada>.caja{padding-top:52px}
/* El sol: un círculo amarillo muy tenue detrás del texto. Da la idea sin
   necesidad de una foto que habría que cargar. */
.portada::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,184,28,.22),transparent 62%);
  right:-130px;top:-190px;pointer-events:none}
/* El banner ocupa TODO el ancho de la pantalla y se enseña COMPLETO
   (height:auto), nunca recortado: es una foto ancha y baja con el logo metido a
   la derecha, y recortarla en un móvil dejaría fuera justo eso.
   El archivo mide 1686 px de ancho, así que aguanta cualquier pantalla normal
   sin verse blando. Si algún día se cambia por uno más chico, se notará: lo
   suyo es no bajar de ~1600 px de ancho. */
.bannerCaja{position:relative;overflow:hidden;background:var(--verde-osc);line-height:0}
.bannerPortada{display:block;width:100%;height:auto}
.portada h1{font-size:clamp(30px,5.2vw,52px);font-weight:850;letter-spacing:-1px;max-width:16ch}
.portada p{color:rgba(255,255,255,.78);font-size:clamp(16px,2.2vw,19px);max-width:52ch;margin:16px 0 26px}
.botones{display:flex;gap:11px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:13px;padding:14px 22px;
     font:700 15.5px var(--fuente);cursor:pointer;text-decoration:none;transition:transform .06s}
.btn:active{transform:scale(.98)}
.btn-sol{background:var(--sol);color:#3a2a00}
.btn-claro{background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn-verde{background:var(--verde);color:#fff}
.btn-borde{background:transparent;color:var(--verde-claro);box-shadow:inset 0 0 0 1.5px var(--borde-fuerte)}
@media (prefers-color-scheme:dark){.btn-borde{color:var(--verde-vivo)}}

.cifras{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.cifra{background:rgba(255,255,255,.09);border-radius:var(--r-s);padding:13px 20px;min-width:118px}
.cifra b{display:block;font-size:26px;font-weight:850;color:var(--sol)}
.cifra span{font-size:13px;color:rgba(255,255,255,.7)}

/* ─── Secciones ────────────────────────────────────────────── */
section{padding:60px 0}
section.gris{background:var(--tarjeta2)}
.titulo{margin-bottom:28px}
.titulo h2{font-size:clamp(23px,3.4vw,32px);font-weight:800;letter-spacing:-.5px}
.titulo p{color:var(--texto2);margin:8px 0 0;max-width:60ch}
.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);
         padding:24px;box-shadow:var(--sombra)}
.tarjeta h3{font-size:17.5px;margin-bottom:8px}
.tarjeta p{color:var(--texto2);margin:0;font-size:15px}
.pasos{counter-reset:paso;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.paso{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:22px}
.paso::before{counter-increment:paso;content:counter(paso);display:grid;place-items:center;
  width:34px;height:34px;border-radius:11px;background:var(--sol);color:#3a2a00;
  font-weight:850;margin-bottom:12px}

/* ─── Tienda ───────────────────────────────────────────────── */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.filtros input,.filtros select{background:var(--tarjeta);border:1px solid var(--borde-fuerte);
  border-radius:12px;padding:12px 14px;font:15px var(--fuente);color:var(--texto);min-width:0}
.filtros input{flex:1;min-width:190px}
.prods{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.prod{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;
      display:flex;flex-direction:column;box-shadow:var(--sombra)}
.prod .foto{aspect-ratio:4/3;background:var(--tarjeta2);display:grid;place-items:center;overflow:hidden}
.prod .foto img{width:100%;height:100%;object-fit:cover}
.prod .foto span{font-size:34px;opacity:.25}
.prod .cuerpo{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.prod h3{font-size:15px;font-weight:700;line-height:1.35}
.prod .cat{font-size:11.5px;color:var(--texto3);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.precio{font-size:19px;font-weight:850;color:var(--verde-claro);margin-top:auto}
@media (prefers-color-scheme:dark){.precio{color:var(--verde-vivo)}}
.precio small{display:block;font-size:12px;font-weight:600;color:var(--texto3)}
.etiq{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.etiq.hay{background:rgba(20,144,99,.13);color:var(--ok)}
.etiq.poco{background:rgba(245,184,28,.18);color:var(--sol-osc)}
.etiq.agotado{background:rgba(192,57,43,.12);color:var(--rojo)}
.prod button{background:var(--verde);color:#fff;border:0;border-radius:11px;padding:11px;
  font:700 14px var(--fuente);cursor:pointer;width:100%}
.prod button[disabled]{background:var(--tarjeta2);color:var(--texto3);cursor:default}
.vacio{text-align:center;color:var(--texto3);padding:44px 20px}
.pieAviso{margin-top:22px;font-size:13px;color:var(--texto3);text-align:center}

/* ─── Estrellas ────────────────────────────────────────────── */
/* Se dibujan con texto y no con imágenes: pesan cero y se ven igual de bien
   en cualquier pantalla. El truco es pintar cinco grises y encima las
   amarillas recortadas al porcentaje que toque. */
.estrellas{position:relative;display:inline-block;white-space:nowrap;line-height:1;
  font-size:15px;letter-spacing:1px}
.estrellas .fondo{color:var(--texto3);opacity:.4}
.estrellas .llenas{position:absolute;left:0;top:0;overflow:hidden;color:var(--sol);
  white-space:nowrap}
.estrellas.grande{font-size:22px}
.valn{font-size:12.5px;color:var(--texto3);font-weight:650;margin-left:6px}

/* Poner estrellas: cinco botones grandes, que en un móvil hay que acertarles */
.ponerEstrellas{display:flex;gap:4px;margin:4px 0 12px}
.ponerEstrellas button{background:none;border:0;font-size:32px;line-height:1;cursor:pointer;
  color:var(--texto3);opacity:.45;padding:2px 3px;transition:transform .12s ease,opacity .12s}
.ponerEstrellas button.puesta{color:var(--sol);opacity:1}
.ponerEstrellas button:hover{transform:scale(1.15)}

/* ─── Ficha de un producto ─────────────────────────────────── */
.fichaProd{display:grid;gap:26px;grid-template-columns:1fr 1fr;align-items:start;margin-bottom:34px}
@media (max-width:820px){.fichaProd{grid-template-columns:1fr}}
.fichaFoto{background:var(--tarjeta2);border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center}
.fichaFoto img{width:100%;height:100%;object-fit:cover}
.fichaFoto span{font-size:64px;opacity:.25}
.fichaProd h1{font-size:clamp(24px,3.4vw,34px);font-weight:850;letter-spacing:-.6px;margin:8px 0}
.fichaPrecio{font-size:30px;font-weight:850;color:var(--verde-claro);margin:14px 0}
@media (prefers-color-scheme:dark){.fichaPrecio{color:var(--verde-vivo)}}
.fichaPrecio small{display:block;font-size:13px;font-weight:600;color:var(--texto3)}
.fichaDesc{color:var(--texto2);font-size:15.5px;margin:14px 0}

/* ─── Compartir ────────────────────────────────────────────── */
.compartir{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0}
.compartir span{font-size:13px;color:var(--texto3);font-weight:700;margin-right:2px}
.compartir a,.compartir button{display:grid;place-items:center;width:40px;height:40px;
  border-radius:12px;border:1px solid var(--borde-fuerte);background:var(--tarjeta);
  color:var(--texto2);cursor:pointer;text-decoration:none;transition:transform .14s ease,color .14s}
.compartir a:hover,.compartir button:hover{transform:translateY(-2px);color:var(--verde-claro)}
.compartir svg{width:19px;height:19px;fill:currentColor}
.prod .compartirMini{position:absolute;top:9px;right:9px;width:34px;height:34px;
  background:rgba(255,255,255,.92);color:#0d1c19;border:0;border-radius:11px;
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .18s}
.prod{position:relative}
.prod:hover .compartirMini,.prod:focus-within .compartirMini{opacity:1}
@media (hover:none){.prod .compartirMini{opacity:1}}

/* ─── Reseñas ──────────────────────────────────────────────── */
.resena{border-top:1px solid var(--borde);padding:16px 0}
.resena b{font-size:14.5px}
.resena .cuando{font-size:12px;color:var(--texto3);margin-left:8px}
.resena p{margin:7px 0 0;color:var(--texto2);font-size:15px}

/* ─── Servicios con foto ───────────────────────────────────── */
.servicio{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra)}
.servicio .foto{aspect-ratio:16/10;background:var(--tarjeta2);overflow:hidden}
.servicio .foto img{width:100%;height:100%;object-fit:cover}
.servicio .cuerpo{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.servicio h3{font-size:18px}
.servicio p{color:var(--texto2);font-size:14.5px;margin:0;white-space:pre-line}
.servicio .pre{margin-top:auto;font-size:20px;font-weight:850;color:var(--verde-claro)}
@media (prefers-color-scheme:dark){.servicio .pre{color:var(--verde-vivo)}}

.sobreTexto{max-width:74ch;color:var(--texto2);font-size:16px;white-space:pre-line}

/* ─── Avisos de ofertas ────────────────────────────────────── */
.avisosCaja{display:grid;gap:22px;grid-template-columns:1.15fr 1fr;align-items:center;padding:30px}
.avisosCaja h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.4px}
.avisosCaja p{color:var(--texto2);margin:9px 0 0;font-size:15px}
.avisosForm{display:grid;gap:10px}
.avisosForm input{background:var(--tarjeta2);border:1px solid var(--borde-fuerte);border-radius:12px;
  padding:13px 14px;font:15px var(--fuente);color:var(--texto);width:100%}
.avisosForm .btn{justify-content:center}
.avisosForm a{color:var(--verde-claro);font-weight:650}
@media (prefers-color-scheme:dark){.avisosForm a{color:var(--verde-vivo)}}
@media (max-width:760px){.avisosCaja{grid-template-columns:1fr;padding:24px}}
/* Cuando ya se apuntó, el formulario se cambia por el gracias */
.avisosHecho{text-align:center;padding:8px 0}
.avisosHecho .tic{font-size:36px;line-height:1}

/* ─── Blog ─────────────────────────────────────────────────── */
.posts{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.post{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;
      text-decoration:none;color:inherit;display:flex;flex-direction:column;box-shadow:var(--sombra)}
.post .foto{aspect-ratio:16/9;background:var(--tarjeta2);overflow:hidden}
.post .foto img{width:100%;height:100%;object-fit:cover}
.post .cuerpo{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-size:18px}
.post p{color:var(--texto2);font-size:14.5px;margin:0}
.post .meta{font-size:12px;color:var(--texto3);margin-top:auto;padding-top:6px;font-weight:600}
.tag{display:inline-block;background:rgba(6,86,75,.09);color:var(--verde-claro);font-size:11.5px;
     font-weight:750;padding:3px 10px;border-radius:99px}
@media (prefers-color-scheme:dark){.tag{background:rgba(255,255,255,.08);color:var(--verde-vivo)}}

/* El artículo abierto: una columna estrecha, que leer líneas de 120
   caracteres cansa la vista. */
.articulo{max-width:730px;margin:0 auto}
.articulo h1{font-size:clamp(26px,4.4vw,40px);font-weight:850;letter-spacing:-.8px;margin-bottom:12px}
.articulo .meta{color:var(--texto3);font-size:13.5px;font-weight:600;margin-bottom:22px}
.articulo .portadaFoto{border-radius:var(--r);overflow:hidden;margin-bottom:26px}
.articulo p{font-size:17px;color:var(--texto);margin:0 0 17px}
.articulo h2{font-size:22px;margin:32px 0 12px}
.articulo li{font-size:17px;margin-bottom:7px}
.volver{display:inline-flex;align-items:center;gap:7px;color:var(--texto2);text-decoration:none;
        font-weight:650;font-size:14.5px;margin-bottom:22px}

/* ─── Carrito ──────────────────────────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(4,20,17,.55);z-index:60;display:none;
      backdrop-filter:blur(2px)}
.velo.abierto{display:block}
.cajon{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--fondo);
  z-index:61;transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
.cajon.abierto{transform:none}
.cajon header{position:static;background:var(--verde);color:#fff;padding:17px 18px;
  display:flex;align-items:center;justify-content:space-between}
.cajon header b{font-size:17px}
.cajon .cerrar{background:rgba(255,255,255,.15);border:0;color:#fff;width:34px;height:34px;
  border-radius:10px;font-size:19px;cursor:pointer;line-height:1}
.cajon .lista{flex:1;overflow-y:auto;padding:14px 16px}
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--borde)}
.item .n{flex:1;min-width:0}
.item .n b{display:block;font-size:14.5px;font-weight:700;overflow-wrap:anywhere}
.item .n span{font-size:12.5px;color:var(--texto3)}
.cant{display:flex;align-items:center;gap:6px}
.cant button{width:30px;height:30px;border-radius:9px;border:1px solid var(--borde-fuerte);
  background:var(--tarjeta);color:var(--texto);font-size:17px;cursor:pointer;line-height:1}
.cant input{width:48px;text-align:center;border:1px solid var(--borde-fuerte);border-radius:9px;
  padding:6px 2px;font:600 14px var(--fuente);background:var(--tarjeta);color:var(--texto)}
.cajon .pie{border-top:1px solid var(--borde);padding:16px;background:var(--tarjeta)}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.total b{font-size:23px;font-weight:850}
.campo{margin-bottom:11px}
.campo label{display:block;font-size:12.5px;font-weight:700;color:var(--texto2);margin-bottom:5px}
.campo input,.campo textarea{width:100%;background:var(--tarjeta);border:1px solid var(--borde-fuerte);
  border-radius:11px;padding:12px 13px;font:15px var(--fuente);color:var(--texto);resize:vertical}
.aviso{background:rgba(245,184,28,.13);border-radius:var(--r-s);padding:12px 14px;font-size:13px;
  color:var(--texto2);margin-bottom:13px}
/* La casilla entera es pulsable, no solo el cuadradito: en un móvil acertarle
   a 16 píxeles con el dedo es pedir demasiado. */
.casilla{display:flex;gap:10px;align-items:center;margin:4px 0 13px;cursor:pointer;
  font-size:14px;color:var(--texto2);padding:6px 0}
.casilla input{width:21px;height:21px;flex:0 0 auto;accent-color:var(--verde)}
.exito{text-align:center;padding:26px 18px}
.exito .num{font:850 30px var(--fuente);color:var(--verde-claro);letter-spacing:1px;margin:10px 0}

/* ─── Contacto y pie ───────────────────────────────────────── */
.dosCol{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media (max-width:760px){.dosCol{grid-template-columns:1fr}}
.dato{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--borde)}
.dato b{font-size:14px}
.dato span{color:var(--texto2);font-size:14px}
footer.pie{background:var(--verde-osc);color:rgba(255,255,255,.66);padding:34px 0;font-size:14px}
footer.pie a{color:#fff;text-decoration:none;font-weight:600}
.wa{position:fixed;right:16px;bottom:16px;z-index:40;background:#25d366;color:#fff;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);text-decoration:none}
.wa svg{width:30px;height:30px}

.chivato{position:fixed;left:50%;bottom:22px;transform:translate(-50%,120%);background:var(--verde-osc);
  color:#fff;padding:13px 20px;border-radius:13px;z-index:80;font-weight:600;font-size:14.5px;
  transition:transform .2s;max-width:90vw;text-align:center;box-shadow:var(--sombra-alta)}
.chivato.ver{transform:translate(-50%,0)}

/* ═══════════════════════════════════════════════════════════════
   MOVIMIENTO
   Todo con CSS y sin librerías: quien entra desde un móvil con datos
   paga lo que descarga. Nada se mueve más de medio segundo ni tapa
   contenido — una web de negocio tiene que dejar comprar, no lucirse.
   ═══════════════════════════════════════════════════════════════ */

/* Cada bloque aparece al llegar a él. Nace ya visible y es el código
   quien lo esconde: si el navegador no soporta lo que hace falta, se
   ve todo de golpe en vez de quedarse la página en blanco. */
.revelar{opacity:0;transform:translateY(20px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.3,1);
  /* En una rejilla, cada tarjeta entra un pelín después que la anterior */
  transition-delay:calc(var(--i,0) * 70ms)}
.revelar.dentro{opacity:1;transform:none}

/* La cabecera se estrecha al bajar y saca sombra: da idea de que la
   página se mueve, sin robar sitio a la primera pantalla. */
header{transition:box-shadow .25s ease}
header .caja{height:62px;transition:height .25s ease}
header.encogida{box-shadow:0 6px 22px -10px rgba(0,0,0,.5)}
header.encogida .caja{height:52px}
header.encogida .logo img{width:29px;height:29px}
.logo img{transition:width .25s ease,height .25s ease}

/* El sol de la portada respira despacio */
.portada::after{animation:respirar 9s ease-in-out infinite alternate}
@keyframes respirar{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.12)}}

/* Las tarjetas se levantan al pasar por encima o al tocarlas */
.tarjeta,.prod,.post,.paso{transition:transform .22s ease,box-shadow .22s ease}
.prod:hover,.post:hover,.tarjeta:hover,.paso:hover{transform:translateY(-5px);box-shadow:var(--sombra-alta)}
.prod:active,.post:active{transform:translateY(-1px)}
.prod .foto img{transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.prod:hover .foto img,.post:hover .foto img{transform:scale(1.06)}
.prod button{transition:background .18s ease,transform .12s ease}
.prod button:hover:not([disabled]){background:var(--verde-claro)}

/* Los botones grandes: un brillo que cruza al pasar por encima */
.btn{position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .22s ease,filter .18s ease}
.btn:hover{filter:brightness(1.06);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.btn::after{content:'';position:absolute;top:0;bottom:0;width:45%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .55s ease}
.btn:hover::after{left:120%}

/* Las cifras de la portada suben contando (lo hace el código) */
.cifra{transition:transform .22s ease,background .22s ease}
.cifra:hover{transform:translateY(-3px);background:rgba(255,255,255,.15)}
.cifra b{font-variant-numeric:tabular-nums}

.carritoBtn{transition:transform .12s ease,filter .18s ease}
.carritoBtn:hover{filter:brightness(1.05)}
.carritoBtn b{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.carritoBtn b.salta{transform:scale(1.45)}

/* El bocadillo de WhatsApp llama la atención cada tanto, sin agobiar */
.wa{transition:transform .2s ease,box-shadow .2s ease;animation:latido 6s ease-in-out 3s infinite}
.wa:hover{transform:scale(1.09)}
@keyframes latido{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.1)}96%{transform:scale(1.04)}}

/* Al pulsar un enlace del menú, la página baja rodando en vez de saltar.
   scroll-margin deja hueco para la cabecera pegajosa: sin eso, el título
   de la sección queda escondido debajo. */
html{scroll-behavior:smooth}
section,.portada{scroll-margin-top:70px}

/* Quien tenga desactivadas las animaciones en su teléfono no ve NADA de
   esto. No es un detalle bonito: hay gente a la que el movimiento le
   marea de verdad. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .revelar{opacity:1;transform:none}
}