/* =========================================================
   PELUDO ILUSTRE
   Arquetipo: editorial claro sobre papel.
   Color y letra salen del manual de marca. Todo lo demas se
   acoge a DOS escalas: una de espacio y una de tamano. Esa
   disciplina es lo que hace que se vea cara.
   ========================================================= */

:root{
  /* --- color, del manual --- */
  --hueso:#F3EEE5;
  --arena:#E8E0D3;
  --tinta:#33291E;
  --gris:#6B6156;   /* el gris viejo (#8B8175) daba 3,3:1 sobre el hueso:
                       poco para leer. Este da 5,2:1. */
  --nogal:#A07A50;
  --vino:#77303A;
  --linea:rgba(51,41,30,.14);
  --linea-suave:rgba(51,41,30,.08);

  /* --- letra --- */
  --serif:"Fraunces", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", Arial, sans-serif;

  /* --- escala de espacio: no se usa ni un valor fuera de aqui --- */
  --e1:4px;  --e2:8px;   --e3:12px;  --e4:16px;  --e5:24px;
  --e6:32px; --e7:48px;  --e8:64px;  --e9:96px;  --e10:128px;

  /* --- escala de tamano --- */
  --t-etiqueta:10.5px;
  --t-nota:13px;
  --t-cuerpo:16.5px;
  --t-guia:clamp(17.5px,1.5vw,20px);
  --t-h3:clamp(18px,1.7vw,22px);
  --t-h2:clamp(30px,4.4vw,54px);
  --t-h1:clamp(38px,6.4vw,86px);

  /* --- ritmo --- */
  --seccion:clamp(52px,7.5vh,104px);   /* antes 80-152: sobraba aire entre seccion y seccion */
  --margen:clamp(20px,5vw,72px);
  --ancho:1680px;   /* las secciones con marco piden mas aire a los lados */
  --barra:72px;
  --anuncio:34px;
  /* El aire entre filas de cuadros en la pared del panel. En pantalla ancha
     ahi cabe la medida escrita debajo de cada cuadro; en celular esa medida
     no se pone, asi que sobra tanto hueco. Lo lee panel.js. */
  --hueco-fila:34px;

  /* --- curvas --- */
  --suave:cubic-bezier(.22,.7,.24,1);
  --entra:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--barra) + var(--e5));
}

body{
  margin:0;
  background:var(--hueso);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:400;   /* la Jost en 300 es demasiado fina para leer parrafos */
  font-size:var(--t-cuerpo);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

/* El grano. Suena a nada y es lo que convierte el hueso plano en papel.
   Va fijo sobre todo, sin estorbar el puntero. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.20;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:210px 210px;
}


/* ---------- la reja ---------- */

.reja{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--margen);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--e5);
}

.seccion{ padding-block:var(--seccion); }
.seccion--arena{ background:var(--arena); }
/* Sin usar hoy: se quedo al caer la franja de "No compras a ciegas".
   Es el modificador de seccion oscura del sistema; vuelve el dia que
   haya otra seccion sobre tinta. */
.seccion--tinta{ background:var(--tinta); color:var(--hueso); }


/* ---------- tipografia del sistema ---------- */

.h2{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--t-h2);
  line-height:1.06;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.h3{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.22;
}
.guia{
  margin:var(--e5) 0 0;
  font-size:var(--t-guia);
  line-height:1.5;
  color:var(--gris);
  max-width:44ch;
}
.nota{ margin:0; font-size:var(--t-nota); line-height:1.5; color:var(--gris); }

.oculto{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }


/* ---------- botones ---------- */

.boton{
  display:inline-block;
  position:relative;
  background:var(--vino);
  color:var(--hueso);
  font-family:var(--sans);
  font-weight:500;
  font-size:15px;
  line-height:1;
  letter-spacing:.015em;
  text-decoration:none;
  padding:var(--e4) var(--e6);
  border:0;
  /* del mismo redondeo que los chips de opcion, para que la seccion
     hable un solo idioma */
  border-radius:999px;
  cursor:pointer;
  transition:background .3s var(--suave), transform .3s var(--suave), box-shadow .3s var(--suave);
}
.boton:hover{
  background:#8A3945;
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px rgba(119,48,58,.55);
}
.boton:active{ transform:translateY(0); }
.boton:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }
.boton--chico{ padding:11px var(--e5); font-size:13.5px; }
.boton--ancho{ display:block; text-align:center; }


/* =========================================================
   EL MENU
   Transparente sobre el hero, solido al bajar. El subrayado
   crece de un lado y se va por el otro.
   ========================================================= */

/* La barra de anuncio: la unica linea de la pagina que grita, y solo
   arriba del todo. Al primer scroll se va y el menu sube a ocupar su
   puesto; al volver al tope, vuelve. */
.anuncio{
  position:fixed;
  inset:0 0 auto 0;
  z-index:99;
  margin:0;
  height:var(--anuncio);
  display:grid;
  place-items:center;
  padding-inline:var(--e4);
  background:var(--tinta);
  color:rgba(243,238,229,.88);
  font-family:var(--sans);
  font-size:var(--t-etiqueta);
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
  transition:transform .45s var(--suave);
}
/* Se va con el primer scroll, y tambien mientras el telon esta abierto:
   ahi estorbaria encima de la pantalla completa del menu. */
body.sin-anuncio .anuncio,
body.sin-scroll .anuncio{ transform:translateY(-100%); }

@media (max-width:430px){
  .anuncio{ font-size:9.5px; letter-spacing:.08em; padding-inline:var(--e3); }
}

.menu{
  position:fixed;
  inset:0 0 auto 0;
  top:var(--anuncio);
  z-index:100;
  height:var(--barra);
  display:flex;
  align-items:center;
  gap:var(--e5);
  padding-inline:var(--margen);
  transition:background .45s var(--suave), box-shadow .45s var(--suave),
             backdrop-filter .45s var(--suave),
             transform .4s var(--suave), opacity .3s var(--suave),
             top .45s var(--suave);
}
/* Cuando el anuncio se va, el menu sube a ocupar su sitio. */
body.sin-anuncio .menu{ top:0; }
/* Se aparta hacia arriba mientras bajas o mientras te quedas leyendo.
   Vuelve al subir, al acercar el puntero al borde o al llegar arriba. */
.menu.guardada{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
/* Sobre la portada el menu flota encima de la foto y no se leia.
   Este velo se desvanece en cuanto la barra se vuelve solida. */
.menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(243,238,229,.92) 0%,
    rgba(243,238,229,.62) 55%,
    rgba(243,238,229,0) 100%);
  transition:opacity .45s var(--suave);
}
.menu.solido::before{ opacity:0; }
.menu.solido{
  background:rgba(243,238,229,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--linea-suave), 0 12px 26px -24px rgba(51,41,30,.5);
}

.menu__marca{ display:flex; align-items:center; flex:0 0 auto; }
/* Minimos del manual: horizontal 220 px, minimo 70 px. No se bajan. */
.menu__logo--ancho{ width:266px; height:auto; }
.menu__logo--corto{ width:88px;  height:auto; display:none; }

.menu__enlaces{
  display:flex;
  gap:var(--e6);
  margin-left:auto;
  list-style:none;
  padding:0;
}
.menu__enlaces a{
  position:relative;
  display:inline-block;
  padding:var(--e1) 0;
  font-size:14px;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--tinta);
}
.menu__enlaces a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--suave);
}
.menu__enlaces a:hover::after,
.menu__enlaces a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

.menu__accion{ flex:0 0 auto; }

