/* =========================================================================
   RELIEVE TEXTIL · web anexa

   TRES BLOQUES Y NADA MAS: portada con el visor, vitrina de cuadernillos y
   pie de contacto.

   POR QUE NO HAY FOTOS DE CUADROS NI TEXTO EXPLICATIVO. Esta web no cuenta la
   tecnica: la cuenta el manual, que tiene 130 paginas. Aca se entra, se ve el
   producto funcionando y se compra. Cada foto de obra suelta y cada parrafo de
   teoria que habia antes competia con el catalogo y alargaba la pagina sin
   acercar a nadie a la compra.

   LA TIPOGRAFIA CAMBIO. Antes eran dos serif de libro -Shippori y Source
   Serif- que daban aire de manual antiguo. Ahora Playfair Display solo para
   los titulos, en italica, y Plus Jakarta Sans para todo lo demas: liviana,
   aireada y sin remates.
   ========================================================================= */

:root{
  --lino:#FAF8F5;
  --lino-2:#F4EFEA;
  --lino-3:#EBE4DC;
  --blanco:#FFFDFB;

  --tinta:#1E1D1F;
  --tinta-2:#57545A;
  --tinta-3:#8A858E;

  --oro:#C9A96E;
  --oro-hondo:#9C7C3E;

  --ancho:1140px;
  --titulo:"Playfair Display", Georgia, serif;
  --cuerpo:"Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* el bastidor: acolchado en cuatro capas */
  --bastidor:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(30,29,31,.045),
    0 15px 35px rgba(0,0,0,.05),
    0 3px 10px rgba(0,0,0,.03);
  --bastidor-alto:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 0 0 1px rgba(30,29,31,.06),
    0 28px 55px rgba(0,0,0,.09),
    0 6px 16px rgba(0,0,0,.04);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;color:var(--tinta-2);font-family:var(--cuerpo);
  font-size:16px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-color:var(--lino);
  /* LA TEXTURA DEL LINO, SIN CUADRICULA.
     Antes eran dos tramas de hilos cruzados hechas con gradientes repetidos,
     y a la vista daban una hoja milimetrada: rectas, regulares y perfectas,
     que es justo lo contrario de una tela. Ahora la textura es ruido fractal
     -irregular, como la fibra- y las lineas son curvas, no una grilla. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0 0.12 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, var(--lino) 0%, var(--lino-2) 100%);
  background-attachment:fixed;
}

/* EL MOSAICO DEL LIBRO, DETRAS DE TODA LA PAGINA.
   Es el mismo dibujo que se ve atras de las hojas del libro interactivo:
   retazos abombados con su costura, en dorado, verde, lila y crudo. Pasa a
   la web para que las dos cosas se reconozcan como una sola marca, y porque
   la pagina en lino plano no contaba nada de lo que se vende.

   ANTES ACA VIVIAN LAS RANURAS -curvas largas hechas con dos trazos, el
   oscuro arriba y el claro debajo-. No sobreviven a esto: sobre los retazos
   se pierden y lo unico que aportan es ruido. El mosaico dice lo mismo y lo
   dice mejor.

   EL VELO NO ES OPCIONAL. El mosaico del libro esta pensado para verse detras
   de hojas blancas opacas; ahi puede ser fuerte porque nadie lee sobre el. En
   la web hay texto apoyado directamente encima -el titulo, la bajada, los
   rotulos de fila-, y sobre un retazo dorado a pleno no se lee. El velo de
   lino lo baja hasta donde el texto se sostiene y el color igual se ve.
   Se regula con --velo: en 0 queda el mosaico crudo y en 1, lino liso.

   VAN EN LA MISMA CAPA, no en dos elementos: la primera imagen de la lista
   es la de mas arriba, asi que el velo tapa al mosaico sin necesidad de otro
   pseudoelemento. */
:root{ --velo:.38 }
/* EN EL TELEFONO EL VELO AFLOJA. El mosaico se dibuja con background-size
   cover, asi que en una pantalla angosta y alta entra escalado al triple y
   se ve un pedazo de UN retazo, no el mosaico. Con el mismo velo que en la
   computadora eso queda en un degrade gris y la pagina pierde justo lo que
   este fondo vino a darle. Aflojando el velo, ese pedazo vuelve a tener
   color. El texto del telefono aguanta porque ahi los bloques son angostos
   y el cuerpo es mas grande. */
@media (max-width:700px){
  :root{ --velo:.24 }
  /* Y SE CORRE EL ENCUADRE. Con cover, en una pantalla angosta y alta la
     escala la manda el alto: se ve el mosaico entero de arriba a abajo pero
     solo una franja de 460 px de ancho de los 1600 que mide. Centrada, esa
     franja cae sobre los retazos crudos, que son los mas palidos del dibujo,
     y la pagina queda gris.
     El 62% no es a ojo: se midio la saturacion del mosaico por celdas y la
     banda con color -lila, verde y dorado seguidos- esta entre el 50 y el
     75% del ancho. */
  body::before{background-position:center,62% center}
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgb(250 248 245 / var(--velo)), rgb(250 248 245 / var(--velo))),
    url("../assets/fondo/mosaico.svg");
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center,center;
}

