/* ==========================================================================
   CLAUS · Cerrajería y Llaves — Puertollano
   Sistema de diseño: Retro-ilustrado con carácter
   Paleta extraída del logo (turquesa + azul marino) y del presupuesto
   ilustrado de la marca (terracota + crema mid-century).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&family=Caveat:wght@600;700&family=Alfa+Slab+One&display=swap');

:root{
  /* --- Marca --- */
  --teal:            #2FBFAC;
  --teal-dark:        #1E9788;
  --teal-deep:        #156A60;
  --teal-tint:        #E7F7F4;
  --navy:             #17243E;
  --navy-soft:         #24365C;
  --terracotta:       #DA6A34;
  --terracotta-dark:   #B6512380  ;
  --terracotta-solid:  #B65123;
  --cream:            #FAF3E3;
  --cream-deep:        #F1E4C4;
  --paper:            #FFFCF5;
  --white:            #FFFFFF;
  --ink:              #1B2233;
  --muted:            #5B6472;
  --line:             #E4DAC4;
  --success:          #2E8B57;
  --danger:           #C0392B;

  /* --- Tipografía --- */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;
  --font-accent:  'Caveat', cursive;
  --font-stamp:   'Alfa Slab One', serif;

  /* --- Espaciado (escala estándar) --- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px -12px rgba(23,36,62,.18);
  --shadow-lift: 0 20px 45px -15px rgba(23,36,62,.28);
  --shadow-btn:  0 8px 20px -8px rgba(218,106,52,.55);

  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 500ms;

  --container: 1200px;
}

/* --- Reset base --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy); line-height:1.15; margin:0 0 var(--space-3); font-weight:700; }
h1{ font-size:clamp(2.1rem,4.5vw,3.4rem); font-weight:800; }
h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
h3{ font-size:clamp(1.2rem,2vw,1.5rem); }
p{ margin:0 0 var(--space-4); color:var(--muted); }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5); }
@media(min-width:768px){ .container{ padding-inline:var(--space-7); } }
/* Contenedor más ancho, solo para la tienda: con el sidebar de familias
   (ver .store-layout) el contenedor estándar de 1200px deja el sidebar muy
   centrado y desperdicia espacio a los lados en pantallas grandes en vez de
   dárselo al grid de productos. */
.container--store{ max-width:1560px; }

section{ position:relative; }
.section{ padding-block:var(--space-9); }
.section--sm{ padding-block:var(--space-7); }
.section--cream{ background:var(--cream); }
.section--navy{ background:var(--navy); color:var(--white); }
.section--navy h2, .section--navy h3{ color:var(--white); }
.section--navy p{ color:#B9C3D6; }
.section--teal{ background:linear-gradient(160deg,var(--teal) 0%,var(--teal-dark) 100%); color:var(--white); }
.section--teal h2{ color:var(--white); }
.section--teal p{ color:rgba(255,255,255,.88); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size:.8rem; color:var(--terracotta-solid); margin-bottom:var(--space-3);
}
.eyebrow::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--terracotta-solid); }
.section--navy .eyebrow, .section--teal .eyebrow{ color:var(--cream); }
.section--navy .eyebrow::before, .section--teal .eyebrow::before{ background:var(--cream); }

.lede{ font-size:1.1rem; max-width:60ch; }
.center{ text-align:center; margin-inline:auto; }

/* --- Focus / accesibilidad --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--terracotta); outline-offset:2px; border-radius:6px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:var(--white);
  padding:.8rem 1.2rem; z-index:200; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; border-radius:var(--radius-pill); border:2px solid transparent;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  min-height:44px; transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn--primary{ background:var(--terracotta-solid); color:var(--white); box-shadow:var(--shadow-btn); }
.btn--primary:hover{ background:#a54a1f; transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(218,106,52,.6); }
.btn--ghost{ background:transparent; border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--navy{ background:var(--navy); color:var(--white); }
.btn--navy:hover{ background:var(--navy-soft); transform:translateY(-2px); }
.btn--outline-navy{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn--outline-navy:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); }
.btn--sm{ padding:.6rem 1.1rem; font-size:.9rem; min-height:38px; }
.btn--block{ width:100%; }

/* ==========================================================================
   Decoración retro (starbursts, blobs, stamps)
   ========================================================================== */
.deco-blob{ position:absolute; z-index:0; pointer-events:none; opacity:.9; }
.spark{ position:absolute; width:26px; height:26px; color:var(--terracotta-solid); opacity:.85; z-index:1; }
.spark--teal{ color:var(--teal); }
.spark--cream{ color:var(--cream); }
.spark.spin{ animation:spin 14s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.stamp{
  font-family:var(--font-stamp); font-size:.75rem; letter-spacing:.04em;
  color:var(--navy); background:var(--cream); border:2px dashed var(--navy);
  border-radius:var(--radius-pill); padding:.45rem 1rem; display:inline-flex;
  align-items:center; gap:.4rem; transform:rotate(-3deg);
}

.script{ font-family:var(--font-accent); font-weight:700; color:var(--terracotta-solid); font-size:1.4em; }

.card-pattern{
  background-image:radial-gradient(circle,rgba(23,36,62,.08) 1.5px,transparent 1.5px);
  background-size:16px 16px;
}

/* ==========================================================================
   Header / Navegación
   ========================================================================== */
.topbar{
  background:var(--navy); color:#CBD5E6; font-size:.82rem; padding-block:.45rem;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.topbar a{ color:inherit; }
.topbar-item{ display:inline-flex; align-items:center; gap:.4rem; }
.topbar-item svg{ width:15px; height:15px; }
.topbar-right{ display:flex; gap:var(--space-5); }

.header{
  position:sticky; top:0; z-index:100; background:var(--teal);
  border-bottom:1px solid var(--teal-dark);
  transition:box-shadow var(--dur-base) var(--ease);
}
.header.is-scrolled{ box-shadow:0 8px 24px -14px rgba(23,36,62,.35); }
.header .container{ display:flex; align-items:center; justify-content:space-between; padding-block:.5rem; gap:var(--space-3); }
.brand{ display:flex; align-items:center; gap:.7rem; }
/* El logo ya lleva el nombre "Claus" y "Abrimos tus puertas" integrados en
   el propio archivo, sobre el mismo fondo turquesa que la cabecera — por
   eso el texto suelto que había al lado se oculta (ver .brand > span) y el
   logo se muestra más grande, sin caja ni borde, para que se funda con la
   cabecera en vez de verse como una pegatina encima. */
.brand img{ height:64px; width:auto; display:block; }
@media(min-width:768px){ .brand img{ height:80px; } }
.brand > span{ display:none; }
/* .brand-name se sigue usando fuera de la cabecera (título "Menú" del nav
   móvil), así que la regla se mantiene aunque en el logo ya no se vea. */
.brand-name{ font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--navy); }
.brand-tag{ display:block; font-family:var(--font-body); font-weight:700; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-dark); white-space:nowrap; }

.nav{ display:none; align-items:center; gap:var(--space-4); }
.nav a{ font-weight:700; color:var(--navy); font-size:.9rem; position:relative; padding-block:.3rem; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:3px; width:0; background:var(--terracotta-solid); border-radius:2px; transition:width var(--dur-base) var(--ease); }
.nav a:hover::after, .nav a.active::after{ width:100%; }
.nav-dropdown{ position:relative; }
[data-nav-categorias]{ display:contents; }
.nav-dropdown-panel{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lift);
  width:300px; padding:.6rem; opacity:0; visibility:hidden; transition:all var(--dur-base) var(--ease);
  border:1px solid var(--line);
}
.nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-panel a{ display:flex; gap:.6rem; align-items:center; padding:.6rem .7rem; border-radius:10px; font-size:.88rem; }
.nav-dropdown-panel a:hover{ background:var(--teal-tint); }
.nav-dropdown-panel a::after{ display:none; }
.nav-dropdown-panel svg{ width:18px; height:18px; color:var(--teal-dark); flex:none; }
.nav-dropdown > a.active{ color:var(--terracotta-solid); }
.nav-link-soon{ opacity:.55; cursor:default; }
.nav-link-soon:hover{ background:none !important; }
.soon-tag{
  margin-left:auto; font-size:.6rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  background:var(--cream-deep); color:var(--muted); padding:.15rem .4rem; border-radius:var(--radius-pill); flex:none;
}
.mobile-nav-group{ margin-top:1.1rem; }
.mobile-nav-group-title{
  display:block; font-family:var(--font-body); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  font-size:.72rem; color:var(--teal); padding-top:.6rem; border-top:1px solid rgba(255,255,255,.14);
}
.mobile-nav-group a{ font-size:1.02rem; padding:.6rem 0; display:flex; align-items:center; gap:.5rem; }
.mobile-nav-group a .soon-tag{ background:rgba(255,255,255,.12); color:#B9C3D6; }

.header-cta{ display:flex; align-items:center; gap:.5rem; }
/* En móvil muy estrecho no caben logo + WhatsApp + llamar + menú.
   El botón flotante de WhatsApp (.wa-float) ya cubre ese CTA, así que el
   icono de WhatsApp de la cabecera se oculta primero. */
@media(max-width:560px){ .header .icon-btn{ display:none; } }
.icon-btn{
  width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal-tint); color:var(--teal-deep); transition:transform var(--dur-fast) var(--ease);
}
.icon-btn:hover{ transform:scale(1.08); }
.icon-btn svg{ width:22px; height:22px; }
/* Sobre la cabecera turquesa, el icon-btn normal (fondo teal-tint) casi no
   se distingue — aquí sí necesita contraste propio. */
.header .icon-btn{ background:var(--white); color:var(--teal-deep); }

.menu-toggle{
  display:inline-flex; width:44px; height:44px; border-radius:12px; background:var(--navy); color:var(--white);
  align-items:center; justify-content:center;
}
@media(min-width:1040px){
  .menu-toggle{ display:none; }
  .nav{ display:flex; }
}

.mobile-nav{
  position:fixed; inset:0; background:var(--navy); z-index:200; padding:var(--space-6) var(--space-5);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease); overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-6); }
.mobile-nav a{ display:block; color:var(--white); font-family:var(--font-display); font-size:1.3rem; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mobile-nav .btn{ margin-top:var(--space-5); }
.mobile-close{ width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; padding-block:var(--space-8) var(--space-9);
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47,191,172,.18), transparent 60%),
    var(--cream);
}
.hero .container{ display:grid; gap:var(--space-7); align-items:center; grid-template-columns:1fr; }
@media(min-width:960px){ .hero .container{ grid-template-columns:1fr 1fr; } }

