.num { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }

/* AQUARETO -- unico origen de estilos de TODAS las paginas de la web (inicio, categorias, 404).
   No agregar estilos propios en una pagina: si hace falta un componente nuevo, se agrega aqui para todos.
   Las paginas generadas (scripts/generar_web.py) y index.html enlazan este archivo con ?v=<hash>; el script actualiza el hash. */
  /* Tema "pecera oscura". La foto del inicio es un <picture> (AVIF con respaldo WebP, 800/1280/1920 segun el ancho) dentro
     de .hero-bg; el bloque #120C07 y un desenfoque diminuto de la propia foto se ven mientras carga. */
  :root {
    color-scheme: dark;
    --hero-pos: 45% 60%;
    --hero-bg: #120C07;
    --ink: #0A0705;
    --wood: #140D07;
    --wood-2: #1C120A;
    --line: #34251A;
    --amber: #C9822E;
    --amber-hi: #E9B25A;
    --cream: #F1E4C8;
    --muted: #B8A381;   /* 7.5:1 sobre el fondo mas claro (AA pide 4.5) */
    --moss-hi: #93A45C;
    --paper: #E8DCC2;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --gut: clamp(1rem, 4vw, 3rem);          /* margen lateral: crece con la pantalla */
    --maxw: clamp(1100px, 82vw, 1600px);   /* ancho del contenido: 1180 en 1440, ~1570 en 1920, tope 1600 */
    --sec-y: clamp(3rem, 6vw, 6.5rem);      /* alto de las secciones */
    --sold: #8C3B33;                        /* cinta VENDIDO */
    --tap: 44px;                            /* alto minimo tactil */
  }
  @media (min-width: 701px) { :root { --hero-pos: 60% 55%; } }
  * { box-sizing: border-box; }
  /* 1 rem = 15 px hasta ~1280 px de ancho y crece hasta 18 px en pantallas muy anchas: todo lo que va en rem escala solo */
  html { font-size: clamp(15px, 0.66vw + 6.6px, 18px); scroll-behavior: smooth; scroll-padding-top: 5.1rem; background: var(--ink); -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
  .fl-precio, .fl-total b, .fl-total small, .ini-linea-p, .fl-kit-linea b, .fl-kit-total, .fl-incluye li b, .pedido-abrir-t, .pedido-sub, .pedido-total b, .kit-precio, .comp-item b, .oferta-precio, .arma-precio, .ini-total, .ini-total b { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { text-wrap: balance; }
  [hidden] { display: none !important; }   /* sin esto, .item { display: flex } gana y el atributo hidden no oculta */
  :focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; border-radius: 0.2667rem; }

  .wrap { max-width: var(--maxw); margin: 0 auto; }
  .section { padding: var(--sec-y) var(--gut); }
  .section.dark { background: var(--ink); }
  .section.alt { background: var(--wood); border-block: 1px solid var(--line); }

  /* regla graduada: marca de seccion */
  .ruler { display: block; width: 72px; height: 9px; background:
    repeating-linear-gradient(90deg, var(--amber) 0 1px, transparent 1px 9px) bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--amber) 0 1px, transparent 1px 45px) bottom / 100% 9px no-repeat; opacity: .85; }
  .eyebrow { font-family: var(--mono); font-size: 0.7667rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-hi); }
  .eyebrow.moss { color: var(--moss-hi); }
  .section-head { display: grid; gap: 0.6667rem; margin-bottom: clamp(1.5rem, 3vw, 2.6rem); justify-items: start; }
  .section-head h2, .about-text h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 1.05rem + 1.7vw, 2.55rem); line-height: 1.18; color: var(--cream); }
  .section-head p { color: var(--muted); max-width: 52ch; }

  /* aviso de promocion */
  .promo-bar { position: relative; display: flex; align-items: center; justify-content: center; background: var(--wood-2); border-bottom: 1px solid var(--line); padding: 0.6rem 3rem; text-align: center; }
  .promo-bar a { color: var(--amber-hi); font-size: 0.8667rem; font-weight: 600; }
  .promo-bar a span { color: var(--cream); text-decoration: underline; }
  .promo-bar button { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 1.3333rem; line-height: 1; cursor: pointer; min-width: var(--tap); min-height: var(--tap); padding: 0; }
  .promo-bar button:hover { color: var(--cream); }

  /* cabecera */
  .site-header { position: sticky; top: 0; z-index: 30; background: rgba(10,7,5,.95); backdrop-filter: blur(0.5333rem); border-bottom: 1px solid var(--line); }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 0.9333rem; padding: 0.6667rem var(--gut); max-width: var(--maxw); margin: 0 auto; }
  .brand { isolation: isolate; display: flex; align-items: center; gap: 0.6667rem; font-family: var(--serif); font-weight: 700; letter-spacing: .12em; color: var(--amber-hi); font-size: 1rem; }
  .brand img { width: 2.5333rem; height: 2.5333rem; object-fit: contain; }
  .nav-links { display: flex; align-items: center; gap: 1.8667rem; }
  .nav-anchor { position: relative; padding-bottom: 0.2667rem; color: var(--muted); font-size: 0.9333rem; transition: color .2s ease; }
  .nav-anchor::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--amber-hi); transition: right .3s var(--ease); }
  .nav-anchor:hover { color: var(--cream); }
  .nav-anchor:hover::after { right: 0; }
  .bar-right { display: flex; align-items: center; gap: 0.6667rem; }
  .menu-btn { display: none; width: var(--tap); height: var(--tap); border: 1px solid var(--line); border-radius: 0.4rem; background: none; color: var(--cream); cursor: pointer; align-items: center; justify-content: center; }
  .menu-btn:hover { border-color: var(--amber-hi); }
  .menu-panel { display: none; border-top: 1px solid var(--line); background: var(--ink); padding: 0.4rem var(--gut) 0.9333rem; max-height: calc(100vh - 4.5rem); overflow-y: auto; }
  .menu-panel a { display: block; min-height: var(--tap); padding: 0.8667rem 0.2667rem; border-bottom: 1px solid var(--line); color: var(--cream); font-size: 1rem; }
  .menu-panel a:last-child { border-bottom: 0; }
  .menu-panel.open { display: block; }

  /* botones */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5333rem; font-family: var(--sans); font-weight: 600; font-size: 0.9rem; border-radius: 0.4rem; padding: 0.7333rem 1.3333rem; min-height: var(--tap); text-align: center; line-height: 1.25; border: 1px solid transparent; cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .15s ease; }
  .btn:active { transform: translateY(1px) scale(.98); }
  .btn-amber { background: var(--amber); color: var(--ink); }
  .btn-amber:hover { background: var(--amber-hi); }
  .btn-line { background: transparent; border-color: #6B4B27; color: var(--amber-hi); }
  .btn-line:hover { border-color: var(--amber-hi); }
  .btn-lg { font-size: 1rem; padding: 0.8667rem 1.6rem; min-height: 3rem; }
  .btn-sm { padding: 0.6rem 1rem; font-size: 0.8333rem; }

  /* inicio */
  .hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--hero-bg); border-bottom: 1px solid var(--line); display: grid; align-items: center; min-height: clamp(38rem, 92svh, 62rem); }
  .hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; animation: hero-zoom 26s ease-in-out infinite alternate; }
  /* placeholder: la propia foto en 32x12 px, muy desenfocada, sobre el bloque #120C07 */
  .hero-bg::before { content: ""; position: absolute; inset: -6%; background: url("data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAABQBACdASogAAwAPtFWpUwoJKOiMAgBABoJQBOmUBegAuhvlaVPrO8VhwYAAP70lsTbymyRebx4F/BtuGlfU1gcbhQcCBdJ/gDG1LpzusK9AHNSGoAAAA==") center / cover no-repeat; filter: blur(14px); }
  .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos); transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0) scale(1.035); transition: transform .7s var(--ease); }
  /* con JS la foto entra con un fade de .38 s al cargar; sin JS se ve directamente */
  .js .hero-photo { opacity: 0; transition: opacity .38s ease, transform .7s var(--ease); }
  .js .hero-photo.on { opacity: 1; }
  /* Degradados: la foto manda. Escritorio: izquierda ~88% hasta 35% del ancho y cae a ~5% en el 65% (mitad derecha casi a
     brillo completo); radial extra solo en la esquina superior izquierda (verde muy brillante); abajo solo el ultimo 15% se
     funde con la seccion siguiente (#140D07). Contraste del texto >= 4.5:1 comprobado sobre la foto real (ver mensaje del commit). */
  .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(ellipse 46% 62% at 9% 56%, rgba(201,130,46,.2), transparent 76%),
    linear-gradient(90deg, rgba(10,7,5,.88) 0%, rgba(10,7,5,.72) 38%, rgba(10,7,5,.08) 76%),
    linear-gradient(0deg, #140D07 0%, rgba(20,13,7,0) 23%); }
  .hero h1, .hero p { text-shadow: 0 1px 12px rgba(10,7,5,.8); }
  /* aparicion del texto del inicio: solo CSS, sin observer ni scroll (llega a opacidad 1 a los .7 s) */
  @keyframes hero-text-in { from { opacity: 0; transform: translateY(0.9rem); } to { opacity: 1; transform: none; } }
  .hero-text { animation: hero-text-in .7s var(--ease) both; }
  @keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
  .hero-in { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5.5rem) var(--gut) clamp(3rem, 7vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.1333rem; align-items: center; }
  .hero-logo { justify-self: end; align-self: center; width: clamp(9rem, 15vw, 17rem); height: auto; aspect-ratio: 2 / 3; opacity: .94; filter: drop-shadow(0 0.5rem 1.4rem rgba(10,7,5,.55)); }
  .hero-text { display: grid; gap: 1.0667rem; justify-items: start; max-width: min(40rem, 100%); }
  .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.15rem); line-height: 1.04; color: var(--cream); }
  .hero p { color: #D9C9A6; max-width: 46ch; font-size: 1.0667rem; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.6667rem; margin-top: 0.2667rem; }

  /* fotos sobre bloque marrón (evita saltos al cargar) */
  .ph { background: var(--wood-2); }

  /* combos */
  .combos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1.25rem); }
  .combo { position: relative; height: 100%; background: var(--ink); border: 1px solid var(--line); border-radius: 0.5333rem; display: grid; grid-template-rows: auto 1fr; overflow: hidden; transition: border-color .3s ease, transform .3s var(--ease); }
  .combo:hover { border-color: #6B4B27; transform: translateY(-4px); }
  .combo.feat { border-color: var(--amber); }
  .mat { background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 0.2667rem; padding: 0.9333rem 0.6667rem; height: 8.8rem; position: relative; isolation: isolate; }
  .mat img { height: 100%; width: auto; max-width: 33%; object-fit: contain; mix-blend-mode: multiply; }
  .tag { position: absolute; left: 0.5333rem; top: 0.5333rem; z-index: 1; background: var(--ink); color: var(--amber-hi); font-family: var(--mono); font-size: 0.8rem; letter-spacing: .06em; text-transform: uppercase; padding: 0.2667rem 0.6667rem; border-radius: 3px; }
  .combo-b { padding: 0.9333rem 1rem 1.0667rem; display: flex; flex-direction: column; gap: 0.4667rem; }
  .combo-b h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.3rem); line-height: 1.25; color: var(--cream); }
  .combo-b p { color: var(--muted); font-size: 0.8333rem; line-height: 1.5; }
  .price { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "lnum" 1, "tnum" 1; font-family: var(--sans); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.85rem); color: var(--amber-hi); margin-top: auto; padding-top: 0.2667rem; }
  .combo .btn { margin-top: 0.4rem; }
  .combo-mas .mat { background: radial-gradient(circle, #382414, #17100b); }
  .combo-mas-num { color: var(--amber-hi); font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; font-size: 5rem; line-height: 1; }
  .cat-page > .combos { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }   /* mismo ancho que la grilla de troncos y la caja .help */
  .combo-mas .btn { margin-top: auto; }   /* boton a la misma altura que los de las otras tarjetas */
  .cat-page > .combos .combo { min-width: 0; }

  /* categorias */
  #categorias .mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: clamp(9.5rem, 15vw, 12rem) clamp(9.5rem, 15vw, 12rem) auto; grid-auto-rows: auto; gap: clamp(0.6rem, 1vw, 1rem); }
  .tile { position: relative; overflow: hidden; border-radius: 0.5333rem; border: 1px solid var(--line); background: var(--paper); display: block; isolation: isolate; }
  .tile img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: sepia(.28) saturate(1.05); transition: transform .5s var(--ease); }
  #categorias .tile.contain { display: flex; flex-direction: column; aspect-ratio: 4 / 5; }
  #categorias .tile.contain img { flex: 1; min-height: 0; height: auto; object-fit: contain; padding: 1rem; mix-blend-mode: multiply; filter: none; }   /* sin fondo propio: el blanco de la foto se funde con el crema de la tarjeta (sin cuadro) */
  #categorias .tile.contain .tile-l { position: static; flex: 0 0 auto; padding: 0.75rem 1rem; background: #0F0A07; }
  #categorias .tile.contain .tile-l h3 { overflow-wrap: normal; hyphens: none; }
  @media (min-width: 600px) and (max-width: 899px) { #categorias .tile.contain { aspect-ratio: 1 / 1; } }   /* tablet: 2x2 sin tarjetas de 450 px de alto */   /* "Acondicionadores" no se parte a la mitad */
  #categorias .tile.contain:hover img { filter: none; }
  .tile:hover img { transform: scale(1.04); }
  .tile-l { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.9333rem 0.8rem; background: linear-gradient(0deg, rgba(10,7,5,.97) 0%, rgba(10,7,5,.82) 62%, rgba(10,7,5,0) 100%); display: grid; gap: 1px; }
  .tile-l h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(0.95rem, 0.6rem + 1.1vw, 1.3rem); color: var(--cream); hyphens: auto; overflow-wrap: anywhere; }
  .tile-l p { font-size: clamp(0.8rem, 0.68rem + 0.3vw, 0.9rem); color: #CDBB96; overflow-wrap: anywhere; }
  #categorias .t-troncos { grid-column: 1 / 3; grid-row: 1 / 3; }
  #categorias .t-plantas { grid-column: 3 / 5; grid-row: 1 / 3; }
  /* Peces ocupa la primera mitad de Plantas cuando está disponible; sin Peces, Plantas conserva ambas filas. */
  #categorias .t-peces { grid-column: 3 / 5; grid-row: 1; }
  #categorias .t-peces + .t-plantas { grid-column: 3 / 5; grid-row: 2; }
  #categorias .t-troncos img { object-fit: cover; object-position: center top; }
  #categorias .mosaic > .tile.contain:nth-last-child(4) { grid-column: 1; grid-row: 3; }
  #categorias .mosaic > .tile.contain:nth-last-child(3) { grid-column: 2; grid-row: 3; }
  #categorias .mosaic > .tile.contain:nth-last-child(2) { grid-column: 3; grid-row: 3; }
  #categorias .mosaic > .tile.contain:nth-last-child(1) { grid-column: 4; grid-row: 3; }

  /* sobre nosotros */
  .about { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
  .about-text { display: grid; gap: 0.8rem; justify-items: start; }
  .about-text p { color: #CDBB96; max-width: 54ch; font-size: 1.0333rem; }
  .feats { display: grid; }
  .feat-i { display: grid; grid-template-columns: 1.7333rem 1fr; gap: 0.8rem; padding: 0.9333rem 0; border-top: 1px solid var(--line); }
  .feat-i:last-child { border-bottom: 1px solid var(--line); }
  .feat-i svg { margin-top: 2px; }
  .feat-i strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.0667rem; color: var(--cream); }
  .feat-i span { color: var(--muted); font-size: 0.8667rem; }

  /* como comprar */
  .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1.25rem); }
  .steps li { display: grid; gap: 0.4rem; align-content: start; padding: clamp(1rem, 1.6vw, 1.6rem); background: var(--wood); border: 1px solid var(--line); border-radius: 0.5333rem; }
  .steps h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--cream); }
  .steps p { color: var(--muted); font-size: 0.9rem; }
  .steps .st { font-family: var(--mono); font-size: 0.8rem; letter-spacing: .12em; color: var(--moss-hi); text-transform: uppercase; }

  /* testimonios: preparada, oculta hasta tener material real con permiso */
  .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9333rem; }
  .quote { border: 1px solid var(--line); border-radius: 0.5333rem; padding: 1.2rem; background: var(--wood); color: var(--cream); font-size: 0.9333rem; }
  .quote cite { display: block; margin-top: 0.6667rem; font-style: normal; font-family: var(--mono); font-size: 0.7333rem; color: var(--muted); }

  /* contacto */
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
  .contact-text { display: grid; gap: 0.9333rem; justify-items: start; }
  .contact-text h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 1.2rem + 2.1vw, 2.9rem); color: var(--cream); }
  .contact-text p { color: var(--muted); max-width: 46ch; }
  .form { display: grid; gap: 0.8rem; background: var(--ink); border: 1px solid var(--line); border-radius: 0.5333rem; padding: 1.3333rem; }
  .form label { display: grid; gap: 0.4rem; }
  .form .lbl { font-family: var(--mono); font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .form input, .form textarea { font: inherit; font-family: var(--sans); font-size: max(16px, 1rem); min-height: var(--tap); text-transform: none; letter-spacing: 0; color: var(--cream); background: var(--wood); border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.7333rem 0.8rem; width: 100%; }
  .form textarea { min-height: 6.4rem; resize: vertical; }
  .form input:focus, .form textarea:focus { outline: 0; border-color: var(--amber-hi); }
  .form .err { color: #E9A16A; font-size: 0.8667rem; min-height: 1.2rem; text-transform: none; letter-spacing: 0; font-family: var(--sans); }

  .socials { display: flex; flex-wrap: wrap; gap: 0.5333rem; }
  .social { display: inline-flex; align-items: center; min-height: var(--tap); gap: 0.5333rem; font-size: 0.8333rem; color: var(--amber-hi); border: 1px solid var(--line); border-radius: 66.6rem; padding: 0.6667rem 0.9333rem; transition: border-color .2s ease; }
  .social:hover { border-color: var(--amber-hi); }
  button.social { background: transparent; font-family: inherit; cursor: pointer; }
  .cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; background: var(--wood-2); border-top: 1px solid var(--line); padding: 0.7rem var(--gut) calc(0.7rem + env(safe-area-inset-bottom)); }
  .cookies p { font-size: 0.9rem; color: var(--cream); max-width: 62ch; }
  .cookies-btns { display: flex; gap: 0.6rem; }
  /* padding del body y desplazamiento de los flotantes: ver reglas combinadas con .cart-on mas abajo (barra de pedido multiple) */
  footer { padding: 1.7333rem var(--gut); border-top: 1px solid var(--line); background: var(--ink); }
  .foot-in { max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.9333rem 1.6rem; align-items: center; justify-content: space-between; font-size: 0.8333rem; color: var(--muted); }

  /* flotantes */
  .fab-wa { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 0.5333rem; background: var(--amber); color: var(--ink); font-weight: 600; font-size: 0.9333rem; padding: 0.8rem 1.2rem; min-height: var(--tap); border-radius: 66.6rem; box-shadow: 0 0.6667rem 1.6rem rgba(0,0,0,.55); transition: background .2s ease, transform .15s ease; }
  .fab-wa:hover { background: var(--amber-hi); }
  .fab-wa:active { transform: scale(.97); }
  .fab-wa, .to-top { transition: opacity .2s ease, background .2s ease, transform .15s ease; }
  .fab-wa.away, .to-top.away { opacity: 0; pointer-events: none; }
  .no-io footer { padding-right: 10rem; }
  .to-top { position: fixed; right: max(1.2rem, env(safe-area-inset-right)); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.6rem); z-index: 40; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid #6B4B27; background: var(--ink); color: var(--amber-hi); cursor: pointer; display: none; align-items: center; justify-content: center; }
  .to-top.show { display: inline-flex; }
  .to-top:hover { border-color: var(--amber-hi); }

  /* aparicion al hacer scroll (visible por defecto si no hay JS) */
  .js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .d1 { transition-delay: .08s !important; }
  .d2 { transition-delay: .18s !important; }
  .d3 { transition-delay: .28s !important; }

  @media (min-width: 761px) and (max-width: 1100px) {
    .hero::before { background:
      radial-gradient(ellipse 45% 55% at 0% 0%, rgba(10,7,5,.95) 0%, rgba(10,7,5,0) 100%),
      linear-gradient(90deg, rgba(10,7,5,.84) 0%, rgba(10,7,5,.72) 60%, rgba(10,7,5,.38) 100%),
      linear-gradient(0deg, #140D07 0%, rgba(20,13,7,0) 15%); }
  }
  @media (max-width: 900px) {
    .hero-logo { display: none; }
    .hero-in { grid-template-columns: minmax(0, 1fr); }
    .combos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about, .contact { grid-template-columns: 1fr; }
    .quotes { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    .menu-btn { display: inline-flex; }
    .bar { padding-block: 0.5333rem; }
  }
  @media (max-width: 760px) {
    .hero::before { background:
      linear-gradient(0deg, #140D07 0%, rgba(20,13,7,.9) 14%, rgba(20,13,7,0) 55%),
      linear-gradient(90deg, rgba(10,7,5,.65) 0%, rgba(10,7,5,.35) 100%); }
    .steps { grid-template-columns: 1fr; }
    .btn-wa-head { padding: 0.6rem 0.8rem; font-size: 0.8333rem; }
    .tile-l { padding: 1.6rem 0.6rem 0.6rem; }
  }
  @media (max-width: 899px) {   /* tablet como celular: a 768 las 4 de producto quedaban de 169 px y los titulos no entraban */
    #categorias .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; }
    #categorias .t-troncos { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 7 / 5; }
    #categorias .t-plantas { grid-column: 1 / -1; grid-row: auto; height: clamp(150px, 44vw, 170px); }
    #categorias .t-peces { grid-column: 1 / -1; grid-row: auto; height: clamp(150px, 44vw, 170px); }
    #categorias .t-peces + .t-plantas { grid-column: 1 / -1; grid-row: auto; }
    #categorias .mosaic > .tile.contain:nth-last-child(4), #categorias .mosaic > .tile.contain:nth-last-child(3), #categorias .mosaic > .tile.contain:nth-last-child(2), #categorias .mosaic > .tile.contain:nth-last-child(1) { grid-column: auto; grid-row: auto; }
  }
  @media (max-width: 520px) {
    .combos { grid-template-columns: 1fr; }
    .fab-wa span { display: none; }
    .fab-wa { padding: 0; width: var(--tap); height: var(--tap); justify-content: center; }
    .hero-actions .btn { flex: 1 1 100%; }
    .hero-in { padding-bottom: 5.5rem; }
  }
  @media (max-width: 350px) {
    .brand { font-size: 0; gap: 0; }
    .brand img { width: 2.3rem; height: 2.3rem; }
    .btn-sm, .btn-wa-head { padding-inline: 0.6rem; }
  }
  @media (max-height: 480px) and (orientation: landscape) {
    .hero { min-height: 0; }
    .hero-in { padding-block: 1.25rem 1.5rem; }
    .hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
    .site-header { position: static; }
    html { scroll-padding-top: 1rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation: none !important; }
    .js .reveal { opacity: 1; transform: none; }
  }

  /* pagina de categoria (se suma a css/site.css) */
  .cat-page { padding: clamp(1.25rem, 3vw, 2.5rem) var(--gut) var(--sec-y); max-width: var(--maxw); margin: 0 auto; }
  .catalog-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.25rem, 3.2vw, 2.8rem); margin: 0 calc(var(--gut) * -1) 1.6rem; border: 1px solid #49331f; border-radius: 0.7rem; background: radial-gradient(ellipse at 88% 20%, rgba(201,130,46,.13), transparent 42%), linear-gradient(125deg, #1C120A 0%, #100B07 68%, #0A0705 100%); }
  .catalog-hero-immersive { min-height: min(88svh, 58rem); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(2rem, 7vw, 7rem) calc(var(--gut) * 2); border: 0; border-radius: 0; margin-bottom: clamp(2.5rem, 6vw, 5rem); background: #0A0705 var(--hero-img, url('/img/hero-pecera-1920.webp')) var(--hero-pos, center) / cover no-repeat; }
  .catalog-hero-immersive.is-empty { min-height: 52svh; padding-bottom: clamp(2.5rem, 6vh, 4rem); margin-bottom: 1rem; }
  /* solo dos capas (UX/UI 2026-10-04): lateral para leer el texto de la izquierda e inferior en el 30% de abajo; la foto se tiene que ver, es lo que vende la pagina */
  .catalog-hero-immersive::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,7,5,.8) 0%, rgba(10,7,5,.5) 38%, rgba(10,7,5,0) 64%), linear-gradient(0deg, rgba(10,7,5,.7) 0%, rgba(10,7,5,0) 34%), radial-gradient(ellipse at 72% 40%, rgba(201,130,46,.14), transparent 37%); }
  /* miga y parrafo pueden caer sobre agua clara o plantas: sombra suave para que se lean (UX/UI) */
  .catalog-hero-immersive .crumb, .catalog-hero-immersive .lede { text-shadow: 0 1px 2px rgba(10,7,5,.75), 0 2px 14px rgba(10,7,5,.65); }
  .catalog-hero-immersive::after { right: 8%; bottom: 10%; width: clamp(9rem, 20vw, 18rem); opacity: .65; }
  .catalog-hero-immersive .crumb { margin-bottom: auto; position: relative; }
  .catalog-hero-immersive .eyebrow, .catalog-hero-immersive h1, .catalog-hero-immersive .lede, .catalog-hero-immersive .stat { position: relative; z-index: 1; }
  .catalog-hero-immersive h1 { display: grid; max-width: 10ch; font-weight: 600; font-size: clamp(4rem, 11vw, 9.5rem); line-height: .88; letter-spacing: -.035em; text-shadow: 0 .2rem 2rem rgba(0,0,0,.55); }
  @keyframes title-rise { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: translateY(0); } }
  .catalog-hero-immersive h1 span { animation: title-rise .65s var(--ease) both; }
  .catalog-hero-immersive h1 span + span { animation-delay: .12s; }
  .catalog-hero-immersive h1 span:last-child { color: var(--amber-hi); }
  .catalog-hero-immersive .lede { max-width: 48ch; margin: 1.2rem 0 1.25rem; }
  .catalog-hero::after { content: ""; position: absolute; z-index: -1; right: -3.5rem; bottom: -6rem; width: clamp(10rem, 25vw, 24rem); aspect-ratio: 1; border: 1px solid rgba(233,178,90,.12); border-radius: 50%; box-shadow: 0 0 0 1.5rem rgba(233,178,90,.025), 0 0 0 3rem rgba(233,178,90,.02); pointer-events: none; }
  .catalog-hero .crumb { margin-bottom: clamp(1.4rem, 3vw, 2.5rem); }
  .catalog-hero h1 { position: relative; margin-top: .35rem; font-size: clamp(2.25rem, 1.4rem + 4vw, 4.2rem); letter-spacing: -.035em; }
  .catalog-hero .lede { position: relative; max-width: 56ch; margin: .8rem 0 1.25rem; color: #CDBB96; }
  .catalog-hero .stat { position: relative; display: inline-flex; align-items: baseline; gap: .45rem; margin: .25rem 0 0; padding: .45rem .8rem .45rem .55rem; border: 1px solid rgba(233,178,90,.28); border-radius: 999px; background: rgba(10,7,5,.45); color: var(--cream); font-size: .85rem; }
  .catalog-hero .stat strong { margin: 0; font-size: 1.45rem; }
  .crumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }
  .crumb a { color: var(--amber-hi); }
  .crumb a:hover { text-decoration: underline; }
  .cat-page h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.12; color: var(--cream); }
  .cat-page .lede { color: var(--muted); max-width: 60ch; margin: 0.6rem 0 1.2rem; font-size: 1.02rem; }
  .catalog-hero-immersive .lede { color: #CDBB96; }
  /* escritorio (UX/UI 2026-10-05): el titulo y los textos del hero de categoria se veian chicos frente a la portada (45px contra 118px); .cat-page h1 (mas abajo)
     le ganaba a .catalog-hero h1 por orden, por eso el prefijo .cat-page. Celular no se toca (su regla esta en el @media de abajo). */
  @media (min-width: 761px) {
    .cat-page .catalog-hero-immersive h1 { font-size: clamp(56px, 6vw, 88px); line-height: .9; }
    .cat-page .catalog-hero-immersive { background-position: var(--hero-pos-d, var(--hero-pos, center)); }
    .cat-page .catalog-hero-immersive.is-empty { padding-top: clamp(1.5rem, 3vw, 2.5rem); }   /* vacio: con el titulo grande, menos aire arriba para que la nota y el CTA sigan en la primera pantalla */
    .cat-page .catalog-hero-immersive .eyebrow { font-size: 13px; }
    .cat-page .catalog-hero-immersive .lede { max-width: 60ch; font-size: 18px; line-height: 1.55; }
    .cat-page .catalog-hero-immersive .stat { align-self: flex-start; gap: .55rem; padding: .55rem 1rem .55rem .7rem; font-size: 14.5px; }
    .cat-page .catalog-hero-immersive .stat strong { font-size: 1.75rem; }
  }
  /* peces (UX/UI 2026-10-05): la foto es clara (agua y plantas) y la miga y el parrafo se perdian; velo lateral mas firme, velo superior para la miga y sombra mas marcada,
     sin oscurecer la pecera entera. En celular se conservan las capas propias de ese ancho y se suma el velo superior. */
  .cat-page .hero-peces .crumb, .cat-page .hero-peces .lede, .cat-page .hero-plantas .crumb, .cat-page .hero-plantas .lede, .cat-page .hero-filtros .crumb, .cat-page .hero-filtros .lede, .cat-page .hero-acondicionadores .crumb, .cat-page .hero-acondicionadores .lede, .cat-page .hero-alimentos .crumb, .cat-page .hero-alimentos .lede, .cat-page .hero-medicamentos .crumb, .cat-page .hero-medicamentos .lede { text-shadow: 0 1px 3px rgba(10,7,5,.9), 0 2px 18px rgba(10,7,5,.8); }
  .cat-page .hero-peces::before, .cat-page .hero-plantas::before, .cat-page .hero-filtros::before { background: linear-gradient(180deg, rgba(10,7,5,.6) 0%, rgba(10,7,5,0) 22%), linear-gradient(90deg, rgba(10,7,5,.85) 0%, rgba(10,7,5,.65) 42%, rgba(10,7,5,.3) 62%, rgba(10,7,5,0) 80%), linear-gradient(0deg, rgba(10,7,5,.6) 0%, rgba(10,7,5,0) 30%), radial-gradient(ellipse at 72% 40%, rgba(201,130,46,.14), transparent 37%); }
  .cat-page .hero-acondicionadores::before, .cat-page .hero-alimentos::before, .cat-page .hero-medicamentos::before { background: linear-gradient(90deg, rgba(10,7,5,.78) 0%, rgba(10,7,5,.5) 34%, rgba(10,7,5,0) 58%), linear-gradient(0deg, rgba(10,7,5,.65) 0%, rgba(10,7,5,0) 32%); }   /* velo mas suave que el de peces: la gota y la luz de arriba al centro quedan visibles */
  @media (max-width: 760px) { .cat-page .hero-peces::before, .cat-page .hero-plantas::before, .cat-page .hero-filtros::before, .cat-page .hero-acondicionadores::before, .cat-page .hero-alimentos::before, .cat-page .hero-medicamentos::before { background: linear-gradient(180deg, rgba(10,7,5,.65) 0%, rgba(10,7,5,0) 28%), linear-gradient(90deg, rgba(10,7,5,.35) 0%, rgba(10,7,5,0) 70%), linear-gradient(0deg, rgba(10,7,5,.92) 0%, rgba(10,7,5,.7) 38%, rgba(10,7,5,0) 62%); } }
  /* portadas de plantas y filtros (UX/UI 2026-10-18): fotos claras; en celular el velo inferior sube un poco mas para que la miga y el parrafo se lean sobre las hojas y los equipos */
  @media (max-width: 760px) { .cat-page .hero-plantas::before, .cat-page .hero-filtros::before { background: linear-gradient(180deg, rgba(10,7,5,.65) 0%, rgba(10,7,5,0) 28%), linear-gradient(90deg, rgba(10,7,5,.45) 0%, rgba(10,7,5,0) 75%), linear-gradient(0deg, rgba(10,7,5,.94) 0%, rgba(10,7,5,.8) 46%, rgba(10,7,5,.3) 66%, rgba(10,7,5,0) 80%); } }
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
  .chip { min-height: var(--tap); padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--cream); font: inherit; font-size: 0.9rem; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
  .chip:hover { border-color: var(--amber-hi); }
  .chip[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: var(--ink); font-weight: 600; }
  .note { background: linear-gradient(110deg, rgba(201,130,46,.12), var(--wood-2) 72%); border: 1px solid rgba(233,178,90,.2); border-left: 3px solid var(--amber-hi); padding: 0.9rem 1.1rem; margin: 0 0 1rem; max-width: 68ch; border-radius: 0.35rem; color: var(--cream); }
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.35rem); align-items: stretch; }
  .item { position: relative; background: radial-gradient(ellipse at var(--light-x,50%) var(--light-y,0%), rgba(233,178,90,.13), transparent 54%), linear-gradient(155deg, #1B120B, #100B07 72%); border: 1px solid #38281b; border-radius: 0.65rem; overflow: hidden; display: flex; flex-direction: column; transition: border-color .35s ease, transform .55s var(--ease), box-shadow .35s ease, background-position .35s ease; }
  .item:hover { border-color: #8A6031; transform: translateY(-4px); box-shadow: 0 1rem 2.5rem rgba(0,0,0,.28); }
  .item .ph { position: relative; aspect-ratio: 4 / 4.7; background: #E8DCC2; isolation: isolate; overflow: hidden; }
  .item .ph img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .65s var(--ease), filter .3s ease; }
  .item .ph img[src^="/img/peces/"] { object-position: center 33%; mix-blend-mode: normal; }
  .item:not(.vendido):hover .ph img { transform: scale(1.035); }
  .item .ph .num { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 1; background: var(--ink); color: var(--amber-hi); font-family: var(--mono); font-size: 0.8rem; letter-spacing: .06em; padding: 0.2rem 0.5rem; border-radius: 0.2rem; }
  .item.vendido .ph img { filter: grayscale(.6) brightness(.85); opacity: .55; }
  .item .sold { position: absolute; left: -15%; right: -15%; top: 50%; z-index: 1; transform: translateY(-50%) rotate(-24deg); text-align: center; background: var(--sold); color: var(--cream); font-family: var(--mono); font-weight: 600; font-size: 0.9rem; letter-spacing: .16em; text-transform: uppercase; padding: 0.45rem 0; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
  .item .talla { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 1; background: rgba(10,7,5,.82); color: var(--cream); border: 1px solid var(--line); font-size: 0.8rem; padding: 0.15rem 0.6rem; border-radius: 999px; }
  .item .peso { display: block; }
  /* peces: stock ("Queda 1 pareja"), unidad del precio, notas y ficha de la especie dentro de la tarjeta */
  .item .queda { color: var(--moss-hi); font-weight: 600; }
  .item .price .unidad { font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--muted); }
  .item .nota-pez { font-style: italic; }
  /* enlace directo a una pieza (/troncos/#tronco-12): html ya trae scroll-padding-top para la cabecera fija; la pieza se resalta */
  .item[id]:target { outline: 2px solid var(--amber-hi); outline-offset: 3px; }
  /* "Completa tu compra" (troncos, al agregar a Mi pedido): compacto, una fila por producto con su "Agregar" */
  .comp-aviso .comp-compra { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
  .comp-aviso .comp-fila { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .comp-aviso .comp-fila .comp-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* plantas (UX/UI 2026-10-17): foto, cientifico, selector de cantidad (x6 / x12, -/+) con total */
  .item .ph img[src^="/img/plantas/"] { object-position: center center; mix-blend-mode: normal; }   /* foto horizontal en tarjeta vertical: el recorte se reparte parejo a izquierda y derecha */
  .item .cientifico { color: var(--muted); }
  .item .qty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.45rem 0 0.1rem; }
  .item .qty[hidden] { display: none; }
  .item .qty-et { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }
  .item .qty-rapido { min-width: 44px; min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--cream); font-weight: 600; cursor: pointer; }
  .item .qty-rapido[aria-pressed="true"] { border-color: var(--amber-hi); color: var(--amber-hi); }
  .item .qty-paso { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: #241a0e; }
  .item .qty-paso button { width: 44px; min-height: 44px; border: 0; border-radius: 6px; background: #3a2b16; color: var(--cream); font-weight: 700; font-size: 1.05rem; cursor: pointer; }
  .item .qty-paso button:disabled { opacity: .35; cursor: not-allowed; }
  .item .qty-paso output { min-width: 2rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cream); }
  .item .qty-total { flex-basis: 100%; font-weight: 600; color: var(--cream); }
  /* plantas: cuidados (Complejidad, Luz, CO2, Sustrato) con icono + texto siempre visible + 1 a 3 puntos; el nivel no depende solo del color */
  .item .cuidados { list-style: none; margin: 0.35rem 0 0.1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .item .cuid { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0.3rem 0.5rem; border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; background: #1d140a; color: var(--cream); font-size: 0.8rem; line-height: 1.15; }
  .item .cuid svg { flex: none; color: var(--amber-hi); }
  .item .cuid-t { display: flex; flex-direction: column; min-width: 0; flex: 1; font-weight: 600; overflow-wrap: break-word; hyphens: none; }
  .item .cuid-t b { font-weight: 500; font-size: 0.72rem; color: var(--muted); }
  .item .dots { display: flex; gap: 3px; margin-top: 3px; }
  .item .dots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
  .item .dots i.on { background: currentColor; }
  .item .cuid.nv-1 { border-left-color: var(--moss-hi); color: var(--cream); } .item .cuid.nv-1 .dots { color: var(--moss-hi); }
  .item .cuid.nv-2 { border-left-color: var(--amber-hi); } .item .cuid.nv-2 .dots { color: var(--amber-hi); }
  .item .cuid.nv-3 { border-left-color: #F0997A; } .item .cuid.nv-3 .dots { color: #F0997A; }
  .item .por-que { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
  .cat-page[data-cat="planta"] .editorial-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }   /* en 375 px, una tarjeta por fila: asi los 4 cuidados caben 2 x 2 */
  .comp-enc { font-style: normal; font-weight: 700; color: var(--amber-hi); }
  .item .ficha { margin-top: 0.3rem; }
  .item .ficha summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--amber-hi); font-size: 0.8rem; font-weight: 600; }
  .item .ficha p { font-size: 0.8rem; color: var(--muted); line-height: 1.5; padding-bottom: 0.4rem; }
  .item .bd { padding: clamp(.8rem, 1.5vw, 1.15rem); display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
  .item h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem); color: var(--cream); }
  .item small { color: var(--muted); font-size: 0.8rem; }
  .item .price { padding-top: 0.45rem; font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.95rem); }
  .item .price-consultar { color: var(--cream); font-size: 1rem; font-weight: 400; }
  .item .bd > .price { margin-top: auto; }
  .item .bd > .price + .acciones { margin-top: 0; }
  /* el boton (o los dos botones, si hay "Agregar") van SIEMPRE pegados al fondo de la tarjeta: el margin-top:auto
     esta en .acciones (que siempre existe), no en .price (que a veces no se imprime si falta el precio) */
  .item .acciones { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .item .acciones .btn { flex: 1 1 auto; width: auto; min-width: 6.4rem; margin-top: 0; }
  .item.elegido { border-color: var(--amber-hi); box-shadow: 0 0 0 2px var(--amber-hi) inset; }
  .item .ph { cursor: zoom-in; }
  button.ph { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; display: block; width: 100%; }

  /* foto ampliada (lightbox): abre al tocar la foto de cualquier tronco, disponible o vendido */
  .lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(10,7,5,.92); opacity: 0; transition: opacity .2s ease; }
  .lightbox[hidden] { display: none; }
  .lightbox.open { opacity: 1; }
  .lightbox-img { max-width: 100%; max-height: 100%; }
  .lightbox-img img { display: block; max-width: 100%; max-height: 85vh; width: auto; height: auto; margin: 0 auto; border-radius: 0.4rem; }
  .lightbox-close { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--line); background: var(--ink); color: var(--cream); font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .lightbox-close:hover { border-color: var(--amber-hi); color: var(--amber-hi); }
  .lb-open { overflow: hidden; }

  /* barra fija de pedido multiple: solo aparece si hay 1+ troncos elegidos; se apila arriba del aviso de cookies */
  .cart-bar { position: fixed; left: 0; right: 0; bottom: var(--cookie-h, 0px); z-index: 55; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; background: var(--wood-2); border-top: 1px solid var(--line); padding: 0.7rem var(--gut) calc(0.7rem + env(safe-area-inset-bottom)); transition: bottom .2s ease; }
  .cart-bar[hidden] { display: none; }
  .cart-count { margin-right: auto; font-size: 0.9rem; font-weight: 600; color: var(--cream); }
  .cart-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
  .cart-chips button { display: inline-flex; align-items: center; gap: 0.3rem; min-height: var(--tap); padding: 0.4rem 0.8rem; background: var(--ink); border: 1px solid var(--line); border-radius: 999px; color: var(--cream); font-size: 0.8rem; cursor: pointer; }
  .cart-chips button:hover { border-color: var(--amber-hi); color: var(--amber-hi); }
  :is(.cookies-on, .cart-on) body { padding-bottom: calc(var(--cookie-h, 0px) + var(--cart-h, 0px)); }
  :is(.cookies-on, .cart-on) .fab-wa { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--cookie-h, 0px) + var(--cart-h, 0px) + 0.5rem); }
  :is(.cookies-on, .cart-on) .to-top { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.6rem + var(--cookie-h, 0px) + var(--cart-h, 0px) + 0.5rem); }
  .help { margin-top: 1rem; border: 1px solid rgba(233,178,90,.24); background: linear-gradient(120deg, rgba(201,130,46,.1), rgba(27,18,11,.86)); border-radius: 0.5333rem; padding: .85rem 1rem; display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; align-items: center; justify-content: space-between; }
  .help p { max-width: 60ch; font-family: var(--serif); font-size: clamp(1.15rem, 4vw, 1.45rem); line-height: 1.15; color: var(--cream); }
  .vacio { display: none; padding: 1.2rem 0; color: var(--muted); }
  .stat { color: var(--muted); margin: 0 0 1rem; }
  .stat strong { font-family: var(--sans); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--amber-hi); margin-right: 0.4rem; font-variant-numeric: lining-nums tabular-nums; }
  .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin-bottom: 1.2rem; }
  .catalog-filters { position: sticky; top: 4.8rem; z-index: 20; padding: .7rem .9rem; margin-bottom: 1.3rem; border: 1px solid rgba(233,178,90,.2); border-radius: .55rem; background: rgba(16,11,7,.84); backdrop-filter: blur(14px); box-shadow: 0 .8rem 2rem rgba(0,0,0,.22); }
  /* en celular los chips ocupan 3-4 filas: fijos taparian un tercio de la pantalla, asi que solo se fijan desde tablet */
  @media (max-width: 767px) { .catalog-filters { position: static; } }
  .catalog-filters .chips { gap: .45rem; }
  .filters .chips { margin-bottom: 0; }
  .switch { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); padding: 0 0.3rem; background: none; border: 0; color: var(--cream); font: inherit; font-size: 0.9rem; cursor: pointer; }
  .switch .track { position: relative; flex: none; width: 2.4rem; height: 1.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--wood-2); transition: border-color .2s ease, background .2s ease; }
  .switch .track::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--muted); transition: transform .2s ease, background .2s ease; }
  .switch:hover .track { border-color: var(--amber-hi); }
  .switch[aria-checked="true"] .track { border-color: var(--amber); background: rgba(201, 130, 46, .2); }
  .switch[aria-checked="true"] .track::after { transform: translateX(1rem); background: var(--amber-hi); }
  .faq { margin: 0 0 1.2rem; }
  .faq > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); cursor: pointer; color: var(--cream); font-weight: 600; border-bottom: 1px solid var(--amber); list-style: none; }
  .faq > summary::-webkit-details-marker { display: none; }
  .faq > summary::after { content: "⌄"; color: var(--amber-hi); transition: transform .25s ease; }
  .faq > summary:hover { color: var(--amber-hi); }
  .faq[open] > summary::after { transform: rotate(180deg); }
  .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 0.6rem; margin-top: 1rem; align-items: start; }
  .faq-q { background: var(--wood-2); border: 1px solid var(--line); border-radius: 0.5333rem; transition: border-color .2s ease; }
  .faq-q:hover, .faq-q[open] { border-color: #6B4B27; }
  .faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: var(--tap); padding: 0.6rem 1rem; cursor: pointer; list-style: none; font-size: 0.95rem; font-weight: 600; color: var(--cream); }
  .faq-q summary::-webkit-details-marker { display: none; }
  .faq-q summary::after { content: "+"; flex: none; color: var(--amber-hi); font-size: 1.2rem; line-height: 1; }
  .faq-q[open] summary::after { content: "−"; }
  .faq-q p { padding: 0 1rem 0.9rem; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
  @media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1500px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (max-width: 400px) { .item .bd { padding: 0.6rem 0.6rem 0.75rem; } .item .btn { padding-inline: 0.4rem; font-size: 0.8rem; } }
  @media (max-width: 520px) { .catalog-hero { padding: 1.1rem; margin-top: -.25rem; border-radius: .5rem; } .catalog-hero .crumb { margin-bottom: 1.4rem; } .catalog-hero::after { right: -5rem; bottom: -5rem; } .catalog-filters { padding: .55rem; } .catalog-filters .chip { padding-inline: .75rem; font-size: .82rem; } }
  @media (max-width: 760px) { .catalog-hero-immersive.is-empty { min-height: auto; padding: 1.1rem var(--gut) 1.5rem; margin-bottom: .8rem; } .catalog-hero-immersive.is-empty .crumb { margin-bottom: .8rem; } .catalog-hero-immersive.is-empty .lede { margin: .65rem 0 0; } .cat-page:has(.catalog-hero.is-empty) { padding-top: .65rem; } .cat-page:has(.catalog-hero.is-empty) .help { margin-top: .7rem; padding: .75rem; gap: .5rem; } .cat-page:has(.catalog-hero.is-empty) .help .btn { width: 100%; } }

  .grid .item:nth-child(4n + 2) { transition-delay: .06s; }
  .grid .item:nth-child(4n + 3) { transition-delay: .12s; }
  .grid .item:nth-child(4n + 4) { transition-delay: .18s; }
  .js .grid .item { transition-property: opacity, transform, border-color, box-shadow, background; transition-duration: .65s, .65s, .35s, .35s, .35s; }
  .js .grid .item:not(.is-visible) { transform: translateY(1.4rem); }
  .js .grid .item.is-visible { transform: translateY(0); }
  .js .grid .item.is-visible:hover { transform: translateY(-4px); }
  @media (min-width: 1000px) { .editorial-grid .item:nth-child(4n + 2), .editorial-grid .item:nth-child(4n + 4) { margin-top: 1.25rem; } }
  @media (max-width: 999px) { .editorial-grid .item { margin-top: 0 !important; } }
  .editorial-grid .acciones { flex-direction: column; }
  .editorial-grid .acciones .btn { width: 100%; }
  @media (max-width: 760px) {
    .hero { min-height: max(40rem, 88svh); }
    .hero-logo { width: clamp(6rem, 25vw, 9rem); }
    .catalog-hero-immersive { min-height: 82svh; padding: 1.5rem var(--gut) 3rem; background-position: var(--hero-pos, center); }
    /* celular: foto visible arriba, texto sobre la zona oscura de abajo */
    .catalog-hero-immersive::before { background-image: linear-gradient(90deg, rgba(10,7,5,.35) 0%, rgba(10,7,5,0) 70%), linear-gradient(0deg, rgba(10,7,5,.92) 0%, rgba(10,7,5,.7) 38%, rgba(10,7,5,0) 62%); }
    /* vacio en celular: el hero es bajo y el titulo caia sobre el letrero de la foto; se agranda la foto y se muestra solo la parte baja (plantas y peces) */
    .catalog-hero-immersive.is-empty { background-size: auto 230%; background-position: 60% 96%; }
    .catalog-hero-immersive h1 { font-size: clamp(3.35rem, 17vw, 5rem); }
    .hero-acondicionadores h1 { font-size: clamp(2.4rem, 13vw, 5rem); }   /* "Acondicionadores" es una sola palabra larga: a 17vw no entra en celular */
    .catalog-filters { top: 4.2rem; }
  }
  @media (prefers-reduced-motion: reduce) { .js .grid .item:not(.is-visible) { opacity: 1; transform: none; } }

  /* pagina de error (404) */
  .err-page { min-height: 55vh; display: grid; align-content: center; justify-items: start; gap: 0.9rem; padding: var(--sec-y) var(--gut); max-width: var(--maxw); margin: 0 auto; }
  .err-page h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); line-height: 1.12; color: var(--cream); max-width: 20ch; }
  .err-page p { color: var(--muted); max-width: 46ch; }
  .err-page .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }

