/* Jardinova · Vivero (Catálogo + Trabajos)
   Mismo sistema de marca que la landing: bosque / crema / oro, Fraunces + Inter.
   Solo se anima transform/opacity. Respeta prefers-reduced-motion. */

:root {
  --c-bosque: #0f2117;
  --c-bosque-2: #16291d;
  --c-bosque-3: #0a1510;
  --c-verde: #2d5635;
  --c-verde-claro: #5a9e65;
  --c-crema: #fbf7ee;
  --c-crema-2: #f3ecdc;
  --c-estudio: #fff;   /* fondo de las fotos de producto (materas de estudio) */
  --c-oro: #c8a84b;
  --c-oro-2: #e0c779;
  --c-tinta: #14271b;
  --c-gris: #56645a;          /* 6.1:1 sobre crema */
  --c-linea: rgba(20, 39, 27, .12);
  --c-wa: #1f8f4e;            /* verde WhatsApp oscurecido: 4.9:1 con blanco */

  --f-serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: clamp(3rem, 8vw, 6.5rem);
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 1280px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --sombra: 0 1px 2px rgba(10, 21, 16, .06), 0 12px 32px -12px rgba(10, 21, 16, .18);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-rapida: 180ms; --t-media: 420ms; --t-lenta: 900ms;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 72px); }
body {
  margin: 0; background: var(--c-crema); color: var(--c-tinta);
  font: 400 clamp(.95rem, .9rem + .2vw, 1.05rem)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-oro); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--c-oro); color: var(--c-tinta); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.salto:focus { top: var(--s-4); }
.contenedor { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.serif { font-family: var(--f-serif); font-optical-sizing: auto; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); border-bottom: 1px solid var(--c-linea); }
/* El desenfoque va en una capa aparte: backdrop-filter en .nav convertiría a la
   barra inferior (position:fixed) en hija de la cabecera y la pintaría arriba. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 247, 238, .82); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.nav .contenedor { height: 100%; display: flex; align-items: center; gap: var(--s-4); }
.nav-logo { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; font: 600 1.15rem var(--f-serif); letter-spacing: -.01em; margin-right: auto; }
.nav-logo img { width: 34px; height: 34px; border-radius: 9px; }
.nav-links { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
  text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--c-gris); border-radius: var(--r-pill);
  transition: color var(--t-rapida), background-color var(--t-rapida);
}
.nav-links a:hover { color: var(--c-tinta); background: rgba(20, 39, 27, .06); }
.nav-links a[aria-current="page"] { color: var(--c-tinta); background: rgba(20, 39, 27, .08); }
@media (max-width: 719px) {
  .nav-links { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; justify-content: space-around; padding: var(--s-1) var(--s-2) calc(var(--s-1) + env(safe-area-inset-bottom));
    background: rgba(251, 247, 238, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--c-linea); }
  .nav-links a { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; font-size: .78rem; padding: 0 var(--s-4); }
  .nav-links svg { width: 20px; height: 20px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) { .nav-links svg { display: none; } }

/* ---------- Selector de idioma (ES · EN · PT) — control segmentado ---------- */
.idiomas { display: flex; gap: 2px; list-style: none; margin: 0; padding: 3px; border-radius: var(--r-pill); background: rgba(20, 39, 27, .06); }
.idiomas:empty { display: none; }  /* sin JS no hay selector (los textos quedan en español) */
.idiomas a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 38px; min-height: 38px; padding: 0 var(--s-3);
  border-radius: var(--r-pill); text-decoration: none; font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  color: var(--c-gris); transition: color var(--t-rapida), background-color var(--t-rapida), box-shadow var(--t-rapida);
}
.idiomas a:hover { color: var(--c-tinta); }
.idiomas a[aria-current="true"] { background: #fff; color: var(--c-tinta); box-shadow: 0 1px 2px rgba(10, 21, 16, .12); }
.idiomas .bandera { flex-shrink: 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.idiomas a:not([aria-current="true"]) .bandera { opacity: .85; }
@media (pointer: coarse) { .idiomas a { min-width: 44px; min-height: 44px; } }
/* En celular solo la bandera (el nombre del idioma queda en aria-label), como en la landing */
@media (max-width: 559px) { .idiomas .idioma-cod { display: none; } .idiomas a { padding: 0 var(--s-2); } }
@media (max-width: 359px) { .idiomas a { min-width: 36px; padding: 0 6px; } }

/* ---------- Aviso de país (vivero solo Colombia, app mundial) ---------- */
.aviso-pais { background: var(--c-bosque); color: rgba(251, 247, 238, .88); font-size: .84rem; }
.aviso-pais .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; padding-block: 8px; text-align: center; }
.aviso-pais strong { color: var(--c-crema); font-weight: 600; }
.aviso-pais a { color: var(--c-oro-2); font-weight: 600; text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
/* TACTIL-01: en pantallas táctiles el área de toque llega a 44 px (HIG), como ya hace .idiomas */
@media (pointer: coarse) { .aviso-pais a { min-height: 44px; } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-pill); border: 0; cursor: pointer;
  font-weight: 600; font-size: .98rem; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-rapida) var(--ease), background-color var(--t-rapida), box-shadow var(--t-rapida);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-wa { background: var(--c-wa); color: #fff; }
.btn-wa:hover { background: #197a42; }
.btn-oro { background: var(--c-oro-2); color: var(--c-tinta); }
.btn-oro:hover { background: #ead48f; }
.btn-linea { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-linea:hover { background: rgba(255, 255, 255, .08); }
.btn-sm { min-height: 44px; padding: 0 var(--s-4); font-size: .9rem; }
.nav .btn-wa { min-height: 44px; padding: 0 var(--s-4); }
@media (max-width: 719px) { .nav .btn-wa span { display: none; } .nav .btn-wa { width: 44px; padding: 0; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--c-crema);
  background: radial-gradient(120% 90% at 50% -10%, var(--c-bosque-2), var(--c-bosque) 48%, var(--c-bosque-3));
  padding-block: clamp(3.5rem, 10vw, 7.5rem) clamp(3rem, 7vw, 5.5rem);
}
.hero-fondo { position: absolute; inset: 0; z-index: -1; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; opacity: .38; transform: scale(1.06); }
.hero-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 21, 16, .55), rgba(10, 21, 16, .35) 40%, rgba(10, 21, 16, .92)); }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-oro-2); margin: 0 0 var(--s-4); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero h1 {
  font: 400 clamp(2.5rem, 1.4rem + 5.6vw, 5.6rem)/1 var(--f-serif); letter-spacing: -.03em; margin: 0; max-width: 14ch;
}
.hero h1 em { font-style: italic; color: var(--c-oro-2); }
.hero-sub { max-width: 52ch; margin: var(--s-5) 0 0; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); color: rgba(251, 247, 238, .82); }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-datos { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); margin: var(--s-7) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid rgba(251, 247, 238, .16); }
.hero-datos div { min-width: 120px; }
.hero-datos dt { font-size: .8rem; color: rgba(251, 247, 238, .66); order: 2; }
.hero-datos dd { margin: 0; font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.1 var(--f-serif); color: var(--c-crema); }
.hero-datos div { display: flex; flex-direction: column-reverse; gap: 4px; }
@media (max-width: 559px) {
  .hero-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-6); }
  .hero-datos div { min-width: 0; }
  .hero-datos dt { font-size: .72rem; line-height: 1.3; }
  .hero-datos:has(div:nth-child(2):last-child) { grid-template-columns: auto 1fr; gap: var(--s-5); }
  .hero-acciones .btn { flex: 1 1 100%; }
}

/* línea por línea (máscara) */
.linea { display: block; overflow: hidden; padding-bottom: .06em; }
.linea > span { display: block; transform: translateY(105%); transition: transform var(--t-lenta) var(--ease); }
.listo .linea > span { transform: none; }
.listo .linea:nth-child(2) > span { transition-delay: 90ms; }
.listo .linea:nth-child(3) > span { transition-delay: 180ms; }