.hero-badges{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:var(--space-4); }
.hero h1{ margin-bottom:var(--space-4); font-size:clamp(2.6rem,6vw,var(--hero-h1-size, 5rem)); line-height:1.02; }
.hero h1 .hl{ color:var(--terracotta-solid); position:relative; white-space:nowrap; }
.hero-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-5); }
.hero-trust{ display:flex; gap:var(--space-6); margin-top:var(--space-7); flex-wrap:wrap; }
.hero-trust-item{ display:flex; align-items:center; gap:.6rem; }
.hero-trust-item .num{ font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--navy); }
.hero-trust-item .lbl{ font-size:.78rem; color:var(--muted); line-height:1.25; max-width:11ch; }

/* width:100% es necesario: con margin-inline:auto + aspect-ratio y sin él,
   un grid item cuyo contenido es todo position:absolute (como este) colapsa
   a 0×0 porque el navegador lo dimensiona "shrink-to-fit" sin nada
   intrínseco de lo que partir. Con width:100% se estira hasta max-width y
   el margin:auto lo centra dentro de la columna cuando sobra espacio. */
.hero-art{ display:block; position:relative; width:100%; aspect-ratio:1/1; max-width:460px; margin-inline:auto; transition:transform var(--dur-base) var(--ease); }
@media(min-width:960px){ .hero-art{ max-width:560px; } }
.hero-art:hover{ transform:translateY(-3px); }
.hero-art-ring{
  position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(160deg,var(--teal) 0%, var(--teal-dark) 100%);
  box-shadow:var(--shadow-lift);
  transition:box-shadow var(--dur-base) var(--ease);
}
.hero-art:hover .hero-art-ring{ box-shadow:var(--shadow-lift), 0 0 0 5px rgba(255,255,255,.35); }
.hero-art-ring::before{
  content:""; position:absolute; inset:14px; border-radius:50%; border:2.5px dashed rgba(255,255,255,.55);
}
.hero-art-photo{
  position:absolute; inset:34px; border-radius:50%; overflow:hidden; background:var(--navy);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); text-align:center; padding:var(--space-5);
  border:6px solid var(--paper);
}
.hero-art-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-art .spark{ width:34px; height:34px; }

/* Botón "Ir a la tienda" anclado sobre el borde inferior del círculo.
   Va DENTRO de .hero-art (que ya es un <a> a /tienda/), así que es un
   <span> — anidar un <a> aquí sería HTML inválido — pero sigue siendo
   interactivo porque todo el círculo reacciona al hover/click. */
.hero-art-cta{
  position:absolute; left:50%; bottom:-4%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--navy); color:var(--white);
  border:3px solid var(--paper); border-radius:var(--radius-pill);
  padding:.7rem 1.3rem .7rem .7rem;
  box-shadow:var(--shadow-lift);
  font-family:var(--font-display); font-weight:700; font-size:.95rem; white-space:nowrap;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.hero-art:hover .hero-art-cta{ background:var(--navy-soft); box-shadow:var(--shadow-lift), 0 0 0 5px rgba(255,255,255,.35); transform:translateX(-50%) translateY(-2px); }
.hero-art-cta-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--teal); color:var(--navy); flex:none;
}
.hero-art-cta-icon svg{ width:18px; height:18px; }
.hero-art-cta-arrow{ display:inline-flex; margin-left:.3rem; transition:transform var(--dur-base) var(--ease); }
.hero-art-cta-arrow svg{ width:16px; height:16px; }
.hero-art:hover .hero-art-cta-arrow{ transform:translateX(3px); }
@media(max-width:480px){ .hero-art-cta{ font-size:.82rem; padding:.6rem 1.05rem .6rem .6rem; gap:.5rem; } .hero-art-cta-icon{ width:28px; height:28px; } }

/* ==========================================================================
   Franja de confianza / marcas
   ========================================================================== */
.trustbar{ background:var(--navy); padding-block:var(--space-4); overflow:hidden; }
.trustbar-track{ display:flex; gap:var(--space-8); align-items:center; white-space:nowrap; }
.trustbar-item{ display:flex; align-items:center; gap:.6rem; color:#CBD5E6; font-family:var(--font-display); font-weight:700; font-size:.95rem; }
.trustbar-item svg{ width:20px; height:20px; color:var(--teal); }

/* ==========================================================================
   Grid de servicios (categorías)
   ========================================================================== */
.grid{ display:grid; gap:var(--space-5); }
.grid--3{ grid-template-columns:1fr; }
.grid--2{ grid-template-columns:1fr; }
@media(min-width:720px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); } }

