/* ==========================================================================
   limpiezas-leon.com - Sistema de diseno
   Paleta azul limpio + antracita.
   Radios: botones e inputs 6px, tarjetas y media 12px, pastillas full.
   Acento unico: azul limpio (#1E6FD9). Verde solo en el boton de WhatsApp.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Marca: azul limpio + antracita */
  --azul-700:   #1757AD;
  --azul-600:   #1E6FD9;
  --azul-500:   #3D86E6;
  --antracita-900: #16181C;
  --antracita-800: #23262B;
  --antracita-700: #31353C;

  /* Verde de WhatsApp. Texto oscuro encima para cumplir AA. */
  /* Azul para texto sobre antracita: el azul-600 ahi se queda en 3,1:1 */
  --azul-on-dark: #8FBCF7;

  --wa:      #25D366;
  --wa-dark: #1CB558;
  --wa-ink:  #07301C;

  /* Superficies y texto (modo claro) */
  --bg:          #FFFFFF;
  --bg-alt:      #F4F7FB;
  --bg-deep:     var(--antracita-800);
  --surface:     #FFFFFF;
  --line:        #E3E6EA;
  --line-strong: #C4CAD2;
  --text:        var(--antracita-900);
  --text-muted:  #5A616B;
  --text-on-dark: #F3F4F6;
  --muted-on-dark: #B6BCC5;

  --accent:      var(--azul-600);
  --accent-ink:  #FFFFFF;
  --accent-soft: #E8F1FC;

  /* Anillo de foco en antracita: el azul ya es el acento y no destacaria */
  --focus: var(--antracita-800);

  /* Forma */
  --r-sm: 6px;
  --r-md: 12px;
  --r-pill: 999px;

  /* Sombra tintada al fondo, nunca negro puro */
  --shadow-sm: 0 1px 2px rgba(22, 24, 28, .06), 0 2px 8px rgba(22, 24, 28, .05);
  --shadow-md: 0 4px 12px rgba(22, 24, 28, .08), 0 12px 32px rgba(22, 24, 28, .07);

  /* Ritmo */
  --wrap: 1200px;
  --gutter: clamp(1.125rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);

  --font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #16181C;
    --bg-alt:      #1D2026;
    --bg-deep:     #0F1114;
    --surface:     #1D2026;
    --line:        #2C3037;
    --line-strong: #434A54;
    --text:        #F3F4F6;
    --text-muted:  #A8AFB9;
    --text-on-dark: #F3F4F6;
    --muted-on-dark: #A8AFB9;

    --accent:      #5B9BF0;
    --accent-ink:  #06182F;
    --accent-soft: #16263D;

    --focus: #F3F4F6;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Debe ir por delante de cualquier regla de display. Sin esto, un .btn oculto
   con el atributo hidden se sigue viendo, porque .btn{display:inline-flex}
   tiene mas especificidad que el display:none del navegador para [hidden]. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: .75rem 1.25rem; border-radius: var(--r-sm); font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: .75rem; }

/* --- 3. Tipografia ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 4.6vw, 3.4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.85rem, 4vw, 2.85rem); letter-spacing: -.026em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.014em; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 58ch;
}

.prose > * + * { margin-top: 1.1em; }
.prose a {
  color: var(--azul-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) { .prose a { color: var(--accent); } }
.prose a:hover { text-decoration-thickness: 2px; }

/* --- 4. Layout ----------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
/* La cabecera es sticky (72px). Sin esto, al llegar desde /#presupuesto el
   ancla queda tapada por la barra. */
