/* ==========================================================================
   Casa Monasterio — movimiento y piezas de portada
   Todo hecho a mano: ni una librería. Cada efecto se apaga solo si el sistema
   pide menos movimiento (`prefers-reduced-motion`).
   ========================================================================== */

/* ==========================================================================
   Revelados al hacer scroll
   ========================================================================== */
.rev{--rev-y:26px;--rev-x:0px;--rev-e:.92}
.js .rev{
  opacity:0;
  transform:translate3d(var(--rev-x),var(--rev-y),0) scale(var(--rev-e));
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.js .rev.dentro{opacity:1;transform:none}
.rev--izq{--rev-x:-34px;--rev-y:0px;--rev-e:1}
.rev--der{--rev-x:34px;--rev-y:0px;--rev-e:1}
.rev--suave{--rev-y:14px;--rev-e:1}
.rev--zoom{--rev-y:0px;--rev-e:1.06}

/* Máscara que sube y descubre la imagen */
.js .rev-mascara{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.65,0,.35,1)}
.js .rev-mascara.dentro{clip-path:inset(0 0 0 0)}

/* Título que aparece línea por línea */
.titulo-lineas{overflow:hidden}
.titulo-lineas .linea{display:block;overflow:hidden}
.titulo-lineas .linea > span{display:block}
.js .titulo-lineas .linea > span{
  transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1);
}
.js .titulo-lineas.dentro .linea > span{transform:none}

/* ==========================================================================
   Héroe
   ========================================================================== */
.heroe{
  position:relative;min-height:min(94vh,920px);
  display:grid;place-items:center;overflow:hidden;isolation:isolate;
  background:var(--crema);
}
.heroe__fondo{position:absolute;inset:0;z-index:-2}
.heroe__fondo img,.heroe__fondo video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Capas del pase de fotos: se funden y hacen un zoom lentísimo. */
.heroe__capa{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.8s ease;
  animation:cm-kenburns 18s ease-in-out infinite alternate;
}
.heroe__capa.activa{opacity:1}
@keyframes cm-kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}
}
/* Velo cálido: sin él la tipografía no se lee sobre cualquier foto. */
.heroe__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(247,244,240,.30),rgba(247,244,240,.62) 62%,rgba(233,228,222,.86)),
    linear-gradient(to bottom,rgba(39,40,44,.10),transparent 30%,rgba(39,40,44,.12));
}

/* Tarjeta orgánica: la forma es lo que le da carácter a la portada. */
.heroe__tarjeta{
  position:relative;z-index:1;text-align:center;
  /* El relleno lateral es generoso a propósito: las esquinas de la forma
     orgánica se comen el espacio y el texto no debe asomarse por ellas. */
  width:min(92vw,660px);padding:clamp(46px,6vw,74px) clamp(48px,7vw,92px);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-radius:46% 54% 44% 56%/40% 42% 58% 60%;
  box-shadow:0 30px 80px rgba(39,40,44,.14);
  animation:cm-respira 14s ease-in-out infinite;
}
@keyframes cm-respira{
  0%,100%{border-radius:46% 54% 44% 56%/40% 42% 58% 60%}
  33%{border-radius:54% 46% 58% 42%/52% 38% 62% 48%}
  66%{border-radius:42% 58% 50% 50%/44% 56% 44% 56%}
}
.heroe__marca{
  width:54px;height:54px;margin:0 auto clamp(14px,2vw,22px);
  display:grid;place-items:center;color:var(--arena-osc);
}
.heroe__marca svg{width:100%;height:100%;stroke-width:1.1}
.heroe h1{font-size:clamp(1.95rem,4vw,3.05rem);margin:0 auto .45em;letter-spacing:-.02em;max-width:14ch}
.heroe h1 em{font-style:italic;color:var(--arena-mas-osc)}
.heroe__bajada{color:var(--tinta-2);max-width:36ch;margin-inline:auto;font-size:clamp(.95rem,1.2vw,1.05rem)}
.heroe__acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(22px,3vw,32px)}