.svc-card{
  background:var(--white); border-radius:var(--radius-lg); padding:var(--space-6);
  box-shadow:var(--shadow-card); border:1px solid var(--line);
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.svc-card-media{
  margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; aspect-ratio:700/900;
}
.svc-card-media .img-slot{ border-radius:0; border-width:2px 0 2px 0; }
.svc-card-icon{
  width:64px; height:64px; border-radius:var(--radius-md); background:var(--teal-tint); color:var(--teal-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-4);
}
.svc-card-icon svg{ width:32px; height:32px; }
.svc-card h3{ margin-bottom:.4rem; }
.svc-card .seo-tag{
  align-self:flex-start; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:.28rem .65rem; border-radius:var(--radius-pill); margin-bottom:.8rem;
}
.seo-tag--local{ background:#E7F7F4; color:var(--teal-deep); }
.seo-tag--provincial{ background:#FBEADD; color:var(--terracotta-dark); }
.seo-tag--nacional{ background:#E9ECF5; color:var(--navy-soft); }
.svc-card ul{ margin:.6rem 0 var(--space-4); display:flex; flex-direction:column; gap:.45rem; }
.svc-card ul li{ display:flex; gap:.5rem; font-size:.9rem; color:var(--muted); align-items:flex-start; }
.svc-card ul li svg{ width:16px; height:16px; color:var(--teal-dark); flex:none; margin-top:3px; }
.svc-card .card-link{ margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-weight:800; color:var(--terracotta-solid); }
.svc-card .card-link svg{ width:16px; height:16px; transition:transform var(--dur-fast) var(--ease); }
.svc-card .card-link:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   Zona de cobertura / mapa SEO
   ========================================================================== */
.coverage{ display:grid; gap:var(--space-6); grid-template-columns:1fr; }
@media(min-width:900px){ .coverage{ grid-template-columns:1fr 1fr; } }
.coverage-map{
  border-radius:var(--radius-lg); background:var(--navy); position:relative; overflow:hidden; min-height:320px;
  display:flex; align-items:center; justify-content:center;
}
.coverage-map svg{ width:100%; height:100%; }
.coverage-pin{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--terracotta-solid); box-shadow:0 0 0 6px rgba(218,106,52,.25); }
.coverage-pin.main{ background:var(--teal); box-shadow:0 0 0 8px rgba(47,191,172,.28); }
.coverage-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--space-4); }
.chip{
  font-size:.82rem; font-weight:700; padding:.4rem .85rem; border-radius:var(--radius-pill);
  background:var(--white); border:1.5px solid var(--line); color:var(--navy-soft);
}
.chip--tier1{ border-color:var(--teal); color:var(--teal-deep); }
.chip--tier2{ border-color:var(--terracotta); color:var(--terracotta-dark); }
.chip--tier3{ border-color:var(--navy-soft); color:var(--navy-soft); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
/* Progressive enhancement: el contenido solo se oculta para animar si JS confirma
   que puede revelarlo (clase añadida en <html> nada más cargar el <body>).
   Sin JS, o si algo falla, el contenido es visible desde el primer momento. */
.js-reveal [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal-group] [data-reveal]{ transition-delay:calc(var(--i,0) * 90ms); }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .spark.spin{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

/* ==========================================================================
   Proceso / pasos
   ========================================================================== */
.steps{ counter-reset:step; display:grid; gap:var(--space-5); grid-template-columns:1fr; }
@media(min-width:820px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding-top:var(--space-6); }
.step::before{
  counter-increment:step; content:counter(step);
  font-family:var(--font-display); font-weight:800; font-size:1.2rem;
  width:52px; height:52px; border-radius:50%; background:var(--terracotta-solid); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3);
}
.step h3{ font-size:1.05rem; }
.step p{ font-size:.9rem; }

/* ==========================================================================
   Precios / transparencia
   ========================================================================== */
.price-table{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; border:1px solid var(--line); }
.price-row{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:1.1rem 1.5rem; border-bottom:1px solid var(--line); }
.price-row:last-child{ border-bottom:none; }
.price-row .name{ font-weight:700; color:var(--navy); }
.price-row .desc{ font-size:.82rem; color:var(--muted); margin-top:.15rem; }
.price-row .amount{ font-family:var(--font-display); font-weight:800; color:var(--terracotta-solid); font-size:1.15rem; white-space:nowrap; }
.price-note{ font-size:.82rem; color:var(--muted); padding:1rem 1.5rem; background:var(--cream); }

/* ==========================================================================
   Carrusel de "productos más vendidos" (franja de tienda del index) — solo
   el botón "Ir a la tienda" + este carrusel, sin bloque de texto ni foto
   fija. Mismo truco de bucle continuo que .trustbar-track (contenido
   duplicado + translateX animado).
   ========================================================================== */
.tienda-carousel{
  overflow:hidden; position:relative; width:100%; margin-top:var(--space-6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.tienda-carousel-track{ display:flex; gap:var(--space-4); width:max-content; }
.tienda-carousel-card{
  flex:none; width:168px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-md); padding:var(--space-3); color:#fff; text-align:center;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tienda-carousel-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.22); }
.tienda-carousel-card .media{
  aspect-ratio:1/1; border-radius:var(--radius-sm); overflow:hidden; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; margin-bottom:.6rem;
}
.tienda-carousel-card .media img{ width:100%; height:100%; object-fit:cover; }
.tienda-carousel-card .nombre{
  display:block; font-family:var(--font-display); font-weight:700; font-size:.8rem; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tienda-carousel-card .precio{ display:block; font-family:var(--font-display); font-weight:800; font-size:.95rem; margin-top:.35rem; }

/* ==========================================================================
   Testimonios
   ========================================================================== */
.testimonial{
  background:var(--white); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-card);
  border:1px solid var(--line); height:100%; display:flex; flex-direction:column;
}
.stars{ display:flex; gap:.2rem; color:var(--terracotta-solid); margin-bottom:var(--space-3); }
.stars svg{ width:18px; height:18px; }
.testimonial p{ color:var(--ink); font-style:italic; flex:1; }
.testimonial-author{ display:flex; align-items:center; gap:.7rem; margin-top:var(--space-4); }
.avatar{ width:44px; height:44px; border-radius:50%; background:var(--teal-tint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; }
.testimonial-author .name{ font-weight:800; color:var(--navy); font-size:.92rem; }
.testimonial-author .loc{ font-size:.78rem; color:var(--muted); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  padding:1.2rem 0; background:none; border:none; text-align:left; font-family:var(--font-display);
  font-weight:700; color:var(--navy); font-size:1.02rem;
}
.faq-q svg{ width:22px; height:22px; flex:none; transition:transform var(--dur-base) var(--ease); color:var(--terracotta-solid); }
.faq-item.is-open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-slow) var(--ease); }
.faq-a-inner{ padding-bottom:1.3rem; color:var(--muted); }
.faq-item.is-open .faq-a{ max-height:400px; }

/* ==========================================================================
   Tienda
   ========================================================================== */
/* --- Franja de envío (ticker): tira azul angosta con marquesina de
   derecha a izquierda, mismo tono/escala que .topbar (arriba del todo) en
   vez de un azul nuevo. Bucle infinito sin JS: dos mitades (.ticker-half)
   con el mismo contenido, animando un translateX(-50%) — al llegar a la
   mitad, la segunda mitad ya está exactamente donde empezó la primera, así
   que el salto es invisible sea cual sea el ancho de pantalla. El texto
   real va en un <h1 class="sr-only"> aparte (ver tienda/index.html): la
   marquesina lleva aria-hidden porque repetirla varias veces sería ruido
   para un lector de pantalla. --- */
.ticker{ background:var(--navy); overflow:hidden; padding-block:.45rem; }
.ticker-track{ display:flex; width:max-content; animation:ticker-scroll 32s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-half{ display:flex; align-items:center; flex-shrink:0; }
.ticker-item{
  font-family:var(--font-body); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; white-space:nowrap;
}
.ticker-sep{ color:var(--teal); font-size:.7rem; margin-inline:1.6rem; }
@keyframes ticker-scroll{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; }
}

/* --- Carril de familias: solo iconos (sin caja, sin texto — el nombre
   queda como title/aria-label), en filas que envuelven en vez de hacer
   scroll horizontal — así nunca aparece una barra de desplazamiento debajo,
   si no caben en una línea pasan solas a la siguiente. --- */
.category-rail{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1rem; padding:.3rem .2rem 1rem;
}
.category-card{ display:flex; align-items:center; justify-content:center; flex:none; border:none; background:none; padding:0; cursor:pointer; }
.category-card-img{
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  overflow:hidden; border:2.5px solid var(--white); box-shadow:var(--shadow-card); transition:all var(--dur-fast) var(--ease);
}
.category-card-img svg{ width:46%; height:46%; }
.category-card-img img{ width:100%; height:100%; object-fit:cover; }
.category-card:hover .category-card-img{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.category-card.active .category-card-img{ border-color:var(--terracotta-solid); box-shadow:0 0 0 3px rgba(218,106,52,.18), var(--shadow-card); }

/* Iconos de familia (carril superior, .category-rail): sin caja de fondo
   — el propio icono PNG (subido en almacen.php → Familias y Subfamilias) ya
   trae su mancha de color, así que aquí solo flota sobre la página, grande
   y sin nombre debajo (el nombre se lee al pasar el ratón, vía title). Al
   pasar el ratón se agranda y se resalta con una sombra de color. Se
   aplican solo con la clase --familia (añadida aparte, en main.js y en el
   botón "Todas" del HTML) para no tocar el carril de subfamilias, que es
   otro componente aparte (chips de texto, ver más abajo). */
.category-card.category-card--familia{
  width:140px; height:140px; padding:.2rem;
  background:none; border-radius:0; box-shadow:none;
  transition:transform var(--dur-fast) var(--ease);
}
.category-card--familia .category-card-img{
  width:100%; height:100%; border:none; box-shadow:none; background:none; color:var(--teal-dark);
  border-radius:0; overflow:visible; /* anula el recorte circular de .category-card-img de arriba: aquí no hay círculo, el propio PNG ya trae su mancha de color y no se debe cortar nada que sobresalga */
  filter:drop-shadow(0 6px 14px rgba(23,36,62,.22));
  transition:transform var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}
.category-card--familia .category-card-img svg{ width:62%; height:62%; }
.category-card--familia .category-card-img img{ width:100%; height:100%; object-fit:contain; }
/* Placeholder genérico (familia sin icono subido todavía en almacen.php):
   el PNG real ya trae su propia mancha de color, pero el SVG de repuesto es
   solo trazo, así que aquí se le pone un círculo tenue detrás para que no
   se vea "roto" al lado de los demás iconos ilustrados. En cuanto subas una
   imagen para esa familia, esta clase deja de aplicarse sola (main.js la
   añade solo cuando `imagen` viene null) y pasa a mostrarse igual que el
   resto, sin tocar nada más. */
.category-card--familia .category-card-img--fallback{
  background:var(--teal-tint); border-radius:50%;
}
.category-card--familia .category-card-img--fallback svg{ width:44%; height:44%; }
.category-card--familia:hover{ transform:translateY(-2px); }
.category-card--familia:hover .category-card-img{
  transform:scale(1.14); filter:drop-shadow(0 10px 20px rgba(47,191,172,.45));
}
/* Activo: el propio icono se resalta en terracota en vez del anillo/texto
   naranja que usa el resto de .category-card (aquí no hay caja ni texto que
   resaltar). */
.category-card--familia.active .category-card-img{
  transform:scale(1.07); filter:drop-shadow(0 8px 18px rgba(218,106,52,.45));
}

/* --- Carril de subfamilias: no son iconos, son chips de texto (pastilla
   con borde) — las subfamilias no siempre tienen foto propia, y mezclarlas
   con el carril de iconos de arriba quedaba raro. El JS (actualizarSubfamiliasRail)
   mueve este bloque justo después del botón de familia activo dentro de
   [data-filters], así que aquí es un elemento flex MÁS de esa rejilla (no un
   bloque aparte): flex-basis:100% fuerza que ocupe su propia fila entera
   dentro del wrap de iconos (móvil) en vez de colarse a media fila junto a un
   icono. En el sidebar de escritorio (columna) esto no cambia nada, porque
   ahí cada elemento ya ocupa el ancho completo. --- */
.category-rail--sub{ justify-content:flex-start; gap:.55rem; margin-top:-.4rem; padding-top:0; flex:1 1 100%; }
.category-rail--sub.is-hidden{ display:none; }
.subfamilia-chip{
  font-family:var(--font-body); font-weight:700; font-size:.85rem; line-height:1;
  padding:.6rem 1.15rem; border-radius:var(--radius-pill);
  background:var(--white); border:1.5px solid var(--line); color:var(--navy-soft);
  cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.subfamilia-chip:hover{ border-color:var(--teal); color:var(--teal-deep); transform:translateY(-1px); box-shadow:var(--shadow-card); }
.subfamilia-chip.active{ background:var(--teal-dark); border-color:var(--teal-dark); color:#fff; box-shadow:var(--shadow-card); }

/* Nombre de familia: en el carril horizontal de móvil se queda oculto (el
   icono ya es grande y el nombre vive en el title/aria-label, como antes);
   solo se muestra cuando el sidebar de escritorio lo reactiva más abajo. */
.category-card-label{ display:none; }

/* --- Menú lateral de familias (solo tienda, ≥960px): mismos iconos y
   mismos datos que el carril de arriba (data-filters/data-subfilters no
   cambian), solo se reordenan en una columna fija a la izquierda con el
   nombre visible al lado — más fácil de escanear que un rail horizontal
   con tooltips. Por debajo de 960px .store-sidebar no se activa y todo se
   ve exactamente igual que antes (rail horizontal + chips). --- */
.store-layout{ display:flex; flex-direction:column; gap:var(--space-6); }
.store-content{ min-width:0; }

@media(min-width:960px){
  .store-layout{ display:grid; grid-template-columns:250px 1fr; align-items:start; gap:var(--space-7); }

  .store-sidebar{
    position:sticky; top:96px; max-height:calc(100vh - 116px); overflow-y:auto;
    display:flex; flex-direction:column; gap:0;
    background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-md);
    box-shadow:var(--shadow-card); padding:var(--space-4);
  }

  .store-sidebar .category-rail{
    flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:stretch;
    gap:.2rem; padding:0;
  }
  .store-sidebar .category-card.category-card--familia{
    width:100%; height:auto; flex-direction:row; justify-content:flex-start; align-items:center;
    gap:.85rem; padding:.5rem .6rem; border-radius:var(--radius-sm);
    transition:background var(--dur-fast) var(--ease);
  }
  .store-sidebar .category-card--familia:hover{ background:var(--cream); transform:none; }
  .store-sidebar .category-card--familia:hover .category-card-img{ transform:none; filter:drop-shadow(0 6px 14px rgba(23,36,62,.22)); }
  .store-sidebar .category-card--familia.active{ background:var(--teal-tint); }
  .store-sidebar .category-card--familia.active .category-card-img{ transform:none; }

  .store-sidebar .category-card--familia .category-card-img{ width:52px; height:52px; flex:none; }
  .store-sidebar .category-card--familia .category-card-img--fallback svg{ width:48%; height:48%; }

  .store-sidebar .category-card-label{
    display:block; font-family:var(--font-body); font-weight:700; font-size:.88rem; line-height:1.2;
    color:var(--navy-soft); text-align:left; white-space:normal;
  }
  .store-sidebar .category-card--familia.active .category-card-label{ color:var(--terracotta-solid); }

  /* Subfamilias: dentro del propio sidebar, justo debajo de la lista de
     familias (no un carril aparte) — lista compacta en vez de pastillas
     horizontales, separada con una línea fina. */
  .store-sidebar .category-rail--sub{
    flex-direction:column; align-items:stretch; gap:.25rem;
    margin:var(--space-3) 0 0; padding-top:var(--space-3); border-top:1.5px solid var(--line);
  }
  .store-sidebar .subfamilia-chip{
    width:100%; text-align:left; border-radius:var(--radius-sm); padding:.5rem .7rem;
  }
}

/* Antes era grid 1fr/auto/1fr con los controles en las columnas 2 y 3: la
   primera columna quedaba siempre vacía (uno de los "huecos" señalados).
   Ahora es una sola fila flex con el contador+orden a la izquierda y los
   filtros a la derecha; envuelve sin dejar huecos en cuanto no cabe todo. */
.store-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-6);
}
.toolbar-meta{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.toolbar-count{ margin:0; font-size:.85rem; font-weight:700; color:var(--navy-soft); white-space:nowrap; }
.toolbar-count:empty{ display:none; }
.toolbar-sort{ position:relative; display:inline-flex; align-items:center; }
.toolbar-sort select{
  appearance:none; -webkit-appearance:none; font-family:var(--font-body); font-weight:700; font-size:.82rem;
  color:var(--navy-soft); background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-pill);
  padding:.5rem 2.1rem .5rem .95rem; cursor:pointer; transition:border-color var(--dur-fast) var(--ease);
}
.toolbar-sort select:hover, .toolbar-sort select:focus-visible{ border-color:var(--teal); outline:none; }
.toolbar-sort svg{ position:absolute; right:.8rem; width:14px; height:14px; color:var(--muted); pointer-events:none; }
.toolbar-filters{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:flex-end; }
@media(max-width:640px){
  .store-toolbar{ flex-direction:column; align-items:stretch; }
  .toolbar-meta{ justify-content:space-between; }
  .toolbar-filters{ justify-content:flex-start; }
}
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-btn{
  padding:.55rem 1.1rem; border-radius:var(--radius-pill); border:1.5px solid var(--line); background:var(--white);
  font-weight:700; font-size:.85rem; color:var(--navy-soft); transition:all var(--dur-fast) var(--ease);
}
.filter-btn:hover{ border-color:var(--teal); }
.filter-btn.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }

/* --- Desplegable de marca a medida (fabricante y, por separado, marca de
   coche): un <select> nativo no puede mostrar el logo de cada opción, así
   que es un botón + panel propios, con el mismo marcado reutilizado para
   las dos instancias (ver crearBrandDropdown en main.js). --- */
.brand-dd{ position:relative; }
.brand-dd-toggle{
  display:flex; align-items:center; gap:.6rem; padding:.65rem 1rem; border-radius:var(--radius-pill);
  border:1.5px solid var(--line); font-family:var(--font-body); font-weight:700; font-size:.85rem;
  color:var(--navy-soft); background:var(--white); transition:border-color var(--dur-fast) var(--ease);
}
.brand-dd-toggle:hover, .brand-dd-toggle[aria-expanded="true"]{ border-color:var(--teal); }
.brand-dd-toggle svg{ width:14px; height:14px; flex:none; }
.brand-dd-panel{
  position:absolute; top:calc(100% + .4rem); left:0; z-index:20; min-width:100%; max-height:280px; overflow-y:auto;
  display:flex; flex-direction:column; gap:.3rem; padding:.5rem; background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-lift);
}
.brand-dd-panel[hidden]{ display:none; }
.brand-dd-panel .brand-pick{ width:100%; justify-content:flex-start; }
.search-box{ position:relative; }
.search-box input{
  padding:.65rem 1rem .65rem 2.6rem; border-radius:var(--radius-pill); border:1.5px solid var(--line);
  font-family:var(--font-body); font-size:.9rem; min-width:220px; background:var(--white);
}
.search-box svg{ position:absolute; left:.9rem; top:50%; translate:0 -50%; width:18px; height:18px; color:var(--muted); }

.brand-pick{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem .5rem .5rem; border-radius:var(--radius-pill);
  background:var(--white); border:1.5px solid var(--line); font-weight:700; font-size:.85rem; color:var(--navy-soft);
  transition:all var(--dur-fast) var(--ease);
}
.brand-pick img{ width:26px; height:26px; object-fit:contain; border-radius:6px; background:var(--cream); flex:none; }
.brand-pick:hover{ border-color:var(--teal); }
.brand-pick.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }

.product-grid{ display:grid; gap:var(--space-5); grid-template-columns:repeat(2,1fr); }
@media(min-width:640px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1000px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
/* A partir de aquí .container--store ya dejó respirar al sidebar (ver
   arriba), así que hay hueco de sobra para una quinta columna en vez de
   estirar las 4 de siempre. */
@media(min-width:1500px){ .product-grid{ grid-template-columns:repeat(5,1fr); } }

.product-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  display:flex; flex-direction:column; cursor:pointer; min-width:0;
}
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.product-media{
  aspect-ratio:1/1; background:linear-gradient(150deg,var(--teal-tint),var(--cream)); position:relative;
  display:flex; align-items:center; justify-content:center; color:var(--teal-deep); min-width:0; overflow:hidden;
}
.product-media svg{ width:44%; height:44%; opacity:.85; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-badge{
  position:absolute; top:.6rem; left:.6rem; background:var(--terracotta-solid); color:#fff; font-size:.68rem;
  font-weight:800; padding:.28rem .6rem; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.03em;
}
.stock-badge{ position:absolute; top:.6rem; right:.6rem; font-size:.65rem; font-weight:800; padding:.25rem .55rem; border-radius:var(--radius-pill); }
.stock-badge.ok{ background:#E4F3EA; color:var(--success); }
.stock-badge.low{ background:#FBEADD; color:var(--terracotta-dark); }
.stock-badge.out{ background:#F9E3E0; color:var(--danger); }

/* --- Ficha de producto (modal): galería + caja de compra + secciones ---
   Rediseño: antes todo vivía en una sola columna de texto con separadores
   sueltos (bordes arriba Y abajo en marcas, margin-top:auto muerto en el
   precio, descripción extensa en tarjetas que se promocionaban casi todas a
   ancho completo) — de ahí los huecos. Ahora: galería + "caja de compra"
   compacta con un único ritmo vertical, y debajo secciones a todo el ancho
   con cabecera uniforme, al estilo de una ficha técnica (RS/Würth/Leroy
   Merlin): compatibilidad, descripción, servicio de tallado, relacionados.
   En escritorio (≥860px) la foto y la caja de compra van en dos columnas
   (44%/1fr); las secciones de debajo siguen a ancho completo. */
/* En móvil, el propio .product-modal (fijo a la pantalla) es el contenedor
   con scroll, y la tarjeta ocupa todo su ancho sin recorte propio. Antes la
   tarjeta tenía su propio overflow:auto DENTRO de un padre position:fixed —
   esa combinación de "fixed" + scroll interno anidado es la que hace que
   algunos navegadores móviles (Safari iOS sobre todo) "peguen" visualmente
   la foto en pantalla mientras el texto se desplaza por encima durante el
   scroll (el texto se lee sobre la foto, ilegible). Con un único contenedor
   de scroll, la foto es contenido normal más: sube y baja con el resto,
   nunca se queda de fondo. En escritorio (≥860px) se mantiene la tarjeta
   centrada y flotante, con su propio scroll (sin galería "sticky": se quitó
   también, la foto es contenido normal que sube con el resto). */
.product-modal{
  position:fixed; inset:0; z-index:260;
  background:rgba(23,36,62,.55); opacity:0; visibility:hidden;
  transition:opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.product-modal.is-open{ opacity:1; visibility:visible; }
.product-modal-card{
  background:var(--paper); width:100%; min-width:0; min-height:100%; position:relative;
  display:grid; grid-template-columns:minmax(0,1fr);
  transform:translateY(10px); opacity:0; transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.product-modal.is-open .product-modal-card{ transform:translateY(0); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .product-modal, .product-modal-card{ transition:none; }
}
/* align-items:start es la corrección clave: por defecto (stretch) el grid
   estira la columna de la foto hasta igualar la altura de la columna de
   texto (que suele ser más alta: nombre, ref, specs, precio, confianza...).
   Con "start", cada columna ocupa solo su propia altura de contenido. OJO:
   la foto NO lleva position:sticky — se probó y en el ordenador se quedaba
   fija arriba mientras el texto de al lado seguía bajando ("la foto no
   hace scroll"), efecto que no se quería. */
@media(min-width:860px){
  .product-modal{ display:flex; align-items:center; justify-content:center; padding:1.2rem; overflow:visible; }
  .product-modal-card{
    max-width:1040px; max-height:90vh; min-height:0; overflow:hidden auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
    grid-template-columns:minmax(0,44%) minmax(0,1fr); align-items:start;
  }
}
/* El aspa de cerrar vive fuera de .product-modal-card (que anima su propio
   transform) para poder ser position:fixed de verdad en móvil: un transform
   en un antecesor crea un containing block nuevo y "atraparía" el fixed,
   dejándolo desplazarse con el contenido en vez de quedar siempre alcanzable
   mientras se hace scroll por la ficha. */
.product-modal-close{
  position:fixed; top:.8rem; right:.8rem; width:40px; height:40px; border-radius:50%; background:var(--white);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); z-index:2; color:var(--navy);
}
.product-modal-close svg{ width:20px; height:20px; }
@media(min-width:860px){
  .product-modal-close{ position:absolute; }
}

/* Galería */
.product-modal-media{ display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.product-modal-gallery-main{
  aspect-ratio:1/1; background:linear-gradient(150deg,var(--teal-tint),var(--cream)); display:flex; align-items:center;
  justify-content:center; color:var(--teal-deep); position:relative; min-width:0; overflow:hidden;
}
/* contain (no cover): la foto se ve SIEMPRE completa, sin recortar. */
.product-modal-gallery-main img{ width:100%; height:100%; min-width:0; object-fit:contain; }
.product-modal-gallery-main svg{ width:38%; height:38%; opacity:.85; }
.product-modal-gallery-thumbs{ display:flex; gap:.5rem; padding:.6rem; overflow-x:auto; background:var(--paper); -webkit-overflow-scrolling:touch; }
.product-modal-gallery-thumb{
  flex:0 0 auto; width:52px; height:52px; border-radius:var(--radius-sm); overflow:hidden; padding:0;
  background:var(--cream); border:2px solid transparent; cursor:pointer; transition:border-color var(--dur-base) var(--ease);
}
.product-modal-gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-modal-gallery-thumb:hover{ border-color:var(--teal-tint); }
.product-modal-gallery-thumb.is-active{ border-color:var(--teal); }

/* Caja de compra: nombre, referencia, descripción corta, ficha técnica breve
   y bloque de compra en un único gap — sin bordes sueltos entre bloques. */
.product-modal-buybox{ padding:var(--space-6); display:flex; flex-direction:column; gap:.65rem; min-width:0; }
.pm-eyebrow{ font-size:.78rem; font-weight:800; color:var(--teal-dark); text-transform:uppercase; letter-spacing:.03em; }
.product-modal-name{ font-family:var(--font-display); font-size:1.4rem; color:var(--navy); margin:0; line-height:1.25; }
.pm-ref{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted); margin:0; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.pm-ref-copy{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
  color:var(--muted); background:var(--cream); flex:none; transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pm-ref-copy svg{ width:13px; height:13px; }
.pm-ref-copy:hover{ color:var(--teal-deep); background:var(--teal-tint); }
.pm-ref-copy.is-copied{ color:var(--success); background:#E4F3EA; }
.pm-lead{ font-size:.94rem; color:var(--ink); line-height:1.6; margin:.15rem 0 0; }

/* Ficha técnica breve: lista de definición de 2 columnas — solo se pintan
   las filas que tienen dato. Es el bloque que rellena el hueco bajo la foto
   con contenido escaneable en vez de aire. */
.pm-specs{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:.35rem 0 0; padding:.85rem 0 0; border-top:1px solid var(--line); }
.pm-specs dt{ font-size:.76rem; font-weight:700; color:var(--navy-soft); white-space:nowrap; }
.pm-specs dd{ font-size:.82rem; color:var(--ink); margin:0; }

/* Selectores de opción (producto configurable) */
.grupo-ejes{ display:flex; flex-direction:column; gap:.85rem; margin-top:.3rem; }
.grupo-eje{ display:flex; flex-direction:column; gap:.45rem; }
.grupo-eje-label{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--navy-soft); }
.grupo-chips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.grupo-chip{ min-height:42px; padding:.5rem .9rem; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:var(--white); font-size:.85rem; font-weight:700; color:var(--navy); transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.grupo-chip:hover:not(:disabled){ border-color:var(--teal); }
.grupo-chip.is-sel{ background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:var(--shadow-card); }
.grupo-chip.is-off{ opacity:.4; text-decoration:line-through; cursor:not-allowed; }

/* Bloque de compra: precio, stock, cantidad y CTA agrupados bajo un único
   separador — antes el CTA quedaba "flotando" (margin-top:auto sin efecto
   en un flex sin altura fija) en vez de anclado al bloque de precio. */
.pm-purchase{ display:flex; flex-direction:column; gap:.7rem; margin-top:.4rem; padding-top:1rem; border-top:1px solid var(--line); }
.pm-purchase-price-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; }
.product-modal-price{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--terracotta-solid); font-variant-numeric:tabular-nums; }
.pm-unit-note{ flex-basis:100%; margin:0; font-size:.8rem; color:var(--muted); }
.pm-stock{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:800; padding:.3rem .65rem; border-radius:var(--radius-pill); }
.pm-stock::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pm-stock.ok{ background:#E4F3EA; color:var(--success); }
.pm-stock.low{ background:#FBEADD; color:var(--terracotta-dark); }
.pm-stock.out{ background:#F9E3E0; color:var(--danger); }
.pm-buy-row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:stretch; }
.pm-qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; flex:none; }
.pm-qty button{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--navy);
  font-size:1.15rem; font-weight:800; background:var(--white); transition:background var(--dur-fast) var(--ease);
}
.pm-qty button:hover:not(:disabled){ background:var(--cream); }
.pm-qty button:disabled{ color:var(--line); cursor:not-allowed; }
.pm-qty span{ min-width:2.4ch; text-align:center; font-weight:800; color:var(--navy); font-variant-numeric:tabular-nums; }
.pm-buy-row .btn{ flex:1 1 auto; justify-content:center; min-height:44px; }

/* Confianza: panel cerrado, no una lista de texto suelta */
.pm-trust{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin:0; padding:.75rem .9rem; background:var(--cream); border-radius:var(--radius-md); }
.pm-trust li{ display:flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--navy-soft); font-weight:700; }
.pm-trust svg{ width:16px; height:16px; color:var(--teal-dark); flex:none; }

/* --- Secciones a todo el ancho, debajo de galería + caja de compra --- */
.product-modal-sections{ grid-column:1/-1; display:flex; flex-direction:column; }
.pm-section{ padding:0 var(--space-6) var(--space-6); }
.pm-section:empty{ display:none; }
.pm-section h3{ font-family:var(--font-display); font-size:1.05rem; color:var(--navy); margin:0 0 .9rem; padding-top:1.3rem; border-top:1px solid var(--line); }

/* Compatibilidad y fabricante (antes vivía dentro de la caja de compra, con
   doble borde arriba y abajo partiéndola en dos) */
.pm-brands{ display:flex; flex-direction:column; gap:.6rem; }
.pm-brands-label{ font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-dark); }
.pm-brands-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pm-brand{ display:inline-flex; align-items:center; gap:.45rem; padding:.32rem .7rem .32rem .38rem; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-pill); box-shadow:var(--shadow-card); cursor:pointer; font:inherit; color:inherit; transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.pm-brand:hover{ border-color:var(--teal); transform:translateY(-1px); }
.pm-brand:active{ transform:translateY(0); }
.pm-brand--modelo{ background:var(--cream); }
.pm-brand--modelo .pm-brand-mark{ background:var(--teal-dark); }
.pm-brand-logo{ position:relative; width:26px; height:26px; flex:none; }
.pm-brand-logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:6px; background:var(--paper); }
.pm-brand-mark{ position:absolute; inset:0; border-radius:6px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:.7rem; color:#fff; background:var(--navy-soft); }
.pm-brand--coche .pm-brand-mark{ background:var(--terracotta-solid); }
.pm-brand-name{ font-size:.78rem; font-weight:700; color:var(--navy); white-space:nowrap; }

/* Descripción y características: a todo el ancho de la sección (antes:
   rejilla auto-fit que promocionaba casi toda tarjeta a ancho completo →
   columna de tarjetas grandes con mucho aire; luego se probó una columna
   angosta de 68ch, pero el usuario pidió que este bloque —como los demás—
   ocupe el ancho completo). Rachas de "clave: valor" se pintan como tabla
   de ficha técnica en vez de párrafos sueltos. */
.pm-ext{ display:flex; flex-direction:column; gap:1.1rem; }
.pm-ext-block h4{ font-family:var(--font-display); font-size:.86rem; color:var(--teal-deep); margin:0 0 .5rem; text-transform:uppercase; letter-spacing:.03em; }
.pm-ext-block p{ font-size:.9rem; color:var(--muted); line-height:1.65; margin:0 0 .6rem; }
.pm-ext-block p:last-child{ margin-bottom:0; }
.pm-ext-block p strong{ color:var(--navy); font-weight:800; }
.pm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.pm-list li{ position:relative; padding-left:1.15rem; font-size:.9rem; color:var(--muted); line-height:1.5; }
.pm-list li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--teal); }
.pm-spec{ width:100%; border-collapse:collapse; font-size:.86rem; }
.pm-spec tr{ border-bottom:1px solid var(--line); }
.pm-spec tr:last-child{ border-bottom:none; }
.pm-spec th, .pm-spec td{ text-align:left; padding:.5rem .6rem; vertical-align:top; }
.pm-spec th{ width:38%; font-weight:700; color:var(--navy-soft); padding-left:0; }
.pm-spec td{ color:var(--ink); }
.pm-spec tr:nth-child(even){ background:var(--cream); }

/* Servicio "llave tallada por foto": antes se inyectaba desde JS con su
   propia paleta cian/turquesa Tailwind y emojis, ajena al resto del sitio.
   Ahora vive aquí, con los tokens de marca, como cualquier otra sección. */
.pm-tallado{ background:var(--teal-tint); border-radius:var(--radius-md); padding:var(--space-5); display:flex; flex-direction:column; gap:.9rem; }
.pm-tallado-head{ display:flex; gap:1rem; align-items:flex-start; }
.pm-tallado-icon{ width:44px; height:44px; border-radius:50%; background:var(--white); color:var(--teal-deep); flex:none; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); }
.pm-tallado-icon svg{ width:22px; height:22px; }
.pm-tallado-example{ width:88px; height:auto; flex:none; border-radius:8px; background:var(--white); border:1px solid var(--line); }
.pm-tallado-title{ font-family:var(--font-display); font-weight:700; color:var(--navy); margin:0 0 .3rem; font-size:.98rem; }
.pm-tallado-text{ margin:0; font-size:.85rem; color:var(--navy-soft); line-height:1.5; }
.pm-tallado-precio{ display:inline-block; margin:.55rem 0 0; padding:.35rem .7rem; border-radius:var(--radius-sm); background:var(--cream-deep); font-size:.8rem; color:var(--navy-soft); }
.pm-tallado-precio strong{ color:var(--terracotta-solid); }
.pm-tallado-btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.6rem 1.1rem; border-radius:var(--radius-pill); background:var(--teal-dark); color:#fff; font-size:.85rem; font-weight:700; cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.pm-tallado-btn:hover{ background:var(--teal-deep); }
.pm-tallado-btn svg{ width:17px; height:17px; }
.pm-tallado-thumbs{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pm-tallado-thumb{ position:relative; width:64px; height:64px; }
.pm-tallado-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.pm-tallado-thumb button{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:2px solid var(--paper); background:var(--navy); color:#fff; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; }
@media(min-width:600px){ .pm-tallado-head{ align-items:center; } }

/* Relacionados */
.pm-related-row{ display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.2rem; -webkit-overflow-scrolling:touch; }
.pm-related-card{ flex:0 0 auto; width:112px; cursor:pointer; display:flex; flex-direction:column; gap:.3rem; text-align:left; background:none; border:none; padding:0; font:inherit; }
.pm-related-media{ width:112px; height:112px; border-radius:var(--radius-sm); overflow:hidden; background:linear-gradient(150deg,var(--teal-tint),var(--cream)); display:flex; align-items:center; justify-content:center; }
.pm-related-media img{ width:100%; height:100%; object-fit:cover; }
.pm-related-media svg{ width:38%; height:38%; opacity:.85; }
.pm-related-name{ font-size:.74rem; color:var(--navy-soft); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pm-related-price{ font-size:.78rem; font-weight:800; color:var(--terracotta-solid); }

.product-card.is-agotado{ opacity:.72; }
.product-body{ padding:var(--space-4); display:flex; flex-direction:column; gap:.35rem; flex:1; }
.product-cat{
  font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--teal-dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Recorte a 2 líneas + altura mínima equivalente: así todas las tarjetas de
   una fila alinean su precio/botón aunque el nombre varíe de largo, en vez
   de dejar huecos irregulares bajo los nombres cortos. */
.product-name{
  font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:.98rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em;
}
.product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.6rem; }
.product-price{ font-family:var(--font-display); font-weight:800; color:var(--terracotta-solid); font-size:1.15rem; }
.add-btn{
  width:42px; height:42px; border-radius:50%; background:var(--navy); color:var(--white); display:flex;
  align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease); flex:none;
}
.add-btn:hover{ background:var(--terracotta-solid); transform:scale(1.08) rotate(90deg); }
.add-btn svg{ width:20px; height:20px; }
.add-btn:disabled{ background:var(--muted); opacity:.55; cursor:not-allowed; }
.add-btn:disabled:hover{ transform:none; background:var(--muted); }

.is-hidden{ display:none !important; }

.cart-fab{
  position:fixed; bottom:var(--space-5); right:var(--space-5); z-index:150; width:60px; height:60px; border-radius:50%;
  background:var(--terracotta-solid); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-btn); transition:transform var(--dur-base) var(--ease);
}
.cart-fab:hover{ transform:scale(1.07); }
.cart-fab svg{ width:26px; height:26px; }
.cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--navy); color:#fff; font-size:.7rem; font-weight:800;
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);
}

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:var(--paper); z-index:250;
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease); box-shadow:-20px 0 50px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:var(--space-5); border-bottom:1px solid var(--line); }
.cart-drawer-items{ flex:1; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.cart-line{ display:flex; gap:.8rem; align-items:center; }
.cart-line-media{ width:56px; height:56px; border-radius:12px; background:var(--teal-tint); color:var(--teal-deep); display:flex; align-items:center; justify-content:center; flex:none; }
.cart-line-media svg{ width:28px; height:28px; }
.cart-line-info{ flex:1; }
.cart-line-info .n{ font-weight:800; color:var(--navy); font-size:.88rem; }
.cart-line-info .p{ font-size:.82rem; color:var(--muted); }
.qty{ display:flex; align-items:center; gap:.4rem; border:1.5px solid var(--line); border-radius:var(--radius-pill); padding:.15rem; }
.qty button{ width:26px; height:26px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; font-weight:800; }
.qty span{ min-width:18px; text-align:center; font-weight:700; font-size:.85rem; }
.cart-drawer-foot{ padding:var(--space-5); border-top:1px solid var(--line); background:var(--white); }
.cart-total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--navy); margin-bottom:var(--space-4); }
.cart-envio-row{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); margin-bottom:var(--space-2); }
.overlay{ position:fixed; inset:0; background:rgba(23,36,62,.55); z-index:240; opacity:0; visibility:hidden; transition:opacity var(--dur-base) var(--ease); }
.overlay.is-open{ opacity:1; visibility:visible; }
.empty-cart{ text-align:center; padding:var(--space-8) var(--space-4); color:var(--muted); }
.empty-cart svg{ width:56px; height:56px; color:var(--line); margin-inline:auto var(--space-3); }

