/* ══════════════════════════════════════════════════════════════
   AMOBLARQ — Design System · Negro / Gris / Blanco
   ══════════════════════════════════════════════════════════════ */
:root {
  --bg:#F7F7F7;--bg-elev:#FFFFFF;--paper:#EFEFEF;--sand:#E4E4E4;--sand-2:#D4D4D4;
  --ink:#111111;--ink-2:#222222;--muted:#5E5E5E;--muted-2:#787878;
  --line:rgba(17,17,17,.10);--line-soft:rgba(17,17,17,.055);--line-hard:rgba(17,17,17,.18);
  --accent:#111111;--error:#7A2020;--success:#2A5C3A;
  --glass-bg:rgba(255,255,255,.65);--glass-bg-2:rgba(255,255,255,.82);--glass-bg-dark:rgba(17,17,17,.72);
  --glass-border:rgba(255,255,255,.70);--glass-border-2:rgba(255,255,255,.38);
  --glass-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 8px 32px -8px rgba(17,17,17,.12),0 2px 8px -2px rgba(17,17,17,.06);
  --glass-blur:blur(24px) saturate(180%);--glass-blur-sm:blur(14px) saturate(160%);
  --ff-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* Sans: Outfit (grotesca geométrica con carácter). Inter queda fuera a
     propósito: es la tipografía por defecto de la mayoría de sitios generados
     y es lo primero que hace que una web se vea genérica. */
  --ff-sans:'Outfit','Segoe UI Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fw-body:300;--fw-label:500;--fw-strong:600;
  --r-sm:3px;--r:5px;--r-lg:9px;--r-xl:14px;--r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --tr:220ms cubic-bezier(.22,1,.36,1);--tr-slow:600ms cubic-bezier(.16,1,.3,1);--tr-fast:140ms cubic-bezier(.22,1,.36,1);
  --gutter:clamp(1.25rem,4vw,2.75rem);--section-y:clamp(5rem,11vw,10rem);--max-w:1440px;
  /* Las bandas oscuras (financiación y el cierre) llevan su propia
     escala, más corta que la de las secciones claras: el contraste
     de fondo ya marca el cambio de capítulo, no hace falta además
     gastarlo en aire. Comparten token para que midan lo mismo. */
  --section-y-dark:clamp(3.5rem,8vw,7rem);
  /* Valores de repuesto para el primer pintado y para quien no tiene
     JS. header.php los reemplaza midiendo el encabezado real, que
     es más alto que lo que parece: logo de 48px + barra de categorías. */
  --header-h:110px;--announce-h:36px;
  /* Escala de z-index. Nada de números sueltos como 9999. */
  --z-base:1;--z-sticky:100;--z-drawer:200;--z-header:300;--z-float:400;--z-grain:999;
  /* Sombras teñidas con la tinta del sitio, no con negro puro. */
  --sh-1:0 1px 2px rgba(17,17,17,.05),0 6px 16px -8px rgba(17,17,17,.10);
  --sh-2:0 2px 6px rgba(17,17,17,.05),0 18px 40px -20px rgba(17,17,17,.18);
  --sh-3:0 4px 10px rgba(17,17,17,.05),0 34px 64px -30px rgba(17,17,17,.26);
  /* Medida de lectura: ~65 caracteres. */
  --measure:64ch;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* El encabezado va fijo y la barra de avisos se va con el scroll, así
   que para saltar a un ancla lo que tapa es el encabezado solo. Sin
   esto, #financiacion caía debajo del logo y el título quedaba
   cortado. El alto real lo mide header.php y lo escribe en la
   variable, que el valor del CSS es apenas una primera aproximación
   para el pintado inicial. */
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1.5rem)}
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)}
body{font-family:var(--ff-sans);font-weight:var(--fw-body);background:var(--bg);color:var(--ink);font-size:.9375rem;line-height:1.65;letter-spacing:-.008em;text-rendering:optimizeLegibility;overflow-x:hidden;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.30 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}img{width:100%;object-fit:cover}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font:inherit;color:inherit}ul{list-style:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm)}
/* Skip link: invisible hasta que recibe el foco por teclado. */
.skip-link{position:fixed;top:0;left:50%;transform:translate(-50%,-110%);z-index:calc(var(--z-grain) + 1);
  background:var(--ink);color:#fff;font-size:.8125rem;font-weight:500;letter-spacing:.02em;
  padding:.85rem 1.6rem;border-radius:0 0 var(--r) var(--r);transition:transform 200ms var(--ease)}