[id] { scroll-margin-top: 92px; }
.section--tint { background: var(--bg-alt); }
.section--deep { background: var(--bg-deep); color: var(--text-on-dark); }
/* Secciones oscuras: el foco antracita no se veria sobre antracita */
.section--deep, .site-footer, .group-band, .band, .cta-strip, .svc-card--star, .mobile-bar { --focus: #F3F4F6; }
.section--deep .prose a, .cta-strip a:not(.btn), .site-footer .footer-zonas a { color: var(--azul-on-dark); }
.section--deep h2, .section--deep h3 { color: var(--text-on-dark); }
.section--deep p { color: var(--muted-on-dark); }

.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head p { color: var(--text-muted); }

/* Los items de grid traen min-width:auto, asi que un hijo con ancho intrinseco
   grande (el input de archivos, sin ir mas lejos) estira toda la columna y
   provoca scroll horizontal en movil. Se anula en todas las rejillas. */
.hero-grid > *, .svc-hero-grid > *, .band-grid > *, .detail-grid > *,
.form-grid > *, .two-col > *, .zones > *, .trust > *, .step > *,
.svc-grid > *, .footer-grid > * { min-width: 0; }

/* --- 5. Botones ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .875rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--azul-700); border-color: var(--azul-700); }
@media (prefers-color-scheme: dark) { .btn--primary:hover { background: #8AB8F5; border-color: #8AB8F5; } }

.btn--outline { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--text); background: var(--surface); }

.btn--on-dark { background: transparent; color: var(--text-on-dark); border-color: rgba(243, 244, 246, .42); }
.btn--on-dark:hover { background: rgba(243, 244, 246, .12); border-color: var(--text-on-dark); }

/* Verde de WhatsApp con tinta oscura: el blanco sobre #25D366 se queda
   en 2,4:1 y no pasa AA. Funciona igual sobre fondo claro y oscuro. */
.btn--wa { background: var(--wa); color: var(--wa-ink); border-color: var(--wa); }
.btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); }

.btn--wide { width: 100%; }

/* El formulario es el CTA principal del sitio. Se le da mas cuerpo. */
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; }