/* ---------- Barra de filtros (sticky) ---------- */
.filtros {
  position: sticky; top: var(--nav-h); z-index: 40; background: rgba(251, 247, 238, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-linea);
}
.filtros .contenedor { display: grid; gap: var(--s-3); padding-block: var(--s-3); }
@media (min-width: 960px) { .filtros .contenedor { grid-template-columns: 1fr auto auto; align-items: center; } }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-linea); background: #fff; cursor: pointer; font-weight: 500; font-size: .9rem; color: var(--c-gris);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: background-color var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida) var(--ease);
}
.chip:active { transform: scale(.96); }
.chip:hover { color: var(--c-tinta); border-color: rgba(20, 39, 27, .3); }
.chip[aria-pressed="true"] { background: var(--c-bosque); border-color: var(--c-bosque); color: var(--c-crema); }
.chip .n { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }
.buscador { display: flex; gap: var(--s-2); }
.campo { position: relative; flex: 1; }
.campo svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--c-gris); pointer-events: none; }
.campo input, .orden select {
  width: 100%; min-height: 44px; border: 1px solid var(--c-linea); border-radius: var(--r-pill); background: #fff;
  font: inherit; font-size: 16px; /* evita zoom en iOS */ color: var(--c-tinta);
}
.campo input { padding: 0 var(--s-4) 0 42px; }
.campo input::placeholder { color: #7a857d; }
.orden select { padding: 0 36px 0 var(--s-4); appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath stroke='%2356645a' stroke-width='1.6' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center; }
@media (min-width: 960px) {
  .filtros .contenedor { grid-template-columns: minmax(0, 1fr) auto; }
  .campo { width: 260px; }
  /* una sola fila deslizable, con desvanecido en los bordes */
  .chips { margin: 0; padding: 0 var(--s-6) 0 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
}

/* ---------- Grilla de productos ---------- */
.seccion { padding-block: var(--s-8); }
.resumen { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-5); color: var(--c-gris); font-size: .92rem; }
.resumen strong { color: var(--c-tinta); font-weight: 600; }
.grilla { display: grid; gap: clamp(.75rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(46%, 240px), 1fr)); list-style: none; margin: 0; padding: 0; }
.tarjeta { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sombra); }
.tarjeta-foto { position: relative; aspect-ratio: 4 / 5; background: var(--c-crema-2); overflow: hidden; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-lenta) var(--ease), opacity var(--t-media); opacity: 0; }
.tarjeta-foto img.cargada { opacity: 1; }
@media (hover: hover) { .tarjeta:hover .tarjeta-foto img { transform: scale(1.05); } }
.etiqueta { position: absolute; left: var(--s-2); top: var(--s-2); padding: 4px 10px; border-radius: var(--r-pill); background: rgba(251, 247, 238, .92); font-size: .72rem; font-weight: 600; color: var(--c-tinta); backdrop-filter: blur(6px); }
.tarjeta-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: var(--s-3) var(--s-3) var(--s-4); flex: 1; }
.tarjeta h3 { margin: 0; font: 500 clamp(.98rem, .9rem + .3vw, 1.12rem)/1.25 var(--f-serif); letter-spacing: -.01em; }
.tarjeta h3 button { all: unset; cursor: pointer; }
.tarjeta h3 button::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta abre el detalle */
.tarjeta h3 button:focus-visible::after { outline: 3px solid var(--c-oro); outline-offset: -3px; border-radius: var(--r-md); }
.meta { margin: 0; font-size: .8rem; color: var(--c-gris); }
.precio-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.precio { font-weight: 700; font-size: clamp(.98rem, .92rem + .3vw, 1.1rem); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.precio small { display: block; font-weight: 500; font-size: .7rem; color: var(--c-gris); letter-spacing: 0; }
.btn-pedir { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--c-wa); color: #fff; text-decoration: none;
  transition: transform var(--t-rapida) var(--ease), background-color var(--t-rapida); }
.btn-pedir:hover { background: #197a42; transform: scale(1.06); }
.btn-pedir:active { transform: scale(.94); }
.btn-pedir svg { width: 20px; height: 20px; }
.mas { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-7); color: var(--c-gris); font-size: .9rem; }
.progreso { width: min(240px, 60%); height: 3px; border-radius: 3px; background: var(--c-linea); overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--c-verde); transform-origin: left; transition: transform var(--t-media) var(--ease); }
.btn-oscuro { background: var(--c-bosque); color: var(--c-crema); }
.btn-oscuro:hover { background: var(--c-verde); }
.vacio { text-align: center; padding: var(--s-8) var(--s-4); }
.vacio h3 { font: 400 1.6rem var(--f-serif); margin: 0 0 var(--s-2); }
.vacio p { color: var(--c-gris); margin: 0 0 var(--s-5); }

/* ---------- Teselas de categoría ---------- */
.seccion-teselas { padding-bottom: var(--s-6); }
.teselas { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.6rem, 1.6vw, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); }
.tesela { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; cursor: pointer; background: var(--c-bosque); isolation: isolate; }
.tesela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: transform var(--t-lenta) var(--ease), opacity var(--t-media); }
.tesela img.cargada { opacity: .92; }
.tesela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 21, 16, .85)); }
.tesela-txt { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 1; color: var(--c-crema); display: grid; gap: 2px; }
.tesela-txt strong { font: 500 clamp(1.05rem, .95rem + .5vw, 1.35rem)/1.15 var(--f-serif); letter-spacing: -.01em; }
.tesela-txt span { font-size: .8rem; opacity: .8; }
.tesela:focus-visible { outline: 3px solid var(--c-oro); outline-offset: 3px; }
@media (hover: hover) { .tesela:hover img { transform: scale(1.06); } }

/* ---------- Secciones por categoría ---------- */
.seccion-cat { padding-block: var(--s-6); border-top: 1px solid var(--c-linea); }
.seccion-cat:first-child { border-top: 0; padding-top: 0; }
.seccion-cat-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-5); }
.seccion-cat-cabeza h2 { margin: 0; font: 400 clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem)/1.05 var(--f-serif); letter-spacing: -.02em; }
.seccion-cat-cabeza p { margin: var(--s-2) 0 0; color: var(--c-gris); font-size: .95rem; max-width: 56ch; }
.ver-todos { all: unset; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--s-2); cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--c-verde); border-radius: var(--r-sm); }
.ver-todos svg { width: 18px; height: 18px; transition: transform var(--t-rapida) var(--ease); }
.ver-todos:hover svg { transform: translateX(3px); }
.ver-todos:focus-visible { outline: 3px solid var(--c-oro); }
.seccion-cat-pie { display: flex; justify-content: center; margin-top: var(--s-5); }
.btn-linea-oscuro { background: transparent; color: var(--c-tinta); box-shadow: inset 0 0 0 1.5px rgba(20, 39, 27, .35); }
.btn-linea-oscuro:hover { box-shadow: inset 0 0 0 1.5px var(--c-tinta); }
.eyebrow-verde { color: var(--c-verde); margin: 0; }
@media (max-width: 559px) { .seccion-cat-cabeza p { display: none; } }

/* Botón "agregar al pedido" en la tarjeta */
.btn-agregar { position: relative; z-index: 1; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--c-bosque); color: var(--c-crema);
  transition: transform var(--t-rapida) var(--ease), background-color var(--t-rapida); }
.btn-agregar:hover { background: var(--c-verde); transform: scale(1.06); }
.btn-agregar:active { transform: scale(.92); }
.btn-agregar svg { width: 20px; height: 20px; }
.detalle-acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.detalle-acciones .btn { flex: 1 1 180px; }

/* ---------- Colores de las materas de cemento ---------- */
:root { --col-blanco: #f4f2ec; --col-negro: #2b2b2b; --col-cemento: #b9bcb6; }
.punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(20, 39, 27, .25); flex: none; }
.punto-blanco { background: var(--col-blanco); } .punto-negro { background: var(--col-negro); } .punto-cemento { background: var(--col-cemento); }
.puntos-color { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: .74rem; color: var(--c-gris); }
.puntos-color .punto:last-of-type { margin-right: 4px; }
.color-campo { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.color-campo legend { font-weight: 600; font-size: .92rem; margin-bottom: var(--s-2); padding: 0; }
.colores { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.color { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4) 0 var(--s-2); border-radius: var(--r-pill); cursor: pointer;
  border: 1.5px solid var(--c-linea); background: #fff; font-weight: 500; font-size: .92rem; color: var(--c-tinta);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida), transform var(--t-rapida) var(--ease); }
.color:active { transform: scale(.96); }
.color .muestra { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20, 39, 27, .25); }
.color-blanco .muestra { background: var(--col-blanco); } .color-negro .muestra { background: var(--col-negro); } .color-cemento .muestra { background: var(--col-cemento); }
.color[aria-checked="true"] { border-color: var(--c-bosque); box-shadow: 0 0 0 2px var(--c-bosque); }
.color-figura { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: var(--s-3); align-items: center; padding: var(--s-2); border-radius: var(--r-md); background: var(--c-crema-2); }
.color-ref { width: 84px; height: auto; border-radius: var(--r-sm); transition: opacity var(--t-rapida); }
.color-ref-txt { font-size: .82rem; color: var(--c-gris); }
/* Selector de tamaño (metálicas N.1, N.2…): una fila por tamaño — referencia · medida · precio */
.tamano-campo { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tamano-campo legend { font-weight: 600; font-size: .92rem; margin-bottom: var(--s-2); padding: 0; }
.tamanos { display: grid; gap: var(--s-2); }
.tamano { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md); border: 1.5px solid var(--c-linea); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--c-tinta);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida), transform var(--t-rapida) var(--ease); }
.tamano:active { transform: scale(.98); }
.tamano strong { font-size: .86rem; letter-spacing: .02em; }
.tamano-medida { font-size: .86rem; color: var(--c-gris); }
.tamano-precio { font-weight: 600; font-variant-numeric: tabular-nums; }
.tamano[aria-checked="true"] { border-color: var(--c-bosque); box-shadow: 0 0 0 2px var(--c-bosque); }
@media (hover: hover) { .tamano:hover { border-color: var(--c-verde-claro); } }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.pedido-color { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 500; }

/* ---------- Pedido: botón flotante + panel ---------- */
.fab-pedido { position: fixed; right: var(--s-4); bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 52px; padding: 0 var(--s-5) 0 var(--s-4); border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--c-bosque); color: var(--c-crema);
  font-weight: 600; box-shadow: 0 12px 30px -8px rgba(10, 21, 16, .5); }
