/* =========================================================
   Disser - Sistema de diseño
   Marca: azul marino #2B3591 · celeste #00AAE3
   Estilo: superficies claras, tarjetas redondeadas, botones tipo píldora
   ========================================================= */
:root {
  /* Marca */
  --navy: #2b3591;
  --navy-700: #222a75;
  --navy-900: #121845;
  --cyan: #00aae3;
  --cyan-700: #0079a8; /* celeste accesible para texto sobre blanco */

  /* Superficies */
  --surface: #ffffff;
  --surface-1: #f6f8fd;
  --surface-2: #eef2fb;
  --surface-3: #e3e9f7;
  --primary-container: #dfe3ff;
  --on-primary-container: #141a52;
  --cyan-container: #d9f3fc;

  /* Texto y líneas */
  --text: #11152e;
  --text-muted: #4d5473;
  --outline: #dde2ee;
  --outline-strong: #c4cadb;

  --success: #146c4b;
  --danger: #b3261e;

  /* Forma y elevación */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --e1: 0 1px 2px rgba(18, 24, 69, .08), 0 1px 3px 1px rgba(18, 24, 69, .05);
  --e2: 0 2px 6px 2px rgba(18, 24, 69, .07), 0 1px 2px rgba(18, 24, 69, .1);
  --e3: 0 12px 32px -6px rgba(18, 24, 69, .18), 0 4px 8px -4px rgba(18, 24, 69, .08);

  /* Movimiento */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.05, .7, .1, 1);

  --max-width: 1240px;
  --header-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex-shrink: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

/* Iconos de línea */
.btn svg, .icon-btn svg, .topbar svg, .perk svg, .chip svg, .contact-list svg,
.shipping__icon svg, .service__icon svg, .emergency__icon svg, .card__cta svg,
.item__remove svg, .form__status svg, .footer svg {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Botones ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease), color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; stroke-width: 2.4; }
/* Capa de estado (hover / presionado) al estilo Material */
.btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s; }
.btn:hover::after { opacity: .08; }
.btn:active::after { opacity: .14; }

.btn--filled { background: var(--navy); color: #fff; }
.btn--filled:hover { box-shadow: var(--e2); }
.btn--tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn--white { background: #fff; color: var(--navy); }
.btn--outline-light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .875rem; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--outline-strong); background: transparent; color: var(--text);
  transition: background-color .2s;
}
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2.4; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn--light { border-color: rgba(255, 255, 255, .3); color: #fff; }
.icon-btn--light:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Barra superior ---------- */
.topbar { background: var(--navy-900); color: rgba(255, 255, 255, .86); font-size: .82rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.topbar p { display: block; }
.topbar strong { color: #fff; }
.topbar svg { display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--cyan); }

/* ---------- Encabezado ---------- */
.header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow .2s;
}
.header.is-scrolled { box-shadow: var(--e1); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header__logo img { height: 70px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  font-weight: 600; font-size: .94rem; color: var(--text-muted);
  padding: 10px 16px; border-radius: 999px; transition: background-color .2s, color .2s;
}
.nav a:not(.btn):hover { background: var(--surface-2); color: var(--text); }
/* Página actual; en páginas con secciones se marca la sección visible */
.nav:not(.has-spy) a[aria-current="page"], .nav a.is-active { background: var(--primary-container); color: var(--on-primary-container); }
.nav__cta { margin-left: 12px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2.5px; border-radius: 2px; background: var(--navy); transition: transform .25s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Composición de fotos sin fondo ---------- */
.photo-art { position: relative; width: 100%; aspect-ratio: 520 / 420; }
.photo-art__glow {
  position: absolute; inset: 6% 8%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--cyan)) 50%, transparent) 0%, transparent 66%);
}
.photo-art__glow::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .16); }
.photo-art__img {
  position: absolute; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .38));
}
/* 1 foto */
.photo-art--1 .photo-art__img--1 { inset: 6%; width: 88%; height: 88%; }
/* 2 y 3 fotos: la primera atrás, las demás adelante */
.photo-art--2 .photo-art__img--1, .photo-art--3 .photo-art__img--1 { right: 0; top: 0; width: 84%; height: 74%; object-position: right center; }
.photo-art--2 .photo-art__img--2 { left: 0; bottom: 0; width: 56%; height: 52%; object-position: left bottom; }
.photo-art--3 .photo-art__img--2 { left: 0; bottom: 0; width: 48%; height: 48%; object-position: left bottom; }
.photo-art--3 .photo-art__img--3 { right: 2%; bottom: 0; width: 40%; height: 42%; object-position: right bottom; }
/* 4 fotos: dos atrás arriba y dos adelante abajo */
.photo-art--4 .photo-art__img--1 { right: 0; top: 0; width: 78%; height: 58%; object-position: right top; }
.photo-art--4 .photo-art__img--2 { left: 0; top: 18%; width: 58%; height: 40%; object-position: left center; }
.photo-art--4 .photo-art__img--3 { left: 2%; bottom: 0; width: 40%; height: 42%; object-position: left bottom; }
.photo-art--4 .photo-art__img--4 { right: 0; bottom: 0; width: 52%; height: 54%; object-position: right bottom; }

/* ---------- Carrusel ---------- */
.hero-wrap { padding: 16px 0 0; }
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl);
  background: var(--navy-900);
}
.hero__track { display: grid; }

.slide {
  grid-area: 1 / 1; position: relative; color: #fff;
  padding: 64px 64px 112px;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
  background:
    radial-gradient(900px 520px at 82% 40%, color-mix(in srgb, var(--accent, var(--cyan)) 38%, transparent), transparent 62%),
    linear-gradient(125deg, var(--navy-900) 0%, var(--navy) 60%, #2f3fae 100%);
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%);
}

.slide__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; position: relative; min-height: 420px; }