/* EL HALO QUE SIGUE AL CURSOR. Va en su propia capa fija y translucida: el
   guion solo escribe dos variables, --mx y --my, y el navegador repinta un
   gradiente sin tocar el arbol. Arranca centrado arriba, asi tambien se ve
   antes de que nadie mueva el mouse y en telefonos, donde no hay cursor. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(620px 620px at var(--mx,80%) var(--my,4%),
    rgba(201,169,110,.05), transparent 68%);
  transition:background-position .2s ease-out;
}
body > *{position:relative;z-index:1}

img{max-width:100%;height:auto;display:block}
a{color:var(--oro-hondo)}
h1,h2{font-family:var(--titulo);color:var(--tinta);margin:0;font-weight:600;
  line-height:1.1;letter-spacing:-.015em}
h3{font-family:var(--cuerpo);color:var(--tinta);margin:0;font-weight:600;
  font-size:1.02rem}
p{margin:0 0 1em}
.env{max-width:var(--ancho);margin:0 auto;padding:0 22px}

/* --- entradas al desplazar ------------------------------------------------ */
.aparece{opacity:0;transform:translateY(30px);
  transition:opacity .75s cubic-bezier(.16,.8,.3,1),
             transform .75s cubic-bezier(.16,.8,.3,1)}
.aparece.visible{opacity:1;transform:none}
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparece,.cuad.aparece{opacity:1;transform:none;filter:none;transition:none}
  .combo.visible::after{animation:none}
  .aparato{transform:none}
}