/* Invitación a bajar */
.heroe__bajar{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-2);
}
.heroe__bajar i{
  width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--arena-osc));
  animation:cm-baja 2.4s ease-in-out infinite;transform-origin:top;
}
@keyframes cm-baja{0%,100%{transform:scaleY(.35);opacity:.35}50%{transform:scaleY(1);opacity:1}}

/* Pétalos que flotan detrás de la tarjeta */
.heroe__petalo{
  position:absolute;z-index:0;color:var(--arena);opacity:.28;pointer-events:none;
  animation:cm-flota 16s ease-in-out infinite;
}
.heroe__petalo svg{width:100%;height:100%;stroke-width:.9}
.heroe__petalo--1{width:120px;height:120px;top:14%;left:9%;animation-delay:-2s}
.heroe__petalo--2{width:86px;height:86px;bottom:20%;right:12%;animation-delay:-7s}
.heroe__petalo--3{width:64px;height:64px;top:24%;right:22%;animation-delay:-11s}
@keyframes cm-flota{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(0,-26px,0) rotate(11deg)}
}

/* ==========================================================================
   Parallax suave (lo mueve el JS con --p, de -1 a 1)
   ========================================================================== */
.parallax{will-change:transform}
.parallax > *{transform:translate3d(0,calc(var(--p,0) * var(--parallax-fuerza,26px)),0)}

/* ==========================================================================
   Carrusel
   ========================================================================== */
.carrusel{position:relative}
.carrusel__pista{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--hueco,26px) * 3) / 4);
  gap:var(--hueco,26px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista > *{scroll-snap-align:start}
.carrusel.arrastrando .carrusel__pista{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}

.carrusel__mandos{display:flex;gap:8px;align-items:center}
.carrusel__boton{
  width:46px;height:46px;display:grid;place-items:center;flex:none;
  border:1px solid var(--linea-fuerte);border-radius:50%;background:var(--blanco);
  cursor:pointer;color:var(--tinta);
  transition:background var(--transicion),border-color var(--transicion),color var(--transicion),opacity var(--transicion);
}
.carrusel__boton:hover{background:var(--arena-osc);border-color:var(--arena-osc);color:var(--blanco)}
.carrusel__boton[disabled]{opacity:.32;pointer-events:none}
.carrusel__boton svg{width:18px;height:18px}

.carrusel__progreso{flex:1;height:2px;background:var(--linea);border-radius:2px;overflow:hidden;min-width:80px}
.carrusel__progreso i{display:block;height:100%;background:var(--arena-osc);border-radius:2px;transition:width .2s ease,transform .2s ease}

@media (max-width:1080px){.carrusel__pista{grid-auto-columns:calc((100% - var(--hueco,26px) * 2) / 3)}}
@media (max-width:820px){.carrusel__pista{grid-auto-columns:calc((100% - var(--hueco,26px)) / 2)}}
@media (max-width:560px){.carrusel__pista{grid-auto-columns:78%}}

/* ==========================================================================
   Sección de vídeo
   ========================================================================== */
.video-bloque{position:relative;border-radius:var(--radio-lg);overflow:hidden;isolation:isolate}
.video-bloque__medios{aspect-ratio:16/7;background:var(--crema)}
.video-bloque__medios img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.video-bloque:hover .video-bloque__medios img{transform:scale(1.045)}
.video-bloque__capa{
  position:absolute;inset:0;display:grid;place-items:center;gap:18px;
  background:linear-gradient(to top,rgba(39,40,44,.52),rgba(39,40,44,.14) 55%);
  color:var(--blanco);text-align:center;padding:clamp(20px,4vw,48px);
}
.video-bloque__capa h2{color:var(--blanco);max-width:18ch;margin:0}
.video-bloque__capa p{color:rgba(255,255,255,.86);max-width:44ch;margin:0}
.reproducir{
  width:86px;height:86px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.94);color:var(--tinta);
  transition:transform var(--transicion),background var(--transicion);
}
.reproducir:hover{transform:scale(1.07);background:var(--blanco)}
.reproducir::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);animation:cm-pulso 2.6s ease-out infinite;
}
.reproducir svg{width:26px;height:26px;margin-left:4px;fill:currentColor;stroke:none}
@keyframes cm-pulso{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.35);opacity:0}}