/* --- Checkout: formulario de datos dentro del carrito --- */
.checkout-form{ flex:1; overflow-y:auto; padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.checkout-back{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; color:var(--navy-soft); font-weight:700;
  font-size:.85rem; padding:.3rem 0;
}
.checkout-back svg{ width:16px; height:16px; }
.checkout-back:hover{ color:var(--terracotta-solid); }
.checkout-intro{ font-size:.85rem; color:var(--muted); margin:0; }
.field{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:700; color:var(--navy); }
.field input, .field select, .field textarea{
  font-family:var(--font-body); font-weight:400; font-size:.9rem; padding:.65rem .85rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--white); color:var(--ink); resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--teal); }
.checkout-error{ font-size:.82rem; font-weight:700; color:var(--danger); background:#F9E3E0; border-radius:var(--radius-sm); padding:.6rem .8rem; margin:0; }
.checkout-error:empty{ display:none; }
.field--checkbox { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.field--checkbox input[type="checkbox"] { width: auto; flex: none; padding: 0; border-width: 1px; }
.checkout-factura-datos { display: flex; flex-direction: column; gap: .6rem; margin: -.4rem 0 .4rem; padding-left: .2rem; }

/* --- Checkout: pantalla de confirmación --- */
.checkout-success{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-6); gap:var(--space-3); }
.checkout-success svg{ width:56px; height:56px; color:var(--success); }
.checkout-success-title{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; color:var(--navy); margin:0; }
.checkout-success-text{ font-size:.9rem; color:var(--muted); margin:0 0 var(--space-3); }

/* ==========================================================================
   Banner ERP / nota de datos en vivo (prototipo)
   ========================================================================== */
.live-note{
  display:flex; align-items:center; gap:.6rem; background:#FFF7EC; border:1.5px dashed var(--terracotta);
  color:var(--terracotta-dark); font-size:.82rem; font-weight:700; padding:.7rem 1rem; border-radius:var(--radius-md);
  margin-bottom:var(--space-5);
}
.live-note svg{ width:20px; height:20px; flex:none; }

/* ==========================================================================
   CTA final / banda de contacto
   ========================================================================== */
.cta-band{
  border-radius:var(--radius-lg); background:var(--navy); color:#fff; padding:var(--space-7);
  display:grid; gap:var(--space-5); position:relative; overflow:hidden;
}
@media(min-width:860px){ .cta-band{ grid-template-columns:1.3fr auto; align-items:center; } }
.cta-band h2{ color:#fff; margin-bottom:.5rem; }
.cta-band p{ color:#B9C3D6; margin-bottom:0; }
.cta-band-actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* Variante solo para el recuadro de contacto del index: título y texto a
   todo el ancho de la caja, botones abajo del todo en fila — en vez del
   texto a la izquierda + botones al lado que usa .cta-band en el resto del
   sitio (esa versión se queda igual en todas las demás páginas). */
@media(min-width:860px){
  .cta-band--stacked{ grid-template-columns:1fr; align-items:start; }
  .cta-band--stacked .cta-band-actions{ margin-top:var(--space-2); }
}

/* ==========================================================================
   Formulario de contacto (index) — junto a la banda CTA: la banda cubre la
   urgencia (llamar/WhatsApp), el formulario cubre la consulta no urgente.
   ========================================================================== */
.contact-grid{ display:grid; gap:var(--space-6); grid-template-columns:1fr; margin-top:var(--space-6); align-items:stretch; }
@media(min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; } }
.contact-grid .cta-band{ height:100%; }
.contact-form{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  padding:var(--space-6); border:1px solid var(--line); display:flex; flex-direction:column; gap:var(--space-4);
}
.contact-form h3{ margin-bottom:0; }
.contact-form .field-row{ display:grid; gap:var(--space-4); grid-template-columns:1fr; }
@media(min-width:520px){ .contact-form .field-row{ grid-template-columns:1fr 1fr; } }
.contact-success{
  display:flex; align-items:center; gap:.6rem; background:var(--teal-tint); color:var(--teal-deep);
  font-weight:700; font-size:.88rem; padding:.8rem 1rem; border-radius:var(--radius-md);
}
.contact-success svg{ width:20px; height:20px; flex:none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--navy); color:#B9C3D6; padding-top:var(--space-9); }
.footer h4{ color:#fff; font-size:1rem; margin-bottom:var(--space-4); }
.footer-grid{ display:grid; gap:var(--space-6); grid-template-columns:1fr; padding-bottom:var(--space-8); }
@media(min-width:800px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer a{ display:block; padding:.32rem 0; font-size:.9rem; }
.footer a:hover{ color:var(--teal); }
.footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:var(--space-3); }
.footer-brand img{ height:38px; border-radius:8px; }
.footer-brand span{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.15rem; }
.footer-social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--space-4); }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; padding:0; }
.footer-social a:hover{ background:rgba(255,255,255,.16); color:#fff; }
.footer-social svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; font-size:.8rem; }