.skip-link:focus{transform:translate(-50%,0)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(17,17,17,.15);border:3px solid var(--bg);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:rgba(17,17,17,.30)}
.glass{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.glass-dark{background:var(--glass-bg-dark);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(255,255,255,.10);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 32px -8px rgba(0,0,0,.50)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:.95rem 1.9rem;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap;position:relative;overflow:hidden;transition:background var(--tr),color var(--tr),border-color var(--tr),transform 160ms var(--ease),box-shadow var(--tr)}
.btn:active{transform:scale(.975)}.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}.btn-primary:hover{background:#333;border-color:#333;box-shadow:0 8px 24px -10px rgba(17,17,17,.45)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-hard)}.btn-secondary:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}.btn-ghost:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55)}
.btn-white{background:rgba(255,255,255,.95);color:var(--ink);border-color:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}.btn-white:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-full{width:100%}.btn-lg{padding:1.1rem 2.4rem;font-size:.8125rem}
/* Ícono dentro del botón: el glifo no va desnudo al lado del texto,
   va en su propio círculo pegado al borde derecho de la pastilla.
   El margen negativo lo corre contra el padding, que es lo que hace
   que se vea "enclavado" en vez de flotando. */
.btn-ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:1.65rem;height:1.65rem;margin-right:-1.1rem;margin-left:-.2rem;
  border-radius:50%;background:rgba(255,255,255,.14);
  transition:transform var(--tr) var(--ease),background var(--tr);
}
.btn-ico svg{width:.9rem;height:.9rem}
.btn:hover .btn-ico{transform:translate(1px,-1px);background:rgba(255,255,255,.26)}
.btn-secondary .btn-ico,.btn-white .btn-ico{background:rgba(17,17,17,.08)}
.btn-secondary:hover .btn-ico,.btn-white:hover .btn-ico{background:rgba(17,17,17,.16)}
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}.section-alt{background:var(--paper)}
/* El aire entre dos secciones va a cargo de UNA sola, no de las dos.
   Antes cada .section traía --section-y arriba y abajo, así que dos
   secciones seguidas sumaban 2x ese valor (unos 220px en pantalla
   grande) y quedaban 110px de padding del bloque anterior pegados al
   borde de color del siguiente: de ahí el hueco vacío que se veía
   entre "Ver todo el catálogo" y "Ofertas del momento".

   Ahora la primera mantiene su padding y la que la sigue entra sin
   padding propio: el espacio es --section-y, una sola vez. El borde
   entre las dos sigue justo donde tiene que estar, en el fin del
   bloque de arriba. */
.section + .section{padding-top:0}

/* La calculadora anexa de la portada no es una .section (no lleva ese
   aire), así que la regla de arriba no la alcanza: sin esto, entre la
   caja de medidas y el título de la sección que viene abajo se
   sumaban su padding y el de la sección, unos 240px de vacío. */
.calc-mini + .section{padding-top:0}

/* Un bloque que va pegado al de abajo.

   La banda de ofertas la usa. El catálogo ya aporta su propio aire de
   sección y sumarle el de la banda abría un vacío entre el botón
   "Ver todo el catálogo" y el bloque de promociones. Sólo se recorta
   en ESTA frontera: el resto de las secciones sigue con su aire entero.

   Va como clase y no como regla con :has() para que el recorte viaje
   con la sección. Si esa sección se apaga desde el panel, el recorte se
   va con ella y la que queda arriba conserva su aire. */
