/* Plantilla de webs para gremios — hoja de estilo unica.
   Los colores salen de cliente.json, todo lo demas es fijo.

   Criterio de diseno, por si alguien viene a tocar esto dentro de un ano:
   la queja que origino esta version fue "se nota que esta hecha con IA". Los
   tics que delatan eso son concretos y aqui se evitan a proposito:

     - Nada de secciones alternando blanco y gris automaticamente. Hay UNA
       seccion oscura, elegida, y el resto va sobre papel.
     - Nada de redondeo blando ni sombras difusas en todo. Bordes secos.
     - Contraste tipografico de verdad: 900 contra 400, no "un poco mas grande".
     - Ritmo desigual: la galeria y la portada respiran mas que el resto.
     - Asimetria: la foto de portada se sale del contenedor, la primera foto de
       la galeria ocupa el cuadruple.

   Si vuelves a poner todo simetrico y redondeado, vuelve a parecer generada. */

/* ---------- Tipografia ----------
   Archivo, servida desde la propia web (ver fuentes/LEEME.txt: no usamos el CDN
   de Google por RGPD). Variable, asi que un solo fichero da del 400 al 900 y el
   contraste sale de ahi. */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(fuentes/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(fuentes/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --marca:#0e7490;
  --marca-oscura:#0a5566;
  --urgencia:#b45309;

  --tinta:#11161a;
  --tinta-media:#4b5560;
  --tinta-suave:#666f79;   /* 5,1:1 sobre blanco. El anterior (#727e8a)
                              daba 4,1 y aqui va texto pequeno */
  --papel:#ffffff;
  --papel-alt:#f2f4f6;
  --linea:#d7dee4;
  --linea-fuerte:#11161a;
  --sombra:0 1px 2px rgba(15,25,35,.05), 0 14px 34px -22px rgba(15,25,35,.4);
  --radio:2px;              /* seco a proposito: el redondeo blando lee a SaaS */
  --ancho:70rem;
  --barra:4.5rem;           /* alto de la barra fija en movil */
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--tinta);
  background:var(--papel);
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--barra);
}
img{max-width:100%;display:block}
a{color:var(--marca)}

.envoltorio{max-width:var(--ancho);margin:0 auto;padding:0 1.1rem}

/* Contraste de escala real. El h1 es casi tres veces el cuerpo, y en 900. */
h1,h2,h3{margin:0 0 .6rem}
h1{
  font-size:clamp(2.5rem,8.5vw,4.6rem);
  font-weight:900;letter-spacing:-.038em;line-height:1.0;
  text-wrap:balance;
}
h2{
  font-size:clamp(1.75rem,5vw,2.7rem);
  font-weight:800;letter-spacing:-.032em;line-height:1.08;
}
h3{font-size:1.08rem;font-weight:700;letter-spacing:-.012em;line-height:1.25}
p{margin:0 0 1rem}

/* Ritmo desigual: la galeria y la portada mandan, el resto acompana. */
section{padding:3.4rem 0}
#trabajos{padding:4.4rem 0}