.slide__content > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.slide.is-active .slide__content > * { opacity: 1; transform: none; }
.slide.is-active .slide__content > :nth-child(2) { transition-delay: .06s; }
.slide.is-active .slide__content > :nth-child(3) { transition-delay: .12s; }
.slide.is-active .slide__content > :nth-child(4) { transition-delay: .18s; }
.slide.is-active .slide__content > :nth-child(5) { transition-delay: .24s; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; margin-bottom: 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  font-size: .8rem; font-weight: 700;
}
.badge svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.slide__title { font-size: clamp(2.3rem, 5.2vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.025em; margin-bottom: 16px; color: #fff; }
.slide__title span { display: block; color: var(--cyan); font-size: .48em; letter-spacing: -.01em; margin-top: 10px; font-weight: 700; }
.slide__text { font-size: 1.08rem; color: rgba(255, 255, 255, .84); max-width: 500px; margin-bottom: 22px; }

.slide__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.slide__chips li { padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: .84rem; font-weight: 600; }

.slide__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.slide__actions .btn--filled { background: var(--cyan); color: var(--navy-900); }

.slide__art { display: flex; justify-content: center; opacity: 0; transform: translateX(32px) scale(.97); transition: opacity .7s var(--ease-out) .1s, transform .7s var(--ease-out) .1s; }
.slide.is-active .slide__art { opacity: 1; transform: none; }
.slide__art .photo-art { max-width: 540px; }
/* La primera foto viene cortada a la derecha: se apoya en el borde del banner */
.slide--bleed .slide__art { justify-content: flex-end; margin-right: -64px; }
.slide--bleed .photo-art--1 .photo-art__img--1 { inset: 8% 0 auto auto; width: 96%; height: 84%; object-position: right center; }
.slide.is-active .photo-art__img--1 { animation: float 7s ease-in-out infinite; }
.slide.is-active .photo-art__img--2 { animation: float 7s ease-in-out -2.3s infinite; }
.slide.is-active .photo-art__img--3 { animation: float 7s ease-in-out -4.6s infinite; }
.slide.is-active .photo-art__img--4 { animation: float 7s ease-in-out -1.2s infinite; }
@keyframes float { 50% { translate: 0 -8px; } }

/* Mosaico de productos (bombas y eléctricos) */
.tiles-art {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
  width: 100%; max-width: 500px; aspect-ratio: 500 / 400;
}
.tile {
  position: relative; display: grid; place-items: center; margin: 0;
  border-radius: 24px; background: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, #fff 0%, #eef2fb 100%); }
.tile--1 { grid-row: 1 / 3; }
.tile img { position: relative; width: auto; height: auto; max-width: 78%; max-height: 66%; filter: drop-shadow(0 12px 14px rgba(18, 24, 69, .22)); }
.tile figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--navy); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
}
.slide.is-active .tile--1 { animation: float 7s ease-in-out infinite; }
.slide.is-active .tile--2 { animation: float 7s ease-in-out -2.3s infinite; }
.slide.is-active .tile--3 { animation: float 7s ease-in-out -4.6s infinite; }

/* Servicios: cuatro tarjetas con icono */
.services-art { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; width: 100%; max-width: 480px; }
.services-art__item {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 150px; padding: 20px; border-radius: 24px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: #fff;
}
.services-art__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--navy); }
.services-art__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.services-art__item.is-alert { background: linear-gradient(140deg, #ff7a59, #e5484d); border-color: transparent; box-shadow: 0 20px 40px -16px rgba(229, 72, 77, .7); }
.services-art__item.is-alert .services-art__icon { color: #e5484d; position: relative; }
.services-art__item.is-alert .services-art__icon::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid #fff; opacity: 0; }
.slide.is-active .services-art__item.is-alert .services-art__icon::after { animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.slide--services .badge svg { stroke: #ffb4a6; }
/* Fondos propios de los banners destacados */
.slide--services {
  background:
    radial-gradient(760px 520px at 78% 45%, rgba(255, 122, 89, .55), transparent 62%),
    linear-gradient(125deg, #121845 0%, #2b3591 50%, #6a2c7a 100%);
}
.slide--services .slide__title span { color: #ffb08f; }
.slide--store {
  background:
    radial-gradient(760px 520px at 78% 45%, rgba(63, 191, 107, .45), transparent 62%),
    linear-gradient(125deg, #121845 0%, #1f4f8f 55%, #0f7a6a 100%);
}
.slide--store .slide__title span { color: #8ff0b5; }

/* Tienda: mapa ilustrado */
.store-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 4 / 3; }
.store-art__map { width: 100%; height: 100%; display: block; border-radius: 28px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.store-art__pin {
  position: absolute; left: 51.25%; top: 50%; width: 64px; height: 64px; margin: -64px 0 0 -32px;
  display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(140deg, #ff7a59, #e5484d); box-shadow: 0 14px 24px -8px rgba(229, 72, 77, .7);
}
.store-art__pin svg { width: 30px; height: 30px; transform: rotate(45deg); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slide.is-active .store-art__pin { animation: bounce 2.4s ease-in-out infinite; }
@keyframes bounce { 50% { translate: 0 -10px; } }
.store-art__card {
  position: absolute; left: 6%; bottom: -6%; display: grid; gap: 2px;
  padding: 14px 18px; border-radius: 18px; background: #fff; color: var(--navy-900);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5);
}
.store-art__card img { height: 22px; width: auto; margin-bottom: 6px; }
.store-art__card strong { font-size: 1.05rem; }
.store-art__card span { font-size: .85rem; color: var(--text-muted); }
.slide--store .badge svg { stroke: #7be0a1; }

/* Banners de precio (distribuidor y mayorista): dorado sobre azul */
.slide--deal {
  background:
    radial-gradient(700px 480px at 78% 45%, rgba(255, 201, 77, .42), transparent 62%),
    linear-gradient(125deg, #0d1240 0%, #1d2370 55%, #2b3591 100%);
}
.slide--deal .slide__title span { color: #ffd166; }
.slide--deal .badge { background: rgba(255, 209, 102, .16); border-color: rgba(255, 209, 102, .45); color: #ffe3a1; }
.slide--deal .badge svg { stroke: #ffd166; }
.slide--deal .slide__actions .btn--filled { background: linear-gradient(135deg, #ffd166, #f5a524); color: #1a1600; }

.deal-art { position: relative; width: 100%; max-width: 500px; aspect-ratio: 5 / 4; }
.deal-tag {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: grid; justify-items: center; gap: 2px;
  padding: 34px 40px 30px 58px; transform: translate(-50%, -50%) rotate(-7deg);
  background: linear-gradient(140deg, #ffe08a 0%, #ffc94d 45%, #f5a524 100%); color: #1d1b4f;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%);
  border-radius: 10px; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .45));
}
.deal-tag__hole { position: absolute; left: 7%; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #1d2370; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .4); }
.deal-tag__small { font-size: .95rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; }
.deal-tag strong { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.deal-tag__line { margin-top: 6px; padding: 4px 12px; border-radius: 999px; background: #1d2370; color: #ffe08a; font-size: .78rem; font-weight: 800; }
.slide.is-active .deal-tag { animation: tagSwing 5s ease-in-out infinite; }
@keyframes tagSwing { 50% { transform: translate(-50%, -50%) rotate(-3deg); } }
.deal-art__item {
  position: absolute; margin: 0; width: 30%; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 20px; background: #fff; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .6);
}
.deal-art__item img { width: auto; height: auto; max-width: 74%; max-height: 62%; }
.deal-art__item figcaption { position: absolute; bottom: 8px; font-size: .68rem; font-weight: 800; color: var(--navy); }
.deal-art__item--1 { left: 0; top: 0; }
.deal-art__item--2 { right: 0; top: 4%; }
.deal-art__item--3 { left: 6%; bottom: 0; }
.deal-art__item--4 { right: 4%; bottom: 2%; }
.slide.is-active .deal-art__item--1, .slide.is-active .deal-art__item--4 { animation: float 7s ease-in-out infinite; }
.slide.is-active .deal-art__item--2, .slide.is-active .deal-art__item--3 { animation: float 7s ease-in-out -3.5s infinite; }

/* Sello circular "Precio mayorista" sobre las fotos */
.slide__art { position: relative; }
.stamp {
  position: absolute; left: 4%; top: 2%; z-index: 2;
  width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle, #ffd166 0 58%, #f5a524 59% 100%); color: #1d1b4f;
  box-shadow: 0 0 0 6px rgba(255, 209, 102, .25), 0 20px 30px -12px rgba(0, 0, 0, .5);
  transform: rotate(-12deg);
}
.stamp::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(29, 27, 79, .45); }
.stamp span { font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.stamp strong { font-size: 1.15rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.slide.is-active .stamp { animation: stampPop 3s ease-in-out infinite; }
@keyframes stampPop { 50% { transform: rotate(-12deg) scale(1.06); } }

.hero__controls { position: absolute; left: 64px; right: 64px; bottom: 32px; display: flex; align-items: center; gap: 12px; z-index: 2; }
.hero__dots { display: flex; gap: 4px; flex: 1; }
.hero__dot {
  position: relative; flex: 1 1 auto; max-width: 132px; height: 44px; padding: 16px 3px 0;
  background: none; border: none; cursor: pointer; text-align: left;
  color: rgba(255, 255, 255, .6); font-size: .68rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.hero__dot::before, .hero__dot::after { content: ""; position: absolute; left: 4px; top: 6px; height: 3px; border-radius: 3px; }
.hero__dot::before { right: 4px; background: rgba(255, 255, 255, .22); }
.hero__dot::after { width: 0; background: var(--cyan); }
.hero__dot:hover, .hero__dot[aria-selected="true"] { color: #fff; }
.hero__dot[aria-selected="true"]::after { width: 14px; }
.hero__dot.is-running::after { animation: progress var(--slide-time, 6s) linear forwards; }
@keyframes progress { to { width: calc(100% - 8px); } }

/* ---------- Beneficios ---------- */
.perks { padding: 24px 0 0; }
.perks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.perk { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface-1); }
.perk__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cyan-container); color: var(--navy); flex-shrink: 0; }
.perk__icon svg { width: 24px; height: 24px; }
.perk strong { display: block; font-size: .95rem; color: var(--text); line-height: 1.3; }
.perk span { font-size: .84rem; color: var(--text-muted); }

/* ---------- Secciones ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 48px 0; }
.section--tonal { background: var(--surface-1); }

.section__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.section__head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: left; }
.section__head--split h2 { margin-bottom: 0; }

.eyebrow { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-700); margin-bottom: 12px; }
.eyebrow--light { color: var(--cyan); }

h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); line-height: 1.14; letter-spacing: -.025em; font-weight: 800; color: var(--navy-900); margin-bottom: 14px; }
.section__lead { font-size: 1.08rem; color: var(--text-muted); }
.section__lead strong { color: var(--navy); }

/* ---------- Filtros (chips) ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--outline-strong); background: var(--surface); color: var(--text-muted);
  font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.chip:hover { background: var(--surface-2); }
.chip.is-selected { background: var(--primary-container); border-color: transparent; color: var(--on-primary-container); }
.chip.is-selected::before {
  content: ""; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Tarjetas de categoría ---------- */
.categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--outline); overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.card:hover { box-shadow: var(--e3); transform: translateY(-4px); border-color: transparent; }
.card[hidden] { display: none; }
.card.is-entering { animation: cardIn .4s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.card__media {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 55%, #fff 0%, transparent 70%),
    linear-gradient(160deg, var(--surface-2) 0%, var(--surface-3) 100%);
}
/* La foto siempre cabe en el cuadro, sea horizontal o vertical */
.card__media img {
  position: absolute; inset: 11%; width: 78%; height: 78%;
  object-fit: contain; filter: drop-shadow(0 16px 18px rgba(18, 24, 69, .2));
  transition: transform .5s var(--ease);
}
.card__media--photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
/* Fotos cortadas en la toma: el lado cortado se apoya en el borde del cuadro */
.card__media[data-bleed] img { inset: 14% 0 auto auto; width: 90%; height: 72%; object-position: right center; transform-origin: right center; }
.card__media[data-bleed~="bottom"] img { top: auto; bottom: 0; height: 80%; object-position: right bottom; transform-origin: right bottom; }
.card__media[data-bleed~="top"] img { top: 0; height: 80%; object-position: right top; transform-origin: right top; }
/* Fotos anchas (más horizontales que el cuadro): ocupan casi todo el ancho */
.card__media[data-wide] img { inset: 8% 5%; width: 90%; height: 84%; }
.card__tag { z-index: 1; }
.card:hover .card__media img { transform: scale(1.05); }

.card__tag {
  position: absolute; top: 14px; left: 14px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, .92); color: var(--navy);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--e1);
}

.card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__body h3 { font-size: 1.25rem; color: var(--navy-900); font-weight: 800; letter-spacing: -.01em; }
.card__body p { color: var(--text-muted); font-size: .94rem; }

.card__note {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--cyan-container); color: var(--on-primary-container);
  font-size: .84rem; font-weight: 700;
}
.card__note svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan-700); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.card__uses { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.card__uses li { font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--surface-1); color: var(--text-muted); border: 1px solid var(--outline); }

.card__cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0; background: none; border: none; cursor: pointer;
  font-weight: 700; color: var(--navy);
}
.card__cta svg { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .2s var(--ease); }
.card__cta:hover svg { transform: translateX(4px); }

/* ---------- Servicios ---------- */
.services-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.service-mini {
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  border-radius: var(--r-lg); background: var(--surface);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.service-mini:hover { box-shadow: var(--e2); transform: translateY(-3px); }
.service-mini h3 { font-size: 1.05rem; color: var(--navy-900); }
.service-mini p { font-size: .9rem; color: var(--text-muted); }
.service-mini span { margin-top: auto; font-weight: 700; font-size: .9rem; color: var(--navy); }

.service__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-container); color: var(--navy); }
.service__icon svg { width: 26px; height: 26px; }
.service__icon--alert { background: #ffe1dc; color: #a2281b; }

.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service {
  display: grid; grid-template-columns: auto 1fr; gap: 20px;
  padding: 32px; border-radius: var(--r-xl); background: var(--surface-1);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.service:target { box-shadow: 0 0 0 3px var(--cyan); }
.service h3 { font-size: 1.35rem; color: var(--navy-900); margin-bottom: 8px; letter-spacing: -.01em; }
.service > div > p { color: var(--text-muted); margin-bottom: 16px; }
.service ul { list-style: none; display: grid; gap: 8px; margin-bottom: 20px; }
.service li { display: flex; gap: 10px; font-size: .94rem; }
.service li::before {
  content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--cyan-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230079a8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.process { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.process__step { position: relative; padding: 28px 24px; border-radius: var(--r-lg); background: var(--surface); }
.process__num { display: inline-block; font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--cyan); line-height: 1; margin-bottom: 14px; }
.process__step h3 { font-size: 1.1rem; color: var(--navy-900); margin-bottom: 6px; }
.process__step p { color: var(--text-muted); font-size: .92rem; }

.emergency {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 32px 40px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(600px 300px at 0% 0%, rgba(255, 120, 90, .35), transparent 60%), linear-gradient(120deg, var(--navy-900), var(--navy));
}
.emergency h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 6px; }
.emergency p { color: rgba(255, 255, 255, .82); }
.emergency__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #ffb4a6; }
.emergency__icon svg { width: 32px; height: 32px; }

/* ---------- Encabezado de página (Servicios) ---------- */
.page-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center;
  padding: 56px 64px; border-radius: var(--r-xl); color: #fff; overflow: hidden;
  background:
    radial-gradient(800px 480px at 85% 40%, rgba(0, 170, 227, .38), transparent 62%),
    linear-gradient(125deg, var(--navy-900) 0%, var(--navy) 60%, #2f3fae 100%);
}
.page-hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 16px; }
.page-hero h1 span { display: block; color: var(--cyan); }
.page-hero p { font-size: 1.08rem; color: rgba(255, 255, 255, .84); max-width: 540px; margin-bottom: 28px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero__actions .btn--filled { background: var(--cyan); color: var(--navy-900); }
.page-hero__art .photo-art { max-width: 460px; margin-left: auto; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .85rem; color: rgba(255, 255, 255, .7); margin-bottom: 18px; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* ---------- Despachos ---------- */
.shipping {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding: 40px; border-radius: var(--r-xl); background: var(--cyan-container);
}
.shipping__icon { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; background: #fff; color: var(--navy); box-shadow: var(--e1); }
.shipping__icon svg { width: 42px; height: 42px; }
.shipping h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.shipping p { color: var(--on-primary-container); max-width: 640px; }
.steps-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.steps-inline li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--on-primary-container); }
.steps-inline span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 800; }

/* ---------- Formularios ---------- */
.quote { background: radial-gradient(900px 500px at 0% 0%, rgba(0, 170, 227, .22), transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy)); }
.quote__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.quote__info { color: #fff; position: sticky; top: calc(var(--header-h) + 24px); }
.quote__info h2 { color: #fff; }
.quote__info > p { color: rgba(255, 255, 255, .82); font-size: 1.04rem; margin-bottom: 28px; }

.contact-list { list-style: none; display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-list a:hover { color: var(--cyan); }
.contact-list svg { width: 44px; height: 44px; padding: 11px; border-radius: 14px; background: rgba(255, 255, 255, .1); color: var(--cyan); }

.form { background: var(--surface); border-radius: var(--r-xl); padding: 40px; box-shadow: var(--e3); display: grid; gap: 28px; }
.form__group { border: none; display: grid; gap: 14px; min-width: 0; }
.form__group legend { font-size: 1.05rem; font-weight: 800; color: var(--navy-900); margin-bottom: 14px; padding: 0; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 700; }
.field label span { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--outline-strong); border-radius: 12px; background: #fff;
  font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 116px; }
.field select {
  appearance: none; padding-right: 44px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b3591' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9aa3bd; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.field select:disabled { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--outline); cursor: not-allowed; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.field__error { color: var(--danger); font-size: .82rem; font-weight: 600; }
.field__error:empty { display: none; }
.field__help { font-size: .82rem; color: var(--text-muted); }

.items { display: grid; gap: 10px; }
.item {
  display: grid; gap: 12px; align-items: end;
  /* Dos líneas: material y tipo arriba; medida, cantidad y quitar abajo */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  grid-template-areas: "mat tipo rm" "size qty .";
  padding: 16px; border-radius: var(--r-md); background: var(--surface-1);
  animation: itemIn .3s var(--ease-out);
}
@keyframes itemIn { from { opacity: 0; transform: translateY(-6px); } }
.item .field label { font-size: .78rem; }
.item .field--material { grid-area: mat; }
.item .field--type { grid-area: tipo; }
.item .field--size { grid-area: size; }
.item .field--qty { grid-area: qty; }
.item__remove {
  grid-area: rm; justify-self: end;
  width: 44px; height: 52px; border-radius: 12px; border: none; background: transparent;
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s;
}
.item__remove:hover { background: #fde4e1; color: var(--danger); }
.item__remove:disabled { opacity: .3; cursor: not-allowed; background: transparent; color: var(--text-muted); }
.item__remove svg { width: 20px; height: 20px; }
#add-item { justify-self: start; }

.service-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.service-option { position: relative; }
.service-option input { position: absolute; opacity: 0; pointer-events: none; }
.service-option label {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  border: 1px solid var(--outline-strong); border-radius: var(--r-md); cursor: pointer;
  font-weight: 700; font-size: .92rem; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.service-option label:hover { background: var(--surface-1); }
.service-option .service__icon { width: 40px; height: 40px; border-radius: 12px; }
.service-option .service__icon svg { width: 20px; height: 20px; }
.service-option input:checked + label { border-color: var(--navy); background: var(--primary-container); box-shadow: 0 0 0 1px var(--navy); }
.service-option input:focus-visible + label { outline: 3px solid var(--cyan); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Enviar por correo y por WhatsApp, lado a lado (uno sobre otro en celular) */
.form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__actions .btn--whatsapp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
@media (max-width: 600px) { .form__actions { grid-template-columns: 1fr; } }
.form__note { font-size: .84rem; color: var(--text-muted); text-align: center; margin-top: -14px; }

.form__status:empty { display: none; }
.form__status { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); font-weight: 600; font-size: .95rem; }
.form__status svg { width: 22px; height: 22px; stroke-width: 2.4; margin-top: 1px; }
.form__status.is-success { background: #dcf3e8; color: var(--success); }
.form__status.is-error { background: #fce4e1; color: var(--danger); }
.form__status a { text-decoration: underline; }
.status-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.form__status .status-actions a { text-decoration: none; }
.btn--whatsapp { background: #1fa855; color: #fff; }

.spinner { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading { pointer-events: none; opacity: .85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pie de página ---------- */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .74); }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 40px; }
.footer__brand img { height: 76px; width: auto; margin-bottom: 16px; }
.footer__brand p { font-size: .94rem; max-width: 340px; }
.footer h3 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 2px; }
.footer ul a { display: inline-flex; min-height: 36px; align-items: center; font-size: .92rem; transition: color .2s; }
.footer ul a:hover { color: var(--cyan); }
.footer__sub { margin-top: 14px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
/* Etiquetas de categoría que llevan a su producto */
.card__uses a { display: block; margin: -4px -10px; padding: 4px 10px; border-radius: inherit; color: var(--navy); text-decoration: none; position: relative; z-index: 2; }
.card__uses li:has(a) { background: var(--primary-container); border-color: transparent; }
.card__uses a:hover { background: var(--navy); color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 20px; padding-bottom: 24px; font-size: .84rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 58px; height: 58px; border-radius: 18px; background: #1fa855;
  display: grid; place-items: center; box-shadow: var(--e3);
  transition: transform .2s var(--ease), border-radius .2s;
}
.whatsapp:hover { transform: scale(1.06); border-radius: 50%; }
.whatsapp svg { width: 30px; height: 30px; fill: #fff; }

/* =========================================================
   Páginas de categoría y producto
   ========================================================= */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico { width: 18px; height: 18px; stroke-width: 2.4; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.section--tight-top { padding-top: 0; }
.section__head--left { margin: 0 0 32px; text-align: left; max-width: 760px; }

/* Encabezado de categoría: foto apoyada en el borde derecho */
.page-hero .badge { margin-bottom: 14px; }
.page-hero--bleed .page-hero__art { margin-right: -64px; }
.page-hero--bleed .page-hero__art .photo-art { margin-left: auto; }
.page-hero--bleed .photo-art--1 .photo-art__img--1 { inset: 8% 0 auto auto; width: 96%; height: 84%; object-position: right center; }
.page-hero--bleed .photo-art--2 .photo-art__img--1 { object-position: right center; }

/* Tarjetas de productos de una línea */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--outline);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.pcard:hover { box-shadow: var(--e3); transform: translateY(-4px); border-color: transparent; }
.pcard__media, .gallery__main {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 55%, #fff 0%, transparent 70%), linear-gradient(160deg, var(--surface-2) 0%, var(--surface-3) 100%);
}
.pcard__media img, .gallery__main img {
  position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(18, 24, 69, .2)); transition: transform .5s var(--ease);
}
.pcard__media[data-bleed] img, .gallery__main[data-bleed] img { inset: 14% 0 auto auto; width: 90%; height: 72%; object-position: right center; transform-origin: right center; }
.pcard__media[data-bleed~="bottom"] img, .gallery__main[data-bleed~="bottom"] img { top: auto; bottom: 0; height: 80%; object-position: right bottom; }
.pcard__media[data-bleed~="top"] img, .gallery__main[data-bleed~="top"] img { top: 0; height: 80%; object-position: right top; }
.pcard:hover .pcard__media img { transform: scale(1.05); }
/* Fotos pequeñas de catálogo: tamaño real, centradas, sin ampliar (así no se pixelan) */
.pcard__media[data-native] img, .gallery__main[data-native] img, .card__media[data-native] img {
  inset: 0; margin: auto; width: auto; height: auto; max-width: 72%; max-height: 74%;
}
.page-hero--compact .page-hero__art .photo-art { max-width: 380px; margin-left: auto; }
/* En la galería del producto, ampliación moderada que aún se ve nítida */
.gallery__main[data-native] img { max-width: 48%; max-height: 50%; transform: scale(1.5); }
.pcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard__body h3 { font-size: 1.15rem; color: var(--navy-900); }
.pcard__body p { color: var(--text-muted); font-size: .92rem; }
.pcard__use { padding: 10px 12px; border-radius: 10px; background: var(--surface-1); }
.pcard__use strong { color: var(--navy); }
.pcard__link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--navy); font-size: .92rem; }
.pcard__link .ico { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .2s var(--ease); }
.pcard:hover .pcard__link .ico { transform: translateX(4px); }

/* Encabezado de producto */
.product-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding: 24px 0 8px; }
.gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.gallery__main { border-radius: var(--r-xl); }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery__thumb {
  width: 76px; height: 76px; padding: 8px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; background: var(--surface-2); transition: border-color .2s, background-color .2s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb:hover { background: var(--surface-3); }
.gallery__thumb.is-selected { border-color: var(--navy); background: #fff; }
.product-hero__info .breadcrumb { color: var(--text-muted); }
.product-hero__info .breadcrumb a:hover { color: var(--navy); }
.product-hero__info h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.025em; color: var(--navy-900); margin-bottom: 16px; }
.product-hero__lead { font-size: 1.06rem; color: var(--text-muted); margin-bottom: 24px; }
.facts { list-style: none; display: grid; gap: 10px; margin-bottom: 28px; padding: 20px; border-radius: var(--r-lg); background: var(--surface-1); }
.facts li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.facts .ico { color: var(--cyan-700); margin-top: 2px; stroke-width: 2.6; }
.facts strong { color: var(--navy-900); }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Características y medidas */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: start; }
.checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-1); font-weight: 600; font-size: .94rem; }
.checklist .ico { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--cyan-container); color: var(--cyan-700); stroke-width: 3; }
.sizes-card { padding: 28px; border-radius: var(--r-xl); border: 1px solid var(--outline); background: var(--surface); }
.sizes-card h3 { font-size: 1.1rem; color: var(--navy-900); margin-bottom: 14px; }
.size-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.size-chips li { padding: 6px 12px; border-radius: 8px; background: var(--primary-container); color: var(--on-primary-container); font-weight: 700; font-size: .86rem; }
.sizes-card__note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 700; font-size: .9rem; color: var(--navy); }
.sizes-card__note .ico { color: var(--cyan-700); stroke-width: 3; }
.tips { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--outline); }
.tips h4 { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--navy-900); margin-bottom: 8px; }
.tips h4 .ico { color: #b7791f; }
.tips ul { padding-left: 18px; display: grid; gap: 6px; color: var(--text-muted); font-size: .92rem; }

/* Casos de uso */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.use-card { padding: 24px; border-radius: var(--r-lg); background: var(--surface-1); }
.use-card__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-container); color: var(--navy); margin-bottom: 14px; }
.use-card__icon .ico { width: 26px; height: 26px; }
.use-card h3 { font-size: 1.05rem; color: var(--navy-900); margin-bottom: 4px; }
.use-card p { color: var(--text-muted); font-size: .92rem; }

/* Tabla técnica (PN, clases, medidas) */
.spec-table { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); overflow: hidden; }
.spec-table table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td { padding: 16px 20px; text-align: left; font-size: .95rem; border-bottom: 1px solid var(--outline); vertical-align: middle; }
.spec-table thead th { background: var(--navy); color: #fff; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-bottom: 0; }
.spec-table tbody tr:last-child > * { border-bottom: 0; }
.spec-table tbody tr:hover { background: var(--surface-1); }
.spec-pill { display: inline-block; padding: 4px 12px; border-radius: 8px; background: var(--cyan-container); color: var(--on-primary-container); font-weight: 800; white-space: nowrap; }
.spec-table__link { text-align: right; }
.spec-table__link a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.callout { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--primary-container); color: var(--on-primary-container); font-size: .94rem; }
.callout .ico { flex-shrink: 0; margin-top: 1px; }

/* Ficha técnica: tablas y curvas del fabricante, plegables por serie */
.datasheets { display: grid; gap: 12px; }
.datasheet { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); overflow: hidden; }
.datasheet summary {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 20px;
  cursor: pointer; list-style: none; font-weight: 800; color: var(--navy-900);
}
.datasheet summary::-webkit-details-marker { display: none; }
.datasheet summary::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-left: 4px;
  border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy);
  transform: translateY(-3px) rotate(45deg); transition: transform .2s;
}
.datasheet[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.datasheet summary:hover { background: var(--surface-1); }
.datasheet summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.datasheet__title { flex: 1; min-width: 0; }
.datasheet__count { flex-shrink: 0; padding: 4px 10px; border-radius: 8px; background: var(--cyan-container); color: var(--on-primary-container); font-size: .8rem; font-weight: 700; }
.datasheet__body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px;
  padding: 4px 20px 20px; border-top: 1px solid var(--outline);
}
.datasheet__fig { margin: 0; padding-top: 16px; min-width: 0; }
.datasheet__fig figcaption { margin-bottom: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.datasheet__zoom { display: block; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--outline); background: #fff; padding: 8px; }
.datasheet__zoom img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* Las tablas tienen letra chica: en pantallas angostas se desplazan a lo ancho en vez de achicarse */
.datasheet__fig--table .datasheet__zoom img { min-width: 480px; }
@media (max-width: 640px) {
  .datasheet summary { padding: 12px 16px; }
  .datasheet__body { padding: 0 12px 16px; }
}

/* Banner intermedio de cotización: tarjeta clara con borde degradado */
.section--strip { padding: 8px 0 72px; }
.quote-strip {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  padding: 26px 30px; border-radius: var(--r-xl);
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--navy) 0%, var(--cyan) 55%, #7be0a1 100%) border-box;
  box-shadow: 0 24px 48px -28px rgba(43, 53, 145, .45);
}
/* Brillo que recorre la tarjeta para llamar la atención sin molestar */
.quote-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(0, 170, 227, .12), transparent);
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -40%; } 100% { left: 120%; } }
.quote-strip__icon {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--navy), var(--cyan)); color: #fff;
  box-shadow: 0 12px 24px -10px rgba(0, 170, 227, .7);
}
.quote-strip__icon .ico { width: 30px; height: 30px; }
.quote-strip h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 8px; }
.quote-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.quote-strip li { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--text-muted); }
.quote-strip li .ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--cyan-container); color: var(--cyan-700); stroke-width: 3.2; }
.quote-strip__actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.btn--whatsapp-soft { background: #dcf3e8; color: #146c4b; }

@media (max-width: 1100px) {
  .quote-strip { grid-template-columns: auto minmax(0, 1fr); }
  .quote-strip__actions { grid-column: 1 / -1; }
  .quote-strip__actions .btn { flex: 1; }
}
@media (max-width: 640px) {
  .section--strip { padding: 0 0 56px; }
  .quote-strip { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 18px; border-radius: var(--r-lg); }
  .quote-strip__icon { width: 48px; height: 48px; border-radius: 14px; }
  .quote-strip__icon .ico { width: 24px; height: 24px; }
  .quote-strip ul { flex-direction: column; }
  .quote-strip__actions { flex-direction: column; }
  .quote-strip__actions .btn { width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .quote-strip::after { display: none; } }

/* Catálogo completo de una categoría */
.catalog__tools {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 5;
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: var(--e2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.catalog__search { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-width: 0; }
.catalog__search .ico { width: 22px; height: 22px; color: var(--text-muted); }
.catalog__search input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; font-size: 16px; }
.catalog__search input:focus { outline: none; }
.catalog__search:focus-within { box-shadow: inset 0 -2px 0 var(--cyan); }
.catalog__count { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: var(--primary-container); color: var(--on-primary-container); font-size: .85rem; font-weight: 800; }

/* Filtro por línea: chips en escritorio, desplegable en celular */
.catalog__nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.catalog__nav .chip { min-height: 36px; padding: 0 12px; font-size: .84rem; }
.catalog__nav .chip span { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: .74rem; font-weight: 800; }
.catalog__nav .chip.is-selected span { background: #fff; }
.catalog__select { display: none; margin-bottom: 14px; }
.catalog__select span { font-size: .84rem; font-weight: 700; }
.catalog__filtered {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--cyan-container); color: var(--on-primary-container); font-size: .92rem;
}
.catalog__filtered[hidden] { display: none; }
.catalog__filtered button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; }

/* Tarjetas de producto: enlace principal en toda la tarjeta + enlace al catálogo encima */
.pcard { position: relative; }
.pcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pcard__catalog {
  position: relative; z-index: 1; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: auto; padding: 0 12px;
  border-radius: 12px; background: var(--primary-container); color: var(--on-primary-container); font-size: .88rem; font-weight: 700;
  white-space: nowrap; transition: background-color .2s;
}
/* El botón del catálogo va sobre el enlace: así "Ver características" queda siempre al pie y alineado entre tarjetas */
.pcard__catalog + .pcard__link { margin-top: 0; }
@media (max-width: 400px) {
  .pcard__catalog { padding: 6px 10px; gap: 6px; font-size: .8rem; white-space: normal; text-align: center; }
}
.pcard__catalog:hover { background: #cfd5ff; }
.pcard__catalog .ico { width: 18px; height: 18px; }

/* Enlace al catálogo en el encabezado de la categoría */
.page-hero__catalog {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 44px;
  color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45);
}
.page-hero__catalog:hover { text-decoration-color: #fff; }
.page-hero__catalog .ico { width: 20px; height: 20px; color: var(--cyan); }

/* Recuadro en la página de producto hacia sus modelos del catálogo */
.catalog-box {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 16px 12px 12px;
  border-radius: var(--r-lg); border: 1px solid var(--outline); background: var(--surface);
  box-shadow: var(--e1); transition: box-shadow .2s, border-color .2s;
}
.catalog-box:hover { box-shadow: var(--e2); border-color: transparent; }
.catalog-box__thumbs { display: flex; flex-shrink: 0; }
.catalog-box__thumbs img { width: 40px; height: 40px; padding: 4px; object-fit: contain; border-radius: 10px; background: var(--surface-2); border: 2px solid #fff; }
.catalog-box__thumbs img + img { margin-left: -12px; }
.catalog-box__text { display: grid; flex: 1; min-width: 0; }
.catalog-box__text strong { color: var(--navy-900); }
.catalog-box__text span { font-size: .84rem; color: var(--text-muted); }
.catalog-box > .ico { width: 22px; height: 22px; color: var(--navy); flex-shrink: 0; }

.catalog__lines { display: grid; gap: 16px; }
.cat-line { padding: 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); }
.cat-line[hidden] { display: none; }
.cat-line__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cat-line__img { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--surface-2); overflow: hidden; }
.cat-line__img img { width: 80%; height: 80%; object-fit: contain; }
.cat-line__head h3 { font-size: 1.1rem; color: var(--navy-900); line-height: 1.25; }
.cat-line__head p { font-size: .85rem; color: var(--text-muted); }

.cat-items { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cat-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border-radius: 14px; background: var(--surface-1); }
.cat-item[hidden] { display: none; }
.cat-item__img { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #fff; overflow: hidden; }
/* Tamaño fijo con object-fit: las fotos altas (bombas de pozo) no se salen del cuadro */
.cat-item__img img { width: 84%; height: 84%; object-fit: contain; }
.cat-item__text { display: grid; min-width: 0; }
.cat-item__code { font-size: .72rem; font-weight: 800; color: var(--cyan-700); letter-spacing: .04em; }
.cat-item__name { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.cat-item__quote {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: .82rem; font-weight: 700; transition: background-color .2s;
}
.cat-item__quote:hover { background: var(--navy-700); }
.cat-line__more {
  margin-top: 12px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary-container); color: var(--on-primary-container); font-weight: 700;
}
.cat-line__more[hidden] { display: none; }
.catalog__empty { margin-top: 16px; padding: 18px; border-radius: var(--r-md); background: #fff; color: var(--text-muted); text-align: center; }
.catalog__empty a { color: var(--navy); font-weight: 700; text-decoration: underline; }

@media (max-width: 900px) {
  .cat-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .catalog__nav { display: none; }
  .catalog__select { display: flex; }
  .catalog-box__thumbs img:nth-child(n+3) { display: none; }
  .catalog__tools { border-radius: var(--r-md); flex-wrap: wrap; gap: 6px; padding: 6px; }
  .catalog__search { padding: 0 10px; flex-basis: 100%; }
  .catalog__count { margin-left: auto; padding: 4px 10px; font-size: .76rem; }
  .cat-line { padding: 14px; }
  .cat-line__img { width: 52px; height: 52px; border-radius: 12px; }
  .cat-item { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .cat-item__img { width: 40px; height: 40px; }
  .cat-item__name { font-size: .82rem; }
  .cat-item__quote { padding: 0 12px; font-size: .78rem; }
}

/* Franja final */
.cta-band {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 36px 40px; border-radius: var(--r-xl); color: #fff;
  background: radial-gradient(600px 300px at 100% 0%, rgba(0, 170, 227, .35), transparent 60%), linear-gradient(120deg, var(--navy-900), var(--navy));
}
.cta-band h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 6px; }
.cta-band p { color: rgba(255, 255, 255, .84); }
.disclaimer { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px; font-size: .84rem; color: var(--text-muted); text-align: center; }
.disclaimer .ico { width: 16px; height: 16px; flex-shrink: 0; }

/* Enlace "Ver productos" en las tarjetas del inicio */
.card__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.card__actions .card__cta { margin-top: 0; }
.card__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-weight: 700; color: var(--cyan-700); }
.card__more:hover { text-decoration: underline; }
.card__body h3 a:hover { color: var(--navy); text-decoration: underline; }

/* =========================================================
   Secciones destacadas del inicio: servicios y tienda
   ========================================================= */

/* Servicios: franja cálida que contrasta con el azul del sitio */
.promo-services {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; align-items: center;
  padding: 56px; border-radius: var(--r-xl); color: #fff;
  background:
    radial-gradient(600px 400px at 0% 0%, rgba(255, 214, 102, .35), transparent 60%),
    linear-gradient(125deg, #ff7a59 0%, #e5484d 45%, #a3246e 100%);
  box-shadow: 0 30px 60px -30px rgba(229, 72, 77, .8);
}
.promo-services__pipes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .18; }
.promo-services__pipes path { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; }
.promo-services__pipes circle { fill: #fff; }
.promo-services__eyebrow { display: inline-block; padding: 6px 14px; margin-bottom: 16px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.promo-services h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 14px; }
.promo-services__intro > p:not(.promo-services__eyebrow) { font-size: 1.08rem; color: rgba(255, 255, 255, .92); margin-bottom: 28px; max-width: 480px; }
.promo-services__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.promo-services__actions .btn--white { color: #b3236b; }
.btn--emergency { background: var(--navy-900); color: #fff; }
.pulse-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; }
.pulse-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #ff5a4f; animation: ping 1.6s ease-out infinite; }

.promo-services__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.promo-services__list a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px;
  border-radius: var(--r-lg); background: #fff; color: var(--text);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.promo-services__list a:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -18px rgba(0, 0, 0, .55); }
.promo-services__list strong { font-size: 1.05rem; color: var(--navy-900); }
.promo-services__list span:not(.promo-services__icon) { font-size: .88rem; color: var(--text-muted); }
.promo-services__icon { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px; display: grid; place-items: center; background: #ffe7df; color: #e5484d; }
.promo-services__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.promo-services__list .is-alert a { background: var(--navy-900); }
.promo-services__list .is-alert strong { color: #fff; }
.promo-services__list .is-alert span:not(.promo-services__icon) { color: rgba(255, 255, 255, .78); }
.promo-services__list .is-alert .promo-services__icon { background: #e5484d; color: #fff; }

/* Tienda: dirección protagonista + mapa real */
.promo-store {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: stretch;
  padding: 16px; border-radius: var(--r-xl);
  background: linear-gradient(135deg, #e6f7ee 0%, #d9f3fc 100%);
}
.promo-store__number {
  position: absolute; left: -10px; bottom: -60px; z-index: -1;
  font-size: clamp(9rem, 22vw, 17rem); font-weight: 800; line-height: 1; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px rgba(43, 53, 145, .12);
}
.promo-store__info { padding: 36px 24px 36px 36px; display: flex; flex-direction: column; justify-content: center; }
.promo-store__eyebrow {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  padding: 6px 14px 6px 10px; border-radius: 999px; background: #0f7a6a; color: #fff;
  font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.promo-store__eyebrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.promo-store h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 12px; }
.promo-store h2 span { color: #0f7a6a; white-space: nowrap; }
.promo-store__lead { color: var(--text-muted); font-size: 1.05rem; margin-bottom: 20px; max-width: 460px; }
.promo-store__facts { list-style: none; display: grid; gap: 6px; margin-bottom: 26px; }
.promo-store__facts li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--navy-900); }
.promo-store__facts svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #fff; fill: none; stroke: #0f7a6a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.promo-store__facts a { display: inline-flex; align-items: center; min-height: 44px; }
.promo-store__facts a:hover { color: #0f7a6a; text-decoration: underline; }
.promo-store__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.promo-store__map { position: relative; min-height: 380px; border-radius: 24px; overflow: hidden; background: #dfe6f5; box-shadow: var(--e2); }
.promo-store__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .promo-services { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; gap: 28px; }
  .promo-store { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .promo-store__info { padding: 24px 12px 16px; }
  .promo-store__map { min-height: 280px; }
}
@media (max-width: 640px) {
  .promo-services { padding: 28px 18px; border-radius: var(--r-lg); }
  /* Tarjetas de servicio en filas: icono a la izquierda, texto a la derecha */
  .promo-services__list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .promo-services__list a { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; }
  .promo-services__list .promo-services__icon { grid-row: 1 / 3; margin: 0; }
  .promo-services__list strong { font-size: .95rem; }
  .promo-services__list span:not(.promo-services__icon) { font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .promo-services__icon { width: 38px; height: 38px; border-radius: 11px; }
  .promo-services__icon svg { width: 20px; height: 20px; }
  .promo-services__actions .btn, .promo-store__actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .promo-store { padding: 10px; border-radius: var(--r-lg); }
  .promo-store h2 span { white-space: normal; }
  .promo-store__map { min-height: 240px; border-radius: 18px; }
}

/* ---------- Volver arriba ---------- */
.to-top {
  position: fixed; right: 26px; bottom: 90px; z-index: 40;
  width: 46px; height: 46px; border-radius: 14px; border: none; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; color: var(--navy); box-shadow: var(--e3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, visibility .25s, transform .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .categories { grid-template-columns: repeat(2, 1fr); }
  .services-mini { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .perks__grid { grid-template-columns: repeat(2, 1fr); }
  .quote__inner { grid-template-columns: 1fr; gap: 40px; }
  .quote__info { position: static; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .header__logo img { height: 56px; }
  .topbar .topbar__extra { display: none; }
  .topbar__inner { justify-content: center; }
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; top: var(--header-h); left: 12px; right: 12px;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    background: #fff; border-radius: var(--r-lg); box-shadow: var(--e3);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform .25s var(--ease), opacity .2s, visibility .2s;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a:not(.btn) { padding: 14px 16px; font-size: 1rem; }
  .nav__cta { margin: 8px 0 0; }

  .slide { padding: 28px 24px 96px; }
  .slide__inner { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .slide__art { order: -1; }
  .slide__art .photo-art { max-width: 300px; }
  .slide--bleed .slide__art { margin-right: -24px; }
  .slide__text { font-size: 1rem; }
  .hero__controls { left: 24px; right: 24px; bottom: 20px; }
  .hero__dot { font-size: 0; padding-top: 0; }
  .hero__dot::before, .hero__dot::after { top: 20px; }

  .page-hero { grid-template-columns: minmax(0, 1fr); padding: 36px 24px; }
  .page-hero__art { order: -1; }
  .page-hero__art .photo-art { max-width: 280px; margin: 0 auto; }

  .shipping { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
  .shipping__icon { width: 64px; height: 64px; border-radius: 20px; }
  .shipping__icon svg { width: 30px; height: 30px; }
  .services { grid-template-columns: 1fr; }
  .emergency { grid-template-columns: 1fr; padding: 28px; text-align: left; }
  .emergency .btn, .shipping .btn { width: 100%; white-space: normal; }
  .section__head--split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .hero-wrap { padding-top: 8px; }
  .hero, .page-hero { border-radius: var(--r-lg); }
  .section { padding: 64px 0; }
  .categories, .services-mini, .process, .perks__grid { grid-template-columns: 1fr; }
  .perks__grid { gap: 8px; }
  .perk { padding: 14px; }
  /* Categorías del inicio en formato compacto horizontal (son 23) */
  .categories { gap: 12px; }
  .categories .card { flex-direction: row; }
  .categories .card:hover { transform: none; }
  .categories .card__media { flex: 0 0 112px; aspect-ratio: auto; }
  .categories .card__media--photo img { inset: 0; }
  /* En la tarjeta angosta del celular la foto ancha se apoya en el borde derecho */
  .categories .card__media[data-wide] img { inset: 0 auto 0 8%; width: 150%; max-width: none; height: 100%; object-position: left center; }
  .categories .card__tag { display: none; }
  .categories .card__body { padding: 14px 16px; gap: 6px; min-width: 0; }
  .categories .card__body h3 { font-size: 1.05rem; }
  .categories .card__body > p:not(.card__note) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; }
  .categories .card__uses:not(:has(a)) { display: none; }
  .categories .card__uses { gap: 6px; margin: 2px 0; }
  .categories .card__uses li { font-size: .76rem; }
  .categories .card__uses a { padding: 6px 10px; margin: -4px -10px; }
  .categories .card__note { font-size: .76rem; padding: 5px 10px; }
  .categories .card__actions { gap: 0 16px; }

  /* Filtros: todos visibles en dos filas, sin deslizar */
  .chips { gap: 8px; margin-bottom: 24px; }
  .chip { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 0 10px; min-height: 44px; }
  .service { grid-template-columns: 1fr; padding: 24px; }
  .form { padding: 24px 18px; border-radius: var(--r-lg); }
  .form__grid, .service-picker { grid-template-columns: 1fr; }
  .item { grid-template-columns: minmax(0, 1fr) 88px 44px; grid-template-areas: "mat mat mat" "tipo tipo tipo" "size qty rm"; padding: 14px; }
  /* Banner compacto: cabe en la pantalla con sus controles visibles */
  .slide { padding: 16px 20px 84px; }
  .slide__art .photo-art { max-width: 230px; }
  .slide--bleed .slide__art { margin-right: -20px; }
  .slide--bleed .slide__art .photo-art { max-width: 270px; }
  .deal-art { max-width: 236px; }
  .slide--deal.slide--bleed .slide__art .photo-art { max-width: 210px; }
  .deal-tag { padding: 18px 20px 16px 34px; }
  .deal-tag__small { font-size: .62rem; }
  .deal-tag strong { font-size: 1.5rem; }
  .deal-tag__line { font-size: .58rem; padding: 3px 8px; margin-top: 3px; }
  .deal-tag__hole { width: 10px; height: 10px; margin-top: -5px; }
  .deal-art__item { border-radius: 12px; }
  .deal-art__item figcaption { font-size: .54rem; bottom: 4px; }
  .stamp { width: 82px; height: 82px; left: 0; }
  .stamp::before { inset: 5px; }
  .stamp span { font-size: .52rem; }
  .stamp strong { font-size: .74rem; }
  .tiles-art { max-width: 250px; gap: 8px; }
  .tile { border-radius: 16px; }
  .tile figcaption { left: 6px; bottom: 6px; font-size: .62rem; padding: 2px 6px; }
  /* Servicios en una sola fila de iconos para no alargar el banner */
  .services-art { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 100%; gap: 6px; }
  .services-art__item { min-height: 0; padding: 10px 4px; gap: 6px; align-items: center; text-align: center; font-size: .66rem; border-radius: 14px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; min-width: 0; }
  .services-art__icon { width: 34px; height: 34px; border-radius: 10px; }
  .services-art__icon svg { width: 18px; height: 18px; }
  .store-art { max-width: 240px; margin-bottom: 14px; }
  .store-art__map { border-radius: 18px; }
  .store-art__pin { width: 44px; height: 44px; margin: -44px 0 0 -22px; }
  .store-art__pin svg { width: 22px; height: 22px; }
  .store-art__card { padding: 8px 12px; border-radius: 12px; }
  .store-art__card img { height: 14px; margin-bottom: 2px; }
  .store-art__card strong { font-size: .82rem; }
  .store-art__card span { font-size: .72rem; }
  .badge { margin-bottom: 12px; font-size: .74rem; }
  .slide__title { font-size: 2rem; margin-bottom: 10px; }
  .slide__title span { margin-top: 6px; }
  .slide__text { font-size: .95rem; margin-bottom: 18px; }
  .slide__chips { display: none; }
  .slide__actions { gap: 8px; }
  .slide__actions .btn { flex: 1 0 auto; min-height: 48px; padding: 0 16px; font-size: .9rem; }
  .btn--block { white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; }
  #hero-prev, #hero-next { display: none; }
  .hero__controls { left: 16px; right: 16px; bottom: 12px; }
  .hero__dot { font-size: 0; padding-top: 0; }
  .hero__dot::before, .hero__dot::after { top: 20px; }


  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .footer ul a { min-height: 44px; }
  .footer__bottom { padding-bottom: 96px; }
}

/* Categorías y productos: tablet y celular */
@media (max-width: 1100px) {
  .product-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gallery { position: static; max-width: 640px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .page-hero--bleed .page-hero__art { margin-right: -24px; }
  .page-hero--bleed .page-hero__art .photo-art { margin: 0 0 0 auto; }
  .cta-band { flex-direction: column; align-items: stretch; padding: 28px; }
  .cta-band .btn { width: 100%; white-space: normal; }
}
@media (max-width: 640px) {
  .product-hero { padding-top: 12px; }
  .gallery__thumb { width: 64px; height: 64px; }
  .product-hero__actions .btn,
  .page-hero__actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; padding-top: 10px; padding-bottom: 10px; }
  .checklist { grid-template-columns: 1fr; }
  .sizes-card { padding: 22px; }
  .section__head--left { margin-bottom: 24px; }

  /* La tabla técnica se convierte en fichas apiladas */
  .spec-table { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .spec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec-table table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; }
  .spec-table tr { margin-bottom: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); }
  .spec-table tbody tr:hover { background: var(--surface); }
  .spec-table th, .spec-table td { padding: 6px 0; border: 0; }
  .spec-table td[data-label]::before { content: attr(data-label); display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .spec-table th[scope="row"] { padding-bottom: 8px; }
  .spec-table__link { text-align: left; }
  .spec-pill { white-space: normal; }
}

/* Teléfonos pequeños */
@media (max-width: 400px) {
  /* Palabras largas como "hidroneumáticos" se dividen con guion */
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .slide__actions .btn--outline-light { display: none; }
  .slide__art .photo-art { max-width: 190px; }
  .slide--bleed .slide__art .photo-art { max-width: 230px; }
  .slide__title { font-size: 1.8rem; }
  .page-hero h1 { font-size: 2rem; }
  /* Fila de material del formulario: medida a lo ancho, cantidad y quitar debajo */
  /* Teléfonos pequeños: la medida ocupa toda la línea para escribir cómodo */
  .item { grid-template-columns: minmax(0, 1fr) 88px 44px; grid-template-areas: "mat mat mat" "tipo tipo tipo" "size size size" "qty qty rm"; }
}

/* =========================================================
   Producto independiente: selector de medida y ficha
   ========================================================= */
.item-buy { display: grid; gap: 16px; padding: 22px; border-radius: var(--r-lg); background: var(--surface-1); }
.item-code { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: var(--text-muted); }
.item-code .ico { color: var(--cyan-700); }
.item-code strong { color: var(--navy-900); font-size: 1.05rem; letter-spacing: .02em; }
.vpicker { border: 0; padding: 0; margin: 0; min-width: 0; }
.vpicker legend { padding: 0; margin-bottom: 10px; font-weight: 800; font-size: .95rem; color: var(--navy-900); }
.vpicker__value { font-weight: 600; color: var(--text-muted); }
.vpicker__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vchip { position: relative; }
.vchip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.vchip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 12px;
  border: 1.5px solid var(--outline-strong); background: #fff; color: var(--text); font-weight: 700; font-size: .9rem; line-height: 1.25;
  transition: border-color .15s, background-color .15s, color .15s;
}
.vchip:hover span { border-color: var(--navy); }
.vchip input:checked + span { border-color: var(--navy); background: var(--navy); color: #fff; }
.vchip input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.vpicker.is-missing legend { color: var(--danger); }
.vpicker.is-missing .vchip span { border-color: #e9a29d; }
.item-buy__note { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--text-muted); }
.item-buy__note .ico { flex: none; color: var(--cyan-700); }
.item-buy__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.qty { display: flex; align-items: center; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--outline-strong); }
.qty button { width: 48px; height: 52px; border: 0; background: none; color: var(--navy); font-size: 1.35rem; font-weight: 700; cursor: pointer; border-radius: 50%; }
.qty input { width: 56px; height: 52px; border: 0; background: none; text-align: center; font: inherit; font-weight: 800; font-size: 1.05rem; color: var(--text); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-buy__add { flex: 1; }
.item-buy__msg { color: var(--danger); font-weight: 700; font-size: .9rem; }
.item-buy__msg:empty { display: none; }
.item-buy__wa { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 700; font-size: .92rem; color: #146c4b; }
.item-buy__wa:hover { text-decoration: underline; }
.ficha__sub { margin: 32px 0 14px; font-size: 1.15rem; color: var(--navy-900); }
.spec-table--pairs th[scope="row"] { width: 36%; background: var(--surface-1); color: var(--navy-900); font-weight: 800; }
.linea__more { margin-top: 20px; }
/* Fila de producto: el nombre lleva a su página */
a.cat-item__text:hover .cat-item__name { color: var(--navy); text-decoration: underline; }
/* Lista "Elige tu producto" de la página de una línea: filas más grandes sobre fondo tonal */
#articulos .cat-items { gap: 12px; }
#articulos .cat-item { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; padding: 12px 14px 12px 12px; background: #fff; box-shadow: var(--e1); }
#articulos .cat-item__img { width: 72px; height: 72px; background: var(--surface-1); }
#articulos .cat-item__name { font-size: 1rem; font-weight: 700; }
.cat-item__choose { background: var(--primary-container); color: var(--on-primary-container); }
.cat-item__choose:hover { background: var(--surface-3); }
@media (max-width: 640px) {
  .item-buy { padding: 16px; margin: 0 -4px; }
  .item-buy__add { flex-basis: 100%; white-space: normal; }
  #articulos .cat-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  #articulos .cat-item__img { width: 56px; height: 56px; }
  #articulos .cat-item__name { font-size: .92rem; }
  .qty { margin: 0 auto 0 0; }
  .vchip span { padding: 8px 12px; font-size: .86rem; }
  .spec-table.spec-table--pairs tr { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); padding: 0; border-radius: 0; box-shadow: none; margin: 0; background: transparent; }
  .spec-table.spec-table--pairs { background: var(--surface); box-shadow: var(--e1); border-radius: var(--r-lg); overflow: hidden; }
  .spec-table.spec-table--pairs th, .spec-table.spec-table--pairs td { padding: 12px 14px; border-bottom: 1px solid var(--outline); overflow-wrap: anywhere; }
  .spec-table--pairs th[scope="row"] { width: auto; }
}

/* =========================================================
   Carrito de cotización (lo crea js/main.js)
   ========================================================= */
.header__inner .nav { margin-left: auto; }
.cart-btn {
  position: relative; flex: none; width: 48px; height: 48px; margin-left: -8px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--navy); transition: background-color .2s;
}
.cart-btn:hover { background: var(--surface-3); }
.cart-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cart-btn__count {
  position: absolute; top: -2px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px; border: 2px solid #fff;
  background: var(--cyan); color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
}
.cart-btn__count[hidden] { display: none; }
.cart-btn.is-bumped { animation: cart-bump .45s var(--ease); }
@keyframes cart-bump { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }

.cat-item__quote.is-added { background: var(--cyan-container); color: var(--on-primary-container); }
.cat-item__quote.is-added::before { content: "✓"; margin-right: 5px; }

html.cart-open { overflow: hidden; }
.cart { position: fixed; inset: 0; z-index: 100; }
.cart[hidden] { display: none; }
.cart__scrim { position: absolute; inset: 0; background: rgba(18, 24, 69, .45); opacity: 0; transition: opacity .25s; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--e3);
  transform: translateX(100%); transition: transform .25s var(--ease);
}
.cart.is-open .cart__scrim { opacity: 1; }
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 16px; border-bottom: 1px solid var(--outline); }
.cart__head h2 { font-size: 1.3rem; }
.cart__head p { margin-top: 2px; font-size: .86rem; color: var(--text-muted); }
.cart__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--text); cursor: pointer; }
.cart__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; }

.cart__empty { padding: 40px 12px; text-align: center; color: var(--text-muted); }
.cart__empty[hidden] { display: none; }
.cart__empty p { margin-bottom: 8px; }
.cart__empty strong { color: var(--text); }
.cart__empty .btn { margin-top: 12px; }
.cart__empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 20px; background: var(--primary-container); color: var(--navy); }
.cart__empty-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; }

.cart__list { list-style: none; display: grid; gap: 8px; }
.cart-item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img text rm" "img qty qty";
  align-items: center; column-gap: 12px; row-gap: 8px; padding: 10px; border-radius: 14px; background: var(--surface-1);
}
.cart-item__img { grid-area: img; align-self: start; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: #fff; color: var(--navy); }
.cart-item__img img { width: 86%; height: 86%; object-fit: contain; }
.cart-item__img svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.cart-item__text { grid-area: text; display: grid; min-width: 0; }
.cart-item__code { font-size: .72rem; font-weight: 800; color: var(--cyan-700); letter-spacing: .04em; }
.cart-item__name { font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
a.cart-item__name:hover { color: var(--navy); text-decoration: underline; }
.cart-item__detail { font-size: .78rem; color: var(--text-muted); }
.cart-item__variant { justify-self: start; margin: 2px 0; padding: 2px 8px; border-radius: 6px; background: var(--cyan-container); color: var(--on-primary-container); font-size: .78rem; font-weight: 700; }
.cart-item__qty { grid-area: qty; justify-self: start; display: flex; align-items: center; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--outline); }
.cart-item__qty button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--navy); font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.cart-item__qty button:disabled { color: var(--outline-strong); cursor: default; }
.cart-item__qty input { width: 52px; height: 40px; border: 0; background: none; text-align: center; font: inherit; font-weight: 700; color: var(--text); -moz-appearance: textfield; }
.cart-item__qty input::-webkit-outer-spin-button, .cart-item__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item__remove { grid-area: rm; align-self: start; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.cart-item__remove:hover { background: #fde8e7; color: var(--danger); }
.cart-item__remove svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cart__footer { display: grid; gap: 10px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--outline); background: var(--surface); }
.cart__footer[hidden] { display: none; }
.cart__comment summary { cursor: pointer; font-size: .88rem; font-weight: 700; color: var(--navy); padding: 4px 0; }
.cart__comment textarea { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--outline-strong); border-radius: 12px; font: inherit; font-size: .92rem; resize: vertical; }
.cart__send { width: 100%; white-space: normal; text-align: center; }
.cart__send svg { fill: none; stroke: currentColor; stroke-width: 2.2; }
.cart__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cart__row .btn { min-height: 44px; }
#cart-clear { border: 0; background: none; color: var(--text-muted); padding: 0 16px; }
.cart__note { font-size: .78rem; color: var(--text-muted); text-align: center; }
/* Envío directo por correo desde la lista */
.cart__mailform { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
.cart__mailform[hidden] { display: none; }
.cart__mailform-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart__mailform-title { font-weight: 700; color: var(--navy); }
.cart__mailform-back { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--navy); font-weight: 700; font-size: .85rem; cursor: pointer; }
.cart__footer.is-mailing > :not(.cart__mailform) { display: none; }
.cart__footer.is-mailing .cart__mailform { padding: 0; background: none; }
.cart__field { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--text); }
.cart__field em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.cart__field input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--outline-strong); border-radius: 12px; background: #fff; font: inherit; font-size: 16px; font-weight: 400; }
.cart__field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.cart__field.is-invalid input { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.cart__mailform-msg { font-size: .85rem; color: var(--danger); }
.cart__mailform-msg:empty { display: none; }
.cart__mailform-msg a { color: var(--navy); font-weight: 700; }
#cart-mail-send { width: 100%; }
.cart__sent { padding: 40px 12px; text-align: center; color: var(--text-muted); }
.cart__sent[hidden] { display: none; }
.cart__sent p { margin-bottom: 8px; }
.cart__sent strong { color: var(--text); font-size: 1.05rem; }
.cart__sent .btn { margin-top: 12px; }
.cart__sent-icon { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: #e3f6ea; color: #1a7f45; }
.cart__sent-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; }

.cart-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; max-width: min(520px, calc(100% - 32px));
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px;
  background: var(--navy-900); color: #fff; box-shadow: var(--e3); font-size: .9rem; font-weight: 600;
  transform: translate(-50%, 16px); opacity: 0; transition: transform .25s var(--ease), opacity .2s;
}
.cart-toast[hidden] { display: none; }
.cart-toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.cart-toast > svg { flex: none; width: 22px; height: 22px; fill: none; stroke: #5fd4ff; stroke-width: 2.2; }
.cart-toast span { min-width: 0; overflow-wrap: anywhere; }
.cart-toast button { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--cyan); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }

@media (max-width: 900px) {
  .cart-btn { margin-left: auto; width: 44px; height: 44px; }
  .header__inner { gap: 8px; }
}
@media (max-width: 640px) {
  .cart__panel { width: 100%; }
  /* Sobre el botón de WhatsApp para no taparlo */
  .cart-toast { left: 16px; right: 16px; bottom: 90px; max-width: none; transform: translateY(16px); }
  .cart-toast.is-visible { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}