/* Inicio: continuidad inmersiva con el lenguaje editorial de categorías */
.acond-sec { margin: clamp(2rem,4vw,3.5rem) 0; }
.acond-sec > h2 { color:var(--cream); font:600 clamp(1.8rem,3vw,2.8rem)/1.1 var(--serif); }
.acond-sec > h2 em { color:var(--amber-hi); font-style:normal; }
.acond-sec > .sub { color:var(--muted); margin:.55rem 0 1.25rem; }
.prod-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.prod-grid.tres { grid-template-columns:repeat(3,minmax(0,1fr)); }
.prod { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:.7rem; background:var(--ink); }
.prod-ph { height:230px; display:flex; align-items:center; justify-content:center; padding:.9rem .9rem 0; overflow:hidden; background:var(--paper); }   /* flex y no grid: en grid el height:100% de la foto se resolvia contra su alto natural (560 px) y tapaba el texto */
.prod-ph img { height:100%; width:auto; max-width:100%; object-fit:contain; object-position:center bottom; mix-blend-mode:multiply; }
.prod-b { display:flex; flex-direction:column; flex:1; gap:.5rem; padding:1rem; }
.prod-b h3 { color:var(--cream); font:600 1.3rem/1.2 var(--serif); }
.prod-para { color:var(--amber-hi); font-weight:600; }
.prod-txt,.fila-txt { color:var(--muted); font-size:.9rem; line-height:1.5; }
.pres { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:.55rem; }
.pill { min-height:44px; display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .6rem; border:1px solid #4a3a21; border-radius:8px; color:var(--cream); font-size:.85rem; font-variant-numeric:tabular-nums; }
.pill b { color:var(--amber-hi); }
.pill:hover,.pill:focus-visible { border-color:var(--amber-hi); }
.combo-det .combo-bt { height:112px; position:relative; display:flex; align-items:flex-end; justify-content:center; gap:.6rem; padding:.6rem .6rem 0; overflow:hidden; background:var(--paper); }
.combo-det .combo-bt img { height:100%; width:auto; max-width:31%; object-fit:contain; }
.combo-det .combo-bt .tag { top:.45rem; }
.combo-det .ahorro { color:#6fd49a; font-size:.8rem; font-weight:600; }
.fam { margin-top:1.25rem; }
.fam-t { margin:1rem 0 .55rem; color:var(--amber-hi); font:600 .8rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.fila { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1.6fr); align-items:center; gap:.7rem; margin:.45rem 0; padding:.75rem; border:1px solid var(--line); border-radius:10px; background:#17120b; }
.fila strong { color:var(--cream); }
@media(max-width:899px) { .prod-grid,.prod-grid.tres { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:699px) { .fila { grid-template-columns:minmax(0,1fr); } }
@media(max-width:599px) {
  .prod-grid,.prod-grid.tres { grid-template-columns:1fr; }
  .prod { flex-direction:row; }
  .prod-ph { flex:0 0 34%; min-width:0; min-height:170px; height:auto; padding:.6rem; }
  .prod-ph img { width:100%; height:auto; max-height:170px; object-position:center; }
  .prod-b { min-width:0; padding:.7rem; }
  .prod-b h3 { font-size:1.1rem; }
  .prod-txt { font-size:.82rem; }
  .pill { padding:.4rem .45rem; font-size:.78rem; }
}
/* /alimentos/ (UX/UI 2026-10-14): bloques por tipo de pez con foto tenue de fondo; en celular la foto va arriba y mas tenue */
.alim-pick { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 clamp(1.5rem,3vw,2.5rem); }
.alim-pick span { margin-right:.25rem; color:var(--muted); font:500 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.alim-pick a, .alim-tags a { min-height:44px; display:inline-flex; align-items:center; padding:0 1rem; border:1px solid #4a3a21; border-radius:999px; background:#17120b; color:var(--cream); font-size:.9rem; font-weight:600; transition:border-color .2s ease, color .2s ease; }
.alim-pick a:hover, .alim-pick a:focus-visible, .alim-tags a:hover, .alim-tags a:focus-visible { border-color:var(--amber-hi); color:var(--amber-hi); }
.alim-bloques { display:flex; flex-direction:column; gap:1.25rem; }
.alim-blk { position:relative; isolation:isolate; overflow:hidden; padding:clamp(1.25rem,3vw,2rem); border:1px solid var(--line); border-radius:12px; background:linear-gradient(160deg,#14100a 0%,#0f0c08 100%); }
.alim-fondo { position:absolute; z-index:-1; top:0; right:0; width:64%; height:100%; object-fit:cover; opacity:.55; pointer-events:none; -webkit-mask-image:linear-gradient(to left,#000 35%,transparent 100%); mask-image:linear-gradient(to left,#000 35%,transparent 100%); }
.alim-blk > h2 { color:var(--cream); font:600 clamp(1.7rem,2.8vw,2.4rem)/1.1 var(--serif); text-shadow:0 1px 3px rgba(10,7,5,.9); }
.alim-blk > .sub { max-width:48ch; margin:.35rem 0 1.1rem; color:#CDBB96; text-shadow:0 1px 3px rgba(10,7,5,.9); }
.alim-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; }
.alim { min-width:0; display:flex; overflow:hidden; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.alim-ph { position:relative; flex:0 0 44%; min-height:10.5rem; display:flex; align-items:center; justify-content:center; padding:0; background:var(--paper); }   /* UX/UI 2026-10-20: la imagen llena su recuadro (antes quedaba chica al centro) */
.alim-ph img { position:absolute; inset:.15rem; width:calc(100% - .3rem); height:calc(100% - .3rem); object-fit:contain; mix-blend-mode:multiply; }
.eq-ph { background:#fff; }   /* filtros y equipos (UX/UI 2026-10-18): fondo blanco puro; las fotos ya vienen recortadas con margen uniforme, asi el PNG sin fondo y el JPG se ven igual */
.alim-rec { position:absolute; top:.5rem; left:.5rem; padding:.2rem .45rem; border-radius:4px; background:var(--ink); color:var(--amber-hi); font:600 .64rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.alim-rec-pedido { background:#17120b; color:#CDBB96; border:1px solid #4a3a21; }   /* "Por pedido": stock 0 en la hoja, se trae del proveedor */
.alim-b { min-width:0; flex:1; display:flex; flex-direction:column; gap:.3rem; padding:.8rem .85rem .85rem; }
.alim-marca { color:var(--amber-hi); font:600 .7rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.alim-b h3 { color:var(--cream); font:600 1.2rem/1.15 var(--serif); }
.alim-b .pres { display:grid; grid-template-columns:repeat(auto-fill,minmax(4.7rem,1fr)); gap:.4rem; }   /* tarjeta angosta: tamano arriba y precio abajo, 2 o mas por fila */
.alim-b .pill { flex-direction:column; justify-content:center; gap:0; white-space:nowrap; padding:.3rem .35rem; font-size:.8rem; line-height:1.2; text-align:center; }
.alim-otros { margin-top:1.25rem; padding:clamp(1.1rem,2.5vw,1.5rem); border:1px solid var(--line); border-radius:12px; background:#14100a; }
.alim-otros h2 { color:var(--cream); font:600 clamp(1.4rem,2.2vw,1.8rem)/1.15 var(--serif); }
.alim-otros p { margin:.3rem 0 0; color:var(--muted); }
.alim-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.alim-tags a { font-weight:500; }
@media(max-width:1099px) { .alim-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:599px) {
  .alim-grid { grid-template-columns:1fr; }
  .alim-fondo { width:100%; height:16rem; opacity:.3; -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 100%); mask-image:linear-gradient(to bottom,#000 30%,transparent 100%); }
  .alim-blk { padding:1.1rem .85rem .9rem; }
  .alim-ph { flex-basis:44%; min-height:9.5rem; }
  .alim-b { padding:.7rem; }
  .alim-b h3 { font-size:1.1rem; }
  .alim-b .prod-txt { font-size:.82rem; }
}
/* /medicamentos/ (UX/UI 2026-10-14): filtros por sintoma (sin JS no se muestran y se ve todo), tarjetas como /alimentos/ */
.med-filtros { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 1rem; }
html:not(.js) .med-filtros { display:none; }
.med-filtros span { margin-right:.25rem; color:var(--muted); font:500 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.med-f { min-height:44px; padding:0 1rem; border:1px solid #4a3a21; border-radius:999px; background:#17120b; color:var(--cream); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.med-f:hover, .med-f:focus-visible { border-color:var(--amber-hi); color:var(--amber-hi); }
.med-f:focus-visible { outline:2px solid var(--amber-hi); outline-offset:2px; }
.med-f[aria-pressed="true"] { background:var(--amber); border-color:var(--amber); color:var(--ink); }
.med-aviso { max-width:none; margin-bottom:0; }
.med-lista { margin-top:clamp(1.5rem,3vw,2.5rem); }
.med-internos { max-width:none; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; }
.med-internos p { flex:1 1 30rem; }
.med-internos[hidden], .med[hidden], .med-lista .sub[hidden] { display:none; }
.med-pc { color:#CDBB96; font-size:.82rem; line-height:1.45; }
.med-pc b { color:var(--cream); }
@media(min-width:600px) { .med-page .alim-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }   /* las precauciones son largas: en 3 columnas el texto quedaba muy angosto */
.med-aviso-corto { display:none; }
#med-titulo:focus, #med-titulo:focus-visible { outline:none; }   /* recibe el foco al filtrar (lectores de pantalla); no es un control: sin anillo */
@media(max-width:599px) {
  /* celular: una sola fila con scroll horizontal y degradado a la derecha como pista de que hay mas (UX/UI) */
  .med-filtros { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-right:2.5rem; margin-right:calc(var(--gut) * -1);
                 -webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent); }
  .med-filtros::-webkit-scrollbar { display:none; }
  .med-filtros span { flex:none; }
  .med-f { flex:none; scroll-snap-align:start; white-space:nowrap; }
  .med-aviso-largo { display:none; }
  .med-aviso-corto { display:inline; }
}
.med-nof { color:#B0997A; font:600 .8rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
/* Ofertas (Carlos via UX/UI, 2026-10-14): tachado + precio oferta en acento + etiqueta; "Ultimas unidades" sin numero; sin cuenta regresiva en vivo */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pill-oferta { flex-wrap:wrap; border-color:var(--amber-hi); background:rgba(201,130,46,.12); }
.alim-b .pill-oferta { grid-column:1 / -1; flex-direction:row; justify-content:flex-start; gap:.25rem .45rem; padding:.4rem .55rem; text-align:left; }
.pill-oferta s, .oferta-precio s { color:var(--muted); font-weight:400; }
.pill-oferta strong { color:var(--amber-hi); font-size:1.05rem; }
.oferta-tag, .oferta-ultimas { display:inline-block; padding:.1rem .4rem; border-radius:4px; font:600 .62rem var(--mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.oferta-tag { background:var(--amber-hi); color:var(--ink); }
.oferta-ultimas { border:1px solid var(--amber-hi); color:var(--amber-hi); }
.oferta-hasta { flex-basis:100%; color:var(--muted); font-size:.75rem; }
.oferta-box { display:flex; flex-direction:column; gap:.75rem; margin:0 0 clamp(1.5rem,3vw,2.5rem); padding:clamp(1rem,2.5vw,1.4rem); border:1px solid rgba(233,178,90,.45); border-radius:12px; background:linear-gradient(120deg, rgba(201,130,46,.16), rgba(27,18,11,.9) 70%); }
.oferta-item { display:flex; align-items:center; gap:1rem; min-width:0; }
.oferta-ph { flex:none; width:96px; height:120px; display:flex; align-items:center; justify-content:center; padding:.4rem; border-radius:8px; background:var(--paper); }
.oferta-ph img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.oferta-b { min-width:0; display:flex; flex-direction:column; gap:.45rem; }
.oferta-b h3 { color:var(--cream); font:600 clamp(1.2rem,2vw,1.5rem)/1.15 var(--serif); }
.oferta-b h3 span { color:var(--muted); font:500 .9rem var(--sans, inherit); }
.oferta-precio { display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem; }
.oferta-precio strong { color:var(--amber-hi); font:700 1.6rem/1 var(--sans); font-variant-numeric:tabular-nums lining-nums; }
.oferta-acc { display:flex; flex-wrap:wrap; gap:.5rem; }
#categorias + .wrap, .wrap > .oferta-box { margin-top:0; }
@media(max-width:599px) {
  .oferta-item { align-items:flex-start; }
  .oferta-ph { width:76px; height:100px; }
}
.home-hero { min-height: min(88svh, 58rem); display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 18% 58%, rgba(198,119,35,.2), transparent 42%), linear-gradient(90deg, rgba(10,7,5,.92) 0%, rgba(10,7,5,.72) 48%, rgba(10,7,5,.24) 100%), linear-gradient(0deg, rgba(10,7,5,.45), transparent 40%); }
.home-hero .hero-in { position: relative; z-index: 1; grid-template-columns: minmax(0,1fr) minmax(8rem,17rem); padding-block: clamp(4rem,9vh,8rem); }
.home-hero .hero-text { max-width: 55rem; gap: clamp(.8rem,1.5vw,1.4rem); }
.home-hero .hero h1, .home-hero h1 { display: grid; max-width: 11ch; font-size: clamp(4rem,9.2vw,8.2rem); line-height: .86; letter-spacing: -.035em; font-weight: 600; text-shadow: 0 .2rem 2rem rgba(0,0,0,.6); }
.home-hero h1 span { display:block; animation: title-rise .65s var(--ease) both; }
.home-hero h1 span:nth-child(2) { animation-delay: .1s; }
.home-hero h1 span:nth-child(3) { animation-delay: .2s; }
.home-hero h1 em, .home-hero .home-amber { color: var(--amber-hi); font-style: normal; }
.home-hero .hero p { max-width: 48ch; }
.home-hero .hero-logo { opacity: .72; filter: drop-shadow(0 .8rem 2rem rgba(0,0,0,.7)); }
/* Profundidad y reflejo compartidos con las tarjetas editoriales. */
#promociones .combo { border-radius: .8rem; box-shadow: 0 1.1rem 3rem rgba(0,0,0,.2); }
#promociones .combo::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background: radial-gradient(24rem circle at var(--light-x,50%) var(--light-y,50%), rgba(233,178,90,.15), transparent 65%); transition: opacity .35s ease; }
#promociones .combo:hover::after { opacity:1; }
#promociones .combo-b h3, .home-hero h1, #categorias .tile-l h3 { font-family: var(--serif); }
#categorias .mosaic { gap: clamp(.7rem,1.2vw,1.2rem); }
#categorias .tile { border-radius: .8rem; box-shadow: 0 1rem 2.8rem rgba(0,0,0,.2); transition: border-color .35s ease, transform .45s var(--ease), box-shadow .45s ease; }
#categorias .tile:hover { transform: translateY(-4px); border-color: #8b6234; box-shadow: 0 1.3rem 3rem rgba(0,0,0,.38); }
#categorias .tile img { mix-blend-mode: normal; filter: saturate(.82) brightness(.8); transition: transform .7s var(--ease), filter .7s ease; }
#categorias .tile:hover img { transform: scale(1.055); filter: saturate(1) brightness(.92); }
/* La imagen horizontal de portada ya deja libre la franja inferior para el texto. */
#categorias .t-troncos img { height: 100%; object-fit: cover; object-position: center top; transform-origin: center top; }
#categorias .tile.contain:hover img { filter: none; }
#categorias .tile-l { padding: 3.2rem 1.2rem 1.1rem; background: linear-gradient(0deg,rgba(10,7,5,.97),rgba(10,7,5,.84) 62%,transparent); }
#categorias .tile-l h3 { font-size: clamp(1.25rem,1rem + 1.15vw,2rem); line-height:1; }
/* en celular la tarjeta mide media pantalla: "Acondicionadores" no entra a 1.25rem y se partia */
@media (max-width: 520px) { #categorias .tile-l h3 { font-size: 1.05rem; overflow-wrap: normal; hyphens: none; } }
#categorias .tile-l p { max-width: 30ch; }
#inicio .section-head h2, #inicio .about-text h2, #inicio .contact-text h2 { font-size: clamp(2.3rem,1.5rem + 3vw,4.5rem); line-height:.98; letter-spacing:-.02em; }
#inicio .section-head, #inicio .about-text, #inicio .contact-text { gap: .9rem; }
#inicio .section { padding-block: clamp(4rem,8vw,8rem); }
#inicio .steps li { position:relative; padding: clamp(1.4rem,3vw,2.6rem); border:1px solid var(--line); border-radius:.8rem; background:linear-gradient(145deg,rgba(233,178,90,.06),transparent 65%); }
#inicio .steps .st { display:block; color:var(--amber-hi); font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; }
#inicio .steps .st b { display:block; margin-top:.35rem; font-family:var(--sans); font-weight:700; font-variant-numeric:tabular-nums lining-nums; font-size:clamp(3.3rem,6vw,5.2rem); line-height:.9; letter-spacing:0; }
#inicio .feat-i { padding-block:1.1rem; }
#contacto .contact-text { align-content:start; }
#contacto .contact-text .eyebrow { order:-1; }
body > footer { border-top-color:#634b2d; padding-block:2rem; }
#inicio .social { transition: color .25s ease, border-color .25s ease; }
@media (max-width: 700px) {
  .home-hero { min-height: 82svh; }
  .home-hero .hero-in { grid-template-columns:minmax(0,1fr); padding-block:4rem 6.5rem; }
  .home-hero .hero-logo { display:none; }
  .home-hero h1 { font-size:clamp(3.5rem,15vw,5.3rem); max-width:10ch; }
  .home-hero::after { background:radial-gradient(ellipse at 20% 55%,rgba(198,119,35,.19),transparent 48%),linear-gradient(90deg,rgba(10,7,5,.84),rgba(10,7,5,.42)),linear-gradient(0deg,rgba(10,7,5,.38),transparent 55%); }
  #categorias .tile-l { padding:2.4rem .75rem .75rem; }
}

@media (max-width: 767px) {
  body > footer { padding-bottom: calc(var(--tap) + 2rem + env(safe-area-inset-bottom)); }
  .cookies { flex-wrap: nowrap; gap: .5rem; padding: .25rem .6rem; padding-bottom: calc(.25rem + env(safe-area-inset-bottom)); }
  .cookies p { font-size: .75rem; line-height: 1.3; }
  .cookies-btns { flex-direction: row; gap: .35rem; flex: none; }
  .cookies-btns button { min-height: var(--tap); padding-inline: .7rem; font-size: .78rem; }
  /* primer pantallazo util en el movil (UX/UI 2026-10-23): franja de oferta de 1 linea, cookies de ~56 px, WhatsApp chico y en la esquina */
  .promo-bar { padding: .35rem 2.6rem .35rem .8rem; }
  .promo-bar a { display: flex; justify-content: center; gap: .3em; min-width: 0; white-space: nowrap; font-size: .78rem; line-height: 1.3; }
  .promo-bar a .promo-prod { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .promo-bar button { right: 0; font-size: 1.2rem; }
  .fab-wa { right: max(.6rem, env(safe-area-inset-right)); bottom: max(.6rem, env(safe-area-inset-bottom)); opacity: .94; }
  :is(.cookies-on, .cart-on) .fab-wa { bottom: calc(max(.6rem, env(safe-area-inset-bottom)) + var(--cookie-h, 0px) + var(--cart-h, 0px) + .5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero h1 span { animation:none; }
  #categorias .tile, #categorias .tile img, #promociones .combo::after { transition:none; }
}
@keyframes tile-enter { from { opacity:0; transform:translateY(1rem); } to { opacity:1; transform:translateY(0); } }
.js #categorias .mosaic.is-visible .tile { animation:tile-enter .55s var(--ease) both; }
.js #categorias .mosaic.is-visible .tile:nth-child(2) { animation-delay:.07s; }
.js #categorias .mosaic.is-visible .tile:nth-child(3) { animation-delay:.14s; }
.js #categorias .mosaic.is-visible .tile:nth-child(4) { animation-delay:.21s; }
.js #categorias .mosaic.is-visible .tile:nth-child(5) { animation-delay:.28s; }
.js #categorias .mosaic.is-visible .tile:nth-child(6) { animation-delay:.35s; }
.js #categorias .mosaic.is-visible .tile:nth-child(7) { animation-delay:.42s; }
@media (prefers-reduced-motion: reduce) { .js #categorias .mosaic.is-visible .tile { animation:none; } }

/* Portada (UX/UI 2026-10-15): categorias por demanda. Troncos grande; Alimentos y Acondicionadores al lado; abajo Medicamentos, Peces, Plantas y Filtros */
#categorias .mosaic > .t-troncos { grid-column:1 / 3; grid-row:1 / 3; }
#categorias .mosaic > .t-alim { grid-column:3; grid-row:1 / 3; }
#categorias .mosaic > .t-acond { grid-column:4; grid-row:1 / 3; }
#categorias .mosaic > .t-alim, #categorias .mosaic > .t-acond { aspect-ratio:auto; }
#categorias .mosaic > .t-med { grid-column:1; grid-row:3; }
#categorias .mosaic > .t-peces { grid-column:2; grid-row:3; }
#categorias .mosaic > .t-plantas { grid-column:3; grid-row:3; }
#categorias .mosaic > .t-filtros { grid-column:4; grid-row:3; }
@media (max-width: 899px) {
  #categorias .mosaic > .t-troncos { grid-column:1 / -1; grid-row:auto; }
  #categorias .mosaic > .tile:not(.t-troncos) { grid-column:auto; grid-row:auto; height:auto; aspect-ratio:4 / 5; }
}

/* Banda "Sustratos y fondos" bajo el mosaico del inicio (UX/UI 2026-10-18): fuera de la grilla para no mover los puestos de las otras categorias */
.cat-banner { display:flex; align-items:stretch; margin-top:clamp(.7rem,1.2vw,1.2rem); overflow:hidden; border:1px solid var(--line); border-radius:.8rem; background:#0F0A07; box-shadow:0 1rem 2.8rem rgba(0,0,0,.2); transition:border-color .35s ease, transform .45s var(--ease), box-shadow .45s ease; }
.cat-banner:hover, .cat-banner:focus-visible { transform:translateY(-4px); border-color:#8b6234; box-shadow:0 1.3rem 3rem rgba(0,0,0,.38); }
.cat-banner-ph { flex:0 0 clamp(6.5rem,16vw,10rem); display:flex; align-items:center; justify-content:center; padding:.8rem; background:var(--paper); }
.cat-banner-ph img { width:auto; height:auto; max-width:100%; max-height:9rem; object-fit:contain; mix-blend-mode:multiply; }
.cat-banner-l { flex:1; min-width:0; display:grid; align-content:center; gap:.2rem; padding:.9rem 1.1rem; }
.cat-banner-l h3 { font:600 clamp(1.25rem,1rem + 1.15vw,2rem)/1.05 var(--serif); color:var(--cream); }
.cat-banner-l p { max-width:44ch; color:#CDBB96; font-size:clamp(.85rem,.7rem + .3vw,.95rem); }
.cat-banner-go { align-self:center; flex:0 0 auto; padding:0 1.4rem; color:var(--amber-hi); font:600 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:599px) { .cat-banner-go { display:none; } }
@media (prefers-reduced-motion: reduce) { .cat-banner { transition:none; } }

/* Buscador (UX/UI 2026-10-15): en el hero y, en escritorio ancho, en el encabezado. Sin JS no se muestra (busca en el navegador). */
html:not(.js) .buscador { display:none; }
.buscador { position:relative; display:flex; align-items:stretch; max-width:34rem; }
.buscador input { flex:1; min-width:0; min-height:48px; padding:0 1rem; border:1px solid #4a3a21; border-right:0; border-radius:8px 0 0 8px; background:rgba(10,7,5,.85); color:var(--cream); font:inherit; font-size:1rem; }
.buscador input::placeholder { color:#B0997A; }
.buscador input:focus { outline:2px solid var(--amber-hi); outline-offset:-1px; }
.buscador .btn { min-width:48px; min-height:48px; padding:0 .9rem; border-radius:0 8px 8px 0; }
.buscador-lista { position:absolute; z-index:1000; top:calc(100% + .35rem); left:0; right:0; max-height:60vh; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:.35rem; list-style:none; border:1px solid #4a3a21; border-radius:8px; background:#14100a; box-shadow:0 1rem 2rem rgba(0,0,0,.45); }
.buscador-lista[hidden] { display:none; }
/* Resultados del buscador (Carlos via UX/UI, 2026-10-24): flotan sobre todo. Mientras estan abiertos site.js los pasa a <body> y los fija bajo el buscador (position:fixed): ni el overflow:hidden ni el transform del hero los recortan. */
.buscador-lista a { display:flex; flex-direction:column; justify-content:center; min-height:44px; padding:.45rem .7rem; border-radius:6px; color:var(--cream); }
.buscador-lista a small { display:block; color:var(--muted); font-size:.78rem; }
.buscador-lista a.bl-img { flex-direction:row; justify-content:flex-start; align-items:center; gap:.7rem; }
.buscador-lista a.bl-img img { flex:none; width:44px; height:44px; object-fit:contain; border-radius:6px; background:#f4efe6; }
.buscador-lista a:hover, .buscador-lista a:focus-visible { background:rgba(201,130,46,.16); outline:none; }
.buscador-lista .buscador-nada { padding:.6rem .7rem; color:var(--muted); font-size:.9rem; }
.buscador-lista .buscador-nada a { display:inline; min-height:0; padding:0; color:var(--amber-hi); text-decoration:underline; }
.buscador-hero { width:100%; margin:.4rem 0 .2rem; }
.buscador-head { width:15rem; }
.buscador-head input, .buscador-head .btn { min-height:40px; }
.buscador-head input { font-size:.9rem; }
@media (max-width: 1179px) { .buscador-head { display:none; } }
@media (max-width: 760px) {
  .home-hero { min-height:auto; }   /* celular: tras el titulo y el buscador, las categorias enseguida */
  .home-hero .hero-actions .btn-line { display:none; }   /* "Ver categorias" sobra: estan justo debajo */
}
body:has(.home-hero) .buscador-head { display:none; }   /* en el inicio ya esta la caja del hero: una sola a la vez (UX/UI) */

/* "Mi pedido" (UX/UI y Carlos, 2026-10-15): un solo pedido para todo el sitio. La barra y el panel los arma site.js. */
.pedido-fila { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:48px; padding:.25rem .3rem .25rem .1rem; border:1px solid #4a3a21; border-radius:8px; }
.alim-b .pres .pedido-fila, .prod-b .pres .pedido-fila, .fila .pres .pedido-fila { grid-column:1 / -1; flex:0 0 auto; width:100%; }
.pedido-fila .pill { min-height:0; border:0; padding:.2rem .4rem; background:none; cursor:default; }
.alim-b .pedido-fila .pill { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:.2rem .4rem; text-align:left; }
.pedido-fila .pill:hover, .pedido-fila .pill:focus-visible { border-color:transparent; }
.pedido-fila:has(.pill-oferta) { border-color:var(--amber-hi); background:rgba(201,130,46,.12); }
.alim-b .pres:has(.pedido-fila), .prod-b .pres:has(.pedido-fila) { display:flex; flex-direction:column; align-items:stretch; }
.pedido-ctl { flex:none; display:flex; align-items:center; gap:.4rem; }
.pedido-add { min-height:44px; padding:0 .8rem; border:0; border-radius:6px; background:var(--amber); color:var(--ink); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.pedido-add.en-pedido { background:transparent; border:1px solid var(--amber-hi); color:var(--amber-hi); }
.pedido-paso { display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:8px; background:#241a0e; }
.pedido-paso button { width:44px; min-height:44px; border:0; border-radius:6px; background:#3a2b16; color:var(--cream); font:700 1.05rem/1 var(--sans, inherit); cursor:pointer; }
.pedido-paso button:disabled { opacity:.35; cursor:not-allowed; }
.pedido-paso span { min-width:1.6rem; text-align:center; font-weight:600; font-variant-numeric:tabular-nums; color:var(--cream); }
.pedido-add:focus-visible, .pedido-paso button:focus-visible, .pedido-abrir:focus-visible, .pedido-panel button:focus-visible, .pedido-panel a:focus-visible { outline:2px solid var(--cream); outline-offset:2px; }
.pedido-bar { position:fixed; left:0; right:0; bottom:var(--cookie-h, 0px); z-index:55; display:flex; justify-content:center; padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom)); background:var(--wood-2); border-top:1px solid var(--line); }
.pedido-bar[hidden] { display:none; }
.pedido-abrir { width:100%; max-width:34rem; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 1.1rem; border:0; border-radius:10px; background:var(--amber); color:var(--ink); font:inherit; font-size:1rem; font-weight:700; cursor:pointer; box-shadow:0 .4rem 1.4rem rgba(0,0,0,.4); }
.pedido-fondo { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.55); }
.pedido-fondo[hidden], .pedido-panel[hidden] { display:none; }
.pedido-panel { position:fixed; z-index:71; top:0; right:0; bottom:0; width:min(26rem, 100%); display:flex; flex-direction:column; background:#14100a; border-left:1px solid var(--line); color:var(--cream); }
.pedido-abierto, .pedido-abierto body { overflow:hidden; }
.pedido-cab { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border-bottom:1px solid var(--line); }
.pedido-cab h2 { font:600 1.6rem/1.1 var(--serif); }
.pedido-cab h2:focus { outline:none; }
.pedido-cerrar, .pedido-acc button, .pedido-quitar { min-height:44px; padding:0 .9rem; border:1px solid #4a3a21; border-radius:8px; background:transparent; color:var(--cream); font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; }
.pedido-lineas { flex:1; overflow:auto; padding:.4rem 1rem 1rem; }
.pedido-cat { margin:1rem 0 .2rem; color:var(--amber-hi); font:600 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.pedido-linea { display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; padding:.7rem 0; border-bottom:1px solid #241a0e; }
.pedido-n { font-size:.92rem; line-height:1.3; }
.pedido-n small { display:block; color:var(--muted); font-size:.78rem; }
.pedido-n em { display:block; font-style:normal; color:#6fd49a; font-size:.78rem; }
.pedido-n .pedido-tope { color:var(--amber-hi); }
.pedido-sub { font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.pedido-linea .pedido-ctl { grid-column:1 / -1; }
.pedido-quitar { margin-left:auto; border:0; padding:0 .3rem; color:var(--muted); text-decoration:underline; }
.pedido-vacio { padding:2rem .3rem; color:var(--muted); text-align:center; }
.pedido-pie { display:flex; flex-direction:column; gap:.6rem; padding:.8rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.pedido-total { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.pedido-total b { color:var(--amber-hi); font:700 1.8rem/1 var(--sans); font-variant-numeric:tabular-nums lining-nums; }
.pedido-nota { color:var(--muted); font-size:.8rem; }
.pedido-nota[hidden] { display:none; }
.pedido-enviar { justify-content:center; min-height:48px; }
.pedido-enviar[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.pedido-acc { display:flex; gap:.5rem; }
.pedido-acc button { flex:1; }
@media (max-width: 599px) {
  .pedido-panel { top:auto; left:0; width:100%; max-height:88svh; border-left:0; border-top:1px solid var(--line); border-radius:14px 14px 0 0; }
}
.pedido-fila { flex-wrap:wrap; min-width:0; }
.pedido-fila .pill { flex:1 1 7rem; min-width:0; white-space:normal; }
.pedido-fila .pedido-ctl { margin-left:auto; }
.alim-b .pedido-fila .pill { flex-direction:row; flex-wrap:wrap; align-items:baseline; }
html:not(.js) .btn-add { display:none; }   /* sin JS no hay "Mi pedido": queda el boton de WhatsApp */
.combo-acc, .oferta-acc { display:flex; flex-wrap:wrap; gap:.5rem; }
.combo-acc .btn { flex:1 1 auto; }
.btn.btn-add[aria-pressed="true"], .btn.btn-add[aria-pressed="true"]:hover, .btn.btn-add[aria-pressed="true"]:focus-visible { background:transparent; border:1px solid var(--amber-hi); color:var(--amber-hi); box-shadow:none; }
.pedido-datos { display:flex; flex-direction:column; gap:.5rem; margin:0; padding:.6rem .7rem .7rem; border:1px solid #2b2216; border-radius:8px; }
.pedido-datos legend { padding:0 .3rem; color:var(--muted); font:600 .7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.pedido-datos label { display:flex; flex-direction:column; gap:.2rem; color:var(--muted); font-size:.8rem; }
.pedido-datos input[type="text"], .pedido-datos select { min-height:44px; padding:0 .7rem; border:1px solid #4a3a21; border-radius:8px; background:#0c0a07; color:var(--cream); font:inherit; font-size:.95rem; }
.pedido-datos input:focus, .pedido-datos select:focus { outline:2px solid var(--amber-hi); outline-offset:-1px; }
.pedido-op { display:flex; gap:.5rem; }
.pedido-op label { flex:1; flex-direction:row; align-items:center; justify-content:center; gap:.4rem; min-height:44px; border:1px solid #4a3a21; border-radius:8px; color:var(--cream); font-size:.9rem; cursor:pointer; }
.pedido-op label:has(input:checked) { border-color:var(--amber-hi); background:rgba(201,130,46,.14); }
.pedido-distrito[hidden] { display:none; }
.pedido-pie { overflow:auto; max-height:62svh; }
/* tarjeta de oferta (Carlos, 2026-10-15): con 1 oferta, compacta y de ancho natural; con 2 o mas, cuadricula de 2 a 4 tarjetas */
.oferta-box { width:fit-content; max-width:min(35rem, 100%); }
.oferta-box.oferta-varias { width:auto; max-width:none; padding:0; border:0; background:none; }
.oferta-grid { display:grid; gap:.75rem; }
.oferta-varias .oferta-grid { grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.oferta-varias .oferta-item { align-items:flex-start; padding:1rem; border:1px solid rgba(233,178,90,.45); border-radius:12px; background:linear-gradient(120deg, rgba(201,130,46,.16), rgba(27,18,11,.9) 70%); }
@media (min-width: 1100px) { .oferta-varias .oferta-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
/* Complementos (Carlos via UX/UI, 2026-10-15): aviso no bloqueante sobre la barra del pedido y bloque "Te puede servir" en el panel */
.comp-aviso { position:fixed; z-index:60; left:50%; bottom:calc(var(--cookie-h, 0px) + var(--cart-h, 0px) + .75rem); transform:translateX(-50%); width:min(30rem, calc(100% - 2 * var(--gut)));
  display:flex; align-items:center; gap:.6rem; padding:.6rem .6rem .6rem .9rem; border:1px solid var(--amber-hi); border-radius:10px; background:#1b140c; color:var(--cream); box-shadow:0 .6rem 1.6rem rgba(0,0,0,.5); }
.comp-aviso[hidden] { display:none; }
.comp-aviso p { flex:1; min-width:0; font-size:.88rem; line-height:1.35; }
.comp-aviso p span { color:var(--amber-hi); font-weight:600; white-space:nowrap; }
/* "Completa tu planta": en escritorio igual que antes (texto corrido); en movil una linea por producto con "...", maximo ~20% de la pantalla */
.comp-aviso .comp-planta .comp-it, .comp-aviso .comp-planta .comp-n { color:inherit; font-weight:inherit; white-space:normal; }
.comp-aviso .comp-planta .comp-total { color:var(--amber-hi); font-weight:600; white-space:nowrap; }
@media (max-width: 560px) {
  .comp-aviso .comp-planta { display:flex; flex-direction:column; gap:.1rem; font-size:.82rem; line-height:1.25; }
  .comp-aviso .comp-planta .comp-it { display:block; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .comp-aviso .comp-planta .comp-n { white-space:nowrap; }
  .comp-aviso .comp-planta .comp-mas { display:none; }
  .comp-aviso .comp-planta .comp-total { align-self:flex-start; }
  .comp-aviso:has(.comp-planta) { max-height:20svh; flex-wrap:wrap; row-gap:.4rem; }   /* texto a todo el ancho; el boton va debajo y los nombres alcanzan a leerse */
  .comp-aviso .comp-planta { flex:1 1 100%; }
  .comp-aviso:has(.comp-planta) .pedido-add { flex:1 1 auto; }
}
.comp-cerrar { flex:none; width:44px; min-height:44px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:1.3rem; cursor:pointer; }
.comp-cerrar:hover, .comp-cerrar:focus-visible { color:var(--cream); }
.comp-panel { margin-top:.4rem; }
.comp-item { display:grid; grid-template-columns:1fr auto; gap:.3rem .8rem; padding:.6rem 0; border-bottom:1px solid #241a0e; }
.comp-item p { font-size:.9rem; line-height:1.3; }
.comp-item p small { display:block; color:var(--muted); font-size:.78rem; }
.comp-item b { color:var(--amber-hi); font-family:var(--sans); font-weight:700; font-variant-numeric:tabular-nums lining-nums; }
.comp-acc { grid-column:1 / -1; display:flex; align-items:center; gap:.5rem; }
/* /filtros-y-equipos/ (UX/UI y Carlos, 2026-10-15): kits armados y tarjetas de equipos como /alimentos/ */
.kit-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap:.75rem; }
.kit { position:relative; display:flex; flex-direction:column; gap:.5rem; min-width:0; padding:1.1rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.kit-destacado { border-color:var(--amber-hi); box-shadow:0 0 0 1px rgba(233,178,90,.25); }
.kit .tag { position:static; align-self:flex-start; padding:.2rem .45rem; border-radius:4px; background:var(--ink); color:var(--amber-hi); font:600 .64rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.kit h3 { color:var(--cream); font:600 1.35rem/1.15 var(--serif); }
.kit ul { margin:0; padding-left:1.1rem; color:var(--muted); font-size:.88rem; line-height:1.5; }
.kit-apto { margin:.1rem 0 .5rem; color:var(--amber-hi); font-size:.9rem; font-weight:600; }
.kit-precio { color:var(--amber-hi); font:700 1.9rem/1 var(--sans); font-variant-numeric:tabular-nums lining-nums; }
.kit .ahorro { color:#6fd49a; font-size:.82rem; font-weight:600; }
.kit .combo-acc { margin-top:auto; padding-top:.4rem; }
/* miniaturas de los componentes del kit (mismo patron que los combos de /acondicionadores/: franja clara con las fotos lado a lado) */
.kit .kit-bt { height:112px; display:flex; align-items:flex-end; justify-content:center; gap:.6rem; padding:.6rem .6rem 0; overflow:hidden; background:#fff; border-radius:6px; margin-bottom:.1rem; }
.kit .kit-bt img { height:100%; width:auto; max-width:31%; object-fit:contain; }
.equipo-apto { color:var(--amber-hi); font-size:.85rem; font-weight:600; }
.filtros-page .alim-blk { background:linear-gradient(160deg,#14100a 0%,#0f0c08 100%); }
/* filtros: imagen referencial rotulada (nunca como si fuera el producto exacto) y niveles de iluminacion */
.foto-ref { position:absolute; left:.4rem; bottom:.4rem; padding:.15rem .4rem; border-radius:4px; background:rgba(10,7,5,.78); color:var(--cream); font:500 .6rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.equipo-nivel { display:flex; flex-direction:column; gap:.1rem; padding:.3rem .5rem; border-left:3px solid var(--amber-hi); background:rgba(201,130,46,.1); color:var(--cream); font-weight:600; font-size:.88rem; }
.equipo-nivel small { color:var(--muted); font-weight:400; font-size:.78rem; }
.equipo-nota { max-width:none; margin:1rem 0 0; }
.equipo-nota a { color:var(--amber-hi); text-decoration:underline; white-space:nowrap; }
/* filtros: "Ver mas versiones" plegado al final de un bloque (bombas de aire) */
.mas-versiones { margin-top:1rem; }
.mas-versiones > summary { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.5rem 1rem; border:1px solid var(--amber-hi); border-radius:999px; color:var(--amber-hi); font-weight:600; cursor:pointer; list-style:none; }
.mas-versiones > summary::-webkit-details-marker { display:none; }
.mas-versiones > summary::after { content:'▾'; transition:transform .2s; }
.mas-versiones[open] > summary::after { transform:rotate(180deg); }
.mas-versiones > summary:hover, .mas-versiones > summary:focus-visible { background:rgba(201,130,46,.12); }
.mas-versiones > .alim-grid { margin-top:1rem; }
/* filtros: rotulo corto de cada fila dentro de un bloque (Aireacion: "Con cable" / "Con bateria recargable") */
.fila-rotulo { margin:0 0 .5rem; color:var(--amber-hi); font:600 .72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.alim-grid + .fila-rotulo { margin-top:1.25rem; }
/* asesor "¿Cuanto le pongo?" (/asesor/#dosis): formulario de una columna en celular, resultado grande y las presentaciones del producto */
.asesor-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; align-items:end; padding:1.1rem; border:1px solid var(--line); border-radius:.6rem; background:var(--wood-2); }
.asesor-form .campo { display:flex; flex-direction:column; gap:.35rem; min-width:0; margin:0; padding:0; border:0; }
.asesor-form label, .asesor-form legend { color:var(--muted); font:500 .72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:0; }
.asesor-form select, .asesor-form input[type=number] { width:100%; min-height:var(--tap); padding:0 .75rem; border:1px solid var(--line); border-radius:.4rem; background:var(--ink); color:var(--cream); font:inherit; }
.asesor-form select:focus-visible, .asesor-form input:focus-visible, .asesor-seg button:focus-visible { outline:2px solid var(--amber-hi); outline-offset:2px; }
.campo-pecera { grid-column:1 / -1; }
.asesor-seg { display:flex; gap:.5rem; flex-wrap:wrap; }
.asesor-seg button { flex:1 1 9rem; min-height:var(--tap); border:1px solid var(--line); border-radius:.4rem; background:var(--ink); color:var(--cream); font:600 .9rem var(--sans); cursor:pointer; }
.asesor-seg button[aria-pressed=true] { border-color:var(--amber-hi); color:var(--amber-hi); background:rgba(201,130,46,.12); }
.asesor-modo { margin-top:.6rem; }
.asesor-cm { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.asesor-cm[hidden] { display:none; }
.asesor-chk { display:flex !important; align-items:center; gap:.6rem; min-height:var(--tap); color:var(--cream) !important; font:500 .95rem var(--sans) !important; letter-spacing:0 !important; text-transform:none !important; cursor:pointer; }
.asesor-chk input { width:22px; height:22px; accent-color:var(--amber); }
.asesor-form .btn { min-height:var(--tap); }
.asesor-error { grid-column:1 / -1; margin:0; color:#F0A08F; font-weight:600; }
.asesor-res { margin-top:1.25rem; }
.asesor-dosis { padding:1rem 1.1rem; border:1px solid rgba(233,178,90,.35); border-radius:.6rem; background:rgba(201,130,46,.1); margin-bottom:1rem; }
.asesor-para { margin:0 0 .4rem; color:var(--muted); }
.asesor-paso + .asesor-paso { margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(233,178,90,.2); }
.asesor-caso { margin:0; color:var(--cream); font-weight:600; }
.asesor-cantidad { display:block; font:700 clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem)/1.1 var(--sans); font-variant-numeric:tabular-nums lining-nums; color:var(--amber-hi); }
.asesor-frec { margin:.35rem 0 0; color:var(--cream); }
.asesor-notas { margin:.9rem 0 0; padding-left:1.1rem; color:var(--cream); }
.asesor-notas li + li { margin-top:.3rem; }
.asesor-rinde { margin:.9rem 0 0; color:var(--muted); }
.asesor-inv { max-width:none; }
.asesor-inv .btn { margin-top:.6rem; }
.asesor-guia { max-width:none; margin-top:1.4rem; margin-bottom:1rem; }
@media (max-width:599px) { .asesor-guia { margin-top:1rem; } }
.alim-grid.asesor-prods { margin-top:1rem; grid-template-columns:minmax(0,560px); }
.asesor-prods > [hidden] { display:none; }
.med-dosis-link { margin:0 0 1rem; }
.med-dosis-link a { display:inline-flex; align-items:center; min-height:var(--tap); color:var(--amber-hi); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:480px) { .asesor-cm { grid-template-columns:1fr; } }
/* aviso suave del agua (medicamentos, acondicionadores y asesor): una linea y el boton a los test */
.aviso-agua { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; max-width:none; }
.aviso-agua p { margin:0; flex:1 1 22rem; }
.aviso-agua .btn { min-height:var(--tap); }
.aviso-agua[hidden] { display:none; }
.acond-test:empty { display:none; }
/* asesor "Arma tu acuario" (/asesor/#arma): ficha del pez y la lista de equipo, una fila por producto */
.asesor-page .alim-pick { margin-bottom:1.5rem; }
.asesor + .asesor { margin-top:2.5rem; }
.arma-chica { max-width:none; border-left-color:#E0705A; background:linear-gradient(110deg, rgba(224,112,90,.16), var(--wood-2) 72%); font-weight:600; }
.arma-datos { display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; margin:.4rem 0 0; }
.arma-datos dt { color:var(--muted); font:500 .72rem/1.9 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.arma-datos dd { margin:0; color:var(--cream); }
.arma-notas { margin:.8rem 0 0; color:var(--cream); }
.arma-notas:empty { display:none; }
.arma-lista { display:flex; flex-direction:column; gap:.6rem; margin-top:1rem; }
.arma-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.6rem; background:var(--wood-2); }
.arma-item[hidden] { display:none; }
.arma-info { display:flex; flex-direction:column; gap:.15rem; min-width:0; flex:1 1 18rem; }
.arma-rol { color:var(--amber-hi); font:600 .72rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.arma-info small { color:var(--muted); }
.arma-item .pres { flex:0 1 20rem; }
.arma-acc { margin:1rem 0; }
.arma-acc .btn { min-height:var(--tap); }
@media (max-width:480px) { .arma-datos { grid-template-columns:1fr; gap:0; } .arma-datos dd { margin-bottom:.4rem; } }
/* asesor: varios peces (fila pez + cuantos + quitar) y avisos de compatibilidad por par */
.campo-peces { grid-column:1 / -1; }
.arma-pez { display:grid; grid-template-columns:minmax(0,1fr) 7rem var(--tap); gap:.6rem; align-items:end; margin-bottom:.6rem; }
.arma-pez .campo { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.arma-quitar { min-height:var(--tap); width:var(--tap); padding:0; font-size:1.3rem !important; border:1px solid var(--line); border-radius:.4rem; background:none; color:var(--muted); font:600 .85rem var(--sans); cursor:pointer; }
.arma-quitar:hover, .arma-quitar:focus-visible { color:var(--cream); border-color:var(--amber-hi); }
.arma-quitar[hidden], .arma-otro[hidden] { display:none; }
.arma-otro { min-height:var(--tap); }
.arma-compat { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.arma-compat[hidden] { display:none; }
.compat { padding:.8rem 1rem; border:1px solid var(--line); border-left:3px solid var(--muted); border-radius:.45rem; background:var(--wood-2); }
.compat strong { display:block; color:var(--cream); }
.compat p { margin:.25rem 0 0; color:var(--cream); }
.compat-no { border-left-color:#E0705A; background:linear-gradient(110deg, rgba(224,112,90,.16), var(--wood-2) 72%); }
.compat-no .compat-sep { font-weight:600; }
.compat-cuidado { border-left-color:var(--amber-hi); }
.compat-ok { padding:.45rem 1rem; border-left-color:var(--moss-hi); }
.compat-ok p { color:var(--muted); font-size:.9rem; }
.compat-sin { border-style:dashed; }
.compat-cierre { margin:0; color:var(--muted); font-size:.9rem; }
.arma-notas { white-space:pre-line; }
@media (max-width:480px) { .arma-pez { grid-template-columns:minmax(0,1fr) 4.5rem var(--tap); } }
/* asesor: los avisos debajo de la lista con el mismo ancho y el mismo espacio que las filas (UX/UI) */
.arma-sin, .arma-temp, .arma-luz { max-width:none; margin:.6rem 0 0; }
/* asesor "¿Cuanto le doy y cuanto dura?" (/asesor/#comida) y el enlace en cada tarjeta de /alimentos/ */
.comida-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.6rem; background:var(--wood-2); }
.comida-item[hidden] { display:none; }
.comida-item .pres { flex:0 1 20rem; }
.comida-dura { color:var(--cream); font-weight:600; font-size:.92rem; }
.comida-dura:empty { display:none; }
.comida-mejor { border-color:var(--amber-hi); }
.comida-mejor .arma-info::before { content:'Recomendada'; align-self:flex-start; padding:.1rem .45rem; border-radius:4px; background:var(--amber-hi); color:var(--ink); font:600 .66rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.comida-regla { white-space:pre-line; }
.alim-dura { display:inline-flex; align-items:center; min-height:var(--tap); margin-top:.3rem; color:var(--amber-hi); font-size:.85rem; text-decoration:underline; text-underline-offset:3px; }

/* Asistente "Quiero iniciar en acuariofilia" (UX/UI 2026-10-18): 4 pasos en /asesor/#inicio */
.ini-progreso { display:flex; gap:.4rem; margin:0 0 1.25rem; }
.ini-progreso i { flex:1; height:4px; border-radius:2px; background:#3a2d1a; transition:background .3s ease; }
.ini-progreso i.on { background:var(--amber-hi); }
.ini-paso h3 { margin:0 0 .4rem; color:var(--cream); font:600 clamp(1.3rem,1.1rem + .8vw,1.7rem)/1.15 var(--serif); }
.ini-paso h3:focus { outline:none; }
.ini-paso .sub { margin:0 0 .9rem; }
.ini-paso .asesor-seg { margin:.5rem 0 1rem; }
.ini-peceras { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.6rem; margin:.5rem 0 1rem; }
.ini-peceras[hidden] { display:none; }
.ini-pecera { font:inherit; display:grid; gap:.2rem; min-height:44px; padding:.8rem .9rem; border:1px solid #4a3a21; border-radius:10px; background:#17120b; color:var(--cream); text-align:left; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; }
.ini-pecera strong { font-weight:600; overflow-wrap:anywhere; }
.ini-pecera span { color:#CDBB96; font-size:.85rem; }
.ini-pecera b { color:var(--amber-hi); font-weight:600; }
.ini-pecera:hover, .ini-pecera:focus-visible { border-color:var(--amber-hi); }
.ini-pecera[aria-pressed="true"] { border-color:var(--amber-hi); box-shadow:0 0 0 2px rgba(224,160,70,.45); }
.ini-analisis { margin:1rem 0 0; padding:1rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.ini-analisis .asesor-para { margin:0 0 .5rem; }
.ini-opciones { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.5rem; margin:.5rem 0 1rem; padding:0; border:0; }
.ini-opc { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .7rem; min-height:44px; padding:.55rem .85rem; border:1px solid #4a3a21; border-radius:10px; background:#17120b; color:var(--cream); cursor:pointer; }
.ini-opc input { width:1.2rem; height:1.2rem; accent-color:var(--amber-hi); }
.ini-opc:has(input:checked) { border-color:var(--amber-hi); }
.ini-opc:has(input:disabled) { opacity:.55; cursor:not-allowed; }
.ini-opc .ini-min { flex:1 0 100%; padding-left:1.9rem; color:#CDBB96; font-size:.8rem; }
.ini-opc .ini-min:empty { display:none; }
.ini-chica .ini-min { color:#e0b36a; }
.ini-nav { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; }
.ini-lineas { display:grid; gap:.5rem; margin:1rem 0; padding:0; list-style:none; }
.ini-linea { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.6rem .8rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.ini-linea-l { display:flex; flex:1; min-width:0; align-items:flex-start; gap:.7rem; cursor:pointer; }
.ini-linea-l input { flex:0 0 auto; width:1.2rem; height:1.2rem; margin-top:.15rem; accent-color:var(--amber-hi); }
.ini-linea-i { display:grid; gap:.1rem; min-width:0; }
.ini-linea-i strong { overflow-wrap:anywhere; font-weight:600; color:var(--cream); }
.ini-linea-i small { color:#CDBB96; }
.ini-linea-i .arma-rol { color:var(--amber-hi); font:600 .7rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.ini-linea-p { flex:0 0 auto; color:var(--amber-hi); font-weight:600; }
.ini-total { margin:.5rem 0 1rem; color:var(--cream); font-size:1.15rem; }
.ini-total p { margin:.1rem 0; }
.ini-total b { color:var(--amber-hi); font-family:var(--sans); font-weight:700; font-size:1.5rem; font-variant-numeric:tabular-nums lining-nums; }
.ini-avisos { display:grid; gap:.5rem; margin:.5rem 0 0; padding:0; list-style:none; }
@media (max-width:599px) { .ini-nav .btn { flex:1 1 100%; justify-content:center; } .ini-linea { align-items:flex-start; } }
.aq-links { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
@media (max-width:599px) { .aq-links .btn { flex:1 1 100%; justify-content:center; } }
.prod-aviso { margin:.2rem 0 0; color:#e0b36a; font-size:.88rem; }
/* Calculadora de sustrato (/sustratos/#calculadora) */
.calc-sustrato .asesor-cm { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.6rem; }
.calc-res { margin-top:1rem; }
.calc-filas { display:grid; gap:.6rem; margin:.6rem 0 1rem; padding:0; list-style:none; }
.calc-fila { display:grid; grid-template-columns:1fr auto; gap:.5rem .8rem; align-items:center; padding:.7rem .85rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.calc-info { display:grid; gap:.1rem; min-width:0; }
.calc-info strong { color:var(--cream); font-weight:600; }
.calc-cant { color:var(--cream); overflow-wrap:anywhere; }
.calc-info small { color:#CDBB96; }
.calc-acc { display:grid; justify-items:end; gap:.35rem; }
.calc-total { color:var(--amber-hi); font-size:1.1rem; }
.calc-alt { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.5rem; border-top:1px dashed #3a2d1a; color:#CDBB96; font-size:.88rem; }
@media (max-width:599px) { .calc-fila { grid-template-columns:1fr; } .calc-acc { justify-items:start; grid-auto-flow:column; align-items:center; justify-content:space-between; } }
/* Asistente de inicio continuo (UX/UI + Carlos 2026-10-18): pasos uno debajo del otro, los hechos como resumen; con #inicio activo se esconden las demas consultas del asesor */
.ini-resumen { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin:.1rem 0 .4rem; color:#CDBB96; }
.ini-resumen span { color:var(--cream); overflow-wrap:anywhere; }
.ini-paso.hecho { margin-bottom:.6rem; padding:.5rem .85rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.7); }
.ini-paso.hecho > :not(h3):not(.ini-resumen) { display:none; }
.ini-paso.hecho h3 { font-size:1rem; margin:0; color:var(--amber-hi); }
.ini-paso + .ini-paso:not([hidden]) { margin-top:.5rem; }
.ini-entra { animation:ini-entra .45s var(--ease) both; }
@keyframes ini-entra { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .ini-entra { animation:none; } }
.ini-otras-enlace { display:none; margin:1.2rem 0 0; }
.asesor-page:not(.ver-otras):has(#inicio:target) .ini-otras-enlace { display:block; }
.asesor-page:not(.ver-otras):has(#inicio:target) :is(#dosis, #arma, #comida, .alim-pick, .help) { display:none; }
/* Carrusel de fotos de /peces/ (UX/UI 2026-10-18): mismo recuadro de la foto, varias fotos que se deslizan */
.item .carrusel { position:relative; }
.item .carrusel-pista { display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.item .carrusel-pista::-webkit-scrollbar { display:none; }
.item .carrusel-pista:focus-visible { outline:2px solid var(--amber-hi); outline-offset:-2px; }
.item .carrusel-pista > .ph { flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.item .carrusel-flecha { display:none; position:absolute; top:50%; z-index:3; width:2.75rem; height:2.75rem; margin-top:-1.375rem; border:0; border-radius:50%; background:rgba(10,7,5,.62); color:var(--cream); font-size:1.7rem; line-height:1; cursor:pointer; }
.item .carrusel-flecha:hover:not(:disabled), .item .carrusel-flecha:focus-visible { background:rgba(10,7,5,.85); color:var(--amber-hi); }
.item .carrusel-flecha:disabled { opacity:.25; cursor:default; }
.item .carrusel-ant { left:.4rem; }
.item .carrusel-sig { right:.4rem; }
@media (hover:hover) and (min-width:700px) { .item .carrusel-flecha { display:block; } }
.item .carrusel-puntos { position:absolute; left:0; right:0; bottom:.5rem; z-index:3; display:flex; justify-content:center; gap:.15rem; pointer-events:none; }
.item .carrusel-punto { pointer-events:auto; position:relative; width:1.5rem; height:1.5rem; border:0; background:none; padding:0; cursor:pointer; }
.item .carrusel-punto::after { content:""; position:absolute; top:50%; left:50%; width:.5rem; height:.5rem; margin:-.25rem 0 0 -.25rem; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 0 1px rgba(10,7,5,.5); transition:background .2s ease, transform .2s ease; }
.item .carrusel-punto[aria-current="true"]::after { background:var(--amber-hi); transform:scale(1.25); }
.item .ph-video { cursor:pointer; background:#0f0c08; }
.item .ph-video video { display:block; width:100%; height:100%; object-fit:cover; background:#0f0c08; }
.item .ph-play { position:absolute; top:50%; left:50%; z-index:2; display:grid; place-items:center; width:3.4rem; height:3.4rem; margin:-1.7rem 0 0 -1.7rem; padding-left:.2rem; border-radius:50%; background:rgba(10,7,5,.66); color:var(--cream); font-size:1.2rem; pointer-events:none; }
.item .ph-video.reproduciendo .ph-play { display:none; }
.item .ph-video:hover video { transform:none; }
/* Asesor por especie (UX/UI + Carlos 2026-10-19): entrada, flujo del Betta y "Quiero sustrato" en /asesor/#empezar. Con el asistente activo se esconden las demas consultas */
.asesor-page.flujo-activo > :is(#inicio, .ini-otras-enlace, #dosis, #arma, #comida, .alim-pick, .help) { display:none; }
.js .asesor-page.flujo-espera > :is(#inicio, .ini-otras-enlace, #dosis, #arma, #comida, .alim-pick, .help) { display:none; }   /* sin salto: la entrada se ve de una vez */
.asesor-flujo { max-width:60rem; margin-inline:auto; }
.asesor-flujo[hidden] { display:none; }
.fl-p h3 { margin:0 0 .4rem; color:var(--cream); font:600 clamp(1.4rem,1.1rem + 1vw,1.9rem)/1.15 var(--serif); }
.fl-p h3:focus { outline:none; }
.fl-p .sub { margin:0 0 1rem; }
.fl-opciones { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.6rem; margin:.5rem 0 1rem; }
.fl-opc { font:inherit; position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .8rem; min-height:56px; padding:.8rem .95rem; border:1px solid #4a3a21; border-radius:10px; background:#17120b; color:var(--cream); text-align:left; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease; }
.fl-opc:hover, .fl-opc:focus-visible { border-color:var(--amber-hi); }
.fl-opc[aria-pressed="true"] { border-color:var(--amber-hi); box-shadow:0 0 0 2px rgba(224,160,70,.45); }
.fl-opc img { flex:0 0 auto; width:4.5rem; height:4.5rem; object-fit:cover; border-radius:8px; background:#0f0c08; }
.fl-opc-t { display:grid; flex:1 1 9rem; gap:.15rem; min-width:0; }
.fl-opc-t strong { font-weight:600; overflow-wrap:anywhere; }
.fl-opc-t small { color:#CDBB96; font-size:.85rem; overflow-wrap:anywhere; }
.fl-etiqueta { justify-self:start; padding:.05rem .5rem; border-radius:99px; background:rgba(224,160,70,.18); color:var(--amber-hi); font:600 .68rem var(--mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; }
.fl-precio { flex:0 0 auto; margin-left:auto; color:var(--amber-hi); font-weight:600; }
.fl-grupo { display:flex; flex-direction:column; gap:.4rem; }
.fl-grupo .fl-opc { flex:1 1 auto; }
.fl-pres { display:flex; flex-wrap:wrap; gap:.4rem; }
.fl-pres-b { font:inherit; font-size:.88rem; min-height:44px; min-width:44px; padding:.35rem .8rem; border:1px solid #4a3a21; border-radius:99px; background:#17120b; color:var(--cream); cursor:pointer; transition:border-color .2s ease, background .2s ease; }
.fl-pres-b:hover, .fl-pres-b:focus-visible { border-color:var(--amber-hi); }
.fl-pres-b[aria-pressed="true"] { border-color:var(--amber-hi); background:rgba(224,160,70,.18); color:var(--amber-hi); font-weight:600; }
/* tarjeta de pez: foto de fondo (o degradado de marca) con degradado oscuro encima para que el nombre se lea; alto fijo, sin salto de layout */
.fl-pez { isolation:isolate; overflow:hidden; min-height:9.5rem; align-items:flex-end; background:linear-gradient(135deg,#7a5420 0%,#34260f 55%,#17120b 100%); }
.fl-pez::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(10,8,5,.94) 0%,rgba(10,8,5,.78) 42%,rgba(10,8,5,.3) 100%); }
.fl-pez:not(.con-imagen)::after { display:none; }   /* sin foto: solo el degradado de marca */
.fl-pez .fl-pez-img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; border-radius:0; background:none; transition:transform .35s ease; }
.fl-pez:hover .fl-pez-img, .fl-pez:focus-visible .fl-pez-img { transform:scale(1.05); }
.fl-pez:focus-visible { outline:2px solid var(--amber-hi); outline-offset:2px; }
.fl-pez .fl-opc-t { flex:1 1 100%; }
.fl-pez .fl-opc-t strong { font-family:var(--serif); font-size:1.35rem; line-height:1.15; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.fl-pez .fl-opc-t small { color:#EADFC8; text-shadow:0 1px 4px rgba(0,0,0,.7); }
@media (prefers-reduced-motion:reduce) { .fl-pez .fl-pez-img { transition:none; } .fl-pez:hover .fl-pez-img, .fl-pez:focus-visible .fl-pez-img { transform:none; } }
.fl-nav { margin-top:1.1rem; }
.fl-campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem; margin:.5rem 0 .8rem; }
.fl-subopc { margin:.2rem 0 1rem; }
.fl-subopc .ini-opc { margin:.3rem 0; }
.fl-subopc[hidden] { display:none; }
.fl-incluye { display:grid; gap:.3rem; margin:.5rem 0 1rem; padding:.7rem .9rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); list-style:none; }
.fl-incluye li { display:flex; justify-content:space-between; gap:.8rem; color:#CDBB96; font-size:.9rem; }
.fl-incluye li b { flex:0 0 auto; color:var(--cream); font-weight:600; }
.fl-incluye .fl-incluye-total { padding-top:.35rem; border-top:1px dashed #3a2d1a; color:var(--cream); }
.fl-linea { flex-wrap:wrap; }
.fl-cant { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.fl-cant .btn { min-width:44px; min-height:44px; padding-inline:.7rem; }
.fl-n { min-width:2.2rem; text-align:center; color:var(--cream); font-weight:600; }
.fl-pie { margin-top:.8rem; }
.fl-total b { color:var(--amber-hi); font-family:var(--sans); font-weight:700; font-size:1.5rem; font-variant-numeric:tabular-nums lining-nums; }
.fl-confirmacion { margin-top:.7rem; }
.fl-arranque { margin:1rem 0; }
.fl-kit { margin:1.2rem 0 0; padding:.7rem .95rem; border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.fl-kit[hidden] { display:none; }
.fl-kit summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--amber-hi); font-weight:600; }
.fl-kit-lista { display:grid; gap:.3rem; margin:.3rem 0 .5rem; padding:0; list-style:none; }
.fl-kit-linea { display:flex; justify-content:space-between; gap:.8rem; color:#CDBB96; font-size:.9rem; }
.fl-kit-linea b { flex:0 0 auto; color:var(--cream); font-weight:600; }
.fl-kit-total { margin:0; color:var(--cream); font-weight:600; }
.fl-volver { margin:.8rem 0; }
.fl-volver[hidden] { display:none; }
@media (max-width:599px) { .fl-nav .btn, .fl-pie .btn { flex:1 1 100%; justify-content:center; } .fl-opciones { grid-template-columns:1fr; } }
.fl-pasos { display:grid; gap:.4rem; margin:.5rem 0 .2rem; padding-left:1.1rem; color:#CDBB96; font-size:.92rem; }
.fl-esencial { color:#CDBB96; font-size:.8rem; font-weight:400; }
.asesor-flujo { scroll-margin-top:4.5rem; }
/* con el asistente activo el hero grande se compacta: el flujo empieza arriba (UX/UI 2026-10-20) */
.cat-page.asesor-page.flujo-activo > .catalog-hero-immersive { min-height:0; display:block; padding:1rem var(--gut) .6rem; margin-bottom:.4rem; background-image:none; }
.cat-page.asesor-page.flujo-activo > .catalog-hero-immersive::before, .cat-page.asesor-page.flujo-activo > .catalog-hero-immersive::after { display:none; }
.cat-page.asesor-page.flujo-activo > .catalog-hero-immersive :is(.lede, .eyebrow, .stat) { display:none; }
.cat-page.asesor-page.flujo-activo > .catalog-hero-immersive .crumb { margin-bottom:.4rem; }
.cat-page.asesor-page.flujo-activo > .catalog-hero-immersive h1 { display:flex; flex-wrap:wrap; gap:.3em; max-width:none; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); line-height:1.05; letter-spacing:-.01em; }
.js .cat-page.asesor-page.flujo-espera > .catalog-hero-immersive { min-height:0; display:block; padding:1rem var(--gut) .6rem; margin-bottom:.4rem; background-image:none; }
.js .cat-page.asesor-page.flujo-espera > .catalog-hero-immersive::before, .js .cat-page.asesor-page.flujo-espera > .catalog-hero-immersive::after { display:none; }
.js .cat-page.asesor-page.flujo-espera > .catalog-hero-immersive :is(.lede, .eyebrow, .stat) { display:none; }
.js .cat-page.asesor-page.flujo-espera > .catalog-hero-immersive .crumb { margin-bottom:.4rem; }
.js .cat-page.asesor-page.flujo-espera > .catalog-hero-immersive h1 { display:flex; flex-wrap:wrap; gap:.3em; max-width:none; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); line-height:1.05; letter-spacing:-.01em; }
/* Columna AW "Disponibilidad" = AGOTADO: la tarjeta se ve, con cinta y sin boton de agregar */
.pill-agotado { opacity:.6; cursor:not-allowed; pointer-events:none; }
.alim-rec-agotado { background:#2a1210; color:#f0b5ac; border:1px solid #6b2f28; }
/* combo de arranque: todas sus botellas juntas (las mismas de la home) */
.fl-opc .fl-fotos { display:flex; flex:0 0 auto; align-items:flex-end; gap:2px; padding:.25rem .35rem; border-radius:8px; background:#fff; }
.fl-opc .fl-fotos img { width:2.1rem; height:4.2rem; object-fit:contain; border-radius:0; background:transparent; }
/* miniaturas de producto: cuadro blanco, la foto entera sin recortar (Carlos 2026-10-20: todas las lineas del kit con imagen) */
.fl-opc.fl-prod img { object-fit:contain; background:#fff; padding:.2rem; }
.fl-mini { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:1px; width:2.6rem; height:2.6rem; padding:.15rem; border-radius:6px; background:#fff; overflow:hidden; }
.fl-mini img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.fl-mini:has(img + img) img { max-width:33%; }
.fl-incluye li { align-items:center; }
.fl-incluye .fl-incluye-n { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.fl-kit-linea { align-items:center; }
.fl-kit-linea .fl-kit-n { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.fl-linea .fl-mini { width:3rem; height:3rem; }
.fl-form { margin:.5rem 0 .8rem; }
.fl-form .fl-campos { margin:0; gap:1rem; align-items:end; }
@media (max-width:480px) { .fl-form .fl-campos { grid-template-columns:1fr; } }
.fl-linea-cab { display:flex; flex:1 1 13rem; align-items:center; gap:.7rem; min-width:0; }
/* "Más información" en las tarjetas con mucho texto (UX/UI + Carlos 2026-10-20): resumen de 2 o 3 lineas y el resto desplegable */
.mas-info { margin:.1rem 0 0; }
.mas-info summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--amber-hi); font-size:.82rem; font-weight:600; }
.mas-info summary:focus-visible { outline:2px solid var(--amber-hi); outline-offset:2px; }
.mas-info p { margin:.1rem 0 .5rem; }
/* Presentaciones compactas (UX/UI + Carlos 2026-10-20): etiqueta y precio a la izquierda, Agregar a la derecha, en UNA fila (antes el boton caia debajo y cada tamano ocupaba ~90 px) */
.alim-b .pres .pedido-fila { flex-wrap:nowrap; gap:.3rem; min-height:48px; }
.alim-b .pedido-fila .pill { flex:1 1 auto; flex-direction:column; align-items:flex-start; gap:0; padding:.15rem .3rem; white-space:normal; line-height:1.2; text-align:left; }
.alim-b .pedido-fila .pedido-ctl { margin-left:0; }
.alim-b .pedido-add { padding:0 .65rem; font-size:.82rem; }
.alim-b .pedido-fila .pill b { white-space:nowrap; }
.alim-b .pedido-add { padding:0 .55rem; }
/* Acceso al asesor (Carlos via UX/UI 2026-10-20): item destacado en la barra, el menu movil y el pie; bloque contextual en cada categoria */
.nav-links .nav-asesor { display:inline-flex; align-items:center; min-height:36px; padding:0 .9rem; border:1px solid var(--amber-hi); border-radius:999px; background:rgba(233,178,90,.14); color:var(--amber-hi); font-weight:600; }
.nav-links .nav-asesor:hover, .nav-links .nav-asesor:focus-visible { background:var(--amber); color:var(--ink); }
.menu-panel .menu-asesor { margin:.2rem 0 .4rem; padding:.85rem 1rem; border:1px solid var(--amber-hi); border-radius:10px; background:var(--amber); color:var(--ink); font-weight:700; text-align:center; }
.foot-asesor { color:var(--amber-hi); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.cta-asesor { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.7rem 1.2rem; margin:0 0 1.2rem; padding:.9rem 1.1rem; border:1px solid #4a3a21; border-left:3px solid var(--amber-hi); border-radius:10px; background:rgba(23,18,11,.92); }
.cta-asesor div { display:grid; gap:.15rem; flex:1 1 16rem; min-width:0; }
.cta-asesor strong { color:var(--cream); font:600 1.1rem/1.2 var(--serif); }
.cta-asesor span { color:#CDBB96; font-size:.9rem; }
@media (max-width:599px) { .cta-asesor .btn { flex:1 1 100%; justify-content:center; } .foot-in { flex-wrap:wrap; gap:.6rem 1rem; } }
/* Herramientas con su propia URL (UX/UI + Carlos 2026-10-20) */
.herramienta-page .alim-bloques { display:grid; gap:1.2rem; }
.herr-texto p { margin:.4rem 0 .6rem; max-width:70ch; color:var(--cream); line-height:1.6; }
.herr-faq { display:grid; gap:.4rem; }
.herr-q { border:1px solid #2b2216; border-radius:10px; background:rgba(23,18,11,.92); }
.herr-q summary { min-height:48px; display:flex; align-items:center; padding:.5rem .9rem; cursor:pointer; color:var(--cream); font-weight:600; }
.herr-q summary:focus-visible { outline:2px solid var(--amber-hi); outline-offset:2px; }
.herr-q p { margin:0; padding:0 .9rem .8rem; color:#CDBB96; line-height:1.55; }
/* consultas nuevas: compatibilidad de peces y cuantos peces caben */
.cp-peces { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.5rem; }
.cp-peces .ini-opc { font-family:var(--sans); font-size:1rem; text-transform:none; letter-spacing:0; }
.cp-peces .ini-opc span { font-family:var(--sans); text-transform:none; letter-spacing:0; }
.herr-lista { display:grid; gap:.4rem; margin:.4rem 0 .8rem; padding:0; list-style:none; }
.herr-q .herr-lista { padding:0 .9rem .8rem; margin:0; }
.herr-q.herr-comb { background:rgba(23,18,11,.92); }
.herr-q .herr-lista li { color:#CDBB96; line-height:1.55; }
.herr-q .herr-lista li b { color:var(--cream); }
.herr-q summary strong { margin-right:.3rem; }
.herr-combos { margin-top:1rem; display:grid; gap:.4rem; }
.herr-combos h3 { margin:.2rem 0; }
.herr-tabla { width:100%; max-width:42rem; border-collapse:collapse; margin:.4rem 0; }
.herr-tabla th, .herr-tabla td { padding:.5rem .7rem; border-bottom:1px solid #2b2216; text-align:left; color:var(--cream); }
.herr-tabla thead th { color:var(--amber-hi); font-weight:600; }
#cp-pares { display:grid; gap:.5rem; margin:.6rem 0; }
.foot-creditos { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.foot-herr { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .9rem; }
.foot-herr span { color:var(--muted); font:500 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.foot-herr a { color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.home-tools { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:1.2rem; }
.home-tools span { color:var(--muted); font:500 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.home-tools a { display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; border:1px solid #4a3a21; border-radius:999px; background:#17120b; color:var(--cream); font-weight:600; }
.home-tools a:hover, .home-tools a:focus-visible { border-color:var(--amber-hi); color:var(--amber-hi); }

/* Decoracion (UX/UI 2026-10-23): indice de troncos, rocas y plantas */
.deco-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; margin-top:1rem; }
.deco-card { display:flex; flex-direction:column; background:var(--wood-2); border:1px solid var(--line); border-radius:.8rem; overflow:hidden; transition:border-color .3s ease, transform .3s var(--ease); }
.deco-card:hover, .deco-card:focus-visible { border-color:var(--amber-hi); transform:translateY(-2px); }
.deco-card img { width:100%; height:11rem; object-fit:cover; }
.deco-t { display:grid; gap:.2rem; padding:.9rem 1rem 1.1rem; }
.deco-t strong { font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--cream); }
.deco-t small { color:var(--muted); font-size:.9rem; line-height:1.45; }

/* Categorias desplegable en escritorio (UX/UI 2026-10-23): hover y foco; en movil el menu no cambia (.nav-links se oculta) */
.nav-cat { position:relative; }
.nav-cat-menu { position:absolute; top:100%; left:-.9rem; z-index:70; display:none; min-width:15rem; padding:.5rem; background:var(--wood-2); border:1px solid var(--line); border-radius:.7rem; box-shadow:0 1rem 2.4rem rgba(0,0,0,.45); }
.nav-cat-menu::before { content:''; position:absolute; left:0; right:0; top:-.6rem; height:.6rem; }   /* puente: el cursor no pierde el hover al bajar */
.nav-cat.abierto .nav-cat-menu { display:grid; }
.nav-cat-menu a { display:block; padding:.5rem .8rem; border-radius:.4rem; color:var(--cream); font-size:.95rem; white-space:nowrap; }
.nav-cat-menu a:hover, .nav-cat-menu a:focus-visible { background:rgba(233,178,90,.14); color:var(--amber-hi); }
@media (max-width:767px) { .nav-cat-menu { display:none !important; } }