/* --- botones -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--cuerpo);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  padding:16px 30px;border-radius:999px;border:0;text-align:center;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-oro{
  background:linear-gradient(180deg,#D6B87F,#BE9A58);color:#2A2116;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 12px 24px -10px rgba(156,124,62,.6);
}
.btn-oro:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 18px 32px -10px rgba(156,124,62,.7)}
.btn-oro:active{transform:translateY(1px)}
.btn-tinta{background:var(--tinta);color:#FBF8F4;
  box-shadow:0 12px 24px -12px rgba(30,29,31,.7)}
.btn-tinta:hover{transform:translateY(-2px)}
.btn-tinta:active{transform:translateY(1px)}
.btn-linea{background:var(--blanco);color:var(--tinta);
  box-shadow:0 0 0 1px rgba(30,29,31,.1), 0 8px 18px -10px rgba(0,0,0,.25)}
.btn-linea:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(30,29,31,.2), 0 14px 24px -10px rgba(0,0,0,.3)}
.btn-linea:active{transform:translateY(1px)}

/* --- BARRA FLOTANTE ------------------------------------------------------- */
.barra{position:fixed;top:16px;left:0;right:0;z-index:60;
  display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.pastilla{
  pointer-events:auto;display:flex;align-items:center;gap:26px;
  padding:11px 16px 11px 24px;border-radius:999px;
  background:rgba(255,253,251,.62);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,
    0 0 0 1px rgba(30,29,31,.05), 0 12px 30px -14px rgba(0,0,0,.22);
}
.marca{font-family:var(--titulo);font-style:italic;font-weight:600;
  font-size:1.05rem;color:var(--tinta);text-decoration:none;white-space:nowrap}
.menu{display:flex;gap:22px;align-items:center}
.menu a{color:var(--tinta-2);text-decoration:none;font-size:.88rem;font-weight:500;
  white-space:nowrap;padding:3px 0;border-bottom:1.5px solid transparent;
  transition:color .18s, border-color .18s}
.menu a:hover{color:var(--tinta);border-bottom-color:var(--oro)}

/* --- el cambio de idioma -------------------------------------------------
   Tres pastillas de dos letras. Va DESPUES del menu y no adentro: el menu
   lleva a partes de esta pagina y esto lleva a otra pagina, y mezclarlos
   hace que se lean como lo mismo.
   Los dos que no son el actual quedan en gris: el dorado marca donde estas,
   igual que el boton de moneda del catalogo. */
.idiomas{display:flex;align-items:center;gap:2px;padding:3px;
  border-radius:999px;background:rgba(30,29,31,.05)}
.idiomas a{font-size:.7rem;font-weight:600;letter-spacing:.06em;line-height:1;
  color:var(--tinta-2);text-decoration:none;padding:5px 8px;border-radius:999px;
  transition:color .18s, background .18s}
.idiomas a:hover{color:var(--tinta)}
.idiomas a.on{color:#3C2F12;background:linear-gradient(150deg,#E4C77E,#C5A059)}

/* === BLOQUE 1 · PORTADA =================================================== */
.portada{padding:clamp(112px,15vw,180px) 0 clamp(60px,8vw,110px)}
.portada .env{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,76px);align-items:center}
.portada h1{font-size:clamp(2.8rem,7.5vw,4.9rem);font-style:italic;font-weight:400}
.bienvenida{font-size:1.04rem;color:var(--tinta-2);font-weight:300;
  line-height:1.72;margin:24px 0 0;max-width:44ch}
.portada .btn{margin-top:32px}

.escena{margin:0;display:flex;justify-content:center;perspective:1500px}
/* EL PARALAJE VA EN .aparato Y EL FLOTADO EN .telefono, en dos elementos
   distintos a proposito: los dos son transform, y en el mismo elemento el
   que escribe el guion pisaria la animacion del CSS. */
.aparato{position:relative;display:flex;justify-content:center;
  transform:translateY(var(--py,0px)) rotate(var(--pr,0deg));
  will-change:transform}
.telefono{
  position:relative;width:min(288px,74vw);aspect-ratio:9/19.2;
  border-radius:44px;padding:9px;
  background:linear-gradient(158deg,#4E4A52 0%,#25232A 32%,#1B1A1F 64%,#413D46 100%);
  box-shadow:
    0 2px 1px rgba(255,255,255,.3) inset,
    0 -2px 1px rgba(0,0,0,.6) inset,
    0 0 0 1.5px #151417;
  transform:rotateY(-10deg) rotateX(3deg) rotate(-1deg);
  animation:flotar 8s ease-in-out infinite;
}
@keyframes flotar{
  0%,100%{transform:rotateY(-10deg) rotateX(3deg) rotate(-1deg) translateY(0)}
  50%    {transform:rotateY(-7deg)  rotateX(2deg) rotate(-.4deg) translateY(-12px)}
}
.telefono i.lat{position:absolute;right:-2.5px;width:2.5px;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,#4E4A52,#222026)}
.telefono i.l1{top:23%;height:7%}
.telefono i.l2{top:33%;height:11%}

.pantalla{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:36px;background:#EFE9DF;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.7)}
/* LAS HOJAS SE CORREN, NO SE FUNDEN. Fundidas por opacidad se ven dos
   paginas a la vez durante casi un segundo, y la pantalla parece un
   holograma desteñido. */
.pantalla img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;transform:translateX(100%);
  transition:transform .72s cubic-bezier(.55,.06,.2,1)}
.pantalla img.activa{transform:none}
.pantalla img.saliendo{transform:translateX(-100%)}

.telefono::before{content:"";position:absolute;top:21px;left:50%;
  transform:translateX(-50%);width:72px;height:20px;border-radius:999px;
  background:#111013;z-index:3}
/* el filo del vidrio va en el BORDE, nunca como veladura encima */
.telefono::after{content:"";position:absolute;inset:9px;border-radius:36px;z-index:2;
  pointer-events:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),
             inset 0 0 0 1px rgba(255,255,255,.12)}
.aparato::after{content:"";position:absolute;left:50%;bottom:-44px;
  transform:translateX(-50%);width:72%;height:30px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(30,29,31,.30), transparent 70%);
  filter:blur(9px);animation:sombra 8s ease-in-out infinite}
@keyframes sombra{0%,100%{width:72%;opacity:.9} 50%{width:62%;opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .telefono,.aparato::after{animation:none}
}
.puntos{position:absolute;left:50%;bottom:-84px;transform:translateX(-50%);
  display:flex;gap:7px;z-index:4}
.puntos i{display:block;width:6px;height:6px;border-radius:50%;
  background:rgba(30,29,31,.16);transition:all .3s ease}
.puntos i.activo{background:var(--oro);width:22px;border-radius:3px}

/* === BLOQUE 2 · CATALOGO ================================================== */
.catalogo{padding:clamp(56px,7vw,96px) 0 clamp(70px,9vw,120px)}
.cabeza{display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:22px;margin-bottom:44px}
.cabeza h2{font-size:clamp(1.75rem,3.4vw,2.5rem);font-style:italic;font-weight:400}
.cabeza .sub{font-size:.98rem;color:var(--tinta-3);font-weight:300;
  margin:12px 0 0;max-width:46ch}

.moneda{display:inline-flex;align-items:center;gap:2px;padding:4px;
  border-radius:999px;background:rgba(30,29,31,.05);
  box-shadow:inset 0 1px 3px rgba(30,29,31,.08), 0 1px 0 rgba(255,255,255,.7)}
.moneda button{font-family:var(--cuerpo);font-size:.76rem;font-weight:600;
  letter-spacing:.04em;padding:8px 14px;border:0;border-radius:999px;
  background:none;color:var(--tinta-3);cursor:pointer;transition:all .18s ease}
.moneda button:hover{color:var(--tinta)}
.moneda button[aria-pressed="true"]{background:var(--blanco);color:var(--tinta);
  box-shadow:0 0 0 1px rgba(30,29,31,.06), 0 3px 8px -3px rgba(0,0,0,.2)}
.nota-moneda{font-size:.76rem;color:var(--tinta-3);font-weight:300;margin:10px 0 0}

.vitrina{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* LA FILA DEL MANUAL VA DE A DOS. Son dos ediciones del mismo libro, no
   dos colecciones mas: metidas en la grilla de cuatro columnas quedaban
   flacas, pegadas a la izquierda y con dos huecos al lado. */
.vitrina.duo{grid-template-columns:repeat(2,1fr);max-width:780px;
  margin:0 auto 34px}
/* TRES COLUMNAS SOLO CUANDO HAY LUGAR, Y POR ESO VA DENTRO DE UNA CONSULTA.
   Escrita suelta, esta regla rompia el telefono: ":has()" suma especificidad
   y una consulta de medios no suma ninguna, asi que
   ".vitrina.duo:has(...)" le ganaba a ".vitrina.duo" de la consulta de 560 y
   la fila del manual se quedaba en TRES columnas dentro de 375 pixeles: las
   tarjetas de 110 px, los titulos partidos palabra por palabra y la tercera
   afuera de la pantalla. Metida en su propia consulta no compite con nadie. */
@media (min-width:1041px){
  .vitrina.duo:has(.cuad:nth-child(3)){grid-template-columns:repeat(3,1fr);
    max-width:1180px}
}
/* La tarjeta de Amazon no lleva precio -lo fija Amazon en cada tienda y lo
   cambia por su cuenta- pero necesita ocupar el lugar del precio igual:
   el margen automatico es lo que empuja el boton al fondo y mantiene los
   dos botones de la fila a la misma altura. */
.cuad .sin-precio{margin:auto 0 0;font-size:.8rem;line-height:1.5;
  color:var(--tinta-3);font-weight:300}
.fila-titulo{font-family:var(--cuerpo);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
  margin:0 0 16px;display:flex;align-items:center;gap:14px}
.fila-titulo::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(30,29,31,.14),rgba(30,29,31,0))}
.cuad{display:flex;flex-direction:column;background:var(--blanco);
  border-radius:24px;padding:16px 16px 20px;box-shadow:var(--bastidor);
  /* LA INCLINACION VIVE EN DOS VARIABLES, no en una regla de :hover.
     El guion escribe --rx y --ry mientras el cursor se mueve, y el reposo lo
     resuelve el propio CSS volviendo a cero. Asi la inclinacion y el
     levantarse al pasar por encima no pelean por la misma propiedad. */
  transform:perspective(1000px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--ty,0px));
  transform-style:preserve-3d;
  /* de vuelta al reposo con rebote: la curva se pasa de largo y vuelve */
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.cuad:hover{--ty:-6px;box-shadow:var(--bastidor-alto)}

/* la entrada, de desenfocada a nitida */
.cuad.aparece{opacity:0;filter:blur(8px);transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),
             filter .8s cubic-bezier(.16,.8,.3,1),
             transform .8s cubic-bezier(.16,.8,.3,1)}
.cuad.aparece.visible{
  opacity:1;filter:blur(0);
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateY(var(--ty,0px));
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),
             filter .8s cubic-bezier(.16,.8,.3,1),
             transform .8s cubic-bezier(.16,.8,.3,1),
             box-shadow .28s ease;
}
/* TERMINADA LA ENTRADA, OTRA TRANSICION.
   La de arriba dura 800 ms porque acompana el desenfoque. Si se quedara, la
   tarjeta tardaria ese tiempo en responder al cursor y la inclinacion se
   sentiria rota. El guion agrega .lista cuando la entrada termino, y a partir
   de ahi manda la curva corta con rebote. */