/* Ventana del vídeo */
.visor{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(14px,4vw,44px);
  background:rgba(20,21,26,.92);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.visor.abierto{opacity:1;visibility:visible}
.visor__caja{width:min(100%,1100px);aspect-ratio:16/9;background:#000;border-radius:var(--radio-lg);overflow:hidden;box-shadow:var(--sombra-alta)}
.visor__caja iframe,.visor__caja video{width:100%;height:100%;border:0;display:block}
.visor__cerrar{
  position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:background var(--transicion)
}
.visor__cerrar:hover{background:rgba(255,255,255,.2)}
.visor__cerrar svg{width:20px;height:20px}

/* ==========================================================================
   Cifras
   ========================================================================== */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);text-align:center}
.cifra__num{
  font-family:var(--display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;
  color:var(--arena-mas-osc);font-variant-numeric:tabular-nums;
}
.cifra__etq{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);margin-top:.8em}
.cifra + .cifra{position:relative}
.cifra + .cifra::before{
  content:"";position:absolute;left:calc(var(--hueco-cifra,-22px));top:12%;bottom:12%;
  width:1px;background:var(--linea);
}
@media (max-width:700px){
  .cifras{grid-template-columns:1fr;gap:26px}
  .cifra + .cifra::before{display:none}
}

/* ==========================================================================
   Testimonios
   ========================================================================== */
.testimonio{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio-lg);
  padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:16px;height:100%;
}
.testimonio__estrellas{display:flex;gap:3px;color:var(--arena-osc)}
.testimonio__estrellas svg{width:15px;height:15px;fill:currentColor;stroke:none}
.testimonio p{font-family:var(--display);font-size:1.06rem;line-height:1.62;margin:0;flex:1}
.testimonio__autor{display:flex;align-items:center;gap:12px;font-size:.85rem}
.testimonio__inicial{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--crema);color:var(--arena-mas-osc);font-family:var(--display);font-size:1.05rem;
}
.testimonio__autor b{display:block;font-weight:500}
.testimonio__autor span{color:var(--tinta-3);font-size:.8rem}

/* ==========================================================================
   Tarjeta de producto: interacción más viva
   ========================================================================== */
.producto__medios::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(39,40,44,.28),transparent 46%);
  opacity:0;transition:opacity var(--transicion);
}
.producto:hover .producto__medios::after{opacity:1}
.producto__mirar{
  position:absolute;left:50%;bottom:16px;z-index:2;transform:translate(-50%,14px);
  opacity:0;pointer-events:none;white-space:nowrap;
  background:var(--blanco);color:var(--tinta);border-radius:50px;
  padding:.62em 1.3em;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity var(--transicion),transform var(--transicion);
  box-shadow:0 6px 20px rgba(39,40,44,.18);
}
.producto:hover .producto__mirar{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.producto__mirar{display:none}}

/* ==========================================================================
   Detalles finos
   ========================================================================== */

/* Subrayado que crece en los enlaces del menú ya existe; aquí el brillo del botón. */
.boton{position:relative;overflow:hidden}
.boton::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:left .7s cubic-bezier(.22,.61,.36,1);
}
.boton:hover::after{left:130%}

/* Barra de progreso de lectura */
.progreso-pagina{
  position:fixed;top:0;left:0;height:2px;z-index:70;width:0;
  background:linear-gradient(to right,var(--arena),var(--arena-mas-osc));
  transition:width .12s linear;
}

/* Entrada de la página */
.js body{opacity:0}
.js body.listo{opacity:1;transition:opacity .5s ease}

