/* ==========================================================================
   FUENTES ALOJADAS EN ESTE SERVIDOR
   La maqueta original las pedía a fonts.googleapis.com. Se trajeron acá por
   dos motivos:
     · La CSP de este sitio no permite cargar recursos de terceros. Dejar
       pasar a Google obligaría a abrir un agujero en style-src y font-src.
     · Cada visita a la tienda le avisaba a Google quién la estaba mirando.
   Archivos de fontsource (licencia SIL Open Font, la misma de Google Fonts).
   'swap' = el texto se ve enseguida con la fuente del sistema y se cambia
   cuando termina de bajar la buena; nunca queda un hueco en blanco.
   ========================================================================== */
/* Lora (la serif de los titulos) se saco: ahora todo el sitio va en Montserrat.
   El archivo lora-var.woff2 sigue en /fonts por si se quiere volver atras, pero
   ya no lo pide nadie: sin este @font-face el navegador no lo baja. */
/* Montserrat en VARIABLE: un archivo de 38 KB cubre de 300 a 700, en vez de los
   cinco de Poppins. Menos pedidos al servidor y ningun salto al pasar de un peso
   a otro, porque son el mismo archivo.
   Va autoalojada como todo lo demas: la CSP del sitio tiene script-src y
   font-src en self, asi que traerla de Google Fonts no cargaria. */
@font-face{
  font-family:'Montserrat';
  src:url('/fonts/montserrat-var.woff2?v=__CACHEBUST__') format('woff2-variations');
  font-weight:300 700; font-style:normal; font-display:swap;
}