/* --- el boton de hamburguesa --- */
.hamburguesa{
  display:none;
  width:44px; height:44px;
  margin-left:auto;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  position:relative;
  z-index:2;
}
.hamburguesa span{
  position:absolute;
  left:11px; right:11px;
  height:1.5px;
  background:var(--tinta);
  transition:transform .45s var(--suave), opacity .25s var(--suave), background .3s;
}
.hamburguesa span:nth-child(1){ top:17px; }
.hamburguesa span:nth-child(2){ top:22px; }
.hamburguesa span:nth-child(3){ top:27px; }
.hamburguesa[aria-expanded="true"] span{ background:var(--hueso); }
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* --- el telon de celular --- */
.telon{
  position:fixed;
  inset:0;
  z-index:95;
  background:var(--tinta);
  color:var(--hueso);
  display:grid;
  align-content:center;
  padding:var(--e10) var(--margen) var(--e8);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--entra);
}
.telon[data-abierto="true"]{ clip-path:inset(0 0 0 0); }
.telon ul{ list-style:none; margin:0; padding:0; }
.telon li{ overflow:hidden; }
.telon a{
  display:block;
  padding:var(--e3) 0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,9vw,46px);
  line-height:1.18;
  text-decoration:none;
  transform:translateY(110%);
  transition:transform .6s var(--entra);
}
.telon[data-abierto="true"] a{ transform:none; }
.telon li:nth-child(1) a{ transition-delay:.10s; }
.telon li:nth-child(2) a{ transition-delay:.16s; }
.telon li:nth-child(3) a{ transition-delay:.22s; }
.telon li:nth-child(4) a{ transition-delay:.28s; }
.telon li:nth-child(5) a{ transition-delay:.34s; }
.telon__pie{
  margin-top:var(--e8);
  font-size:var(--t-nota);
  color:rgba(243,238,229,.55);
  opacity:0;
  transition:opacity .4s .45s ease;
}
.telon[data-abierto="true"] .telon__pie{ opacity:1; }

body.sin-scroll{ overflow:hidden; }

@media (max-width:1023px){
  .menu__enlaces,
  .menu__accion{ display:none; }
  .hamburguesa{ display:block; }
}
@media (max-width:560px){
  .menu__logo--ancho{ display:none; }
  .menu__logo--corto{ display:block; }
}
@media (min-width:1024px){
  .telon{ display:none; }
}


/* =========================================================
   1 · LA PORTADA
   La foto ocupa la pantalla entera. El texto va pegado al
   margen izquierdo, sobre la mitad de pared lisa: es lo unico
   que permite el manual, que prohibe el logo sobre foto con
   detalle. Las lineas son el mismo lenguaje de las molduras.
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero__foto{ position:absolute; inset:-3.5% 0 -6%; z-index:0; will-change:transform; }
.hero__foto picture,
.hero__foto img{ width:100%; height:100%; object-fit:cover; /* La foto viene compuesta con la mitad izquierda vacia a proposito:
     el recorte se ancla a la izquierda para no comerse ese hueco, que es
     donde va el texto. */
  object-position:3% 50%; }
.hero__luz{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.hero__texto{
  position:relative;
  z-index:2;
  justify-self:start;
  margin-left:var(--margen);
  /* Sube el bloque para que el boton no quede a la altura del banco
     de la foto: el texto se apoya en la pared limpia, no en el mueble. */
  transform:translateY(-7%);
}

/* El eslogan es el titular de la pagina: el logo vive arriba, en el menu. */
.hero__sub{
  margin:0;
  max-width:15ch;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,5.4vw,78px);
  line-height:1.04;
  letter-spacing:-.018em;
}

.hero__accion{ margin:var(--e7) 0 0; }
/* El boton del hero pesa mas que los demas: es la unica accion de la portada. */
.hero__accion .boton{ padding:var(--e5) var(--e8); font-size:16.5px; }


@media (max-width:899px){
  /* ARRIBA DEL TODO: EN CELULAR NADA FLOTA.

     La barra de anuncio deja de ir clavada a la pantalla y pasa a ser una
     linea mas de la pagina: se va sola al bajar porque se la lleva el
     scroll, sin que ningun script tenga que apartarla. Y el menu se queda
     arriba por su cuenta, con sticky.

     Por que: antes las dos iban fijas y el anuncio solo se quitaba si el
     script le ponia una clase a tiempo. En el telefono no siempre pasaba y
     el anuncio se quedaba clavado encima del contenido. Una barra que no
     flota no se puede quedar pegada.

     El z-index del anuncio deja de contar solo (es de elementos
     posicionados), asi que con el menu abierto el telon lo tapa como a
     cualquier otra cosa de la pagina. */
  .anuncio{ position:static; }
  body.sin-anuncio .anuncio,
  body.sin-scroll .anuncio{ transform:none; }

  .menu{ position:sticky; inset:auto; top:0; }

  /* En celular el hero deja de ser una foto a pantalla completa con el
     texto encima, y pasa a ser DOS PIEZAS APILADAS: la foto arriba y el
     texto debajo, sobre hueso.

     Por que: la foto se estiraba a todo el hero con object-fit:cover, y
     como es mas ancha que el hueco de un telefono el navegador le cortaba
     376 px por cada lado —el 25%—; por eso los cuadros salian agrandados y
     pegados al borde. Y en pantallas bajas el titular caia encima de los
     cuadros y no se leia, que es justo lo que prohibe el manual.

     Apilado no pasa ninguna de las dos: la foto entra entera con su
     proporcion y el texto siempre esta sobre hueso limpio. Si no cabe todo
     de una, se baja un dedo — mejor eso que un titular ilegible. */
  .hero{
    display:block;
    min-height:0;
    /* Sin relleno: el anuncio y el menu ya ocupan su sitio en la pagina,
       asi que la banda empieza justo debajo de ellos sola. Antes habia que
       sumar las dos alturas a mano y, si la cuenta fallaba, el borde de la
       foto caia a media altura del logo. */
    padding-top:0;
    padding-bottom:clamp(28px, 6vh, 56px);
  }

  .hero__foto{
    position:relative;
    inset:auto;
    height:auto;
    aspect-ratio:1544 / 2382;
  }
  .hero__luz{
    /* Pegada a la foto, no a la barra: .hero__foto ya arranca debajo de la
       barra, asi que sumarla otra vez bajaba el velo 72 px — la sombra de
       arriba cortaba en seco sobre los cuadros y abajo la foto no alcanzaba
       a morir en hueso. */
    inset:0 0 auto 0;
    height:auto;
    aspect-ratio:1544 / 2382;
  }
  .hero__foto img{ object-position:50% 50%; }

  /* La banda nace y muere en hueso, sin cantos: por arriba se disuelve en
     los primeros 5,6% —justo antes de donde empiezan los marcos, que caen
     al 5,9%— y por abajo desde el 60%. Asi no hay ninguna linea de corte
     contra el fondo de la pagina, que es este mismo hueso. */
  .hero__luz{
    background:
      linear-gradient(to bottom,
        var(--hueso) 0%,
        rgba(243,238,229,.85) 1.4%,
        rgba(243,238,229,.35) 3.2%,
        rgba(243,238,229,0) 5.6%,
        rgba(243,238,229,0) 60%,
        rgba(243,238,229,.50) 79%,
        rgba(243,238,229,.90) 93%,
        var(--hueso) 100%);
  }

  /* En celular el aire se aprieta: no hay pared de sobra. */
  .hero__texto{
    margin-right:var(--margen);
    /* Sube un pelo sobre el final de la banda, donde el degradado ya es
       hueso puro: asi la foto y el texto no parecen dos bloques pegados. */
    margin-top:calc(var(--e6) * -1);
    padding:0;
    transform:none;
  }
  .hero__sub{ font-size:clamp(30px,8.4vw,44px); }
  .hero__accion{ margin-top:var(--e5); }
  .hero__accion .boton{ padding:var(--e4) var(--e7); font-size:15.5px; }
}

@media (min-width:900px){
  .hero__texto{
    max-width:min(600px,46vw);
    padding-block:var(--e7);
  }
  /* El velo deja ver la pared detras del texto pero garantiza el contraste:
     nunca tapa la galeria, que vive del 66% para la derecha. */
  .hero__luz{
    background:
      linear-gradient(to right,
        rgba(243,238,229,.74) 0%,
        rgba(243,238,229,.62) 24%,
        rgba(243,238,229,.20) 48%,
        rgba(243,238,229,0) 66%),
      radial-gradient(36% 44% at 79% 42%,
        rgba(255,238,206,.16) 0%, rgba(255,238,206,0) 72%),
      radial-gradient(90% 78% at 72% 48%,
        rgba(26,18,11,0) 42%, rgba(26,18,11,.20) 100%);
  }
}


/* =========================================================
   3 · COMO FUNCIONA — todo dentro de un mismo marco
   Los cuatro pasos y el deslizador comparten una sola pieza de
   arena con las esquinas redondeadas, apoyada sobre el hueso.
   ========================================================= */