.section--pegado{padding-bottom:clamp(2rem,3.5vw,2.75rem)}
.section-header{margin-bottom:clamp(1.75rem,3.2vw,2.75rem)}
.section-label{display:inline-flex;align-items:center;gap:.85rem;font-size:.6875rem;letter-spacing:.20em;text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem;font-weight:500}
.section-label::before{content:'';width:28px;height:1px;background:currentColor;flex-shrink:0}
/* La medida se limita como en la financiación (20ch): a 64px una
   línea de 1.340px son 40 caracteres de un vistazo, y un titular
   de ese tamaño tiene que poder leerse de corrido, no barrerse. */
.section-title{font-family:var(--ff-serif);font-size:clamp(2.25rem,4.5vw,4rem);font-weight:300;line-height:1.02;letter-spacing:-.03em;color:var(--ink);text-wrap:balance;max-width:20ch}
/* Encabezado centrado: se usa en los bloques que no tienen una
   columna de texto al costado (categorías, Opinions), donde el
   titular al borde izquierdo dejaba media pantalla en blanco.
   La medida se estira a 24ch porque centrada una línea de 20ch
   queda corta y descentrada a simple vista. */
.section-header--centro{text-align:center;max-width:56rem;margin-inline:auto}
.section-header--centro .section-label{justify-content:center}
.section-header--centro .section-title{max-width:24ch;margin-inline:auto}
/* Texto introductorio de una sección. La medida se limita a ~64 caracteres:
   una línea de 140 caracteres es ilegible en cualquier pantalla. */
.section-lead{font-size:clamp(.9375rem,1.1vw,1.0625rem);color:var(--muted);max-width:var(--measure);line-height:1.75;text-wrap:pretty}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.categories-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.category-card{position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer;border-radius:var(--r-lg);background:var(--sand);isolation:isolate}
/* La foto va en color completo. Sin cambio de brillo al hover. */
.category-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:none}
.category-card:hover .category-bg{transform:none;filter:none}
.category-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(17,17,17,.65) 0%,rgba(17,17,17,.10) 60%,transparent 100%)}
.category-name{position:absolute;bottom:1.25rem;left:1rem;right:1rem;font-family:var(--ff-serif);font-size:clamp(1rem,1.5vw,1.3rem);font-weight:300;letter-spacing:-.01em;color:#fff;z-index:2;padding:.5rem .75rem;background:rgba(17,17,17,.35);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border-radius:var(--r);border:1px solid rgba(255,255,255,.12)}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2rem,4vw,3.5rem) clamp(1rem,2vw,1.75rem)}
/* ── PRODUCT CARD (v2 · shared por index/catalogo/producto) ── */
.product-card{display:flex;flex-direction:column;position:relative}
.product-card-link{display:flex;flex-direction:column;flex:1;color:inherit}
.product-img-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);border-radius:var(--r-lg);margin-bottom:1.1rem;transition:box-shadow 500ms var(--ease-out)}
/* La foto entra ENTERA y lo que sobra lo completa una copia desenfocada
   de la misma foto, que la ficha pasa por la variable --foto. Antes se
   usaba cover, y cover siempre recorta: una foto panorámica perdía los
   dos tercios del ancho y una vertical se salía del marco. Con contain
   ninguna imagen se corta, tenga la forma que tenga, y el marco nunca
   queda con huecos raros. */
.product-img-wrap::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--foto) center/cover no-repeat;
  filter:blur(16px);transform:scale(1.12)}