.fab-pedido[hidden] { display: none; }
.fab-pedido svg { width: 22px; height: 22px; }
.fab-n { min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-oro-2); color: var(--c-tinta); font-size: .8rem; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.fab-pedido.salta { animation: salta 420ms var(--ease); }
@keyframes salta { 30% { transform: scale(1.12); } 60% { transform: scale(.96); } }
@media (min-width: 720px) { .fab-pedido { bottom: var(--s-6); right: var(--s-6); } }
@media (max-width: 380px) { .fab-txt { display: none; } }

.pedido { margin: 0 0 0 auto; width: min(440px, 100%); height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--c-crema); color: var(--c-tinta); }
.pedido[open] { display: flex; flex-direction: column; animation: desliza var(--t-media) var(--ease); }
.pedido::backdrop { background: rgba(10, 21, 16, .55); backdrop-filter: blur(3px); }
@keyframes desliza { from { transform: translateX(40px); opacity: 0; } }
@media (max-width: 559px) {
  .pedido { margin: auto 0 0; width: 100%; max-width: none; height: auto; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  @keyframes desliza { from { transform: translateY(40px); opacity: 0; } }
}
.pedido-cabeza { position: relative; display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-4); border-bottom: 1px solid var(--c-linea); }
.pedido-cabeza h2 { margin: 0; font: 400 1.7rem var(--f-serif); letter-spacing: -.02em; }
.pedido-cuenta { color: var(--c-gris); font-size: .9rem; }
.pedido-cabeza .cerrar { top: 50%; transform: translateY(-50%); }
.pedido-lista { list-style: none; margin: 0; padding: var(--s-2) var(--s-5); overflow-y: auto; flex: 1; }
.pedido-lista li { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-linea); }
.pedido-lista img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--r-sm); background: var(--c-crema-2); }
.pedido-info { display: grid; gap: 2px; min-width: 0; }
.pedido-info strong { font: 500 1rem/1.25 var(--f-serif); }
.pedido-sub { font-weight: 700; font-variant-numeric: tabular-nums; align-self: start; padding-top: 2px; }
.cantidad { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--s-1); border: 1px solid var(--c-linea); border-radius: var(--r-pill); width: max-content; background: #fff; }
.cantidad output { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.paso { width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--c-tinta); }
.paso:hover { background: rgba(20, 39, 27, .07); }
.paso svg { width: 18px; height: 18px; }
.pedido-pie { padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-linea); display: grid; gap: var(--s-3); background: #fff; }
.pedido-total { display: flex; justify-content: space-between; align-items: baseline; }
.pedido-total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pedido-notas { margin: 0; padding-left: 1.1em; color: var(--c-gris); font-size: .8rem; display: grid; gap: 2px; }
.pedido-enviar { width: 100%; }
.pedido-vaciar { all: unset; justify-self: center; cursor: pointer; font-size: .85rem; color: var(--c-gris); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; display: inline-flex; align-items: center; }
.pedido-vaciar:focus-visible { outline: 3px solid var(--c-oro); }
.pedido-vacio { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-5); text-align: center; }
.pedido-vacio > svg { width: 48px; height: 48px; color: var(--c-gris); }
.pedido-vacio p { margin: 0; }

/* ---------- Detalle (dialog) ---------- */
.detalle { width: min(960px, 100% - 2 * var(--s-4)); max-height: calc(100dvh - 2 * var(--s-4)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--c-crema); color: var(--c-tinta); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .45); overflow: auto; }
.detalle::backdrop { background: rgba(10, 21, 16, .62); backdrop-filter: blur(4px); }
.detalle[open] { animation: entra var(--t-media) var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.detalle-grid { display: grid; }
@media (min-width: 760px) { .detalle-grid { grid-template-columns: 1.05fr 1fr; } }
.detalle-foto { background: var(--c-crema-2); }
.detalle-foto img { width: 100%; height: 100%; max-height: 72dvh; object-fit: cover; }
@media (max-width: 759px) { .detalle-foto img { max-height: 52dvh; } }
.detalle-info { padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--s-4); }
.detalle-info h2 { margin: 0; font: 400 clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem)/1.05 var(--f-serif); letter-spacing: -.02em; }
.detalle-info .nombre-vivero { margin: calc(var(--s-3) * -1) 0 0; font-size: .82rem; color: var(--c-gris); font-style: italic; }  /* nombre del vivero (el que va en el pedido) */
.detalle-precio { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.detalle-precio small { font-size: .85rem; font-weight: 500; color: var(--c-gris); }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); margin: 0; font-size: .92rem; }
.ficha dt { color: var(--c-gris); }
.ficha dd { margin: 0; font-weight: 500; }
.nota { font-size: .82rem; color: var(--c-gris); margin: 0; }
.cerrar { position: absolute; right: var(--s-3); top: var(--s-3); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(251, 247, 238, .92); display: grid; place-items: center; box-shadow: var(--sombra); }
.cerrar svg { width: 20px; height: 20px; }

/* ---------- Bandas oscuras / CTA ---------- */
.banda { background: radial-gradient(120% 85% at 50% -8%, var(--c-bosque-2), var(--c-bosque) 46%, var(--c-bosque-3)); color: var(--c-crema); }
.banda h2 { font: 400 clamp(2rem, 1.3rem + 3vw, 3.6rem)/1.02 var(--f-serif); letter-spacing: -.025em; margin: 0; max-width: 18ch; }
.banda h2 em { font-style: italic; color: var(--c-oro-2); }
.banda p { color: rgba(251, 247, 238, .8); max-width: 54ch; }
.cta-grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.3fr 1fr; } }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); align-items: start; padding: var(--s-4); border: 1px solid rgba(251, 247, 238, .14); border-radius: var(--r-md); background: rgba(251, 247, 238, .03); }
.pasos li::before { content: counter(paso); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--c-oro-2); color: var(--c-tinta); font: 600 1.1rem var(--f-serif); }
.pasos strong { display: block; color: var(--c-crema); font-weight: 600; }
.pasos span { font-size: .9rem; color: rgba(251, 247, 238, .72); }

/* Visítanos */
.visita { display: grid; gap: var(--s-5); }
@media (min-width: 860px) { .visita { grid-template-columns: repeat(3, 1fr); } }
.visita-item { padding: var(--s-5); background: #fff; border-radius: var(--r-md); box-shadow: var(--sombra); }
.visita-item h3 { margin: 0 0 var(--s-2); font: 500 1.2rem var(--f-serif); }
.visita-item p { margin: 0; color: var(--c-gris); font-size: .95rem; }
.visita-item a { font-weight: 600; color: var(--c-verde); text-underline-offset: 3px; }
.titulo-sec { font: 400 clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem)/1.05 var(--f-serif); letter-spacing: -.025em; margin: 0 0 var(--s-6); max-width: 20ch; }
.titulo-sec em { font-style: italic; color: var(--c-verde); }

/* ---------- Trabajos ---------- */
/* Franja de logos de clientes */
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) clamp(1rem, 4vw, 3rem); align-items: center; }
.logo-cliente { display: grid; place-items: center; min-height: 72px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); transition: transform var(--t-rapida) var(--ease); }
.logo-cliente:hover { transform: translateY(-2px); }
.logo-cliente img { height: 56px; width: auto; max-width: 150px; object-fit: contain; mix-blend-mode: multiply; }
.seccion-logos { padding-block: var(--s-6); border-bottom: 1px solid var(--c-linea); }
.seccion-logos p { text-align: center; margin: 0 0 var(--s-4); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gris); }
@keyframes aparece { from { opacity: 0; } }