.pasos .reja{ row-gap:0; }

/* EL MARCO — la pieza de arena que encierra una seccion entera.
   La usan "Como funciona" y el panel; lo unico que cambia es lo de adentro. */
.marco{
  --marco-aire:clamp(24px, 4.5vw, 64px);
  --marco-radio:clamp(20px, 2.6vw, 34px);
  grid-column:1 / -1;
  display:grid;
  gap:var(--e7);
  padding:var(--marco-aire);
  background:var(--arena);
  border-radius:var(--marco-radio);
  /* Arena sobre hueso es una diferencia suave: el filo y la sombra
     larga son los que hacen que se lea como pieza y no como mancha. */
  box-shadow:inset 0 0 0 1px rgba(51,41,30,.055),
             0 1px 2px rgba(51,41,30,.05),
             0 32px 60px -40px rgba(51,41,30,.42);
}
/* Todo lo que va dentro del marco se redondea un punto menos que el marco:
   si coincidieran, lo de adentro se veria mal encajado. */
.marco .ba,
.marco .pared,
.marco .mini img{ border-radius:6px; }
.marco .opcion{ border-color:rgba(51,41,30,.24); }

/* Con el marco ancho hay sitio para que los pasos pesen mas. */
.pasos__col{ min-width:0; }
.pasos__col .h2{ max-width:14ch; }
.paso h3{ font-size:clamp(21px,1.75vw,27px); }
.paso p{ max-width:46ch; }
.pasos__ba{ margin:0; min-width:0; }

/* Los cuatro pasos cuelgan de una linea vertical, con las cifras fuera del
   bloque de texto: es un indice, y el orden de verdad importa. */
.pasos__lista{
  --sangria:clamp(48px, 5vw, 66px);
  /* El aire entre pasos manda tambien la altura del numero: los dos salen
     de aqui para que la cifra nunca se despegue de su titulo. */
  --paso-aire:clamp(26px, 2.9vw, 40px);
  position:relative;
  list-style:none;
  margin:var(--e7) 0 0;
  padding:0 0 0 var(--sangria);
}
.pasos__lista::before{
  content:"";
  position:absolute;
  left:calc(var(--sangria) * .62);
  top:var(--e2);
  bottom:var(--e2);
  width:1px;
  /* se difumina en las puntas para que no termine en seco */
  background:linear-gradient(to bottom,
    rgba(51,41,30,0)    0%,
    rgba(51,41,30,.17) 12%,
    rgba(51,41,30,.17) 88%,
    rgba(51,41,30,0)  100%);
}

.paso{ position:relative; padding:var(--paso-aire) 0; }
.paso:first-child{ padding-top:0; }
.paso:last-child{ padding-bottom:0; }

.paso__num{
  position:absolute;
  left:calc(var(--sangria) * -1);
  top:var(--paso-aire);
  width:calc(var(--sangria) * .44);
  text-align:right;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px, 2.3vw, 31px);
  line-height:1.15;
  color:var(--nogal);
}
.paso:first-child .paso__num{ top:0; }

/* Estaba en 13 px, la letra mas chica de la pagina, peleando con un titular
   de cuarenta y algo. Ahora se lee como texto y no como pie de foto. */
.paso p{
  margin:var(--e2) 0 0;
  font-size:clamp(15px, 1.15vw, 16.5px);
  line-height:1.55;
  color:var(--gris);
}

/* El remate del bloque, al margen del titular y no de la lista. */
.pasos__accion{ margin:var(--e7) 0 0; }

.pasos__ba figcaption{
  margin:var(--e4) 0 0;
  font-family:var(--serif);
  font-size:var(--t-guia);
  line-height:1.4;
  color:var(--tinta);
  text-align:center;
}

/* Apilado —celular y tableta— el deslizador se queda con todo el ancho y
   se vuelve una torre: 3:4 sobre 700 px son mas de 900 de alto. Con este
   tope se queda del tamaño de una foto y no de una puerta. */
@media (max-width:1079px){
  .pasos__ba .ba{ max-width:420px; margin-inline:auto; }
}

/* Las dos columnas entran a los 1080 y no a los 900. Entre medias la
   columna de texto quedaba en 234 px —una tira— porque el deslizador se
   llevaba 520 fijos. Mejor apilado que asfixiado. */
@media (min-width:1080px){
  .pasos__marco{
    /* El deslizador tiene un tamaño comodo propio y no crece mas; el texto
       se queda con todo lo que sobra. Asi el marco puede ser ancho sin que
       la foto se vuelva una torre. */
    grid-template-columns:minmax(0,1fr) minmax(340px,520px);
    gap:clamp(48px,6vw,120px);
    align-items:center;
  }
  .pasos__ba figcaption{ text-align:left; }
}

/* --- el deslizador antes/despues --- */
.ba{
  position:relative;
  --corte:50%;
  aspect-ratio:3 / 4;
  overflow:hidden;
  touch-action:pan-y;
  cursor:ew-resize;
  background:var(--hueso);
  box-shadow:0 1px 3px rgba(51,41,30,.14), 0 18px 34px -22px rgba(51,41,30,.45);
}
.ba img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}
.ba__b{ clip-path:inset(0 0 0 var(--corte)); }

.ba__barra{
  position:absolute;
  top:0; bottom:0;
  left:var(--corte);
  width:2px;
  margin-left:-1px;
  background:var(--hueso);
  box-shadow:0 0 12px rgba(0,0,0,.35);
  pointer-events:none;
}
.ba__tirador{
  position:absolute;
  top:50%; left:var(--corte);
  width:46px; height:46px;
  margin:-23px 0 0 -23px;
  border-radius:50%;
  background:var(--hueso);
  box-shadow:0 3px 14px rgba(0,0,0,.32);
  display:grid;
  place-items:center;
  pointer-events:none;
  transition:transform .3s var(--suave);
}
.ba:hover .ba__tirador{ transform:scale(1.08); }
.ba__tirador::before{
  content:"‹ ›";
  font-family:var(--sans);
  font-size:17px;
  letter-spacing:.14em;
  color:var(--tinta);
}
.ba__rotulo{
  position:absolute;
  bottom:var(--e4);
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--hueso);
  /* Una sombra no basta: sobre un fondo blanco la letra clara desaparece.
     Con su propia pastilla oscura se lee encima de lo que sea. */
  padding:5px 10px 4px;
  border-radius:999px;
  background:rgba(24,19,14,.58);
  backdrop-filter:blur(3px);
  pointer-events:none;
}
/* Cada rotulo se apaga con su propia mitad: entero desde el 22% de ancho,
   ya desaparecido en el 4%. La opacidad la pone main.js en el elemento, no
   por variable: una opacidad que sale de var() no interpola la transicion. */
.ba__rotulo{ transition:opacity .25s linear; }
.ba__rotulo--a{ left:var(--e4); }
.ba__rotulo--b{ right:var(--e4); }

.ba__mando{
  position:absolute;
  inset:0;
  width:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
}
.ba__mando:focus-visible ~ .ba__barra{ box-shadow:0 0 0 3px var(--vino); }

/* =========================================================
   5 · LOS ESTILOS — galeria que se abre
   Va despues del panel. Cinco tarjetas ordenadas en la reja;
   cada una abre el visor con tres ejemplos.
   ========================================================= */

.galeria__cabeza{ grid-column:1 / -1; margin-bottom:var(--e7); }
/* El selector de perro o gato va debajo del titular y de la guia: primero
   se dice que es la seccion, despues se ofrece el mando. */
.galeria__especie{ margin-top:var(--e5); }
.galeria__rejilla{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--e5) var(--e4);
  /* Sin esto la reja estira todas las tarjetas al alto de la mas alta
     —Editorial, que lleva dos lineas de nota— y como son <button>, el
     navegador les centra el contenido verticalmente: las otras cuatro
     bajaban 11 px y los nombres quedaban desalineados. */
  align-items:start;
}