.product-card:hover .product-img-wrap{box-shadow:0 22px 44px -20px rgba(17,17,17,.30)}
.product-img-frame{position:absolute;inset:0;display:block;overflow:hidden}
.product-img-frame--hover{display:none}
.product-img{width:100%;height:100%;object-fit:contain}
.product-img-main{position:relative;z-index:1;transform:scale(1.005)}
/* Sin swap de imagen al hover: la foto principal siempre visible, sin escala de grises */
.product-img-hover{display:none}
.product-img-scrim{display:none}
/* Badges */
.product-flags{position:absolute;top:.8rem;left:.8rem;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.product-badge{
  display:inline-flex;align-items:center;padding:.34rem .62rem;border-radius:var(--r-sm);
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;
}
.product-badge.sale{background:#111;color:#fff}
.product-badge.offer{background:rgba(255,255,255,.92);color:#111;border:1px solid rgba(17,17,17,.14)}
.product-badge.stock{position:absolute;left:.8rem;bottom:.8rem;z-index:4}
.product-badge.stock.low{background:#fff;color:#111;border:1px solid rgba(17,17,17,.14)}
.product-badge.stock.out{background:rgba(17,17,17,.82);color:#fff}
/* Agotado: SOLO el badge "Sin stock" arriba. Ni opacidad ni gris en la foto:
   el mueble debe verse con todo su color para que se pueda querer. */
.product-card.is-out .product-img-main{filter:none}
/* CTA hover */
.product-card-cta{
  position:absolute;left:.8rem;right:.8rem;bottom:.8rem;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.72rem 1rem;border-radius:var(--r-pill);background:#fff;color:#111;
  font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);transition:opacity var(--tr),transform var(--tr);
}
.product-card:hover .product-card-cta{opacity:1;transform:none}
/* Cuerpo */
.product-card-body{display:flex;flex-direction:column;flex:1}
.product-cat{font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:.4rem}
.product-name{font-size:.9375rem;font-weight:500;color:var(--ink);margin-bottom:.3rem;letter-spacing:-.012em;line-height:1.35}
.product-meta{font-size:.75rem;color:var(--muted);margin-bottom:.6rem;letter-spacing:.01em}
.product-price{display:flex;align-items:baseline;gap:.55rem;margin-top:auto}
.product-price-main{font-family:var(--ff-serif);font-size:1.3rem;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.product-price-old{font-size:.8125rem;color:var(--muted-2);text-decoration:line-through}
.product-cuotas{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--muted);
  margin-top:.35rem;letter-spacing:.01em}
.product-cuotas svg{color:var(--muted-2);flex-shrink:0}
/* Agregar al carrito */
.btn-add-cart{
  margin-top:.85rem;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;background:var(--ink);color:#fff;border:none;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:background var(--tr),color var(--tr),opacity var(--tr);
}
.btn-add-cart:hover{background:#333}
.btn-add-cart.added{background:var(--ink)}
.btn-add-cart.is-loading{opacity:.7;pointer-events:none}
.btn-add-cart:disabled{background:var(--paper);color:var(--muted-2);cursor:not-allowed}
.btn-add-cart svg{flex-shrink:0}
@media(max-width:600px){.product-card-cta{display:none}.btn-add-cart{font-size:.62rem;padding:.65rem .6rem}}

.benefits-list{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.benefit-item{display:flex;align-items:flex-start;gap:1rem}
.benefit-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--sand);color:var(--ink);flex-shrink:0}
.benefit-title{font-size:.875rem;font-weight:500;margin-bottom:.35rem;letter-spacing:-.008em}
.benefit-desc{font-size:.8125rem;color:var(--muted);line-height:1.55}
.cta-banner{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:clamp(4rem,8vw,7rem) var(--gutter);text-align:center}
.cta-inner{position:relative;z-index:2;max-width:820px;margin:0 auto}
.cta-eyeline{display:inline-flex;align-items:center;gap:.85rem;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1.5rem;padding:.45rem .95rem .45rem .8rem;background:rgba(255,255,255,.08);border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.14)}
.cta-eyeline::before{content:'';width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75)}
.cta-banner-title{font-family:var(--ff-serif);font-size:clamp(2.25rem,5vw,4rem);font-weight:300;letter-spacing:-.03em;line-height:1.02;color:#fff;margin-bottom:1.25rem}
.cta-banner-sub{font-size:1.0625rem;font-weight:300;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:2.5rem;max-width:480px;margin-left:auto;margin-right:auto;letter-spacing:-.005em}
.cta-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
/* El cierre y el pie son del mismo negro y se tocan: sin este
   filete se leen como una sola mancha de 1.000px de alto. */
.site-footer{background:var(--ink);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.09);padding:clamp(4rem,8vw,6.5rem) var(--gutter) 2.5rem}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3.5rem;margin-bottom:clamp(3rem,5vw,5rem)}
.footer-logo{font-family:var(--ff-serif);font-size:1.75rem;font-weight:300;color:#fff;letter-spacing:-.025em;margin-bottom:1.25rem;display:block}
.footer-tagline{font-size:.875rem;line-height:1.65;max-width:260px;margin-bottom:1.75rem}
.footer-social{display:flex;gap:.85rem}
.footer-social-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.20);border-radius:var(--r-pill);color:rgba(255,255,255,.58);transition:border-color var(--tr),color var(--tr),background var(--tr)}
.footer-social-btn:hover{border-color:rgba(255,255,255,.50);color:#fff;background:rgba(255,255,255,.08)}
/* Sobre #111 el blanco al 35% da 3,2:1 y al 28% 2,6:1, por debajo
   del 4,5:1 que pide la WCAG para texto chico. Se suben a 58% y 52%:
   siguen viéndose como apoyo, no como titular, y ahora se leen. */
.footer-col-title{font-size:.625rem;font-weight:600;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:1.25rem}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem}
.footer-col a{font-size:.875rem;color:rgba(255,255,255,.60);transition:color var(--tr)}.footer-col a:hover{color:#fff}
.footer-bottom{max-width:var(--max-w);margin:0 auto;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.75rem}
.footer-bottom-links{display:flex;gap:1.75rem}.footer-bottom-links a{color:rgba(255,255,255,.52);transition:color var(--tr)}.footer-bottom-links a:hover{color:rgba(255,255,255,.85)}
.page-banner{background:var(--paper);padding:clamp(4.5rem,10vh,7rem) var(--gutter) clamp(2.5rem,5vh,3.5rem);position:relative}
.page-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line-soft)}
.page-banner-inner{max-width:var(--max-w);margin:0 auto}
.page-banner-title{font-family:var(--ff-serif);font-size:clamp(2.5rem,5vw,4rem);font-weight:300;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.breadcrumb{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--muted);margin-bottom:1.25rem;flex-wrap:wrap}.breadcrumb a:hover{color:var(--ink)}.breadcrumb span{color:var(--muted-2)}
.page-offset{padding-top:calc(var(--header-h) + var(--announce-h) + 2rem)}
.catalog-layout{display:grid;grid-template-columns:220px 1fr;gap:4rem;align-items:start}
.catalog-sidebar{position:sticky;top:calc(var(--header-h) + var(--announce-h) + 2rem)}
.catalog-sidebar-title{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.filter-group{margin-bottom:1.75rem;padding-bottom:1.75rem;border-bottom:1px solid var(--line-soft)}.filter-group:last-child{border-bottom:none}
.filter-group-title{font-size:.8125rem;font-weight:500;color:var(--ink);margin-bottom:1rem;letter-spacing:-.008em}
.filter-check{display:flex;align-items:center;gap:.7rem;font-size:.8125rem;color:var(--ink);cursor:pointer;padding:.35rem 0;transition:color var(--tr)}.filter-check:hover{color:var(--muted)}
.filter-check input[type=checkbox]{width:15px;height:15px;accent-color:var(--ink);cursor:pointer}
.sort-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;gap:1rem}
.sort-count{font-size:.875rem;color:var(--muted)}
.sort-select{padding:.55rem 1rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-elev);font-size:.8125rem;cursor:pointer;color:var(--ink);appearance:none;padding-right:2rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.4' stroke-linecap='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem) clamp(1rem,2vw,1.75rem)}
.product-layout{display:grid;grid-template-columns:1fr 480px;gap:5rem;align-items:start}
.product-gallery{position:sticky;top:calc(var(--header-h) + var(--announce-h) + 2rem)}
.product-main-img{aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:var(--sand);margin-bottom:.75rem;cursor:zoom-in}
/* La foto tiene que llenar el marco, sea horizontal o vertical.
   El reset global da "img{width:100%;object-fit:cover}" pero sin alto:
   sin alto, object-fit no tiene contra qué ajustar y la imagen queda
   a su proporción natural. Una foto apaisada deja un hueco de arena
   abajo y una vertical se sale del marco y aparece recortada. */