/* ---------- Footer ---------- */
.pie { background: var(--c-bosque-3); color: rgba(251, 247, 238, .7); padding-block: var(--s-7); font-size: .9rem; }
.pie .contenedor { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .pie .contenedor { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.pie h2 { font: 500 1.3rem var(--f-serif); color: var(--c-crema); margin: 0 0 var(--s-2); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.pie a { color: rgba(251, 247, 238, .85); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.pie a:hover { color: var(--c-oro-2); }
@media (pointer: coarse) { .pie a { min-height: 44px; } }  /* TACTIL-01 */
/* LEGAL-01: identificación del vendedor (Ley 1480 art. 50) */
.pie-titular { grid-column: 1 / -1; margin: 0; padding-top: var(--s-5); border-top: 1px solid rgba(251, 247, 238, .12); font-size: .8rem; line-height: 1.6; }
.pie-titular a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 2px; }
.pie-titular + .pie-legal { border-top: 0; padding-top: 0; }
.pie-legal { grid-column: 1 / -1; padding-top: var(--s-5); border-top: 1px solid rgba(251, 247, 238, .12); font-size: .8rem; }

/* ---------- Reveal ---------- */
.aparece { opacity: 0; transform: translateY(24px); transition: opacity var(--t-lenta) var(--ease), transform var(--t-lenta) var(--ease); }
.aparece.visible { opacity: 1; transform: none; }

/* ---------- Toast (feedback < 100 ms) ---------- */
.aviso { position: fixed; left: 50%; bottom: calc(142px + env(safe-area-inset-bottom)); /* encima del botón "Mi pedido" */ z-index: 90; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--c-bosque); color: var(--c-crema); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); font-size: .9rem; box-shadow: var(--sombra);
  transition: opacity var(--t-rapida), transform var(--t-media) var(--ease); }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 720px) { .aviso { bottom: calc(var(--s-6) + 70px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .aparece, .linea > span { opacity: 1; transform: none; }
}


/* ---------- Portada: la foto de fondo respira despacio (una sola animación de entrada) ---------- */
@keyframes respira { from { transform: scale(1.14); } to { transform: scale(1.06); } }
.hero-fondo img { animation: respira 2.4s var(--ease) both; }

/* ---------- Materas de piso: escala de tallas sobre una regla en cm ----------
   Cada matera se dibuja a su alto real (--alto = cm / 120). Las fotos de estudio traen fondo
   blanco: con mix-blend-mode multiply el blanco desaparece sobre el crema y queda solo la matera. */
.tallas-sec[hidden] { display: none; }
.tallas-sec { --h-escala: clamp(220px, 26vw, 360px); background: var(--c-crema-2); padding-block: var(--s-8); border-block: 1px solid var(--c-linea); }
.tallas-grid { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 980px) { .tallas-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-7); } }
.tallas-cabeza .titulo-sec { margin-bottom: var(--s-4); }
.tallas-cabeza p:last-child { margin: 0; color: var(--c-gris); max-width: 44ch; }
.escala { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s-2); }
.regla { position: relative; height: var(--h-escala); border-right: 1px solid rgba(20, 39, 27, .35); }
.regla span { position: absolute; right: 8px; bottom: calc(var(--cm) * 100%); transform: translateY(50%); font-size: .7rem; color: var(--c-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.regla span::after { content: ""; position: absolute; right: -8px; top: 50%; width: 6px; height: 1px; background: rgba(20, 39, 27, .45); }
.escala-marco { overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--s-2); }
/* columnas según lo ancha que es cada talla: la XXXL necesita más piso */
.escala-lista { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1.15fr 2.1fr; gap: clamp(.25rem, 1.5vw, 1.25rem); min-width: 600px; }
/* líneas guía cada 20 cm, solo en la zona de las materas */
.escala-lista::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--h-escala); pointer-events: none;
  background: repeating-linear-gradient(to top, rgba(20, 39, 27, .1) 0 1px, transparent 1px calc(var(--h-escala) / 6)); border-bottom: 2px solid var(--c-tinta); }
.escala-item { all: unset; box-sizing: border-box; display: grid; grid-template-rows: var(--h-escala) auto; width: 100%; cursor: pointer; border-radius: var(--r-md); }
.escala-item:focus-visible { outline: 3px solid var(--c-oro); outline-offset: 4px; }
.escala-figura { align-self: end; justify-self: center; height: calc(var(--alto) * var(--h-escala)); width: calc(var(--alto) * var(--h-escala) * var(--ar, 1)); display: flex; align-items: flex-end; transition: transform var(--t-media) var(--ease); }
.escala-figura img { height: 100%; width: 100%; object-fit: contain; object-position: bottom; mix-blend-mode: multiply; opacity: 0; transition: opacity var(--t-media); }
.escala-figura img.cargada { opacity: 1; }
@media (hover: hover) { .escala-item:hover .escala-figura { transform: translateY(-8px); } }
.escala-txt { display: grid; gap: 2px; padding-top: var(--s-3); text-align: center; justify-items: center; }
.escala-talla { font: 500 clamp(1.5rem, 1rem + 2.2vw, 2.6rem)/1 var(--f-serif); letter-spacing: -.02em; }
.escala-rango { font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.escala-uso { font-size: .8rem; color: var(--c-gris); max-width: 20ch; line-height: 1.35; }
.escala-n { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--s-1); font-size: .85rem; font-weight: 600; color: var(--c-verde); min-height: 32px; }
.escala-n svg { width: 16px; height: 16px; transition: transform var(--t-rapida) var(--ease); }
.escala-item:hover .escala-n svg { transform: translateX(3px); }
@media (max-width: 559px) {
  .escala { grid-template-columns: 38px minmax(0, 1fr); }
  .regla span { font-size: .62rem; right: 6px; }
  .escala-uso { display: none; }
}

/* Talla en la tarjeta y en la ficha */
.talla { position: absolute; left: var(--s-2); top: var(--s-2); min-width: 36px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-bosque); color: var(--c-crema);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-align: center; }
.talla-grande { font-size: 1rem; padding: 6px 14px; left: var(--s-4); top: var(--s-4); }

/* Fotos de estudio (fondo blanco): se muestran completas, sin recortar la matera */
.tarjeta-estudio .tarjeta-foto { background: #fff; }
.tarjeta-estudio .tarjeta-foto img { object-fit: contain; padding: 8%; }
.tesela-estudio { background: #fff; }
.tesela-estudio img { object-fit: contain; padding: 8% 16% 44%; }
/* Foto de estudio = fondo blanco: el degradado normal deja el título crema sobre blanco (ilegible).
   Aquí la franja oscura empieza antes y llega más densa bajo el texto (contraste AA medido sobre píxeles). */
.tesela-estudio::after { background: linear-gradient(180deg, transparent 30%, rgba(10, 21, 16, .82) 50%, rgba(10, 21, 16, .95) 72%); }
.tesela-estudio img.cargada { opacity: 1; }
.detalle-estudio { position: relative; background: #fff; display: grid; place-items: center; }
.detalle-estudio img { object-fit: contain; padding: 6%; }
.detalle-foto { position: relative; }
.detalle-desc { margin: 0; color: var(--c-gris); font-size: .94rem; line-height: 1.6; max-width: 60ch; }

/* Chips de talla (solo dentro de materas de piso) */
.chips-talla[hidden] { display: none; }
.chip-talla strong { font-weight: 700; }
.chip-talla .rango { font-size: .75rem; opacity: .75; }
@media (min-width: 960px) { .chips-talla { grid-column: 1 / -1; } }

/* Colores del proveedor: muestra con su color real */
.muestra { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20, 39, 27, .25); flex: none; }
.muestra.color-blanco { background: var(--col-blanco); } .muestra.color-negro { background: var(--col-negro); } .muestra.color-cemento { background: var(--col-cemento); }
.color-elegido { font-weight: 500; color: var(--c-gris); }
.color-campo legend { display: flex; gap: var(--s-1); }
.puntos-color .punto { margin-right: -2px; }
.puntos-color > span:last-child { margin-left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .hero-fondo img { animation: none; }
  .escala-figura { transition: none; }
}

/* Teselas: columnas fijas para que 11 categorías + la doble de "Materas de piso" cierren en filas completas (12 espacios) */
.teselas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .teselas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .teselas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .teselas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tesela-doble { grid-column: span 2; }
.tesela-doble .tesela { aspect-ratio: auto; height: 100%; min-height: 100%; }
@media (max-width: 599px) { .tesela-doble .tesela { aspect-ratio: 8 / 5; } }
.tesela-doble .tesela-estudio { background: var(--c-estudio); }
.tesela-doble .tesela-estudio img { object-position: 78% 40%; padding: 6% 4% 6% 42%; mix-blend-mode: multiply; }
.tesela-doble .tesela::after { background: linear-gradient(90deg, rgba(15, 33, 23, .92) 0%, rgba(15, 33, 23, .55) 42%, transparent 70%); }
.tesela-doble .tesela-txt strong { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); max-width: 10ch; }
.tesela-media .tesela::after { background: linear-gradient(90deg, rgba(15, 33, 23, .92) 0%, rgba(15, 33, 23, .55) 42%, transparent 70%); }
.tesela-media .tesela-estudio { background: var(--c-estudio); }
.tesela-media .tesela-estudio img { object-position: 85% 50%; padding: 6% 4% 6% 46%; mix-blend-mode: multiply; }
@media (max-width: 599px) {
  /* 2 columnas: importadas va sola arriba y quedan 11 sueltas → la primera "media" es tesela normal (10, pareja)
     y la ÚLTIMA es banda ancha como importadas: la grilla cierra sin hueco */
  .tesela-media:not(:last-child) .tesela::after { background: linear-gradient(180deg, transparent 40%, rgba(10, 21, 16, .85)); }
  .tesela-media:not(:last-child) .tesela-estudio img { object-position: 50% 50%; padding: 8% 16% 44%; }
  .tesela-media:last-child { grid-column: 1 / -1; }
  .tesela-media:last-child .tesela { aspect-ratio: 8 / 5; }
}
@media (min-width: 600px) { .tesela-media { grid-column: 1 / -1; } .tesela-media .tesela { aspect-ratio: 16 / 5; } }
@media (min-width: 900px) { .tesela-media { grid-column: span 2; } .tesela-media .tesela { aspect-ratio: 8 / 5; } }
@media (min-width: 1200px) { .tesela-media { grid-column: span 3; } .tesela-media .tesela { aspect-ratio: 12 / 5; } }
.tesela-nuevo { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 1; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-oro-2); color: var(--c-tinta); font-size: .74rem; font-weight: 700; }
/* la regla de tallas desliza DENTRO de su marco: nunca ensancha la página (min-width:auto de grid) */
.tallas-grid > *, .escala, .escala-marco { min-width: 0; }
/* Celular: las 4 tallas caben sin deslizar (escala más baja, columnas al ancho de cada matera) */
@media (max-width: 559px) {
  .tallas-sec { --h-escala: 170px; }
  .escala { grid-template-columns: 32px minmax(0, 1fr); }
  .escala-lista { min-width: 0; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px; }
  .escala-rango { font-size: .72rem; }
  .escala-n { font-size: .78rem; }
}