.cuad.lista{
  transition:transform .55s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;
}
.cuad.lista.inclinando{transition:box-shadow .28s ease}
.cuad .tapa{margin:0 0 16px;border-radius:16px;overflow:hidden;background:var(--lino-3)}
/* las portadas vienen apaisadas 4:3: recortarlas a otra proporcion les
   comeria el titulo o el cuadro terminado, que es lo que las vende */
.cuad .tapa img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cuad:hover .tapa img{transform:scale(1.05)}
.cuad h3{margin:0 0 3px}
.cuad .cuantas{font-size:.84rem;color:var(--tinta-3);font-weight:300;margin:0 0 12px}
.niveles{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.nivel{font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;padding:5px 10px;border-radius:999px;
  background:rgba(201,169,110,.16);color:var(--oro-hondo)}
.cuad .precio{font-family:var(--titulo);font-size:1.7rem;color:var(--tinta);
  margin:auto 0 0;line-height:1;font-weight:600}
.cuad .btn{margin-top:14px;width:100%;font-size:.86rem;padding:13px 10px}

/* auto-fit y no "1fr 1fr": hoy hay un solo combo publicado y con dos
   columnas fijas quedaba media fila vacia al lado. */
.combos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:22px;margin-top:26px}
.combos:has(.combo:only-child){max-width:620px;margin-left:auto;margin-right:auto}
.combo{position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FFFDF9,#F7F1E6);
  border-radius:24px;padding:34px 28px 28px;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,
    0 0 0 1.5px rgba(201,169,110,.42),
    0 18px 40px rgba(156,124,62,.10),
    0 4px 12px rgba(0,0,0,.03);
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.combo:hover{transform:translateY(-5px)}
/* EL RESPLANDOR DE ENTRADA. Un aro dorado que se enciende y se apaga una
   sola vez, en una capa aparte: animar el box-shadow del combo obligaria al
   navegador a repintar la tarjeta entera en cada cuadro. */
.combo::after{
  content:"";position:absolute;inset:-2px;border-radius:26px;
  pointer-events:none;opacity:0;
  box-shadow:0 0 0 1.5px rgba(201,169,110,.85),
             0 0 26px 4px rgba(201,169,110,.42);
}
.combo.visible::after{animation:destello 1.5s ease-out .25s 1}
@keyframes destello{
  0%{opacity:0} 35%{opacity:1} 100%{opacity:0}
}
.combo .cinta{position:absolute;top:-12px;left:28px;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:#2A2116;padding:7px 15px;border-radius:999px;
  background:linear-gradient(180deg,#DFC48A,#C29F5E);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 6px 14px -8px rgba(156,124,62,.9)}
.combo h3{font-family:var(--titulo);font-size:1.34rem;font-weight:600;margin:0 0 14px}
.combo ul{list-style:none;margin:0 0 22px;padding:0;font-size:.92rem;font-weight:300}
.combo li{padding:8px 0 8px 18px;position:relative;color:var(--tinta-2);
  border-top:1px solid rgba(30,29,31,.06)}
.combo li::before{content:"";position:absolute;left:1px;top:16px;width:6px;height:6px;
  border-radius:2px;background:var(--oro)}
.precios{display:flex;align-items:baseline;gap:12px;margin:auto 0 0;flex-wrap:wrap}
.antes{font-family:var(--titulo);font-size:1.1rem;color:var(--tinta-3);
  text-decoration:line-through}
.ahora{font-family:var(--titulo);font-size:2.3rem;color:var(--tinta);line-height:1;
  font-weight:600}
.ahorro{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--oro-hondo);background:rgba(201,169,110,.18);padding:6px 12px;
  border-radius:999px}
.combo .btn{margin-top:20px;width:100%}

/* === BLOQUE 3 · PIE ======================================================= */
/* ======================= EL PANEL "QUE INCLUYE" ===========================
   Se abre encima de la pagina, no lleva a otra: quien lo cierra sigue en la
   misma tarjeta donde estaba. Una pagina aparte por producto significaba
   volver atras para comparar, y comparar es justo lo que hace la gente en
   una vitrina de siete cosas. */
/* EL DISPARADOR. Antes era una barra al ancho de la tarjeta, con su propio
   borde, apoyada ARRIBA del boton de compra: dos bloques del mismo tamano
   uno sobre el otro, peleandose por ser el principal. Ahora va DEBAJO y es
   un rotulo, no un boton: el ojo ve una sola accion grande -comprar- y
   abajo, en chico, la puerta al anticipo. */
.ver{
  display:block;margin:13px auto 0;padding:4px 2px;
  font-family:var(--cuerpo);font-size:.71rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;
  color:var(--tinta-3);cursor:pointer;
  background:none;border:0;border-radius:0;
  transition:color .22s ease}
.ver::after{content:"›";display:inline-block;margin-left:.5em;
  font-size:1.2em;line-height:0;vertical-align:-.04em;
  transition:transform .22s ease}
.ver:hover{color:var(--oro-hondo)}
.ver:hover::after{transform:translateX(3px)}
.ver:focus-visible{outline:2px solid var(--oro);outline-offset:4px;
  border-radius:3px}
.cuad .btn + .ver,.combo .btn + .ver{margin-top:11px}

.panel-fondo{position:fixed;inset:0;z-index:60;
  background:rgba(30,29,31,.52);backdrop-filter:blur(3px)}
.panel{
  position:fixed;z-index:61;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(780px,calc(100vw - 28px));max-height:min(88vh,940px);
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--blanco);border-radius:26px;padding:38px 38px 32px;
  box-shadow:var(--bastidor-alto)}
/* con el panel abierto, la pagina de atras no se desplaza */
html.con-panel,html.con-panel body{overflow:hidden}

.panel-cerrar{
  position:absolute;top:16px;right:18px;width:38px;height:38px;
  font-size:1.5rem;line-height:1;color:var(--tinta-3);cursor:pointer;
  background:var(--lino-2);border:0;border-radius:999px;
  transition:background .2s ease,color .2s ease}
.panel-cerrar:hover{background:var(--lino-3);color:var(--tinta)}

.panel-volanta{font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro-hondo);margin:0 0 8px}
.panel h2{font-family:var(--titulo);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--tinta);margin:0;
  line-height:1.15}