/* ==========================================================================
   WhatsApp flotante
   ========================================================================== */
.wa-float{
  position:fixed; bottom:var(--space-5); left:var(--space-5); z-index:150; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(37,211,102,.7);
}
.wa-float svg{ width:30px; height:30px; }
.wa-float::before{
  content:""; position:absolute; inset:-6px; border-radius:50%; border:2.5px solid #25D366; opacity:.6;
  animation:pulse 2.2s ease-out infinite;
}
@media(prefers-reduced-motion:reduce){ .wa-float::before{ animation:none; } }
@keyframes pulse{ 0%{ transform:scale(.9); opacity:.6; } 100%{ transform:scale(1.5); opacity:0; } }

/* ==========================================================================
   Migas de pan
   ========================================================================== */
.breadcrumbs{ font-size:.82rem; color:var(--muted); display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; padding-block:var(--space-4); }
.breadcrumbs a{ color:var(--teal-deep); font-weight:700; }
.breadcrumbs svg{ width:14px; height:14px; }

/* ==========================================================================
   Carrusel de cabecera de la tienda (configurable desde tienda_carrusel.php)
   ========================================================================== */
.tc-carrusel{ position:relative; overflow:hidden; background:var(--navy); }
.tc-carrusel[hidden]{ display:none; }
.tc-carrusel-track{ display:flex; transition:transform var(--dur-slow) var(--ease); }
/* Proporción de banner publicitario, más bajo que un hero — ver el aviso
   de tamaño recomendado en tienda_carrusel.php al subir (1600×325px, ~4.9:1).
   Antes se combinaba aspect-ratio con min-height para no dejar la franja
   demasiado baja en móviles muy estrechos, pero esa combinación hace que en
   algunos navegadores el ancho de la diapositiva se recalcule para
   mantener la proporción con el alto mínimo, saliéndose del 100% del
   carrusel — se veía un trozo de la siguiente foto asomando (no
   centrado). Se evita del todo usando una proporción distinta (más alta)
   solo en móvil, en vez de forzar un alto mínimo que compita con el ancho. */