/* Una sola seccion oscura en toda la pagina, y es una decision, no un patron. */
.seccion-oscura{background:var(--tinta);color:#dde4ea}
.seccion-oscura h2{color:#fff}
.seccion-oscura .entradilla{color:#9dabb8}

/* ---------- Avisos de ejemplo y borrador ---------- */
.aviso-ejemplo{
  background:#3d2a05;color:#ffd77a;text-align:center;
  padding:.6rem 1rem;font-size:.86rem;font-weight:600;letter-spacing:.01em;
}
/* Borrador: color distinto al de ejemplo a proposito, para que de un vistazo se
   sepa si lo que estas mirando es una web ficticia o la de un cliente pendiente
   de dar el visto bueno. */
.aviso-borrador{
  background:#0d2b45;color:#9fd0ff;text-align:center;
  padding:.6rem 1rem;font-size:.86rem;font-weight:600;letter-spacing:.01em;
}

/* ---------- Cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--linea);
}
.cabecera .envoltorio{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.7rem;
}
.logo{
  font-weight:900;font-size:1.1rem;letter-spacing:-.035em;
  text-decoration:none;color:var(--tinta);
}
.logo span{color:var(--marca)}
.nav{display:none;gap:1.5rem}
.nav a{color:var(--tinta-media);text-decoration:none;font-size:.94rem;font-weight:600}
.nav a:hover{color:var(--marca)}
.tel-cabecera{
  display:none;align-items:center;gap:.45rem;text-decoration:none;
  background:var(--marca);color:#fff;font-weight:800;font-size:.95rem;
  padding:.6rem 1.1rem;border-radius:var(--radio);white-space:nowrap;
  letter-spacing:-.01em;
}

/* ---------- Portada ----------
   Sin .envoltorio dentro: la foto tiene que poder llegar al borde de la
   pantalla. El texto lleva su propio padding alineado con el resto. */
.portada{display:grid;grid-template-columns:1fr;background:var(--papel)}
.portada-texto{
  padding:2.4rem 1.1rem 2.6rem;
  max-width:var(--ancho);width:100%;margin:0 auto;
}
.chapa{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--urgencia);color:#fff;
  font-size:.78rem;font-weight:800;padding:.4rem .8rem;
  border-radius:var(--radio);margin-bottom:1.1rem;
  text-transform:uppercase;letter-spacing:.08em;
}
.entradilla{font-size:1.13rem;color:var(--tinta-media);max-width:46ch;margin-bottom:1.6rem}
.portada .entradilla{margin-top:1.1rem}

/* El telefono como elemento grafico, no como un boton mas. Quien entra en la web
   de un fontanero con una fuga no quiere leer: quiere llamar. */
.tel-grande{
  display:inline-flex;flex-direction:column;text-decoration:none;color:var(--tinta);
  border-left:5px solid var(--marca);padding:.1rem 0 .1rem 1rem;margin-bottom:.4rem;
}
.tel-grande span{
  font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  color:var(--tinta-suave);
}
.tel-grande strong{
  font-size:clamp(1.9rem,6.5vw,2.6rem);font-weight:900;
  letter-spacing:-.035em;line-height:1.1;
}
.tel-grande:hover strong{color:var(--marca)}

.botonera{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.5rem;border-radius:var(--radio);text-decoration:none;
  font-weight:800;font-size:1.02rem;letter-spacing:-.012em;
  border:2px solid transparent;
  transition:transform .12s ease, filter .12s ease;
}
.boton:active{transform:translateY(1px)}
.boton-principal{background:var(--marca);color:#fff}
.boton-principal:hover{filter:brightness(1.08)}
.boton-wa{background:#25d366;color:#0b2e18}
.boton-wa:hover{filter:brightness(1.05)}
.boton-linea{background:transparent;color:var(--tinta);border-color:var(--linea-fuerte)}
.boton-linea:hover{background:var(--tinta);color:#fff}

.confianza{
  display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.8rem;
  padding-top:1.4rem;border-top:2px solid var(--tinta);
}
.confianza div{display:flex;flex-direction:column}
.confianza b{font-size:1.4rem;font-weight:900;letter-spacing:-.03em;line-height:1.1}
.confianza span{font-size:.78rem;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.09em;font-weight:600}

/* Dos arreglos que van juntos, y los dos vienen de envolver la imagen en
   <picture> para servir dos formatos:

   1. <picture> es display:inline y sin altura propia, asi que el height:100% de
      la imagen dejaba de resolverse contra nada. Como bloque, la cadena de
      alturas vuelve a funcionar.

   2. Un item de rejilla no se encoge por debajo del contenido salvo que se le
      diga (auto minimum). La imagen forzaba el ancho de la columna a su tamano
      real -1400 px- y la pagina entera se hacia mas ancha que la pantalla del
      movil: el texto y la barra de abajo salian cortados por la derecha. */
.portada > *{min-width:0}
.portada-foto picture{display:block;height:100%}
.portada-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- Servicios ---------- */
.rejilla{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--linea)}
.tarjeta{
  background:transparent;border-bottom:1px solid var(--linea);
  padding:1.4rem 0;
}
.tarjeta h3{margin-bottom:.3rem}
.tarjeta p{margin:0;color:var(--tinta-media);font-size:.97rem}

/* ---------- Pasos ---------- */
.pasos{counter-reset:paso;display:grid;gap:1.6rem;grid-template-columns:1fr}
.paso{position:relative;padding-left:3.4rem}
.paso::before{
  counter-increment:paso;content:counter(paso);
  position:absolute;left:0;top:-.15rem;
  width:2.4rem;height:2.4rem;border-radius:var(--radio);
  background:var(--tinta);color:#fff;font-weight:900;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.paso p{margin:0;color:var(--tinta-media)}

/* ---------- Galeria ----------
   La primera foto ocupa el cuadruple. Es asimetria barata y es lo que mas aleja
   del aspecto de rejilla generada. En este oficio las fotos son el producto. */
.galeria{display:grid;gap:.4rem;grid-template-columns:repeat(2,1fr)}
.galeria a{display:block;overflow:hidden;background:var(--papel-alt);aspect-ratio:1/1}
.galeria a:first-child{grid-column:span 2;grid-row:span 2}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.galeria a:hover img{transform:scale(1.03)}

.visor{
  position:fixed;inset:0;z-index:90;background:rgba(10,14,18,.94);
  align-items:center;justify-content:center;padding:1.2rem;
  border:0;width:100%;height:100%;max-width:100%;max-height:100%;
}
/* Sin esto el dialog se veria abierto siempre: display:flex gana a
   dialog:not([open]){display:none} del navegador. */
.visor[open]{display:flex}
.visor::backdrop{background:rgba(10,14,18,.94)}
.visor img{max-width:100%;max-height:85vh;object-fit:contain}
.visor-cerrar{
  position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.14);
  color:#fff;border:0;width:2.6rem;height:2.6rem;border-radius:var(--radio);
  font-size:1.4rem;cursor:pointer;line-height:1;
}

/* ---------- Zona (la seccion oscura) ---------- */
.zonas{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0;list-style:none}
.zonas li{
  background:transparent;border:1px solid #38454f;border-radius:var(--radio);
  padding:.45rem 1rem;font-size:.94rem;font-weight:600;color:#dde4ea;
}

/* ---------- Resenas ---------- */
#resenas{background:var(--papel-alt)}
.resena{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:1.4rem;
}
.resena blockquote{margin:0 0 .9rem;font-size:1.02rem}
.resena footer{font-size:.88rem;color:var(--tinta-suave);font-weight:700}
.estrellas{color:#e8a317;letter-spacing:.1em;font-size:.95rem;margin-bottom:.5rem}
#resenas .rejilla{border-top:0;gap:1rem}
#resenas .rejilla .resena{border-bottom:1px solid var(--linea)}

/* ---------- Formulario ---------- */
.caja-form{
  background:var(--papel);border:2px solid var(--tinta);border-radius:var(--radio);
  padding:1.5rem;
}
.campo{margin-bottom:1rem}
.campo label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem}
.campo input,.campo textarea{
  width:100%;padding:.8rem .9rem;font:inherit;font-size:1rem;
  border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel);
  color:var(--tinta);
}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--marca);outline-offset:1px;border-color:var(--marca)}
.campo textarea{min-height:7rem;resize:vertical}
.campo small{display:block;color:var(--tinta-suave);font-size:.84rem;margin-top:.3rem}
.consentimiento{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--tinta-media)}
.consentimiento input{width:auto;margin-top:.25rem;flex-shrink:0}
.caja-form .boton{width:100%;margin-top:.4rem}

