:root {
    --bg:#ffffff; --bg2:#ffffff; --bg3:#ffffff; --bgSoft:#f0f9ff;
    --border:#dbeafe; --border2:#bfdbfe;
    --text:#0f172a; --text2:#475569; --text3:#94a3b8;
    --accent:#0e7490;       /* cyan/teal oscuro */
    --accent2:#1e40af;      /* blue-700 */
    --grad:linear-gradient(135deg,#0e7490,#1e40af);
    --cta:linear-gradient(135deg,#fbbf24,#f59e0b);  /* amber CTA */
    --cta-solid:#f59e0b;
    --cta-hover:linear-gradient(135deg,#fcd34d,#fbbf24);
    --cta-text:#0f172a;
    --green:#16a34a; --red:#dc2626; --amber:#b45309;
  }
  * { box-sizing:border-box }
  html,body {
    margin:0; padding:0;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    background:var(--bg); color:var(--text); font-weight:400; font-size:14px;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    font-feature-settings:'cv11','ss01','ss03','tnum';
    letter-spacing:-0.005em;
  }
  /* Tipografía elegante para títulos */
  h1, h2, h3, .featured-slide .fs-title, .showcase-title, .prod-info h2, .hero-overlay h2 {
    font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
    letter-spacing:-0.018em;
  }
  /* Números tabulares en precios para alineación pareja */
  .price, .prod-price, .featured-slide .fs-price, .showcase-price, .mono {
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
  }
  a { color:var(--accent2); text-decoration:none }
  .mono { font-family:'JetBrains Mono',ui-monospace,monospace }

  /* Topbar */
  .top { background:linear-gradient(135deg,#083344 0%,#0c4a6e 50%,#1e3a8a 100%); color:#fff; padding:10px 24px; display:flex; align-items:center; gap:14px; box-shadow:0 2px 14px rgba(8,51,68,.5); position:sticky; top:0; z-index:50; }
  .top img { height:54px; width:auto; max-width:260px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
  .top .logo-divider { width:1px; height:20px; background:rgba(255,255,255,.3); }
  .top .logo-text { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:500; letter-spacing:.1em; color:rgba(255,255,255,.85); text-transform:uppercase; flex:1; }
  .top .cart-btn { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:6px; padding:8px 14px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; font-size:13px; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transition:background .15s; }
  .top .cart-btn:hover { background:rgba(255,255,255,.25); }
  .top .cart-btn .badge { background:#fff; color:var(--accent); border-radius:10px; padding:1px 8px; font-size:11px; min-width:20px; text-align:center; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; }

  /* Hero: tira horizontal de fotos (single row, tiles altos) */
  .hero-carousel { position:relative; width:100%; height:350px; overflow:hidden; background:#0c1e2e; }
  .hero-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:1fr; gap:2px; background:#0c1e2e; }
  .hero-tile { position:relative; overflow:hidden; background:#fff; }
  .hero-tile .hero-tile-img { position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .9s ease; animation:heroKenBurns 14s ease-in-out infinite alternate; }
  .hero-tile:nth-child(2n) .hero-tile-img { animation-duration:18s; animation-delay:-3s; }
  .hero-tile:nth-child(3n) .hero-tile-img { animation-duration:16s; animation-delay:-6s; }
  .hero-tile .hero-tile-img.fading { opacity:0; }
  @keyframes heroKenBurns {
    0%   { transform:scale(1.05) translate(0,0); }
    50%  { transform:scale(1.12) translate(-1.5%, -1%); }
    100% { transform:scale(1.05) translate(1%, 1%); }
  }
  /* Franja accent inferior: teal → amber con glow */
  .hero-carousel::before {
    content:''; position:absolute; left:0; right:0; bottom:0; height:5px; z-index:4;
    background:linear-gradient(90deg, #0e7490 0%, #06b6d4 30%, #38bdf8 55%, #fbbf24 78%, #f59e0b 100%);
    box-shadow:0 -4px 18px rgba(56,189,248,.55), 0 -8px 28px rgba(245,158,11,.35);
    animation:heroStripeShift 6s ease-in-out infinite;
    background-size:200% 100%;
  }
  @keyframes heroStripeShift {
    0%,100% { background-position:0% 50%; }
    50%     { background-position:100% 50%; }
  }
  /* Brillo diagonal animado sobre el overlay oscuro */
  .hero-carousel .hero-shine {
    position:absolute; top:-20%; left:-30%; width:50%; height:140%; z-index:2; pointer-events:none;
    background:linear-gradient(115deg, transparent 30%, rgba(125,211,252,.12) 45%, rgba(255,255,255,.18) 50%, rgba(251,191,36,.12) 55%, transparent 70%);
    transform:skewX(-18deg);
    animation:heroShine 7s ease-in-out infinite;
  }
  @keyframes heroShine {
    0%,100% { left:-30%; opacity:0; }
    20%     { opacity:1; }
    50%     { left:120%; opacity:1; }
    70%     { opacity:0; }
  }
  /* Gradient overlay para legibilidad del texto: más fuerte a la izquierda donde va el copy */
  .hero-carousel::after { content:''; position:absolute; inset:0; background:
      linear-gradient(90deg, rgba(30,21,53,.82) 0%, rgba(30,21,53,.35) 45%, rgba(30,21,53,.05) 70%),
      linear-gradient(180deg, rgba(30,21,53,0) 55%, rgba(30,21,53,.4) 100%);
    pointer-events:none; z-index:2; }
  .hero-overlay { position:absolute; inset:0; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; text-align:left; padding:40px 48px; z-index:3; color:#fff; max-width:780px; gap:28px; }
  .hero-overlay img.hero-logo { height:96px; width:auto; max-width:280px; object-fit:contain; filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.55)); display:block; flex:0 0 auto; animation:heroLogoIn .9s .1s both, heroLogoFloat 5.5s 1.1s ease-in-out infinite, heroLogoShine 6s 1.1s ease-in-out infinite, heroLogoFlip 9s 2s ease-in-out infinite; transform-origin:center; will-change:transform, filter; backface-visibility:visible; }
  .hero-overlay img.hero-logo:hover { animation:heroLogoPulse 1.2s ease-in-out infinite; }
  .hero-divider { width:1px; align-self:stretch; background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.35) 25%, rgba(255,255,255,.35) 75%, transparent 100%); flex:0 0 auto; }
  .hero-copy { display:flex; flex-direction:column; gap:10px; min-width:0; flex:1; }

  /* Promo banner rotativo arriba del titular */
  .hero-promo-link {
    display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg, rgba(30,64,175,.95), rgba(14,116,144,.95));
    color:#fff; text-decoration:none;
    padding:6px 14px 6px 8px; border-radius:999px;
    font-size:12px; font-weight:600;
    box-shadow:0 4px 18px rgba(30,64,175,.45), inset 0 1px 0 rgba(255,255,255,.2);
    align-self:flex-start;
    max-width:100%;
    transition:transform .2s, box-shadow .2s;
    backdrop-filter:blur(4px);
    animation:heroPromoIn .8s .25s both;
  }
  .hero-promo-link:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(30,64,175,.6); }
  .hero-promo-link .hpl-pill {
    background:#fff; color:var(--accent);
    font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; font-weight:700;
    letter-spacing:.1em; text-transform:uppercase;
    padding:3px 8px; border-radius:999px; flex:0 0 auto;
  }
  .hero-promo-link .hpl-text {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:340px;
  }
  .hero-promo-link .hpl-arrow {
    display:inline-block; transition:transform .25s;
    font-weight:700;
  }
  .hero-promo-link:hover .hpl-arrow { transform:translateX(3px); }

  .hero-overlay h2 {
    margin:0; font-size:clamp(15px, 2.1vw, 24px); font-weight:700; line-height:1.15;
    text-shadow:0 2px 14px rgba(0,0,0,.65);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
    overflow:hidden; max-width:100%;
    animation:heroTitleIn .9s .35s both;
  }
  .hero-overlay h2 .hl-accent { color:#7dd3fc; font-weight:600; }
  .hero-overlay p {
    margin:0; font-size:10px; font-family:'JetBrains Mono',ui-monospace,monospace;
    letter-spacing:.12em; text-transform:uppercase;
    color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.5);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.4;
    animation:heroTitleIn .9s .5s both;
  }
  .hero-badges { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; animation:heroTitleIn .9s .65s both; }
  .hero-badge {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22);
    color:#fff; font-size:11px; font-weight:600;
    padding:5px 11px; border-radius:999px;
    text-shadow:0 1px 4px rgba(0,0,0,.4);
  }
  .hero-badge .hb-icon { font-size:13px; }
  @keyframes heroLogoIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
  @keyframes heroLogoFloat {
    0%   { transform:translateY(0) rotate(0deg) scale(1);    filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.55)); }
    25%  { transform:translateY(-6px) rotate(-1.2deg) scale(1.015); filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(30,64,175,.45)); }
    50%  { transform:translateY(0) rotate(0deg) scale(1.03); filter:brightness(0) invert(1) drop-shadow(0 8px 22px rgba(14,116,144,.55)); }
    75%  { transform:translateY(-4px) rotate(1.2deg) scale(1.015); filter:brightness(0) invert(1) drop-shadow(0 6px 18px rgba(30,64,175,.45)); }
    100% { transform:translateY(0) rotate(0deg) scale(1);    filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.55)); }
  }
  @keyframes heroLogoPulse {
    0%,100% { transform:scale(1.02); filter:brightness(0) invert(1) drop-shadow(0 6px 22px rgba(30,64,175,.7)); }
    50%     { transform:scale(1.08); filter:brightness(0) invert(1) drop-shadow(0 10px 28px rgba(14,116,144,.85)); }
  }
  @keyframes heroLogoShine {
    0%, 70%, 100% { filter:brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,.55)); }
    80%           { filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(30,64,175,.85)) drop-shadow(0 0 26px rgba(255,255,255,.55)); }
    90%           { filter:brightness(0) invert(1) drop-shadow(0 4px 18px rgba(14,116,144,.85)) drop-shadow(0 0 22px rgba(255,255,255,.35)); }
  }
  @keyframes heroLogoFlip {
    0%, 78%, 100% { transform:perspective(600px) rotateY(0deg); }
    86%           { transform:perspective(600px) rotateY(180deg); }
    94%           { transform:perspective(600px) rotateY(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-overlay img.hero-logo { animation:heroLogoIn .9s .1s both !important; }
  }
  @keyframes heroPromoIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  @keyframes heroTitleIn { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }

  .hero-dots { position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:4; }
  .hero-dots button { width:6px; height:6px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; padding:0; transition:all .2s; }
  .hero-dots button.active { background:#fff; width:18px; border-radius:3px; }
  @media (max-width: 700px) {
    .hero-carousel { height:380px; }
    .hero-grid { grid-template-columns:repeat(4,1fr); grid-template-rows:1fr; }
    .hero-carousel::after { background:
        linear-gradient(180deg, rgba(30,21,53,.15) 0%, rgba(30,21,53,.35) 45%, rgba(30,21,53,.88) 100%); }
    .hero-overlay { padding:0 20px 26px; flex-direction:column; align-items:flex-start; justify-content:flex-end; max-width:none; gap:10px; }
    /* En mobile el logo IKORA ya está en la barra superior — escondemos el del hero
       para que no quede uno encima del otro */
    .hero-overlay img.hero-logo { display:none; }
    .hero-divider { display:none; }
    /* hero-copy tiene flex:1 en desktop y se estira a toda la altura. En mobile
       empujamos su contenido al fondo así no queda pegado al navbar. */
    .hero-copy { justify-content:flex-end; }
    .hero-overlay h2 { font-size:clamp(13px, 4.2vw, 17px); white-space:normal; }
    .hero-overlay p { font-size:9px; white-space:normal; }
    .hero-promo-link { font-size:11px; padding:5px 12px 5px 6px; }
    .hero-promo-link .hpl-text { max-width:200px; }
    .hero-promo-link .hpl-pill { font-size:8px; padding:2px 6px; }
    .hero-badge { font-size:10px; padding:4px 9px; }
  }

  /* Banner (legacy — ya reemplazado por hero-carousel, mantenido por compat) */
  .banner { background:var(--grad); color:#fff; padding:40px 20px 36px; text-align:center; position:relative; overflow:hidden; }
  .banner::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.12), transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.08), transparent 50%); pointer-events:none; }
  .banner img.hero-logo { height:90px; width:auto; max-width:80%; object-fit:contain; filter:brightness(0) invert(1); margin:0 auto 18px; display:block; position:relative; z-index:1; }
  .banner h2 { margin:0 0 8px; font-size:22px; font-weight:600; color:#fff; position:relative; z-index:1; }
  .banner p { margin:0; color:rgba(255,255,255,.85); font-size:13px; font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.04em; position:relative; z-index:1; }
  @media (max-width: 600px) {
    .banner { padding:30px 16px 26px; }
    .banner img.hero-logo { height:64px; margin-bottom:14px; }
    .banner h2 { font-size:17px; }
  }

  /* Featured carousel */
  .featured { position:relative; max-width:1280px; margin:20px auto 0; padding:0 20px; }
  .featured-track { position:relative; border-radius:14px; overflow:hidden; background:var(--bg2); border:1px solid var(--border); aspect-ratio: 16/9; min-height:280px; }
  .featured-slide { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; opacity:0; transition:opacity .6s ease; cursor:pointer; }
  .featured-slide.active { opacity:1; z-index:2; }
  .featured-slide .fs-img { display:flex; align-items:center; justify-content:center; background:#fff; height:100%; padding:12px; min-height:0; min-width:0; overflow:hidden; }
  .featured-slide .fs-img img { width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
  .featured-slide .fs-text { padding:24px 32px; background:linear-gradient(135deg, #ecfeff 0%, #f5f3ff 100%); height:100%; display:flex; flex-direction:column; justify-content:center; }
  .featured-slide .fs-tag { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:700; color:var(--accent2); letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
  .featured-slide .fs-title { font-size:20px; font-weight:700; color:var(--text); line-height:1.3; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .featured-slide .fs-price { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:26px; font-weight:800; color:var(--accent); margin-bottom:12px; letter-spacing:-.01em; }
  .featured-slide .fs-cta { display:inline-block; background:var(--cta); color:var(--cta-text); padding:8px 18px; border-radius:6px; font-weight:700; font-size:13px; align-self:flex-start; box-shadow:0 4px 12px rgba(245,158,11,.35); }
  .featured-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:3; }
  .featured-dots button { width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; padding:0; transition:all .2s; }
  .featured-dots button.active { background:var(--accent); width:22px; border-radius:4px; }
  .featured-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(255,255,255,.9); border:1px solid var(--border); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:18px; color:var(--accent); display:flex; align-items:center; justify-content:center; transition:all .15s; }
  .featured-arrow:hover { background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.15); }
  .featured-arrow.prev { left:10px; }
  .featured-arrow.next { right:10px; }
  @media (max-width: 700px) {
    .featured { padding:0 12px; margin-top:14px; }
    .featured-track { aspect-ratio: auto; min-height:0; height:auto; padding-bottom:18px; }
    .featured-slide { position:relative; inset:auto; grid-template-columns:1fr; grid-template-rows:auto auto; }
    .featured-slide:not(.active) { display:none; }
    .featured-slide .fs-img { padding:14px; aspect-ratio:1/1; }
    .featured-slide .fs-text { padding:14px 18px 22px; }
    .featured-slide .fs-title { font-size:15px; }
    .featured-slide .fs-price { font-size:20px; }
    .featured-arrow { width:30px; height:30px; font-size:14px; top:35%; }
    /* Dots fuera del slide para que no tapen el CTA */
    .featured-dots { position:absolute; bottom:4px; }
  }

  /* ── Showcase: carrusel cinematográfico con Ken Burns ───────────────── */
  .showcase { position:relative; width:100%; max-width:1200px; margin:24px auto; padding:0 20px; }
  .showcase-frame { position:relative; width:100%; height:280px; border-radius:16px; overflow:hidden; box-shadow:0 12px 40px rgba(14,116,144,.18); background:#1a1030; }
  .showcase-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.4s cubic-bezier(.4,0,.2,1); }
  .showcase-slide.active { opacity:1; z-index:2; }
  .showcase-slide .sc-bg {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transform:scale(1.1);
    transition:transform 7s linear;
  }
  .showcase-slide.active .sc-bg { transform:scale(1.25) translate(-2%,-2%); }
  .showcase-slide::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(20,10,40,.85) 0%, rgba(20,10,40,.55) 45%, rgba(20,10,40,.15) 100%),
               linear-gradient(0deg, rgba(0,0,0,.4) 0%, transparent 60%);
  }
  .showcase-content {
    position:absolute; inset:0; z-index:3;
    display:flex; flex-direction:column; justify-content:center;
    padding:36px 48px; color:#fff; max-width:55%;
    pointer-events:none;
  }
  .showcase-tag {
    display:inline-block; align-self:flex-start;
    background:rgba(30,64,175,.95); color:#fff;
    padding:4px 12px; border-radius:20px;
    font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase;
    margin-bottom:14px;
    box-shadow:0 4px 14px rgba(30,64,175,.4);
    animation:scTagIn .8s .3s both;
  }
  .showcase-title {
    font-size:26px; font-weight:700; line-height:1.2;
    margin:0 0 10px; text-shadow:0 2px 14px rgba(0,0,0,.6);
    animation:scTextIn .9s .4s both;
  }
  .showcase-price {
    font-family:'JetBrains Mono',ui-monospace,monospace; font-size:34px; font-weight:800;
    color:#67e8f9; margin:0 0 16px;
    text-shadow:0 0 24px rgba(103,232,249,.55), 0 2px 6px rgba(0,0,0,.7);
    letter-spacing:-0.02em;
    animation:scTextIn .9s .55s both;
  }
  .showcase-cta {
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    background:#fff; color:var(--accent2);
    padding:10px 22px; border-radius:999px;
    font-weight:700; font-size:13px;
    text-decoration:none; pointer-events:auto;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    transition:transform .2s, box-shadow .2s;
    animation:scTextIn .9s .7s both;
  }
  .showcase-cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.32); }
  .showcase-cta::after { content:'→'; transition:transform .2s; }
  .showcase-cta:hover::after { transform:translateX(4px); }
  .showcase-progress {
    position:absolute; bottom:0; left:0; right:0; height:3px;
    background:rgba(255,255,255,.15); z-index:4;
  }
  .showcase-progress::after {
    content:''; position:absolute; left:0; top:0; bottom:0;
    background:linear-gradient(90deg, var(--accent2), var(--accent));
    width:0%; transition:width .15s linear;
  }
  .showcase-progress.go::after { width:100%; transition:width 5s linear; }
  .showcase-dots {
    position:absolute; bottom:14px; right:20px;
    display:flex; gap:6px; z-index:4;
  }
  .showcase-dots button {
    width:8px; height:8px; border-radius:50%;
    background:rgba(255,255,255,.4); border:0; padding:0;
    cursor:pointer; transition:all .2s;
  }
  .showcase-dots button.active { background:#fff; width:24px; border-radius:4px; }
  @keyframes scTagIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
  @keyframes scTextIn { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:none; } }
  @media (max-width: 700px) {
    .showcase { padding:0 12px; margin:18px auto; }
    .showcase-frame { height:340px; }
    .showcase-content { padding:22px 24px; max-width:90%; }
    .showcase-tag { font-size:9px; padding:3px 10px; margin-bottom:10px; }
    .showcase-title { font-size:18px; }
    .showcase-price { font-size:22px; margin-bottom:12px; }
    .showcase-cta { padding:8px 16px; font-size:12px; }
    .showcase-dots { right:14px; bottom:10px; }
  }

  /* Search */
  .search-wrap { padding:14px 20px; background:var(--bg2); border-bottom:1px solid var(--border); }
  .search-wrap input { width:100%; max-width:600px; padding:9px 14px; border:1px solid var(--border2); border-radius:6px; font-size:13px; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text); background:var(--bg2); outline:none; transition:border-color .15s; }
  .search-wrap input:focus { border-color:var(--accent2); }

  /* Categorías */
  .cats-wrap { background:var(--bg2); border-bottom:1px solid var(--border); padding:10px 20px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; position:sticky; top:60px; z-index:45; box-shadow:0 2px 8px rgba(14,116,144,.06); }
  .cats-wrap::-webkit-scrollbar { height:4px; }
  .cats-wrap::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
  .cat-chip { display:inline-block; padding:7px 14px; margin-right:6px; border:1px solid var(--border2); border-radius:999px; background:var(--bg2); color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s ease; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; letter-spacing:.02em; }
  .cat-chip:hover { border-color:var(--accent2); color:var(--accent2); }
  .cat-chip.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 3px 10px rgba(30,64,175,.3); }

  /* Grid */
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:20px; max-width:1280px; margin:0 auto; }
  /* Showcase insertado dentro del grid: ocupa toda la fila */
  .grid > .showcase { grid-column:1 / -1; max-width:none; padding:0; margin:6px 0; }
  .card { background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s, border-color .15s; }
  .card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(14,116,144,.12); border-color:var(--border2); }
  .card .ph { aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border); position:relative; }
  /* Botón de compartir flotante en la esquina superior derecha de la imagen */
  .card .card-share { position:absolute; top:8px; right:8px; z-index:2; width:30px; height:30px; padding:0; margin:0; border-radius:50%; background:rgba(255,255,255,.92); color:var(--accent2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s, background .15s, box-shadow .15s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .card .card-share:hover { background:#fff; transform:scale(1.08); box-shadow:0 4px 12px rgba(14,116,144,.25); color:var(--accent); }
  .card .card-share svg { display:block; }
  .card .ph img { width:100%; height:100%; object-fit:contain; }
  .card .body { padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .card .title { font-size:13px; line-height:1.35; min-height:54px; color:var(--text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; }
  .card .price { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:20px; font-weight:800; color:var(--accent); letter-spacing:-.01em; }
  .card .stock { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; color:var(--text3); letter-spacing:.04em; }
  .card button { background:var(--cta); color:var(--cta-text); border:0; border-radius:6px; padding:9px; font-weight:700; cursor:pointer; font-size:13px; margin-top:auto; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; transition:opacity .15s, filter .15s, box-shadow .15s; box-shadow:0 3px 10px rgba(245,158,11,.3); }
  .card button:hover { opacity:.9; filter:brightness(1.08); }
  .card button:disabled { background:var(--text3); cursor:not-allowed; opacity:.5; }
  .card .ph, .card .title { cursor:pointer; }

  /* Product detail modal */
  .prod-modal { position:fixed; inset:20px; max-width:920px; margin:0 auto; background:#fff; z-index:120; border-radius:14px; box-shadow:0 20px 60px rgba(30,21,53,.35); display:none; flex-direction:column; overflow:hidden; box-sizing:border-box; }
  .prod-modal.show { display:flex; }
  .prod-modal header { padding:14px 18px; background:var(--grad); color:#fff; display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .prod-modal header h3 { margin:0; flex:1; min-width:0; font-size:15px; font-weight:600; overflow-wrap:break-word; word-break:break-word; line-height:1.3; }
  .prod-modal header .close { background:rgba(255,255,255,.15); border:0; width:30px; height:30px; border-radius:6px; font-size:20px; cursor:pointer; color:#fff; line-height:1; }
  .prod-body { flex:1; overflow-y:auto; padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  @media (max-width: 760px) {
    .prod-modal { inset:0; max-width:100vw; width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
    .prod-modal header { padding:12px 14px; }
    .prod-modal header h3 { font-size:14px; }
    .prod-body { grid-template-columns:1fr; padding:14px; gap:14px; }
  }
  /* ── Detalle de producto estilo ML/ecommerce ───────────────────────── */
  .prod-gallery { display:flex; flex-direction:row-reverse; gap:12px; align-items:flex-start; }
  .prod-gallery .main-img { flex:1; aspect-ratio:1/1; background:#fff; border:1px solid #ededed; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; min-width:0; }
  .prod-gallery .main-img img { width:100%; height:100%; object-fit:contain; cursor:zoom-in; transition:transform .3s; }
  .prod-gallery .main-img:hover img { transform:scale(1.04); }
  .prod-gallery .thumbs { display:flex; flex-direction:column; gap:6px; flex-wrap:nowrap; max-height:480px; overflow-y:auto; flex:0 0 56px; }
  .prod-gallery .thumbs img { width:48px; height:48px; object-fit:contain; background:#fff; border:1px solid #ededed; border-radius:4px; cursor:pointer; transition:border-color .15s; padding:2px; }
  .prod-gallery .thumbs img:hover { border-color:#3483fa; }
  .prod-gallery .thumbs img.active { border-color:#3483fa; border-width:2px; padding:1px; }
  @media (max-width:760px) {
    .prod-gallery { flex-direction:column; gap:8px; }
    .prod-gallery .main-img { aspect-ratio:1/1; max-width:100%; }
    .prod-gallery .thumbs { flex-direction:row; max-height:none; max-width:100%; overflow-x:auto; overflow-y:hidden; flex:0 0 auto; gap:6px; padding-bottom:4px; }
    .prod-gallery .thumbs img { width:42px; height:42px; flex:0 0 42px; }
  }

  .prod-info { display:flex; flex-direction:column; gap:0; }
  .prod-info .prod-meta {
    display:flex; align-items:center; gap:8px;
    font-size:13px; color:#666; margin-bottom:6px;
  }
  .prod-info .prod-meta .meta-sep { color:#bbb; }
  .prod-info .prod-meta .meta-stars { color:#3483fa; }
  .prod-info h2 {
    margin:0 0 12px; font-size:22px; line-height:1.25;
    color:#333; font-weight:400;
    overflow-wrap:break-word; word-break:break-word;
  }
  @media (max-width: 760px) {
    .prod-info h2 { font-size:18px; }
  }
  .prod-info .prod-price-block { margin:6px 0 14px; }
  .prod-info .prod-price-orig {
    font-size:14px; color:#999; text-decoration:line-through;
    margin-bottom:2px; font-family:'JetBrains Mono',ui-monospace,monospace;
  }
  .prod-info .prod-price-row {
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  }
  .prod-info .prod-price {
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:38px; font-weight:800; color:var(--accent);
    line-height:1; margin:0;
    letter-spacing:-0.02em;
  }
  .prod-info .prod-discount {
    font-size:16px; font-weight:600; color:#00a650;
  }
  .prod-info .prod-cuotas {
    font-size:14px; color:#00a650; font-weight:500;
    margin-top:6px; line-height:1.4;
  }
  .prod-info .prod-cuotas-grey { color:#666; font-weight:400; }
  .prod-info .prod-medios-link {
    color:#3483fa; font-size:14px; text-decoration:none;
    display:inline-block; margin-top:4px;
  }
  .prod-info .prod-medios-link:hover { text-decoration:underline; }

  .prod-info .prod-shipping-box {
    margin:14px 0; padding:12px 14px;
    background:#e6f7eb; border-left:3px solid #00a650;
    border-radius:4px;
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:#333; line-height:1.4;
  }
  .prod-info .prod-shipping-box strong { color:#00a650; }
  .prod-info .prod-shipping-icon { font-size:20px; flex:0 0 auto; }

  .prod-info .prod-stock-row {
    margin:14px 0 6px;
    font-size:14px; font-weight:600; color:#333;
  }
  .prod-info .prod-stock-row .stock-disponible { color:#00a650; }
  .prod-info .prod-stock-detail {
    font-size:13px; color:#666; margin-bottom:14px;
  }

  .prod-info .prod-qty-row {
    display:flex; align-items:center; gap:10px; margin:10px 0 16px;
    font-size:14px; color:#333;
  }
  .prod-info .prod-qty-row .qty-label { font-weight:500; }
  .prod-info .prod-qty-stepper {
    display:inline-flex; align-items:center;
    border:1px solid #ddd; border-radius:6px; overflow:hidden;
    background:#fff;
  }
  .prod-info .prod-qty-stepper button {
    background:transparent; border:0; width:32px; height:34px;
    font-size:16px; cursor:pointer; color:#3483fa;
  }
  .prod-info .prod-qty-stepper button:hover { background:#f5f5f5; }
  .prod-info .prod-qty-stepper input {
    width:50px; height:34px; text-align:center; border:0; outline:none;
    font-size:14px; font-weight:500; color:#333;
    border-left:1px solid #eee; border-right:1px solid #eee;
  }
  .prod-info .prod-qty-stock-mini { font-size:12px; color:#999; }

  .prod-info .prod-actions { display:flex; flex-direction:column; gap:10px; margin-top:6px; }
  .prod-info .btn-comprar {
    width:100%; background:var(--cta); color:var(--cta-text); border:0;
    border-radius:8px; padding:14px; font-weight:800; font-size:16px;
    cursor:pointer; transition:background .15s, transform .15s, box-shadow .15s;
    box-shadow:0 4px 14px rgba(245,158,11,.4);
    text-transform:uppercase; letter-spacing:.04em;
  }
  .prod-info .btn-comprar:hover { background:var(--cta-hover); transform:translateY(-1px); box-shadow:0 8px 22px rgba(245,158,11,.55); }
  .prod-info .btn-add-cart {
    width:100%; background:#dbeafe; color:#1e40af; border:1px solid #93c5fd;
    border-radius:8px; padding:14px; font-weight:700; font-size:15px;
    cursor:pointer; transition:background .15s;
  }
  .prod-info .btn-add-cart:hover { background:#bfdbfe; }

  .prod-info .prod-trust {
    margin-top:18px; padding-top:16px; border-top:1px solid #ededed;
    display:flex; flex-direction:column; gap:12px;
  }
  .prod-info .trust-item {
    display:flex; align-items:flex-start; gap:10px;
    font-size:13px; color:#333; line-height:1.4;
  }
  .prod-info .trust-icon { font-size:20px; color:#0e7490; flex:0 0 auto; line-height:1; }
  .prod-info .trust-text strong { color:#0e7490; font-weight:600; }
  .prod-info .trust-link { color:#0e7490; text-decoration:none; font-size:12px; }
  .prod-info .trust-link:hover { text-decoration:underline; }

  /* Descripción y ficha técnica con tabs */
  .prod-tabs { margin-top:24px; grid-column:1/-1; border-top:1px solid #ededed; padding-top:20px; }
  .prod-tabs-nav {
    display:flex; gap:24px; border-bottom:1px solid #ededed; margin-bottom:18px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .prod-tabs-nav::-webkit-scrollbar { display:none; }
  .prod-tabs-nav button {
    background:transparent; border:0; padding:10px 0;
    font-size:14px; font-weight:500; color:#666; cursor:pointer;
    border-bottom:3px solid transparent;
    transition:all .15s; white-space:nowrap;
  }
  .prod-tabs-nav button:hover { color:#0e7490; }
  .prod-tabs-nav button.active {
    color:#0e7490; border-bottom-color:#0e7490;
  }
  .prod-tab-content { display:none; }
  .prod-tab-content.active { display:block; }

  .prod-desc { }
  .prod-desc h4 { margin:0 0 12px; font-size:18px; color:#333; font-weight:500; }
  .prod-desc p { margin:0; font-size:14px; line-height:1.7; color:#333; white-space:pre-wrap; }

  .prod-attrs { }
  .prod-attrs h4 { margin:0 0 12px; font-size:18px; color:#333; font-weight:500; }
  .prod-attrs table { width:100%; border-collapse:collapse; font-size:14px; max-width:600px; }
  .prod-attrs td { padding:10px 14px; vertical-align:top; line-height:1.4; }
  .prod-attrs tr:nth-child(odd) td { background:#f5f5f5; }
  .prod-attrs td:first-child { color:#666; width:40%; font-weight:500; }
  .prod-attrs td:last-child { color:#333; }

  .prod-info .prod-add { width:100%; background:#3483fa; color:#fff; border:0; border-radius:6px; padding:14px; font-weight:600; font-size:14px; cursor:pointer; margin-top:6px; transition:background .15s; }
  .prod-info .prod-add:hover { background:#2968c8; }
  .prod-info .prod-stock { font-size:13px; color:#00a650; margin-bottom:10px; }
  .prod-variants { margin:14px 0; }
  .prod-variants h4 { margin:0 0 10px; font-size:12px; color:var(--text3); font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; font-weight:700; }
  .variant-btn { display:inline-block; padding:10px 16px; margin:4px 6px 4px 0; border:2px solid var(--border2); border-radius:8px; background:#fff; color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }
  .variant-btn:hover { border-color:var(--accent2); }
  .variant-btn.active { border-color:var(--accent); background:linear-gradient(135deg,rgba(14,116,144,.08),rgba(30,64,175,.08)); color:var(--accent); }
  .variant-btn .vqty { font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; }
  .variant-btn .vprice { display:block; font-size:11px; color:var(--text3); font-family:'JetBrains Mono',ui-monospace,monospace; margin-top:2px; font-weight:500; }
  .variant-btn.active .vprice { color:var(--accent); }

  .empty,.loading { padding:60px 20px; text-align:center; color:var(--text2); font-size:14px; font-family:'JetBrains Mono',ui-monospace,monospace; }

  /* Cart drawer */
  .overlay { position:fixed; inset:0; background:rgba(30,21,53,.55); backdrop-filter:blur(2px); z-index:90; display:none; }
  .overlay.show { display:block }
  .drawer { position:fixed; top:0; right:0; bottom:0; width:100%; max-width:440px; background:var(--bg2); z-index:100; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(14,116,144,.15); }
  .drawer.show { transform:translateX(0) }
  .drawer header { padding:14px 18px; background:var(--grad); color:#fff; display:flex; align-items:center; gap:10px; }
  .drawer header h3 { margin:0; flex:1; font-size:15px; font-weight:600; letter-spacing:.02em; }
  .drawer header button.close { background:rgba(255,255,255,.15); border:0; width:30px; height:30px; border-radius:6px; font-size:20px; cursor:pointer; color:#fff; line-height:1; }
  .drawer header button.close:hover { background:rgba(255,255,255,.25); }
  .drawer .items { flex:1; overflow-y:auto; padding:12px 18px; }
  .drawer .item { display:grid; grid-template-columns:56px 1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); align-items:center; }
  .drawer .item img { width:56px; height:56px; object-fit:contain; background:var(--bg3); border-radius:6px; border:1px solid var(--border); }
  .drawer .item .info { font-size:12px; line-height:1.3; color:var(--text); }
  .drawer .item .info strong { display:block; color:var(--accent); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:13px; margin-top:3px; font-weight:700; }
  .drawer .item .qty { display:flex; align-items:center; gap:4px; }
  .drawer .item .qty button { width:24px; height:24px; border:1px solid var(--border2); background:var(--bg2); color:var(--text); border-radius:4px; cursor:pointer; font-weight:bold; font-family:'JetBrains Mono',ui-monospace,monospace; }
  .drawer .item .qty button:hover { background:var(--bg3); }
  .drawer .item .qty span { min-width:22px; text-align:center; font-size:13px; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:600; }
  .drawer .item .rm { background:none; border:0; color:var(--red); cursor:pointer; font-size:10px; margin-top:4px; padding:0; font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
  .drawer .checkout { border-top:1px solid var(--border); padding:16px 18px; background:var(--bg); }
  .drawer .checkout label { display:block; font-size:10px; color:var(--text3); margin:10px 0 4px; font-weight:700; font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
  .drawer .checkout input,.drawer .checkout select { width:100%; padding:8px 10px; border:1px solid var(--border2); border-radius:6px; font-size:13px; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg2); color:var(--text); outline:none; transition:border-color .15s; }
  .drawer .checkout input:focus,.drawer .checkout select:focus { border-color:var(--accent2); }
  .drawer .totals { margin:14px 0 8px; font-size:13px; }
  .drawer .totals div { display:flex; justify-content:space-between; padding:3px 0; color:var(--text2); }
  .drawer .totals div span:last-child { font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--text); font-weight:600; }
  .drawer .totals .total { font-size:16px; font-weight:700; border-top:1px solid var(--border); padding-top:10px; margin-top:8px; color:var(--text); }
  .drawer .totals .total span:last-child { color:var(--accent); font-size:18px; font-weight:700; }
  .drawer .pagar { width:100%; background:var(--cta); color:var(--cta-text); border:0; border-radius:12px; padding:16px 18px; font-weight:800; font-size:15px; cursor:pointer; margin-top:12px; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; letter-spacing:.03em; text-transform:uppercase; box-shadow:0 6px 20px rgba(245,158,11,.45), 0 2px 6px rgba(217,119,6,.25); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; }
  .drawer .pagar::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition:left .6s ease; }
  .drawer .pagar:hover { transform:translateY(-1px); background:var(--cta-hover); box-shadow:0 10px 28px rgba(245,158,11,.55), 0 4px 10px rgba(217,119,6,.35); }
  .drawer .pagar:hover::before { left:100%; }
  .drawer .pagar:active { transform:translateY(0); }
  .drawer .pagar:disabled { background:#cbd5e1; color:#fff; cursor:not-allowed; opacity:.6; box-shadow:none; transform:none; }
  .drawer .pagar:disabled::before { display:none; }

  /* Botón Mercado Pago: logo oficial sobre fondo blanco con acento celeste */
  button.pagar.mp-btn { width:100%; border:1.5px solid #009ee3; cursor:pointer; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-weight:600; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:14px; position:relative; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; background:#fff; color:#2c3a47; border-radius:14px; padding:14px 18px; text-transform:none; letter-spacing:.01em; font-size:14px; box-shadow:0 4px 16px rgba(0,158,227,.15), 0 1px 4px rgba(0,140,200,.08); }
  button.pagar.mp-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(0,158,227,.12), transparent); transition:left .6s ease; }
  button.pagar.mp-btn:hover { transform:translateY(-1px); background:#f5fbff; box-shadow:0 8px 24px rgba(0,158,227,.25), 0 3px 8px rgba(0,140,200,.12); }
  button.pagar.mp-btn:hover::before { left:100%; }
  button.pagar.mp-btn:active { transform:translateY(0); }
  button.pagar.mp-btn:disabled { background:#f1f5f9; border-color:#cbd5e1; color:#94a3b8; cursor:not-allowed; opacity:.8; box-shadow:none; transform:none; }
  button.pagar.mp-btn:disabled::before { display:none; }
  button.pagar.mp-btn .mp-prefix { font-size:13px; font-weight:500; color:#475569; letter-spacing:.01em; }
  button.pagar.mp-btn .mp-logo { height:26px; width:auto; display:block; flex-shrink:0; }
  button.pagar.mp-btn .mp-lock { width:14px; height:14px; color:#009ee3; opacity:.75; flex-shrink:0; }
  .mp-help { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; font-size:11px; color:var(--text3); font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.05em; text-align:center; }
  .mp-help svg { width:12px; height:12px; opacity:.7; flex-shrink:0; }
  @keyframes mp-spin { to { transform:rotate(360deg); } }
  .drawer .empty-cart { padding:40px 20px; text-align:center; color:var(--text3); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.04em; }

  /* Checkout modal */
  .ck-modal { position:fixed; inset:20px; max-width:680px; margin:0 auto; background:var(--bg2); z-index:110; border-radius:12px; box-shadow:0 12px 40px rgba(14,116,144,.25); display:none; flex-direction:column; overflow:hidden; }
  .ck-modal.show { display:flex }
  .ck-modal header { padding:14px 18px; background:var(--grad); color:#fff; display:flex; align-items:center; gap:10px; }
  .ck-modal header h3 { margin:0; flex:1; font-size:16px; font-weight:600; }
  .ck-modal header .close { background:rgba(255,255,255,.15); border:0; width:30px; height:30px; border-radius:6px; font-size:20px; cursor:pointer; color:#fff; line-height:1; }
  .ck-body { flex:1; overflow-y:auto; padding:18px; }
  .ck-section { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:14px; }
  .ck-section h4 { margin:0 0 12px; font-size:13px; color:var(--text); font-weight:600; letter-spacing:.02em; }
  .ck-row { display:flex; gap:10px; }
  .ck-row > div { flex:1; }
  .ck-body label { display:block; font-size:10px; color:var(--text3); margin:8px 0 4px; font-weight:700; font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; }
  .ck-body input,.ck-body select,.ck-body textarea { width:100%; padding:8px 10px; border:1px solid var(--border2); border-radius:6px; font-size:13px; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg2); color:var(--text); outline:none; transition:border-color .15s; resize:vertical; }
  .ck-body input:focus,.ck-body select:focus,.ck-body textarea:focus { border-color:var(--accent2); }
  .ck-resumen { background:var(--bg3); border:1px solid var(--border2); border-radius:8px; padding:14px; margin:14px 0; font-size:13px; }
  .ck-resumen div { display:flex; justify-content:space-between; padding:3px 0; color:var(--text2); }
  .ck-resumen div span:last-child { font-family:'JetBrains Mono',ui-monospace,monospace; color:var(--text); font-weight:600; }
  .ck-resumen .total { font-size:16px; font-weight:700; border-top:1px solid var(--border2); padding-top:10px; margin-top:8px; color:var(--text); }
  .ck-resumen .total span:last-child { color:var(--accent); font-size:18px; font-weight:700; }
  @media (max-width: 600px) {
    .ck-modal { inset:0; border-radius:0; max-width:100%; }
    .ck-row { flex-direction:column; gap:0; }
  }

  ::-webkit-scrollbar { width:4px } ::-webkit-scrollbar-track { background:transparent } ::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px }

  /* WhatsApp floating */
  .wa-fab { position:fixed; bottom:24px; right:24px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.1); cursor:pointer; z-index:80; transition:transform .2s ease, box-shadow .2s ease; text-decoration:none; }
  .wa-fab:hover { transform:scale(1.08); box-shadow:0 10px 28px rgba(37,211,102,.55), 0 4px 10px rgba(0,0,0,.15); }
  .wa-fab svg { width:32px; height:32px; fill:#fff; }
  .wa-fab::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:wa-pulse 2.2s ease-out infinite; opacity:0; }
  @keyframes wa-pulse { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.55);opacity:0} }
  .wa-tip { position:absolute; right:72px; top:50%; transform:translateY(-50%); background:var(--text); color:#fff; padding:7px 12px; border-radius:8px; font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease; font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; box-shadow:0 4px 12px rgba(0,0,0,.2); }
  .wa-tip::after { content:''; position:absolute; right:-5px; top:50%; transform:translateY(-50%); width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid var(--text); }
  .wa-fab:hover .wa-tip { opacity:1; }
  @media (max-width: 600px) { .wa-fab { bottom:18px; right:18px; width:54px; height:54px; } .wa-fab svg { width:28px; height:28px; } .wa-tip { display:none; } }

  /* Botón scroll-to-top */
  .scroll-top {
    position:fixed; bottom:96px; right:24px; width:46px; height:46px;
    border-radius:50%; border:0; cursor:pointer; z-index:79;
    background:linear-gradient(135deg, var(--accent2), var(--accent));
    color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(14,116,144,.4), 0 2px 6px rgba(0,0,0,.1);
    opacity:0; transform:translateY(10px) scale(.85);
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, box-shadow .2s;
  }
  .scroll-top.show { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .scroll-top:hover { box-shadow:0 10px 28px rgba(30,64,175,.5), 0 4px 10px rgba(0,0,0,.15); transform:translateY(-3px) scale(1); }
  .scroll-top:active { transform:translateY(0) scale(.95); }
  @media (max-width:600px) {
    .scroll-top { bottom:84px; right:18px; width:42px; height:42px; }
    .scroll-top svg { width:20px; height:20px; }
  }

  footer { background:var(--bgSoft); border-top:1px solid var(--border); margin-top:40px; padding:32px 20px 20px; color:var(--text2); font-size:12px; }
  footer .foot-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; }
  footer h5 { margin:0 0 10px; font-size:11px; font-family:'JetBrains Mono',ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--text); font-weight:700; }
  footer a { color:var(--accent2); text-decoration:none; }
  footer a:hover { text-decoration:underline; }
  footer ul { list-style:none; padding:0; margin:0; }
  footer ul li { padding:3px 0; }
  footer .data-fiscal { display:flex; align-items:center; gap:10px; }
  footer .data-fiscal img { width:54px; height:68px; }
  footer .foot-bottom { max-width:1200px; margin:24px auto 0; padding-top:16px; border-top:1px solid var(--border); text-align:center; color:var(--text3); font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

  /* Sección Presupuestos */
  .presu {
    margin:48px 20px 0;
    padding:48px 32px;
    background:linear-gradient(135deg, #083344 0%, #0c4a6e 45%, #1e40af 100%);
    border-radius:20px;
    color:#fff;
    position:relative;
    overflow:hidden;
    max-width:1240px;
    margin-left:auto; margin-right:auto;
    box-shadow:0 20px 60px rgba(14,116,144,.25);
  }
  .presu::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 15% 25%, rgba(30,64,175,.35), transparent 45%),
      radial-gradient(circle at 85% 75%, rgba(253,224,71,.18), transparent 45%);
    pointer-events:none;
  }
  .presu-inner { position:relative; z-index:1; max-width:980px; margin:0 auto; text-align:center; }
  .presu-badge {
    display:inline-block;
    background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.22);
    color:#fff; font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    padding:6px 14px; border-radius:999px;
    margin-bottom:18px;
  }
  .presu-title {
    font-family:'Space Grotesk',system-ui,sans-serif;
    font-size:36px; font-weight:700; line-height:1.15;
    margin:0 0 14px; letter-spacing:-0.02em;
  }
  .presu-title span {
    color:#f59e0b;
  }
  .presu-sub {
    font-size:15px; line-height:1.6; color:rgba(255,255,255,.85);
    max-width:680px; margin:0 auto 32px;
  }
  .presu-sub strong { color:#67e8f9; font-weight:600; }
  .presu-perks {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
    margin:0 0 32px; text-align:left;
  }
  .presu-perk {
    background:rgba(255,255,255,.08); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.15);
    border-radius:14px; padding:18px;
    display:flex; gap:14px; align-items:flex-start;
    transition:transform .2s, background .2s;
  }
  .presu-perk:hover { transform:translateY(-3px); background:rgba(255,255,255,.12); }
  .presu-perk .pp-icon {
    font-size:28px; flex:0 0 auto; line-height:1;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
  }
  .presu-perk .pp-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
  .presu-perk .pp-text strong { font-size:14px; font-weight:600; color:#fff; }
  .presu-perk .pp-text span { font-size:12px; color:rgba(255,255,255,.7); line-height:1.4; }
  .presu-cta-row {
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
    margin-bottom:18px;
  }
  .presu-btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px; border-radius:999px;
    font-weight:700; font-size:14px; text-decoration:none;
    transition:transform .2s, box-shadow .2s, filter .2s;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  }
  .presu-btn-wa {
    background:#25D366; color:#fff;
    box-shadow:0 8px 24px rgba(37,211,102,.45);
  }
  .presu-btn-wa:hover { transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 12px 32px rgba(37,211,102,.55); }
  .presu-btn-mail {
    background:rgba(255,255,255,.95); color:var(--accent2);
    box-shadow:0 6px 20px rgba(0,0,0,.2);
  }
  .presu-btn-mail:hover { transform:translateY(-2px); background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.28); }
  .presu-foot {
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.55);
    margin:0;
  }
  @media (max-width:760px) {
    .presu { margin:32px 12px 0; padding:32px 20px; border-radius:16px; }
    .presu-title { font-size:24px; }
    .presu-sub { font-size:13px; margin-bottom:24px; }
    .presu-perks { grid-template-columns:1fr; gap:10px; margin-bottom:24px; }
    .presu-perk { padding:14px; }
    .presu-btn { padding:12px 20px; font-size:13px; width:100%; justify-content:center; }
    .presu-cta-row { flex-direction:column; gap:10px; }
  }

  /* Lightbox para fotos del detalle de producto */
  .lightbox-overlay {
    position:fixed; inset:0; background:rgba(10,5,25,.92);
    z-index:200; display:none; align-items:center; justify-content:center;
    padding:40px; cursor:zoom-out; backdrop-filter:blur(4px);
  }
  .lightbox-overlay.show { display:flex; }
  .lightbox-overlay .lb-img {
    max-width:100%; max-height:100%; object-fit:contain;
    border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);
    cursor:default;
  }
  .lightbox-overlay .lb-close {
    position:absolute; top:18px; right:24px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
    color:#fff; width:42px; height:42px; border-radius:50%;
    font-size:26px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s;
  }
  .lightbox-overlay .lb-close:hover { background:rgba(255,255,255,.25); }
  .lightbox-overlay .lb-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
    color:#fff; width:52px; height:52px; border-radius:50%;
    font-size:34px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .15s, transform .15s;
    padding:0; user-select:none;
  }
  .lightbox-overlay .lb-nav:hover { background:rgba(255,255,255,.25); transform:translateY(-50%) scale(1.05); }
  .lightbox-overlay .lb-nav:active { transform:translateY(-50%) scale(.95); }
  .lightbox-overlay .lb-prev { left:24px; }
  .lightbox-overlay .lb-next { right:24px; }
  .lightbox-overlay .lb-counter {
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.2);
    color:#fff; padding:6px 14px; border-radius:999px;
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:12px; font-weight:600; letter-spacing:.05em;
  }
  @media (max-width:600px) {
    .lightbox-overlay { padding:16px; }
    .lightbox-overlay .lb-close { top:10px; right:12px; width:36px; height:36px; font-size:22px; }
    .lightbox-overlay .lb-nav { width:40px; height:40px; font-size:26px; }
    .lightbox-overlay .lb-prev { left:8px; }
    .lightbox-overlay .lb-next { right:8px; }
    .lightbox-overlay .lb-counter { bottom:14px; font-size:11px; padding:5px 12px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     PREMIUM UPGRADES v1.5
     ════════════════════════════════════════════════════════════════════ */

  /* Topbar shrink on scroll */
  .top { transition: padding .25s ease, box-shadow .25s ease; }
  body.scrolled .top { padding-top:6px; padding-bottom:6px; box-shadow:0 4px 18px rgba(14,116,144,.28); }
  body.scrolled .top img:first-child { height:50px !important; transition:height .25s ease; }

  /* Scroll-reveal: fade-in-up */
  .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
  .reveal.visible { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

  /* ── Categorías visuales (grid de cards con icono) ──────────────────── */
  .cats-visual { max-width:1280px; margin:32px auto 8px; padding:0 20px; }
  .cats-visual h3 { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin:0 0 16px; color:var(--text); letter-spacing:-.01em; }
  .cats-visual h3 span { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .cats-visual-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
  .cv-card {
    position:relative; background:#fff; border:1px solid var(--border);
    border-radius:14px; padding:20px 14px; text-align:center; cursor:pointer;
    transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
    overflow:hidden;
  }
  .cv-card::before {
    content:''; position:absolute; inset:0; background:var(--grad); opacity:0;
    transition:opacity .25s; z-index:0;
  }
  .cv-card > * { position:relative; z-index:1; }
  .cv-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(14,116,144,.18); border-color:transparent; }
  .cv-card:hover::before { opacity:1; }
  .cv-card:hover .cv-icon, .cv-card:hover .cv-label, .cv-card:hover .cv-count { color:#fff; }
  .cv-card.active::before { opacity:1; }
  .cv-card.active .cv-icon, .cv-card.active .cv-label, .cv-card.active .cv-count { color:#fff; }
  .cv-icon { line-height:1; margin-bottom:10px; transition:color .25s, transform .25s; display:inline-flex; align-items:center; justify-content:center; color:var(--accent2); }
  .cv-icon svg { width:38px; height:38px; }
  .cv-card:hover .cv-icon { transform:scale(1.15) rotate(-3deg); color:#fff; }
  .cv-card.active .cv-icon { color:#fff; }
  @media (max-width:600px) { .cv-icon svg { width:28px; height:28px; } }
  .cv-label { font-size:13px; font-weight:700; color:var(--text); letter-spacing:.01em; transition:color .25s; }
  .cv-count { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; color:var(--text3); margin-top:4px; transition:color .25s; letter-spacing:.06em; }
  @media (max-width:600px) {
    .cats-visual-grid { grid-template-columns:repeat(3,1fr); gap:10px; }
    .cv-card { padding:14px 8px; }
    .cv-icon { font-size:26px; }
    .cv-label { font-size:11px; }
  }

  /* ── Card de producto premium ────────────────────────────────────── */
  .card { position:relative; }
  .card { transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s; }
  .card:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(14,116,144,.18), 0 0 0 1px rgba(30,64,175,.18); border-color:transparent; }
  .card .ph { position:relative; }
  .card .ph img { transition:transform .45s cubic-bezier(.4,0,.2,1); }
  .card:hover .ph img { transform:scale(1.07); }
  /* Badges sobre la imagen */
  .card-badges { position:absolute; top:8px; left:8px; right:8px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2; pointer-events:none; }
  .card-badge {
    display:inline-flex; align-items:center; gap:4px;
    background:rgba(255,255,255,.95); backdrop-filter:blur(6px);
    border:1px solid rgba(0,0,0,.06);
    color:var(--accent2); font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:10px; font-weight:700; letter-spacing:.04em;
    padding:3px 9px; border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .card-badge.flex { background:linear-gradient(135deg,#10b981,#059669); color:#fff; border-color:transparent; }
  .card-badge.cuotas { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; border-color:transparent; }
  .card-badge.stock-bajo { background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; border-color:transparent; }
  /* Selector de plan de cuotas (1 pago / 6× / 12×) */
  .plan-selector { display:flex; gap:5px; flex-wrap:wrap; margin:2px 0 -2px; }
  .plan-chip {
    flex:1 1 auto; min-width:0;
    background:var(--bg2); border:1px solid var(--border2); color:var(--text2);
    font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; font-weight:700;
    padding:4px 6px; border-radius:6px; cursor:pointer;
    transition: all .15s ease; letter-spacing:.02em;
    white-space:nowrap;
  }
  .plan-chip:hover { border-color:var(--accent2); color:var(--accent2); }
  .plan-chip.active {
    background:var(--grad); color:#fff; border-color:transparent;
    box-shadow:0 2px 8px rgba(30,64,175,.25);
  }

  /* Botón con morph al agregar */
  .card button { position:relative; overflow:hidden; }
  .card button.added { background:linear-gradient(135deg,#10b981,#059669) !important; pointer-events:none; }
  .card button.added::before { content:'✓ Agregado'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:inherit; color:#fff; animation:cardBtnPop .4s ease-out; }
  @keyframes cardBtnPop { 0% { transform:scale(.6); opacity:0; } 60% { transform:scale(1.06); } 100% { transform:scale(1); opacity:1; } }

  /* Skeleton loaders */
  .skel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:20px; max-width:1280px; margin:0 auto; }
  .skel-card { background:var(--bg2); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .skel-ph { aspect-ratio:1/1; background:linear-gradient(90deg, #f3f0fa 0%, #ece7f7 50%, #f3f0fa 100%); background-size:200% 100%; animation:skelShine 1.5s linear infinite; }
  .skel-line { height:12px; margin:10px 12px; background:linear-gradient(90deg, #f3f0fa 0%, #ece7f7 50%, #f3f0fa 100%); background-size:200% 100%; animation:skelShine 1.5s linear infinite; border-radius:4px; }
  .skel-line.short { width:50%; }
  @keyframes skelShine { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

  /* ── ¿Por qué IKORA? — sección de stats ───────────────────────── */
  .why { max-width:1280px; margin:48px auto 0; padding:0 20px; }
  .why-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
  .why-card {
    background:#fff; border:1px solid var(--border); border-radius:18px;
    padding:28px 22px; text-align:center;
    transition:transform .3s, box-shadow .3s, border-color .3s;
    position:relative; overflow:hidden;
  }
  .why-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:var(--grad); transform:scaleX(0); transform-origin:left;
    transition:transform .5s cubic-bezier(.4,0,.2,1);
  }
  .why-card:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(14,116,144,.15); }
  .why-card:hover::before { transform:scaleX(1); }
  .why-icon { font-size:38px; margin-bottom:8px; display:inline-block; transition:transform .4s; }
  .why-card:hover .why-icon { transform:scale(1.15) rotate(-5deg); }
  .why-num { font-family:'Space Grotesk',sans-serif; font-size:42px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.05; letter-spacing:-.02em; }
  .why-num small { font-size:22px; vertical-align:top; margin-left:2px; }
  .why-label { font-size:13px; font-weight:600; color:var(--text); margin-top:4px; }
  .why-desc { font-size:12px; color:var(--text2); margin-top:6px; line-height:1.45; }

  /* ── Footer enhanced ────────────────────────────────────────────── */
  footer { background:linear-gradient(180deg, var(--bgSoft) 0%, #f5f0fc 100%); }
  .foot-brand { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .foot-brand img { height:40px; width:auto; }
  .foot-brand .foot-tag { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; color:var(--text3); letter-spacing:.12em; text-transform:uppercase; }
  .foot-pay { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
  .foot-pay-chip {
    display:inline-flex; align-items:center; gap:5px;
    background:#fff; border:1px solid var(--border); border-radius:8px;
    padding:5px 10px; font-size:11px; font-weight:600; color:var(--text2);
    font-family:system-ui,sans-serif;
  }
  .foot-pay-chip span.icon { font-size:14px; }
  .foot-social { display:flex; gap:8px; margin-top:10px; }
  .foot-social a {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:#fff; border:1px solid var(--border); color:var(--accent2);
    transition: all .2s;
  }
  .foot-social a:hover { background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:0 6px 14px rgba(30,64,175,.3); }
  .foot-social a svg { width:16px; height:16px; }

  /* ════════════════════════════════════════════════════════════════════
     MOBILE OPTIMIZATIONS — pulido para pantallas chicas
     ════════════════════════════════════════════════════════════════════ */
  @media (max-width: 700px) {
    /* Grid de productos: 2 columnas fijas en mobile (mejor uso del espacio) */
    .grid { grid-template-columns:repeat(2, 1fr); gap:10px; padding:12px; }
    .card { border-radius:10px; }
    .card .ph { aspect-ratio:1/1; }
    .card .body { padding:9px; gap:6px; }
    .card .title { font-size:12px; min-height:42px; -webkit-line-clamp:2; line-height:1.3; }
    .card .price { font-size:16px; }
    .card .stock { font-size:10px; }
    .card button { padding:8px; font-size:12px; border-radius:6px; }
    .card-badges { top:5px; left:5px; right:5px; gap:3px; }
    .card-badge { font-size:8.5px; padding:2px 6px; letter-spacing:.02em; }
    .cuotas-hint { font-size:10px !important; min-height:12px !important; line-height:1.25; }

    /* En mobile el hover se traduce a tap — desactivamos lift */
    .card:hover { transform:none; box-shadow:0 4px 12px rgba(14,116,144,.10); }
    .card:hover .ph img { transform:none; }

    /* Plan selector: chips mas chicos para que entren en card angosta */
    .plan-selector { gap:3px; }
    .plan-chip { font-size:9.5px; padding:3px 4px; border-radius:5px; }

    /* Cats visual: scroll horizontal en mobile (mejor que squashed grid) */
    .cats-visual { margin:20px auto 4px; padding:0 12px; }
    .cats-visual h3 { font-size:18px; margin:0 0 12px; }
    .cats-visual-grid {
      grid-template-columns:none;
      display:flex; gap:8px;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
      padding:4px 4px 12px;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
    }
    .cats-visual-grid::-webkit-scrollbar { display:none; }
    .cv-card { flex:0 0 96px; padding:12px 6px; border-radius:11px; scroll-snap-align:start; }
    .cv-icon { margin-bottom:6px; }
    .cv-icon svg { width:24px; height:24px; }
    .cv-label { font-size:11px; line-height:1.15; }
    .cv-count { font-size:9px; margin-top:2px; }
    /* Sin lift en mobile */
    .cv-card:hover { transform:none; }
    .cv-card:hover .cv-icon { transform:none; }

    /* Why section: 2x2 en mobile */
    .why { margin:32px auto 0; padding:0 12px; }
    .why-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .why-card { padding:18px 12px; border-radius:14px; }
    .why-icon { font-size:28px; margin-bottom:4px; }
    .why-num { font-size:30px; }
    .why-num small { font-size:16px; }
    .why-label { font-size:12px; }
    .why-desc { font-size:11px; line-height:1.35; margin-top:4px; }
    .why-card:hover { transform:none; }

    /* Categorías chips horizontales: padding mas compacto */
    .cats-wrap { padding:8px 12px; }
    .cat-chip { padding:6px 11px; font-size:11px; }

    /* Search compacto */
    .search-wrap { padding:10px 12px; }
    .search-wrap input { font-size:13px; padding:9px 12px; }

    /* Footer en mobile: stack y centrado */
    footer { padding:24px 16px 16px; }
    footer .foot-grid { gap:22px; }
    .foot-brand { gap:10px; margin-bottom:10px; }
    .foot-brand img { height:32px; }
    .foot-pay { gap:6px; }
    .foot-pay-chip { font-size:10px; padding:4px 8px; }
    .foot-social a { width:32px; height:32px; }
    .foot-social a svg { width:14px; height:14px; }
    footer .foot-bottom { font-size:10px; margin-top:18px; padding-top:12px; }

    /* Skeleton tambien en 2 columnas */
    .skel-grid { grid-template-columns:repeat(2, 1fr); gap:10px; padding:12px; }
  }

  @media (max-width: 380px) {
    /* Pantallas muy chicas: bajar a 1 columna no es ideal — mantenemos 2 con tipografia mas chica */
    .card .title { font-size:11px; min-height:38px; }
    .card .price { font-size:14px; }
    .card-badge { font-size:8px; padding:2px 5px; }
    .why-grid { grid-template-columns:1fr; }
  }