/* =========================================================================
   30/09 · Más profundidad (Juan: "la veo plana") y compra que se entienda
   ========================================================================= */

/* Tarjeta: se levanta al pasar el mouse. La sombra grande vive en ::before y solo cambia su opacidad
   (se anima transform/opacity, nunca box-shadow). */
.tarjeta { transition: transform var(--t-media) var(--ease); isolation: isolate; overflow: visible; }
.tarjeta > .tarjeta-foto { border-radius: var(--r-md) var(--r-md) 0 0; }
.tarjeta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-md);
  box-shadow: 0 22px 44px -18px rgba(10, 21, 16, .38); opacity: 0; transition: opacity var(--t-media) var(--ease); }
@media (hover: hover) {
  .tarjeta:hover { transform: translateY(-4px); }
  .tarjeta:hover::before { opacity: 1; }
}

/* Foto de estudio → FONDO BLANCO limpio (Juan 13/10/2026: "los fondos de las materas en blanco"; antes era un set
   crema con degradé). Solo queda la sombra de piso para que la matera no flote. multiply sigue: el blanco de la foto
   se funde con el del cuadro aunque la foto traiga un blanco "sucio" (#fafafa). */
.tarjeta-estudio .tarjeta-foto, .detalle-estudio { background: var(--c-estudio); }
/* object-position abajo (12/10/2026): un producto ancho y bajo (jardinera de balcón, plato) quedaba flotando en el medio
   y la sombra muy abajo. Ahora todo se PARA sobre su sombra; lo alto llena el cuadro igual que antes. */
.tarjeta-estudio .tarjeta-foto img, .detalle-estudio img { mix-blend-mode: multiply; object-fit: contain; object-position: 50% 100%; padding: 10% 12% 13%; }
.tarjeta-estudio .tarjeta-foto::after, .detalle-estudio::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 8%; height: 14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20, 39, 27, .18), transparent); }   /* más suave sobre blanco */
@media (hover: hover) { .tarjeta-estudio:hover .tarjeta-foto img { transform: scale(1.04) translateY(-2px); } }

/* Etiquetas sobre la foto: talla (izq.) y material (der.) */
.material { position: absolute; right: var(--s-2); top: var(--s-2); padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .88); color: var(--c-tinta); font-size: .72rem; font-weight: 600; box-shadow: 0 1px 2px rgba(10, 21, 16, .12); }

/* Precio más protagonista */
.tarjeta .precio-fila { padding-top: var(--s-2); }
.tarjeta .precio { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); }

/* Colores: máximo 3 muestras + "+n" */
.puntos-color .punto { width: 16px; height: 16px; margin-right: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(20, 39, 27, .18); }
.puntos-color { gap: 6px; }
.mas-colores { font-size: .72rem; font-weight: 700; color: var(--c-tinta); }
.puntos-txt { margin-left: 2px; }

/* Botón de compra: SIEMPRE con texto (antes era solo un ícono de bolsa y no se entendía) */
.btn-comprar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%;
  min-height: 46px; margin-top: var(--s-3); padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--c-bosque); color: var(--c-crema); font: 600 .92rem/1 var(--f-sans);
  transition: background-color var(--t-rapida), transform var(--t-rapida) var(--ease); }
.btn-comprar svg { width: 19px; height: 19px; flex: none; }
.btn-comprar:hover { background: var(--c-verde); }
.btn-comprar:active { transform: scale(.97); }
.btn-comprar:focus-visible { outline: 3px solid var(--c-oro); outline-offset: 3px; }
.btn-comprar[disabled] { opacity: .55; cursor: not-allowed; }
.btn-comprar.en-pedido { background: #fff; color: var(--c-verde); box-shadow: inset 0 0 0 1.5px var(--c-verde); }
.btn-comprar.en-pedido:hover { background: rgba(45, 86, 53, .08); }
.btn-comprar.hecho { animation: hecho 480ms var(--ease); }
@keyframes hecho { 0% { transform: scale(1); } 35% { transform: scale(1.05); } 100% { transform: scale(1); } }
.btn-comprar-grande { min-height: 54px; font-size: 1rem; margin-top: 0; }
.detalle-comprar { display: grid; gap: var(--s-2); }
.detalle-comprar .btn { width: 100%; }
.comprar-ayuda { margin: 0; font-size: .8rem; color: var(--c-gris); text-align: center; }
@media (max-width: 400px) { .btn-comprar { font-size: .84rem; padding: 0 var(--s-2); } }

/* Sub-filtros de materas importadas: Material y Talla, cada fila con su rótulo */
.sub-filtros[hidden] { display: none; }
.sub-filtros { display: grid; gap: var(--s-2); }
@media (min-width: 960px) { .sub-filtros { grid-column: 1 / -1; } }
.sub-fila { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--s-2); }
.sub-titulo { font-size: .78rem; font-weight: 700; color: var(--c-gris); }
.chips-sub { margin: 0; padding: 0; }
.chip-sub { min-height: 40px; font-size: .85rem; }
.chip-sub strong { font-weight: 700; }
.chip-sub .rango { font-size: .72rem; opacity: .75; }
@media (pointer: coarse) { .chip-sub { min-height: 44px; } }
@media (max-width: 559px) { .sub-fila { grid-template-columns: 1fr; gap: 4px; } }

/* Teselas con más cuerpo: sombra suave y la foto se acerca al pasar */
.tesela { box-shadow: 0 14px 30px -18px rgba(10, 21, 16, .5); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .btn-comprar.hecho { transition: none; animation: none; }
  .tarjeta:hover { transform: none; }
}
/* 10 categorías: "Materas importadas" ocupa 3 → 9 + 3 = 12 espacios, filas completas en 3, 4 y 6 columnas.
   En celular (2 columnas) ocupa la fila entera y la última también, para no dejar una sola. */
@media (min-width: 600px) { .tesela-doble { grid-column: span 3; } }
@media (max-width: 599px) {
  .teselas > li:last-child:not(.tesela-doble) { grid-column: span 2; }
  .teselas > li:last-child:not(.tesela-doble) .tesela { aspect-ratio: 8 / 5; }
}
@media (max-width: 599px) {
  /* Celular: la destacada va primero y las 9 sencillas quedan en parejas (la última, a lo ancho) */
  .tesela-doble { order: -1; }
  /* Escala: más baja para que las 4 tallas (la XXXL es ancha) quepan en 390 px sin cortarse */
  .tallas-sec { --h-escala: 150px; }
  .escala-n { font-size: .72rem; white-space: nowrap; }
  .escala-rango { white-space: nowrap; }
}
@media (max-width: 599px) {
  .escala-n { display: none; }            /* el conteo por talla ya está en los chips de talla */
  .tallas-sec { --h-escala: 135px; }
}



/* =========================================================================
   Tallas con fotos reales: 4 tarjetas altas, foto de ambiente a sangre
   ========================================================================= */
.tallas-grid-fotos { grid-template-columns: 1fr !important; align-items: start; }
.tallas-grid-fotos .tallas-cabeza { display: grid; gap: var(--s-2) var(--s-7); align-items: end; }
@media (min-width: 900px) { .tallas-grid-fotos .tallas-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tallas-grid-fotos .tallas-cabeza .eyebrow, .tallas-grid-fotos .tallas-cabeza .titulo-sec { grid-column: 1; }
  .tallas-grid-fotos .tallas-cabeza p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: var(--s-6); } }
.tallas-fotos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(.6rem, 1.5vw, 1.25rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .tallas-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.talla-tarjeta { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer;
  border-radius: var(--r-lg); background: var(--c-bosque); isolation: isolate; box-shadow: 0 24px 50px -30px rgba(10, 21, 16, .6);
  transition: transform var(--t-media) var(--ease); }
.talla-tarjeta:focus-visible { outline: 3px solid var(--c-oro); outline-offset: 4px; }
.talla-tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02);
  transition: opacity var(--t-media), transform var(--t-lenta) var(--ease); }
.talla-tarjeta img.cargada { opacity: 1; }
.talla-velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 21, 16, 0) 38%, rgba(10, 21, 16, .35) 58%, rgba(10, 21, 16, .9) 100%); }
@media (hover: hover) {
  .talla-tarjeta:hover { transform: translateY(-6px); }
  .talla-tarjeta:hover img { transform: scale(1.07); }
  .talla-tarjeta:hover .talla-n svg { transform: translateX(4px); }
}
.talla-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 2px; padding: clamp(.9rem, 2vw, 1.4rem); color: var(--c-crema); }
.talla-letra { font: 400 clamp(2.4rem, 1.6rem + 3vw, 4.2rem)/.9 var(--f-serif); letter-spacing: -.03em; }
.talla-rango { font-size: .95rem; font-weight: 700; color: var(--c-oro-2); font-variant-numeric: tabular-nums; }
.talla-uso { font-size: .84rem; color: rgba(251, 247, 238, .82); line-height: 1.35; }
.talla-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid rgba(251, 247, 238, .2); font-size: .82rem; }
.talla-desde { font-weight: 600; }
.talla-n { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--c-oro-2); }
.talla-n svg { width: 16px; height: 16px; transition: transform var(--t-rapida) var(--ease); }
/* Barra de alto relativo (la XXXL llena la barra): se lee de un vistazo cuál es más grande */
.talla-barra { position: absolute; z-index: 2; top: clamp(.9rem, 2vw, 1.3rem); right: clamp(.9rem, 2vw, 1.3rem); width: 6px; height: 34%;
  border-radius: 6px; background: rgba(251, 247, 238, .28); overflow: hidden; backdrop-filter: blur(4px); }