/* Canales alternativos: presentes pero sin competir con el boton. */
.otras-vias {
  margin-top: 1.1rem; font-size: .9rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline;
}
.otras-vias a {
  color: var(--azul-700); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.otras-vias a:hover { text-decoration-thickness: 2px; }
@media (prefers-color-scheme: dark) { .otras-vias a { color: var(--accent); } }
.otras-vias--dark { color: var(--muted-on-dark); }
.otras-vias--dark a { color: var(--azul-on-dark); }
.otras-vias--dark a:hover { color: #FFFFFF; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Asterisco de "presupuesto gratis*". Remite a las condiciones. */
.ast { font-size: .78em; line-height: 1; vertical-align: super; margin-left: .1em; opacity: .9; }

/* Nota de condiciones, en la zona de contacto */
.ast-note {
  margin-top: 1.75rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .88rem; line-height: 1.55; color: var(--text-muted);
}
.ast-note strong { color: var(--text); }
.ast-note a { color: var(--azul-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { .ast-note a { color: var(--accent); } }

/* --- 6. Cabecera --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 72px;
}
@media (max-width: 900px) { .header-inner { height: 64px; } }

/* Logotipo: destello de 4 puntas + "Limpieza" en antracita y "León" en azul,
   en una sola linea. Si Luis trae logo en imagen, se sustituye este bloque. */
.brand {
  display: inline-flex; align-items: center;
  gap: 7px; text-decoration: none; flex-shrink: 0;
}
.brand-mark {
  display: block; width: 22px; height: 22px; flex-shrink: 0;
  color: var(--accent);
}
.brand-text {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.22rem; letter-spacing: -.035em; line-height: 1;
  white-space: nowrap; color: var(--text);
}
.brand-text i { font-style: normal; }
.brand-text em { font-style: normal; color: var(--accent); }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a, .nav button {
  background: none; border: 0; cursor: pointer;
  padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .95rem; font-weight: 500; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: background-color .15s var(--ease);
}
.nav a:hover, .nav button:hover { background: var(--bg-alt); }
.nav a[aria-current="page"] { color: var(--azul-700); font-weight: 600; }
@media (prefers-color-scheme: dark) { .nav a[aria-current="page"] { color: var(--accent); } }

.nav-chevron { transition: transform .2s var(--ease); }
[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.has-menu { position: relative; }
.submenu {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 330px; padding: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  list-style: none; margin: 0;
}
.submenu[hidden] { display: none; }
.submenu a {
  display: block; padding: .6rem .75rem; border-radius: var(--r-sm);
  font-size: .95rem; line-height: 1.35;
}
.submenu a small { display: block; color: var(--text-muted); font-size: .82rem; font-weight: 400; }

.header-cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.header-tel {
  font-weight: 700; text-decoration: none; font-size: .98rem;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; border-radius: var(--r-sm);
}
.header-tel:hover { background: var(--bg-alt); }

.burger {
  display: none; background: none; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: .5rem;
}

@media (max-width: 1024px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 560px) { .header-tel span { display: none; } }

/* Panel movil */
.mobile-panel {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg); padding: var(--gutter);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: .25rem;
}
.mobile-panel[hidden] { display: none; }
.mobile-panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.mobile-panel a {
  padding: .85rem 0; text-decoration: none; font-size: 1.05rem; font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.mobile-panel a.is-sub { padding-left: 1rem; font-size: .98rem; color: var(--text-muted); }
.mobile-panel .btn { margin-top: 1.5rem; }

/* --- 7. Hero (split asimetrico) ------------------------------------------ */
.hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: var(--section-y); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }

.hero h1 { margin-bottom: .35em; }
.hero .lead { margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 1.5rem; }

.hero-media { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); }
.hero-media img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 50% 22%; }
@media (min-width: 900px) { .hero-media img { aspect-ratio: 4 / 3.7; } }

.hero-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hero-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: .97rem; color: var(--text-muted); }
.hero-points svg { flex-shrink: 0; margin-top: .28em; color: var(--accent); }

/* Placeholder fotografico: tintado a la paleta para que no chirrie.
   Se retira la clase .is-placeholder al colocar las fotos reales. */
.is-placeholder img { filter: sepia(.45) saturate(.85) contrast(1.02) brightness(.96); }

/* --- 7a. Fila de garantias bajo el hero (patron de la red) --------------- */
.badges {
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (min-width: 700px) { .badges { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .badges { grid-template-columns: repeat(6, 1fr); } }
.badge {
  background: var(--bg);
  padding: 1.35rem 1rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
}
.badge svg { color: var(--accent); flex-shrink: 0; }
/* Antes eran H3 y provocaban un salto H1 -> H3 tras el hero. Son etiquetas,
   no encabezados de seccion, asi que van como parrafo con el mismo aspecto. */
.badge .badge-txt {
  margin: 0; font-size: .95rem; line-height: 1.3;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.008em; color: var(--text);
}

/* --- 7b. Señales de aviso (seccion de problema de la portada) ------------ */
.signals {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0; grid-template-columns: 1fr;
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 760px) { .signals { grid-template-columns: repeat(2, 3fr); column-gap: 2.5rem; } }
.signals li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem; line-height: 1.45;
}
.signals svg { flex-shrink: 0; margin-top: .2em; color: var(--accent); }

/* --- 8. Rejilla de servicios (enlaces al cluster) ------------------------ */
.svc-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc-card {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.5rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
/* Portada: 11 servicios. Fin de obra ocupa dos columnas y las otras 10
   van a 4 columnas: 12 huecos, 3 filas completas. Con otro servicio mas,
   dar tambien --wide a otra tarjeta para no dejar huerfanas. */
@media (min-width: 640px) { .svc-grid--home .svc-card--wide { grid-column: span 2; } }
@media (min-width: 1100px) {
  .svc-grid--home { grid-template-columns: repeat(4, 1fr); }
  .svc-grid--home .svc-card h3 { font-size: 1.05rem; }
  .svc-grid--home .svc-card--wide h3 { font-size: 1.3rem; }
  .svc-grid--home .svc-card--wide p { font-size: 1rem; }
}
.svc-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.svc-card h3 { margin: 0; font-size: 1.16rem; }
.svc-card p { font-size: .95rem; color: var(--text-muted); margin: 0; }
.svc-card .svc-go {
  margin-top: auto; padding-top: .9rem;
  color: var(--accent); font-weight: 600; font-size: .92rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.svc-card .svc-go svg { transition: transform .18s var(--ease); }
.svc-card:hover .svc-go svg { transform: translateX(3px); }

.svc-card--star { background: var(--antracita-800); border-color: var(--antracita-800); }
.svc-card--star h3 { color: var(--text-on-dark); }
.svc-card--star p { color: var(--muted-on-dark); }
.svc-card--star .svc-go { color: var(--azul-on-dark); }
.svc-tag {
  align-self: flex-start;
  display: inline-block; margin-bottom: .6rem; padding: .2rem .6rem;
  border-radius: var(--r-pill); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--azul-700);
}
.svc-card--star .svc-tag { background: rgba(143, 188, 247, .16); color: var(--azul-on-dark); }
.svc-card--star:hover { border-color: var(--accent); }

/* --- 9. Banda destacada (oscura) ----------------------------------- */
.band { background: var(--bg-deep); color: var(--text-on-dark); overflow: hidden; }
.band-grid { display: grid; gap: 0; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .band-grid { grid-template-columns: 1fr 1fr; } }
.band-copy { padding-block: var(--section-y); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 900px) { .band-copy { padding-right: clamp(2rem, 5vw, 4rem); } }
.band h2, .band h3 { color: var(--text-on-dark); }
.band p { color: var(--muted-on-dark); }
.band-media { position: relative; min-height: 320px; }
.band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .band-media { min-height: 260px; margin-inline: calc(var(--gutter) * -1); } }

.band-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .7rem; }
.band-list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--muted-on-dark); }
.band-list svg { flex-shrink: 0; margin-top: .3em; color: var(--azul-on-dark); }