/* ---------- Pie ---------- */
.pie{background:var(--tinta);color:#a9b6c2;padding:2.8rem 0 2rem;font-size:.95rem}
.pie a{color:#fff}
.pie h3{color:#fff;font-size:.8rem;margin-bottom:.7rem;text-transform:uppercase;letter-spacing:.09em}
.pie-rejilla{display:grid;gap:1.8rem;grid-template-columns:1fr}
.pie-legal{
  margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid #29343d;
  font-size:.82rem;color:#7d8a96;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;
}

/* ---------- Barra fija de movil ---------- */
.barra{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--linea);border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.05rem .5rem;text-decoration:none;font-weight:800;font-size:1.02rem;
}
.barra .accion{background:var(--marca);color:#fff}
.barra .wa{background:#25d366;color:#0b2e18}

/* ---------- Tablet ---------- */
@media (min-width:560px) and (max-width:819px){
  .rejilla{grid-template-columns:repeat(2,1fr);column-gap:2rem}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .rejilla-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
}

/* ---------- Escritorio ---------- */
@media (min-width:820px){
  body{padding-bottom:0}
  .barra{display:none}
  .nav{display:flex}
  .tel-cabecera{display:inline-flex}

  /* La foto se sale del contenedor y llega al borde derecho de la pantalla.
     El texto conserva la alineacion con el resto de la pagina gracias al
     max() del padding izquierdo. */
  .portada{grid-template-columns:1fr 1fr;align-items:stretch}
  .portada-texto{
    max-width:none;margin:0;
    padding:4.6rem 3.2rem 4.6rem max(1.1rem, calc((100vw - var(--ancho)) / 2));
    display:flex;flex-direction:column;justify-content:center;
  }
  .portada-foto{height:100%}
  .portada-foto img{height:100%;aspect-ratio:auto;min-height:34rem}

  .rejilla{grid-template-columns:repeat(3,1fr);column-gap:2.2rem}
  .pasos{grid-template-columns:repeat(3,1fr);gap:2.2rem}
  .galeria{grid-template-columns:repeat(4,1fr)}
  .pie-rejilla{grid-template-columns:repeat(3,1fr)}
  section{padding:5rem 0}
  #trabajos{padding:7rem 0}
  .rejilla-2{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
}


/* ================== VARIANTE "CLIMA" ==================
   Aire acondicionado y calefaccion. No es un cambio de color: es otro registro,
   porque es otro negocio. El cliente de un fontanero tiene una averia y quiere
   llamar ya; el de un instalador de aire lleva semanas pensandoselo y se va a
   gastar varios miles de euros.

   De ahi las tres decisiones que cambian:
     - Portada tipo cartel, con el titular SOBRE la foto.
     - Titulares mas ligeros (700, no 900). Lo premium se lee ligero; el peso
       extremo lee a urgencia, que es justo lo que aqui no se vende.
     - Fondos con temperatura fria y mucho mas aire.

   Todo esto es CSS sobre la misma plantilla. No hay un segundo index.html.j2, y
   no lo tiene que haber: cada arreglo futuro se haria dos veces. */

.v-clima{
  /* Neutros sacados de la foto de portada, no elegidos a ojo: la habitacion sale
     en tonos 186-194, y el color de accion (#0e7490) es tono 191. Se usa 190,
     que armoniza con los dos. El tono medio de la imagen entera daba 164, pero
     eso lo arrastra la vegetacion del jardin, no la arquitectura.
     Contrastes comprobados: tinta 17,0:1 sobre blanco; tinta-media 7,1:1;
     tinta-suave 5,0:1; blanco sobre la seccion oscura 14,1:1. */
  --tinta:#131e20;
  --tinta-media:#495b5f;
  --tinta-suave:#607276;
  --papel-alt:#f2f5f5;
  --linea:#d4dee0;
  --linea-fuerte:#131e20;
  line-height:1.68;
}

/* --- Portada tipo cartel: foto de fondo, texto encima, abajo a la izquierda --- */
.v-clima .portada{grid-template-columns:1fr;min-height:74vh;align-items:end}
.v-clima .portada-texto,
.v-clima .portada-foto{grid-area:1/1}
/* overflow:hidden NO es decorativo: GSAP escala la foto un 12% para tener margen
   con el que hacer el parallax, y una imagen escalada sobresale de su contenedor.
   Sin recortarla, ensancha la pagina entera y en el movil el texto y la barra de
   abajo salen cortados por la derecha. */
.v-clima .portada-foto{height:100%;position:relative;overflow:hidden}
/* Encuadre centrado: cada imagen viene ya compuesta para su formato (la vertical
   para movil, la apaisada para escritorio), asi que no hay que forzar el recorte.
   Aqui hubo un object-position:10% 30% mientras una sola imagen servia los dos,
   porque centrada dejaba fuera dos tercios del aire acondicionado en movil. */
.v-clima .portada-foto img{
  width:100%;height:100%;aspect-ratio:auto;object-fit:cover;min-height:0;
}

/* El degradado no es decorativo: es lo unico que garantiza que el titular se lea
   sobre una foto cuyo contenido no controlamos. Sin esto, una imagen clara deja
   el texto blanco invisible. */
.v-clima .portada-foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,18,28,.12) 0%, rgba(8,18,28,.32) 45%, rgba(8,18,28,.84) 100%);
}

.v-clima .portada-texto{
  position:relative;z-index:2;color:#fff;
  padding:6rem 1.1rem 2.4rem;
  max-width:var(--ancho);margin:0 auto;width:100%;
  display:block;
}
.v-clima .portada-texto h1{
  font-weight:700;letter-spacing:-.028em;
  font-size:clamp(2.3rem,7.5vw,4.4rem);
  max-width:17ch;
  text-shadow:0 2px 26px rgba(8,18,28,.45);
}
.v-clima .portada .entradilla{color:#dbe6ee;max-width:44ch}
.v-clima .portada .confianza{border-top-color:rgba(255,255,255,.34)}
.v-clima .portada .confianza b{color:#fff}
.v-clima .portada .confianza span{color:#b6c6d3}
.v-clima .portada .boton-linea{color:#fff;border-color:rgba(255,255,255,.6)}
.v-clima .portada .boton-linea:hover{background:#fff;color:var(--tinta)}

/* --- Mas aire y titulares mas ligeros en el resto de la pagina --- */
.v-clima h2{font-weight:700;letter-spacing:-.024em}
.v-clima h3{font-weight:600}
.v-clima section{padding:4.4rem 0}
.v-clima .entradilla{max-width:42ch}
.v-clima .confianza b{font-weight:800}

/* La seccion oscura pasa de casi negro a azul profundo: mismo recurso, otra
   temperatura. */
.v-clima .seccion-oscura{background:#162f34}
.v-clima .zonas li{border-color:#31555b}
.v-clima .pie{background:#162f34}
.v-clima .pie-legal{border-top-color:#274a50}
.v-clima .paso::before{background:var(--marca);border-radius:50%}
.v-clima .caja-form{border:1px solid var(--linea);box-shadow:var(--sombra)}

@media (min-width:820px){
  .v-clima .portada{grid-template-columns:1fr;min-height:82vh}
  .v-clima .portada-texto{padding:8rem 1.1rem 3.6rem}
  .v-clima section{padding:6.4rem 0}
  .v-clima #trabajos{padding:8rem 0}
}


/* ================== MOVIMIENTO ==================
   Sin librerias. Se valoro GSAP y salian 39 KB con ScrollTrigger: cuatro veces
   todo el HTML y el CSS de esta web juntos. Con IntersectionObserver y unas
   transiciones se consigue casi lo mismo por medio KB.

   REGLA QUE MANDA SOBRE TODO LO DEMAS: el contenido tiene que verse aunque el
   JavaScript no llegue nunca. Por eso se oculta SOLO dentro de .con-js, clase
   que anade un script minimo del <head>. Sin JS, no se oculta nada.

   Se anima opacity y transform, que el navegador resuelve en la tarjeta grafica.
   Animar top o height obligaria a recalcular la maquetacion en cada fotograma. */
.con-js .revelar{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.con-js .revelar.dentro{opacity:1;transform:none}

/* Escalonado entre hermanos: las tarjetas no entran todas de golpe. */
.con-js .revelar :is(.rejilla,.pasos,.galeria) > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease-out, transform .55s ease-out;
}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *{opacity:1;transform:none}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(2){transition-delay:.06s}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(3){transition-delay:.12s}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(4){transition-delay:.18s}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(5){transition-delay:.24s}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(6){transition-delay:.30s}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(7){transition-delay:.36s}
.con-js .revelar.dentro :is(.rejilla,.pasos,.galeria) > *:nth-child(n+8){transition-delay:.42s}

/* La portada respira: un zoom lentisimo, una sola vez. Es la diferencia entre
   una foto pegada y una portada viva, y no cuesta un byte de JavaScript. */
@keyframes respirar{from{transform:scale(1.06)}to{transform:scale(1)}}
.portada-foto img{animation:respirar 22s cubic-bezier(.2,.5,.3,1) both}

/* Elevacion minima al pasar por encima de los botones. */
.boton{transition:transform .16s ease, filter .16s ease, background-color .16s ease}
.boton-principal:hover,.boton-wa:hover{transform:translateY(-1px)}

/* Movimiento reducido: quieta y COMPLETA. Sin la segunda regla, quitar las
   transiciones dejaria .revelar en opacity:0 para siempre — la pagina se veria
   quieta y en blanco, que es peor que animada. */
/* Cuando anima GSAP, la libreria escribe opacity y transform en linea en cada
   fotograma. Dejar ademas una transition de CSS haria que el navegador volviera a
   interpolar cada una de esas escrituras: la animacion iria a tirones. Y el zoom
   de la portada lo sustituye el parallax, asi que se apaga.

   Ojo: aqui NO se revela nada. Si GSAP no llega, quien revela es el arranque de
   index.html.j2 anadiendo .dentro, que el CSS sigue respetando. */
.con-gsap .revelar,
.con-gsap .revelar :is(.rejilla,.pasos,.galeria) > *{transition:none}
.con-gsap .portada-foto img{animation:none}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .con-js .revelar,
  .con-js .revelar :is(.rejilla,.pasos,.galeria) > *{opacity:1!important;transform:none!important}
}