/* Separador de ondas entre secciones */
.onda{display:block;width:100%;height:clamp(28px,4vw,58px);color:var(--hueso)}
.onda svg{width:100%;height:100%;display:block}
.onda--invertida{transform:rotate(180deg)}

/* ==========================================================================
   Respeto por quien pide menos movimiento
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .rev,.js .rev-mascara,.js .titulo-lineas .linea > span{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .heroe__capa,.heroe__tarjeta,.heroe__petalo,.heroe__bajar i,.reproducir::after{animation:none!important}
  .parallax > *{transform:none!important}
  .boton::after{display:none}
  .js body{opacity:1}
}

/* La pista del carrusel lleva tarjetas de producto, pero no la rejilla de la
   tienda: el ancho lo manda `grid-auto-columns`. */
.carrusel__pista--productos{list-style:none;margin:0;padding:0}
.carrusel__pista--productos > li{margin:0;width:auto;float:none;display:flex;flex-direction:column}

/* ==========================================================================
   Banda de frases
   Las tres ideas que resumen la marca, justo debajo del héroe.
   ========================================================================== */
.frases{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,46px);align-items:start;
}
.frase{display:flex;gap:16px;align-items:flex-start;position:relative}
.frase + .frase::before{
  content:"";position:absolute;left:calc(clamp(18px,3vw,46px) / -2);
  top:6px;bottom:6px;width:1px;background:var(--linea);
}
.frase__icono{
  width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--hueso);color:var(--arena-osc);
  transition:background var(--transicion),transform var(--transicion);
}
.frase:hover .frase__icono{background:var(--crema);transform:translateY(-3px)}
.frase__icono svg{width:22px;height:22px;stroke-width:1.2}
.frase p{
  margin:0;font-family:var(--display);font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.45;color:var(--tinta);
}
@media (max-width:820px){
  .frases{grid-template-columns:1fr;gap:20px}
  .frase + .frase::before{
    left:0;right:0;top:auto;bottom:auto;width:auto;height:1px;margin-top:-10px;
  }
}

/* ==========================================================================
   Contacto en el pie
   ========================================================================== */
.contacto-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85em}
.contacto-lista li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem}
.contacto-lista svg{width:17px;height:17px;flex:none;margin-top:3px;opacity:.7}
.contacto-lista a{border-bottom:1px solid transparent;transition:border-color var(--transicion)}
.contacto-lista a:hover{border-bottom-color:currentColor}

/* Crédito del estudio en el pie */
.pie__autor{
  color:var(--arena-clara);border-bottom:1px solid rgba(255,255,255,.28);
  transition:color var(--transicion),border-color var(--transicion);
}
.pie__autor:hover{color:var(--blanco);border-bottom-color:var(--blanco)}

/* ==========================================================================
   Marca
   ========================================================================== */
.marca{display:flex;align-items:center;gap:12px;flex:none}

/* Dos clases a propósito. En toda la tienda el <body> lleva `woocommerce-page`, y
   `woocommerce-layout.css` trae `.woocommerce-page img{height:auto;max-width:100%}`
   con especificidad (0,1,1): con una sola clase (0,1,0) el logo se iba a su tamaño
   natural (320x443) y reventaba la cabecera. Al comparar, el número de clases se
   mira antes que el de tipos, así que (0,2,0) gana. No bajar a una sola clase. */
.marca .marca__emblema{height:30px;width:auto;flex:none}
.marca .marca__palabra{height:17px;width:auto;flex:none}
.marca .custom-logo{height:30px;width:auto}

/* El emblema del héroe reemplaza al icono decorativo. Dos clases, por lo mismo. */
.heroe .heroe__marca{
  width:auto;height:clamp(44px,4.4vw,56px);margin:0 auto clamp(12px,1.6vw,16px);display:block;
}

/* Pie */
.pie__logo{width:min(132px,52%);height:auto;filter:brightness(0) invert(1);opacity:.92}
.pie__lema{height:14px;width:auto;margin-top:10px;filter:brightness(0) invert(1);opacity:.55}