.product-main-img::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--foto) center/cover no-repeat;
  filter:blur(18px);transform:scale(1.12)}
.product-main-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:filter 400ms}
.product-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}
.product-thumb{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--sand);cursor:pointer;border:2px solid transparent;transition:border-color var(--tr)}.product-thumb.active{border-color:var(--ink)}
.product-thumb img{width:100%;height:100%;object-fit:contain}
.product-info-eyeline{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.85rem}
.product-info-title{font-family:var(--ff-serif);font-size:clamp(2rem,3.5vw,2.75rem);font-weight:300;line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin-bottom:1rem}
.product-info-price{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem}
.product-info-price-main{font-family:var(--ff-serif);font-size:2rem;font-weight:400;letter-spacing:-.025em;color:var(--ink)}
.product-info-price-old{font-size:1.125rem;color:var(--muted-2);text-decoration:line-through}
.product-info-price-discount{font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--success);background:rgba(42,92,58,.08);padding:.25rem .6rem;border-radius:var(--r-pill)}
.product-divider{height:1px;background:var(--line-soft);margin:1.75rem 0}
.product-options-label{font-size:.8125rem;font-weight:500;color:var(--ink);margin-bottom:.75rem;display:flex;justify-content:space-between}.product-options-label span{color:var(--muted);font-weight:400}
.size-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.size-btn{padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.8125rem;font-weight:500;color:var(--muted);transition:border-color var(--tr),color var(--tr),background var(--tr);background:var(--bg-elev);cursor:pointer}
.size-btn:hover{border-color:var(--ink);color:var(--ink)}.size-btn.active{border-color:var(--ink);background:var(--ink);color:#fff}
.material-swatches{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.material-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border-color var(--tr),transform var(--tr);outline-offset:3px}
.material-swatch:hover{transform:scale(1.1)}.material-swatch.active{border-color:var(--ink)}
.add-to-cart-row{display:grid;grid-template-columns:120px 1fr;gap:.75rem;margin-bottom:1rem}
.qty-large{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty-large-btn{width:42px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--muted);transition:background var(--tr),color var(--tr);cursor:pointer;background:none;border:none;font:inherit}
.qty-large-btn:hover{background:var(--paper);color:var(--ink)}.qty-large-val{font-size:.9375rem;font-weight:500;font-variant-numeric:tabular-nums}
.spec-row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft);font-size:.875rem}
.spec-key{color:var(--muted)}.spec-val{color:var(--ink);font-weight:500;text-align:right}
.cart-overlay{display:none;position:fixed;inset:0;background:rgba(17,17,17,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:199}.cart-overlay.open{display:block}
.cart-drawer{position:fixed;right:0;top:0;bottom:0;width:min(480px,100vw);z-index:200;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(32px) saturate(180%);backdrop-filter:blur(32px) saturate(180%);border-left:1px solid var(--line-soft);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 550ms var(--ease-out);box-shadow:-20px 0 60px -20px rgba(17,17,17,.15)}
.cart-drawer.open{transform:translateX(0)}
.cart-header{height:72px;padding:0 1.75rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-soft)}
.cart-title{font-family:var(--ff-serif);font-size:1.5rem;font-weight:300;letter-spacing:-.025em}
.cart-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);transition:background var(--tr);cursor:pointer;background:none;border:none;font:inherit;color:inherit}.cart-close:hover{background:var(--paper)}
.cart-body{flex:1;overflow-y:auto;padding:1.5rem 1.75rem;display:flex;flex-direction:column;gap:1.25rem}
.cart-empty{margin:auto;text-align:center;color:var(--muted)}.cart-empty p{margin-bottom:1rem}
.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:start}
.cart-item-img{position:relative;width:64px;height:76px;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.cart-item-img::before{content:'';position:absolute;inset:0;z-index:0;background:var(--foto) center/cover no-repeat;filter:blur(8px);transform:scale(1.15)}
.cart-item-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain}
.cart-item-name{font-size:.875rem;font-weight:500;line-height:1.3}
.cart-item-meta{font-size:.8125rem;color:var(--muted);margin-top:.3rem}
.cart-item-remove{background:none;border:none;font:inherit;cursor:pointer;padding:0;margin-top:.5rem;font-size:.75rem;color:var(--muted);text-decoration:underline}
.cart-item-sub{font-size:.875rem;white-space:nowrap}
.cart-drawer-footer{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:1rem}
.cart-drawer-total{display:flex;justify-content:space-between;align-items:baseline;font-size:.9375rem}.cart-drawer-total strong{font-family:var(--ff-serif);font-size:1.35rem;font-weight:400}
.toast{position:fixed;bottom:2.25rem;left:50%;z-index:300;transform:translateX(-50%) translateY(160%);background:rgba(17,17,17,.94);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);color:#fff;padding:1rem 1.6rem;border-radius:var(--r-pill);font-size:.875rem;font-weight:500;display:flex;align-items:center;gap:.75rem;transition:transform 560ms cubic-bezier(.16,1,.3,1);white-space:nowrap;border:1px solid rgba(255,255,255,.08);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 48px -12px rgba(0,0,0,.45);pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}.toast-icon{color:#86D6A4;display:flex}
.form-group{margin-bottom:1.5rem}.form-label{display:block;font-size:.75rem;font-weight:500;letter-spacing:.08em;color:var(--muted);margin-bottom:.55rem;text-transform:uppercase}
.form-input{width:100%;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-elev);font-size:.9375rem;color:var(--ink);transition:border-color var(--tr),box-shadow var(--tr);appearance:none}
.form-input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,17,.07)}.form-input::placeholder{color:var(--muted-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.checkout-step-title{font-family:var(--ff-serif);font-size:1.5rem;font-weight:300;letter-spacing:-.025em;margin-bottom:1.75rem;color:var(--ink)}
/* La aparición al hacer scroll se sacó: cada bloque esperaba a que el
   IntersectionObserver lo marcara para pasar de opacity:0 a 1, y eso se
   veía como que el sitio se iba armando solo mientras scrolleabas. Peor:
   si el js no llegaba, esos bloques quedaban invisibles para siempre.
   Ahora el contenido está siempre, desde el primer paint. */
@media(max-width:1100px){.catalog-layout{grid-template-columns:200px 1fr;gap:3rem}.catalog-grid{grid-template-columns:repeat(2,1fr)}.products-grid{grid-template-columns:repeat(3,1fr)}.footer-inner{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:900px){:root{--header-h:62px}.categories-grid{grid-template-columns:repeat(3,1fr)}.products-grid{grid-template-columns:repeat(2,1fr)}.benefits-list{grid-template-columns:repeat(2,1fr)}.product-layout{grid-template-columns:1fr;gap:3rem}.product-gallery{position:static}.catalog-layout{grid-template-columns:1fr}.catalog-sidebar{position:static}}
@media(max-width:600px){.categories-grid{grid-template-columns:repeat(2,1fr)}.products-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem .75rem}.catalog-grid{grid-template-columns:repeat(2,1fr)}.benefits-list{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr}.add-to-cart-row{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.product-thumbs{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@supports not((backdrop-filter:blur(1px))or(-webkit-backdrop-filter:blur(1px))){.cart-drawer{background:rgba(247,247,247,.99)}.mobile-menu{background:rgba(247,247,247,.99)}}
@media print{.site-header,.announce-bar,.cart-drawer,.cart-overlay,.toast,.site-footer,body::before{display:none!important}}