.talla-barra i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 6px; background: var(--c-oro-2);
  transform: scaleY(var(--h)); transform-origin: bottom; transition: transform var(--t-lenta) var(--ease); }
.tallas-fotos.aparece .talla-barra i { transform: scaleY(0); }
.tallas-fotos.aparece.visible .talla-barra i { transform: scaleY(var(--h)); }
.tallas-fotos.aparece.visible li:nth-child(2) .talla-barra i { transition-delay: 90ms; }
.tallas-fotos.aparece.visible li:nth-child(3) .talla-barra i { transition-delay: 180ms; }
.tallas-fotos.aparece.visible li:nth-child(4) .talla-barra i { transition-delay: 270ms; }
@media (max-width: 559px) {
  .talla-uso { display: none; }
  .talla-pie { font-size: .74rem; }
  .talla-desde { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .talla-tarjeta, .talla-tarjeta img, .talla-barra i { transition: none; } .talla-tarjeta:hover { transform: none; } }

/* LIMPIEZA-01 · texto solo para lector de pantalla (los puntos de color son aria-hidden) */
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- EXISTENCIAS-01 · agotado en el proveedor (dato en vivo) ----------
   Se ve (no desaparece) pero no se puede pedir: foto apagada + sello arriba a la derecha (la talla va a la izquierda). */
.sello-agotado { position: absolute; right: var(--s-2); top: var(--s-2); z-index: 1; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-tinta); color: var(--c-crema); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tarjeta-agotada .tarjeta-foto img.cargada { opacity: .75; filter: grayscale(.85); }   /* apagada pero reconocible */
.tarjeta-agotada .precio { color: rgba(20, 39, 27, .7);   /* AA sobre blanco (≈ 5:1) */ text-decoration: line-through; text-decoration-thickness: 1px; }
.btn-comprar.agotado, .btn-comprar.agotado:hover { background: var(--c-crema-2); color: var(--c-tinta); box-shadow: inset 0 0 0 1px rgba(20, 39, 27, .18); opacity: 1; }

/* FOTO-ENTERA-01 (20/10/2026): foto horizontal (soportes, jardineras, exterior) → ENTERA en el cuadro, sobre un fondo
   desenfocado de ella misma. Antes el recorte 4:5 dejaba el soporte por fuera. La clase la pone catalogo.js (encuadrar). */
.foto-entera { position: relative; overflow: hidden; isolation: isolate; }
.foto-entera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fondo) center / cover no-repeat;
  filter: blur(22px) saturate(1.05); transform: scale(1.25); opacity: .55; }
