/* Chrome compartido del escaparate público (catálogo / producto / carrito).
   Estaba inline en app/views/layouts/storefront.html.erb: ~20 KB que se
   reenviaban en CADA navegación (catálogo → ficha → carrito) y que el
   navegador no podía cachear porque viajaban dentro del HTML.
   Movido tal cual —sin un byte de diferencia— a un asset con huella y
   Cache-Control immutable de un año. El CSS propio de cada página sigue
   inline en su vista, que es donde tiene sentido: no lo comparte nadie. */
    :root{
      color-scheme:light;
      --blue:#225894; --blue-700:#1A4576; --ink:#0F2A47; --ink-900:#0B1F36;
      --body:#445970; --mute:#7A8FA6; --sky:#7FB2E5; --tint:#EDF3FA; --tint-2:#F2F7FC;
      --line:#E3EBF4; --line-2:#D7E3EF; --canvas:#F6F9FC; --green:#2E9E6B;
      /* Relleno del hueco de un producto sin foto en Odoo. */
      --noimg:#E4E9EF; --noimg-ink:#8C9CAF;
      --disp:'Jost',system-ui,sans-serif; --text:'Hanken Grotesk',system-ui,sans-serif;
      --maxw:1440px; --r:16px; --r-lg:20px; --shadow:0 8px 22px rgba(15,42,71,.07);
      /* Canalón único: todo el padding lateral de la página sale de aquí, así
         nav / utility / contenido / footer quedan siempre alineados al mismo eje. */
      --gut:32px;
      --safe-l:max(var(--gut),env(safe-area-inset-left));
      --safe-r:max(var(--gut),env(safe-area-inset-right));
    }
    *{box-sizing:border-box}
    /* `clip` y no `hidden`: `overflow-x:hidden` convertiría a html/body en
       contenedor de scroll y dejaría de funcionar `position:sticky` (nav,
       sidebar del catálogo, resumen del checkout). */
    html{scroll-behavior:smooth;overflow-x:clip}
    body{margin:0;background:#fff;color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
    /* `zoom` reencuadra el layout: las media queries siguen midiendo el viewport
       real, así que en móvil los breakpoints disparan ~11% desfasados y los
       elementos `position:fixed` (toast) se desplazan. Se limita a desktop, que
       es donde se añadió por densidad visual. */
    @media (min-width:1025px){body{zoom:.9}}
    h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.01em}
    p{margin:0;text-wrap:pretty}
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    /* Producto sin foto en Odoo: cuadro gris neutro. Nunca se rellena con la
       foto de otro artículo — cada contexto sólo le da su caja (ver .pcard,
       .pd-img, .co-item .thumb). */
    .noimg{display:flex;align-items:center;justify-content:center;padding:10px;
      background:var(--noimg);color:var(--noimg-ink);text-align:center;
      font:600 11.5px/1.3 var(--disp);letter-spacing:.1em;text-transform:uppercase}
    button{font-family:var(--text)}
    a,button,input,select,textarea,[role="button"]{-webkit-tap-highlight-color:rgba(34,88,148,.14)}
    a,button,select,[role="button"]{touch-action:manipulation}
    .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--safe-l);padding-right:var(--safe-r);width:100%}
    .sf-main{flex:1}
    .num{font-variant-numeric:tabular-nums}

    /* skip link */
    .sf-skip{position:absolute;left:12px;top:-64px;z-index:200;background:var(--blue);color:#fff;
      padding:12px 20px;border-radius:0 0 10px 10px;font-weight:700;font-size:15px;transition:top .2s}
    .sf-skip:focus{top:0}
    .sf-skip:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

    /* buttons */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:15px;
      padding:13px 24px;border-radius:12px;cursor:pointer;border:1.5px solid transparent;transition:background .2s,border-color .2s,color .2s,transform .2s}
    .btn-primary{background:var(--blue);color:#fff}
    .btn-primary:hover{background:var(--blue-700)}
    .btn-ghost{background:#fff;border-color:#C9D8E8;color:var(--ink)}
    .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
    .btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

    /* utility bar */
    .sf-utility{background:var(--ink);color:#BFD3E8;font-size:13px;font-weight:500}
    .sf-utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
    .sf-utility .r{color:#E8F0F9}
    /* box-shadow y no border: el borde sumaba 1px a la caja del enlace y lo
       descentraba respecto al texto contiguo. */
    .sf-utility a{color:#fff;font-weight:700;box-shadow:0 1px 0 rgba(255,255,255,.4)}
    .sf-utility a:hover{box-shadow:0 1px 0 #fff}
    /* Ver la nota en landings/index: `.wa` es inline-flex encabezado por un
       <svg> sin línea base, así que el icono y el número quedaban levantados
       respecto al texto. El span los alinea por flex. */
    .sf-utility .wrap>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 6px}
    .sf-utility .wa{display:inline-flex;align-items:center;gap:7px}
    .sf-utility .wa svg{width:15px;height:15px;flex:none}

    /* nav (shared) */
    .sf-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
    .sf-nav.plain{position:static;background:#fff;backdrop-filter:none}
    .sf-nav .inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--safe-r) 14px var(--safe-l)}
    .brand{display:flex;align-items:center;gap:12px;flex:none}
    .brand img{height:34px;width:auto;aspect-ratio:926/684}
    .brand .nm{font:700 26px var(--disp);color:var(--blue)}
    .sf-links{display:flex;align-items:center;gap:34px}
    .sf-links a{position:relative;font-weight:700;font-size:16px;color:var(--ink);transition:color .2s;padding:4px 0;white-space:nowrap}
    .nav-quote .nq-short{display:none}
    .nav-burger{display:none}
    .nav-menu-cta{display:none}
    .sf-links a:hover{color:var(--blue)}
    .sf-links a.active{color:var(--blue)}
    .sf-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;background:var(--blue);border-radius:2px}
    .nav-cta{display:flex;align-items:center;gap:14px}
    .nav-quote{display:inline-flex;align-items:center;background:var(--blue);color:#fff;font:700 15px var(--text);padding:11px 20px;border-radius:10px;transition:background .2s}
    .nav-quote:hover{background:var(--blue-700)}
    .cart.active{border-color:var(--blue);color:var(--blue);background:var(--tint)}
    .sf-search{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:#F2F6FB;border:1.5px solid var(--line);border-radius:12px;padding:4px 4px 4px 16px}
    .sf-search input{flex:1;border:none;outline:none;background:transparent;font:500 14.5px var(--text);color:var(--ink);padding:8px 0}
    .cart{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1.5px solid var(--line-2);border-radius:10px;color:var(--ink);transition:border-color .2s,color .2s,background .2s}
    .cart:hover{border-color:var(--blue);color:var(--blue)}
    .cart-badge{position:absolute;top:-7px;right:-7px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;min-width:19px;height:19px;border-radius:999px;display:none;align-items:center;justify-content:center;padding:0 5px}
    .nav-secure{font-size:14px;color:var(--body);font-weight:600;display:flex;align-items:center;gap:8px}

    /* breadcrumb */
    .crumb{font-size:13px;color:var(--mute);font-weight:600}
    /* Padding + margen negativo: agranda el área pulsable a ~45x43px sin mover
       nada visualmente (las migas medían 35x19). El padding lateral se queda en
       5px para no solapar con los separadores "/". */
    .crumb a{display:inline-block;color:var(--mute);padding:12px 5px;margin:-12px -5px}
    .crumb a:hover{color:var(--blue)}

    /* product card — estilo editorial (igual que la portada) */
    .pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
    .pcard:hover{border-color:var(--sky);box-shadow:0 16px 40px -22px rgba(15,42,71,.42);transform:translateY(-4px)}
    .pcard .ph{position:relative;display:block;text-decoration:none}
    .pcard .bdg{position:absolute;top:14px;left:14px;z-index:1;font:600 13px var(--disp);letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:2px;background:var(--tint);color:var(--blue)}
    .pcard .bdg.bio{background:var(--green);color:#fff}
    .pcard .bdg.pop{background:var(--ink-900);color:#fff}
    .pcard img{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;background:var(--canvas);padding:22px;border-bottom:1px solid var(--line)}
    .pcard .noimg{aspect-ratio:1/1;border-bottom:1px solid var(--line)}
    .pcard .nm{font:600 19px var(--disp);color:var(--ink-900);line-height:1.25;margin:18px 20px 0}
    .pcard .un{font-size:15px;font-weight:600;color:var(--body);margin:6px 20px 0}
    /* El pie se envuelve: en columnas estrechas (2 col a 561–760px) precio y
       botón no caben en una línea y antes desbordaban la tarjeta. */
    .pcard .foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin:auto 20px 20px;padding-top:18px}
    .pcard .pr{font:700 22px var(--disp);color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
    /* Los precios del catálogo son base gravada. El aviso va debajo del monto
       y no a su lado para no empujar el botón "Agregar" a otra línea. */
    .pcard .pr .tax{display:block;font:600 13px var(--disp);color:var(--body);letter-spacing:0}
    /* "Por Solicitud" ocupa el lugar del precio en los artículos que Odoo marca
       con x_studio_precio_por_solicitud. Un punto menos que el monto y sin
       nowrap porque es texto, no una cifra: a 22px la etiqueta pesaba más en la
       tarjeta que los precios reales de las tarjetas vecinas, y en la columna
       estrecha de 561–760px se salía del pie. */
    .pcard .pr.req{font-size:18px;white-space:normal}
    .pcard .add{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:600 16px var(--disp);min-height:46px;padding:0 16px;border-radius:2px;background:var(--tint);color:var(--blue);border:1px solid var(--line);cursor:pointer;transition:background .18s,color .18s,border-color .18s;flex:1 1 auto}
    .pcard .add:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

    /* eyebrow + display heading (estilo editorial) */
    .eyebrow{font:700 16px var(--disp);letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:14px;margin-bottom:18px}
    .eyebrow::before{content:"";width:46px;height:2px;background:var(--blue);display:inline-block}
    .display{font:700 clamp(30px,4.4vw,46px)/1.06 var(--disp);letter-spacing:-.015em;color:var(--ink-900)}

    /* footer compact */
    .sf-foot{background:var(--ink-900);color:#8FAACB}
    .sf-foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;padding-top:28px;padding-bottom:max(28px,env(safe-area-inset-bottom));font-size:13px}
    .sf-foot .l{display:flex;align-items:center;gap:10px}
    .sf-foot img{height:20px;width:auto;object-fit:contain}

    /* toast */
    .toast{position:fixed;bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px));left:50%;transform:translateX(-50%) translateY(20px);max-width:calc(100vw - 32px);background:var(--ink);color:#fff;border-radius:12px;padding:13px 22px;font-size:14.5px;font-weight:600;box-shadow:0 16px 44px rgba(15,42,71,.4);z-index:100;display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
    .toast .ck{color:var(--sky);font-weight:700}
    /* min-height + margen negativo: 44px de área pulsable sin engordar el toast. */
    .toast a{display:inline-flex;align-items:center;min-height:44px;margin-block:-10px;color:var(--sky);font-weight:700}

    @keyframes ab-fadeup{from{opacity:.9;transform:translateY(10px)}to{opacity:1;transform:none}}

    @media (max-width:1024px){:root{--gut:24px}}
    @media (max-width:860px){
      /* La barra de búsqueda del nav y el sello "compra segura" se ocultan: el
         catálogo lleva su propio buscador y el sello es decorativo. Los ENLACES
         no: antes desaparecían sin sustituto y no había forma de navegar. Ahora
         viven en un menú desplegable, no en un carril con scroll. */
      .sf-search,.nav-secure,.nav-quote{display:none}
      .sf-nav .inner{flex-wrap:wrap;gap:12px;padding-bottom:0}

      .nav-burger{display:inline-flex;align-items:center;justify-content:center;flex:none;
        flex-direction:column;gap:4px;width:44px;height:44px;padding:0;cursor:pointer;
        border:1.5px solid var(--line-2);border-radius:10px;background:#fff;
        transition:border-color .2s,background .2s}
      .nav-burger .bar{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
        transition:transform .22s ease,opacity .16s ease}
      .nav-burger[aria-expanded="true"]{border-color:var(--blue);background:var(--tint)}
      .nav-burger[aria-expanded="true"] .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
      .nav-burger[aria-expanded="true"] .bar:nth-child(2){opacity:0}
      .nav-burger[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

      .sf-links{display:none;order:3;flex:0 0 100%;flex-direction:column;align-items:stretch;gap:0;
        border-top:1px solid var(--line);
        margin-left:calc(-1 * var(--safe-l));margin-right:calc(-1 * var(--safe-r));
        padding:4px var(--safe-r) 10px var(--safe-l)}
      .sf-links.is-open{display:flex}
      .sf-links a{display:flex;align-items:center;min-height:52px;white-space:normal;
        border-bottom:1px solid var(--line)}
      .sf-links a:last-child{border-bottom:0}
      /* El subrayado del enlace activo es para una fila horizontal; en vertical
         ocuparía todo el ancho. En el menú basta el color. */
      .sf-links a.active::after{display:none}
      .sf-links a.active{color:var(--blue)}
      /* La CTA sale de la barra (no cabía junto a carrito y menú) y entra en el
         desplegable como primer elemento destacado. */
      .nav-menu-cta{display:flex;align-items:center;justify-content:center;min-height:52px;
        margin:8px 0 4px;border-radius:10px;background:var(--blue);color:#fff;font-weight:700}
      .nav-menu-cta:hover{background:var(--blue-700);color:#fff}

      .brand{min-height:44px}
      .sf-utility .wa{min-height:44px}
      .sf-utility .wrap{justify-content:center;text-align:center}
      .sf-utility .wrap>span{justify-content:center}
    }
    @media (prefers-reduced-motion:reduce){.nav-burger .bar{transition:none}}
    @media (max-width:560px){:root{--gut:20px}}
    @media (max-width:380px){:root{--gut:16px}.brand .nm{font-size:22px}.brand img{height:30px}}
    @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto}}

    /* ════ Legibilidad — texto más grande y en negrita (clientes 50–60 años) ════ */
    body{font-size:18px}
    .sf-utility .wrap{font-size:14.5px;font-weight:600}
    .sf-links a{font-size:16.5px;font-weight:700}
    .sf-search input{font-size:16.5px}
    .nav-secure{font-size:16px}
    .btn{font-size:16.5px}
    .crumb{font-size:14.5px;font-weight:600}
    .pcard .nm{font-size:19px}
    .pcard .un{font-size:15px;font-weight:600}
    .pcard .pr{font-size:22px}
    .pcard .add{font-size:16px}
    .pcard .bdg{font-size:13px}
    .sf-foot .wrap{font-size:14.5px}
    .toast{font-size:15.5px}