.panel-resumen{font-size:1rem;color:var(--tinta-2);font-weight:300;
  margin:12px 0 0;line-height:1.6}

/* las hojas de muestra: se desplazan de costado, no apiladas. Tres A4 una
   debajo de otra empujaban el boton de compra fuera de la vista. */
.panel-fotos{display:flex;gap:12px;overflow-x:auto;margin:24px -38px 0;
  padding:0 38px 6px;scroll-snap-type:x mandatory}
.panel-fotos figure{margin:0;flex:0 0 40%;scroll-snap-align:start}
.panel-fotos img{width:100%;display:block;border-radius:12px;
  background:var(--lino-3);box-shadow:var(--bastidor)}

.panel-rotulo{font-family:var(--cuerpo);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
  margin:28px 0 14px}
.panel-lista{list-style:none;margin:0;padding:0}
.panel-lista li{padding:0 0 13px 20px;position:relative;margin:0 0 13px;
  border-bottom:1px solid rgba(30,29,31,.06)}
.panel-lista li:last-child{border-bottom:0;margin-bottom:0}
.panel-lista li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--oro)}
.panel-lista b{display:block;font-weight:600;color:var(--tinta);
  font-size:.98rem}
.panel-lista span{display:block;font-size:.9rem;color:var(--tinta-2);
  font-weight:300;line-height:1.55;margin-top:3px}