.tarjeta-foto.foto-entera img, .detalle-foto.foto-entera img { object-fit: contain; }
.detalle-foto.foto-entera { display: grid; place-items: center; }
/* FONDO-CLARO-01: foto de producto sobre blanco → sin desenfoque; el blanco se funde con el cuadro y queda aire alrededor */
.foto-entera.foto-clara { background: var(--c-estudio); }
.foto-entera.foto-clara::before { content: none; }
.foto-entera.foto-clara img { mix-blend-mode: multiply; padding: 6%; }
.tienda .foto-entera.foto-clara { background: var(--t-tile, #f0f1f2); }

/* =========================================================================
   DISENO-TIENDA (21/10/2026) · catálogo con lenguaje de tienda (referencias de Juan: veneno.com, hype.com.co)
   Blanco puro, fotos a sangre sobre gris claro, sin bordes redondeados ni sombras de tarjeta, nombres en mayúscula
   pequeña (Montserrat), precio limpio (Poppins), filas deslizables por categoría, "Agregar" sube sobre la foto al
   pasar el mouse. Todo vive bajo body.tienda: borrar este bloque = volver atrás.
   ========================================================================= */
.tienda {
  --t-bg: #fff;
  --t-tile: #f0f1f2;           /* gris de vitrina detrás de cada foto (Veneno usa #eceef0) */
  --t-tinta: #111;
  --t-gris: #5f6368;           /* 6.1:1 sobre blanco */
  --t-linea: #e4e5e7;
  --t-oscuro: #161616;
  --t-acento: #1e4d36;         /* verde Jardinova, solo en detalles (en pedido) */
  --f-tit: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-txt: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-curva: cubic-bezier(.32, .72, 0, 1);
  --t-track: .12em;            /* espaciado de las mayúsculas pequeñas */
  --t-gap: clamp(.5rem, 1.2vw, 1rem);
  background: var(--t-bg); color: var(--t-tinta); font-family: var(--f-txt);
  font-size: clamp(.9rem, .86rem + .15vw, .98rem);
}
.tienda :focus-visible { outline: 2px solid var(--t-tinta); outline-offset: 3px; border-radius: 2px; }

/* ---- Nav: logo en palabra, enlaces en mayúscula ---- */
.tienda .nav { border-bottom-color: var(--t-linea); }
.tienda .nav::before { background: rgba(255, 255, 255, .94); }
.tienda .nav-logo { font: 800 1.25rem/1 var(--f-tit); letter-spacing: .2em; text-transform: uppercase; }
.tienda .nav-logo img { display: none; }
.tienda .nav-links a { font-family: var(--f-tit); font-weight: 700; font-size: .72rem; letter-spacing: var(--t-track); text-transform: uppercase; color: var(--t-tinta); border-radius: 0; background: none; }
.tienda .nav-links a:hover, .tienda .nav-links a[aria-current="page"] { background: none; box-shadow: inset 0 -2px 0 var(--t-tinta); }
.tienda .idiomas { background: none; }
.tienda .idiomas a { font-family: var(--f-tit); }

/* ---- Aviso de país = barra de anuncio negra ---- */
.tienda .aviso-pais { background: var(--t-oscuro); color: rgba(255, 255, 255, .86); font: 500 .68rem/1.4 var(--f-tit); letter-spacing: .08em; text-transform: uppercase; }
.tienda .aviso-pais a { color: #fff; }

/* ---- Botones: píldora, mayúscula pequeña ---- */
.tienda .btn { min-height: 46px; padding: 0 1.6rem; font: 700 .72rem/1 var(--f-tit); letter-spacing: var(--t-track); text-transform: uppercase;
  transition: transform 180ms var(--t-curva), background-color 180ms, color 180ms; }
.tienda .nav .btn-wa { min-height: 42px; }
.tienda .btn-claro { background: #fff; color: var(--t-tinta); }
.tienda .btn-claro:hover { background: #ececec; }
.tienda .btn-linea:hover { background: rgba(255, 255, 255, .12); }
.tienda .btn-oscuro { background: var(--t-tinta); color: #fff; }
.tienda .btn-oscuro:hover { background: #333; }
.tienda .btn-linea-oscuro { box-shadow: inset 0 0 0 1px var(--t-tinta); color: var(--t-tinta); }
.tienda .btn-linea-oscuro:hover { background: var(--t-tinta); color: #fff; }

/* ---- Portada: 3 fotos reales a sangre, título centrado abajo ---- */
.tienda .hero-tienda { display: grid; min-height: clamp(440px, 76svh, 820px); padding: 0; background: var(--t-oscuro); color: #fff; }
.hero-paneles { position: absolute; inset: 0; z-index: -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-paneles img { width: 100%; height: 100%; object-fit: cover; }
/* El panel del centro es una oficina con ventanal (muy clara): velo general + óvalo oscuro detrás del texto → AA en el rótulo */
.hero-paneles::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 55% at 50% 72%, rgba(0, 0, 0, .42), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .12) 35%, rgba(0, 0, 0, .66)); }
.hero-centro { text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
@media (max-width: 719px) {
  .hero-paneles { grid-template-columns: 1fr; }
  .hero-paneles img:not(:first-child) { display: none; }
}
.hero-centro { align-self: end; justify-self: center; width: min(100%, 900px); padding: clamp(2rem, 6vw, 4.5rem) var(--gutter); text-align: center; }
.hero-marca { margin: 0 0 .9rem; font: 600 .72rem/1 var(--f-tit); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.tienda .hero-tienda h1 { max-width: none; margin: 0; font: 800 clamp(2.2rem, 1.2rem + 4.6vw, 4.8rem)/.95 var(--f-tit); letter-spacing: -.01em; text-transform: uppercase; }
.tienda .hero-tienda .hero-acciones { justify-content: center; margin-top: clamp(1.25rem, 3vw, 2rem); }
@media (max-width: 559px) { .tienda .hero-tienda .hero-acciones .btn { flex: 1 1 100%; } }

/* ---- Franja de confianza (como la fila de Veneno, sin íconos de relleno) ---- */
.confianza { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--t-linea); }
.confianza li { display: grid; gap: .3rem; align-content: start; padding: clamp(1.1rem, 2.4vw, 1.75rem) var(--gutter); text-align: center; }
.confianza li + li { border-left: 1px solid var(--t-linea); }
.confianza strong { font: 700 .72rem/1.35 var(--f-tit); letter-spacing: var(--t-track); text-transform: uppercase; }
.confianza li > span { font-size: .8rem; color: var(--t-gris); }
@media (max-width: 719px) {
  .confianza { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .confianza::-webkit-scrollbar { display: none; }
  .confianza li { scroll-snap-align: start; text-align: left; }
}

/* ---- Títulos de sección: mayúscula, sin cursiva ---- */
.tienda .titulo-sec, .tienda .seccion-cat-cabeza h2, .tienda .banda h2, .tienda .vacio h3, .tienda .detalle-info h2 {
  font: 800 clamp(1.15rem, .95rem + .9vw, 1.7rem)/1.1 var(--f-tit); letter-spacing: .01em; text-transform: uppercase; max-width: none; }
.tienda .titulo-sec em, .tienda .banda h2 em { font-style: normal; color: inherit; }
.tienda .seccion { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.tienda .eyebrow { color: var(--t-gris); font-family: var(--f-tit); }
.tienda .eyebrow-verde { color: var(--t-acento); }

/* ---- Teselas de categoría: foto a sangre, rótulo en mayúscula ---- */
.tienda .teselas { gap: var(--t-gap); }
.tienda .tesela { border-radius: 0; box-shadow: none; background: var(--t-tile); }
.tienda .tesela::after { background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .66)); }
.tienda .tesela-txt strong { font: 800 clamp(.88rem, .8rem + .35vw, 1.05rem)/1.15 var(--f-tit); letter-spacing: .06em; text-transform: uppercase; }
.tienda .tesela-txt span { font-size: .74rem; }
.tienda .tesela-nuevo { border-radius: 2px; background: #fff; color: var(--t-tinta); font: 700 .64rem/1 var(--f-tit); letter-spacing: var(--t-track); text-transform: uppercase; padding: 6px 9px; }

/* ---- Tallas (materas de piso) ---- */
.tienda .tallas-sec { background: #f6f6f7; border-color: var(--t-linea); }
.tienda .talla-tarjeta { border-radius: 0; box-shadow: none; background: var(--t-tile); }
.tienda .talla-tarjeta:hover { transform: none; }
.tienda .talla-letra { font: 800 clamp(2rem, 1.4rem + 2.4vw, 3.4rem)/.9 var(--f-tit); letter-spacing: 0; }
.tienda .talla-rango, .tienda .talla-n { color: #fff; }
.tienda .talla-pie { border-top-color: rgba(255, 255, 255, .3); }
.tienda .talla-barra { width: 3px; }
.tienda .talla-barra i { border-radius: 0; background: #fff; }

/* ---- Barra de filtros ---- */
.tienda .filtros { background: rgba(255, 255, 255, .96); border-bottom-color: var(--t-linea); }
.tienda .chip { border-color: #d9dadc; color: var(--t-tinta); font: 600 .68rem/1 var(--f-tit); letter-spacing: .08em; text-transform: uppercase; }
.tienda .chip:hover { border-color: var(--t-tinta); }
.tienda .chip[aria-pressed="true"] { background: var(--t-tinta); border-color: var(--t-tinta); color: #fff; }
.tienda .campo input, .tienda .orden select { border-color: #d9dadc; font-family: var(--f-txt); }
.tienda .sub-titulo { font-family: var(--f-tit); text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; }

/* ---- Secciones por categoría = fila deslizable con "Ver los N" + flechas ---- */
.tienda .seccion-cat { border-top: 0; padding-block: clamp(1.75rem, 4vw, 3rem); }
.tienda .seccion-cat-cabeza { align-items: center; margin-bottom: clamp(.9rem, 2vw, 1.4rem); }
.tienda .seccion-cat-cabeza p { color: var(--t-gris); font-size: .84rem; margin-top: .35rem; }
.seccion-cat-acciones { display: flex; align-items: center; gap: .5rem; flex: none; }
.tienda .ver-todos { min-height: 40px; padding: 0 1.2rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--t-tinta); color: var(--t-tinta);
  font: 700 .66rem/1 var(--f-tit); letter-spacing: .14em; text-transform: uppercase; transition: background-color 180ms, color 180ms; }
.tienda .ver-todos:hover { background: var(--t-tinta); color: #fff; }
@media (pointer: coarse) { .tienda .ver-todos { min-height: 44px; } }
.fila-flechas { display: flex; gap: 2px; }
.fila-flecha { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--t-tinta);
  transition: background-color 180ms, opacity 180ms; }
.fila-flecha svg { width: 22px; height: 22px; }
.fila-flecha:hover:not(:disabled) { background: var(--t-tile); }
.fila-flecha:disabled { opacity: .22; cursor: default; }
@media (hover: none) { .fila-flechas { display: none; } }   /* en celular se desliza con el dedo */

.tienda .grilla-fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--t-gap)) / 4); gap: var(--t-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tienda .grilla-fila::-webkit-scrollbar { display: none; }
.tienda .grilla-fila > li { scroll-snap-align: start; }
@media (max-width: 1023px) { .tienda .grilla-fila { grid-auto-columns: calc((100% - 2 * var(--t-gap)) / 3); } }
@media (max-width: 719px) {
  /* 2 tarjetas y un pedazo de la tercera: se entiende que se desliza. La fila llega al borde derecho. */
  .tienda .grilla-fila { grid-auto-columns: 42%; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
}

/* ---- Grilla (filtros / búsqueda) ---- */
.tienda .grilla:not(.grilla-fila) { gap: clamp(1.5rem, 3vw, 2.25rem) var(--t-gap); grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); }
.tienda .resumen { color: var(--t-gris); font-size: .8rem; }

/* ---- Tarjeta de producto ---- */
.tienda .tarjeta { container-type: inline-size; background: none; border-radius: 0; box-shadow: none; overflow: visible; transform: none; }
.tienda .tarjeta::before { content: none; }
.tienda .tarjeta > .tarjeta-foto, .tienda .tarjeta-foto { border-radius: 0; background: var(--t-tile); }
.tienda .tarjeta-estudio .tarjeta-foto { background: var(--t-tile); }   /* la matera de estudio se funde (multiply) con el gris */
.tienda .tarjeta-cuerpo { padding: .75rem 0 0; gap: 3px; }
.tienda .tarjeta h3 { font: 600 .76rem/1.35 var(--f-tit); letter-spacing: .03em; text-transform: uppercase; }
.tienda .tarjeta h3 button:focus-visible::after { outline: 2px solid var(--t-tinta); outline-offset: 2px; border-radius: 0; }
.tienda .meta { font-size: .72rem; color: var(--t-gris); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.tienda .precio-fila { padding-top: 2px; margin-top: 2px; }
.tienda .tarjeta .precio { font: 500 clamp(.84rem, .8rem + .15vw, .92rem)/1.3 var(--f-txt); letter-spacing: 0; }
.tienda .precio small { display: inline; margin-left: .4rem; font-size: .66rem; color: var(--t-gris); }
.tienda .puntos-color .punto { width: 12px; height: 12px; box-shadow: 0 0 0 1px #fff, 0 0 0 2px #c9cacc; }
.tienda .etiqueta, .tienda .material, .tienda .talla, .tienda .sello-agotado {
  border-radius: 2px; padding: 5px 8px; font: 700 .6rem/1 var(--f-tit); letter-spacing: .1em; text-transform: uppercase; box-shadow: none; backdrop-filter: none; }
.tienda .etiqueta, .tienda .material { background: #fff; color: var(--t-tinta); }
.tienda .talla, .tienda .sello-agotado { background: var(--t-tinta); color: #fff; }
@media (hover: hover) { .tienda .tarjeta:hover .tarjeta-foto img { transform: scale(1.035); } }

/* Botón de compra. En celular: línea fina bajo el precio. Con mouse: barra blanca que sube sobre la foto
   (como "Agregar al carrito" de Veneno). 125cqw = alto de la foto 4:5 medido con el ancho de la tarjeta. */
.tienda .btn-comprar { min-height: 42px; margin-top: .55rem; border-radius: 0; background: none; color: var(--t-tinta); box-shadow: inset 0 0 0 1px var(--t-tinta);
  font: 700 .64rem/1 var(--f-tit); letter-spacing: var(--t-track); text-transform: uppercase; }
.tienda .btn-comprar svg { width: 16px; height: 16px; }
.tienda .btn-comprar:hover { background: var(--t-tinta); color: #fff; }
.tienda .btn-comprar.en-pedido { background: var(--t-acento); color: #fff; box-shadow: none; }
.tienda .btn-comprar.agotado, .tienda .btn-comprar.agotado:hover { background: #f3f3f3; color: var(--t-gris); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .tienda .tarjeta .btn-comprar:not(.btn-comprar-grande) { position: absolute; z-index: 2; left: 10px; right: 10px; width: auto; margin: 0;
    top: calc(125cqw - 52px); background: rgba(255, 255, 255, .96); box-shadow: none;
    opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--t-curva), transform 260ms var(--t-curva), background-color 180ms, color 180ms; }
  .tienda .tarjeta:hover .btn-comprar, .tienda .tarjeta:focus-within .btn-comprar,
  .tienda .tarjeta .btn-comprar.en-pedido, .tienda .tarjeta .btn-comprar.agotado { opacity: 1; transform: none; }
  .tienda .tarjeta .btn-comprar:hover { background: var(--t-tinta); color: #fff; }
  .tienda .tarjeta .btn-comprar.en-pedido { background: var(--t-acento); color: #fff; }
}

/* ---- Más ---- */
.tienda .progreso i { background: var(--t-tinta); }

/* ---- Banda de asesoría: negro plano ---- */
.tienda .banda { background: var(--t-oscuro); }
.tienda .banda p { color: rgba(255, 255, 255, .78); }
.tienda .banda .eyebrow { color: rgba(255, 255, 255, .7); }
.tienda .pasos li { border-radius: 0; border-color: rgba(255, 255, 255, .14); background: none; }
.tienda .pasos li::before { background: #fff; color: var(--t-tinta); font: 800 .95rem var(--f-tit); }
.tienda .pasos strong { font-family: var(--f-tit); font-weight: 700; }

/* ---- Visita ---- */
.tienda .visita-item { border-radius: 0; box-shadow: none; background: none; padding: 1.1rem 0 0; border-top: 1px solid var(--t-tinta); }
.tienda .visita-item h3 { font: 700 .74rem/1 var(--f-tit); letter-spacing: var(--t-track); text-transform: uppercase; margin: 0 0 .6rem; }

/* ---- Pie oscuro ---- */
.tienda .pie { background: #1f1f1f; color: rgba(255, 255, 255, .66); }
.tienda .pie h2 { font: 800 1rem/1.2 var(--f-tit); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.tienda .pie a { color: rgba(255, 255, 255, .86); }
.tienda .pie a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Ficha (dialog), pedido y botón flotante ---- */
.tienda .detalle { border-radius: 4px; background: #fff; }
.tienda .detalle-foto { background: var(--t-tile); }
/* FICHA-ENTERA-01: la foto va entera → necesita la columna ancha (antes 1.05fr/1fr dejaba la planta chiquita) */
@media (min-width: 760px) {
  .tienda .detalle { width: min(1180px, 100% - 2 * var(--s-4)); }
  .tienda .detalle-grid { grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); }
  .tienda .detalle-foto { min-height: min(78dvh, 720px); }
  .tienda .detalle-foto img { max-height: min(78dvh, 720px); }
}
.tienda .detalle-precio { font: 500 1.35rem/1.2 var(--f-txt); }
.tienda .cerrar { background: #fff; box-shadow: none; }
.tienda .color, .tienda .tamano { border-radius: 2px; }
.tienda .color-figura { border-radius: 0; background: var(--t-tile); }
.tienda .pedido { background: #fff; }
.tienda .fab-pedido { background: var(--t-tinta); color: #fff; font: 700 .72rem/1 var(--f-tit); letter-spacing: .1em; text-transform: uppercase; }
.tienda .fab-n { background: #fff; color: var(--t-tinta); }

/* ---- Celular: nada se sale de la pantalla (medido en 375 px: la barra sumaba 387 px y "TRANSFORMAMOS" 394) ---- */
.hero-centro { min-width: 0; }
.tienda .hero-tienda h1 { overflow-wrap: anywhere; hyphens: manual; }
@media (max-width: 559px) {
  .tienda .nav .contenedor { gap: .5rem; }
  .tienda .nav-logo { font-size: 1.02rem; letter-spacing: .14em; }
  .tienda .idiomas a { min-width: 40px; }
  .tienda .hero-tienda h1 { font-size: clamp(1.75rem, 8.6vw, 2.4rem); }
  .tienda .seccion-cat-cabeza { gap: .75rem; }
  .tienda .seccion-cat-cabeza > div:first-child { min-width: 0; }
  .fila-flechas { display: none; }   /* en celular se desliza con el dedo, aunque el aparato reporte mouse */
}
@media (max-width: 379px) { .tienda .nav-logo { letter-spacing: .08em; } }
@media (max-width: 719px) {
  .tienda .nav-links { background: rgba(255, 255, 255, .96); border-top-color: var(--t-linea); }
  .tienda .nav-links a { font-size: .62rem; }
}

/* ---- Trabajos (misma capa): proyectos a sangre, títulos en mayúscula, sin dorado ---- */
.tienda .seccion-logos { border-bottom-color: var(--t-linea); }
.tienda .seccion-logos p { font: 700 .68rem/1 var(--f-tit); letter-spacing: .16em; color: var(--t-gris); }

/* FICHA-PROYECTO-01 · grilla de proyectos (tarjeta como la del catálogo) */
.grilla-proy { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem) var(--t-gap, 1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.proy-tarjeta { position: relative; display: flex; flex-direction: column; }
.proy-foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--t-tile, #f0f1f2); }
.proy-foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms, transform 900ms cubic-bezier(.32, .72, 0, 1); }
.proy-foto img.cargada { opacity: 1; }
@media (hover: hover) { .proy-tarjeta:hover .proy-foto img { transform: scale(1.035); } }
.proy-n, .proy-fotos-n { position: absolute; top: 10px; padding: 5px 8px; border-radius: 2px; font: 700 .6rem/1 var(--f-tit, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.proy-n { left: 10px; background: var(--t-tinta, #111); color: #fff; }
.proy-fotos-n { right: 10px; background: #fff; color: var(--t-tinta, #111); }
.proy-cuerpo { display: grid; gap: 4px; padding-top: .8rem; }
.proy-meta { margin: 0; font: 700 .64rem/1.3 var(--f-tit, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--t-gris, #5f6368); }
.proy-tarjeta h3 { margin: 0; font: 800 clamp(.95rem, .85rem + .4vw, 1.12rem)/1.2 var(--f-tit, sans-serif); letter-spacing: .02em; text-transform: uppercase; }
.proy-tarjeta h3 button { all: unset; cursor: pointer; }
.proy-tarjeta h3 button::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta abre la ficha */
.proy-tarjeta h3 button:focus-visible::after { outline: 2px solid var(--t-tinta, #111); outline-offset: 3px; }
.proy-desc { margin: 2px 0 0; font-size: .84rem; line-height: 1.5; color: var(--t-gris, #5f6368);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proy-ver { display: inline-flex; align-items: center; gap: 4px; margin-top: .45rem; font: 700 .66rem/1 var(--f-tit, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.proy-ver svg { width: 16px; height: 16px; transition: transform 180ms cubic-bezier(.32, .72, 0, 1); }
@media (hover: hover) { .proy-tarjeta:hover .proy-ver svg { transform: translateX(4px); } }

/* Ficha de proyecto: misma ficha que el producto (dialog .detalle), con galería */
.ficha-galeria { display: grid; gap: 6px; align-content: start; background: #fff; }
.ficha-foto { position: relative; display: grid; place-items: center; min-height: min(62dvh, 640px); background: var(--t-tile, #f0f1f2); }
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 260ms; }
.ficha-foto img.cargada { opacity: 1; }
.ficha-cont { position: absolute; left: 12px; bottom: 12px; padding: 5px 8px; border-radius: 2px; background: rgba(0, 0, 0, .6); color: #fff;
  font: 700 .62rem/1 var(--f-tit, sans-serif); letter-spacing: .1em; }
.ficha-flecha { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--t-tinta, #111); cursor: pointer; transition: transform 180ms cubic-bezier(.32, .72, 0, 1); }
.ficha-flecha svg { width: 22px; height: 22px; }
.ficha-flecha:active { transform: scale(.94); }
.ficha-ant { left: 12px; } .ficha-sig { right: 12px; }
.ficha-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ficha-mini { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; background: var(--t-tile, #f0f1f2); }
.ficha-mini img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 260ms; }
.ficha-mini img.cargada { opacity: .55; }
.ficha-mini[aria-pressed="true"] img, .ficha-mini:hover img { opacity: 1; }
.ficha-mini[aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--t-tinta, #111); }
.ficha-mini:focus-visible { outline: 2px solid var(--t-tinta, #111); outline-offset: 2px; }
.ficha-logo { display: block; height: 40px; width: auto; max-width: 150px; object-fit: contain; mix-blend-mode: multiply; }
.ficha-sub { margin: .4rem 0 0; font: 700 .7rem/1 var(--f-tit, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.ficha-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: paso; }
.ficha-pasos li { counter-increment: paso; display: grid; grid-template-columns: 28px 1fr; column-gap: .7rem; font-size: .84rem; line-height: 1.45; color: var(--t-gris, #5f6368); }
.ficha-pasos li::before { content: counter(paso); grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--t-tinta, #111); color: #fff; font: 800 .74rem/1 var(--f-tit, sans-serif); }
.ficha-pasos strong { color: var(--t-tinta, #111); font-weight: 600; }
.ficha-proy .detalle-comprar { display: grid; gap: .5rem; }
@media (max-width: 759px) {
  .ficha-foto { min-height: 0; aspect-ratio: 4 / 3; }
  .ficha-foto img { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { .proy-foto img, .proy-ver svg, .ficha-flecha { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .tienda .tarjeta .btn-comprar, .tienda .btn, .fila-flecha { transition: none; }
}