.tc-carrusel-slide{ flex:0 0 100%; width:100%; position:relative; aspect-ratio:1600/325; max-height:325px; display:block; }
.tc-carrusel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:640px){ .tc-carrusel-slide{ aspect-ratio:4/1; } }
.tc-carrusel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.85); color:var(--navy);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  transition:background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.tc-carrusel-arrow:hover{ background:var(--white); transform:translateY(-50%) scale(1.06); }
.tc-carrusel-arrow svg{ width:20px; height:20px; }
.tc-carrusel-arrow--prev{ left:var(--space-4); }
.tc-carrusel-arrow--next{ right:var(--space-4); }
@media(max-width:640px){ .tc-carrusel-arrow{ width:34px; height:34px; } .tc-carrusel-arrow svg{ width:16px; height:16px; } }
.tc-carrusel-dots{ position:absolute; z-index:2; bottom:var(--space-4); left:50%; transform:translateX(-50%); display:flex; gap:.45rem; }
.tc-carrusel-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); padding:0; border:none; transition:width var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.tc-carrusel-dot.is-active{ width:24px; background:var(--white); }

/* ==========================================================================
   Página interior — hero angosto de servicio
   ========================================================================== */
.page-hero{ padding-block:var(--space-6) var(--space-8); background:var(--cream); position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero-badges{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:var(--space-4); }
.page-hero-grid{ display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:end; }
@media(min-width:960px){ .page-hero-grid{ grid-template-columns:1.4fr .9fr; align-items:stretch; } }
/* Columna derecha del hero de servicio (foto). En móvil, align-items:end en
   .page-hero-grid alinea esta columna con la parte de abajo del bloque de
   texto de al lado, para que la foto no se quede pegada arriba cuando el
   párrafo es más largo que de costumbre. En escritorio pasa a stretch (ver
   .img-slot--hero) para que la foto se alargue en vertical hasta igualar
   la altura del bloque de texto. */
.hero-side{ display:flex; flex-direction:column; gap:var(--space-5); }

.quick-card{ background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lift); padding:var(--space-6); border:1px solid var(--line); }
.quick-card h3{ font-size:1.05rem; }
.quick-card .row{ display:flex; align-items:center; gap:.7rem; padding-block:.6rem; border-bottom:1px solid var(--line); font-size:.9rem; }
.quick-card .row:last-of-type{ border-bottom:none; }
.quick-card .row svg{ width:19px; height:19px; color:var(--teal-dark); flex:none; }
.quick-card .btn{ margin-top:var(--space-4); }

.content-block{ max-width:74ch; margin-inline:auto; }
.content-block h2{ margin-top:var(--space-7); }
.content-block ul{ display:flex; flex-direction:column; gap:.6rem; margin:var(--space-4) 0; }
.content-block ul li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--ink); }
.content-block ul li svg{ width:18px; height:18px; color:var(--teal-dark); margin-top:3px; flex:none; }

/* Listas escritas desde el editor enriquecido de paginas_web.php (Quill).
   Quill NUNCA emite <ul>: siempre <ol>, y el tipo de cada punto va en
   data-list ("bullet" o "ordered") sobre el <li>. Aquí no se carga el CSS de
   Quill, así que hay que pintar los marcadores a mano: se anula el marcador
   nativo del <ol> (si no, los puntos saldrían numerados) y se dibuja cada
   marcador con ::before sobre un contador propio. */
.content-block ol{ list-style:none; margin:var(--space-4) 0; padding-left:1.6em; counter-reset:lista-bloque; }
/* Por defecto (data-list="ordered", o un <ol><li> heredado sin atributo) el
   punto se numera con el contador propio, que arranca de nuevo en cada <ol>. */
.content-block ol > li{ list-style:none; position:relative; color:var(--ink); margin-bottom:.4rem; counter-increment:lista-bloque; }
.content-block ol > li:last-child{ margin-bottom:0; }
.content-block ol > li::before{
  content:counter(lista-bloque) ".";
  position:absolute; left:-1.6em; width:1.3em; text-align:right; color:var(--muted);
}
/* Los puntos de lista no numeran, y además reinician el contador: si tras un
   grupo de puntos viene una lista numerada dentro del MISMO <ol> (Quill funde
   listas contiguas en un solo <ol>), esa vuelve a empezar en 1. */
.content-block ol > li[data-list="bullet"]{ counter-increment:none; counter-reset:lista-bloque; }
.content-block ol > li[data-list="bullet"]::before{ content:"\2022"; }

/* Bloque destacado dentro del contenido largo — para consejos/avisos que
   deben distinguirse del cuerpo de texto normal, en vez de otra lista más
   suelta en la misma columna. */
.callout{
  background:var(--teal-tint); border:1px solid rgba(21,106,96,.18); border-left:4px solid var(--teal-dark);
  border-radius:var(--radius-md); padding:var(--space-5); margin:var(--space-6) 0;
}
.callout h3{ display:flex; align-items:center; gap:.5rem; font-size:1.02rem; margin-bottom:.9rem; }
.callout h3 svg{ width:22px; height:22px; color:var(--teal-dark); flex:none; }
/* El cuerpo del callout ahora puede llevar listas del editor enriquecido, y
   Quill siempre las emite como <ol> — de ahí que la regla cubra ambos. */
.callout ul, .callout ol{ margin:0 !important; }
.callout--warm{ background:#FFF3E9; border-color:rgba(182,81,35,.2); border-left-color:var(--terracotta-solid); }
.callout--warm h3 svg{ color:var(--terracotta-solid); }

.related-services{ display:flex; flex-direction:column; gap:.7rem; margin-inline:auto; }
.related-services a{
  display:flex; justify-content:space-between; align-items:center; padding:.85rem 1rem; border-radius:12px;
  background:var(--cream); font-weight:700; color:var(--navy); font-size:.88rem;
}
.related-services a:hover{ background:var(--teal-tint); }
.related-services a svg{ width:16px; height:16px; }

/* ==========================================================================
   Huecos de imagen (prototipo) — placeholder con medida y referencia al
   prompt correspondiente en PROMPTS-IMAGENES.md. Al incorporar la imagen
   real, sustituir el <div class="img-slot"> por <img> / <picture>.
   ========================================================================== */
.img-slot{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(23,36,62,.05) 0 14px, transparent 14px 28px),
    linear-gradient(150deg,var(--teal-tint),var(--cream));
  border:2px dashed var(--teal-dark);
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.img-slot-inner{ text-align:center; padding:var(--space-4); color:var(--teal-deep); max-width:26ch; }
.img-slot-inner svg{ width:34px; height:34px; margin-inline:auto var(--space-2); opacity:.8; }
.img-slot-inner .lbl{ font-family:var(--font-display); font-weight:700; font-size:.92rem; display:block; margin-bottom:.2rem; }
.img-slot-inner .meta{ font-size:.74rem; color:var(--muted); line-height:1.4; display:block; }
.img-slot-inner .tag{
  display:inline-block; margin-top:.5rem; font-size:.65rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; padding:.22rem .55rem; border-radius:var(--radius-pill);
}
.img-slot-inner .tag.photo{ background:#FBEADD; color:var(--terracotta-dark); }
.img-slot-inner .tag.illustration{ background:#E7F7F4; color:var(--teal-deep); }
.img-slot--square{ aspect-ratio:1/1; }
.img-slot--portrait{ aspect-ratio:3/4; }
.img-slot--wide{ aspect-ratio:16/9; }
.img-slot--landscape{ aspect-ratio:3/2; }

/* Foto del hero — Plantilla B (servicio provincial/nacional). En móvil se
   apila debajo del texto y queda 1:1; en escritorio (.page-hero-grid ya
   estira la fila con align-items:stretch) suelta el ratio fijo y llena
   toda la altura del bloque de texto de al lado, quedando alta y estrecha
   en vez de un cuadrado pequeño pegado abajo. */
.img-slot--hero{ aspect-ratio:1/1; }
@media(min-width:960px){ .img-slot--hero{ aspect-ratio:auto; height:100%; } }

/* Utilidades */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.h2--lg{ font-size:clamp(2.1rem,4.2vw,3.1rem); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ==========================================================================
   PLANTILLAS DE SERVICIO — variantes de distribución (A / B / C)
   Antes, A/B/C compartían el mismo .page-hero-grid (texto | foto+resumen
   apilados). Estos componentes le dan a cada plantilla su propia forma real,
   no solo texto distinto — ver /BOCETO en la sesión de diseño.
   ========================================================================== */

/* --- A · Local/urgencia: resumen a ancho completo, foto+resumen debajo ---
   Sin max-width propio: el resumen tiene que llegar al mismo ancho que la
   fila de abajo (foto + resumen rápido), no quedarse en una columna más
   estrecha encima de ella. Dentro de este bloque, el párrafo (.lede) pierde
   también su límite genérico de 60ch (marcado a mano: "ensanchar hasta que
   quede igual que el de arriba") y los dos botones de CTA se centran. */
.hero-a-text{ max-width:none; }
.hero-a-text .lede{ max-width:none; }
.hero-a-text .hero-actions{ justify-content:center; }
.hero-a-split{ display:grid; gap:var(--space-5); grid-template-columns:1fr; margin-top:var(--space-7); }
@media(min-width:720px){ .hero-a-split{ grid-template-columns:.85fr 1.15fr; align-items:stretch; } }

.trust-strip{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:var(--space-6); }
.trust-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--white); border:1.5px solid var(--line);
  border-radius:var(--radius-pill); padding:.55rem 1rem; font-weight:700; font-size:.85rem; color:var(--navy-soft);
}
.trust-pill svg{ width:18px; height:18px; color:var(--teal-dark); flex:none; }

.timeline-v{ position:relative; max-width:52ch; margin-inline:auto; padding-left:var(--space-6); display:flex; flex-direction:column; gap:var(--space-5); text-align:left; }
.timeline-v::before{ content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background:var(--line); }
.timeline-v .tv-node{ position:relative; }
.timeline-v .tv-node::before{
  content:""; position:absolute; left:-29px; top:2px; width:28px; height:28px; border-radius:50%;
  background:var(--teal); border:4px solid var(--paper);
}
.timeline-v .tv-node h3{ font-size:1rem; margin-bottom:.2rem; }
.timeline-v .tv-node p{ font-size:.88rem; margin:0; }

/* Fila del proceso: pasos a la izquierda + imagen a la derecha, con el
   título "4 pasos, sin dramas" centrado por encima de las dos columnas. */
.steps-media{ display:grid; gap:var(--space-6); grid-template-columns:1fr; margin-top:var(--space-6); align-items:center; }
@media(min-width:820px){ .steps-media{ grid-template-columns:1.1fr .9fr; } }
.steps-media .timeline-v{ max-width:none; margin-inline:0; width:100%; }
.steps-media .img-slot{ height:100%; min-height:320px; }

.price-cards{ display:grid; gap:var(--space-5); grid-template-columns:1fr; margin-top:var(--space-6); }
@media(min-width:820px){ .price-cards{ grid-template-columns:repeat(3,1fr); align-items:end; } }
.price-card{
  background:var(--white); border-radius:var(--radius-lg); border:1.5px solid var(--line); padding:var(--space-6);
  box-shadow:var(--shadow-card); text-align:center;
}
.price-card .name{ font-weight:800; color:var(--navy); }
.price-card .desc{ font-size:.82rem; color:var(--muted); margin:.4rem 0 var(--space-4); }
.price-card .amount{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--terracotta-solid); }
.price-card--featured{ border-color:var(--terracotta); box-shadow:var(--shadow-lift); transform:translateY(-10px); position:relative; }
.price-card--featured::before{
  content:"La más pedida"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--terracotta-solid); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.03em;
  text-transform:uppercase; padding:.3rem .8rem; border-radius:var(--radius-pill); white-space:nowrap;
}
@media(max-width:819px){ .price-card--featured{ transform:none; } }
/* Variante para cuando solo hay 2 tarifas (p.ej. cerrojos FAC) — 3 columnas
   con la tercera vacía se veía descompensado. */