.panel-nota{font-size:.84rem;color:var(--tinta-3);font-weight:300;
  line-height:1.6;margin:20px 0 0;padding:14px 16px;border-radius:14px;
  background:var(--lino-2)}

.panel-pie{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  position:sticky;bottom:-32px;background:var(--blanco);
  margin:26px -38px -32px;padding:20px 38px 32px;
  border-top:1px solid rgba(30,29,31,.08)}
.panel-precio{font-family:var(--titulo);font-size:1.7rem;color:var(--tinta);
  margin:0;line-height:1;font-weight:600}
.panel-pie .btn{flex:1 1 220px;margin:0}

@media (max-width:640px){
  /* en el telefono es una hoja que sube desde abajo y ocupa casi todo */
  .panel{width:100%;max-height:92vh;top:auto;bottom:0;transform:translateX(-50%);
    border-radius:24px 24px 0 0;padding:30px 20px 24px}
  .panel-fotos{margin:20px -20px 0;padding:0 20px 6px}
  .panel-fotos figure{flex:0 0 62%}
  .panel-pie{bottom:-24px;margin:22px -20px -24px;padding:16px 20px 24px}
  .panel-pie .btn{flex:1 1 100%}
}

/* ================================== LA TIENDA ============================
   Reusa .vitrina y .cuad del catalogo a proposito: son tarjetas de producto
   igual que las otras, y darles un aspecto propio partiria la pagina en dos
   lenguajes. Lo unico distinto es que no llevan precio -Amazon no deja
   escribirlo a mano, cambia todo el tiempo- asi que el boton se empuja al
   fondo con margen automatico en vez de apoyarse sobre el precio. */