.tarjeta{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  display:block;
}
.tarjeta__vista{
  display:block;
  position:relative;
  transform:translateY(var(--ty,0));
  aspect-ratio:3 / 4;
  overflow:hidden;
  border-radius:2px;
  background:var(--arena);
  box-shadow:0 2px 6px rgba(51,41,30,.10), 0 18px 34px -22px rgba(51,41,30,.45);
  transition:transform .55s var(--suave), box-shadow .55s var(--suave);
}
.tarjeta__vista img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--suave);
}
.tarjeta:hover .tarjeta__vista{
  --ty:-6px;
  box-shadow:0 4px 10px rgba(51,41,30,.12), 0 30px 52px -24px rgba(51,41,30,.55);
}
.tarjeta:hover .tarjeta__vista img{ transform:scale(1.05); }
.tarjeta:focus-visible .tarjeta__vista{ outline:2px solid var(--tinta); outline-offset:4px; }

/* Debajo de cada tarjeta va el nombre del estilo y nada mas. */
.tarjeta__pie{ display:block; margin-top:var(--e4); }
.tarjeta__nombre{
  display:block;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--t-h3);
  color:var(--tinta);
}

/* Antes iban a cuatro columnas de doce, tres arriba y dos centradas abajo:
   las piezas salian enormes y la fila coja se notaba. Ahora los cinco
   estilos caben en una sola fila y se leen como un menu. */
@media (min-width:720px){
  .galeria__rejilla{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e7) var(--e5); }
}
@media (min-width:1040px){
  .galeria__rejilla{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}

/* =========================================================
   6 · QUIENES SOMOS Y LAS OPINIONES

   SIN USAR HOY, Y A PROPOSITO. La seccion salio de index.html el 8 de
   septiembre de 2026 para el lanzamiento con conocidos y familia, porque
   todavia no hay reseñas reales. El marcado esta guardado en
   `_fuentes web/guardado/seccion-opiniones.html`: vuelve copiando y pegando
   entre la galeria de estilos y las preguntas, y este CSS lo espera intacto.
   El texto va arriba a la izquierda, debajo la nota con las estrellas y al
   final el muro de comentarios.

   NO BORRAR.
   ========================================================= */

.opiniones__cabeza{ grid-column:1 / -1; }
.opiniones__cabeza .h2{ max-width:15ch; }
.opiniones__prosa{ margin-top:var(--e5); }
.opiniones__prosa p{ margin:0 0 var(--e4); max-width:52ch; }
.opiniones__prosa p:last-child{ margin-bottom:0; }

/* La linea que da paso a las opiniones. Va en serif y un punto mas
   grande que el cuerpo: es la bisagra entre las dos mitades. */
.opiniones__paso{
  margin:var(--e5) 0 0;
  font-family:var(--serif);
  font-size:var(--t-guia);
  line-height:1.45;
  color:var(--tinta);
}

@media (min-width:900px){
  .opiniones__cabeza{ grid-column:1 / span 7; }
}

/* --- la nota, con la cifra grande y las estrellas --- */

.opiniones__nota{
  grid-column:1 / -1;
  margin-top:var(--e9);
  padding-top:var(--e5);
  border-top:1px solid var(--linea);
  display:flex;
  align-items:center;
  gap:var(--e5);
  flex-wrap:wrap;
}
.opiniones__cifra{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(52px,7.5vw,96px);
  line-height:.85;
  color:var(--nogal);
}
.opiniones__estrellas{
  margin:0;
  font-size:22px;
  line-height:1;
  letter-spacing:.16em;
  color:var(--nogal);
}
.opiniones__cuenta{
  margin:var(--e3) 0 0;
  font-size:var(--t-etiqueta);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gris);
}

/* --- el muro de comentarios ---
   Sin cajas: cada opinion es una columna con su filete arriba, igual
   que los puntos de la franja. Asi se lee como pagina, no como
   aplicacion de reseñas. */

.opiniones__muro{
  grid-column:1 / -1;
  margin:var(--e8) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:var(--e7) var(--e5);
}
@media (min-width:640px){ .opiniones__muro{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1040px){ .opiniones__muro{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Columna, para que la firma se pegue abajo: si no, con citas de dos y de
   tres lineas los nombres quedan a distinta altura y la fila se ve chueca. */
.opinion{ display:flex; flex-direction:column; padding-top:var(--e4); border-top:1px solid var(--linea); }
.opinion__estrellas{
  margin:0 0 var(--e3);
  font-size:14px;
  line-height:1;
  letter-spacing:.16em;
  color:var(--nogal);
}
.opinion__texto{
  margin:0 0 var(--e4);
  font-family:var(--serif);
  font-size:var(--t-h3);
  line-height:1.38;
  text-wrap:pretty;
}
.opinion__quien{
  margin:auto 0 0;
  font-size:var(--t-nota);
  line-height:1.45;
  color:var(--tinta);
}
.opinion__quien span{
  display:block;
  color:var(--gris);
  font-size:var(--t-etiqueta);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:var(--e1);
}


/* =========================================================
   8 · PREGUNTAS
   ========================================================= */

.preguntas__cabeza{ grid-column:1 / -1; margin-bottom:var(--e7); }
.preguntas__lista{ grid-column:1 / -1; }
@media (min-width:900px){
  .preguntas__cabeza{ grid-column:1 / span 4; margin-bottom:0; }
  .preguntas__lista{ grid-column:6 / span 7; }
}

.pregunta{ border-top:1px solid var(--linea); }
.pregunta:last-child{ border-bottom:1px solid var(--linea); }
.pregunta summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:var(--e5) var(--e7) var(--e5) 0;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--t-h3);
  line-height:1.3;
  color:var(--tinta);
}
.pregunta summary::-webkit-details-marker{ display:none; }
.pregunta summary::after{
  content:"";
  position:absolute;
  right:var(--e1); top:50%;
  width:12px; height:12px;
  margin-top:-6px;
  background:
    linear-gradient(var(--nogal),var(--nogal)) center/100% 1px no-repeat,
    linear-gradient(var(--nogal),var(--nogal)) center/1px 100% no-repeat;
  transition:transform .4s var(--suave);
}
.pregunta[open] summary::after{ transform:rotate(135deg); }
.pregunta summary:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }
.pregunta p{ margin:0 0 var(--e5); max-width:56ch; color:var(--gris); }


/* =========================================================
   9 · EL CIERRE Y EL PIE
   ========================================================= */