@media(min-width:820px){ .price-cards--2{ grid-template-columns:repeat(2,1fr); max-width:700px; margin-inline:auto; } }

.call-bar-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:140; background:var(--navy); padding:.6rem var(--space-5);
  display:flex; gap:.6rem; box-shadow:0 -10px 24px -12px rgba(0,0,0,.4);
}
.call-bar-mobile .btn{ flex:1; }
@media(min-width:820px){ .call-bar-mobile{ display:none; } }
.has-call-bar main{ padding-bottom:80px; }
@media(min-width:820px){ .has-call-bar main{ padding-bottom:0; } }
.has-call-bar .wa-float{ bottom:88px; }
@media(min-width:820px){ .has-call-bar .wa-float{ bottom:var(--space-5); } }

/* Mapa de "cómo llegar" — sustituye a los chips de barrio en la Plantilla A.
   Sin API key: es el embed público de Google Maps (?output=embed). */
.map-embed{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-card); aspect-ratio:16/7; margin-top:var(--space-5);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }
@media(max-width:640px){ .map-embed{ aspect-ratio:4/3; } }

/* content-block / related-services centrados por defecto (heredado del
   sistema original) — en la Plantilla A se piden pegados al margen
   izquierdo del contenedor en vez de flotando centrados. */
.content-block--left{ margin-inline:0; }
.related-services--left{ margin-inline:0; }

/* --- B · Provincial/nacional: franja de stats + bifurcación + índice fijo --- */
.stat-strip{ display:grid; gap:var(--space-4); grid-template-columns:repeat(2,1fr); margin-top:var(--space-6); }
@media(min-width:820px){ .stat-strip{ grid-template-columns:repeat(4,1fr); } }
.stat-cell{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-4);
  text-align:center; box-shadow:var(--shadow-card); display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.stat-cell svg{ width:24px; height:24px; color:var(--teal-dark); }
.stat-cell span{ font-size:.82rem; font-weight:700; color:var(--navy-soft); line-height:1.25; }

.fork{ display:grid; gap:var(--space-5); grid-template-columns:1fr; margin-top:var(--space-6); }
@media(min-width:720px){ .fork{ grid-template-columns:1fr 1fr; } }
.fork-card{
  border-radius:var(--radius-lg); padding:var(--space-6); border:1.5px solid transparent; display:flex; flex-direction:column; gap:.6rem;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.fork-card:hover{ transform:translateY(-4px); }
.fork-card h3{ font-size:1.15rem; }
.fork-card p{ font-size:.9rem; margin-bottom:0; flex:1; }
.fork-card .btn{ align-self:flex-start; margin-top:.6rem; }
.fork-card--visit{ background:var(--teal-tint); border-color:var(--teal); }
.fork-card--visit h3{ color:var(--teal-deep); }
.fork-card--ship{ background:#FFF3E9; border-color:var(--terracotta); }
.fork-card--ship h3{ color:var(--terracotta-dark); }

.brand-strip{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--space-6); }

/* Cada logo enlaza a /tienda/ con la marca ya preseleccionada (ver main.js,
   parámetros ?familia=&marca_coche=). Sin fotos reales de logo todavía, se
   muestra un distintivo con las iniciales — en cuanto subáis los logos
   reales de `marcas_coche` a la ficha de fabricante, cambia el <span
   class="brand-logo-mark"> por <img src="...">, el enlace no cambia. */
.brand-logo{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1rem .6rem; min-width:96px;
  border-radius:var(--radius-md); background:var(--white); border:1.5px solid var(--line);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brand-logo:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--terracotta); }
.brand-logo-mark{
  width:46px; height:46px; border-radius:12px; background:var(--cream-deep); color:var(--navy-soft);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  overflow:hidden;
}
.brand-logo-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-logo span:last-child{ font-size:.76rem; font-weight:700; color:var(--navy-soft); text-align:center; }


.price-tabs{ display:flex; gap:.5rem; margin-bottom:var(--space-4); }
.price-tab{
  padding:.55rem 1.1rem; border-radius:var(--radius-pill); border:1.5px solid var(--line); background:var(--white);
  font-weight:700; font-size:.85rem; color:var(--navy-soft); transition:all var(--dur-fast) var(--ease);
}
.price-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* Fila centrada en vez de grid a ancho completo: con 2 o 3 tarjetas (lo más
   habitual) se quedaban pegadas al lado izquierdo con un hueco vacío a la
   derecha en vez de leerse como un bloque — así se centran como grupo,
   tengan 2, 3 o 4 tarjetas, y se envuelven centradas también en móvil. */
.related-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-5); margin-inline:auto; }
.related-card{
  background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-card); transition:transform var(--dur-base) var(--ease); display:flex; flex-direction:column;
  flex:0 1 260px; width:260px;
}
.related-card:hover{ transform:translateY(-5px); }
/* Las fotos que se suben aquí son cuadradas (1:1) — se sobreescribe el 3:2
   heredado de .img-slot--landscape (compartida con la franja "porque" del
   index, esa sí realmente panorámica) para que no se recorten arriba/abajo. */
.related-card .img-slot{ border-radius:0; aspect-ratio:1/1; }
.related-card-body{ padding:var(--space-4); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.related-card-body .name{ font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:.92rem; line-height:1.3; }
.related-card-body .go{ margin-top:auto; display:inline-flex; gap:.35rem; align-items:center; font-weight:800; color:var(--terracotta-solid); font-size:.8rem; }
.related-card-body .go svg{ width:15px; height:15px; }

/* --- C · Ficha de marca: hero centrado, ficha técnica, columna editorial ---
   Ancho alineado con .specs-table (900px) para que hero, texto explicativo
   y ficha técnica compartan la misma medida — antes iban a 66ch/62ch y se
   veían mucho más estrechos que el resto de bloques de la página. */
.hero-c{ text-align:center; max-width:900px; margin-inline:auto; }
.hero-c h1{ max-width:none; }
.hero-c .lede{ max-width:none; }
#servicios .lede{ max-width:none; }
.hero-c .page-hero-badges{ justify-content:center; }
.hero-c .hero-actions{ justify-content:center; }

/* Foto opcional del hero — Plantilla C. La plantilla nace "sin foto" (la
   ficha técnica hace ese papel), pero el editor sí permite subir una para
   las 3 plantillas; si se rellena, se muestra aquí apaisada (16:9) y a todo
   el ancho del hero, justo debajo del párrafo y antes de los botones de
   contacto. Si no se rellena, se queda el placeholder — igual que el resto
   de .img-slot del sitio. */
.hero-c-media{ max-width:760px; margin:var(--space-6) auto 0; }

.specs-table{
  display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; background:var(--white); box-shadow:var(--shadow-card); margin-top:var(--space-7); max-width:900px; margin-inline:auto;
}
@media(min-width:720px){ .specs-table{ grid-template-columns:repeat(4,1fr); } }
.specs-cell{ padding:var(--space-5); text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.specs-cell:nth-child(2n){ border-right:none; }
@media(min-width:720px){
  .specs-cell{ border-bottom:none; }
  .specs-cell:nth-child(2n){ border-right:1px solid var(--line); }
  .specs-cell:nth-child(4n){ border-right:none; }
}
.specs-cell .k{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--muted); margin-bottom:.35rem; }
.specs-cell .v{ font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:1.05rem; }

.content-block--narrow{ max-width:80ch; }

.compare-cols{ display:grid; gap:var(--space-4); grid-template-columns:1fr; max-width:60ch; margin:var(--space-6) auto; }
@media(min-width:640px){ .compare-cols{ grid-template-columns:1fr 1fr; } }
.compare-col{ border-radius:var(--radius-md); padding:var(--space-5); border:1.5px solid var(--line); }
.compare-col h4{ font-family:var(--font-display); font-size:1rem; margin-bottom:.6rem; display:flex; align-items:center; gap:.5rem; }
.compare-col h4 svg{ width:20px; height:20px; flex:none; }
.compare-col p{ font-size:.86rem; margin:0; }
.compare-col--has{ border-color:var(--teal); background:var(--teal-tint); }
.compare-col--has h4{ color:var(--teal-deep); }
.compare-col--none{ border-color:var(--terracotta); background:#FFF3E9; }
.compare-col--none h4{ color:var(--terracotta-dark); }

.brand-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem; max-width:900px; margin:var(--space-6) auto 0; }
@media(min-width:640px){ .brand-tiles{ grid-template-columns:repeat(4,1fr); } }
.brand-tile{
  display:flex; align-items:center; justify-content:center; padding:1rem; border:1.5px solid var(--line);
  border-radius:var(--radius-md); font-weight:800; color:var(--navy-soft); font-size:.85rem; text-align:center; background:var(--white);
}
.brand-tile.is-active{ border-color:var(--navy-soft); color:var(--navy); }
.brand-tile.is-soon{ opacity:.5; }

.cta-card{
  border:1.5px solid var(--line); border-radius:var(--radius-lg); background:var(--white); padding:var(--space-7);
  text-align:center; max-width:520px; margin-inline:auto; box-shadow:var(--shadow-card);
}
.cta-card p{ margin-bottom:var(--space-4); }
.cta-card .cta-band-actions{ justify-content:center; }