.tienda{padding:0 0 clamp(70px,9vw,110px)}
.tienda .cabeza{margin-bottom:26px}
.cuad.item .cuantas{margin:0 0 16px}
.cuad.item .btn{margin-top:auto}
/* el recuadro de lino con la ranura, para las que no tienen foto */
.cuad .tapa.vacia{aspect-ratio:4/3;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--lino-2),var(--lino-3))}
.cuad .tapa.vacia i{display:block;width:46%;height:9px;border-radius:5px;
  background:linear-gradient(180deg,rgba(90,79,69,.22) 0%,
    rgba(90,79,69,.05) 58%,rgba(255,255,255,.95) 100%);
  box-shadow:inset 0 2px 3px rgba(90,79,69,.26),
    0 1px 0 rgba(255,255,255,.95)}
/* Sin foto la tarjeta no tiene por que ser igual de alta que una con foto:
   con el titulo arriba de todo se lee antes. */
.cuad.item h3{margin-top:0}

.aviso-afiliado{max-width:760px;margin:34px auto 0;text-align:center;
  font-size:.8rem;line-height:1.7;color:var(--tinta-3);font-weight:300}

/* DOS TIENDAS EN UNA TARJETA. Uno al lado del otro mientras quepan, y uno
   debajo del otro en el celular: con dos botones de ancho completo la tarjeta
   se estira y la fila queda despareja. */
.dos-tiendas{display:flex;gap:8px;flex-wrap:wrap}
.dos-tiendas .btn{flex:1 1 128px}
.btn-chico{padding:13px 18px;font-size:.86rem}

/* --- LA BARRA DE COMPRA EN EL CELULAR ------------------------------------
   Solo existe en pantalla angosta. En el escritorio el boton de comprar
   siempre esta a la vista y una franja fija abajo seria una molestia; en el
   telefono es al reves, se pierde a los dos deslizadas.

   Nace fuera de la pantalla y sube cuando corresponde, en vez de aparecer de
   golpe: entrando de golpe tapa lo que la persona estaba leyendo y se siente
   como un cartel, no como una herramienta. */