.cierre{ text-align:center; }
.cierre__titulo{
  margin:0 auto var(--e6);
  max-width:13ch;
  font-family:var(--serif);
  font-weight:600;
  font-size:var(--t-h1);
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* El pie va en dos columnas: la marca a la izquierda —logo, redes y la
   linea de siempre— y el contacto a la derecha. Todo alineado a la
   izquierda y apretado: antes iba centrado y se comia media pantalla. */
.pie{
  background:var(--tinta);
  color:var(--hueso);
  padding-block:var(--e8) var(--e6);
}
.pie .reja{ row-gap:var(--e6); align-items:start; }

.pie__marca{ grid-column:1 / -1; }
.pie__nav{ grid-column:1 / -1; }
.pie__contacto{ grid-column:1 / -1; }

/* Tres columnas del mismo peso y con el mismo hueco entre ellas. Antes
   eran dos, marca y contacto, y quedaban en las dos puntas con un vacio
   enorme en la mitad. */
@media (min-width:720px){
  .pie__marca   { grid-column:1 / span 4; }
  .pie__nav     { grid-column:6 / span 3; }
  .pie__contacto{ grid-column:10 / span 3; }
}

.pie__logo{ display:block; width:clamp(132px,13vw,168px); height:auto; margin:0 0 var(--e5); }

.pie__redes{
  display:flex;
  gap:var(--e3);
  margin:0 0 var(--e5);
  padding:0;
  list-style:none;
}
.pie__redes a{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  color:rgba(243,238,229,.62);
  border:1px solid rgba(243,238,229,.20);
  transition:color .3s var(--suave), border-color .3s var(--suave), transform .3s var(--suave);
}
.pie__redes a:hover,
.pie__redes a:focus-visible{
  color:var(--hueso);
  border-color:rgba(243,238,229,.55);
  transform:translateY(-2px);
}
.pie__redes svg{ width:19px; height:19px; }
/* Los dos iconos van de trazo, para que pesen igual entre ellos. Solo el
   puntito de Instagram y el auricular de WhatsApp van macizos. */
.pie__redes svg :not(.pie__punto):not(.pie__lleno){
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linejoin:round;
}
.pie__redes svg .pie__punto,
.pie__redes svg .pie__lleno{ fill:currentColor; }

.pie__linea{
  margin:0;
  font-size:var(--t-etiqueta);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(243,238,229,.45);
}

.pie__nav ul{ margin:0; padding:0; list-style:none; }
.pie__nav li{ margin-bottom:var(--e3); }
.pie__nav li:last-child{ margin-bottom:0; }
.pie__nav a{
  color:rgba(243,238,229,.78);
  text-decoration:none;
  font-size:15px;
  line-height:1.5;
  transition:color .3s var(--suave);
}
.pie__nav a:hover,
.pie__nav a:focus-visible{ color:var(--hueso); }

.pie__rotulo{
  margin:0 0 var(--e4);
  font-size:var(--t-etiqueta);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(243,238,229,.55);
}
.pie__dato{ margin:0 0 var(--e2); font-size:15px; line-height:1.6; }
.pie__dato:last-child{ margin-bottom:0; }
.pie__dato a{
  color:var(--hueso);
  text-decoration:none;
  border-bottom:1px solid rgba(243,238,229,.30);
  transition:border-color .3s var(--suave);
}
.pie__dato a:hover{ border-bottom-color:var(--hueso); }


/* =========================================================
   EL PANEL
   Pantalla partida: controles a un lado, la pared al otro,
   quieta mientras bajas.
   ========================================================= */

/* El panel es la seccion que mas informacion tiene: se le da mas ancho
   que al resto para que no quede todo apretado con los lados vacios. */
.panel .reja{ row-gap:0; }
.panel__marco{ align-items:start; }
.panel__controles{ min-width:0; }
.panel__vista{ min-width:0; }

.panel__titulo{ margin:0 0 var(--e4); max-width:16ch; }

/* El recordatorio de que la pared es una simulacion. Va pegado al precio,
   que es donde alguien podria creer que ese es el cuadro terminado. */
.panel__aviso{
  margin:0 0 var(--e6);
  max-width:44ch;
  font-size:13px;
  line-height:1.5;
  color:var(--gris);
}

/* En celular el lado derecho no existe como bloque: la pared se pega
   arriba y el resumen se va al final. */
.panel__lado{ display:contents; }

@media (min-width:900px){
  .panel__marco{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    gap:clamp(36px,4vw,72px);
  }
  .panel__controles{ order:1; }
  /* La pared y el resumen se quedan quietos mientras bajas por los
     controles. Pueden hacerlo porque su casilla de la reja mide lo que
     mide la columna larga: por eso el marco va con align-items:start. */
  .panel__lado{
    display:block;
    order:2;
    position:sticky;
    top:calc(var(--barra) + var(--e5));
  }
}
@media (max-width:899px){
  /* En celular la pared se pega arriba y los controles pasan por debajo.
     El fondo es arena, el del marco, para que nada se transparente. */
  .panel__vista{
    position:sticky;
    /* Se ancla al borde y se reserva ella misma el alto de la barra. Si se
       anclara debajo de la barra, al esconderse la barra quedaria un hueco
       por donde se veria pasar el contenido. */
    top:0;
    z-index:5;
    order:-1;
    padding-block:calc(var(--barra) + var(--e3)) var(--e3);
    /* Ese relleno de arriba son 84 px de vacio dentro del marco cuando la
       vista todavia no se ha pegado. Donde se pueda, se cambia por una
       cortina que vive FUERA del bloque (ver el @supports de abajo). */
    /* Se estira hasta los bordes del marco: si se queda dentro del aire,
       al subir asoma el filo del marco por esas dos franjas de los lados. */
    margin-inline:calc(var(--marco-aire) * -1);
    padding-inline:var(--marco-aire);
    border-radius:var(--marco-radio) var(--marco-radio) 0 0;
    background:var(--arena);
    box-shadow:0 12px 16px -14px rgba(51,41,30,.4);
  }
  .panel__cierre{ order:1; }
  .pared{ height:34svh; }


  /* La cortina: un pedazo de arena colgado por encima de la vista, que tapa
     lo que pasa por detras cuando el bloque esta pegado arriba. Asi el
     relleno de arriba baja de 84 px a 16 y la foto sube.

     Va con overflow:clip y no hidden a proposito: hidden convertiria al
     marco en contenedor de scroll y le rompe el sticky al hijo. Y va dentro
     de @supports porque en un navegador sin clip la cortina se saldria del
     marco y se veria un bloque de arena sobre el fondo hueso. */
  @supports (overflow:clip){
    .panel__marco{ overflow:clip; }
    .panel__vista{ padding-block:var(--e4) var(--e3); }
    .panel__vista::before{
      content:"";
      position:absolute;
      left:0; right:0; bottom:100%;
      /* Solo el menu flota ya: el anuncio se va con el scroll. */
      height:calc(var(--barra) + var(--e5));
      background:var(--arena);
    }
  }
}

/* La pared es un boton: se toca y el cuadro se abre en grande. Pasar el
   puntero por encima no hace nada mas que cambiar el cursor. */
.pared{
  appearance:none;
  border:0;
  padding:0;
  width:100%;
  display:block;
  cursor:zoom-in;
  position:relative;
  overflow:hidden;
  background:var(--hueso);
  box-shadow:0 1px 3px rgba(51,41,30,.14), 0 18px 34px -22px rgba(51,41,30,.45);
}
.pared__foto{ width:100%; height:100%; object-fit:cover; }

/* El hueco de pared donde se cuelga: por encima de la repisa y con
   margen a los lados. El grupo se centra dentro. */
.pared__grupo{
  position:absolute;
  inset:7% 8% 32%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.pared__fila{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pieza-caja{ position:relative; flex:0 0 auto; }

/* El aro senala cual estas editando. Solo aparece si hay mas de uno. */
.pieza-caja::after{
  content:"";
  position:absolute;
  inset:-9px;
  border:1.5px solid transparent;
  border-radius:3px;
  pointer-events:none;
  transition:border-color .4s var(--suave);
}
.pieza-caja--activa::after{ border-color:rgba(119,48,58,.8); }

/* La medida cuelga debajo sin empujar nada. */
.pieza-caja__medida{
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  margin-top:11px;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(51,41,30,.5);
  transition:color .4s var(--suave);
}
.pieza-caja--activa .pieza-caja__medida{ color:var(--vino); }

/* EN CELULAR LA MEDIDA NO CABE, Y SE QUITA.

   La pared son 220 cm de pared metidos en unos 240 px: algo mas de 1 px por
   centimetro. Un cuadro de 13x18 sale de unos 20 px de ancho y el texto
   "13 x 18" mide 42 — la etiqueta es el doble de ancha que el cuadro que
   describe, se sale por los dos lados y aterriza encima del vecino. En
   pantalla ancha el cuadro es el doble de grande y el aire se lo traga.

   No se pierde nada: la medida del cuadro que estas editando esta escrita
   justo debajo de la pared, y todas estan en el resumen del pedido.

   Va aqui abajo y no en el bloque de celular de mas arriba porque
   .pared__grupo se declara despues y, a igual peso, gana la ultima. */
@media (max-width:899px){
  .pieza-caja__medida{ display:none; }
  :root{ --hueco-fila:14px; }
  /* Sin las etiquetas, la pared puede aprovechar mas ancho y mas alto. */
  .pared__grupo{ inset:6% 5% 30%; }
}

.pieza{
  /* hace falta para que los cuatro listones se anclen al cuadro
     y no a lo primero que encuentren arriba */
  position:relative;
  box-sizing:border-box;
  transition:width .5s var(--suave), height .5s var(--suave),
             padding .5s var(--suave), box-shadow .35s ease;
}
/* Una moldura de verdad esta hecha de cuatro listones cortados a inglete, y
   cada lado recibe la luz distinto. El conic-gradient da justo eso: cuatro
   trapecios que se encuentran en diagonal en las esquinas. La luz viene de
   arriba a la izquierda. Antes habia unas rayas horizontales cada 6 px que
   a este tamano se veian como un moire, no como madera. */
/* LA MOLDURA — cuatro listones cortados a inglete.
   La veta sale de la foto real de los esquineros: se le quito el tono base
   y quedo solo el relieve, que se mezcla encima del color de cada acabado.
   Por eso una sola textura sirve para los cuatro. Los listones de arriba y
   abajo llevan la veta acostada; los de los lados, la misma girada. */
.moldura{ position:absolute; inset:0; pointer-events:none; }
.moldura i{
  position:absolute;
  background-color:var(--fin-base);
  background-image:url("imagenes/veta-h.webp");
  background-size:auto 100%;
  background-repeat:repeat-x;
  background-blend-mode:overlay;
}
/* En los pintados la veta apenas se intuye bajo la pintura, como en la foto. */
.pieza[data-formato="marco"]{ --veta:.34; }
.moldura i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--fin-base);
  opacity:calc(1 - var(--veta));
}

/* Cada liston se corta en diagonal en sus dos puntas: eso es el inglete. */
.moldura i:nth-child(1){            /* arriba */
  left:0; right:0; top:0; height:var(--m,0px);
  clip-path:polygon(0 0, 100% 0, calc(100% - var(--m,0px)) 100%, var(--m,0px) 100%);
}
.moldura i:nth-child(2){            /* derecha */
  top:0; bottom:0; right:0; width:var(--m,0px);
  background-image:url("imagenes/veta-v.webp");
  background-size:100% auto;
  background-repeat:repeat-y;
  clip-path:polygon(0 var(--m,0px), 100% 0, 100% 100%, 0 calc(100% - var(--m,0px)));
}
.moldura i:nth-child(3){            /* abajo */
  left:0; right:0; bottom:0; height:var(--m,0px);
  clip-path:polygon(var(--m,0px) 0, calc(100% - var(--m,0px)) 0, 100% 100%, 0 100%);
}
.moldura i:nth-child(4){            /* izquierda */
  top:0; bottom:0; left:0; width:var(--m,0px);
  background-image:url("imagenes/veta-v.webp");
  background-size:100% auto;
  background-repeat:repeat-y;
  clip-path:polygon(0 0, 100% var(--m,0px), 100% calc(100% - var(--m,0px)), 0 100%);
}

/* La luz entra por arriba a la izquierda: cada liston la recibe distinto. */
.moldura i:nth-child(1){ box-shadow:inset 0 0 0 99px rgba(255,255,255,.10); }
.moldura i:nth-child(2){ box-shadow:inset 0 0 0 99px rgba(0,0,0,.10); }
.moldura i:nth-child(3){ box-shadow:inset 0 0 0 99px rgba(0,0,0,.16); }
.moldura i:nth-child(4){ box-shadow:inset 0 0 0 99px rgba(255,255,255,.04); }

.pieza[data-formato="marco"]{
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.26),
    0 1px 3px rgba(51,41,30,.20),
    0 20px 38px -18px rgba(51,41,30,.50);
}
/* El rebaje: la obra queda hundida y el canto interior le da sombra. */
.pieza[data-formato="marco"] .pieza__obra{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.26),
    inset 0 2px 7px rgba(0,0,0,.24),
    inset 0 -1px 0 rgba(255,255,255,.10);
}
.pieza[data-formato="retablo"] .moldura{ display:none; }
.pieza[data-formato="retablo"]{ box-shadow:0 2px 4px rgba(51,41,30,.20), 0 26px 44px -18px rgba(51,41,30,.55); }
.pieza__canto{
  display:none;
  position:absolute; top:3px; right:-4px; bottom:-4px; width:4px;
  background:linear-gradient(90deg,#3A342E 0%,#2A2522 60%,#191614 100%);
}
.pieza[data-formato="retablo"] .pieza__canto{ display:block; }
.pieza__obra{
  position:relative;
  z-index:1; width:100%; height:100%;
  overflow:hidden; background:var(--arena);
  display:grid; place-items:center;
}
.pieza__obra img{ width:100%; height:100%; object-fit:cover; object-position:50% 16%; }
.pieza__nombre{
  position:absolute; left:6%; right:6%; bottom:6%;
  text-align:center; font-family:var(--serif);
  letter-spacing:.18em; line-height:1;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55);
  pointer-events:none;
}