@media (max-width:900px){
  .marca .marca__emblema{height:27px}
  .marca .marca__palabra{height:15px}
}
@media (max-width:520px){
  .marca .marca__palabra{display:none}
  .marca .marca__emblema{height:26px}
}

/* ==========================================================================
   Botón flotante de WhatsApp
   z-index 65: por encima de la cabecera (60) y por debajo del velo del menú
   móvil (70), así se esconde solo cuando se abre el panel, sin tocar el JS.
   ========================================================================== */
.wasap{
  position:fixed;left:var(--gutter);bottom:clamp(18px,3vw,28px);z-index:65;
  display:flex;align-items:center;height:54px;padding:0 14px;
  border-radius:27px;background:#25d366;color:#fff;
  box-shadow:0 6px 22px rgba(37,211,102,.32),0 1px 3px rgba(39,40,44,.14);
  transition:transform var(--transicion),box-shadow var(--transicion),background var(--transicion);
}
.wasap:hover{color:#fff}
.wasap__icono{display:grid;place-items:center;flex:none}
.wasap__icono svg{width:26px;height:26px;stroke-width:1.6}
/* El rótulo nace plegado: en reposo el botón es un círculo. */
.wasap__texto{
  max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:.85rem;font-weight:500;letter-spacing:.02em;
  transition:max-width var(--transicion),opacity var(--transicion),margin-left var(--transicion);
}
.wasap:hover,.wasap:focus-visible{
  background:#1eb257;transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(37,211,102,.38),0 2px 6px rgba(39,40,44,.16);
}
/* Solo se despliega donde hay puntero de verdad: en táctil el :hover se queda
   pegado después de tocar y el botón quedaría abierto para siempre. */
@media (hover:hover){
  .wasap:hover .wasap__texto{max-width:160px;opacity:1;margin-left:9px}
}
.wasap:focus-visible .wasap__texto{max-width:160px;opacity:1;margin-left:9px}

@media (max-width:600px){
  .wasap{height:48px;padding:0 11px;bottom:16px}
  .wasap__icono svg{width:24px;height:24px}
}
@media (prefers-reduced-motion:reduce){
  .wasap,.wasap__texto{transition:none}
  .wasap:hover,.wasap:focus-visible{transform:none}
}

/* ==========================================================================
   Instagram — rejilla curada de la portada
   ========================================================================== */
.instagram__usuario{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--arena-osc);
}
.instagram__usuario svg{width:17px;height:17px}
.instagram__usuario:hover{color:var(--arena-mas-osc)}

.instagram__rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px);
  list-style:none;margin:0;padding:0;
}
/* Dos clases: en la portada de una tienda el <body> puede llevar
   `woocommerce-page`, y `.woocommerce-page img{height:auto}` desarmaría el
   recorte cuadrado. Ver la nota del logo en el README. */
.instagram .instagram__foto{
  position:relative;display:block;overflow:hidden;border-radius:var(--radio-lg);
  aspect-ratio:1;background:var(--hueso);
}
.instagram .instagram__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.instagram__foto::after{
  content:"";position:absolute;inset:0;background:rgba(39,40,44,.34);
  opacity:0;transition:opacity var(--transicion);
}
.instagram__lupa{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  color:var(--blanco);opacity:0;transform:scale(.85);
  transition:opacity var(--transicion),transform var(--transicion);
}
.instagram__lupa svg{width:28px;height:28px;stroke-width:1.3}
.instagram .instagram__foto:hover img,
.instagram .instagram__foto:focus-visible img{transform:scale(1.06)}
.instagram__foto:hover::after,.instagram__foto:focus-visible::after{opacity:1}
.instagram__foto:hover .instagram__lupa,
.instagram__foto:focus-visible .instagram__lupa{opacity:1;transform:none}

@media (max-width:900px){
  .instagram__rejilla{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .instagram__rejilla{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .instagram .instagram__foto img{transition:none}
  .instagram .instagram__foto:hover img{transform:none}
}