.barra-compra{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:none;align-items:center;gap:11px;
  padding:9px 12px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom, 0px));
  background:rgba(255,253,251,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid rgba(30,29,31,.09);
  box-shadow:0 -12px 30px -20px rgba(30,29,31,.55);
  transform:translateY(115%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.barra-compra.se-ve{transform:none}

.barra-compra img{
  width:44px;height:44px;flex:0 0 44px;border-radius:9px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(30,29,31,.08)
}
.barra-texto{flex:1 1 auto;min-width:0;line-height:1.25}
.barra-texto b{
  display:block;font-family:var(--cuerpo);font-size:.82rem;font-weight:600;
  color:var(--tinta);
  /* un nombre largo no puede empujar al boton fuera de la pantalla */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.barra-precio{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.barra-precio i{
  font-style:normal;font-size:.95rem;font-weight:700;color:var(--oro-hondo)
}
.barra-precio s{font-size:.76rem;color:var(--tinta-3);text-decoration:line-through}

.barra-compra .btn{
  flex:0 0 auto;padding:12px 20px;font-size:.86rem;border-radius:999px
}

@media (max-width:700px){
  .barra-compra{display:flex}
  /* para que la franja no tape el ultimo renglon del pie */
  body.con-barra .pie{padding-bottom:96px}
}
@media (max-width:360px){
  .barra-compra{gap:8px;padding-left:10px;padding-right:10px}
  .barra-compra img{display:none}          /* primero el precio y el boton */
  .barra-compra .btn{padding:12px 15px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
  .barra-compra{transition:none}
}

/* El atributo hidden lo usa el guion para que la seccion no exista mientras
   no haya productos. Con !important porque cualquier display en una regla
   posterior lo anularia sin aviso. */
[hidden]{display:none !important}

.pie{padding:clamp(48px,6vw,76px) 0 clamp(34px,4vw,52px);
  border-top:1px solid rgba(30,29,31,.07)}
.pie .env{text-align:center}
.pie .marca-pie{font-family:var(--titulo);font-style:italic;font-weight:600;
  font-size:1.4rem;color:var(--tinta);display:block;margin-bottom:18px}
.pie .contacto{font-size:1rem;color:var(--tinta-2);font-weight:300;margin:0 0 6px}
.pie a{color:var(--oro-hondo);text-decoration:none;font-weight:500}
.pie a:hover{text-decoration:underline}
.pie .legal{margin:28px 0 0;font-size:.78rem;color:var(--tinta-3);font-weight:300}

/* ============================ PANTALLAS CHICAS ============================= */
@media (max-width:1040px){
  .vitrina{grid-template-columns:repeat(2,1fr)}
  /* la fila del manual vuelve a dos aunque haya tres tarjetas */
  .vitrina.duo:has(.cuad:nth-child(3)){grid-template-columns:repeat(2,1fr);
    max-width:780px}
}
@media (max-width:900px){
  .portada{padding-top:clamp(104px,24vw,140px)}
  /* el telefono va PRIMERO: es lo que hay que ver al entrar. Debajo del
     titulo no se ve sin desplazar, que era el defecto de la version vieja. */
  .portada .env{grid-template-columns:1fr}
  .portada .escena{order:-1;margin-bottom:118px}
  .portada .btn{width:100%}
  .combos{grid-template-columns:1fr}
  .pastilla{gap:16px;padding:10px 12px 10px 18px}
  .menu{gap:16px}
  .menu a{font-size:.84rem}
  .marca{font-size:.98rem}
}
@media (max-width:560px){
  .vitrina,
  .vitrina:has(.cuad:nth-child(3)){grid-template-columns:1fr;max-width:400px;
    margin:0 auto}
  .vitrina.duo,
  .vitrina.duo:has(.cuad:nth-child(3)){grid-template-columns:1fr;
    max-width:400px;margin:0 auto 30px}
  .cabeza{flex-direction:column;align-items:flex-start}
  .pastilla{gap:12px;padding:9px 10px 9px 15px}
  .menu{gap:13px}
  .menu a{font-size:.8rem}
  .marca{font-size:.92rem}
  .idiomas{gap:1px;padding:2px}
  .idiomas a{padding:4px 6px;font-size:.66rem}
}

/* EN UN TELEFONO ANGOSTO NO ENTRAN LAS TRES COSAS.
   La marca, dos enlaces de menu y tres de idioma no caben en 360 px: la
   pastilla se estira y se sale de la pantalla. Lo que se va es el nombre
   del taller, que esta repetido tres renglones mas abajo en el titulo; el
   menu y el idioma no estan repetidos en ningun lado. */
@media (max-width:400px){
  .pastilla{gap:10px;padding:9px 9px}
  .marca{display:none}
}