/* --- 10. Zonas (agrupadas, no lista plana) ------------------------------- */
.zones { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .zones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .zones { grid-template-columns: repeat(4, 1fr); } }
.zone-group h3 {
  font-size: 1rem; margin-bottom: .9rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--line-strong);
}
.zone-pills { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.zone-pills li {
  padding: .35rem .75rem; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: .88rem; color: var(--text-muted);
}

/* --- 11. Proceso (filas, sin tarjetas) ----------------------------------- */
.steps { border-top: 2px solid var(--line-strong); }
.step {
  display: grid; gap: .35rem 1.75rem;
  grid-template-columns: 1fr;
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) { .step { grid-template-columns: minmax(0, 15rem) 1fr; align-items: baseline; } }
.step h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.step p { margin: 0; color: var(--text-muted); }
.section--deep .step p, .section--deep .section-head p { color: var(--muted-on-dark); }

/* --- 12. Confianza ------------------------------------------------------- */
.trust { display: grid; gap: 1.75rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust-item svg { color: var(--accent); margin-bottom: .8rem; }
.trust-item h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.trust-item p { font-size: .95rem; color: var(--text-muted); margin: 0; }
/* Sobre fondo oscuro el gris del modo claro se queda en 2,1:1. Se fuerza el
   tono claro, que es el que cumple AA en los dos esquemas de color. */
.section--deep .trust-item p { color: var(--muted-on-dark); }

/* --- 13. Grupo Leonesa Multiservicios ------------------------------------ */
/* Mencion de marca en texto corrido. Sin H2 propio, por decision SEO. */
.group-note {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.group-note p { font-size: 1.05rem; max-width: 72ch; margin: 0; color: var(--text-muted); }

/* --- 13b. Banda del grupo Leonesa Multiservicios ------------------------- */
/* Foto de fondo oscurecida con degradado, texto a dos columnas.
   Sigue el patron de tuelectricistaenleon.com. */
.group-band { position: relative; overflow: hidden; background: var(--antracita-900); }
.group-band .group-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.group-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    rgba(16, 18, 21, .96) 0%,
    rgba(16, 18, 21, .92) 45%,
    rgba(16, 18, 21, .74) 100%);
}
/* El padding vertical de la banda vive aqui y no en .group-grid. El CTA de
   cierre va DETRAS de la rejilla, asi que con el padding en la rejilla se
   quedaba pegado al borde de abajo, sin un pixel de aire. */
.group-band > .wrap { position: relative; z-index: 2; padding-block: var(--section-y); }

.group-grid {
  display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) {
  .group-grid { grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.group-grid > * { min-width: 0; }

.group-eyebrow {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1.35rem;
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #FFFFFF;
}
.group-eyebrow::before {
  content: ""; width: 34px; height: 3px; flex-shrink: 0;
  background: var(--azul-on-dark); border-radius: 2px;
}

.group-band h2 { color: #FFFFFF; margin-bottom: 1.75rem; }
.group-band p { color: #D9DDE3; }
.group-band p + p { margin-top: 1.1rem; }
.group-band strong { color: #FFFFFF; }
.group-band em { font-style: italic; color: #FFFFFF; }
.group-band a:not(.btn) {
  color: var(--azul-on-dark); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.group-band a:not(.btn):hover { color: #FFFFFF; }

/* --- 14. Preguntas frecuentes -------------------------------------------- */
.faq { max-width: 800px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.02rem, 1.8vw, 1.15rem); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.65rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }
.faq .faq-body { padding: 0 1.5rem 1.4rem 0; color: var(--text-muted); }
.faq .faq-body p { font-size: .98rem; }

/* --- 15. Formulario multipaso -------------------------------------------- */
.form-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .form-grid { grid-template-columns: .82fr 1.18fr; } }

.form-shell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: clamp(1.35rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}

.progress { margin-bottom: 1.75rem; }
.progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .85rem; color: var(--text-muted); margin-bottom: .55rem;
}
.progress-meta strong { color: var(--text); font-weight: 600; }
.progress-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.progress-track span { height: 4px; border-radius: var(--r-pill); background: var(--line); transition: background-color .3s var(--ease); }
.progress-track span.is-done { background: var(--accent); }

.fstep[hidden] { display: none; }
.fstep > h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.fstep > .step-hint { font-size: .92rem; color: var(--text-muted); margin-bottom: 1.35rem; }

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.05rem; }
.field label { font-size: .92rem; font-weight: 600; }
.field .req { color: var(--azul-700); }
@media (prefers-color-scheme: dark) { .field .req { color: var(--accent); } }
.field .help { font-size: .84rem; color: var(--text-muted); }

.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field select, .field textarea, .field input[type="file"] {
  width: 100%; padding: .75rem .85rem;
  background: var(--bg); color: var(--text);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .15s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; min-width: 0; }
/* El input de archivos trae un ancho intrinseco muy superior al de la columna. */
.field input[type="file"] { min-width: 0; max-width: 100%; font-size: .92rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: .9; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
.field .error { font-size: .86rem; color: #8C1D18; font-weight: 500; display: none; }
@media (prefers-color-scheme: dark) { .field .error { color: #FFB4AB; } }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #8C1D18; }
@media (prefers-color-scheme: dark) {
  .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #FFB4AB; }
}
.field.is-invalid .error { display: block; }

.choice-grid { display: grid; gap: .6rem; grid-template-columns: 1fr; margin-bottom: 1.1rem; }
@media (min-width: 520px) { .choice-grid { grid-template-columns: repeat(2, 1fr); } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: block; padding: .8rem .9rem;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  font-size: .94rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.choice input:hover + span { border-color: var(--text-muted); }
.choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.consent { display: flex; gap: .65rem; align-items: flex-start; margin-block: 1.1rem; }
.consent input { margin-top: .3em; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--accent); }
.consent label { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }

.form-nav { display: flex; gap: .7rem; margin-top: 1.5rem; }
.form-nav .btn { flex: 1; }

/* Trampa antispam: fuera de pantalla en lugar de display:none, que algunos
   bots detectan y esquivan. */
.honeypot {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.form-alert {
  display: none; gap: .6rem; align-items: flex-start;
  padding: .85rem 1rem; margin-bottom: 1.1rem;
  border-radius: var(--r-sm); font-size: .92rem;
  background: #FDECEA; border: 1px solid #E9A6A0; color: #8C1D18;
}
@media (prefers-color-scheme: dark) {
  .form-alert { background: #3A1A18; border-color: #7A3A35; color: #FFB4AB; }
}
.form-alert.is-visible { display: flex; }

.form-done { display: none; text-align: center; padding-block: 1.5rem; }
.form-done.is-visible { display: block; }
.form-done svg { color: var(--accent); margin: 0 auto 1rem; }
.form-done h3 { font-size: 1.4rem; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

.contact-aside dl { margin: 1.75rem 0 0; display: grid; gap: 1.1rem; }
.contact-aside dt { font-size: .82rem; font-weight: 600; color: var(--text-muted); margin-bottom: .1rem; }
.contact-aside dd { margin: 0; font-size: 1.05rem; }
.contact-aside dd a { font-weight: 600; text-decoration: none; }
.contact-aside dd a:hover { text-decoration: underline; }

/* --- 16. Boton flotante de WhatsApp -------------------------------------- */
/* Enlace <a> en crudo. El widget nativo de Elementor rompe los %0D%0A. */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.1rem; border-radius: var(--r-pill);
  background: var(--wa); color: var(--wa-ink);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: background-color .18s var(--ease), transform .15s var(--ease);
}
.wa-float:hover { background: var(--wa-dark); }
.wa-float:active { transform: translateY(1px); }
@media (max-width: 520px) {
  .wa-float .wa-label { display: none; }
  .wa-float { padding: .9rem; }
}

/* Barra fija inferior en movil: Llamar y WhatsApp. Sustituye al flotante. */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .wa-float { display: none; }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: grid; grid-template-columns: 1.5fr 1fr; gap: .5rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: var(--antracita-800); box-shadow: 0 -4px 16px rgba(22, 24, 28, .18);
  }
  .mobile-bar a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; border-radius: var(--r-sm);
    font-weight: 700; font-size: .98rem; text-decoration: none;
  }
  .mobile-bar .mb-cta { background: var(--azul-600); color: #FFFFFF; font-size: clamp(.78rem, 3.6vw, .92rem); white-space: nowrap; padding-inline: .4rem; letter-spacing: -.01em; }
  .mobile-bar .mb-cta .ast { margin-left: .1em; }
  .mobile-bar .mb-wa { background: var(--wa); color: var(--wa-ink); }
  body { padding-bottom: 70px; }
  .cookie-card { bottom: calc(70px + .5rem); }
}

/* --- 16b. Tarjeta de cookies -------------------------------------------- */
/* La monta consent.js. Abajo a la izquierda, para no pelearse con el
   boton flotante de WhatsApp, que vive abajo a la derecha. */
.cookie-card {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 95;
  width: min(30rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(22, 24, 28, .22), 0 2px 8px rgba(22, 24, 28, .12);
  overflow: hidden;
}

.cookie-top {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.cookie-brand { display: inline-flex; align-items: center; gap: 4px; }
.cookie-brand .brand-mark { width: 14px; height: 14px; }
.cookie-brand .brand-text { font-size: .8rem; letter-spacing: -.03em; }
.cookie-titulo {
  margin: 0; text-align: center;
  font-size: 1rem; font-weight: 700; letter-spacing: -.012em; color: var(--text);
}
.cookie-x {
  display: inline-flex; padding: .35rem; cursor: pointer;
  background: none; border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm); color: var(--text);
}
.cookie-x:hover { background: var(--surface); border-color: var(--text); }

.cookie-cuerpo { padding: 1.1rem 1rem .25rem; }
.cookie-cuerpo p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text); }
.cookie-cuerpo a { color: var(--azul-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-color-scheme: dark) { .cookie-cuerpo a { color: var(--accent); } }

/* Detalle que abre "Configurar" */
.cookie-panel { padding: .75rem 1rem 0; display: grid; gap: .5rem; }
.cookie-opcion {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-alt);
}
.cookie-opcion strong { display: block; font-size: .92rem; }
.cookie-opcion small { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
.cookie-opcion input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: .15rem;
  accent-color: var(--accent); cursor: pointer;
}
.cookie-fija { font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; margin-top: .15rem; }

.cookie-botones {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 1rem;
}
.cookie-botones .btn { flex: 1 1 auto; padding: .7rem 1rem; font-size: .93rem; }

.cookie-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem;
  padding: 0 1rem 1rem;
  font-size: .78rem;
}
.cookie-legal a { color: var(--azul-700); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { .cookie-legal a { color: var(--accent); } }

@media (max-width: 560px) {
  .cookie-card { left: .5rem; right: .5rem; bottom: .5rem; width: auto; }
  .cookie-botones .btn { flex: 1 1 100%; }
}

/* --- 17. Pie ------------------------------------------------------------- */
.site-footer { background: var(--bg-deep); color: var(--muted-on-dark); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-about .footer-price { color: var(--text-on-dark); font-weight: 600; }
.footer-zonas p { font-size: .95rem; margin: 0 0 1.5rem; }
.site-footer h3, .site-footer h4 {
  color: var(--text-on-dark); font-size: .88rem;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer a { color: var(--muted-on-dark); text-decoration: none; font-size: .95rem; }
.site-footer a:hover { color: var(--text-on-dark); text-decoration: underline; }
.site-footer .brand-text { color: var(--text-on-dark); }
/* Logo del pie: mismo esquema que la cabecera, con el azul legible sobre antracita */
.site-footer .brand-text em { color: var(--azul-on-dark); }
.site-footer .brand-mark { color: var(--azul-on-dark); }
.footer-grupo { display: inline-block; padding: .6rem .9rem; background: #FFFFFF; border-radius: var(--r-sm); line-height: 0; }
.footer-grupo img { height: 30px; width: auto; }
.footer-grupo:hover { box-shadow: 0 0 0 2px var(--azul-on-dark); }
.site-footer .footer-all { color: var(--azul-on-dark); font-weight: 600; }
.footer-about p { font-size: .95rem; color: var(--muted-on-dark); margin-top: 1rem; }
.footer-legal {
  border-top: 1px solid rgba(243, 244, 246, .16); padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .86rem;
}
.footer-legal nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* Sello de la agencia que desarrolla la web */
.footer-credit {
  border-top: 1px solid rgba(243, 244, 246, .1);
  margin-top: 1.5rem; padding-top: 1.25rem;
  font-size: .84rem; color: var(--muted-on-dark);
}
.footer-credit a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--text-on-dark); }

/* --- 18. Migas ----------------------------------------------------------- */
.crumbs { padding-top: 1.25rem; font-size: .86rem; color: var(--text-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--line-strong); }

/* --- 18b. Hero con foto de fondo oscurecida (home y servicios) ---------- */
.hero-photo {
  position: relative; overflow: hidden; background: var(--antracita-900);
  display: flex; align-items: center;
  min-height: clamp(520px, 72vh, 660px);
  padding-block: clamp(3rem, 7vw, 5rem);
  --focus: #F3F4F6;
}
.hero-photo .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(16, 18, 21, .92) 0%, rgba(16, 18, 21, .72) 42%, rgba(16, 18, 21, .12) 100%);
}
@media (max-width: 760px) { .hero-photo::before { background: rgba(16, 18, 21, .82); } }
.hero-photo > .wrap { position: relative; z-index: 2; width: 100%; }
.hero-photo-in { max-width: 640px; }
.hero-photo-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .hero-photo-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); } }
.hero-photo .btn-row { margin-bottom: 0; }

/* Tarjeta de informacion sobre la foto: cristal oscuro */
.price-card.price-card--glass {
  background: rgba(22, 24, 28, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* Segunda foto del servicio, dentro del texto */
.price-card.price-card--glass .price-num { font-size: clamp(2rem, 3.6vw, 2.6rem); }
.inline-photo { margin: 2.25rem 0 0; border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); }
.inline-photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero-photo h1 { color: #FFFFFF; margin-bottom: .35em; }
.hero-photo .lead { color: #D9DDE3; margin-bottom: 1.25rem; }
.hero-photo .lead a { color: var(--azul-on-dark); }
.hero-photo .hero-points { margin: 0 0 1.75rem; }
.hero-photo .hero-points li { color: #D9DDE3; }
.hero-photo .hero-points svg { color: var(--azul-on-dark); }
.hero-photo .btn--outline { color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
.hero-photo .btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; }
.hero-badge {
  display: inline-grid; gap: .1rem; margin-top: 1.5rem;
  padding: .75rem 1.1rem; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #FFFFFF;
}
.hero-badge span { font-size: .8rem; color: var(--muted-on-dark); }
.hero-badge strong { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.02em; }
.hero-badge small { font-size: .62em; font-weight: 700; color: var(--azul-on-dark); letter-spacing: 0; }
.svc-hero.hero-photo { padding-top: clamp(3rem, 6vw, 4.5rem); }

/* Seccion oscura con foto de fondo muy tenue */
.section--photo { position: relative; overflow: hidden; }
.section--photo .section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; }
.section--photo > .wrap { position: relative; z-index: 1; }

/* Banda del grupo: foto de fondo mas visible */
.group-band .group-bg { opacity: .9; }

/* --- 19. Paginas de servicio --------------------------------------------- */
.svc-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.svc-hero-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .svc-hero-grid { grid-template-columns: 1.1fr .9fr; } }
.svc-hero-media { border-radius: var(--r-md); overflow: hidden; }

/* Tarjeta de precio y garantias: ocupa el hueco de la foto mientras no haya
   fotos propias (TODO Luis: antes/despues reales). */
.price-card {
  background: var(--antracita-800); color: var(--text-on-dark);
  border-radius: var(--r-md); padding: clamp(1.5rem, 3.5vw, 2.25rem);
  --focus: #F3F4F6;
}
.price-card .price-from { margin: 0; font-size: .9rem; color: var(--muted-on-dark); }
.price-card .price-num {
  margin: .1rem 0 1.1rem; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: #FFFFFF;
}
.price-card .price-num small { white-space: nowrap; display: inline-block; margin-left: .25em; font-size: .42em; font-weight: 700; color: var(--azul-on-dark); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.price-card li { display: flex; gap: .6rem; align-items: flex-start; color: var(--muted-on-dark); font-size: .97rem; }
.price-card li svg { flex-shrink: 0; margin-top: .3em; color: var(--azul-on-dark); }
.price-card .price-note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--muted-on-dark); }
.svc-hero-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

.detail-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: 1.25fr .75fr; } }

/* align-self:start evita que la caja se estire a toda la altura de la fila,
   que es lo que deja un hueco vacio enorme bajo el boton. */
.sticky-cta {
  align-self: start;
  position: sticky; top: 96px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.5rem;
}
.sticky-cta h3 { font-size: 1.15rem; }
.sticky-cta p { font-size: .94rem; color: var(--text-muted); }
.sticky-cta .btn { margin-top: .35rem; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; }
.checklist svg { flex-shrink: 0; margin-top: .3em; color: var(--accent); }

.two-col { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 820px) { .two-col { grid-template-columns: repeat(2, 1fr); } }

.mini-card { padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.mini-card h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.mini-card p { font-size: .95rem; color: var(--text-muted); margin: 0; }

.cta-strip {
  background: var(--antracita-800); color: var(--text-on-dark);
  border-radius: var(--r-md); padding: clamp(1.75rem, 4vw, 3rem);
}
.cta-strip h2 { color: var(--text-on-dark); margin-bottom: .4rem; }
.cta-strip p { color: var(--muted-on-dark); margin-bottom: 1.5rem; max-width: 52ch; }

/* CTA de refuerzo al cierre de cada modulo H2.
   El panel lateral .sticky-cta solo acompana al primer bloque, y en movil ni
   siquiera queda fijo: se apila y desaparece al seguir bajando. Sin esto, el
   lector que llega al final de un modulo no tiene donde pulsar.
   El fondo se adapta al contexto para que la pieza no se pierda ni grite. */
.cta-inline {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2rem);
  padding: 1.15rem clamp(1.15rem, 3vw, 1.6rem);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
}
.cta-inline p { flex: 1 1 20rem; margin: 0; color: var(--text); }
.cta-inline .btn { flex: 0 0 auto; }

/* Sobre fondo gris, la caja va en blanco para despegarse. */
.section--tint .cta-inline { background: var(--surface); }

/* Sobre el bloque oscuro: velo claro en vez de caja, que ahi una caja blanca
   seria un agujero en mitad de la seccion. */
.section--deep .cta-inline,
.band .cta-inline,
.group-band .cta-inline {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(243, 244, 246, .18);
  border-left-color: var(--azul-500);
}
.section--deep .cta-inline p,
.band .cta-inline p,
.group-band .cta-inline p { color: var(--text-on-dark); }

/* Sobre la banda del grupo hay una foto detras: el velo translucido dejaria
   el texto a merced de lo que salga en la imagen. Placa opaca y a dormir. */
.group-band .cta-inline { background: rgba(22, 24, 28, .66); border-color: rgba(243, 244, 246, .22); }

/* En pantalla estrecha el boton ocupa el ancho: objetivo tactil comodo. */
@media (max-width: 560px) {
  .cta-inline .btn { width: 100%; justify-content: center; }
}

/* --- 20. Revelado al hacer scroll (IntersectionObserver) ----------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
}

/* --- 21. Impresion ------------------------------------------------------- */
@media print {
  .site-header, .wa-float, .site-footer, .form-shell { display: none; }
  body { background: #fff; color: #000; }
}