.panel__cifra{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--e4); margin-top:var(--e4); padding-top:var(--e3);
  border-top:1px solid rgba(51,41,30,.13);
}
.panel__medida{ margin:0; font-size:12.5px; letter-spacing:.05em; color:var(--gris); }
.panel__valor{ margin:0; font-size:clamp(21px,2.2vw,27px); font-variant-numeric:tabular-nums; white-space:nowrap; }

.campo{ margin-top:var(--e5); }
.campo[hidden]{ display:none; }
.campo__nombre{
  margin:0 0 var(--e3); font-family:var(--sans); font-weight:500;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:#6B5334;   /* el nogal, bajado de tono para que se lea */
}
.campo__nombre em{ font-style:normal; text-transform:none; letter-spacing:.02em; color:var(--gris); }
.campo__nota{ margin:var(--e3) 0 0; font-size:var(--t-nota); color:var(--gris); }

.opciones{ display:flex; flex-wrap:wrap; gap:var(--e2); }
.opcion{
  cursor:pointer; font-family:var(--sans); font-weight:400; font-size:14px; line-height:1;
  color:var(--tinta); background:none; border:1px solid rgba(51,41,30,.20);
  border-radius:999px; padding:11px var(--e5);
  transition:border-color .25s var(--suave), background .25s var(--suave), color .25s var(--suave);
}
.opcion:hover{ border-color:var(--tinta); }
.opcion:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.opcion--activa{ background:var(--tinta); border-color:var(--tinta); color:var(--hueso); }
.opcion--num{ min-width:46px; padding-inline:0; text-align:center; }
.opcion--corta{ padding-inline:var(--e4); }
.opcion--muestra{ display:inline-flex; align-items:center; gap:var(--e2); }
.opcion__color{ width:14px; height:14px; border-radius:50%; background:var(--muestra); box-shadow:inset 0 0 0 1px rgba(0,0,0,.22); }

.miniaturas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:var(--e2); }
.mini{ cursor:pointer; background:none; border:0; padding:0; text-align:left; }
.mini img{
  display:block; width:100%; aspect-ratio:3 / 4; object-fit:cover; border-radius:2px;
  box-shadow:0 0 0 1px var(--linea);
  transition:box-shadow .25s var(--suave), transform .3s var(--suave);
}
.mini:hover img{ transform:translateY(-3px); }
.mini--activa img{ box-shadow:0 0 0 2px var(--tinta); }
.mini__n{ display:block; margin-top:var(--e1); font-size:12px; line-height:1.3; color:var(--gris); }
.mini--activa .mini__n{ color:var(--tinta); }
.mini:focus-visible img{ outline:2px solid var(--tinta); outline-offset:2px; }

.pestanas{ display:flex; gap:2px; flex-wrap:wrap; margin-top:var(--e6); border-bottom:1px solid rgba(51,41,30,.15); }
.pestanas[hidden]{ display:none; }
.pestana{
  cursor:pointer; background:none; border:0; border-bottom:2px solid transparent;
  margin-bottom:-1px; padding:var(--e3) var(--e3);
  font-family:var(--sans); font-size:13.5px; color:var(--gris);
  transition:color .25s, border-color .25s;
}
.pestana:hover{ color:var(--tinta); }
.pestana--activa{ color:var(--tinta); border-bottom-color:var(--vino); }

.copiar{
  margin-top:var(--e4); cursor:pointer; background:none;
  border:1px solid rgba(51,41,30,.20); border-radius:999px;
  padding:9px var(--e4); font-family:var(--sans); font-size:13px; color:var(--gris);
  transition:border-color .25s, color .25s;
}
.copiar:hover{ border-color:var(--tinta); color:var(--tinta); }
.copiar[hidden]{ display:none; }

.linea{ display:flex; align-items:center; justify-content:space-between; gap:var(--e4); flex-wrap:wrap; padding:var(--e2) 0; font-size:14.5px; }
.linea input[type="text"]{
  flex:1 1 160px; min-width:0; font-family:var(--sans); font-size:15px; color:var(--tinta);
  background:none; border:0; border-bottom:1px solid rgba(51,41,30,.25); padding:6px 2px;
  transition:border-color .25s;
}
.linea input[type="text"]:focus{ outline:none; border-bottom-color:var(--tinta); }
/* El nombre de quien pide: va suelto, a lo ancho del campo, no en una
   linea con etiqueta al lado como el nombre de la mascota. */