:root{
    --bg:#F7F5F0;
    --surface:#ffffff;
    --dark:#1E2A2B;
    --dark-2:#2C3C3D;
    --accent:#86D2D0;
    --accent-soft:#E9F7F6;
    --ink:#203132;
    --muted:#658081;
    --line:#E7E2D9;
    --r:16px;
    --r-lg:22px;
    /* ⚠ EL HERO YA NO TIENE UNA FOTO FIJA (07/09/2026).
       Era `url("/img/sitio/portada.webp")` — la del pote Power en el bosque.
       Como el carrusel se dibuja ENCIMA y las diapositivas se cruzan bajando
       la opacidad, esta foto asomaba por atras en cada transicion. Cairo la
       borro del panel y seguia apareciendo: no estaba en la base, estaba
       aca. Ahora el fondo es el color de la marca, y lo unico que se ve son
       las fotos que esten cargadas. */
    --hero-img:linear-gradient(150deg, #dfe9e6 0%, #cfdedb 52%, #bcd2ce 100%);
    /* Guardadas como variables para reusar la misma foto sin duplicar el base64 */
    --pomada-img:url("/img/sitio/deco-pomada.webp");
    /* ⚠ Variable propia para la foto de "Nosotros". NO reusar
       --pomada-img: esa la comparte la tarjeta de la categoria
       Cannabis, y cambiar el archivo cambiaba las dos cosas. */
    --shampoo-img:url("/img/sitio/deco-shampoo.webp");
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  /* Las secciones ancladas frenan debajo del header fijo (si no, quedan tapadas). */
  #top,#categorias,#productos,#promos,#nosotros{scroll-margin-top:88px;}
  body{font-family:'Montserrat',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:'Montserrat',system-ui,sans-serif;font-weight:500;line-height:1.16;color:var(--dark);}
  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  img{max-width:100%;display:block;}
  input,select{font-family:inherit;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 28px;}
  .eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}

  /* ===== TOPBAR ===== */
  .topbar{background:var(--accent);color:var(--ink);font-size:13px;}
  /* Antes eran cuatro cosas apretadas; ahora quedaron dos, asi que tienen lugar
     para respirar. Se les subio el tamano y el aire: el telefono y el horario
     son lo que busca quien entra a una tienda que no conoce, y en 12 px pasaban
     desapercibidos.

     ⚠ Van a la IZQUIERDA, no al medio. Centrados quedaban dos datos flotando
     en el aire con una franja celeste enorme y vacia a cada lado. Alineados a
     la izquierda arrancan en la misma linea que el logo, el menu y todo el
     resto de la pagina: se leen como parte de algo, no como un cartel colgado.
     Igual conservan max-width 1200 y el mismo padding, asi que la columna
     coincide con la del encabezado exactamente. */
  .topbar-inner{max-width:1200px;margin:0 auto;padding:12px 28px;display:flex;
    justify-content:flex-start;gap:40px;flex-wrap:wrap;font-size:14px;}
  .topbar-inner svg{width:16px;height:16px;}
  .topbar-tel{font-weight:600;letter-spacing:.01em;}
  @media (max-width:560px){
    .topbar-inner{gap:20px;padding:10px 16px;font-size:12.5px;}
  }
  .topbar i{display:flex;align-items:center;gap:7px;font-style:normal;}
  /* El teléfono es un enlace de verdad: en el celular se toca y llama. Se ve
     igual que el resto de la barra, pero con el número un punto más marcado
     porque es lo que se viene a buscar. */
  .topbar-tel{display:flex;align-items:center;gap:7px;color:inherit;
              text-decoration:none;font-weight:600;}
  .topbar-tel:hover{text-decoration:underline;}
  .topbar svg{width:13px;height:13px;opacity:.9;flex-shrink:0;}

  /* ===== HEADER ===== */
  /* Header de vidrio: translúcido, desenfocado y con un filo de luz arriba */
  header{position:sticky;top:0;z-index:60;
         background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(247,245,240,.58));
         -webkit-backdrop-filter:blur(22px) saturate(180%);
         backdrop-filter:blur(22px) saturate(180%);
         border-bottom:1px solid rgba(255,255,255,.5);
         box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 26px rgba(30,42,43,.06);}
  /* El header es siempre UNA sola fila: logo · menú · íconos.
     El menú se encoge y, si hace falta, scrollea en horizontal — nunca baja a otra fila. */
  .header-inner{max-width:1200px;margin:0 auto;padding:13px 28px;display:flex;flex-wrap:nowrap;align-items:center;gap:20px;}
  .logo{flex:1 0 auto;}
  .logo img{height:42px;width:auto;}
  /* El menú es una cápsula de vidrio con una píldora que se desliza al activo */
  nav{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;
      flex:0 1 auto;min-width:0;padding:5px;border-radius:30px;
      background:linear-gradient(160deg, rgba(255,255,255,.66), rgba(255,255,255,.34));
      -webkit-backdrop-filter:blur(16px) saturate(170%);
      backdrop-filter:blur(16px) saturate(170%);
      border:1px solid rgba(255,255,255,.72);
      box-shadow:0 1px 1px rgba(255,255,255,.9) inset,
                 0 -1px 2px rgba(30,42,43,.04) inset,
                 0 4px 16px rgba(30,42,43,.07);
      overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
  nav::-webkit-scrollbar{display:none;}
  /* Cuando el menu no entra (lo marca el JS): degradado en el borde derecho
     para que se vea que hay mas, y el arrastre queda a mano. Sin esto el
     recorte es invisible. */
  nav.desborda{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
               mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
               scroll-behavior:smooth;}
  /* La píldora que se desliza: se posiciona por JS sobre el link activo */
  .nav-pill{position:absolute;top:5px;left:0;height:calc(100% - 10px);border-radius:24px;
      background:linear-gradient(160deg, var(--accent), #6FC6C4);
      box-shadow:0 1px 2px rgba(255,255,255,.7) inset, 0 3px 10px rgba(30,42,43,.16);
      transition:transform .42s cubic-bezier(.34,1.32,.42,1), width .42s cubic-bezier(.34,1.32,.42,1), opacity .3s;
      opacity:0;pointer-events:none;z-index:0;}
  .nav-pill.ready{opacity:1;}
  /* ⚠ El menu tiene SIETE lugares desde que se sumo "Puntos de venta". Con la
     medida anterior (15,5 px y 17 px de lado) no entraban en un monitor de
     1280 y el primero y el ultimo quedaban cortados a la mitad. Cualquier
     enlace que se agregue de aca en mas obliga a revisar esto: `nav` tiene
     `min-width:0`, asi que NO se desborda visiblemente — recorta, que es peor
     porque no se nota hasta que alguien mira. */
  nav a{position:relative;z-index:1;font-size:14px;font-weight:500;color:var(--ink);
        padding:8px 12px;border-radius:24px;transition:color .28s;white-space:nowrap;}
  nav a:hover{color:var(--dark-2);}
  nav a.active{color:var(--ink);font-weight:600;}
  @media (prefers-reduced-motion:reduce){.nav-pill{transition:none;}}
  .header-actions{display:flex;align-items:center;justify-content:flex-end;gap:19px;flex:1 0 auto;}
  .icon-btn{position:relative;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:color .2s;}
  .icon-btn:hover{color:var(--accent);}
  .icon-btn svg{width:21px;height:21px;}
  .cart-badge{position:absolute;top:-7px;right:-9px;display:flex;background:var(--accent);color:var(--ink);font-size:11.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
  .menu-toggle{display:none;}

  .acct-wrap{position:relative;display:flex;align-items:center;}
  .acct-menu{position:absolute;top:calc(100% + 16px);right:0;z-index:70;min-width:250px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 18px 44px rgba(30,42,43,.15);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;}
  .acct-menu.open{opacity:1;visibility:visible;transform:translateY(0);}
  .acct-menu-head{padding:9px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:5px;}
  .acct-menu-hi{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600;}
  /* ⚠ `word-break:break-all` NO: cortaba el correo en cualquier letra
     ("cairovega38@gmail.co" / "m"), que se lee como un error de la pagina.
     `anywhere` solo parte si de verdad no entra, y prefiere los puntos de
     corte naturales. Con el menu a 250px la mayoria de los correos entran
     enteros en una linea. */
  .acct-menu-mail{display:block;font-size:14.5px;font-weight:600;color:var(--dark);margin-top:3px;overflow-wrap:anywhere;}
  .acct-menu button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:15.5px;color:var(--ink);font-weight:500;text-align:left;transition:background .15s;}
  .acct-menu button:hover{background:var(--accent-soft);}
  .acct-menu button svg{width:16px;height:16px;flex-shrink:0;opacity:.7;}
  .acct-menu-count{margin-left:auto;background:var(--accent);color:var(--ink);font-size:12.5px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:none;align-items:center;justify-content:center;padding:0 5px;}
  .acct-menu-count.show{display:flex;}

  /* ===== BOTONES ===== */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15.5px;font-weight:600;border-radius:30px;padding:14px 28px;transition:transform .2s,background .2s,color .2s;}
  .btn-dark{background:var(--accent);color:var(--ink);}
  .btn-dark:hover{background:#6FC6C4;transform:translateY(-2px);}
  .btn-ghost{color:var(--dark);padding:14px 4px;border-bottom:1.5px solid var(--dark);border-radius:0;}
  .btn-ghost:hover{color:var(--accent);border-bottom-color:var(--accent);}

  /* ===== HERO ===== */
  /* La foto del producto es el fondo de toda la primera pantalla */
  .hero{position:relative;display:flex;align-items:center;
        min-height:calc(100vh - 118px);
        min-height:calc(100svh - 118px);
        background-image:var(--hero-img);background-size:cover;background-position:center;
        padding:52px 0;overflow:hidden;}
  /* ⚠ VELO SOBRE LA FOTO, DEL LADO DEL TEXTO  (07/09/2026)

     Acá decía "sin capa por encima: la niebla que aclara el lado del texto está
     trabajada dentro de la propia foto". Era cierto — de la portada del pote
     Power en el bosque, que tenía esa niebla pintada. Esa foto se borró, y las
     tres que hay ahora son claras y aireadas. Medido sobre las tres: el brillo
     detrás del texto es 212-223 sobre 255, y el texto blanco queda en 1,3-1,5:1
     de contraste cuando el mínimo legible es 4,5:1. No se lee.

     El velo va en el CSS y no dentro de la foto a propósito: Claudia sube las
     portadas desde el panel y no tiene por qué saber que una foto clara deja el
     título invisible. Así la legibilidad no depende de qué foto tocó.

     Va entre el carrusel (z-index 0) y el texto (z-index 2). */
  .hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
        background:linear-gradient(100deg,
          rgba(23,42,38,.70) 0%, rgba(23,42,38,.58) 36%, rgba(23,42,38,0) 76%);}
  .hero-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 28px;}
  .hero-copy{max-width:520px;}
  /* Texto en blanco: la foto va sin retoques, así que el contraste lo da el color del texto */
  /* Todo el texto del hero va en blanco, sobre la foto */
  .hero h1{color:#fff;font-size:59px;letter-spacing:-.01em;text-shadow:0 2px 18px rgba(10,18,12,.45);}
  .hero .lead{color:#fff;margin-top:20px;font-size:17px;max-width:390px;line-height:1.75;
              text-shadow:0 1px 12px rgba(10,18,12,.5);}
  .hero-cta{display:flex;align-items:center;gap:22px;margin-top:30px;flex-wrap:wrap;}
  .hero-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px;max-width:440px;}
  .hero-feat{text-align:center;}
  .hero-feat .ic{width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;}
  .hero-feat svg{width:17px;height:17px;color:var(--dark);}
  .hero-feat span{font-size:12px;color:var(--muted);font-weight:500;line-height:1.35;display:block;}


  /* ===== BARRA DE BENEFICIOS ===== */
  .benefits{background:var(--accent);color:var(--ink);margin-top:44px;}
  .benefits-inner{max-width:1200px;margin:0 auto;padding:24px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .benefit{display:flex;align-items:center;gap:14px;justify-content:center;}
  .benefit svg{width:26px;height:26px;opacity:.9;flex-shrink:0;}
  .benefit b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);}
  .benefit small{font-size:13px;opacity:.78;}

  /* ===== CATEGORÍAS ===== */
  .cats{padding:74px 0 10px;}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:30px;}
  .sec-head h2{font-size:37.5px;}
  .sec-head p{color:var(--muted);font-size:16px;margin-top:7px;}
  .sec-link{font-size:14.5px;font-weight:600;color:var(--dark);border-bottom:1.5px solid var(--accent);padding-bottom:2px;white-space:nowrap;}
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .cat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:center;padding-bottom:18px;transition:transform .25s,box-shadow .25s;cursor:pointer;}
  .cat-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(30,42,43,.1);}
  .cat-img{height:150px;background-color:#fff;background-size:cover;background-position:center;background-repeat:no-repeat;}
  .cat-img.fit{background-size:contain;}
  .cat-img.tint{background-color:#f0f8f8;}
  .cat-card h3{font-size:18px;margin-top:15px;}
  .cat-card span{font-size:13.5px;color:var(--muted);display:inline-flex;gap:5px;margin-top:4px;}


  /* ===== PRODUCTOS ===== */
  .collection{padding:74px 0 84px;}
  /* Wrapper con degradé a la derecha: avisa que hay más categorías para scrollear */
  .filters-wrap{position:relative;margin-bottom:26px;}
  .filters-wrap::after{content:'';position:absolute;top:0;right:0;bottom:8px;width:34px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;}
  .filters{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;}
  .filters::-webkit-scrollbar{height:4px;}
  .filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  .filters button{white-space:nowrap;font-size:14px;font-weight:500;padding:8px 16px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:all .2s;}
  .filters button:hover{border-color:var(--accent);color:var(--dark);}
  .filters button.active{background:var(--accent);border-color:var(--accent);color:var(--ink);}

  .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .product-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;}
  .product-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(30,42,43,.1);}
  .product-thumb{position:relative;height:210px;background:#f4f1ea;overflow:hidden;}
  /* Igual que la ficha: el envase entero, sin cortar. */
  .product-thumb img{width:100%;height:100%;object-fit:contain;}
  .product-badge{position:absolute;top:11px;left:11px;z-index:2;background:var(--accent);color:var(--ink);font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:4px 10px;border-radius:12px;}
  .product-badge.alt{background:#fff;color:var(--muted);border:1px solid var(--line);font-weight:500;}
  /* Placeholder mientras el producto no tiene foto cargada */
  .thumb-ph{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#eef8f8,#f4f1ea);color:var(--accent);opacity:.55;}
  .thumb-ph svg{width:52px;height:52px;}
  .price-ask{font-size:16px;color:var(--muted);font-family:'Montserrat',sans-serif;font-weight:500;}
  .add-btn.ask{background:#25a35a;}
  .add-btn.ask:hover{background:#1f8c4c;}
  .product-info{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1;}
  .product-info h3{font-size:17px;font-family:'Montserrat',sans-serif;font-weight:600;color:var(--ink);}
  .product-cat{font-size:12.5px;color:var(--muted);margin-top:3px;}

  /* ── Estrellas de las clientas ─────────────────────────────────────────
     El dorado NO es una variable del sitio a propósito: no forma parte de la
     paleta de la marca, es el color con el que todo el mundo lee "puntaje".
     Si se pintaran del verde de Saint Germain, parecerían un adorno más.
     Las vacías van en gris de línea, no en un dorado pálido: tienen que
     leerse como "esto todavía no está", no como media estrella. */
  .stars{display:flex;align-items:center;gap:6px;margin-top:5px;}
  .stars .star-row{letter-spacing:1px;line-height:1;}
  .stars .star{color:var(--line);}
  .stars .star.on{color:#E0A33A;}
  .stars b{font-size:12.5px;font-weight:600;color:var(--ink);}
  .stars small{font-size:11.5px;color:var(--muted);}
  .stars.sm .star-row{font-size:13px;}
  .stars.lg{gap:8px;margin-top:10px;}
  .stars.lg .star-row{font-size:19px;}
  .stars.lg b{font-size:15px;}
  .stars.lg small{font-size:13px;}

  /* ── Bloque de opiniones en la ficha ─────────────────────────────────── */
  .pv-resenas{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
  .pv-resenas h3{font-size:19px;color:var(--ink);}
  .resena-resumen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 20px;}
  .resena-resumen>span{font-size:13.5px;color:var(--muted);}
  .resena-invita{font-size:13.5px;color:var(--muted);margin:10px 0 18px;}
  .resena-invita a{color:var(--ink);text-decoration:underline;}

  .resena-form{background:var(--surface);border:1px solid var(--line);
               border-radius:var(--r);padding:18px;max-width:620px;}
  .resena-label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;}
  /* Botones de verdad: se llega con el tabulador y el lector de pantalla los
     anuncia. Un <span> con clic no se puede usar sin mouse. */
  .star-picker{display:flex;gap:4px;margin-bottom:14px;}
  .star-pick{background:none;border:0;cursor:pointer;font-size:27px;line-height:1;
             padding:0 2px;color:var(--line);transition:color .12s;}
  .star-pick.on{color:#E0A33A;}
  .star-pick:hover{color:#E0A33A;}
  .star-pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
  .resena-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;
                        padding:10px 12px;font:inherit;font-size:13.5px;color:var(--ink);
                        background:var(--bg);resize:vertical;}
  .resena-acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;}
  .resena-nota{font-size:12px;color:var(--muted);}
  .resena-error{font-size:12.5px;color:#B4472F;margin-top:9px;}
  .resena-estado{font-size:12.5px;margin-bottom:12px;}
  .resena-estado.espera{color:var(--muted);}
  .resena-estado.ok{color:#2F7D5C;}

  .resena-lista{list-style:none;margin-top:24px;display:grid;gap:16px;max-width:620px;}
  .resena{border-top:1px solid var(--line);padding-top:16px;}
  .resena-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
  .resena-cab .stars{margin-top:0;}
  /* El promedio numérico no va al lado de una sola opinión: "5 (1)" pegado a
     un nombre se lee como si esa persona hubiera puntuado dos cosas. */
  .resena-cab .stars b,.resena-cab .stars small{display:none;}
  .resena-quien{font-size:13px;font-weight:600;color:var(--ink);}
  .resena-ok{font-size:11px;color:#2F7D5C;background:#EAF5EF;
             border-radius:20px;padding:2px 9px;}
  .resena-fecha{font-size:12px;color:var(--muted);}
  .resena p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:7px;}

  .product-info p{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.55;flex:1;}
  /* margin-top:auto mantiene los precios alineados aunque el título ocupe 2 líneas */
  .price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;}
  .price{font-size:19px;font-weight:600;color:var(--dark);font-family:'Montserrat',sans-serif;}
  .add-btn{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;}
  .add-btn:hover{background:#6FC6C4;transform:scale(1.08);}
  .add-btn.added{transform:scale(.86);}
  .empty-msg{display:none;text-align:center;color:var(--muted);font-size:16px;padding:40px 0;}
  .empty-msg.show{display:block;}

  /* ===== POR QUÉ ELEGIRNOS ===== */
  /* ===== PROMOCIONES ===== */
  .promos{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:74px 0 84px;}
  .promos-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);background:var(--accent);padding:5px 12px;border-radius:20px;margin-bottom:12px;}

  /* Destacado grande */
  .promo-hero{display:grid;grid-template-columns:0.85fr 1fr;gap:44px;align-items:center;background:linear-gradient(150deg,var(--accent-soft),var(--bg));border-radius:var(--r-lg);padding:34px 40px;margin-bottom:26px;}
  .promo-hero-img{height:290px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 20px 32px rgba(30,42,43,.16));}
  .promo-hero-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:#d05b5b;padding:5px 11px;border-radius:20px;}
  .promo-hero h3{font-family:'Montserrat',sans-serif;font-size:33px;margin-top:14px;line-height:1.2;}
  .promo-hero p{font-size:16px;color:var(--muted);margin-top:11px;line-height:1.65;max-width:420px;}
  .promo-precios{display:flex;align-items:baseline;gap:12px;margin-top:20px;flex-wrap:wrap;}
  .promo-antes{font-size:17px;color:var(--muted);text-decoration:line-through;}
  .promo-ahora{font-family:'Montserrat',sans-serif;font-size:34px;font-weight:600;color:var(--ink);}
  .promo-ahorro{font-size:13.5px;font-weight:600;color:#1f8c4c;background:rgba(31,140,76,.1);padding:4px 10px;border-radius:14px;}
  .promo-hero-btns{display:flex;gap:11px;margin-top:22px;flex-wrap:wrap;}
  .promo-btn{background:var(--accent);color:var(--ink);padding:13px 28px;border-radius:26px;font-size:15.5px;font-weight:600;transition:background .2s,transform .2s;}
  .promo-btn:hover{background:#6FC6C4;transform:translateY(-2px);}
  .promo-btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);padding:13px 22px;border-radius:26px;font-size:15.5px;font-weight:600;transition:border-color .2s;}
  .promo-btn-ghost:hover{border-color:var(--accent);}

  /* Tarjetas del resto de promos */
  .promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .promo-card{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px;cursor:pointer;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;}
  .promo-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(30,42,43,.1);}
  .promo-card-tag{position:absolute;top:14px;right:14px;font-size:12px;font-weight:700;color:#fff;background:#d05b5b;padding:4px 9px;border-radius:14px;}
  .promo-card-img{height:130px;background-size:contain;background-repeat:no-repeat;background-position:center;margin-bottom:14px;}
  .promo-card-ph{height:130px;display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:.5;margin-bottom:14px;}
  .promo-card h4{font-size:17px;line-height:1.35;}
  .promo-card .cat{font-size:12.5px;color:var(--muted);margin-top:4px;}
  .promo-card .precios{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:14px;flex-wrap:wrap;}
  .promo-card .antes{font-size:14px;color:var(--muted);text-decoration:line-through;}
  .promo-card .ahora{font-size:19px;font-weight:600;color:var(--ink);}
  .promo-vacio{grid-column:1/-1;text-align:center;padding:30px;font-size:15.5px;color:var(--muted);}

  /* ===== NOSOTROS ===== */
  .about{padding:80px 0;}
  .about-inner{display:grid;grid-template-columns:0.9fr 1fr;gap:52px;align-items:center;}
  .about h2{font-size:37.5px;}
  .about p{color:var(--muted);font-size:16px;margin-top:16px;line-height:1.8;}
  .stats{display:flex;gap:38px;margin-top:30px;flex-wrap:wrap;}
  .stat b{display:block;font-size:27px;font-family:'Montserrat',sans-serif;color:var(--dark);}
  .stat span{font-size:13px;color:var(--muted);}
  /* La foto de Nosotros pasó a ser vertical (el óleo de rosa mosqueta): sin
     un ancho máximo, la tarjeta se estira a toda la columna y el frasco
     queda como un hilo en el medio de un campo vacío. */
  .about-media{border-radius:var(--r-lg);background:linear-gradient(160deg,#f0faf9,#f7f5f0);padding:30px;display:flex;align-items:center;justify-content:center;width:100%;max-width:420px;margin-inline:auto;}
  /* ─ El panel de marca (reemplaza a la foto de producto, 07/09/2026) ─────
     Mismo lenguaje que las bandas de las paginas internas: crema con dos
     luces verdes y la hoja de fondo. No lleva foto a proposito — lo que se
     cuenta acá es la marca, y la marca no cambia con el catalogo. */
  .about-marca{position:relative;width:100%;min-height:460px;border-radius:calc(var(--r-lg) - 10px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    padding:38px 26px;text-align:center;overflow:hidden;
    background:
      radial-gradient(74% 120% at 82% 8%, rgba(90,171,153,.30) 0%, rgba(90,171,153,0) 62%),
      radial-gradient(62% 118% at 8% 96%, rgba(90,171,153,.20) 0%, rgba(90,171,153,0) 58%),
      linear-gradient(180deg,#ffffff 0%,#f4f2ec 100%);}
  .about-marca::after{content:'';position:absolute;right:-46px;bottom:-40px;width:250px;height:250px;
    opacity:.14;pointer-events:none;background:no-repeat center/contain;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f8b7c' stroke-width='.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13V6a1 1 0 0 1 1-1h1a7 7 0 0 1 7 7 7 7 0 0 1 7-7h1a1 1 0 0 1 1 1v1a7 7 0 0 1-7 7h-2Z'/%3E%3C/svg%3E");}
  /* La imagen propia de Claudia, cuando reemplaza al panel de marca. Llena la
     caja sin deformarse: `cover` recorta lo que sobra en vez de estirar, que
     es lo unico que no se puede permitir con la foto de otra persona. */
  /* ─ Compartir, en la ficha del producto ─────────────────────────── */
  /* ─ El formulario de opinion, plegado ───────────────────────────── */
  .resena-plegable{margin:14px 0 4px;}
  .resena-plegable summary{display:inline-flex;align-items:center;gap:8px;
    cursor:pointer;list-style:none;width:auto;
    padding:9px 18px;border-radius:999px;
    border:1px solid var(--line);background:transparent;
    font-size:14.5px;font-weight:600;color:var(--ink);
    transition:border-color .18s,background .18s;}
  .resena-plegable summary::-webkit-details-marker{display:none;}
  .resena-plegable summary::after{content:'ƒA';transform:rotate(90deg);
    font-size:17px;line-height:1;transition:transform .2s;}
  .resena-plegable[open] summary::after{transform:rotate(-90deg);}
  .resena-plegable summary:hover{border-color:var(--accent);background:var(--accent-soft);}
  .resena-plegable .resena-form{margin-top:14px;}

  .pv-compartir{display:flex;align-items:center;gap:10px;margin-top:18px;}
  .pv-compartir-rot{font-size:14px;color:var(--muted);}
  .pv-share{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;color:var(--muted);
    border:1px solid var(--line);background:transparent;
    transition:color .18s,border-color .18s,background .18s,transform .18s;}
  .pv-share svg{width:17px;height:17px;}
  .pv-share:hover{color:var(--ink);border-color:var(--accent);
    background:var(--accent-soft);transform:translateY(-1px);}
  .pv-share:active{transform:scale(.94);}

  .about-imagen{display:block;width:100%;height:460px;object-fit:cover;
    border-radius:calc(var(--r-lg) - 10px);}
  .about-marca-logo{position:relative;z-index:1;width:150px;height:auto;}
  .about-marca-frase{position:relative;z-index:1;margin:0;font-size:16.5px;line-height:1.6;color:var(--muted);}
  .about-marca-redes{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
  .about-marca-redes a{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;
    background:rgba(255,255,255,.86);border:1px solid rgba(63,139,124,.26);
    font-size:14.5px;font-weight:600;color:var(--ink);
    transition:background .18s,border-color .18s,transform .18s;}
  .about-marca-redes a:hover{background:#fff;border-color:rgba(63,139,124,.5);transform:translateY(-2px);}
  .about-marca-redes svg{width:18px;height:18px;flex:none;}

  /* ===== TESTIMONIOS ===== */
  .testimonials{background:var(--surface);border-top:1px solid var(--line);padding:76px 0;}
  .testimonials h2{font-size:37.5px;text-align:center;margin-bottom:36px;}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .t-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;}
  .t-stars{color:var(--accent);font-size:14.5px;letter-spacing:2px;}
  .t-card p{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.75;}
  .t-who{display:flex;align-items:center;gap:11px;margin-top:18px;}
  .t-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#B4E5E3,var(--accent));}
  .t-who b{font-size:14px;font-weight:600;color:var(--ink);display:block;}
  .t-who small{font-size:12.5px;color:var(--muted);}

  /* ===== SUMATE A VENDER =====
     Una tarjeta y no una franja a todo el ancho: es una invitacion, no un
     anuncio. A todo el ancho competiria con la portada.

     El fondo NO es un color plano. Dos manchas de color muy suaves, corridas
     del centro, dan profundidad sin dibujar nada — un rectangulo de un solo
     tono al lado de tarjetas blancas se lee como un bloque que sobro. */
  .vender-sec{padding:26px 0 6px;}
  .vender-caja{position:relative;overflow:hidden;border-radius:var(--r-lg);
    padding:52px 56px;
    background:
      radial-gradient(70% 120% at 88% 8%, rgba(134,210,208,.34) 0%, rgba(134,210,208,0) 60%),
      radial-gradient(60% 110% at 4% 96%, rgba(134,210,208,.20) 0%, rgba(134,210,208,0) 55%),
      var(--accent-soft);}

  /* La hoja sangra por el borde derecho. Cortada se lee como textura; entera y
     centrada se leeria como un icono grande al costado del texto. */
  .vender-deco{position:absolute;right:-58px;top:50%;transform:translateY(-50%);
    width:340px;color:var(--accent);opacity:.30;pointer-events:none;}
  .vender-deco svg{width:100%;height:auto;display:block;}

  .vender-texto{position:relative;max-width:56ch;}
  .vender-ante{display:flex;align-items:center;gap:8px;margin:0 0 14px;
    font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--dark);}
  /* El puntito late despacio. Es lo unico que se mueve solo en la pagina, y por
     eso funciona: dice "esto esta abierto" sin escribirlo. */
  .vender-punto{width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 0 rgba(134,210,208,.7);animation:pulso 2.6s ease-out infinite;}
  @keyframes pulso{
    0%{box-shadow:0 0 0 0 rgba(134,210,208,.75)}
    70%{box-shadow:0 0 0 11px rgba(134,210,208,0)}
    100%{box-shadow:0 0 0 0 rgba(134,210,208,0)}}

  .vender-texto h2{font-size:40px;line-height:1.08;margin:0 0 14px;
    letter-spacing:-.02em;}
  /* La segunda linea en cursiva y mas clara: rompe el bloque de titulo sin
     cambiar de tipografia ni meter otro color. */
  .vender-texto h2 em{font-style:italic;font-weight:400;color:var(--muted);}
  .vender-bajada{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 26px;
    max-width:46ch;}

  .vender-fichas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;
    margin:0 0 30px;padding:0;}
  .vender-fichas li{display:flex;align-items:center;gap:9px;
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
    border-radius:999px;padding:9px 17px 9px 11px;
    font-size:14px;font-weight:500;color:var(--ink);}
  .vender-fichas span{display:grid;place-items:center;width:23px;height:23px;
    border-radius:50%;background:var(--dark);color:#fff;
    font-size:10.5px;font-weight:700;letter-spacing:.02em;}

  /* Los dos botones envuelven en el telefono en vez de encogerse: un boton
     angosto con el texto partido en dos renglones se lee peor que dos
     botones uno abajo del otro. */
  .vender-botones{display:flex;flex-wrap:wrap;gap:12px;}
  .vender-btn{display:inline-flex;align-items:center;gap:9px;
    background:var(--dark);color:#fff;padding:14px 28px;border-radius:999px;
    font-size:15.5px;font-weight:600;
    transition:background .2s,transform .2s,box-shadow .2s;}
  .vender-btn svg{width:17px;height:17px;transition:transform .25s cubic-bezier(.22,.61,.36,1);}
  .vender-btn:hover{background:var(--dark-2);transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(30,42,43,.2);}
  /* La flecha avanza sola al pasar por encima: dice "esto lleva a otro lado". */
  .vender-btn:hover svg{transform:translateX(4px);}

  @media (max-width:900px){
    .vender-caja{padding:38px 30px;}
    .vender-texto h2{font-size:31px;}
    .vender-deco{width:230px;right:-80px;opacity:.22;}
  }
  @media (max-width:560px){
    .vender-caja{padding:30px 22px;}
    .vender-texto h2{font-size:26px;}
    .vender-bajada{font-size:15px;}
    /* La hoja se va: a este ancho queda debajo del texto y lo ensucia. */
    .vender-deco{display:none;}
    .vender-fichas{gap:8px;}
    .vender-fichas li{font-size:13px;padding:8px 14px 8px 9px;}
  }
  @media (prefers-reduced-motion:reduce){
    .vender-punto{animation:none;}
    .vender-btn:hover{transform:none;}
    .vender-btn:hover svg{transform:none;}
  }

  /* ===== LO QUE NOS IMPORTA ==============================================
     Dos promesas, con aire. Dos y no seis: una lista larga de sellos se lee
     como decoracion y no se cree ninguno.

     Sin tarjetas ni bordes: el icono en un circulo de color suave ya separa
     cada bloque. Encerrarlos ademas en una caja seria repetir el mismo trabajo
     dos veces y ensuciar una seccion que vive de tener espacio.
     ======================================================================== */
  .valores{padding:56px 0 10px;}
  .valores-in{display:flex;justify-content:center;gap:64px;flex-wrap:wrap;}
  .valor{flex:0 1 300px;text-align:center;}
  /* El circulo, no el trazo, es lo que hace que se lea como un sello. */
  .valor-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 14px;
    border-radius:50%;background:var(--accent-soft);color:var(--dark);}
  .valor-ico svg{width:32px;height:32px;display:block;}
  .valor b{display:block;font-size:17px;color:var(--ink);margin-bottom:5px;}
  .valor small{display:block;font-size:13.5px;color:var(--muted);line-height:1.55;
    max-width:30ch;margin:0 auto;}
  @media (max-width:640px){
    .valores{padding:40px 0 4px;}
    .valores-in{gap:34px;}
    .valor{flex:1 1 100%;}
  }

  /* ===== NEWSLETTER ===== */
  .news-sec{padding:74px 0;text-align:center;}
  .news-sec h2{font-size:35px;}
  .news-sec p{color:var(--muted);font-size:16px;margin-top:10px;}
  .newsletter-bar{max-width:520px;margin:26px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:40px;display:flex;align-items:center;padding:6px;box-shadow:0 14px 34px rgba(30,42,43,.06);}
  .newsletter-bar .mail-icon{padding:0 6px 0 16px;color:var(--accent);display:flex;}
  .newsletter-bar input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);padding:13px 10px;font-size:15.5px;}
  .newsletter-bar input::placeholder{color:var(--muted);}
  .newsletter-bar button{background:var(--accent);color:var(--ink);padding:13px 24px;border-radius:34px;font-size:14.5px;font-weight:600;white-space:nowrap;transition:background .2s;}
  .newsletter-bar button:hover{background:#6FC6C4;}
  .newsletter-bar button:disabled{background:#cdd8d7;color:#8fa3a2;cursor:not-allowed;}
  .newsletter-msg{color:var(--dark);font-size:15.5px;font-weight:500;}

  /* ===== FOOTER ===== */
  footer{background:var(--accent);color:var(--ink);padding:60px 0 26px;}
  /* El ancho de cada columna sale de su CONTENIDO, y el aire que sobra se
     reparte parejo entre ellas.

     Se llego aca en dos pasos. Primero eran 1.5fr 1fr 1fr 1fr: la marca se
     llevaba 347 px con el texto topeado en 260, asi que quedaba un hueco de
     90 px al lado que no se explicaba con nada. Despues se probo con cuatro
     columnas iguales de 260: los bordes izquierdos quedaban alineados, pero
     los BLOQUES DE TEXTO no — 'Tienda' son links de una palabra y dejaba una
     zanja al lado, mientras 'Ayuda' (links largos) iba apretada. Se seguia
     leyendo como si Tienda estuviera sola.

     Con max-content + space-between lo que queda parejo son los espacios
     ENTRE TEXTOS, que es lo que el ojo mide de verdad.

     ⚠ La columna de la marca lleva un TOPE, no 1fr. Con 1fr se comia todo el
     aire sobrante: el parrafo se estiraba a 530 px —demasiado ancho para leer
     de un renglon— y encima no quedaba nada que repartir, asi que los huecos
     volvian a ser solo el gap.

     El 310px de abajo tiene que ser el MISMO que el max-width de .desc. Si la
     columna es mas ancha que su texto, esa diferencia se suma al primer
     hueco y se nota: con 330 contra 310 los huecos daban 126/107/107. */
  .footer-top{display:grid;grid-template-columns:minmax(230px,310px) repeat(3,max-content);
    justify-content:space-between;gap:34px 40px;align-items:start;}
  .footer-brand img{height:44px;filter:brightness(0);opacity:.82;}
  .footer-top .desc{font-size:14px;margin-top:14px;line-height:1.75;opacity:.82;max-width:310px;}
  .socials{display:flex;gap:9px;margin-top:16px;}
  .socials a{width:31px;height:31px;border-radius:50%;border:1px solid rgba(31,70,69,.3);display:flex;align-items:center;justify-content:center;font-size:11.5px;text-transform:uppercase;cursor:pointer;transition:background .2s;}
  .socials a:hover{background:rgba(31,70,69,.12);}
  .footer-col h4{color:var(--ink);font-size:15.5px;margin-bottom:13px;}
  .footer-col a{display:block;font-size:14px;opacity:.82;margin-bottom:9px;transition:opacity .2s;}
  .footer-col a:hover{opacity:1;}
  .footer-bottom{border-top:1px solid rgba(31,70,69,.22);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;opacity:.75;}
  .footer-bottom a{margin-left:18px;}

  /* ===== OVERLAYS ===== */
  .overlay-backdrop{position:fixed;inset:0;background:rgba(30,42,43,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:90;}
  .overlay-backdrop.open{opacity:1;visibility:visible;}

  .search-panel{position:fixed;top:0;left:0;right:0;background:var(--surface);padding:30px 40px;z-index:100;transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:0 12px 40px rgba(30,42,43,.14);}
  .search-panel.open{transform:translateY(0);}
  .search-row{display:flex;align-items:center;gap:14px;max-width:900px;margin:0 auto;}
  .search-row svg{color:var(--muted);flex-shrink:0;}
  .search-panel input{flex:1;border:none;outline:none;font-size:21.5px;padding:10px 0;background:transparent;color:var(--ink);}
  .search-results{max-width:900px;margin:12px auto 0;font-size:14px;color:var(--muted);}
  .search-count{font-size:13.5px;color:var(--muted);padding:4px 0 10px;}
  .search-list{max-height:min(56vh,440px);overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
  .search-hit{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--r);background:transparent;text-align:left;width:100%;transition:background .18s;}
  .search-hit:hover{background:var(--accent-soft);}
  .search-hit-img{width:52px;height:52px;border-radius:11px;background:#f4f1ea;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
  .search-hit-img img{width:100%;height:100%;object-fit:contain;}
  .search-hit-img svg{width:22px;height:22px;color:var(--accent);}
  .search-hit-txt{flex:1;min-width:0;}
  .search-hit-txt b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);}
  .search-hit-txt span{display:block;font-size:13px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .search-hit-price{font-size:14.5px;font-weight:600;color:var(--ink);flex-shrink:0;}
  .search-hit-price.ask{font-size:13px;font-weight:500;color:var(--muted);}
  .search-hint{padding:6px 0 2px;font-size:14px;color:var(--muted);}

  .modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);background:var(--surface);border-radius:var(--r-lg);padding:36px 34px;width:min(430px,92vw);z-index:100;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,transform .3s;box-shadow:0 26px 70px rgba(30,42,43,.2);max-height:88vh;overflow-y:auto;}
  .modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
  .modal h3{font-size:23.5px;}
  .modal .sub{font-size:14.5px;color:var(--muted);margin-top:6px;margin-bottom:20px;}
  .modal-close{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted);}
  .modal-close:hover{background:var(--line);}
  .tabs{display:flex;gap:4px;background:var(--bg);border-radius:24px;padding:4px;margin-bottom:20px;}
  .tabs button{flex:1;padding:9px;border-radius:20px;font-size:14.5px;font-weight:500;color:var(--muted);}
  .tabs button.active{background:var(--surface);color:var(--dark);box-shadow:0 1px 4px rgba(0,0,0,.07);}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;}
  .field input,.field select,.admin-select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:15.5px;outline:none;background:var(--surface);color:var(--ink);transition:border-color .2s;}
  .field input:focus,.field select:focus{border-color:var(--accent);}
  .field-error{display:none;font-size:13px;color:#d05b5b;margin-top:5px;}
  .field-error.show{display:block;}
  .modal-submit{width:100%;background:var(--accent);color:var(--ink);padding:13px;border-radius:26px;font-size:15.5px;font-weight:600;margin-top:6px;transition:background .2s;}
  .modal-submit:hover{background:#6FC6C4;}
  /* Campo de contraseña con el ojito para mostrar u ocultar lo escrito */
  .campo-clave{position:relative;display:flex;align-items:center;}
  .campo-clave input{width:100%;padding-right:44px;}
  .ver-clave{position:absolute;right:6px;top:50%;transform:translateY(-50%);
             width:32px;height:32px;display:flex;align-items:center;justify-content:center;
             border-radius:50%;color:var(--muted);transition:color .2s,background .2s;}
  .ver-clave:hover{color:var(--ink);background:var(--bg);}
  .ver-clave svg{width:18px;height:18px;}
  /* El ícono muestra el ESTADO actual: tachado = está oculta, ojo = se está viendo */
  .ver-clave .ojo-abierto{display:none;}
  .ver-clave.visible .ojo-abierto{display:inline;}
  .ver-clave.visible .ojo-cerrado{display:none;}
  .link-olvide{display:block;margin:12px auto 0;font-size:14px;color:var(--muted);text-decoration:underline;}
  .link-olvide:hover{color:var(--ink);}
  .olvide-msg{margin-top:11px;font-size:14px;line-height:1.55;text-align:center;color:var(--ink);}
  .olvide-msg.ok{background:var(--accent-soft);border-radius:12px;padding:11px 13px;}
  .olvide-msg.error{color:#d05b5b;}
  .modal-submit:disabled{background:#cdd8d7;color:#8fa3a2;cursor:not-allowed;}
  .modal-back{width:100%;padding:11px;font-size:14px;color:var(--muted);margin-top:8px;}
  .modal-success{display:none;text-align:center;padding:12px 0;}
  .modal-success.show{display:block;}
  .modal-success .check{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--dark);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
  .modal-success h4{font-size:21.5px;}
  .modal-success p{font-size:14.5px;color:var(--muted);margin-top:7px;}

  .cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--surface);z-index:100;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(30,42,43,.13);}
  .cart-panel.open{transform:translateX(0);}
  .cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line);}
  .cart-head h3{font-size:21.5px;}
  .cart-items{flex:1;overflow-y:auto;padding:20px 26px;}
  /* Estado vacío: bloque compacto arriba, no un texto flotando en el medio del panel */
  .cart-empty{text-align:center;padding:34px 6px 0;color:var(--muted);}
  .cart-empty-ic{width:66px;height:66px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
  .cart-empty-ic svg{width:29px;height:29px;color:var(--ink);opacity:.55;}
  .cart-empty b{display:block;font-family:'Montserrat',sans-serif;font-size:19px;font-weight:600;color:var(--ink);}
  .cart-empty p{font-size:14.5px;line-height:1.6;margin-top:8px;max-width:250px;margin-left:auto;margin-right:auto;}
  .cart-empty-btn{margin-top:20px;background:var(--accent);color:var(--ink);padding:12px 26px;border-radius:26px;font-size:14.5px;font-weight:600;transition:background .2s;}
  .cart-empty-btn:hover{background:#6FC6C4;}
  .cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
  .cart-item:last-child{border-bottom:none;}
  .cart-item-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
  .cart-item-sub{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
  .cart-item-thumb{width:56px;height:56px;border-radius:11px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
  .cart-item-thumb img{width:100%;height:100%;object-fit:contain;}
  .cart-item-info{flex:1;}
  .cart-item-info h4{font-size:15.5px;font-family:'Montserrat',sans-serif;font-weight:600;color:var(--ink);}
  .cart-item-info>span{font-size:14px;color:var(--muted);}
  .qty-row{display:flex;align-items:center;gap:9px;margin-top:7px;}
  .qty-row button{width:23px;height:23px;border-radius:50%;border:1px solid var(--line);font-size:14.5px;color:var(--ink);display:flex;align-items:center;justify-content:center;}
  .qty-row button:hover{border-color:var(--accent);color:var(--accent);}
  .qty-row>span{font-size:14px;min-width:16px;text-align:center;}
  .remove-item{font-size:13px;color:var(--muted);cursor:pointer;margin-left:6px;text-decoration:underline;}
  .cart-foot{border-top:1px solid var(--line);padding:18px 26px 22px;background:var(--surface);}
  .cart-ship-note{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border-radius:12px;padding:10px 13px;font-size:13.5px;line-height:1.45;color:var(--ink);margin-bottom:14px;}
  .cart-foot-hint{font-size:13px;color:var(--muted);margin-top:3px;margin-bottom:14px;}
  .cart-total-row{display:flex;justify-content:space-between;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px;}
  .cart-total-row.sub{font-size:14.5px;font-weight:500;color:var(--muted);}
  .cart-total-row.dto{font-size:14.5px;font-weight:500;color:var(--ink);}
  .cart-total-row.dto span:last-child{color:#1f8c4c;}
  .codigo-box{margin-bottom:14px;}
  .codigo-row{display:flex;gap:8px;}
  .codigo-row input{flex:1;border:1px solid var(--line);border-radius:22px;padding:10px 15px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink);}
  .codigo-row input:focus{outline:none;border-color:var(--accent);}
  .codigo-row button{background:var(--accent);color:var(--ink);border-radius:22px;padding:10px 17px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s;}
  .codigo-row button:disabled{background:#cdd8d7;color:#8fa3a2;cursor:not-allowed;}
  .codigo-aplicado{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--accent-soft);border-radius:12px;padding:10px 13px;font-size:14px;color:var(--ink);}
  .codigo-aplicado b{font-weight:600;}
  .codigo-aplicado button{font-size:13px;color:var(--muted);text-decoration:underline;}
  .codigo-msg{font-size:13px;margin-top:6px;}
  .codigo-msg.error{color:#d05b5b;}
  .checkout-btn{width:100%;background:var(--accent);color:var(--ink);padding:14px;border-radius:26px;font-size:15.5px;font-weight:600;transition:background .2s;}
  .checkout-btn:hover{background:#6FC6C4;}
  .checkout-btn:disabled{background:#cdd8d7;color:#8fa3a2;cursor:not-allowed;}

  .checkout-modal{width:min(500px,94vw);}

  /* ===== PANTALLAS (categoría / producto) ===== */
  .cats-all{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
  .cat-tile{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:120px;
            background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;
            text-align:left;transition:transform .22s,box-shadow .22s,border-color .22s;}
  .cat-tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(30,42,43,.09);border-color:var(--accent);}
  .cat-tile h3{font-size:18px;line-height:1.3;}
  .cat-tile .n{font-size:13.5px;color:var(--muted);}
  .cat-tile .ir{font-size:14px;font-weight:600;color:var(--ink);}
  .cat-tile.vacia{opacity:.55;cursor:default;}
  .cat-tile.vacia:hover{transform:none;box-shadow:none;border-color:var(--line);}
  .cat-tile.vacia .ir{color:var(--muted);font-weight:500;}
  .wrap-narrow{max-width:760px;}
  .legal-body{margin-top:26px;padding-bottom:70px;}
  .legal-body h3{font-family:'Montserrat',sans-serif;font-size:21.5px;color:var(--ink);margin-top:30px;margin-bottom:10px;}
  .legal-body p,.legal-body li{font-size:16px;color:var(--muted);line-height:1.75;}
  .legal-body p{margin-bottom:12px;}
  .legal-body ul{padding-left:20px;margin-bottom:12px;}
  .legal-body li{margin-bottom:6px;}
  .legal-body .aviso{background:var(--accent-soft);border-radius:var(--r);padding:15px 17px;font-size:14.5px;color:var(--ink);margin-bottom:20px;}
  .legal-body dl{display:grid;gap:8px;margin-bottom:14px;}
  .legal-body dl div{display:flex;gap:10px;font-size:15.5px;}
  .legal-body dt{color:var(--muted);min-width:130px;}
  .legal-body dd{color:var(--ink);font-weight:500;}
  .view-title{font-size:40.5px;margin-top:6px;}
  .view-sub{color:var(--muted);font-size:15.5px;margin-top:8px;margin-bottom:30px;}
  .back-btn{display:inline-flex;align-items:center;gap:7px;margin-top:34px;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:10px 18px 10px 14px;font-size:14px;font-weight:600;color:var(--ink);transition:border-color .2s,transform .2s;}
  .back-btn:hover{border-color:var(--accent);transform:translateX(-2px);}
  .back-btn svg{width:16px;height:16px;}
  .crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding-top:20px;flex-wrap:wrap;}
  .crumbs a{color:var(--muted);}
  .crumbs a:hover{color:var(--ink);text-decoration:underline;}
  .crumbs b{color:var(--ink);font-weight:600;}
  #viewCategory,#viewProduct{padding-bottom:80px;}
  .view-other{margin-top:64px;padding-top:34px;border-top:1px solid var(--line);}
  .view-other h3{font-size:21.5px;margin-bottom:18px;}
  .view-other-list{display:flex;flex-wrap:wrap;gap:9px;}
  .view-other-list button{border:1px solid var(--line);background:var(--surface);border-radius:22px;padding:9px 17px;font-size:14px;font-weight:500;color:var(--ink);transition:border-color .2s;}
  .view-other-list button:hover{border-color:var(--accent);}

  /* Ficha: imagen grande + panel de compra, como una página de producto real */
  .pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:26px;}
  .pv-media{display:flex;flex-direction:column;gap:12px;}
  .pv-main-img{width:100%;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:#f4f1ea;display:flex;align-items:center;justify-content:center;}
  /* ⚠ `contain`, NO `cover` (10/09/2026). El cuadro es 1:1 y las fotos de
     envase son verticales: con `cover` el desodorante quedaba sin base y el
     acondicionador partido al medio. Quien compra tiene que ver el envase
     entero — es lo que esta comprando. Lo que sobra queda del crema del
     cuadro, como en cualquier catalogo de cosmetica.
     Las fotos se guardan enteras (`fit: inside` al subir): el recorte era
     solo de pantalla. */
  .pv-main-img img{width:100%;height:100%;object-fit:contain;display:block;}
  .pv-main-img .thumb-ph{width:100%;}
  .pv-more{display:flex;align-items:flex-start;gap:10px;background:var(--accent-soft);border-radius:var(--r);padding:14px 16px;font-size:14px;line-height:1.5;}
  .pv-more svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;}
  .pv-more a{color:var(--ink);font-weight:600;text-decoration:underline;}
  .pv-cat{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;}
  .pv-title{font-size:35px;margin-top:9px;}
  /* La descripcion va al FINAL de la ficha, debajo del precio, el carrito y
     los datos de envio. Antes iba arriba, entre el titulo y el precio: con
     dos lineas andaba bien, pero Claudia tiene productos con descripciones
     largas y eso empujaba el boton de comprar fuera de la pantalla. Quien
     entra a un producto primero quiere el precio; el detalle lo lee despues,
     y si es largo baja a buscarlo. */
  .pv-desc{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);}
  .pv-desc h2{font-size:17px;margin:0 0 12px;color:var(--ink);}
  /* La medida se corta: una linea de 90 caracteres cansa y se pierde el
     renglon al volver. */
  .pv-desc-cuerpo{max-width:62ch;}
  .pv-desc-cuerpo p{font-size:16px;color:var(--muted);line-height:1.72;margin:0 0 1em;}
  .pv-desc-cuerpo p:last-child{margin-bottom:0;}
  .pv-price{font-family:'Montserrat',sans-serif;font-size:30.5px;font-weight:600;color:var(--ink);margin-top:22px;}
  .pv-price.ask{font-family:'Montserrat',sans-serif;font-size:17px;font-weight:500;color:var(--muted);}
  .pv-buy{display:flex;align-items:center;gap:13px;margin-top:22px;flex-wrap:wrap;}
  .pv-qty{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:26px;padding:5px;background:var(--surface);}
  .pv-qty button{width:31px;height:31px;border-radius:50%;background:var(--bg);font-size:17px;font-weight:600;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .2s;}
  .pv-qty button:hover{background:var(--line);}
  .pv-qty span{min-width:26px;text-align:center;font-size:16px;font-weight:600;}
  .pv-add{background:var(--accent);color:var(--ink);padding:14px 32px;border-radius:28px;font-size:15.5px;font-weight:600;transition:background .2s,transform .2s;}
  .pv-add:hover{background:#6FC6C4;transform:translateY(-2px);}
  .pv-add.ask{background:#25a35a;color:#fff;}
  .pv-add.ask:hover{background:#1f8c4c;}
  .pv-meta{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;}
  .pv-meta div{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);}
  .pv-meta svg{width:17px;height:17px;flex-shrink:0;color:var(--ink);}
  .checkout-steps{display:flex;align-items:center;gap:8px;margin-bottom:24px;}
  .cstep{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:500;}
  .cstep span{width:22px;height:22px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:12.5px;border:1px solid var(--line);}
  .cstep.active{color:var(--dark);font-weight:600;}
  .cstep.active span{background:var(--accent);color:var(--ink);border-color:var(--accent);}
  .cstep.done span{background:var(--accent);color:var(--ink);border-color:var(--accent);}
  .cstep-line{flex:1;height:1px;background:var(--line);}
  .pay-instructions{text-align:left;background:var(--accent-soft);border-radius:var(--r);padding:18px 19px;margin-top:20px;}
  /* ── El recargo de Mercado Pago ─────────────────────────────────────────
     Se anuncia en la propia opción de pago, antes de elegirla, y otra vez al
     elegirla. El precio final tiene que estar a la vista ANTES de decidir
     (ley 17.250); un recargo que aparece recién en el total es engañoso. */
  .pay-recargo{margin-left:auto;padding:2px 9px;border-radius:12px;background:#FBF0DE;
    color:#8A5A2B;font-size:12.5px;font-weight:700;white-space:nowrap;}
  .pay-option-label{display:flex;align-items:center;gap:8px;width:100%;}
  .pay-note-recargo{margin:-2px 0 10px;padding:10px 12px;border-radius:12px;
    background:#FBF0DE;color:#6E4A0F;line-height:1.5;}
  .pay-qr{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px;
    border:1px solid var(--line);border-radius:14px;background:var(--surface);}
  .pay-qr img{width:150px;height:150px;object-fit:contain;flex-shrink:0;
    background:#fff;border-radius:10px;padding:6px;border:1px solid var(--line);}
  .pay-qr span{font-size:13.5px;color:var(--muted);line-height:1.5;}
  @media (max-width:520px){.pay-qr{flex-direction:column;text-align:center;}}
  .os-recargo span:last-child{color:#8A5A2B;font-weight:600;}

  .pay-instructions h4{font-family:'Montserrat',sans-serif;font-size:17.5px;color:var(--ink);margin-bottom:11px;}
  .pay-instructions ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:13px;}
  .pay-instructions li{display:flex;justify-content:space-between;gap:14px;font-size:14px;}
  .pay-instructions li span{color:var(--muted);flex-shrink:0;}
  .pay-instructions li b{color:var(--ink);text-align:right;word-break:break-word;}
  .pay-instructions p{font-size:14px;color:var(--muted);line-height:1.6;}
  .pay-inst-safe{background:rgba(255,255,255,.7);border-radius:10px;padding:9px 11px;margin-top:10px;font-size:13.5px;}
  .pay-inst-btn{width:100%;margin-top:14px;background:var(--accent);color:var(--ink);padding:12px;border-radius:24px;font-size:14.5px;font-weight:600;transition:background .2s;}
  .pay-inst-btn:hover{background:#6FC6C4;}
  .pay-option-label small{color:var(--muted);font-size:13px;}
  .pay-options{display:grid;gap:9px;margin-bottom:16px;}
  .pay-option{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .2s,background .2s;}
  .pay-option:hover{border-color:var(--accent);}
  .pay-option input{accent-color:var(--accent);}
  .pay-option-label{font-size:14.5px;color:var(--ink);}
  .pay-note{background:var(--accent-soft);border-radius:11px;padding:12px 14px;font-size:13.5px;color:var(--dark);margin-bottom:14px;line-height:1.6;}
  .order-summary{background:var(--bg);border-radius:13px;padding:18px;margin-bottom:16px;}
  .order-summary h5{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;margin-top:14px;font-weight:600;}
  .order-summary h5:first-child{margin-top:0;}
  .os-muted{font-size:14px;color:var(--ink);line-height:1.65;}
  .os-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);padding:3px 0;}
  .os-line{display:flex;justify-content:space-between;font-size:17px;font-weight:600;color:var(--dark);border-top:1px solid var(--line);margin-top:9px;padding-top:9px;}

  .order-card{border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:13px;background:var(--surface);}
  .order-card-head{display:flex;justify-content:space-between;font-size:15.5px;margin-bottom:12px;color:var(--dark);}
  .order-steps{display:grid;gap:7px;}
  .ostep{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);}
  .ostep .dot2{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0;}
  .ostep.done{color:var(--dark);font-weight:500;}
  .ostep.done .dot2{background:var(--accent);}
  .order-confirm-btn{width:100%;margin-top:13px;background:var(--accent);color:var(--ink);padding:10px;border-radius:22px;font-size:14px;font-weight:600;}
  .order-done-msg{margin-top:13px;background:var(--accent-soft);color:var(--dark);border-radius:11px;padding:10px 13px;font-size:13.5px;text-align:center;}

  .admin-modal{width:min(680px,95vw);}
  .admin-nums{display:flex;align-items:flex-end;gap:8px;}
  .admin-nums label{flex:1;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px;}
  .admin-nums input{width:100%;}
  .admin-profit{flex:1;display:flex;flex-direction:column;gap:1px;padding-bottom:7px;font-size:13.5px;}
  .admin-profit b{color:var(--ink);font-size:14px;}
  .admin-profit b.neg{color:#d05b5b;}
  .admin-profit small{font-size:11.5px;color:var(--muted);}
  .admin-resumen{background:var(--accent-soft);border-radius:var(--r);padding:15px 17px;margin-bottom:18px;}
  .admin-resumen p{font-size:14px;color:var(--muted);line-height:1.6;}
  .admin-res-grid{display:flex;gap:20px;flex-wrap:wrap;}
  .admin-res-grid div{display:flex;flex-direction:column;}
  .admin-res-grid b{font-family:'Montserrat',sans-serif;font-size:22.5px;color:var(--ink);}
  .admin-res-grid span{font-size:12.5px;color:var(--muted);}
  .admin-alerta{margin-top:11px;font-size:13.5px;color:#d05b5b;}
  .admin-hint{font-size:13.5px;color:var(--muted);margin-bottom:12px;}
  .cfg-box{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;}
  .cfg-box h5{font-size:14px;font-weight:600;color:var(--ink);margin:16px 0 9px;}
  .cfg-box h5:first-of-type{margin-top:0;}
  .cfg-box h5 small,.cfg-grid label small{font-weight:400;color:var(--muted);}
  .cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .cfg-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);}
  .cfg-grid input{border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink);}
  .cfg-grid input:focus{outline:none;border-color:var(--accent);}
  .cfg-nota{font-size:13px;color:var(--muted);line-height:1.6;margin:12px 0 14px;}
  .cfg-aviso{border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.55;margin-bottom:15px;border:1px solid;}
  .cfg-aviso.falta{background:#FDECEC;border-color:#F0D5D5;color:#8A3A3A;}
  .cfg-aviso.ok{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);}
  .nube-estado{border-radius:var(--r);padding:13px 15px;font-size:13.5px;line-height:1.6;margin-top:20px;border:1px solid;}
  .nube-estado.off,.nube-estado.warn{background:#FDF6E3;border-color:#EADFC0;color:#6B5A2E;}
  .nube-estado.on{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);}
  .cod-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
  .cod-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 8px 6px 13px;font-size:13.5px;font-weight:600;color:var(--ink);}
  .cod-chip button{width:17px;height:17px;border-radius:50%;background:var(--bg);color:var(--muted);font-size:14.5px;line-height:1;display:flex;align-items:center;justify-content:center;}
  .cod-chip button:hover{background:#f0d5d5;color:#d05b5b;}
  .os-dto span:last-child{color:#1f8c4c;}
  .os-aviso{background:var(--accent-soft);border-radius:10px;padding:9px 11px;font-size:13px;color:var(--ink);margin:8px 0;line-height:1.5;}
  .admin-row-fields label small{color:var(--muted);font-weight:400;}
  .admin-add{background:var(--bg);border-radius:13px;padding:20px;}
  .admin-add h4{font-size:16px;margin-bottom:13px;}
  .admin-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:9px;}
  .admin-thumb{width:44px;height:44px;border-radius:9px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
  .admin-thumb img{width:100%;height:100%;object-fit:cover;}
  .admin-row-fields{flex:1;display:grid;grid-template-columns:1.4fr .7fr 1fr 1fr;gap:7px;}
  .admin-row-fields input,.admin-row-fields select{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;width:100%;background:var(--surface);}
  .admin-delete{font-size:13px;color:#d05b5b;white-space:nowrap;}

  .mobile-nav{position:fixed;top:0;right:0;bottom:0;width:min(270px,80vw);background:var(--surface);z-index:100;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding:24px;display:flex;flex-direction:column;gap:2px;}
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav a{padding:13px 8px;font-size:16.5px;font-weight:500;border-bottom:1px solid var(--line);}
  .mn-head{display:flex;justify-content:flex-end;margin-bottom:8px;}

  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--dark);color:#fff;padding:13px 24px;border-radius:26px;font-size:14px;z-index:120;opacity:0;transition:transform .35s,opacity .35s;max-width:90vw;text-align:center;}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

  /* ===== REVEAL ===== */
  /* La curva no es lineal ni `ease`: arranca rápido y frena despacio, que es
     como se mueven las cosas con peso. Un `ease` parejo se lee como software;
     esto se lee como que algo entró. */
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
  .reveal.visible{opacity:1;transform:none;}
  .reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;}
  .reveal-d3{transition-delay:.24s;} .reveal-d4{transition-delay:.32s;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

  /* ===== MOVIMIENTO =======================================================
     La tienda tenía los reveals al hacer scroll y nada más: todo lo demás
     estaba quieto. Lo de acá es donde más se nota y menos molesta.

     TODO se apaga con `prefers-reduced-motion` al final del bloque. No es un
     detalle de accesibilidad: para alguien con vértigo o migraña vestibular,
     una foto que se agranda sola es un síntoma.
     ======================================================================== */

  /* La entrada. Antes el hero aparecía de golpe, ya puesto — la primera
     impresión del sitio era una foto estática. Ahora el título, el texto y el
     botón entran escalonados. Es el único momento coreografiado de la página:
     un buen arranque rinde más que veinte microinteracciones sueltas. */
  @keyframes entrar{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .hero-copy h1,
  .hero-copy .lead,
  .hero-copy .hero-cta{opacity:0;animation:entrar .85s cubic-bezier(.22,.61,.36,1) forwards;}
  .hero-copy h1{animation-delay:.12s;}
  .hero-copy .lead{animation-delay:.26s;}
  .hero-copy .hero-cta{animation-delay:.40s;}

  /* La foto del producto se acerca al pasar por encima. `.product-thumb` ya
     tenía overflow:hidden, así que recorta sola: es el gesto de vidriera que
     le faltaba a la grilla. La tarjeta ya subía; ahora sube un poco más. */
  .product-thumb img,
  .cat-card img{transition:transform .55s cubic-bezier(.22,.61,.36,1);}
  .product-card:hover .product-thumb img,
  .cat-card:hover img{transform:scale(1.06);}
  .product-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s;}
  .product-card:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(30,42,43,.12);}

  /* Apretar tiene que sentirse. Sin esto, en un celular no hay ninguna señal
     entre que se toca y que el carrito reacciona. */
  .btn:active,.add-btn:active,.promo-btn:active,
  .vender-btn:active,.newsletter-bar button:active{transform:scale(.96);}

  /* El globito del carrito late cuando cambia el número. La clase la pone y la
     saca el JS: sin quitarla, la animación no vuelve a correr la vez siguiente. */
  @keyframes latir{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
  .cart-badge.late{animation:latir .42s cubic-bezier(.34,1.4,.5,1);}

  @media (prefers-reduced-motion:reduce){
    .hero-copy h1,.hero-copy .lead,.hero-copy .hero-cta{opacity:1;animation:none;}
    .product-thumb img,.cat-card img{transition:none;}
    .product-card:hover .product-thumb img,.cat-card:hover img{transform:none;}
    .btn:active,.add-btn:active,.promo-btn:active,
    .vender-btn:active,.newsletter-bar button:active{transform:none;}
    .cart-badge.late{animation:none;}
  }

  /* PANTALLAS VERTICALES (celular y tablet en vertical)
     Se elige por la FORMA de la pantalla, no por el ancho: en vertical el recorte de la
     imagen apaisada deja el pote fuera de cuadro, así que va una composición propia con
     el pote sobre la roca arriba y el texto centrado abajo. */
  @media (max-aspect-ratio:1/1){
    /* Mismo motivo que arriba: la foto vertical fija tambien asomaba entre
       diapositiva y diapositiva. El carrusel ya pinta su propia capa movil. */
    /* ⚠ EL TEXTO VA AL MEDIO, NO AL PIE (07/09/2026).
       Estaba con `align-items:flex-end`: el titulo quedaba pisando el producto
       y el boton pegado al borde de abajo. Medidas las tres fotos verticales
       por franjas, la zona con menos detalle en LAS TRES es la mitad (40-60%);
       el producto siempre esta abajo. Centrado, el texto cae sobre la parte
       tranquila de cualquiera de las tres. */
    .hero{background-image:var(--hero-img);
          background-position:center;background-size:cover;
          display:flex;align-items:center;padding:0;}
    /* ⚠ El velo acompana al texto: con el texto al medio, el degradado de
       antes (que se apagaba al 70% desde abajo) lo dejaba SIN contraste en las
       tres fotos. Medido sobre el titulo, la bajada y el boton en sus
       posiciones reales: este perfil es el mas liviano que pasa en las tres. */
    .hero::before{background:linear-gradient(to top,
          rgba(23,42,38,.66) 0%, rgba(23,42,38,.62) 35%,
          rgba(23,42,38,.54) 66%, rgba(23,42,38,0) 90%);}
    .hero-inner{padding:0 24px;}
    .hero-copy{max-width:none;text-align:center;margin:0 auto;}
    .hero .lead{margin-left:auto;margin-right:auto;max-width:360px;}
    .hero-cta{justify-content:center;margin-top:24px;}
  }

  /* Pantallas horizontales pero angostas (ventana a media pantalla, iPad apaisado):
     el navegador recorta los costados, así que corremos el encuadre para que la roca
     con el pote quede siempre dentro de cuadro. */
  /* ⚠ ESTA REGLA HABIA QUEDADO HUERFANA (07/09/2026).
     Corregia el encuadre de `.hero`, que era una foto fija. Cuando el fondo de
     `.hero` paso a ser un degradado y las fotos se mudaron al carrusel, siguio
     escrita pero ya no movia ninguna imagen: el encuadre quedo sin nadie que
     lo controlara y por eso "dependiendo de la computadora se ve cortada".
     Ahora apunta a la capa que de verdad lleva la foto. */
  /* ⚠ ACA HABIA UNA CORRECCION DE ENCUADRE POR PROPORCION DE PANTALLA, y se
     saco el 07/09/2026. Primero apuntaba a `.hero` y quedo huerfana cuando la
     foto se mudo al carrusel; despues la apunte a `.hero-capa-esc` con un valor
     unico, y ahi se vio el problema de fondo: un solo valor no puede servir a
     fotos con composiciones distintas (bajarlo salvo la base del shampoo y
     corto la tapa de la Lanocream).
     Ahora el punto lo trae cada foto desde el panel, y una regla como esta lo
     pisaria. Si alguna vez hace falta ajustar por proporcion, tiene que ser
     RELATIVO al punto de la foto, no un valor fijo. */

  /* Anchos intermedios en horizontal: el texto se achica para no montarse sobre el pote */
  @media (min-aspect-ratio:1/1) and (max-width:1250px){
    .hero-copy{max-width:400px;}
    .hero h1{font-size:40.5px;}
    .hero .lead{font-size:16px;max-width:340px;}
  }
  @media (min-aspect-ratio:1/1) and (max-width:1050px){
    .hero-copy{max-width:330px;}
    .hero h1{font-size:34px;}
    .hero .lead{font-size:14.5px;max-width:300px;}
  }

  /* ===== RESPONSIVE ===== */
  /* Arranca en 1150 y no en 1000: con SIETE enlaces, entre 1000 y 1150 el menu
     quedaba 4 px corto y recortaba el primero y el ultimo. `nav` tiene
     `min-width:0`, asi que no desborda a la vista — recorta en silencio. */
  @media (max-width:1150px){
    /* El menú sigue arriba, en la misma fila: se achican tipografía y separación */
    .header-inner{padding:12px 18px;gap:14px;}
    .logo img{height:36px;}
    nav{gap:1px;padding:4px;}
    nav a{font-size:13.5px;padding:7px 11px;}
    .header-actions{gap:15px;}
    .hero h1{font-size:43px;}
    .hero{min-height:calc(100vh - 104px);min-height:calc(100svh - 104px);}
    .sec-head h2,.promos h2,.about h2,.testimonials h2{font-size:30.5px;}
    .promo-grid{grid-template-columns:repeat(2,1fr);}
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .cats-all{grid-template-columns:repeat(2,1fr);}
    .cfg-grid{grid-template-columns:1fr;}
    .pv-grid{grid-template-columns:1fr;gap:30px;}
    .view-title{font-size:31.5px;}
    .pv-title{font-size:28px;}
    .product-grid{grid-template-columns:repeat(2,1fr);}
    .benefits-inner{grid-template-columns:1fr;gap:14px;}
    .benefit{justify-content:flex-start;}
    .promo-hero{grid-template-columns:1fr;gap:24px;padding:26px;}
    .promo-hero-img{height:210px;order:-1;}
    .about-inner{grid-template-columns:1fr;gap:34px;}
    .t-grid{grid-template-columns:1fr;}
    .footer-top{grid-template-columns:1fr 1fr;}
    .wrap,.header-inner,.hero-inner,.topbar-inner,.benefits-inner{padding-left:20px;padding-right:20px;}
    .admin-row-fields{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:640px){
    .topbar-inner{gap:18px;font-size:13px;}
    /* Se saco `.topbar i:nth-child(n+3){display:none}`: escondia todo lo que
       viniera despues del segundo dato. Servia cuando habia cuatro cosas
       apretadas; ahora hay dos y lo unico que haria es hacer desaparecer en
       silencio cualquier dato que se agregue mas adelante. */
    /* Barra de celular: logo a la izquierda, íconos + menú a la derecha */
    .header-inner{padding:12px 16px;gap:12px;justify-content:space-between;}
    .logo{flex:0 0 auto;}
    .logo img{height:34px;}
    nav{display:none;}                 /* los links pasan al menú lateral */
    .menu-toggle{display:flex;}
    .header-actions{flex:0 0 auto;margin-left:auto;gap:17px;}
    .hero{padding:0;min-height:calc(100vh - 96px);min-height:calc(100svh - 96px);}
    .hero h1{font-size:34px;line-height:1.22;}
    .hero .lead{font-size:14.5px;margin-top:13px;}
    .hero .btn{padding:11px 18px;font-size:14px;}
    .hero .btn-ghost{padding:11px 2px;}
    .hero-feats{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:26px;}
    .hero-feat .ic{width:32px;height:32px;}
    .hero-feat span{font-size:10px;}
    .cats,.collection,.about,.testimonials,.news-sec{padding-top:52px;padding-bottom:52px;}
    .sec-head{flex-direction:column;align-items:flex-start;gap:10px;}
    .cat-img{height:120px;}
    .product-grid{grid-template-columns:1fr 1fr;gap:14px;}
    .product-thumb{height:150px;}
    .product-info{padding:12px;}
    .product-info h3{font-size:15.5px;}
    .product-info p{display:none;}
    .price{font-size:17px;}
    .about-media{padding:20px;}
    .about-marca{min-height:340px;gap:20px;padding:30px 20px;}
    .about-imagen{height:340px;}
    .about-marca-logo{width:124px;}
    .promo-grid{grid-template-columns:1fr;}
    .promo-hero h3{font-size:26px;}
    .promo-ahora{font-size:28px;}
    .newsletter-bar{flex-direction:column;padding:14px;gap:9px;border-radius:20px;}
    .newsletter-bar .mail-icon{display:none;}
    .newsletter-bar input{width:100%;text-align:center;}
    .newsletter-bar button{width:100%;}
    .footer-top{grid-template-columns:1fr;gap:26px;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
    .footer-bottom a{margin-left:0;margin-right:16px;}
    .search-panel{padding:20px;}
    .search-panel input{font-size:18px;}
    .cart-panel{width:100vw;}
    .modal{padding:28px 22px;}
  }

  /* ======================================================================
     RESPONSIVE — AJUSTES PARA TODO TIPO DE DISPOSITIVO
     Este bloque va último a propósito: corrige lo que faltaba sin tocar
     el diseño original. Cubre celulares chicos, plegables, tablets,
     celular acostado (horizontal) y iPhone con notch.
     ====================================================================== */

  /* --- Red de seguridad: que NUNCA se pueda scrollear para el costado ---
     OJO: acá NO se puede usar overflow-x:hidden. Según el estándar CSS, si un eje
     queda en "hidden" el otro pasa a "auto", html/body se vuelven contenedores de
     scroll y eso ANULA el position:sticky del header (la barra deja de quedar fija).
     "clip" recorta igual pero no crea contenedor de scroll, así que el sticky sigue
     funcionando. Se aplica solo si el navegador lo soporta. */
  html,body{max-width:100%;}
  @supports (overflow:clip){
    body{overflow-x:clip;}
  }
  /* Textos largos (mails, links, códigos) cortan en vez de desbordar */
  body{overflow-wrap:break-word;}

  /* --- Zona táctil mínima: los íconos del header eran de 21px ---
     En un dedo eso es muy difícil de acertar. Se agrandan sin mover el diseño
     (el ícono sigue viéndose igual, crece solo el área clickeable). */
  @media (pointer:coarse){
    .icon-btn{min-width:44px;min-height:44px;}
    .qty-row button{width:32px;height:32px;font-size:17px;}
    .modal-close{width:36px;height:36px;}
    .mobile-nav a{padding:15px 8px;}

    /* Enlaces del pie: medían 20px de alto y son 10 seguidos. El mínimo
       accesible es 24px (WCAG 2.2). Se agrandan con relleno y se compensa
       achicando el margen, para que el pie no crezca de más. */
    .footer-col a{padding:5px 0;margin-bottom:4px;}
    .footer-bottom div a{display:inline-block;padding:6px 4px;}

    /* "Ver todos" queda justo en 24px, pero lleva un subrayado que es parte
       del diseño: con relleno, el subrayado se despega del texto.
       Se agranda solo la zona sensible con una capa invisible. A la vista NO
       cambia nada.

       ⚠ La capa crece SOLO HACIA ARRIBA, y es a propósito. La primera versión
       también crecía 10px hacia abajo, pero ahí abajo empieza la grilla de
       productos: se probó y la grilla se pinta por encima, así que esos 10px
       no servían de nada. Forzarlos con z-index era peor — la capa invisible
       le robaría el toque al borde de arriba de las tarjetas.
       Arriba, en cambio, es aire: 16 + 24 = 40px de zona real. */
    .sec-link{position:relative;}
    .sec-link::after{content:"";position:absolute;left:0;right:0;top:-16px;bottom:0;}

    /* Quitar del carrito: 17px era imposible de acertar. No se agranda más
       porque borra un producto y no conviene tocarlo sin querer. */
    .cart-item-remove,[data-a="quitar-item"]{min-height:32px;padding:7px 9px;}
  }

  /* --- iOS: evitar el zoom automático al tocar un campo ---
     Safari en iPhone hace zoom solo cuando un input tiene letra < 16px,
     y después no vuelve atrás. Con 16px el problema desaparece. */
  @media (max-width:900px){
    .field input,.field select,.admin-select,
    .cfg-grid input,.codigo-row input,.newsletter-bar input,
    .admin-row-fields input,.admin-row-fields select,
    input[type="text"],input[type="email"],input[type="password"],
    input[type="number"],input[type="tel"],textarea,select{font-size:18px;}
  }

  /* --- TABLET (641px a 1000px): aprovechar mejor el ancho --- */
  @media (min-width:720px) and (max-width:1000px){
    .product-grid{grid-template-columns:repeat(3,1fr);}
    .cat-grid,.cats-all{grid-template-columns:repeat(3,1fr);}
    .footer-top{grid-template-columns:repeat(2,1fr);}
  }

  /* --- CELULAR CHICO (hasta 400px): iPhone SE, Androids de entrada --- */
  @media (max-width:400px){
    .header-inner{padding:10px 13px;gap:8px;}
    .logo img{height:30px;}
    .header-actions{gap:11px;}
    .wrap,.hero-inner,.benefits-inner{padding-left:15px;padding-right:15px;}
    .hero h1{font-size:29.5px;}
    .hero .lead{font-size:14px;}
    /* Cuatro beneficios en fila no entran: pasan a dos y dos */
    .hero-feats{grid-template-columns:repeat(2,1fr);gap:11px;max-width:270px;margin-left:auto;margin-right:auto;}
    .hero-feat span{font-size:12px;}
    .sec-head h2,.promos h2,.about h2,.testimonials h2{font-size:26px;}
    .product-grid{grid-template-columns:repeat(2,1fr);gap:11px;}
    .product-thumb{height:128px;}
    .product-info{padding:10px;}
    .product-info h3{font-size:14px;}
    .price{font-size:16px;}
    .cat-img{height:104px;}
    .modal{padding:24px 17px;width:94vw;}
    .modal h3{font-size:21.5px;}
    /* Los pasos del checkout se acomodan en varias filas si no entran */
    .checkout-steps{flex-wrap:wrap;gap:6px;}
    .admin-nums{flex-wrap:wrap;}
    .topbar-inner{gap:14px;font-size:12.5px;}
  }

  /* --- MUY CHICO (hasta 340px): Galaxy Fold cerrado y similares --- */
  @media (max-width:340px){
    .product-grid{grid-template-columns:1fr;}
    .product-thumb{height:165px;}
    .hero h1{font-size:26px;}
    .cat-grid,.cats-all{grid-template-columns:1fr;}
  }

  /* --- PANEL DE ADMINISTRACIÓN EN CELULAR ---
     La fila de producto era pensada para pantalla ancha. En el celular
     se apila para que Claudia pueda editar cómodamente desde el teléfono. */
  @media (max-width:640px){
    .admin-row{flex-wrap:wrap;align-items:flex-start;}
    .admin-row-fields{grid-template-columns:1fr;gap:9px;width:100%;flex-basis:100%;}
    .admin-delete{margin-left:auto;padding:8px 0;}
    .admin-res-grid{gap:14px;}
    .admin-add{padding:15px;}
    /* Pie de página: al pasar a columna, el texto y los links legales no se
       encogían y se salían de la pantalla en celulares angostos. */
    .footer-bottom>*{max-width:100%;}
    .footer-bottom div{display:flex;flex-wrap:wrap;row-gap:6px;}
    .footer-bottom a{margin-right:14px;}
  }

  /* --- CELULAR ACOSTADO (horizontal, poca altura) ---
     Las ventanas emergentes no deben pasarse de la pantalla. */
  @media (max-height:520px) and (orientation:landscape){
    .modal{max-height:94vh;padding:20px 22px;}
    .modal h3{font-size:20.5px;}
    .modal .sub{margin-bottom:13px;}
    .search-panel{padding:16px 24px;}
    .mobile-nav{overflow-y:auto;}
    .cart-items{padding:13px 18px;}
  }

  /* --- iPhone con notch / barra de gestos ---
     Respetar las zonas seguras para que nada quede tapado, sobre todo
     cuando el teléfono se usa acostado. */
  @supports (padding:max(0px)){
    @media (max-width:640px){
      .header-inner,.topbar-inner,.wrap,.hero-inner,.benefits-inner{
        padding-left:max(16px,env(safe-area-inset-left));
        padding-right:max(16px,env(safe-area-inset-right));
      }
      .mobile-nav,.cart-panel{padding-bottom:max(18px,env(safe-area-inset-bottom));}
      footer{padding-bottom:max(20px,env(safe-area-inset-bottom));}
    }
  }

  /* ─── Carrusel de la portada ──────────────────────────────────────────────
     Las capas van DETRÁS del texto (.hero-inner tiene z-index:2) y se cruzan
     con un fundido. No se usa `background-image` sobre .hero porque con una
     sola capa no se puede hacer la transición: hay que tener las dos fotos
     presentes a la vez.

     ⚠ La foto fija del CSS sigue puesta en .hero. Es la red de seguridad: si
     Claudia borra todas, o si falla la consulta, la portada se ve igual. */
  .hero-slides{position:absolute;inset:0;z-index:0;pointer-events:none;}
  .hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
              opacity:0;transition:opacity 1.2s ease-in-out;}
  /* La que entra sube POR ENCIMA de la que sale. */
  .hero-slide.visible{opacity:1;z-index:2;}

  /* ⚠ LA QUE SALE SE QUEDA OPACA POR DEBAJO (07/09/2026).
     Antes las dos se cruzaban a media opacidad: durante 1,2 s se veian las dos
     fotos mezcladas Y ademas asomaba el fondo del hero por atras — tres
     imagenes superpuestas. Ahora la nueva se funde sobre la vieja, que recien
     se apaga cuando la de arriba ya tapa todo. Nunca hay dos transparencias.
     El JS le saca esta clase al terminar; el tiempo tiene que ser >= 1,2 s. */
  .hero-slide.saliendo{opacity:1;z-index:1;transition:none;}

  /* Con una sola foto no hay nada que cruzar: se muestra y listo. */
  .hero-slides[data-una="1"] .hero-slide{transition:none;opacity:1;}

  /* Puntitos para saltar de foto. Solo aparecen si hay más de una. */
  .hero-dots{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;
             justify-content:center;gap:9px;}
  .hero-dots:empty{display:none;}
  .hero-dot{width:9px;height:9px;border-radius:50%;border:none;padding:0;cursor:pointer;
            background:rgba(255,255,255,.45);transition:background .25s,transform .25s;}
  .hero-dot.is-active{background:#fff;transform:scale(1.25);}
  /* La zona que se toca es de 44px aunque el punto se vea de 9: en un dedo,
     9 px es imposible de acertar. */
  @media (pointer:coarse){
    .hero-dots{gap:4px;}
    .hero-dot{width:44px;height:44px;background:transparent;position:relative;}
    .hero-dot::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
                     margin:-4.5px 0 0 -4.5px;border-radius:50%;background:rgba(255,255,255,.45);
                     transition:background .25s;}
    .hero-dot.is-active::after{background:#fff;}
    /* ⚠ El fondo TAMBIEN hay que apagarlo acá. Arriba `.hero-dot.is-active`
       lo pinta de blanco, y esa regla (dos clases) le gana a `.hero-dot`
       (una clase) de este bloque: el punto activo salia como un circulo
       blanco de 55 px tapando el boton de la portada. */
    .hero-dot.is-active{transform:none;background:transparent;}
  }

  /* Quien pidió menos animaciones en su sistema no ve el fundido ni el paso
     automático (eso lo corta el JS): se queda con la primera foto. */
  @media (prefers-reduced-motion:reduce){
    .hero-slide{transition:none;}
  }

  /* ─── Flechas del carrusel ────────────────────────────────────────────────
     Los puntitos solos no alcanzan: en la primera prueba pasaron inadvertidos
     y parecía que las fotos solo cambiaban solas. La flecha es el gesto que
     todo el mundo reconoce. */
  .hero-flechas{position:absolute;inset:0;z-index:3;pointer-events:none;
                display:flex;align-items:center;justify-content:space-between;
                padding:0 14px;}
  .hero-flecha{pointer-events:auto;width:46px;height:46px;border-radius:50%;border:none;
               display:flex;align-items:center;justify-content:center;cursor:pointer;
               background:rgba(255,255,255,.22);color:#fff;
               -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
               box-shadow:0 2px 14px rgba(10,18,12,.22);
               transition:background .2s,transform .2s;}
  .hero-flecha svg{width:22px;height:22px;}
  .hero-flecha:hover{background:rgba(255,255,255,.38);}
  .hero-flecha:active{transform:scale(.94);}
  .hero-flecha:focus-visible{outline:3px solid #fff;outline-offset:3px;}

  /* En el celular se achican y se pegan más al borde: en 375 px de ancho, dos
     círculos de 46 px comen buena parte del título. */
  @media (max-width:640px){
    .hero-flechas{padding:0 6px;}
    .hero-flecha{width:40px;height:40px;background:rgba(255,255,255,.18);}
    .hero-flecha svg{width:19px;height:19px;}
  }

  /* Las dos versiones de cada foto: el CSS elige, no el JavaScript.
     Ver el comentario largo en montarCarruselHero() de js/app.js — la versión
     que elegía por JS fallaba al agrandar la ventana. */
  /* ⚠ EL PUNTO QUE NUNCA SE RECORTA.

     `cover` SIEMPRE recorta: llena el cuadro y tira lo que sobra. No hay forma
     de evitarlo sin dejar franjas vacias. Lo unico que se elige es QUE se tira,
     y eso lo decide `background-position`.

     Medido sobre las tres fotos cargadas: el producto esta siempre a la derecha
     (x 65-76%) y en la mitad de abajo (y 53-72%). Con `center` se recortaba por
     igual arriba y abajo, y en pantallas anchas y bajas —una notebook comun—
     se comia la base del envase. Corrido a 70% 62% lo que se sacrifica es el
     cielo y la pared de arriba a la izquierda, que es la parte vacia de las
     tres fotos y ademas donde va el texto.

     ⚠ Si Claudia sube una foto con el producto a la IZQUIERDA, esto la
     recorta mal. Ahi hay que darle un control de encuadre por foto en el
     panel; hoy es un valor unico para todas. */
  /* El `background-position` de aca es solo el respaldo: lo pisa el JS con el
     punto que trae CADA foto (ver montarCarruselHero). Queda en `center`, que
     es lo razonable si una foto no tiene punto marcado. */
  /* ⚠ `no-repeat` NO es opcional. Con `cover` la foto tapa todo y no se nota,
     pero en pantalla ancha pasa a `contain` y lo que no cubre se RELLENA
     repitiendo la imagen: se veia medio envase asomando a la izquierda. */
  .hero-capa{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
             background-position:var(--foco,center);}
  .hero-capa-mov{display:none;}

  /* ══ QUE LA FOTO NO SE CORTE NUNCA EN PANTALLA ANCHA ═══════════════════

     El problema no era el encuadre, era GEOMETRIA. Las fotos son 1,43 de
     proporcion y el hero, en una notebook, llega a 2,4: con `cover` solo se ve
     el 59% del alto de la foto, y el envase ocupa el 83%. No entra ni
     moviendo el punto — se probo, y salvar la base cortaba la tapa.

     Aca la foto pasa a `contain` pegada a la derecha: conserva su proporcion
     entera, asi que NO SE RECORTA NADA. Lo que queda a la izquierda es el
     degradado de la marca, que es justo donde va el texto — la composicion
     que ya tenia la portada, ahora respetada de verdad.

     ⚠ Solo de 1,6 para arriba. Por debajo de eso la foto y el cuadro se
     parecen lo suficiente como para que `cover` recorte poco, y `contain`
     dejaria franjas visibles arriba y abajo, que se ve peor. En vertical
     (celular) no aplica nunca: esas fotos estan hechas para llenar. */
  @media (min-aspect-ratio:16/10){
    /* La capa deja de ocupar todo el ancho y toma LA PROPORCION DE LA FOTO,
       pegada a la derecha y a todo el alto. Adentro sigue con `cover`, pero
       como el cuadro y la foto tienen la misma proporcion, no recorta nada.
       `--ratio` lo pone el JS midiendo cada foto; 1.43 es el respaldo por si
       todavia no la midio.

       El borde izquierdo se desvanece: sin eso queda un tajo recto entre la
       foto y el degradado, que se lee como un error de carga. */
    .hero-capa-esc{
      left:auto; right:0; width:auto; height:100%;
      aspect-ratio:var(--ratio,1.43);
      background-size:cover;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);
              mask-image:linear-gradient(90deg,transparent 0,#000 16%);
    }
  }
  @media (max-width:640px){
    .hero-capa-esc{display:none;}
    .hero-capa-mov{display:block;}
  }

  /* ═════════════════════════════════════════════════════════════════════════
     BURBUJA DE WHATSAPP + FOTO DE CLAUDIA
     ═════════════════════════════════════════════════════════════════════════ */

  /* El botón queda VERDE WHATSAPP y no en la paleta de la marca. No es un
     descuido: ese verde es lo que hace que se reconozca de reojo, sin leer
     nada. Pintarlo del turquesa de Saint Germain lo volvería un botón lindo
     que nadie sabe para qué es. El panel que abre sí es de la marca. */
  .wa-fab{position:fixed;right:clamp(26px,5vw,48px);bottom:clamp(30px,6vw,56px);
    z-index:95;width:60px;height:60px;border:0;border-radius:50%;padding:0;
    background:#25D366;color:#fff;display:grid;place-items:center;cursor:pointer;
    box-shadow:0 10px 26px -6px rgba(37,211,102,.5),0 4px 12px rgba(30,42,43,.2);
    -webkit-tap-highlight-color:transparent;
    transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;}
  .wa-fab[hidden]{display:none;}
  .wa-fab svg{width:31px;height:31px;display:block;}
  @media (hover:hover) and (pointer:fine){
    .wa-fab:hover{transform:translateY(-3px) scale(1.05);
      box-shadow:0 16px 34px -8px rgba(37,211,102,.6),0 6px 16px rgba(30,42,43,.24);}
  }
  .wa-fab:active{transform:scale(.96);}
  .wa-fab:focus-visible{outline:3px solid #86D2D0;outline-offset:3px;}

  /* Halo que respira: señal de "hay alguien". Lento a propósito — una animación
     rápida en una esquina fija cansa en dos minutos. */
  .wa-fab::after{content:'';position:absolute;inset:0;border-radius:50%;
    border:2px solid #25D366;animation:waHalo 3.4s ease-out infinite;}
  @keyframes waHalo{
    0%{transform:scale(1);opacity:.55;}
    70%{transform:scale(1.5);opacity:0;}
    100%{transform:scale(1.5);opacity:0;}
  }
  /* El puntito del mensaje sin leer. Desaparece la primera vez que se abre y no
     vuelve: insistir con un aviso ya leído es lo que hace que se ignore. */
  .wa-fab__punto{position:absolute;top:2px;right:2px;width:14px;height:14px;
    border-radius:50%;background:#E5484D;border:2.5px solid var(--bg);}
  .wa-fab.leido .wa-fab__punto{display:none;}
  @media (prefers-reduced-motion:reduce){
    .wa-fab::after{animation:none;}
    .wa-fab{transition:none;}
  }

  /* ── El panel ───────────────────────────────────────────────────────── */
  .wa-panel{position:fixed;right:clamp(26px,5vw,48px);bottom:calc(clamp(30px,6vw,56px) + 74px);
    z-index:96;width:min(330px,calc(100vw - 36px));background:var(--surface);
    border-radius:var(--r-lg);overflow:hidden;
    box-shadow:0 24px 60px -12px rgba(30,42,43,.28),0 8px 20px rgba(30,42,43,.12);
    opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom right;
    transition:opacity .24s ease,transform .24s cubic-bezier(.4,0,.2,1);}
  .wa-panel[hidden]{display:none;}
  .wa-panel.abierto{opacity:1;transform:translateY(0) scale(1);}

  .wa-panel__head{display:flex;align-items:center;gap:11px;padding:14px 16px;
    background:var(--dark);color:#fff;}
  /* El avatar del panel de WhatsApp.

     Antes era <img src="/img/sitio/logo.webp"> con object-fit:cover. El logo es
     apaisado (425x287) y `cover` lo recorta a cuadrado: se perdia el 32 % del
     ancho y en el circulo de 42 px quedaba "NT GERMA" — un pedazo del medio de
     la palabra, ilegible. Con `contain` entraba entero, pero a 42 px la serif
     fina queda en una mancha gris que tampoco se lee.

     Un avatar de 42 px tiene que ser una MARCA, no un logotipo con texto: el
     nombre "Saint Germain" ya esta escrito al lado, en 16,5 px. Va el monograma.

     El aqua es el EXACTO del logo (#82D6D7 muestreado del archivo), no el
     --accent del sitio, que es parecido pero no es el mismo. */
  .wa-panel__avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;
    display:grid;place-items:center;
    background:linear-gradient(145deg,#93DEDF,#6BC4C5);
    color:#fff;font-size:15.5px;font-weight:600;letter-spacing:.05em;
    /* El aro por dentro despega el circulo del fondo oscuro de la cabecera sin
       agrandarlo: un border sumaria 2 px al ancho y descuadraria la fila. */
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
    user-select:none;}
  .wa-panel__who{flex:1;min-width:0;}
  .wa-panel__name{margin:0;font-size:16.5px;font-weight:600;}
  .wa-panel__status{margin:1px 0 0;font-size:13px;color:rgba(255,255,255,.66);
    display:flex;align-items:center;gap:5px;}
  .wa-panel__status i{width:7px;height:7px;border-radius:50%;background:#25D366;
    display:inline-block;flex-shrink:0;}
  .wa-panel__close{background:transparent;border:0;color:rgba(255,255,255,.7);
    font-size:25px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit;}
  .wa-panel__close:hover{color:#fff;}

  .wa-panel__body{padding:16px;}
  /* Globo de mensaje: la esquina en punta del lado de quien escribe es lo que
     lo hace leer como un chat y no como un cartel de publicidad. */
  .wa-msg{background:var(--accent-soft);border-radius:14px 14px 14px 4px;
    padding:13px 15px;font-size:15.5px;line-height:1.6;color:var(--ink);}
  .wa-msg p{margin:0 0 9px;}
  .wa-msg p:last-child{margin-bottom:0;}

  .wa-panel__cta{display:flex;align-items:center;justify-content:center;gap:9px;
    margin-top:13px;background:#25D366;color:#fff;text-decoration:none;
    border-radius:26px;padding:13px 18px;font-size:16px;font-weight:600;
    transition:background .18s;}
  .wa-panel__cta:hover{background:#1EBE5D;}
  .wa-panel__cta svg{width:19px;height:19px;flex-shrink:0;}
  .wa-panel__pie{margin:10px 0 0;font-size:13px;color:var(--muted);
    text-align:center;line-height:1.5;}

  @media (max-width:520px){
    .wa-fab{width:54px;height:54px;}
    .wa-fab svg{width:28px;height:28px;}
    .wa-panel{left:18px;right:18px;width:auto;}
  }

  /* ── Claudia en el pie, junto al contacto ───────────────────────────── */
  .foot-claudia{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
  .foot-claudia img{width:52px;height:52px;border-radius:50%;object-fit:cover;
    flex-shrink:0;border:2px solid rgba(255,255,255,.14);}
  .foot-claudia b{display:block;font-size:16px;font-weight:600;}
  .foot-claudia span{display:block;font-size:13px;opacity:.6;margin-top:1px;}

  /* La firma que cierra "Quiénes somos" */
  .about-firma{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
    font-size:16px;line-height:1.65;}

  /* ── "Leer más" de Quiénes somos ───────────────────────────────────────── */
  .about-mas{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
    padding:9px 18px 9px 20px;border:1px solid var(--line);border-radius:24px;
    background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;
    font-weight:500;cursor:pointer;transition:border-color .2s,background .2s;}
  .about-mas:hover{border-color:var(--accent);background:var(--accent-soft);}
  .about-mas:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .about-mas svg{width:16px;height:16px;transition:transform .22s ease;}
  .about-mas.abierto svg{transform:rotate(180deg);}

  /* ── Claudia en la página de Contacto ──────────────────────────────────── */
  .contacto-claudia{display:flex;align-items:center;gap:15px;margin-bottom:22px;
    padding:14px 16px;background:var(--accent-soft);border-radius:var(--r);}
  .contacto-claudia img{width:72px;height:72px;border-radius:50%;object-fit:cover;
    flex-shrink:0;}
  .contacto-claudia b{display:block;font-size:17px;font-weight:600;color:var(--ink);}
  .contacto-claudia span{display:block;font-size:13.5px;color:var(--muted);
    margin-top:2px;line-height:1.45;}

  @media (max-width:520px){
    .contacto-claudia{gap:12px;padding:12px 13px;}
    .contacto-claudia img{width:58px;height:58px;}
  }

/* ═══ Ofertas: una por vez ═════════════════════════════════════════════════
   Antes salía la primera grande y las demás en tarjetas chicas abajo. La
   segunda oferta quedaba perdida — misma semana, mismo trabajo de Claudia, y
   la mitad de la atención. Ahora todas se ven igual y se pasan con las flechas.
   ═══════════════════════════════════════════════════════════════════════════ */
.promo-carrusel { position: relative; overflow: hidden; }
.promo-pista {
  display: flex;
  transition: transform .38s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.promo-slide {
  flex: 0 0 100%;
  display: grid; grid-template-columns: minmax(0,42%) minmax(0,1fr);
  gap: 26px; align-items: center;
}
@media (max-width: 760px) {
  .promo-slide { grid-template-columns: 1fr; gap: 16px; }
}

.promo-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92); color: #2a2320;
  font-size: 21px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.09);
  transition: background .15s, transform .15s;
  z-index: 2;
}
.promo-flecha:hover { background: #fff; }
.promo-flecha:active { transform: translateY(-50%) scale(.94); }
.promo-flecha--izq { left: 10px; }
.promo-flecha--der { right: 10px; }

.promo-puntos {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 7px; z-index: 2;
}
.promo-punto {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.2); cursor: pointer; transition: background .15s, width .15s;
}
/* El punto activo se alarga además de oscurecerse: en pantallas chicas la
   diferencia de color sola no se distingue. */
.promo-punto.on { background: #2a2320; width: 18px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .promo-pista { transition: none; }
  .promo-flecha:active { transform: translateY(-50%); }
}

/* El contenedor #promoHero ya traía `.promo-hero`, que es una grilla de dos
   columnas (foto | texto) del diseño anterior. Al convertirlo en carrusel esa
   grilla seguía mandando: la pista quedaba como una celda y entraban DOS
   ofertas a la vez. Acá se le saca la grilla — el reparto en dos columnas pasa
   a ser de cada diapositiva, que es donde corresponde ahora. */
.promo-hero.promo-carrusel {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.promo-carrusel .promo-pista { width: 100%; }
.promo-carrusel .promo-slide {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 26px 58px;   /* aire para que las flechas no pisen el contenido */
}
@media (max-width: 760px) {
  /* Sin padding en el contenedor. `overflow:hidden` recorta en el borde de
     relleno, no en el del contenido: con 26 px de padding, la oferta siguiente
     se asomaba por ese margen. Cada diapositiva ya trae el suyo. */
  .promo-hero.promo-carrusel { padding: 0; }
  .promo-carrusel .promo-slide { padding: 20px 16px 34px; }
  .promo-flecha { width: 34px; height: 34px; font-size: 18px; }
  .promo-flecha--izq { left: 4px; }
  .promo-flecha--der { right: 4px; }
}

/* ═══ En la computadora: menú y logo más grandes ═══════════════════════════
   El encabezado estaba dimensionado para que entrara en un teléfono y esa
   misma medida se usaba en un monitor de 24 pulgadas, donde queda chico y
   pierde presencia. Acá se agranda SOLO de 1025 px para arriba: el celular
   no se toca, que es donde el espacio de verdad falta.

   ⚠ Va al final del archivo a propósito. Las reglas de arriba (línea 626 y
   siguientes) son medias consultas para pantallas chicas; si esto se pusiera
   antes, aquellas le ganarían por orden.

   ⚠ El relleno de `nav` NO se toca: la píldora que se desliza está calculada
   con `top:5px` y `height:calc(100% - 10px)`. Cambiarlo la deja descentrada.
   El ancho de la píldora sí se adapta solo — lo mide el JS sobre cada enlace.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1360px) {
  /* ⚠ EL ENCABEZADO SE ENSANCHA A 1360 (07/09/2026).
     Esta misma regla agranda la letra del menu (14→16 px), su relleno
     (12→18) y el logo (42→58 px de alto), pero `.header-inner` seguia
     topeando en 1200 como el resto de la pagina. Resultado: los siete enlaces
     ocupaban 882 px en un hueco de 884 — DOS pixeles de holgura. En cualquier
     maquina que dibujara la tipografia un poquito mas ancha, "Inicio" y
     "Capacitacion" quedaban cortados por la mitad. Y cortaba EN SILENCIO,
     porque `nav` tiene `min-width:0` y `overflow-x:auto`.
     Con 1360 el menu pasa a tener ~150 px de sobra. El cuerpo de la pagina
     sigue en 1200: el encabezado es una barra, no texto de lectura. */
  .header-inner { padding: 18px 30px; gap: 26px; }
  /* La barra de arriba acompaña: si el encabezado crece y ésta queda igual,
     el teléfono pasa a leerse como una nota al pie. */
  /* Quedaron solo dos datos (el telefono y el horario), asi que tienen lugar
     de sobra. Se agrandan: son lo primero que busca quien entra a una tienda
     que no conoce, y en letra chica pasaban por decoracion. */
  .topbar-inner { padding: 15px 30px; font-size: 16.5px; gap: 60px; }
  .topbar svg { width: 18px; height: 18px; }
  .topbar-tel { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL ENCABEZADO GRANDE  (movido de 1360 a 1500 el 07/09/2026)

   ⚠ POR QUE SE MOVIO EL CORTE. Esta regla agranda el logo (42→58 px de alto)
   y la letra del menu (14→16 px, relleno 12→18). Arrancaba en 1360 px, pero
   `.header-inner` topaba en 1200 como el resto de la pagina: justo donde la
   regla empezaba a pedir mas lugar, no habia mas lugar. Medido, hacian falta
   1366 px y habia 1260 — el menu quedaba con DOS pixeles de holgura y en
   cualquier maquina que dibujara la tipografia un pelo mas ancha "Inicio" y
   "Capacitacion" se cortaban por la mitad. Y cortaba EN SILENCIO, porque
   `nav` tiene `min-width:0` y `overflow-x:auto`.

   ⚠ ENSANCHAR SOLO EL ENCABEZADO NO ALCANZA, y es la trampa: `.logo` y
   `.header-actions` tienen `flex-grow:1` y `nav` tiene `flex-grow:0`, asi que
   TODO el espacio que se agregue se lo reparten los costados y el menu se
   queda igual. Por eso los costados pasan a `flex-grow:0`: el sobrante queda
   en el medio, que es donde hace falta.

   El cuerpo de la pagina sigue en 1200: el encabezado es una barra, no texto
   de lectura.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1500px) {
  .header-inner { max-width: 1440px; }
  .logo img { height: 58px; }
  nav a { font-size: 16px; padding: 10px 18px; }
  nav { gap: 6px; }
  /* Que el sobrante vaya al menu y no a los costados. `margin:auto` en el
     menu lo mantiene centrado sin necesidad de que los lados crezcan. */
  .logo, .header-actions { flex: 0 0 auto; }
  header nav { margin-inline: auto; }
}

  /* ===== INVITACION A INICIAR SESION ====================================
     Un globito colgado del icono de cuenta, no una franja a todo el ancho: la
     franja avisa que hay algo pero no dice DONDE ir. Colgado del icono, el
     cartel y el destino son lo mismo.

     Mismo lenguaje visual que el menu de la cuenta que sale justo ahi
     (`.acct-menu`): fondo blanco, radio 14, la misma sombra. Si tuviera su
     propio estilo se leeria como algo pegado de otro sitio.
     ======================================================================== */
  .globo-sesion{position:absolute;top:calc(100% + 16px);right:0;z-index:71;
    width:246px;background:var(--surface);border:1px solid var(--line);
    border-radius:14px;padding:16px 17px 14px;text-align:center;
    box-shadow:0 18px 44px rgba(30,42,43,.15);}
  /* La flechita que apunta al icono. Dos triangulos superpuestos —uno del color
     del borde y otro del fondo— para que el borde se vea tambien en la punta. */
  .globo-sesion::before,.globo-sesion::after{content:'';position:absolute;
    bottom:100%;right:16px;border:7px solid transparent;}
  .globo-sesion::before{border-bottom-color:var(--line);}
  .globo-sesion::after{border-bottom-color:var(--surface);margin-bottom:-1px;}
  .globo-sesion b{display:block;font-size:16px;color:var(--ink);margin-bottom:5px;}
  .globo-sesion p{font-size:12.8px;line-height:1.5;color:var(--muted);margin:0 0 13px;}
  .globo-sesion-ok{width:100%;background:var(--accent);color:var(--ink);
    padding:9px 14px;border-radius:22px;font-size:13.5px;font-weight:600;
    transition:background .2s;}
  .globo-sesion-ok:hover{background:#6FC6C4;}
  /* En un telefono el icono esta pegado al borde: sin esto el globito se sale
     de la pantalla por la derecha. */
  @media (max-width:420px){
    .globo-sesion{width:min(246px,calc(100vw - 28px));right:-46px;}
    .globo-sesion::before,.globo-sesion::after{right:62px;}
  }

  /* ===== LO QUE SOLO VE EL VENDEDOR ======================================
     Un renglon aparte, con su propio fondo: tiene que leerse como informacion
     interna y no confundirse con el precio que paga la clienta. */
  .vd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:7px;
    padding:6px 10px;border-radius:8px;background:var(--accent-soft);
    font-size:12.5px;color:var(--dark);}
  .vd-precio b{font-size:13.5px;}
  .vd-stock{color:var(--muted);}
  .vd-stock.vacio{color:#B4472F;font-weight:600;}
  .vd-lg{margin:14px 0 0;padding:10px 14px;font-size:14px;gap:8px 18px;}
  .vd-lg .vd-precio b{font-size:17px;}

  /* El cartel del carrito: con que lista se esta comprando. */
  .lista-vendedor{font-size:13px;color:var(--muted);line-height:1.5;
    padding:10px 12px;border-radius:10px;background:var(--bg);margin-bottom:12px;}
  .lista-vendedor a{color:var(--ink);text-decoration:underline;font-weight:600;}
  .lista-vendedor.es-vendedor{background:var(--accent-soft);color:var(--ink);}

  /* Debajo de 1100 px el menu de arriba se guarda y queda el lateral. Antes el
     corte estaba en 640, y entre 640 y 1100 los siete enlaces entraban
     recortados o con una letra que no se podia tocar con el dedo.
     ⚠ El menu lateral tiene TODOS los enlaces, asi que no se pierde nada. */
  @media (max-width:1100px){
    nav{display:none;}
    .menu-toggle{display:flex;}
    .header-inner{justify-content:space-between;}
    .header-actions{margin-left:auto;}
  }