/* Azul del rótulo de las tiendas como color de marca; superficies separadas por tono, sin líneas. */
:root{
  --ink:#0b1230;--text:#1c2440;--muted:#535c78;
  --blue:#1b2f8f;--blue-hover:#142370;--blue-soft:#e8eefb;
  --surface:#f4f6fa;--surface-2:#eaeef5;--white:#fff;
  --radius:14px;--radius-s:10px;
  --shadow:0 1px 2px rgba(11,18,48,.05),0 14px 36px rgba(11,18,48,.08);
  --container:1240px;--gutter:clamp(18px,3vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--text);font:400 17px/1.6 Switzer,Arial,sans-serif;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin:0 0 18px}
h1{font-size:clamp(2rem,1.2rem + 3.8vw,4.4rem)}
h2{font-size:clamp(1.9rem,1.3rem + 1.9vw,3rem)}
h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.3}
p{margin:0 0 16px}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:#fff;padding:12px 16px;z-index:30;border-radius:8px}
.skip:focus{top:12px}
.container{width:min(var(--container),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.lead{font-size:clamp(1.12rem,1rem + .45vw,1.35rem);line-height:1.55;color:var(--muted);max-width:44ch}
.section{padding-block:clamp(64px,8vw,112px)}

/* Botones. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 26px;border-radius:999px;background:var(--blue);color:#fff;border:0;text-decoration:none;font-weight:500;font-size:1rem;line-height:1.2;transition:background .2s,transform .15s var(--ease)}
.button:hover{background:var(--blue-hover)}
.button:active{transform:scale(.97)}
.button.secondary{background:var(--surface-2);color:var(--ink)}
.button.secondary:hover{background:#dde3ee}
.button.white{background:#fff;color:var(--blue)}
.button.white:hover{background:var(--blue-soft)}
.button.small{min-height:44px;padding:10px 20px;font-size:.95rem}
.text-link{font-weight:500;color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-underline-offset .2s}
.text-link:hover{text-underline-offset:9px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}

/* Barra superior y cabecera. */
.topbar{background:var(--ink);color:#dfe4f5;font-size:.875rem}
.topbar .container{display:flex;align-items:center;gap:26px;min-height:40px}
.topbar a{text-decoration:none;color:#fff}
.topbar a:hover{text-decoration:underline;text-underline-offset:4px}
/* Cada tienda con su teléfono detrás, y la ciudad al final. */
.topbar-shops{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 22px;margin-left:auto}
.topbar-shop{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.topbar-tel{display:inline-flex;align-items:center;gap:5px}
.topbar-tel::before{content:"";flex:none;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235bb8ec' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat}
.topbar-hours{color:#aeb6d3}
.topbar .container>span{white-space:nowrap}
@media (max-width:1200px){.topbar-hours{display:none}}
[data-status].open::before,[data-status].closed::before,[data-status-store].open::before,[data-status-store].closed::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:#2fbf71}
[data-status].closed::before,[data-status-store].closed::before{background:#d9483b}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96)}
.header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{transition:opacity .25s,visibility .25s}
.brand.brand-away{opacity:0;visibility:hidden}
.brand img{width:118px;height:auto}
nav#nav{display:flex;align-items:center;gap:6px}
nav#nav a{padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:.98rem;color:var(--ink);transition:background .2s}
nav#nav a:hover{background:var(--surface)}
nav#nav a[aria-current]{background:var(--blue-soft);color:var(--blue)}
nav#nav a.external-shop{margin-left:10px;background:var(--ink);color:#fff;padding:11px 20px}
nav#nav a.external-shop:hover{background:var(--blue)}
.menu{display:none}

/* Portada. */
/* Portada en un panel con degradado y dos arcos como los del logo. Es contenedor (cqi) y grupo aislado: así el blanco del logo se funde con el fondo. */
.home-hero,.page-hero{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;margin-top:8px;padding:clamp(16px,1.8vw,24px) clamp(20px,4vw,56px);border-radius:22px;text-align:center;background:radial-gradient(circle at 88% 0%,rgba(91,184,236,.30),transparent 45%),radial-gradient(circle at 0% 100%,rgba(27,47,143,.14),transparent 50%),linear-gradient(180deg,#f3f7ff,#e7f0fc)}
.home-hero::before,.home-hero::after,.page-hero::before,.page-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.home-hero::before,.page-hero::before{width:560px;height:560px;right:-210px;top:-270px;border:64px solid rgba(91,184,236,.24)}
.home-hero::after,.page-hero::after{width:420px;height:420px;left:-200px;bottom:-260px;border:46px solid rgba(27,47,143,.12)}
/* El título cabe en una línea: «Mr.Computer Informática.» en su píldora azul mide unos 13,3 em con esta letra, así que la letra mide como mucho el 7,2 % del ancho que deja el logo (hasta 144 px con el hueco); en pantallas grandes las estrellas van en la misma fila y dejan unos 580 px menos. */
.hero-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px clamp(12px,2vw,24px);margin-bottom:6px}
.hero-logo{flex:none;width:clamp(70px,6.5vw,92px);mix-blend-mode:multiply}
.hero-copy h1{margin:0;font-size:min(clamp(2rem,1.2rem + 3.8vw,3.1rem),calc((100cqi - 144px) * .072))}
/* Los dos textos seguidos, sin saltos de línea: en una sola línea en pantallas grandes. */
.hero-copy .lead{display:inline;margin:0;font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.5}
.hero-copy .lead br{display:none}
.rating{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;margin:0;padding:6px 18px;border-radius:999px;background:#fff;box-shadow:0 12px 32px rgba(27,47,143,.14);text-decoration:none;font-size:1.1rem;line-height:1.2;color:var(--muted);transition:transform .2s var(--ease),box-shadow .2s}
.rating:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(27,47,143,.22)}
.rating-more{font-size:.95rem;font-weight:500;color:var(--blue)}
.rating strong{color:var(--ink);font-weight:600;letter-spacing:-.02em}
.rating .stars{font-size:1.4rem;letter-spacing:2px;line-height:1}
.stars{color:#f2a900;letter-spacing:2px;font-size:1.05rem}
.hero-stores{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-stores>a{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.hero-stores img{width:100%;height:clamp(300px,36vw,500px);object-fit:cover;transition:transform .6s var(--ease)}
.hero-stores>a:hover img{transform:scale(1.03)}
.hero-stores>a>span{display:flex;justify-content:space-between;padding:16px 20px;font-weight:500;color:var(--ink)}
.photo-top{object-position:50% 12%}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.benefits>div{background:var(--surface);border-radius:var(--radius);padding:22px 24px;display:grid;gap:4px}
.benefits strong{color:var(--ink);font-size:1.1rem;font-weight:600;letter-spacing:-.015em}
.benefits span{color:var(--muted);font-size:.95rem}
.benefits>div{justify-items:center;align-content:start;text-align:center;box-shadow:var(--shadow)}
/* Mismo icono en ventajas y tarjetas. */
.benefits .benefit-icon,.route-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border-radius:12px;background:linear-gradient(135deg,#3a6fe0,var(--blue));color:#fff}
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.section-heading{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:28px;text-align:center}
.section-heading h2{margin-bottom:0}
.section-heading .title-pill{margin-inline:auto}
.section-heading p{color:var(--muted);margin:0;max-width:56ch}
.section-heading .text-link{white-space:nowrap}
/* Títulos en píldora azul, como los botones de WhatsApp. En pantallas estrechas la letra baja para que «Ordenadores reacondicionados» (unos 16,5 em con el relleno) quepa en una línea. */
.title-pill{width:fit-content;max-width:100%;padding:.32em .95em .38em;border-radius:.925em;text-align:center;background:var(--blue);color:#fff;font-size:min(2.1rem,calc((100vw - 2 * var(--gutter)) / 16.5));letter-spacing:-.02em;line-height:1.15}

/* Tarjetas de producto. */
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.product-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;text-decoration:none;color:inherit}
.product-card .image{background:#fff;border-radius:var(--radius-s);margin:14px 14px 0;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.product-card .image img{width:74%;height:74%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.product-card:hover .image img{transform:scale(1.06)}
.product-copy{padding:14px 18px 18px;display:flex;flex-direction:column;align-items:center;flex:1}
.category{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.product-copy h3{font-size:1.02rem;font-weight:500;letter-spacing:-.01em;line-height:1.4;margin-bottom:12px}
.prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:auto 0 0}
.prices strong{font-size:1.4rem;color:var(--ink);letter-spacing:-.03em}
.prices del{color:var(--muted);font-size:.9rem}
.product-card .prices{justify-content:center}
.detail-link{display:flex;justify-content:center;gap:8px;margin-top:14px;font-weight:500;font-size:.95rem;color:var(--blue)}
.stock-badge{position:absolute;top:24px;left:24px;background:var(--ink);color:#fff;font-size:.8rem;font-weight:500;padding:5px 12px;border-radius:999px}
.stock-badge.inline{position:static;display:inline-flex;align-items:center;justify-content:center;min-height:52px;font-size:1rem;border-radius:999px}

/* Bloque PC gaming de la portada. */
.gaming-banner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;padding:clamp(32px,5vw,64px);background:var(--blue);color:#fff;border-radius:22px}
.gaming-banner h2{color:#fff}
.gaming-banner p{color:#dfe6ff;max-width:46ch;margin:0 auto;font-size:1rem}
.gaming-banner .title-pill{margin-inline:auto;background:#fff;color:var(--blue)}
.gaming-banner .actions{margin:12px 0;justify-content:center}
.gaming-banner img{order:-1;width:clamp(150px,17vw,220px);height:auto;aspect-ratio:548/482;object-fit:contain;background:#fff;border-radius:var(--radius);padding:8px}
.gaming-banner{position:relative;isolation:isolate;overflow:hidden;width:min(960px,calc(100% - 2 * var(--gutter)));grid-template-columns:auto 1fr;justify-items:center;gap:clamp(20px,3vw,36px);padding:clamp(20px,2.4vw,28px) clamp(20px,3vw,40px);text-align:center;background:linear-gradient(135deg,#1b2f8f 0%,#2545b5 60%,#3a86d4 125%)}
.gaming-banner::before{content:"";position:absolute;z-index:-1;width:480px;height:480px;left:-210px;bottom:-290px;border-radius:50%;border:52px solid rgba(255,255,255,.07);pointer-events:none}

/* Tres caminos. */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.route-grid>a{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,3vw,36px);text-decoration:none;transition:background .2s,transform .3s var(--ease)}
.route-grid>a:hover{background:var(--surface-2);transform:translateY(-3px)}
.route-grid h2{font-size:1.35rem;margin-bottom:10px}
.route-grid p{color:var(--muted)}
.route-grid .text-link{margin-top:auto}


/* Pie. */
.site-footer{background:var(--ink);color:#d7dcf0;margin-top:clamp(40px,6vw,80px)}
.footer-main{display:grid;grid-template-columns:.9fr 1fr 1fr 1fr;gap:32px;padding-block:56px 40px}
.footer-brand{align-self:start;background:#fff;border-radius:var(--radius-s);padding:10px 14px;display:inline-block;width:max-content}
.footer-brand img{width:112px}
.footer-main h3{color:#fff;font-size:1rem;margin-bottom:10px}
.footer-main p{margin:0 0 8px;color:#aeb6d3}
.footer-main a{display:block;margin-bottom:6px;color:#fff;text-decoration:none}
.footer-main a:hover{text-decoration:underline;text-underline-offset:4px}
.legal{display:flex;flex-wrap:wrap;gap:10px 24px;padding-block:22px 34px;font-size:.875rem;color:#aeb6d3}
.legal a{color:#d7dcf0;text-underline-offset:4px}

/* Páginas interiores. */
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;color:var(--muted);margin-bottom:24px}
.crumb-bar{padding-top:20px}
/* Cabecera de las páginas: el mismo panel que la portada, con la foto de la página donde la portada lleva el logo. */
.page-hero .crumb{justify-content:center;margin-bottom:10px;font-size:.85rem}
.page-hero>.title-pill{margin-inline:auto}
.page-hero .hero-brand{margin-bottom:0}
.hero-thumb{flex:none;width:clamp(72px,7vw,110px);aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-s)}
.hero-thumb.contain{object-fit:contain;background:#fff;padding:4px}
.page-hero .lead{margin:8px auto 0;font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.5}
.page-hero .actions{justify-content:center;margin-top:12px}
.hero-highlight{margin:10px 0 0;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);font-weight:600;letter-spacing:.01em;line-height:1.2;color:var(--blue);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em}
.crumb a{text-underline-offset:4px}
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.service-photo{width:100%;aspect-ratio:9/7;object-fit:cover;border-radius:var(--radius)}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:0}
.service-grid article{background:var(--surface);border-radius:var(--radius);padding:clamp(28px,3.5vw,44px)}
.service-grid article p{color:var(--muted)}
.service-grid img{margin-top:20px;max-height:220px;object-fit:contain;mix-blend-mode:multiply}
.service-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.service-list li{flex:0 1 calc((100% - 30px) / 4);display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:var(--surface);border-radius:var(--radius-s);box-shadow:var(--shadow);text-align:center;font-weight:600;line-height:1.3;color:var(--ink)}
.service-list li::before{content:"";flex:none;width:20px;height:20px;border-radius:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat,linear-gradient(135deg,#3a6fe0,var(--blue))}
.photo-card{display:grid;place-items:center;max-width:min(340px,55%);margin-inline:auto;padding:clamp(10px,1.2vw,14px);background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.photo-card img{max-height:130px;width:auto;object-fit:contain;mix-blend-mode:multiply}

/* Catálogo. */
.catalogue{padding-bottom:clamp(64px,8vw,112px)}
.catalog-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;padding:14px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filter{min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:#fff;font-weight:500;color:var(--ink)}
.filter.active{background:var(--ink);color:#fff}
.search{margin-left:0}
.search input{min-height:44px;width:260px;padding:8px 16px;border:1px solid #d5dbe7;border-radius:999px;background:#fff}
.sort{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:500;color:var(--muted)}
.sort select{min-height:44px;padding:8px 14px;border:1px solid #d5dbe7;border-radius:999px;background:#fff;color:var(--ink)}
.count{margin:24px 0;font-size:.95rem;color:var(--muted);text-align:center}
.empty{padding-block:40px;text-align:center}
.empty button{background:none;border:0;color:var(--blue);text-decoration:underline;font-weight:500}

/* Ficha de producto. */
.product-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,72px);padding-bottom:clamp(64px,8vw,112px)}
.main-frame{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:1;display:grid;place-items:center}
.main-image{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.thumbnails{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbnails button{width:76px;aspect-ratio:1;padding:6px;border:0;border-radius:var(--radius-s);background:var(--surface);transition:background .2s}
.thumbnails button[aria-pressed="true"]{background:var(--blue-soft);outline:2px solid var(--blue)}
.thumbnails img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.product-info h1{font-size:clamp(1.7rem,1.2rem + 1.5vw,2.5rem);line-height:1.12;letter-spacing:-.03em}
.product-info .prices{margin-top:10px}
.product-info .prices strong{font-size:2.6rem}
.tax{color:var(--muted);margin:8px 0 0}
.buy{display:grid;gap:10px;margin-top:28px}
.buy .button{width:100%}
.description{margin-top:36px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px}
.description h2{font-size:1.2rem;letter-spacing:-.02em;margin-bottom:10px}
.description p{white-space:pre-line;margin:0;color:var(--text)}
.rich p{white-space:normal;margin:0 0 6px}
.rich p:last-child{margin-bottom:0}
.rich u{text-decoration:none;font-weight:600;color:var(--ink)}
.option{border:0;padding:0;margin:26px 0 0;min-width:0}
.option legend{padding:0;margin-bottom:10px;font-weight:500;color:var(--ink)}
.choices{display:grid;gap:8px}
.choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 18px;border-radius:var(--radius-s);background:var(--surface);font-size:.95rem;cursor:pointer;transition:background .2s}
.choice:hover{background:var(--surface-2)}
.choice:has(input:checked){background:var(--blue-soft);outline:2px solid var(--blue);color:var(--ink)}
.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
.choice input{accent-color:var(--blue);width:18px;height:18px;margin:0}
.button:disabled{opacity:.6;cursor:progress}
.buy-status{min-height:1.6em;margin:12px 0 0;font-size:.95rem;color:var(--muted)}
.info-sections{display:grid;gap:8px;margin-top:12px}
.info-sections details{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:0 26px}
.info-sections summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.info-sections summary::-webkit-details-marker{display:none}
.info-sections summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--blue)}
.info-sections details[open] summary::after{content:"−"}
.info-sections .rich{padding-bottom:22px;font-size:.95rem}

/* Carrito. */
nav#nav a.cart-link{display:inline-flex;align-items:center;gap:8px}
.mobile-cart{display:none}
.cart-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--blue);color:#fff;font-size:.78rem;font-weight:600;line-height:1}
.cart{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(24px,4vw,48px);align-items:start;padding-bottom:16px}
.cart-lines{display:grid;gap:12px}
.cart-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px 16px 16px}
.cart-line img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:var(--radius-s);padding:6px}
.cart-line h3{font-size:1.02rem;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.cart-line-meta{margin:0 0 2px;font-size:.88rem;color:var(--muted)}
.cart-line-warning{margin:6px 0 0;font-size:.88rem;font-weight:500;color:#b3261e}
.cart-line-side{display:grid;justify-items:end;gap:10px}
.cart-line-side strong{font-size:1.15rem;color:var(--ink);letter-spacing:-.02em}
.qty{display:inline-flex;align-items:center;background:#fff;border-radius:999px}
.qty button{width:42px;height:42px;border:0;border-radius:50%;background:none;font-size:1.15rem;color:var(--ink)}
.qty button:hover:not(:disabled){background:var(--surface-2)}
.qty button:disabled{opacity:.35;cursor:default}
.qty span{min-width:26px;text-align:center;font-weight:500}
.text-button{border:0;background:none;padding:4px 0;font-size:.9rem;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.text-button:hover:not(:disabled){color:var(--ink)}
.cart-summary{position:sticky;top:110px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.cart-summary h2{font-size:1.5rem;margin-bottom:20px}
.summary-row{display:flex;justify-content:space-between;gap:16px;margin:0 0 10px}
.summary-row.total{margin:18px 0 6px;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.summary-note{margin:12px 0;font-size:.88rem;color:var(--muted)}
.cart-summary .button{width:100%;margin-top:8px}
.cart-empty{grid-column:1/-1;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(28px,4vw,48px);text-align:center}
.cart-empty p{font-size:1.25rem;color:var(--ink)}
.cart-status{min-height:1.6em;margin-bottom:40px;color:var(--muted)}

/* Tiendas. */
.shops{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:24px}
/* Todas las páginas: el mismo hueco entre todos los bloques. */
.flow>*+*{margin-top:clamp(40px,5vw,64px)}
.flow>.home-shops-title+.shops,.flow>.crumb-bar+*{margin-top:0}
.flow>.cart-status{margin-top:16px}
.flow>.section,.flow>.catalogue,.flow>.product-detail{padding-block:0}
.home-shops{padding-bottom:0}
/* En la portada, cada tienda con una foto pequeña arriba y sus datos debajo. */
.home-shops-title{margin-bottom:28px;text-align:center;scroll-margin-top:110px}
.home-shops article{display:flex;flex-direction:column;background:#fff;box-shadow:0 1px 2px rgba(11,18,48,.05),0 14px 36px rgba(11,18,48,.08)}
.shops article>.shop-photo{position:relative;width:200px;height:125px;margin:clamp(20px,2.4vw,30px) auto 0;padding:0;border-radius:var(--radius-s);overflow:hidden}
.shop-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-photo img:not(.photo-top){object-position:50% 14%}
.shop-map{align-self:center;margin:12px 0 0;font-weight:500;font-size:.95rem;color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.shop-map:hover{text-underline-offset:8px}
.home-shops article>div:last-child{padding:18px clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px);text-align:center}
.home-shops h2{font-size:1.35rem}
.home-shops .store-phone{font-size:1.35rem;margin-top:8px}
.home-shops .actions{margin-top:16px;gap:10px 16px;justify-content:center}
.home-shops .store-rating{display:flex;align-items:center;width:fit-content;margin:16px auto 0;color:var(--muted);text-decoration:none}
.home-shops .store-rating:hover span:last-child{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.shops article{background:var(--surface);border-radius:var(--radius);overflow:hidden}
.shops article>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.shops article>div{padding:clamp(24px,3vw,36px)}
.shops h2{font-size:1.9rem;margin-bottom:8px}
.shops article p{color:var(--muted);margin-bottom:6px}
.store-status{font-weight:500;color:var(--ink)!important}
.store-phone{display:block;margin-top:14px;font-size:1.6rem;font-weight:600;letter-spacing:-.025em;color:var(--ink);text-decoration:none}
.store-rating{margin-top:18px;font-size:.92rem}
.store-rating .stars{margin-right:8px}
.email-line{padding-block:28px 64px;font-size:1.25rem}
.email-line a{color:var(--blue);text-underline-offset:5px}

/* PC gaming. */
.gaming-photo{background:var(--surface);border-radius:var(--radius);padding:24px;display:grid;place-items:center}
.gaming-photo img{max-height:380px;object-fit:contain;mix-blend-mode:multiply}
.gaming-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.rig{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-align:center}
.poster{display:block;width:100%;padding:16px 16px 0;border:0;background:transparent;color:var(--muted)}
.poster img{width:100%;height:250px;object-fit:contain;background:#fff;border-radius:var(--radius-s);transition:transform .4s var(--ease)}
.poster:hover img{transform:scale(1.02)}
.poster span{display:block;font-size:.85rem;padding:10px 0 0}
.rig-copy{display:flex;flex-direction:column;flex:1;padding:16px 20px 22px}
.rig-copy h3{margin-bottom:2px}
.rig-price{font-size:1.6rem;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:12px}
.rig-specs{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px;font-size:.92rem}
.rig-specs li{background:#fff;border-radius:8px;padding:7px 10px}
.rig-meta,.rig-note{font-size:.9rem;color:var(--muted);margin-bottom:8px}
.rig-copy .button{margin-top:auto}
.rig-footnote{margin:20px 0 0;font-size:.9rem;color:var(--muted);text-align:center}
.peripherals{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin-top:28px;padding:18px 22px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.peripherals span{color:var(--muted)}
.peripherals a{font-weight:500;color:var(--blue);text-underline-offset:4px}
/* Bajo los botones: en la cabecera de PC gaming como tarjeta blanca y en el bloque gaming de la portada sobre el azul. */
.page-hero .peripherals{width:fit-content;max-width:100%;margin:14px auto 0;padding:10px 20px;gap:6px 18px;background:#fff}
.gaming-banner .peripherals{margin:0 0 12px;padding:0;gap:6px 16px;background:none;box-shadow:none}
.gaming-banner .peripherals span{flex-basis:100%;color:#dfe6ff}
.gaming-banner .peripherals a{color:#fff}

dialog{border:0;border-radius:var(--radius);padding:20px;max-width:min(760px,calc(100% - 32px));max-height:90vh}
dialog::backdrop{background:rgba(11,18,48,.72)}
dialog .close{display:block;margin:0 0 12px auto;min-height:40px;padding:8px 16px;border:0;border-radius:999px;background:var(--surface);font-weight:500}
dialog img{max-height:76vh;width:100%;object-fit:contain}

/* Entrada suave al aparecer (solo con JS y sin movimiento reducido). */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .js [data-reveal].is-in{opacity:1;transform:none}
}

@media (max-width:1100px){
  nav#nav a{padding:10px 10px;font-size:.92rem}
  .products,.gaming-offers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .featured .product-card:nth-child(4){display:none}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .footer-main{grid-template-columns:1fr 1fr}
  .search{margin-left:0}
}
@media (max-width:760px){
  body{font-size:16px}
  .topbar .container>span{display:none}
  .topbar .container{gap:4px 16px;flex-wrap:wrap;padding-block:6px}
  .topbar a{white-space:nowrap}
  .topbar-shops{margin-left:0;justify-content:flex-start;gap:2px 16px}
  .header{flex-wrap:wrap;min-height:72px}
  .brand img{width:96px}
  .menu:not([hidden]){display:block;min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:var(--surface);font-weight:500}
  nav#nav{width:100%;display:grid;gap:4px;padding-bottom:16px}
  .js nav#nav:not(.open){display:none}
  nav#nav a{padding:12px 14px}
  nav#nav a.external-shop{margin:8px 0 0;text-align:center}
  .home-hero,.split,.service-grid,.product-detail,.shops,.gaming-banner{grid-template-columns:1fr}
  .hero-stores img{height:240px}
  .hero-stores>a>span{padding:12px 14px;font-size:.9rem}
  .benefits{grid-template-columns:1fr 1fr;gap:8px}
  .benefits>div{padding:16px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .featured .product-card:nth-child(4){display:flex}
  .gaming-offers{grid-template-columns:1fr}
  .product-copy h3{font-size:.95rem}
  .prices strong{font-size:1.2rem}
  .route-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:24px}
  .search{flex:1}
  .search input{width:100%}
  .sort{width:100%;justify-content:space-between}
  .service-list li{flex-basis:calc((100% - 10px) / 2);padding:10px;font-size:.92rem}
  .product-info .prices strong{font-size:2.1rem}
  .header{gap:10px}
  nav#nav a.cart-link{display:none}
  .mobile-cart{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;padding:8px 16px;border-radius:999px;background:var(--surface);font-weight:500;color:var(--ink);text-decoration:none}
  .cart{grid-template-columns:1fr}
  .cart-line{grid-template-columns:72px minmax(0,1fr);gap:14px;padding:14px}
  .cart-line img{width:72px;height:72px}
  .cart-line-side{grid-column:1/-1;grid-template-columns:auto auto 1fr;justify-items:start;align-items:center;gap:16px}
  .cart-line-side .text-button{justify-self:end}
  .cart-summary{position:static}
}
@media (max-width:420px){
  .topbar{font-size:.8125rem}
  .hero-stores>a>span>span{display:none}
  .hero-stores>a>span{white-space:nowrap;font-size:.82rem;padding:11px 10px}
}
@media (min-width:1101px){
  .hero-copy h1{font-size:min(3.1rem,calc((100cqi - 580px) * .072))}
}
@media (max-width:1100px){
  .topbar-hours{display:none}
  .hero-copy{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px clamp(12px,2vw,24px)}
  .hero-copy .hero-brand{display:contents}
  .hero-text,.hero-copy .rating{grid-column:1/-1}
  .hero-text{grid-row:2}
  .hero-copy .rating{grid-row:3;justify-self:center}
}
@media (max-width:760px){
  .shops article>.shop-photo{width:160px;height:100px}
  .benefits .benefit-icon{width:40px;height:40px;border-radius:10px}
  .benefits .icon{width:20px;height:20px}
  .rating{padding:6px 16px;font-size:1.05rem}
  .hero-copy{grid-template-columns:auto;justify-items:center}
  .hero-logo{grid-row:1;width:84px}
  .hero-copy h1{grid-row:2;font-size:min(clamp(2rem,1.2rem + 3.8vw,3.1rem),7.2cqi)}
  .hero-text{grid-row:3}
  .hero-copy .rating{grid-row:4}
  .page-hero .hero-brand{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Bloque gaming de la portada en el móvil: la foto pequeña encima. */
@media (max-width:760px){
  .gaming-banner{grid-template-columns:1fr;gap:14px}
  .gaming-banner img{width:150px}
  .page-hero .peripherals{gap:4px 14px;font-size:.95rem}
}