.campo__linea{
  display:block; width:100%; margin-top:var(--e3);
  font-family:var(--sans); font-size:15px; color:var(--tinta);
  background:none; border:0; border-bottom:1px solid rgba(51,41,30,.25);
  padding:7px 2px; transition:border-color .25s var(--suave);
}
.campo__linea::placeholder{ color:var(--gris); }
.campo__linea:focus{ outline:none; border-bottom-color:var(--tinta); }

.marca{ display:flex; align-items:center; gap:var(--e3); padding:var(--e1) 0; font-size:14.5px; cursor:pointer; }
.marca input{ accent-color:var(--vino); width:16px; height:16px; }


.resumen{ margin-top:var(--e6); padding-top:var(--e5); border-top:1px solid rgba(51,41,30,.13); }
.resumen__lista{ list-style:none; margin:0 0 var(--e4); padding:0; }
.resumen__lista li{
  display:flex; justify-content:space-between; gap:var(--e4);
  padding:var(--e2) 0; font-size:13.5px; line-height:1.4; color:var(--gris);
  border-bottom:1px solid var(--linea-suave);
}
.resumen__lista b{ font-weight:400; color:var(--tinta); font-variant-numeric:tabular-nums; white-space:nowrap; }
.resumen__cuentas p{ display:flex; justify-content:space-between; gap:var(--e4); margin:0 0 var(--e2); font-size:14px; color:var(--gris); }
.resumen__cuentas b{ font-weight:400; font-variant-numeric:tabular-nums; }
.resumen__desc b{ color:var(--nogal); }
.resumen__total{
  margin-top:var(--e3) !important; padding-top:var(--e3);
  border-top:1px solid var(--linea); color:var(--tinta) !important; align-items:baseline;
}
.resumen__total b{ font-family:var(--serif); font-size:24px; }
.resumen__gratis,.resumen__falta{ display:block !important; margin-top:var(--e3) !important; font-size:var(--t-nota); }
.resumen__gratis{ color:var(--nogal); }
.resumen__nota{ margin:var(--e3) 0 0; font-size:var(--t-nota); line-height:1.5; color:var(--gris); text-align:center; }


/* =========================================================
   EL MOVIMIENTO
   Cuatro efectos y ni uno mas, con uno solo de protagonista
   (el deslizador de antes y despues). Todo lo de aqui es CSS;
   el guion solo pone y quita una clase.
   ========================================================= */

/* --- la portada se enciende --- */
@keyframes entra-foto{
  from{ transform:scale(1.065); filter:brightness(.84) saturate(.93); }
  to  { transform:scale(1);     filter:brightness(1)   saturate(1);   }
}
@keyframes entra-luz{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sube{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes parallax{ to{ transform:translateY(3%); } }

/* --- las palabras del titular suben una por una --- */
/* El padding deja sitio a las colas de la p y la g; el margen negativo
   se lo devuelve a la linea para que el interlineado no cambie. */
.palabra{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  padding-bottom:.26em;
  margin-bottom:-.26em;
}
.palabra > i{
  display:inline-block;
  font-style:inherit;
  transform:translateY(105%);
  transition:transform .85s var(--entra);
}
.visto .palabra > i{ transform:none; }
.palabra:nth-child(1) > i{ transition-delay:.00s; }
.palabra:nth-child(2) > i{ transition-delay:.05s; }
.palabra:nth-child(3) > i{ transition-delay:.10s; }
.palabra:nth-child(4) > i{ transition-delay:.15s; }
.palabra:nth-child(5) > i{ transition-delay:.20s; }
.palabra:nth-child(6) > i{ transition-delay:.25s; }
.palabra:nth-child(7) > i{ transition-delay:.30s; }
.palabra:nth-child(n+8) > i{ transition-delay:.35s; }

/* --- los bloques entran al llegar --- */
.revelar{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--entra), transform .8s var(--entra);
}
.revelar.visto{ opacity:1; transform:none; }
.revelar--2{ transition-delay:.09s; }
.revelar--3{ transition-delay:.18s; }
.revelar--4{ transition-delay:.27s; }

/* --- las tarjetas de estilo se inclinan con el puntero --- */
@media (hover:hover) and (pointer:fine){
  .tarjeta__vista{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));
  }
}

@media (prefers-reduced-motion:no-preference){
  .hero__foto img{ animation:entra-foto 1.5s var(--suave) both; }
  .hero__luz{ animation:entra-luz 1.6s .55s ease-out both; }
  .hero__sub   { animation:sube .95s .22s var(--suave) both; }
  .hero__accion{ animation:sube .95s .36s var(--suave) both; }

  @supports (animation-timeline:scroll()){
    .hero__foto{
      animation:parallax linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100svh;
    }
  }
}

/* Windows trae el movimiento reducido activado de fabrica en muchos equipos:
   aqui solo se apaga lo intrusivo, no los estados de la interfaz. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .revelar{ opacity:1; transform:none; transition:none; }
  .palabra > i{ transform:none; transition:none; }
  .hero__foto img,.hero__luz,
  .hero__sub,.hero__accion{ animation:none; }
  /* Sin movimiento el chiste del final no aplica: se recoge de una. */
  .fondo--recoge{ animation:none; height:0; opacity:0; overflow:hidden; }
  .telon{ transition:none; }
  .menu{ transition:none; }
  .anuncio{ transition:none; }
  .menu.guardada{ transform:none; opacity:1; pointer-events:auto; }
}


/* remates */
.ba__mando{ pointer-events:none; }
.h2 .palabra{ line-height:1.06; }


/* =========================================================
   EL VISOR — tres ejemplos del estilo, a pantalla completa
   ========================================================= */

.visor{
  position:fixed;
  inset:0;
  /* por encima del menu (100) y del telon (95): con el visor abierto
     no debe asomar nada de la pagina */
  z-index:120;
  display:grid;
  grid-template-rows:1fr auto;
  padding:calc(var(--barra) + var(--e4)) var(--e4) var(--e5);
  background:rgba(28,22,16,.94);
  opacity:0;
  transition:opacity .4s var(--suave);
}
.visor[hidden]{ display:none; }
.visor.abierto{ opacity:1; }

.visor__caja{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:var(--e3);
  min-height:0;
}
.visor__pieza{
  margin:0;
  height:100%;
  display:grid;
  place-items:center;
  min-height:0;
}
.visor__pieza img{
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);
  opacity:0;
  transform:scale(.985);
  transition:opacity .45s var(--suave), transform .45s var(--suave);
}
.visor__pieza img.puesta{ opacity:1; transform:none; }

.visor__flecha,
.visor__cerrar{
  appearance:none;
  border:1px solid rgba(243,238,229,.28);
  background:none;
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:border-color .3s var(--suave), background-color .3s var(--suave);
}
.visor__flecha:hover,
.visor__cerrar:hover{ border-color:var(--hueso); background:rgba(243,238,229,.1); }
.visor__flecha:focus-visible,
.visor__cerrar:focus-visible{ outline:2px solid var(--hueso); outline-offset:3px; }

.visor__flecha{ width:46px; height:46px; }
.visor__flecha span{
  width:9px; height:9px;
  border-left:1.5px solid var(--hueso);
  border-bottom:1.5px solid var(--hueso);
}
/* Los estilos que traen un solo ejemplo no tienen para donde moverse. Se
   apagan las flechas pero se les deja el puesto: la caja es una reja de tres
   columnas y si desaparecen, la imagen se va contra el borde izquierdo. */
.visor__flecha[hidden]{ visibility:hidden; }
.visor__flecha--atras span{ transform:rotate(45deg) translate(1px,-1px); }
.visor__flecha--siguiente span{ transform:rotate(-135deg) translate(1px,-1px); }

.visor__cerrar{
  position:absolute;
  top:var(--e5); right:var(--e4);
  width:42px; height:42px;
  z-index:2;
}
.visor__cerrar span{
  position:absolute;
  width:15px; height:1.5px;
  background:var(--hueso);
}
.visor__cerrar span:first-child{ transform:rotate(45deg); }
.visor__cerrar span:last-child{ transform:rotate(-45deg); }

.visor__pie{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--e4);
  margin-top:var(--e4);
  padding-top:var(--e3);
  border-top:1px solid rgba(243,238,229,.16);
}
.visor__nombre{
  margin:0;
  font-family:var(--serif);
  font-size:var(--t-h3);
  color:var(--hueso);
}
.visor__cuenta{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-etiqueta);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(243,238,229,.55);
}

/* Con el visor abierto la pagina de atras no se mueve. */
body.quieta{ overflow:hidden; }

@media (max-width:759px){
  .visor{ padding:calc(var(--barra) + var(--e3)) var(--e3) var(--e4); }
  .visor__caja{ grid-template-columns:1fr; }
  .visor__flecha{
    position:absolute;
    bottom:calc(var(--e10) - var(--e3));
    z-index:2;
    background:rgba(28,22,16,.72);
  }
  .visor__flecha--atras{ left:var(--e3); }
  .visor__flecha--siguiente{ right:var(--e3); }
}

/* ---------- ver de cerca ---------- */

.resumen__cabecera{
  margin:0 0 var(--e4);
  padding-bottom:var(--e3);
  border-bottom:1px solid rgba(51,41,30,.13);
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--gris);
}

/* ---------- LA LUPA — el cuadro en grande ---------- */
.lupa{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:calc(var(--barra) + var(--e5)) var(--e5) var(--e6);
  background:rgba(28,22,16,.93);
  opacity:0;
  transition:opacity .35s var(--suave);
}
.lupa[hidden]{ display:none; }
.lupa.abierta{ opacity:1; }

.lupa__caja{
  display:grid;
  place-items:center;
  min-height:0;
  opacity:0;
  transform:scale(.97);
  transition:opacity .4s var(--suave), transform .4s var(--suave);
}
.lupa.abierta .lupa__caja{ opacity:1; transform:none; }

.lupa__pie{
  margin:var(--e5) 0 0;
  font-family:var(--sans);
  font-size:var(--t-etiqueta);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(243,238,229,.7);
  text-align:center;
}

/* La pista de que la pared se puede tocar: aparece al acercarse. */
.pared__lupa{
  position:absolute;
  right:var(--e4); bottom:var(--e4);
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(28,22,16,.5);
  backdrop-filter:blur(3px);
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.9);
  transition:opacity .3s var(--suave), transform .3s var(--suave);
  pointer-events:none;
}
.pared__lupa::before{
  content:"";
  width:13px; height:13px;
  border:1.5px solid var(--hueso);
  border-radius:50%;
  box-shadow:6px 6px 0 -5px var(--hueso);
  transform:translate(-2px,-2px);
}
.pared:hover .pared__lupa,
.pared:focus-visible .pared__lupa{ opacity:1; transform:none; }
.pared:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }


/* =========================================================
   EL CUADRO DE OBSERVACIONES
   Va suelto al final de los controles, no dentro de la ficha:
   el pedido es un solo diseno y esto se escribe una sola vez.
   ========================================================= */

.campo--notas textarea{
  display:block;
  width:100%;
  margin-top:var(--e3);
  padding:var(--e4);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--tinta);
  background:rgba(255,255,255,.5);
  border:1px solid rgba(51,41,30,.20);
  border-radius:var(--e3);
  resize:vertical;
  min-height:104px;
  transition:border-color .25s var(--suave), background .25s var(--suave);
}
.campo--notas textarea::placeholder{ color:var(--gris); opacity:.85; }
.campo--notas textarea:hover{ border-color:rgba(51,41,30,.34); }
.campo--notas textarea:focus{
  outline:none;
  border-color:var(--tinta);
  background:rgba(255,255,255,.78);
}


/* =========================================================
   EL BOTON DE WHATSAPP
   Fijo abajo a la derecha. Va por debajo del menu y del visor:
   si hay algo abierto encima, este no estorba.
   ========================================================= */

.wasa{
  position:fixed;
  right:var(--e5);
  bottom:var(--e5);
  z-index:90;
  display:flex;
  align-items:center;
  gap:var(--e3);
  text-decoration:none;
  color:var(--tinta);
}
/* Sin fondo ni border-radius: la forma la pone el SVG, que es la burbuja
   de WhatsApp con su colita. Por eso la sombra va con drop-shadow, que
   sigue el contorno del dibujo y no la caja. */
.wasa__globo{
  display:block;
  width:60px;
  height:60px;
  /* En reposo va bajito, para que acompañe y no grite. El color entero
     solo aparece cuando el puntero se le acerca. */
  opacity:.5;
  filter:drop-shadow(0 3px 6px rgba(51,41,30,.14)) drop-shadow(0 14px 24px rgba(51,41,30,.18));
  transition:transform .45s var(--suave), filter .45s var(--suave), opacity .45s var(--suave);
}
.wasa__globo svg{ display:block; width:100%; height:100%; }
/* La burbuja se pinta del mismo color del boton: lo que se ve es el peludo
   recortado dentro del circulo, no un dibujo pegado encima. */
.wasa__burbuja{ fill:var(--vino); }
.wasa__perro{ fill:var(--hueso); }
.wasa__cara{ fill:var(--vino); }

.wasa:hover .wasa__globo,
.wasa:focus-visible .wasa__globo,
.wasa:active .wasa__globo{
  opacity:1;
  transform:translateY(-3px) rotate(-6deg);
  filter:drop-shadow(0 5px 9px rgba(51,41,30,.26)) drop-shadow(0 20px 32px rgba(51,41,30,.34));
}
/* En celular tampoco va encendido: se prende al tocarlo, con :active. */
.wasa:focus-visible .wasa__globo{ outline:2px solid var(--tinta); outline-offset:4px; }

/* El rotulo sale al pasar el puntero. En celular no hay puntero: no sale. */
.wasa__rotulo{
  order:-1;
  padding:9px var(--e4);
  border-radius:999px;
  background:var(--hueso);
  box-shadow:0 2px 6px rgba(51,41,30,.14), 0 12px 24px -14px rgba(51,41,30,.5);
  font-size:13px;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  transform:translateX(8px);
  pointer-events:none;
  transition:opacity .35s var(--suave), transform .35s var(--suave);
}
@media (hover:hover){
  .wasa:hover .wasa__rotulo,
  .wasa:focus-visible .wasa__rotulo{ opacity:1; transform:none; }
}
@media (hover:none){ .wasa__rotulo{ display:none; } }
@media (max-width:560px){
  .wasa{ right:var(--e4); bottom:var(--e4); }
  .wasa__globo{ width:54px; height:54px; }
}


/* =========================================================
   EL FONDO DEL FONDO
   El premio del que sigue bajando despues del pie. Mucho aire
   arriba y abajo: la gracia es que aparezca solo, en el vacio.
   ========================================================= */

/* Va SIEMPRE abierto, esperando debajo del pie. Lo que hace la gracia es
   lo contrario de lo que parece: cuando tocas el fondo de la pagina se
   RECOGE, la pagina se acorta y la vista se devuelve sola hacia arriba.
   Es el mismo truco de mattelsa.net: te deja verlo un segundo y te echa.
   Al alejarte del borde se vuelve a armar, listo para la proxima. */
.fondo{
  --alto:50vh;
  height:var(--alto);
  background:var(--hueso);
  display:grid;
  place-content:center;
  padding-inline:var(--margen);
  text-align:center;
  overflow:visible;
}
@supports (height:50dvh){ .fondo{ --alto:50dvh; } }

.fondo--recoge{
  overflow:hidden;
  animation:fondo-recoge .7s ease-out forwards;
}
@keyframes fondo-recoge{
  from{ height:var(--alto); opacity:1; }
  to  { height:0;           opacity:0; }
}
.fondo__caja{ max-width:42ch; }
.fondo__dibujo{ margin:0; }
.fondo__dibujo img{ margin-inline:auto; width:min(460px,80vw); height:auto; }
.fondo__dibujo:empty{ display:none; }
.fondo__frase{
  margin:var(--e5) 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:var(--t-guia);
  line-height:1.4;
  color:var(--gris);
}