/* Tipografía propia (Red Hat, licencia OFL): archivos variables en fonts/, sin pedirlos a Google. Solo el subconjunto latino (español incluido). */
@font-face { font-family: "Red Hat Display"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(fonts/RedHatDisplay-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/RedHatText-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ═══════════════════════════════════════════════
   INTEGRAL S-COM · sitio público
   Estilos compartidos por index, subpáginas de servicio y cotizador.
   Las variables marcadas "compat" las usa cotizador_template.html.
   ═══════════════════════════════════════════════ */

:root {
  --navy-deep: #071a2e;
  --navy: #0a2540;
  --navy-2: #12355c;
  --blue: #0d57b0;
  --blue-soft: #e8f0fa;
  --green: #0b7a14;
  --green-hover: #086310;
  --green-soft: #e7f4e8;
  --bg: #ffffff;
  --bg-soft: #f4f7fa;
  --line: #dde4ec;
  --line-strong: #b9c4d1;
  --text: #33465c;
  --muted: #5d6f84;
  --on-navy: #c9d6e6;
  --green-light: #4fd26a;
  --blue-light: #8cc2ff;
  --on-navy-deep: #9fb1c6;
  --warn: #b45309;
  --warn-soft: #fbeede;
  --danger: #c8323f;
  --danger-soft: #fdecea;
  --ink: var(--navy);
  --primary-light: var(--blue);
  --accent-rose: #c8323f;
  --bg-card: #ffffff;
  --bg-card-subtle: var(--bg-soft);
  --border-color: var(--line);
  --text-title: var(--ink);
  --text-body: var(--text);
  --text-muted: var(--muted);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(10, 37, 64, 0.16);
  --font-display: "Red Hat Display", system-ui, sans-serif;
  --font-text: "Red Hat Text", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 72px;
  interpolate-size: allow-keywords;
  --c-navy-800: var(--navy);
  --c-blue-600: var(--blue);
  --c-blue-50: var(--blue-soft);
  --c-slate-700: var(--text);
  --c-slate-500: var(--muted);
  --c-slate-300: var(--line-strong);
  --c-slate-200: var(--line);
  --c-slate-50: var(--bg-soft);
  --c-white: var(--bg);
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --r-10: 10px;
  --r-16: 16px;
  --color-marca: var(--c-navy-800);
  --color-accion: var(--c-blue-600);
  --color-accion-suave: var(--c-blue-50);
  --color-fondo: var(--c-white);
  --color-fondo-alt: var(--c-slate-50);
  --color-regla: var(--c-slate-200);
  --color-regla-fuerte: var(--c-slate-300);
  --color-titulo: var(--c-navy-800);
  --color-texto: var(--c-slate-700);
  --color-apagado: var(--c-slate-500);
  --tipo-meta: var(--fs-13);
  --tipo-ui: var(--fs-15);
  --tipo-lista: var(--fs-16);
  --tipo-titulo: var(--fs-20);
  --radio-control: var(--r-10);
  --radio-tarjeta: var(--r-16);
  --menu-fila-h: 50px;
  --menu-ico: 36px;
  --menu-placa: var(--color-fondo);
  --pildora-borde: var(--color-regla);
  --dur-rapida: 160ms;
  --curva: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--line-strong) var(--bg-soft);
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* iteration-count: sin esto, una animación infinita de 0.01ms parpadea a cada cuadro */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* Permite animar la altura de elementos que pasan a «auto» (respuestas de la FAQ) */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  accent-color: var(--blue);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--blue); color: var(--bg); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.tnum { font-variant-numeric: tabular-nums; }
.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; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--navy); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.wrap, .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap, .container { padding: 0 16px; } }

/* ── Botones ───────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 10px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn svg { width: 20px; height: 20px; flex: none; }
.btn-cta { background: var(--green); color: var(--bg); box-shadow: 0 4px 12px -6px rgba(10, 37, 64, .45); }
.btn-cta:hover { background: var(--green-hover); }
.btn-primary { background: var(--navy); color: var(--bg); }
.btn-primary:hover { background: var(--navy-2); }
.btn-outline { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.link-arrow { font-size: 17px; font-weight: 700; font-family: var(--font-display); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow:hover { text-decoration: underline; }
/* compat cotizador */
.grid-bg { position: relative; }

/* ── Header ────────────────────────────────── */
.site-header { z-index: 100; }
.header-inner { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.logo { display: block; flex: none; }
.logo img { height: 45px; width: auto; object-fit: contain; }
.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.main-nav a {
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-tel {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-family: var(--font-display);
  text-decoration: none;
  font-size: 15px;
}

.header-tel svg { width: 18px; height: 18px; }
.header-actions .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.menu-btn {
  display: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-nav { display: none; }

@media (max-width: 1180px) {
  .main-nav, .header-tel { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 520px) {
  :root { --header-h: 64px; }
  .logo img { height: 38px; }
  .header-actions { gap: 10px; }
  .header-actions .btn { padding: 0 14px; font-size: 14px; }
  .header-actions .btn .btn-long { display: none; }
}

/* ── Secciones base ────────────────────────── */
.section { padding: 104px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); }
.section-head p { margin-top: 14px; font-size: 18px; color: var(--muted); }
@media (max-width: 700px) { .section { padding: 72px 0; } .section-head { margin-bottom: 32px; } }

/* ── Hero ──────────────────────────────────── */
/* Hero a sangre: foto detrás, velo navy solo bajo el texto */
.hero { position: relative; padding: 0; background: var(--navy); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,37,64,.95) 0%, rgba(10,37,64,.9) 38%, rgba(10,37,64,.45) 50%, rgba(10,37,64,0) 60%); }
.hero-grid {
  min-height: min(78vh, 720px);
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.hero h1 { color: var(--bg); max-width: 13ch; font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -0.03em; line-height: 1.04; }
.hero h1 .hl { color: var(--blue-light); }
.hero-lead { margin-top: 22px; font-size: clamp(18px, 1.6vw, 20px); max-width: 38ch; color: var(--text); }
.hero-call { color: var(--ink); font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.hero-call svg { width: 18px; height: 18px; color: var(--blue); }
.hero .facts { margin-top: 0; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }

.hero-call strong { font-family: var(--font-display); }
.hero-call:hover strong { text-decoration: underline; }

/* Tarjeta "Agenda tu visita" */
.visit-card {
  background: var(--bg); border-radius: 18px;
  padding: 30px; box-shadow: 0 24px 48px -28px rgba(10, 37, 64, .35), 0 1px 3px rgba(10, 37, 64, .12);
  animation: rise .9s var(--ease-out) both .1s;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.visit-card h2 { font-size: 24px; }
.visit-card > p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.vf { margin-top: 22px; display: grid; gap: 16px; }
.vf-group > span, .vf-group > label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }

.vf select, .vf input[type="text"] {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg);
}
.vf select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6f84' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.vf select:focus, .vf input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.vf .btn { width: 100%; }
.vf-note { font-size: 13px; color: var(--muted); text-align: center; }

/* Franja de garantías */
.facts { margin-top: 0; border-top: 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.facts ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { display: flex; gap: 14px; align-items: flex-start; padding: 26px 24px; }
.facts li + li { border-left: 1px solid var(--line); }
/* El primer dato arranca en el borde del contenido, alineado con el titular de arriba */
.facts li:first-child { padding-left: 0; }
.facts svg { width: 26px; height: 26px; color: var(--blue); flex: none; margin-top: 2px; }
.facts strong { display: block; font-family: var(--font-display); color: var(--ink); font-size: 16px; line-height: 1.3; }
.facts span { display: block; font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 2px; }

@media (max-width: 760px) {
  .hero-media { inset: 0 0 auto 0; height: calc(380px + var(--header-h)); }
  .hero-media img { object-position: 50% 88%; }
  
  .hero-grid { min-height: 0; padding-bottom: 0; }
  .hero .visit-card { margin-bottom: -32px; position: relative; }
  .hero .facts { padding-top: 32px; }
}
@media (max-width: 1020px) and (min-width: 761px) {
  .hero-media::after { background: linear-gradient(180deg, rgba(10,37,64,.88) 0%, rgba(10,37,64,.8) 45%, rgba(10,37,64,.6) 100%); }
}
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-lead { max-width: 52ch; }
  .facts ul { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .hero-grid { padding-top: 32px; }
  .facts { margin-top: 48px; }
  .hero-actions .btn { width: 100%; }
  .hero-call { width: 100%; min-height: 44px; }
  .visit-card { padding: 22px 18px; }
  
  .facts ul { grid-template-columns: 1fr; }
  .facts li { padding: 18px 0; }
  .facts li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Servicios ─────────────────────────────── */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter button {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, transform .12s var(--ease-out);
}
.filter button:hover { border-color: var(--line-strong); color: var(--ink); }
.filter button:active { transform: scale(.97); }
.filter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--bg); }

.svc {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: start;
  padding: 26px 20px 26px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: opacity .35s var(--ease-out), background-color .2s;
}
.svc:nth-child(odd) { padding-right: 32px; }
.svc:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
.svc-ico { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; }
.svc-ico svg { width: 26px; height: 26px; }
.svc h3 { font-size: 20px; letter-spacing: -0.01em; }
.svc p { margin-top: 6px; font-size: 16px; color: var(--text); max-width: 46ch; }

/* Solo con puntero: en pantallas táctiles el hover se queda pegado tras tocar */
@media (hover: hover) and (pointer: fine) {
  .svc:hover h3 { color: var(--blue); }
  
}
.svc.is-dim { opacity: .28; }
.svc.is-dim:hover { opacity: .6; }

@media (max-width: 860px) {
  
  .svc, .svc:nth-child(odd), .svc:nth-child(even) { padding: 22px 0; border-left: 0; }
  .svc { grid-template-columns: 44px 1fr auto; gap: 14px; }
  .svc-ico { width: 44px; height: 44px; }
}

/* ── Cómo funciona ─────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; position: relative; }
.step { position: relative; padding: 0 28px 0 0; }
.step-num {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg); border: 2px solid var(--blue); color: var(--blue);
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; position: relative; z-index: 1;
}
.step:first-child .step-num { background: var(--blue); color: var(--bg); }
.step::before { content: ""; position: absolute; top: 23px; left: 48px; right: 0; border-top: 2px dashed var(--line-strong); }
.step:last-child::before { display: none; }
.step h3 { margin-top: 22px; font-size: 20px; }
.step p { margin-top: 8px; font-size: 16px; color: var(--text); }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; padding: 0 0 32px; }
  .step-num { grid-row: span 3; }
  .step h3 { margin-top: 10px; }
  .step::before { top: 48px; bottom: 0; left: 23px; right: auto; border-top: 0; border-left: 2px dashed var(--line-strong); }
  
  
}

/* ── Por qué nosotros ──────────────────────── */
.why-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.why-list { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 560px; }
.why-list svg { width: 28px; height: 28px; color: var(--blue); }
.why-list h3 { margin-top: 14px; }
.why-list p { margin-top: 6px; font-size: 16px; }
.company { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.company h3 { font-size: 18px; }
.company dl { margin: 18px 0 0; display: grid; gap: 0; }
.company dl div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.company dt { color: var(--muted); }
.company dd { margin: 0; color: var(--ink); font-weight: 600; }
.company dd a { color: var(--ink); }
.brands { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; max-width: 80ch; }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 600px) {
  .why-list { grid-template-columns: 1fr; gap: 28px; }
  .company { padding: 22px 18px; }
  .company dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Preguntas ─────────────────────────────── */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.faq-grid .section-head { margin-bottom: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--blue); transition: transform .25s var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--text); max-width: 68ch; }
/* La respuesta se despliega en vez de aparecer de golpe (navegadores sin soporte: aparece directo) */
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .26s var(--ease-out), content-visibility .26s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ── Cierre ────────────────────────────────── */
.closing { background: var(--navy); color: var(--on-navy); padding: 96px 0; }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.closing h2 { color: var(--bg); font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.03em; }
.closing p { margin-top: 16px; font-size: 18px; max-width: 52ch; }
.closing-actions { display: grid; gap: 14px; min-width: 300px; }
.closing-actions .btn { width: 100%; }
.closing .btn-cta, .site-header .btn-cta { box-shadow: none; }
.closing .btn-outline { background: transparent; color: var(--bg); border-color: rgba(255,255,255,.35); }
.closing .btn-outline:hover { border-color: var(--bg); }
.closing-mail { text-align: center; color: var(--on-navy); font-size: 15px; }
.closing-mail a { color: var(--bg); }
@media (max-width: 860px) { .closing { padding: 72px 0; } .closing-inner { grid-template-columns: 1fr; gap: 32px; } .closing-actions { min-width: 0; } }

/* ── Footer ────────────────────────────────── */
footer { background: var(--navy-deep); color: var(--on-navy-deep); padding: 64px 0 28px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-logo { display: inline-block; background: var(--bg); border-radius: 10px; padding: 8px 12px; }
.footer-logo img { height: 40px; width: auto; object-fit: contain; }
.footer-about { margin-top: 16px; max-width: 34ch; line-height: 1.55; }
footer .footer-h { color: var(--bg); font-size: 15px; font-weight: 700; font-family: var(--font-display); margin-bottom: 14px; }
footer li + li { margin-top: 8px; }
footer a { color: var(--on-navy-deep); text-decoration: none; }
footer a:hover { color: var(--bg); text-decoration: underline; }
.footer-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; }
  /* Enlaces de 44px de alto para el pulgar (antes ~23px) */
  footer li + li { margin-top: 0; }
  footer li { padding: 4px 0; }
  footer li a { display: inline-block; padding: 6px 0; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── Barra fija móvil ──────────────────────── */
.mobile-bar { display: none; }
@media (max-width: 760px) {
  .mobile-bar {
    display: grid;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(10,37,64,.2);
    transform: translateY(110%);
    transition: transform .35s var(--ease-out);
  }
  .mobile-bar.is-visible { transform: none; }
  .mobile-bar .btn { min-height: 50px; }
  .mobile-bar .btn-outline { width: 54px; padding: 0; }
  
  body.bar-on .header-actions .btn-cta { display: none; }
}

/* ═══ Subpáginas de servicio ═══ */
.crumbs { font-size: 14px; color: var(--muted); padding-top: 28px; }
.crumbs a { color: var(--muted); }
.svc-hero { padding: 24px 0 72px; background: var(--bg-soft); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; margin-top: 28px; }
.svc-hero .svc-ico { width: 64px; height: 64px; border-radius: 16px; }
.svc-hero .svc-ico svg { width: 32px; height: 32px; }
.svc-hero h1 { margin-top: 0; font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.03em; }
.svc-hero-lead { margin-top: 18px; font-size: 19px; max-width: 50ch; }
.svc-hero .hero-actions { margin-top: 30px; }
.svc-for-line { margin-top: 22px; font-size: 15px; color: var(--muted); }
.svc-for-line strong { color: var(--ink); font-weight: 600; }
.includes { background: var(--bg); border-radius: 18px; padding: 28px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(10,37,64,.35), 0 1px 3px rgba(10,37,64,.12); }
.includes h2 { font-size: 23px; }
.includes ul { margin-top: 14px; }
.includes li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.includes li:first-child { border-top: 0; }
.includes li svg { width: 20px; height: 20px; color: var(--blue); margin-top: 3px; }
.includes-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.includes-foot strong { color: var(--ink); }
.mini-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.mini-steps li h3 { font-size: 18px; margin-top: 14px; }
.mini-steps li p { margin-top: 6px; font-size: 16px; }
.mini-steps .step-num { width: 40px; height: 40px; font-size: 16px; }
.other-svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.other-svcs a { display: flex; align-items: center; gap: 14px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.other-svcs a:hover { color: var(--blue); }
.other-svcs .svc-ico { width: 40px; height: 40px; border-radius: 10px; }
.other-svcs .svc-ico svg { width: 20px; height: 20px; }
@media (max-width: 960px) { .svc-hero-grid { grid-template-columns: 1fr; gap: 36px; } .other-svcs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mini-steps { grid-template-columns: 1fr; gap: 24px; } .other-svcs { grid-template-columns: 1fr; } .includes { padding: 22px 18px; } .svc-hero { padding-bottom: 56px; } }

/* Hero sobre foto: colores claros (van al final para ganar a las reglas base) */
.hero .hero-lead { color: var(--line); }

.hero .hero-call { color: var(--bg); }
.hero .hero-call svg { color: var(--blue-light); }
body.menu-open .header-actions .btn-cta { visibility: hidden; opacity: 0; }

/* ═══ Menú móvil ═══ */
.burger { display: block; position: absolute; left: 50%; top: 50%; width: 20px; height: 14px; margin: -7px 0 0 -10px; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease, top .26s cubic-bezier(.22,1,.36,1); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }
.menu-btn[aria-expanded="true"] .burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.menu-btn[aria-expanded="true"] .burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .mobile-nav {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; top: var(--header-h); left: 0; right: 0; height: calc(100dvh - var(--header-h)); z-index: 99;
    background: var(--bg); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .22s cubic-bezier(.4,0,1,1), visibility 0s linear .22s;
  }
  .mobile-nav.is-open {
    visibility: visible; clip-path: inset(0 0 0 0);
    transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  .mn-list > *, .mn-foot > * { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
  .mobile-nav.is-open .mn-list > *, .mobile-nav.is-open .mn-foot > * { opacity: 1; transform: none; transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
  .mobile-nav.is-open .mn-list > :nth-child(1) { transition-delay: .12s; }
  .mobile-nav.is-open .mn-list > :nth-child(2) { transition-delay: .155s; }
  .mobile-nav.is-open .mn-list > :nth-child(3) { transition-delay: .19s; }
  .mobile-nav.is-open .mn-list > :nth-child(6) { transition-delay: .295s; }
  .mobile-nav.is-open .mn-list > :nth-child(4) { transition-delay: .225s; }
  .mobile-nav.is-open .mn-list > :nth-child(5) { transition-delay: .26s; }
  .mobile-nav.is-open .mn-foot > * { transition-delay: .3s; }

  .mn-link {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 62px;
    padding: 0 6px; margin: 0; border: 0; border-bottom: 1px solid var(--blue-soft); background: transparent;
    font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
    text-decoration: none; text-align: left; cursor: pointer; border-radius: 8px;
  }
  .mn-link:active { background: var(--bg-soft); }
  .mn-chev { width: 22px; height: 22px; color: var(--blue); flex: none; transition: transform .3s cubic-bezier(.22,1,.36,1); }
  #mnSvcBtn[aria-expanded="true"] .mn-chev { transform: rotate(180deg); }
  .mn-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.22,1,.36,1); }
  .mn-sub > div { overflow: hidden; }
  .svcs-open .mn-sub { grid-template-rows: 1fr; }
  .mn-sub a { display: block; padding: 11px 6px 11px 14px; font-size: 17px; color: var(--text); text-decoration: none; border-radius: 8px; }
  .mn-sub a:first-child { margin-top: 8px; }
  .mn-sub a:last-child { margin-bottom: 10px; color: var(--blue); font-weight: 600; }
  .mn-sub a:active { background: var(--bg-soft); }
  .mn-quiet { display: inline-block; margin-top: 18px; padding: 6px; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .mn-foot { display: grid; gap: 12px; padding-top: 24px; }
  .mn-foot .btn { width: 100%; }
  .mn-tel { text-align: center; color: var(--ink); text-decoration: none; font-size: 16px; }
  .mn-tel strong { font-family: var(--font-display); }
  .mn-hours { text-align: center; font-size: 13px; color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav.is-open { clip-path: none !important; }
  .mn-list > *, .mn-foot > * { transform: none !important; }
}

/* Hero móvil: texto más arriba */
@media (max-width: 760px) {
  
  
  .hero-media::after { background: linear-gradient(0deg, rgba(10,37,64,1) 0%, rgba(10,37,64,.92) 30%, rgba(10,37,64,.7) 45%, rgba(10,37,64,.2) 66%, rgba(10,37,64,0) 80%); }
  .hero-grid { padding-top: 150px !important; gap: 32px; }
  .hero h1 { font-size: 34px; }
  .hero-lead { margin-top: 16px; font-size: 17px; }
  .hero-actions { margin-top: 20px; }
}
@media (max-width: 1180px) {  }

/* Combobox de comuna */
.combo { position: relative; }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  max-height: 244px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px -16px rgba(10,37,64,.3);
}
.combo-list li { padding: 10px 12px; border-radius: 8px; font-size: 16px; color: var(--text); cursor: pointer; }
.combo-list li strong { color: var(--ink); font-weight: 700; }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background: var(--bg-soft); color: var(--ink); }
.combo-list li.is-free { color: var(--blue); font-weight: 600; }
@media (max-width: 1280px) { .header-tel { display: none !important; } }

/* ═══ Header fijo, siempre en el tono sólido ═══ */
.site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom: 0; isolation: isolate;
  box-shadow: 0 6px 20px -12px rgba(10, 37, 64, .35);
}
/* El desenfoque va en una capa aparte para no romper el menú móvil (position: fixed dentro del header) */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 37, 64, .92);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  transition: background-color .25s cubic-bezier(.22,1,.36,1);
}
.site-header.menu-open::before { background: var(--navy); }
.main-nav a { color: rgba(255, 255, 255, .86); }
.main-nav a:hover { color: var(--bg); background: rgba(255, 255, 255, .1); }
.header-tel { color: var(--bg); }
.header-tel svg { color: var(--blue-light); }

.menu-btn { background: transparent; border-color: rgba(255, 255, 255, .32); color: var(--bg); }
.site-header :focus-visible { outline-color: var(--blue-light); }
@media (prefers-reduced-motion: reduce) { .site-header::before { transition: none; } }

/* El contenido empieza debajo del header fijo */
.hero { padding-top: var(--header-h); }
.svc-hero { padding-top: calc(var(--header-h) + 24px); }
main:not(:has(> .hero:first-child, > .svc-hero:first-child)) { padding-top: var(--header-h); }
@media (max-width: 760px) {
  
}

/* Evita saltos al bloquear el scroll (menú o chat abiertos): la barra de desplazamiento siempre reserva su espacio */

.menu-btn { flex: none; width: 44px; height: 44px; padding: 0; position: relative; }

.burger span { transform-origin: center; }
.header-tel svg { flex: none; }

/* ═══════════════════════════════════════════════
   TESTIMONIOS — Sección y tarjetas
   ═══════════════════════════════════════════════ */

/* Grid de tarjetas */
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.test-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 48px 0;
}
.test-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 0;
  font-size: 17px;
}
.test-action {
  text-align: left;
  margin-top: 40px;
}
.test-action .btn svg {
  width: 18px; height: 18px;
  margin-right: 6px;
  vertical-align: -3px;
  stroke: currentColor;
  fill: none;
}

/* Tarjeta individual */
.test-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Una opinión sin comentario no se estira hasta igualar a la vecina: evita un hueco vacío */
.test-card:not(:has(.test-comment)) { align-self: start; }

/* Cabecera: avatar + nombre + servicio */
.test-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.test-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.test-name {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
}
.test-service {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* Estrellas en tarjetas */
.test-card-stars {
  display: flex;
  gap: 2px;
}
.test-star {
  width: 18px; height: 18px;
  fill: var(--line);
  stroke: none;
}
.test-star.filled {
  fill: var(--warn-soft);
}

/* Comentario y fecha */
.test-comment {
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.test-time {
  font-size: 13px;
  color: var(--muted);
  margin-top: auto;
}

@media (max-width: 960px) {
  .test-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .test-grid { grid-template-columns: 1fr; gap: 16px; }
  .test-card { padding: 20px; }
}

/* ═══════════════════════════════════════════════
   MODAL: Formulario de reseña
   ═══════════════════════════════════════════════ */

.review-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.review-overlay.is-open { opacity: 1; }
/* Sin esto, display:flex anula el atributo hidden y una capa invisible tapa toda la página (no deja seleccionar ni hacer clic) */
.review-overlay[hidden] { display: none; }
.review-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.review-dialog {
  position: relative;
  background: var(--bg);
  border-radius: var(--radius-lg);
  width: 92%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: 0 12px 48px rgba(10,37,64,.18);
  transform: translateY(20px) scale(.97);
  transition: transform .3s var(--ease-out);
}
.review-overlay.is-open .review-dialog {
  transform: translateY(0) scale(1);
}
.review-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.review-close:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.review-close svg { width: 20px; height: 20px; }

.review-dialog h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 4px;
}
.review-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 24px;
}

/* Campos del formulario */
.rf-field {
  margin-bottom: 18px;
}
.rf-field label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.rf-req { color: var(--accent-rose); }
.rf-opt { font-weight: 400; color: var(--muted); font-size: 13px; }

.rf-field input[type="text"],
.rf-field select,
.rf-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.rf-field input:focus,
.rf-field select:focus,
.rf-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13,87,176,.12);
}
.rf-field textarea { resize: vertical; min-height: 72px; }
.rf-field select { cursor: pointer; }

/* Estrellas interactivas */
.rf-stars {
  display: flex;
  gap: 6px;
}
.rf-star {
  width: 36px; height: 36px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .rf-star:hover { transform: scale(1.15); } }
.rf-star:active { transform: scale(.92); }
.rf-star svg {
  width: 100%; height: 100%;
  fill: var(--line);
  stroke: none;
  transition: fill .12s;
}
.rf-star.active svg { fill: var(--warn-soft); }

/* ¿Te gustó? — mismas fichas que el formulario de la portada, sin radios del navegador */
.rf-gusto {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rf-radio { position: relative; cursor: pointer; }
.rf-radio input { position: absolute; opacity: 0; pointer-events: none; }
.rf-radio span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 15px; font-weight: 500; color: var(--text); user-select: none;
  transition: border-color .15s, background-color .15s, color .15s, transform .12s var(--ease-out);
}
.rf-radio span:hover { border-color: var(--line-strong); }
.rf-radio span:active { transform: scale(.97); }
.rf-radio input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.rf-radio input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Acciones y mensajes */
.rf-actions {
  margin-top: 24px;
}
.rf-actions .btn {
  width: 100%;
  justify-content: center;
}
.rf-msg {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  text-align: center;
}
.rf-msg-warn {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-soft);
}
.rf-msg-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger-soft);
}

/* Pantalla de agradecimiento */
.review-thanks {
  text-align: center;
  padding: 24px 0;
}
.review-check {
  width: 64px; height: 64px;
  stroke: var(--blue);
  margin: 0 auto 16px;
  display: block;
}
.review-thanks h3 {
  font-size: 20px;
  margin-bottom: 8px;
}
.review-thanks p {
  color: var(--muted);
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .review-dialog {
    width: 100%;
    max-width: none;
    max-height: 100vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    align-self: flex-end;
    padding: 24px 20px;
  }
}

/* ═══════════════════════════════════════════════
   INICIO: avance por secciones con la rueda (2026-10-13, aprobado por Jose)
   ═══════════════════════════════════════════════
   Pedido de Jose (2026-10-13): al bajar con la rueda, la página avanza sección por sección, suave, y se detiene
   justo en «Servicios» a pantalla completa, para ver el edificio entero sin pasarse.
   - Imán nativo del navegador (scroll-snap): no se secuestra la rueda con código, funciona con rueda, panel táctil,
     teclado y la barra de desplazamiento, y respeta la animación suave del navegador.
   - Solo escritorio y tableta horizontal (≥ 901 px de ancho y ≥ 600 px de alto). En celular la página corre libre.
   - Con «reducir movimiento» activado en el equipo, no hay imán (regla de accesibilidad: nada de scroll forzado).
   - Solo en el inicio oficial: la condición :has(#servicios > .ed) no se cumple en las páginas de servicio ni en
     el cotizador. */
@media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  html:has(#servicios > .ed) { scroll-snap-type: y mandatory; }

  /* Cada sección se detiene con su borde superior justo bajo la cabecera fija
     (html ya trae scroll-padding-top = cabecera + 16 px para los enlaces del menú; el -16 px lo compensa) */
  html:has(#servicios > .ed) :is(.hero, .section, .closing) { scroll-snap-align: start; scroll-margin-top: -16px; }
  html:has(#servicios > .ed) footer { scroll-snap-align: end; }

  /* «Servicios» ocupa exactamente la pantalla bajo la cabecera, y la rueda no puede saltársela */
  html:has(#servicios > .ed) #servicios {
    scroll-snap-stop: always;
    height: calc(100svh - var(--header-h)); min-height: 560px;
    display: flex; flex-direction: column;
    padding: clamp(20px, 3.5svh, 40px) 0 0;
  }
  html:has(#servicios > .ed) #servicios > .wrap { flex: none; }
  html:has(#servicios > .ed) #servicios .section-head { margin-bottom: clamp(14px, 2.4svh, 28px); }
  html:has(#servicios > .ed) #servicios .section-head h2 { font-size: clamp(30px, 4.6svh, 44px); }
  html:has(#servicios > .ed) #servicios .section-head p { margin-top: 8px; }
  /* El edificio toma todo el alto que queda (antes: alto fijo de 640 a 980 px, que se salía de la pantalla) */
  html:has(#servicios > .ed) #servicios > .ed { flex: 1 1 auto; height: auto; min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   DISEÑO PARTES 1 Y 2 (aplicado el 2026-10-13 con la «A» de Jose): sistema en 3 capas + Servicios, ritmo de fondos,
   «Así funciona», «Por qué elegir», marcas y testimonios. Respaldo previo: respaldos/sitio.antes-diseno12-2026-10-13.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── CAPA 1 · PRIMITIVOS: valores crudos, sin significado ── */

/* ── CAPA 2 · SEMÁNTICOS: para qué sirve cada valor (lo que usan las secciones) ── */

/* ── CAPA 3 · COMPONENTES ── */

/* ═══ Sección «Servicios» con el edificio ═══ */

/* 1. Una sola banda gris: título y edificio juntos (antes: título en blanco, edificio en gris y otra franja blanca) */
body #servicios { background: var(--color-fondo-alt); padding-bottom: 0; container-type: inline-size; }
body #servicios .section-head { margin-bottom: var(--sp-6); }
/* 2. El menú arranca en la misma línea que el título (antes quedaba 28 px más a la izquierda) */
body #servicios .ed { --ed-margen: max(24px, calc((100cqw - 1200px) / 2 + 24px)); border-bottom: 0; }

/* 3. Menú plano, del mismo idioma que el resto del sitio: sin tarjeta flotante, filas de 50 px, letra 17 px */
@media (min-width: 901px) {
  body .ed-side { padding-top: var(--sp-2); padding-right: var(--sp-8); }
  body .ed-menu { margin: 0 0 0 -12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  body .ed-group + .ed-group { margin-top: var(--sp-4); border-top: 0; }
  body .ed-group-t { padding: 0 12px var(--sp-2); font: 600 var(--tipo-meta)/1.2 var(--font-text); font-stretch: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--color-apagado); }
  body .ed-tab, body .ed-menu-mark { height: var(--menu-fila-h); }
  body .ed-tab { gap: 14px; padding: 0 12px; border-radius: var(--radio-control); font: 700 var(--fs-17)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--color-titulo); }
  body .ed-tab[aria-selected="true"] { font-weight: 700; color: var(--color-accion); }
  body .ed-tab::after {
    content: ""; margin-left: auto; width: 18px; height: 18px; flex: none; background: currentColor; opacity: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: translateX(-4px); transition: opacity .2s var(--ease-out), transform .25s var(--ease-out);
  }
  body .ed-tab[aria-selected="true"]::after { opacity: 1; transform: none; }
  body .ed-menu-mark { top: 0; left: 0; width: 100%; border-radius: var(--radio-control); background: var(--menu-placa); box-shadow: 0 0 0 1px var(--color-regla); }
  /* 4. Botón de agendar bajo el menú: la columna izquierda ya no queda vacía */
  body .ed-ayuda { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--color-regla); }
  body .ed-ayuda-t { font: 700 var(--fs-17)/1.3 var(--font-display); color: var(--color-titulo); }
  
  body .ed-ayuda .btn { margin-top: var(--sp-4); }
  body .ed-ayuda-tel { display: block; margin-top: var(--sp-3); font-size: var(--tipo-ui); color: var(--color-texto); text-decoration: none; }
  body .ed-ayuda-tel strong { font-family: var(--font-display); color: var(--color-titulo); }
}
/* Íconos en ficha azul suave, como tenía la lista de servicios anterior (el elegido en azul lleno) */
body .ed-tab svg { width: var(--menu-ico); height: var(--menu-ico); padding: 8px; border-radius: var(--radio-control); background: var(--color-accion-suave); box-shadow: none; stroke: var(--color-accion); stroke-width: 1.8; }
body .ed-tab[aria-selected="true"] svg, body .ed-tab[aria-selected="true"]:hover svg { background: var(--color-accion); stroke: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  body .ed-tab:not([aria-selected="true"]):hover { color: var(--color-accion); background: rgba(10, 37, 64, .04); }
  body .ed-tab:not([aria-selected="true"]):hover::after { opacity: .7; transform: none; }
}

/* 5. Píldoras sobre el edificio planas (el sistema reserva la sombra para la tarjeta de agenda) */
body .ed-hint { box-shadow: none; border: 1px solid var(--pildora-borde); background: rgba(255, 255, 255, .92); }
body .ed-back { box-shadow: 0 0 0 1px var(--color-regla-fuerte); }

/* Celular: la invitación respeta el margen de 16 px (antes tocaba el borde izquierdo) */
@media (max-width: 900px) {
  body .ed-hint { left: 16px; right: 16px; justify-content: center; text-align: left; }
  body .ed-ayuda { display: none; }
  body .ed-group-t { font-size: var(--tipo-meta); }
}

/* ═══ Ritmo de fondos: blanco y gris se alternan sin repetirse ═══
   antes: Servicios (blanco + gris) → Así funciona (gris) → Por qué (blanco) → Preguntas (gris) → Testimonios (blanco)
   ahora: Servicios (gris) → Así funciona (blanco) → Por qué (gris) → Preguntas (blanco) → Testimonios (gris) */
body #como-funciona, body #preguntas { background: var(--color-fondo); }
body #nosotros, body #testimonios { background: var(--color-fondo-alt); }

/* ═══ «Por qué elegir»: íconos en ficha (como Servicios) y marcas como franja ═══ */
#nosotros .why-list svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radio-control);
  background: var(--color-fondo);
  box-shadow: 0 0 0 1px var(--color-regla);
  grid-row: span 2;
}
#nosotros .why-list h3 { font-size: var(--tipo-titulo); margin-top: 2px; }
#nosotros .brands {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--sp-6);
  align-items: center;
  font-size: var(--tipo-ui);
  margin-top: 40px;
  padding: 22px 24px;
  border: 1px solid var(--color-regla);
  border-radius: var(--radio-tarjeta);
  background: var(--color-fondo);
}
#nosotros .brands-t { color: var(--color-apagado); }
#nosotros .brands-list { display: flex; flex-wrap: wrap; gap: 6px 28px; }
#nosotros .brands-list li { font: 700 var(--fs-18)/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--color-titulo); }
@media (max-width: 760px) { #nosotros .brands { grid-template-columns: 1fr; gap: var(--sp-3); } #nosotros .brands-list { gap: 4px 20px; } #nosotros .brands-list li { font-size: var(--fs-16); } }

/* ═══ Testimonios: «Dejar mi opinión» ocupa el hueco de la grilla (antes: 2 tarjetas y un tercio vacío) ═══ */
#testimonios .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
#testimonios .section-head, #testimonios .test-empty, #testimonios .test-loading { grid-column: 1 / -1; }
#testimonios .section-head { margin-bottom: var(--sp-6); }
#testimonios .test-grid { display: contents; }
#testimonios .test-card { background: var(--color-fondo); }
#testimonios .test-action {
  margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-6); border: 1.5px dashed var(--color-regla-fuerte); border-radius: var(--radio-tarjeta);
}
#testimonios .test-action-t { font: 700 var(--fs-18)/1.3 var(--font-display); color: var(--color-titulo); }
#testimonios .test-action-p { margin-top: -10px; font-size: var(--tipo-ui); color: var(--color-apagado); }
@media (max-width: 960px) { #testimonios .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #testimonios .wrap { grid-template-columns: 1fr; row-gap: 16px; } }

/* ═══ Tamaños fuera de la escala, llevados al más cercano ═══ */
.why-list h3 { font-size: var(--tipo-titulo); }   /* 19 → 20 */

/* ═══ Partes 1 y 2 · movimiento común, «Así funciona», «Por qué elegir» y testimonios (2026-10-13) ═══ */

/* ── Parte 1 · Sistema: movimiento con dos duraciones y una curva ── */

/* Pulsado igual en todos los botones (se hunde un poco y vuelve) */
.btn { transition: background-color var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva), transform 120ms var(--curva); }
.btn:active { transform: scale(.97); }

/* ── Parte 2 · «Así funciona»: cada paso en su tarjeta, números llenos, sin líneas punteadas ── */
#como-funciona .steps { gap: 16px; }
#como-funciona .step { padding: 24px; border-radius: var(--radio-tarjeta); background: var(--color-fondo-alt); border: 1px solid var(--color-regla); }
#como-funciona .step::before { display: none; }
#como-funciona .step-num { width: 40px; height: 40px; font-size: 16px; background: var(--color-marca); color: var(--bg); border-color: var(--color-marca); }
#como-funciona .step h3 { margin-top: 18px; font-size: var(--tipo-titulo); }
#como-funciona .step p { font-size: var(--tipo-lista); }

@media (max-width: 760px) {
  #como-funciona .step { grid-template-columns: 40px 1fr; column-gap: 16px; padding: 18px; margin-bottom: 12px; }
  #como-funciona .step h3 { margin-top: 6px; }
}

/* ── Parte 2 · «Por qué elegir»: cada razón en tarjeta blanca sobre el gris; datos de la empresa con la misma tarjeta ── */
#nosotros .why-list { gap: 16px; max-width: none; }
#nosotros .why-list > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 22px 24px; border-radius: var(--radio-tarjeta); background: var(--color-fondo); border: 1px solid var(--color-regla); }

#nosotros .why-list p { margin-top: 4px; }
#nosotros .company { border-radius: var(--radio-tarjeta); background: var(--color-fondo); border: 1px solid var(--color-regla); box-shadow: none; }

/* ── Parte 2 · Testimonios: estado vacío o sin conexión con diseño propio (no una línea gris suelta) ── */
#testimonios .test-empty:not([hidden]) {
  grid-column: span 2; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 28px; border-radius: var(--radio-tarjeta); background: var(--color-fondo); border: 1px solid var(--color-regla);
  font: 700 var(--fs-18)/1.35 var(--font-display); color: var(--color-titulo); text-align: left;
}
#testimonios .test-empty:not([hidden])::before {
  content: ""; width: 44px; height: 44px; margin-bottom: 8px; border-radius: var(--radio-control); background: var(--color-accion-suave)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d57b0' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#testimonios .test-empty:not([hidden])::after { content: "Mientras tanto, puedes revisar nuestras marcas y garantías más arriba o escribirnos por WhatsApp."; font: 400 var(--tipo-ui)/1.5 var(--font-text); color: var(--color-apagado); }
@media (max-width: 960px) { #testimonios .test-empty:not([hidden]) { grid-column: 1 / -1; } }

/* ═══ Pantallas bajas del inicio oficial (2026-10-13, versión 17) ═══
   «Servicios» mide exactamente el alto de la ventana; en un portátil de 768 px el botón «Agendar visita gratis» bajo el menú
   quedaba cortado por el borde. Filas de 44 px y sin la línea del teléfono (sigue en la cabecera). Para deshacer: borrar este bloque. */
@media (min-width: 901px) and (max-height: 820px) {
  body .ed-side { --menu-fila-h: 44px; }
  body .ed-ayuda { margin-top: var(--sp-4); padding-top: var(--sp-4); }
  body .ed-ayuda-tel { display: none; }
}

/* ═══════════════════════════════════════════════
   HERO · CASA DE NOCHE, FORMULARIO EN 2 PASOS, MENÚ EN PÍLDORA (2026-10-14)
   Todo cuelga de .hero--casa, .main-nav--pill, .header-inner--pill, .hc-ico y .hero-tel: solo la portada.
   Las subpáginas (cctv.html, etc.) no se tocan.
   Deshacer: restaurar respaldos/index.antes-hero-casa-2026-10-14.html y respaldos/sitio.antes-hero-casa-2026-10-14.css
   ═══════════════════════════════════════════════ */

/* Cabecera: menú en píldora al centro; a la derecha, Clientes (ícono) y «Agendar visita». El teléfono vive en la portada */
.header-inner--pill .header-actions { margin-left: 0; }
.main-nav--pill { margin: 0 auto; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.main-nav--pill a { padding: 9px clamp(9px, 1vw, 16px); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--blue-soft); }
.main-nav--pill a:hover { background: var(--bg); color: var(--navy); }

@media (max-width: 1180px) { .header-inner--pill .header-actions { margin-left: auto; } }

/* Foto y velo */
.hero--casa .hero-media img { object-position: 58% 55%; }
.hero--casa .hero-media::after {
  background:
    linear-gradient(90deg, rgba(5,14,27,.94) 0%, rgba(5,14,27,.86) 30%, rgba(5,14,27,.45) 52%, rgba(5,14,27,.12) 70%, rgba(5,14,27,.25) 100%),
    linear-gradient(180deg, rgba(5,14,27,.75) 0%, rgba(5,14,27,0) 22%, rgba(5,14,27,0) 70%, rgba(5,14,27,.6) 100%);
}
@media (max-width: 1020px) and (min-width: 761px) {
  .hero--casa .hero-media::after { background: linear-gradient(180deg, rgba(10,37,64,.88) 0%, rgba(10,37,64,.8) 45%, rgba(10,37,64,.6) 100%); }
}
@media (max-width: 760px) {
  .hero--casa .hero-media img { object-position: 50% 50%; }
  .hero--casa .hero-media::after { background: linear-gradient(0deg, rgba(10,37,64,1) 0%, rgba(10,37,64,.92) 30%, rgba(10,37,64,.7) 45%, rgba(10,37,64,.2) 66%, rgba(10,37,64,0) 80%); }
}

/* Titular y bajada */
.hero--casa h1 { max-width: none; }
.hero--casa h1 .hl { color: var(--warn-soft); }
.hero--casa .hero-lead { color: var(--on-navy); max-width: 40ch; }

/* Teléfono grande en la portada */
.hero-tel { display: inline-flex; align-items: center; gap: 14px; color: var(--bg); text-decoration: none; min-height: 52px; }
.hero-tel .ht-ico { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); }
.hero-tel .ht-ico svg { width: 24px; height: 24px; color: var(--bg); }
.hero-tel small { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--on-navy-deep); }
.hero-tel strong { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.15; }
.hero-tel:hover strong { text-decoration: underline; }
.hero-tel:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 4px; border-radius: 8px; }

/* Tarjeta de vidrio, en dos pasos */
.hero--casa .visit-card {
  background: rgba(12,32,56,.62); border: 1px solid rgba(255,255,255,.2); border-radius: 24px; padding: 30px; color: var(--bg);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 80px -30px #000;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero--casa .visit-card { background: rgba(12,32,56,.92); } }
.hero--casa .vf { margin-top: 0; display: block; }
.vf-prog { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 13px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-light); }
.vf-prog i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
.vf-prog i.is-on { background: var(--blue-light); }
.hero--casa .vf-q { margin: 0 0 20px; font: 700 26px/1.15 var(--font-display); color: var(--bg); letter-spacing: normal; }
.vf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vf-tiles label { position: relative; display: block; }
.vf-tiles input { position: absolute; opacity: 0; pointer-events: none; }
.vf-tiles span {
  display: block; padding: 18px 14px; text-align: center; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 16px; background: rgba(255,255,255,.05);
  font: 600 15px/1.25 var(--font-display); color: var(--bg);
  transition: border-color .15s, background-color .15s, transform .1s;
}
.vf-tiles span svg { display: block; width: 34px; height: 34px; margin: 0 auto 9px; color: var(--blue-light); }
.vf-tiles span:hover { border-color: rgba(255,255,255,.45); }
.vf-tiles span:active { transform: scale(.97); }
.vf-tiles input:checked + span { border-color: var(--blue-light); background: rgba(111,177,255,.2); }
.vf-tiles input:focus-visible + span { outline: 3px solid var(--blue-light); outline-offset: 2px; }
.vf-step > .btn { margin-top: 20px; }
.vf-step .btn svg { width: 18px; height: 18px; flex: none; }
.hero--casa .vf-note { margin-top: 12px; color: var(--on-navy-deep); }
.vf-back { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 2px; padding: 0; border: 0; background: none; font: 600 14px var(--font-display); color: var(--blue-light); cursor: pointer; }
.vf-back:hover { color: var(--bg); }
.vf-back:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; border-radius: 6px; }
.hero--casa .vf-group { margin-bottom: 16px; }
.hero--casa .vf-group > label { color: var(--bg); }
.hero--casa .vf select, .hero--casa .vf input[type="text"] {
  min-height: 52px; border-radius: 12px; border-color: rgba(255,255,255,.28); background-color: rgba(255,255,255,.08); color: var(--bg);
}
.hero--casa .vf select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fc3ee' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.hero--casa .vf select option { background: var(--bg); color: var(--navy); }
.hero--casa .vf input::placeholder { color: var(--on-navy-deep); opacity: 1; }
.hero--casa .vf select:focus, .hero--casa .vf input:focus { border-color: var(--blue-light); box-shadow: 0 0 0 3px rgba(111,177,255,.28); }
@media (max-width: 560px) {
  .hero--casa .visit-card { padding: 22px 18px; }
  .hero--casa .vf-q { font-size: 23px; }
  .vf-tiles { gap: 10px; }
  .vf-tiles span { padding: 16px 10px; }
  .hero-tel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vf-tiles span { transition: none; } }

/* Celular: la tarjeta de vidrio ya no se monta sobre la franja de abajo (sobre blanco se veía lavada) */
@media (max-width: 760px) {
  .hero--casa .visit-card { margin-bottom: 0; }
  
}

/* ═══ FRANJA DE ABAJO DEL HERO (2026-10-14) ═══
   Escritorio y tablet: cuatro tarjetas flotantes sobre el borde de la foto. Celular (≤ 560 px): lista compacta con ícono verde.
   Solo la portada (.hero--casa). Deshacer: quitar este bloque y devolver el ítem «Propuesta en 24 h» desde respaldos/index.antes-franja-2026-10-14.html */
.hero--casa .facts { margin-top: -44px; position: relative; z-index: 2; border-bottom: 0; padding-bottom: 36px; background: linear-gradient(180deg, transparent 0, transparent 44px, var(--bg) 44px); }
.hero--casa .facts ul { gap: 16px; }
.hero--casa .facts li { align-items: center; padding: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 22px 40px -26px rgba(10,37,64,.45), 0 1px 2px rgba(10,37,64,.08); }
.hero--casa .facts li:first-child, .hero--casa .facts li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.hero--casa .facts svg { width: 44px; height: 44px; margin-top: 0; padding: 10px; border-radius: 12px; background: var(--blue-soft); }
@media (max-width: 1020px) {
  .hero--casa .facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hero--casa .facts li:nth-child(3) { padding-left: 22px; }
}
@media (max-width: 760px) {
  .hero--casa .facts { margin-top: 0; padding-top: 28px; background: var(--bg); border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .hero--casa .facts { padding: 0; }
  .hero--casa .facts ul { gap: 0; }
  .hero--casa .facts li, .hero--casa .facts li:first-child, .hero--casa .facts li + li { gap: 10px; padding: 13px 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .hero--casa .facts li + li { border-top: 1px solid var(--line); }
  .hero--casa .facts li:nth-child(n+3) { padding-left: 0; }
  .hero--casa .facts svg { width: 20px; height: 20px; padding: 0; border-radius: 0; background: none; color: var(--green); }
  .hero--casa .facts strong { font-size: 15px; font-weight: 600; }
  .hero--casa .facts span { display: none; }
}

/* ═══════════════════════════════════════════════
   ASÍ FUNCIONA · franja marino con recorrido por pasos; en escritorio, pantalla dividida con escena (2026-10-16, diseño A elegido por Jose)
   Solo #como-funciona. Escritorio (≥ 901 × 640 px): la franja se queda fija en pantalla; a la izquierda el índice de los 4 pasos y a la derecha una
   escena que cambia con cada paso (chat de WhatsApp, visita, propuesta, instalación). Cada gesto de la rueda (o flecha) avanza UN paso: lo hace el
   script «Así funciona» de index.html, que deja el paso en data-paso (0 = solo títulos, 1 a 4) y la variable --q en cada .step. Tras el 4, pasa al
   contenedor siguiente. Sin botón propio: basta el «Agendar visita» de la cabecera (y la barra inferior en celular).
   Las frases de cada paso siguen en el HTML (los lectores de pantalla las leen) y se ven en celular y en pantallas bajas.
   Celular y pantallas bajas: no se fija; cada paso se revela al entrar en pantalla. «Reducir movimiento» o sin JavaScript: todo visible, sin escenas.
   Deshacer: restaurar respaldos/index.antes-asi-escenas-2026-10-16.html y respaldos/sitio.antes-asi-escenas-2026-10-16.css
   ═══════════════════════════════════════════════ */
body #como-funciona { background: radial-gradient(ellipse at 15% 0%, var(--navy-2) 0, var(--navy) 55%, var(--navy-deep) 100%); color: var(--bg); }
body #como-funciona .section-head { margin-bottom: 56px; }
body #como-funciona .section-head h2 { color: var(--bg); }
body #como-funciona .section-head p { color: var(--on-navy); }
body #como-funciona .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
body #como-funciona .step { --q: 1; display: block; padding: 20px 0 0; border: 0; border-radius: 0; background: none; }
body #como-funciona .step::before {
  display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: auto; height: 3px;
  border: 0; border-radius: 3px; background: rgba(255, 255, 255, .22);
}
body #como-funciona .step:last-child::before { display: block; background: var(--green-light); }
body #como-funciona .step-num {
  display: block; width: auto; height: auto; border: 0; border-radius: 0; background: none;
  font: 800 92px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .42);
}
body #como-funciona .step:last-child .step-num { -webkit-text-stroke-color: var(--green-light); }
body #como-funciona .step h3 { margin-top: 14px; font-size: 19px; letter-spacing: -.015em; color: var(--bg); }
body #como-funciona .step p { margin-top: 8px; max-width: 30ch; font-size: 16px; line-height: 1.55; color: var(--on-navy); }
body #como-funciona .how-scenes { display: none; }

/* Con JavaScript, fuera del recorrido fijo (celular, pantallas bajas): el texto de cada paso aparece y su barra se llena según --q */
body #como-funciona.how-js .step p { opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 14px)); will-change: opacity, transform; }
body #como-funciona.how-js .step-num { -webkit-text-stroke-color: rgba(255, 255, 255, calc(.3 + .55 * var(--q))); }
body #como-funciona.how-js .step:last-child .step-num { -webkit-text-stroke-color: rgba(79, 210, 106, calc(.3 + .7 * var(--q))); }
body #como-funciona.how-js .step::before { background: rgba(255, 255, 255, .22); }
body #como-funciona.how-js .step::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: rgba(255, 255, 255, .85); transform-origin: left; transform: scaleX(var(--q));
}
body #como-funciona.how-js .step:last-child::after { background: var(--green-light); }

@media (max-width: 900px) {
  body #como-funciona .section-head { margin-bottom: 18px; }
  body #como-funciona .steps {
    grid-template-columns: 1fr;
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin: 0 -16px;
    padding: 2px 16px 10px;
    scrollbar-width: none;
    padding-inline: calc((100vw - 76vw) / 2) !important;
    scroll-padding-inline: calc((100vw - 76vw) / 2);
    margin-inline: -16px !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }
  body #como-funciona .step { grid-template-columns: 84px 1fr; column-gap: 12px; }
  body #como-funciona .step-num { grid-row: 1 / span 2; font-size: 38px; }
  body #como-funciona .step h3 { margin-top: 4px; font-size: 18px; margin: 6px 0 0; }
  body #como-funciona .step p { margin-top: 4px; }
}

/* ── Escritorio: franja fija, índice a la izquierda y escena a la derecha ── */
@media (min-width: 901px) and (min-height: 640px) {
  body #como-funciona.how-scroll { padding: 0; background: var(--navy); height: calc(100svh - var(--header-h) + 150svh); }
  body #como-funciona.how-scroll .how-pin {
    position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); display: flex; align-items: center;
    background:
      linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
      radial-gradient(ellipse at 15% 0%, var(--navy-2) 0, var(--navy) 55%, var(--navy-deep) 100%);
  }
  body #como-funciona.how-scroll .how-pin > .wrap {
    flex: 1; display: grid; grid-template-columns: minmax(340px, 480px) minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: clamp(40px, 5.5vw, 80px); align-content: center;
  }
  body #como-funciona.how-scroll .section-head { grid-column: 1; grid-row: 1; margin-bottom: clamp(22px, 4.6svh, 44px); }
  body #como-funciona.how-scroll .section-head h2 { font-size: clamp(40px, 7.2svh, 64px); line-height: 1.04; letter-spacing: -.03em; }
  body #como-funciona.how-scroll .section-head p { margin-top: clamp(10px, 1.8svh, 16px); max-width: 440px; font-size: clamp(17px, 2.3svh, 20px); }
  body #como-funciona.how-scroll .steps { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 10px; }
  body #como-funciona.how-scroll .step {
    display: grid;
    border-left: 3px solid rgba(255, 255, 255, .14);
    grid-template-columns: 50px 1fr;
    column-gap: 18px;
    align-items: center;
    padding: clamp(9px, 1.8svh, 15px) 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    transition: background .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
  }
  body #como-funciona.how-scroll .step::before, body #como-funciona.how-scroll .step::after { display: none; }
  body #como-funciona.how-scroll .step-num {
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 19px;
    letter-spacing: 0;
    color: var(--on-navy-deep);
    -webkit-text-stroke: 0;
    background: rgba(255, 255, 255, .1);
    transition: background .3s var(--ease-out), color .3s var(--ease-out);
  }
  body #como-funciona.how-scroll .step h3 {
    margin: 0;
    font-size: clamp(19px, 2.8svh, 25px);
    line-height: 1.2;
    letter-spacing: normal;
    transition: color .3s var(--ease-out);
    grid-column: 2;
    grid-row: 1;
    color: var(--on-navy-deep);
  }
  body #como-funciona.how-scroll .step p {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0; opacity: 1; transform: none; will-change: auto;
  }
  /* paso activo: barra verde, número verde y título blanco; los ya vistos, en azul claro */
  body #como-funciona[data-paso="1"] .step:nth-child(1), body #como-funciona[data-paso="2"] .step:nth-child(2),
  body #como-funciona[data-paso="3"] .step:nth-child(3), body #como-funciona[data-paso="4"] .step:nth-child(4) { border-left-color: var(--green-light); }
  
  body #como-funciona[data-paso="1"] .step:nth-child(1) .step-num, body #como-funciona[data-paso="2"] .step:nth-child(2) .step-num,
  body #como-funciona[data-paso="3"] .step:nth-child(3) .step-num, body #como-funciona[data-paso="4"] .step:nth-child(4) .step-num { -webkit-text-stroke-color: var(--green-light); }
  body #como-funciona[data-paso="2"] .step:nth-child(1) h3, body #como-funciona[data-paso="3"] .step:nth-child(-n+2) h3,
  body #como-funciona[data-paso="4"] .step:nth-child(-n+3) h3 { color: var(--on-navy); }

  /* escena */
  body #como-funciona.how-scroll .how-scenes {
    display: block; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; position: relative; contain: size;
  }
  .how-hint {
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    font: 700 19px var(--font-display);
    color: var(--line);
    transition: opacity .35s var(--ease-out);
  }
  .how-hint svg { width: 26px; height: 26px; fill: none; stroke: var(--green-light); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
  #como-funciona:not([data-paso="0"]) .how-hint { opacity: 0; }
  
  
  

  .how-phone { width: min(360px, 100%); height: min(690px, 100%); border-radius: 46px; background: var(--navy-deep); padding: 12px; box-shadow: 0 40px 80px -30px #000, 0 0 0 2px rgba(255, 255, 255, .1); }
  .how-scr { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--warn-soft); display: flex; flex-direction: column; color: var(--navy-deep); }
  .how-bar { background: var(--navy-2); color: var(--bg); padding: 34px 16px 14px; display: flex; align-items: center; gap: 12px; }
  .how-bar img { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); padding: 3px; }
  .how-bar b { display: block; font: 700 16px var(--font-display); }
  .how-bar small { font: 400 12px var(--font-text); color: var(--on-navy-deep); }
  
  .how-bub { max-width: 84%; padding: 12px 14px 9px; border-radius: 15px; font: 400 16px/1.4 var(--font-text); box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
  .how-bub small { display: block; margin-top: 2px; text-align: right; font-size: 11px; color: var(--on-navy-deep); }
  .how-me { align-self: flex-end; background: var(--green-light); border-top-right-radius: 4px; }
  .how-yo { align-self: flex-start; background: var(--bg); border-top-left-radius: 4px; }
  
  
  
  
  
  
  
  
  
  
  
  
}
@media (prefers-reduced-motion: reduce) { .how-hint { transition: none; } }

/* ═══════════════════════════════════════════════
   «POR QUÉ ELEGIR» EN CELULAR · alternativa G (2026-10-16, elegida por Jose entre F, G, H e I)
   Solo ≤ 900 px: datos de confianza en tres chips bajo el título (.why-chips, en index.html), las tres razones sin tarjeta con ícono azul,
   «Datos de la empresa» en tarjeta clara con borde marino a la izquierda (solo razón social, RUT y contacto: factura, cobertura y horario
   ya están en los chips) y las marcas como pastillas. En escritorio los chips no se ven y todo queda como estaba.
   Deshacer: borrar este bloque y la línea .why-chips de index.html (respaldos/*.antes-nosotros-g-2026-10-16.*)
   ═══════════════════════════════════════════════ */
.why-chips { display: none; }
@media (max-width: 900px) {
  .why-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 22px; }
  .why-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green-hover); font: 600 13px/1.2 var(--font-text); }
  .why-chips span::before { content: "✓"; font-weight: 800; }
  body #nosotros .why-list { gap: 0; }
  body #nosotros .why-list > div { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 14px 0; grid-template-columns: 44px 1fr; }
  body #nosotros .why-list svg { background: var(--blue-soft); color: var(--blue); box-shadow: none; border-radius: 12px; }
  body #nosotros .why-list h3 { font-size: 18px; }
  body #nosotros .why-list p { font-size: 15px; }
  body #nosotros .company { padding: 18px; background: var(--bg); border: 1px solid var(--line); border-left: 5px solid var(--navy); }
  body #nosotros .company dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  body #nosotros .company dl div { display: block; border: 0; padding: 0; }
  body #nosotros .company dl div:nth-child(1), body #nosotros .company dl div:nth-child(6) { grid-column: 1 / -1; }
  body #nosotros .company dl div:nth-child(3), body #nosotros .company dl div:nth-child(4), body #nosotros .company dl div:nth-child(5) { display: none; }
  body #nosotros .company dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
  body #nosotros .brands {
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 16px 0 0;
    display: none;
  }
  body #nosotros .brands-list { gap: 8px; }
  body #nosotros .brands-list li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--bg); font-size: 13.5px; }
}

/* ═══════════════════════════════════════════════
   «ASÍ FUNCIONA» EN CELULAR · alternativa L, tarjetas que se deslizan (2026-10-16, elegida por Jose)
   Solo ≤ 900 px: antes medía ~850 px (4 pasos apilados con cifras enormes); ahora los 4 pasos son tarjetas que se deslizan hacia el lado con
   imán horizontal (~370 px de alto). El texto de cada paso se ve siempre (no espera al desplazamiento). Escritorio sin cambios.
   Deshacer: borrar este bloque (respaldos/sitio.antes-asi-l-2026-10-16.css)
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  body #como-funciona { padding-block: 40px; }
  
  body #como-funciona .section-head h2 { font-size: 30px; }
  body #como-funciona .section-head p { font-size: 15.5px; margin-top: 8px; }
  
  body #como-funciona .steps::-webkit-scrollbar { display: none; }
  body #como-funciona .step {
    display: block;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    padding: 16px;
    margin: 0;
  }
  body #como-funciona .step::before, body #como-funciona .step::after { display: none; }
  
  
  body #como-funciona .step p, body #como-funciona.how-js .step p { font-size: 14.5px; line-height: 1.45; margin-top: 6px; max-width: none; opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════
   «ASÍ FUNCIONA» · BARRA DE PROGRESO DE LAS TARJETAS (2026-10-18, alternativa C elegida por Jose)
   Solo ≤ 900 px: sobre las tarjetas, «Paso N de 4» y una barra que crece al deslizar hacia la derecha y se reduce al volver (arranca en 25 %
   porque ya se ve el paso 1). La mueve el script de index.html (#howProgBar con scaleX; solo transform, sin recalcular el diseño).
   En escritorio no se ve. Deshacer: borrar este bloque, el div .how-prog y su script (respaldos/*.antes-barra-asi-2026-10-18.*)
   ═══════════════════════════════════════════════ */
.how-prog { display: none; }
@media (max-width: 900px) {
  body #como-funciona .how-prog { display: block; margin: 0 0 14px; }
  body #como-funciona .how-prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; color: var(--on-navy); font: 600 12.5px var(--font-text); }
  body #como-funciona .how-prog-top b { color: var(--bg); font: 800 14px var(--font-display); letter-spacing: .02em; }
  body #como-funciona .how-prog-pista { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); overflow: hidden; }
  body #como-funciona .how-prog-pista i { display: block; height: 100%; width: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue-light), var(--green-light)); transform-origin: left; transform: scaleX(.25); will-change: transform; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  body #como-funciona .how-prog-pista i { transition: transform .12s linear; }
}

/* «ASÍ FUNCIONA» EN CELULAR · cada deslizamiento avanza UNA tarjeta y la deja centrada (2026-10-18, pedido de Jose): tarjetas de 76 vw, relleno lateral que centra
   la primera y la última, imán al centro y `scroll-snap-stop: always` (un gesto no se salta tarjetas, ni al ir ni al volver). Deshacer: borrar este bloque. */
@media (max-width: 900px) {
  
  body #como-funciona .step { flex: 0 0 76vw; scroll-snap-align: center; scroll-snap-stop: always; }
}

/* ═══════════════════════════════════════════════
   MARCAS RECONOCIDAS EN CELULAR · mosaico que se expande (2026-10-18, el mosaico «M3» que eligió Jose)
   Solo ≤ 900 px: reemplaza la franja «Marcas con las que trabajamos» (.brands) por un mosaico de 2 columnas; al tocar una marca se expande a todo el
   ancho con su texto y «Cotizar con …» (WhatsApp). Título marcado con barra de color, rótulo y titular grande. En escritorio no se ve.
   No se indica qué servicio instala cada marca (sin confirmar). Deshacer: borrar este bloque, el div .mm de index.html y su script
   (respaldos/*.antes-marcas-2026-10-18.*)
   ═══════════════════════════════════════════════ */
.mm { display: none; }
@media (max-width: 900px) {
  
  body #nosotros .mm { display: block; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
  .mm-head { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
  .mm-bar { border-radius: 6px; background: linear-gradient(var(--blue), var(--green)); }
  .mm-eyebrow { margin: 0 0 6px; font: 700 12px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
  .mm-head h3 { margin: 0; font: 800 clamp(26px, 7.4vw, 32px)/1.08 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
  .mm-sub { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
  .mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mm-t { position: relative; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out); }
  .mm-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 12px 40px 12px 14px; border: 0; background: none; text-align: left; font: 800 16px/1.15 var(--font-display); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mm-btn:active { transform: scale(.98); }
  .mm-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 16px; }
  .mm-m { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font: 800 17px var(--font-display); transition: background .3s, color .3s; }
  .mm-n { min-width: 0; }
  .mm-mas { position: absolute; right: 12px; top: 16px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 700 16px/1 var(--font-text); transition: transform .35s var(--ease-out), background .3s, color .3s; }
  .mm-c { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s cubic-bezier(.77, 0, .175, 1), visibility 0s linear .4s; }
  .mm-c > div { overflow: hidden; padding: 0 14px; }
  .mm-c p { margin: 4px 0 12px; color: var(--on-navy); font-size: 14.5px; line-height: 1.45; opacity: 0; transition: opacity .3s var(--ease-out); }
  .mm-c .btn { margin-bottom: 14px; opacity: 0; transition: opacity .3s var(--ease-out); }
  .mm-t.mm-cerrando { grid-column: 1 / -1; }   /* al cerrar sigue de ancho completo hasta que termina de plegarse (index.html, cerrar) */
  .mm-t.open { grid-column: 1 / -1; background: var(--navy); border-color: var(--navy); box-shadow: 0 14px 30px -16px rgba(10, 37, 64, .6); }
  .mm-t.open .mm-btn { color: var(--bg); }
  .mm-t.open .mm-m { background: rgba(255, 255, 255, .14); color: var(--bg); }
  .mm-t.open .mm-mas { transform: rotate(45deg); background: rgba(255, 255, 255, .2); color: var(--bg); }
  .mm-t.open .mm-c { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s cubic-bezier(.77, 0, .175, 1), visibility 0s; }
  .mm-t.open .mm-c p, .mm-t.open .mm-c .btn { opacity: 1; transition-delay: .12s; }
  /* Al abrir, mientras la marca crece a lo ancho, su texto sigue plegado (index.html, abrir; 2026-10-18) */
  .mm-t.open.mm-abriendo .mm-c { grid-template-rows: 0fr; visibility: hidden; }
  .mm-t.open.mm-abriendo .mm-c p, .mm-t.open.mm-abriendo .mm-c .btn { opacity: 0; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-t, .mm-mas, .mm-c, .mm-c p, .mm-c .btn { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ═══════════════════════════════════════════════
   «DATOS DE LA EMPRESA» DESPLEGABLE EN CELULAR (2026-10-18, diseño D1 que eligió Jose entre tres)
   Jose: «déjalo como una pestaña que se despliegue… hay mucha información y me aburre bajar tanto al siguiente contenedor».
   Solo ≤ 900 px: la ficha queda cerrada como una tarjeta de una línea (ícono de edificio, «Datos de la empresa», «+»), en la
   misma familia que el mosaico de marcas; al tocarla se vuelve marino y despliega razón social, RUT y contacto (facturación,
   cobertura y horario ya están en los chips verdes de arriba). En escritorio el botón no aparece y la ficha se ve como antes.
   Script en index.html. Deshacer: borrar este bloque, el botón .emp-btn y el envoltorio .emp-c del div .company y su script
   (respaldos/*.antes-datos-empresa-2026-10-18.*)
   ═══════════════════════════════════════════════ */
.emp-btn { display: none; }
@media (max-width: 900px) {
  body #nosotros .company.emp > h3 { display: none; }
  .emp-btn { -webkit-tap-highlight-color: transparent; cursor: pointer; }
  .emp-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 16px; }
  .emp-c { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s cubic-bezier(.77, 0, .175, 1), visibility 0s linear .4s; }
  .emp-c > div { overflow: hidden; }
  .emp.open .emp-c { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s cubic-bezier(.77, 0, .175, 1), visibility 0s; }
  body #nosotros .company.emp1 { padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); transition: background .3s, border-color .3s, box-shadow .3s; }
  .emp1 .emp-btn { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 12px 52px 12px 14px; border: 0; background: none; text-align: left; }
  .emp1 .emp-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); transition: background .3s, color .3s; }
  .emp1 .emp-ico svg { width: 22px; height: 22px; }
  .emp1 .emp-txt { display: grid; gap: 2px; }
  .emp1 .emp-t { font: 800 17px/1.15 var(--font-display); color: var(--ink); transition: color .3s; }
  .emp1 .emp-s { font-size: 13px; color: var(--muted); transition: color .3s; }
  .emp1 .emp-mas { position: absolute; right: 14px; top: 50%; margin-top: -13px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font: 700 18px/1 var(--font-text); transition: transform .35s var(--ease-out), background .3s, color .3s; }
  .emp1 .emp-c > div { padding: 0 16px; }
  body #nosotros .company.emp1 dl { margin: 2px 0 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
  body #nosotros .company.emp1.open { background: var(--navy); border-color: var(--navy); box-shadow: 0 14px 30px -16px rgba(10, 37, 64, .6); }
  .emp1.open .emp-t { color: var(--bg); } .emp1.open .emp-s { color: var(--on-navy); }
  .emp1.open .emp-ico { background: rgba(255, 255, 255, .14); color: var(--bg); }
  .emp1.open .emp-mas { transform: rotate(45deg); background: rgba(255, 255, 255, .2); color: var(--bg); }
  body #nosotros .company.emp1.open dt { color: var(--on-navy-deep); }
  body #nosotros .company.emp1.open dd, body #nosotros .company.emp1.open dd a { color: var(--bg); }
}
@media (prefers-reduced-motion: reduce) { .emp-c, .emp1, .emp1 .emp-mas, .emp1 .emp-t, .emp1 .emp-s, .emp1 .emp-ico { transition-duration: .01ms !important; } }

/* ═══════════════════════════════════════════════
   «PREGUNTAS FRECUENTES» COMO CONVERSACIÓN EN CELULAR (2026-10-19, diseño F3 que eligió Jose entre tres)
   Solo ≤ 900 px: cada pregunta es un mensaje azul a la derecha y su respuesta una burbuja blanca («IS») a la izquierda; se abre una
   a la vez (script en index.html) con un breve «escribiendo…». El título pasa al estilo de «Marcas reconocidas» (barra, rótulo y titular)
   y se saca «Escríbenos por WhatsApp» (Jose: «no debe contar con tantos ataques de contactarnos»; abajo ya está «Agendar visita gratis»).
   El rótulo y el titular nuevos también se ven en escritorio; la lista de escritorio no cambia.
   Deshacer: borrar este bloque y su script, y devolver el bloque .section-head de #preguntas (respaldos/*.antes-preguntas-2026-10-19.*)
   ═══════════════════════════════════════════════ */

@media (max-width: 900px) {
  #preguntas .faq { display: grid; gap: 10px; padding: 16px 14px 14px; border-radius: 22px; background: var(--blue-soft); }
  #preguntas .faq details, #preguntas .faq details:first-child { border: 0; }
  #preguntas .faq summary { display: block; justify-self: end; margin-left: 44px; padding: 11px 15px; border-radius: 18px 18px 4px 18px; background: var(--blue); color: var(--bg); font: 700 15.5px/1.35 var(--font-text); text-align: left; box-shadow: 0 6px 14px -10px rgba(13, 87, 176, .9); -webkit-tap-highlight-color: transparent; }
  #preguntas .faq summary svg { display: none; }
  #preguntas .faq details { display: grid; }
  #preguntas .faq details p { position: relative; margin: 8px 44px 4px 40px; padding: 11px 15px; border-radius: 18px 18px 18px 4px; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; box-shadow: 0 6px 14px -12px rgba(10, 37, 64, .6); }
  #preguntas .faq details p::before { content: "IS"; position: absolute; left: -38px; bottom: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--bg); font: 800 11px var(--font-display); }
  #preguntas .faq details.escribe p { color: transparent; }
  #preguntas .faq details.escribe p > * { visibility: hidden; }
  #preguntas .faq details.escribe p::after { content: "• • •"; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); letter-spacing: 2px; font-weight: 800; animation: faqPunt 1s infinite; }
  @keyframes faqPunt { 50% { opacity: .3; } }
  #preguntas .faq details:first-child:not([open]) summary::after { content: "Toca para ver la respuesta"; display: block; margin-top: 2px; font-weight: 400; opacity: .75; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { #preguntas .faq details.escribe p::after { animation: none; } }

#preguntas .section-head .faq-eyebrow { margin: 0 0 10px; font: 700 12px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.faq-barra { display: none; }
@media (max-width: 900px) {
  #preguntas .faq-head { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 14px; margin-bottom: 22px; }
  .faq-barra { display: block; border-radius: 6px; background: linear-gradient(var(--blue), var(--green)); }
  #preguntas .faq-head h2 { font: 800 clamp(26px, 7.4vw, 32px)/1.08 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
  #preguntas .faq-head .faq-sub { margin-top: 8px; font-size: 15px; color: var(--muted); }
}

/* ── «Así funciona» · opción A «Lista viva» (2026-10-19): el paso activo se abre en tarjeta blanca; teléfono nítido con luz; barra de avance.
   Solo estilos. Deshacer: borrar este bloque (respaldos/sitio.antes-asi-lista-viva-2026-10-19.css) ── */
@media (min-width: 901px) and (min-height: 640px) {
  
  
  
  body #como-funciona.how-scroll .step:last-child .step-num { -webkit-text-stroke: 0; }
  
  
  /* pasos ya vistos: número con visto suave */
  body #como-funciona[data-paso="2"] .step:nth-child(1) .step-num, body #como-funciona[data-paso="3"] .step:nth-child(-n+2) .step-num,
  body #como-funciona[data-paso="4"] .step:nth-child(-n+3) .step-num { background: rgba(79, 210, 106, .22); color: var(--green-light); }
  /* paso activo: tarjeta blanca con su descripción */
  body #como-funciona[data-paso="1"] .step:nth-child(1), body #como-funciona[data-paso="2"] .step:nth-child(2),
  body #como-funciona[data-paso="3"] .step:nth-child(3), body #como-funciona[data-paso="4"] .step:nth-child(4) {
    background: var(--bg); border-color: var(--bg); box-shadow: 0 24px 50px -24px #000; padding-top: clamp(12px, 2.2svh, 19px); padding-bottom: clamp(12px, 2.2svh, 19px);
  }
  body #como-funciona[data-paso="1"] .step:nth-child(1) h3, body #como-funciona[data-paso="2"] .step:nth-child(2) h3,
  body #como-funciona[data-paso="3"] .step:nth-child(3) h3, body #como-funciona[data-paso="4"] .step:nth-child(4) h3 { color: var(--navy); }
  body #como-funciona[data-paso="1"] .step:nth-child(1) .step-num, body #como-funciona[data-paso="2"] .step:nth-child(2) .step-num,
  body #como-funciona[data-paso="3"] .step:nth-child(3) .step-num, body #como-funciona[data-paso="4"] .step:nth-child(4) .step-num { background: var(--green); color: var(--bg); -webkit-text-stroke: 0; }
  body #como-funciona[data-paso="1"] .step:nth-child(1) p, body #como-funciona[data-paso="2"] .step:nth-child(2) p,
  body #como-funciona[data-paso="3"] .step:nth-child(3) p, body #como-funciona[data-paso="4"] .step:nth-child(4) p {
    position: static; grid-column: 2; grid-row: 2; width: auto; height: auto; margin: 6px 0 0; overflow: visible; clip: auto; white-space: normal;
    max-width: none; font-size: clamp(15px, 2svh, 17px); line-height: 1.5; color: var(--text); opacity: 1; transform: none;
  }
  /* teléfono nítido, con luz y un giro leve; la escena 1 ya no se ve borrosa */
  
  body #como-funciona.how-scroll .how-scenes::before {
    content: ""; position: absolute; left: 50%; top: 46%; width: min(460px, 90%); height: 78%; transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(47, 125, 224, .42), transparent); filter: blur(28px); pointer-events: none;
  }
  
  
  .how-hint { left: 50%; right: auto; transform: translateX(-50%); width: max-content; bottom: 0; font-size: 17px; }
  body #como-funciona.how-scroll .how-scenes::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: min(330px, 80%);
    height: 5px;
    transform: translateX(-50%);
    border-radius: 5px;
    background: linear-gradient(90deg, var(--green-light) var(--av, 0%), rgba(255, 255, 255, .18) var(--av, 0%));
    transition: background .3s;
    display: none;
  }
  body #como-funciona[data-paso="1"] .how-scenes { --av: 25%; } body #como-funciona[data-paso="2"] .how-scenes { --av: 50%; }
  body #como-funciona[data-paso="3"] .how-scenes { --av: 75%; } body #como-funciona[data-paso="4"] .how-scenes { --av: 100%; }
}

/* ── «Así funciona» · teléfono realista con pantallas que cambian por paso (2026-10-20). Solo escritorio.
   Deshacer: restaurar respaldos/index.antes-telefono-real-2026-10-20.html + sitio.antes-telefono-real-2026-10-20.css ── */
@media (min-width: 901px) and (min-height: 640px) {
  body #como-funciona.how-scroll { --phh: calc(740px * var(--telk, 1)); }
  .how-scp { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; z-index: 1; }
  .how-scp .how-phone { position: relative; width: 352px; height: 740px; transform: scale(var(--telk, 1)); transform-origin: center; flex: none; border-radius: 56px; padding: 11px; background: var(--navy-deep); box-shadow: 0 40px 80px -30px #000, 0 0 0 2px rgba(255, 255, 255, .14), inset 0 0 0 2px var(--navy-2); }
  .how-scp .how-scr { position: relative; display: block; border-radius: 45px; background: var(--bg-soft); }
  /* botones laterales del teléfono */
  .how-scp .how-phone::before { content: ""; position: absolute; left: -4px; top: 21%; width: 4px; height: 56px; border-radius: 4px 0 0 4px; background: var(--navy-2); box-shadow: 0 74px var(--navy-2); }
  .how-scp .how-phone::after { content: ""; position: absolute; right: -4px; top: 27%; width: 4px; height: 86px; border-radius: 0 4px 4px 0; background: var(--navy-2); }
  /* barra de estado e isla */
  .how-sb { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 38px; padding: 0 26px 0 28px; display: flex; align-items: center; justify-content: space-between; color: var(--bg); font: 700 13px var(--font-text); pointer-events: none; }
  .how-isl { position: absolute; left: 50%; top: 9px; width: 92px; height: 24px; border-radius: 99px; background: var(--navy-deep); transform: translateX(-50%); }
  .how-ic { display: flex; align-items: center; gap: 5px; }
  .how-ic svg { height: 11px; width: auto; fill: currentColor; }
  .how-home { position: absolute; z-index: 6; bottom: 8px; left: 50%; width: 118px; height: 5px; border-radius: 5px; background: var(--navy); opacity: .55; transform: translateX(-50%); }
  /* cabecera */
  .how-scp .how-bar { position: relative; z-index: 3; background: var(--navy); padding: 44px 14px 12px 8px; gap: 8px; transition: background .4s var(--ease-out); }
  #como-funciona:not([data-paso]) .how-bar, #como-funciona[data-paso="0"] .how-bar, #como-funciona[data-paso="1"] .how-bar { background: var(--navy-2); }
  .how-bk { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .how-ttl { position: relative; flex: 1; height: 40px; margin-left: 4px; }
  .how-tt { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
  .how-tt small { display: block; }
  #como-funciona:not([data-paso]) .how-t1, #como-funciona[data-paso="0"] .how-t1, #como-funciona[data-paso="1"] .how-t1,
  #como-funciona[data-paso="2"] .how-t2, #como-funciona[data-paso="3"] .how-t3, #como-funciona[data-paso="4"] .how-t4 { opacity: 1; transform: none; }
  /* pantallas */
  .how-pn {
    position: absolute; top: 96px; bottom: 0; left: 0; right: 0; padding: 16px 16px 38px; display: flex; flex-direction: column; gap: 10px;
    opacity: 0; transform: translateX(60%); pointer-events: none; transition: transform .55s var(--ease-out), opacity .4s var(--ease-out);
  }
  #como-funciona[data-paso="2"] .how-pn1, #como-funciona[data-paso="3"] .how-pn1, #como-funciona[data-paso="3"] .how-pn2,
  #como-funciona[data-paso="4"] .how-pn1, #como-funciona[data-paso="4"] .how-pn2, #como-funciona[data-paso="4"] .how-pn3 { transform: translateX(-40%); }
  #como-funciona:not([data-paso]) .how-pn1, #como-funciona[data-paso="0"] .how-pn1, #como-funciona[data-paso="1"] .how-pn1,
  #como-funciona[data-paso="2"] .how-pn2, #como-funciona[data-paso="3"] .how-pn3, #como-funciona[data-paso="4"] .how-pn4 { opacity: 1; transform: none; }
  /* 1 · chat */
  .how-pn1 { padding: 12px 12px 38px; gap: 10px; background: var(--warn-soft) radial-gradient(rgba(10, 37, 64, .05) 1.2px, transparent 1.4px) 0 0 / 18px 18px; }
  .how-day { align-self: center; padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .85); color: var(--muted); font: 700 11px var(--font-text); letter-spacing: .06em; }
  .how-pn1 .how-bub { max-width: 86%; }
  .how-bub small u { text-decoration: none; color: var(--blue-light); letter-spacing: -2px; margin-left: 2px; }
  .how-inp { margin-top: auto; display: flex; align-items: center; gap: 8px; }
  .how-ibox { flex: 1; padding: 11px 16px; border-radius: 99px; background: var(--bg); color: var(--on-navy-deep); font: 400 15px var(--font-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
  .how-mic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--green); }
  .how-mic svg { width: 21px; height: 21px; fill: var(--bg); }
  /* 2 · agenda */
  .how-sec { font: 800 15px var(--font-display); color: var(--navy); margin-top: 2px; }
  .how-mes { margin-top: -6px; color: var(--muted); font: 600 13px var(--font-text); }
  .how-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
  .how-cal div { text-align: center; padding: 10px 0; border-radius: 12px; background: var(--bg); color: var(--text); font: 800 17px var(--font-display); box-shadow: 0 1px 2px rgba(10, 37, 64, .1); }
  .how-cal div span { display: block; margin-bottom: 2px; font: 600 10px var(--font-text); letter-spacing: .06em; color: var(--on-navy-deep); }
  .how-cal .a { background: var(--green); color: var(--bg); }
  .how-cal .a span { color: var(--green-light); }
  .how-hrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .how-hrs span { text-align: center; padding: 10px 0; border-radius: 10px; background: var(--bg); color: var(--text); font: 700 15px var(--font-text); box-shadow: 0 1px 2px rgba(10, 37, 64, .1); }
  .how-hrs .a { background: var(--blue-soft); color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
  .how-pc { background: var(--bg); border-radius: 16px; padding: 4px 16px; box-shadow: 0 8px 24px -16px rgba(10, 37, 64, .5); }
  .how-pc2 { margin-top: 2px; }
  .how-r2 { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--blue-soft); font: 600 15px var(--font-display); color: var(--navy); }
  .how-r2:last-child { border-bottom: 0; }
  .how-r2 em { margin-left: auto; font: 500 12.5px var(--font-text); color: var(--muted); font-style: normal; white-space: nowrap; }
  .how-mu2 { color: var(--text); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
  .how-tk { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); }
  .how-tk svg { width: 14px; height: 14px; fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .how-tk-g { background: var(--blue-soft); } .how-tk-g svg { stroke: var(--muted); stroke-width: 2.2; }
  .how-bg { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--green-soft); color: var(--green); font: 700 12px var(--font-text); }
  .how-bt { margin-top: auto; text-align: center; padding: 15px; border-radius: 12px; background: var(--green); color: var(--bg); font: 800 16px var(--font-display); box-shadow: 0 10px 20px -12px var(--green); }
  /* 3 · propuesta con documento y botón rojo */
  .how-paper { flex: 1; min-height: 0; padding: 14px 16px; border-radius: 10px; background: var(--bg); box-shadow: 0 14px 30px -16px rgba(10, 37, 64, .55), 0 0 0 1px var(--line); overflow: hidden; }
  .how-ph2 { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px solid var(--navy); }
  .how-ph2 b { flex: 1; font: 800 14px var(--font-display); letter-spacing: .08em; color: var(--navy); }
  .how-ph2 img { border-radius: 50%; }
  .how-pdf { display: inline-grid; place-items: center; padding: 3px 7px; border-radius: 5px; background: var(--danger); color: var(--bg); font: 800 10px var(--font-text); letter-spacing: .04em; }
  .how-pl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
  .how-pl span { font: 700 12px var(--font-text); color: var(--navy); }
  .how-pl i { display: block; height: 7px; border-radius: 5px; background: var(--line); }
  .how-pl i.s { width: 62%; }
  .how-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg); box-shadow: 0 8px 24px -16px rgba(10, 37, 64, .5); }
  .how-pdf-b { width: 42px; height: 48px; border-radius: 8px; padding: 0 0 6px; place-items: end center; font-size: 12px; }
  .how-file b { display: block; font: 800 15px var(--font-display); color: var(--navy); }
  .how-file em { font: 500 12.5px var(--font-text); color: var(--muted); font-style: normal; }
  .how-bt-r { margin-top: 0; background: var(--danger); color: var(--bg); box-shadow: 0 10px 20px -12px var(--danger); }
  /* 4 · instalación */
  .how-ok { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 6px; text-align: center; }
  .how-okc { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 10px rgba(23, 163, 74, .14); margin-bottom: 8px; }
  .how-okc svg { width: 32px; height: 32px; fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .how-ok b { font: 800 20px var(--font-display); color: var(--navy); }
  .how-ok em { font: 500 14px var(--font-text); color: var(--muted); font-style: normal; }
  /* aviso «Desliza» y barra de avance, debajo del teléfono */
  body #como-funciona.how-scroll .how-hint { top: calc(50% + var(--phh) / 2 + 12px); bottom: auto; }
  
  #como-funciona[data-paso="0"] .how-scp { opacity: 1; filter: none; }
}

/* ── «Así funciona» · desplazamiento (2026-10-20): los 4 pasos son puntos de imán; sin pantalla vacía inicial.
   Deshacer: restaurar respaldos/*.antes-scroll-asi-2026-10-20.* ── */
.how-snap { display: none; }
@media (min-width: 901px) and (min-height: 640px) {
  body #como-funciona.how-scroll { position: relative; }
  body #como-funciona.how-scroll .how-snap {
    display: block; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none;
    top: calc((100% - (100svh - var(--header-h))) * var(--i) / 3);
    scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: -16px;
  }
  /* el aviso «Desliza» se ve solo en el paso 1 */
  #como-funciona[data-paso="1"] .how-hint { opacity: 1; }
  #como-funciona:not([data-paso="1"]) .how-hint { opacity: 0; }
}

/* ── «Por qué elegir» · diseño 2 «editorial con ficha formal» (2026-10-20). Solo escritorio (≥ 901 px).
   Móvil intacto. Deshacer: restaurar respaldos/*.antes-porque-2026-10-20.* ── */
.why-tag, .why-d { display: none; }
.why-nums { display: none; }
@media (min-width: 901px) {
  body #nosotros > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; grid-template-rows: auto 1fr; align-items: start; }
  body #nosotros .section-head { grid-column: 1; grid-row: 1; margin: 0 0 22px; margin-bottom: 18px; }
  body #nosotros .why-tag { display: block; margin-bottom: 12px; font: 700 13px/1 var(--font-text); letter-spacing: .14em; color: var(--blue); }
  body #nosotros .why-m { display: none; }
  body #nosotros .why-d { display: inline; }
  body #nosotros .section-head h2 {
    line-height: 1.05;
    letter-spacing: -.03em;
    max-width: 12em;
    font-size: clamp(32px, 3vw, 42px);
  }
  body #nosotros .section-head p { max-width: 30em; font-size: 16.5px; line-height: 1.5; }
  body #nosotros .why-nums {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 0;
    align-self: start;
    display: none;
  }
  body #nosotros .why-nums div { border-radius: 14px; background: var(--bg); box-shadow: 0 1px 2px rgba(10, 37, 64, .1); }
  body #nosotros .why-nums b { display: block; font: 800 26px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--blue); white-space: nowrap; }
  body #nosotros .why-nums span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--muted); }
  body #nosotros .why-chips { display: none; }
  body #nosotros .why-grid { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; gap: 14px; display: contents; }
  body #nosotros .why-list { max-width: none; grid-column: 2; grid-row: 1 / span 2; align-self: start; gap: 10px; }
  body #nosotros .why-list > div {
    grid-template-columns: 52px 1fr;
    column-gap: 18px;
    border: 0;
    background: var(--bg);
    box-shadow: 0 10px 26px -18px rgba(10, 37, 64, .55);
  }
  body #nosotros .why-list svg {
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
    box-shadow: none;
    width: 46px;
    height: 46px;
    padding: 11px;
  }
  body #nosotros .why-list h3 { margin-top: 0; font-size: 19px; }
  body #nosotros .why-list p { margin-top: 2px; font-size: 14.5px; line-height: 1.45; }
  /* ficha formal */
  body #nosotros .company {
    width: 100%;
    max-width: none;
    box-shadow: none;
    grid-column: 1 / -1;
    grid-row: 3;
    align-self: stretch;
    margin-top: 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 28px;
    align-items: start;
    padding: 16px 24px;
    background: var(--bg);
    border: 1px solid var(--on-navy);
    border-radius: 16px;
    overflow: visible;
  }
  body #nosotros .company > h3 {
    justify-content: space-between;
    display: block;
    grid-column: 1;
    margin: 0;
    padding: 4px 0 0;
    background: none;
    color: var(--navy);
    font: 800 16px/1.3 var(--font-display);
    white-space: nowrap;
  }
  body #nosotros .company > h3::after { content: none; }
  body #nosotros .company dl {
    display: grid;
    grid-template-columns: 1.9fr 1fr 1.3fr 1.5fr;
    column-gap: 24px;
    row-gap: 4px;
    padding: 0;
    margin: 0;
  }
  body #nosotros .company dl div { display: block; padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--blue-soft); }
  
  body #nosotros .company dt { font-size: 12.5px; }
  body #nosotros .company dd { font: 700 14.5px/1.35 var(--font-display); font-size: 14px; }
  body #nosotros .brands { grid-column: 1 / -1; grid-row: 4; margin-top: 26px; display: none; }
}

/* ── «Por qué nosotros» · pestañas + opiniones siempre visibles (2026-10-20). Solo escritorio (≥ 901 px).
   Móvil intacto: las tres secciones se siguen viendo como antes. Deshacer: restaurar respaldos/*.antes-pestanas-2026-10-20.* ── */
.pn-bar, .test-more, .faq-panel { display: none; }
@media (min-width: 901px) {
  .pn-group { position: relative; background: var(--color-fondo-alt); }
  .pn-bar { position: absolute; z-index: 4; left: 0; right: 0; pointer-events: none; }
  .pn-tabs { display: flex; justify-content: flex-end; gap: 4px; width: max-content; margin-left: auto; padding: 5px; border-radius: 99px; background: var(--bg); box-shadow: 0 1px 3px rgba(10, 37, 64, .22); pointer-events: auto; }
  .pn-tab { padding: 11px 20px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: 700 16px/1 var(--font-display); white-space: nowrap; cursor: pointer; transition: background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
  .pn-tab:hover { color: var(--navy); }
  .pn-tab[aria-pressed="true"] { background: var(--navy); color: var(--bg); box-shadow: 0 8px 18px -10px var(--navy); }
  .pn-tab:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
  .pn-group[data-tab="1"] #preguntas, .pn-group[data-tab="2"] #nosotros { display: none; }
  .pn-group #nosotros, .pn-group #preguntas, .pn-group #testimonios { background: transparent; }
  
  .pn-group #testimonios { padding-top: 8px; }
  .pn-group[data-tab="1"] #nosotros, .pn-group[data-tab="2"] #preguntas { animation: pnEntra .28s var(--ease-out); }
  @keyframes pnEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Preguntas: lista + respuesta grande */
  body #preguntas .faq-grid { display: grid; }
  body #preguntas .faq-head { grid-column: 1 / -1; margin: 0; }
  body #preguntas .faq-head h2 { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.03em; }
  body #preguntas .faq-eyebrow { margin: 0 0 12px; font: 700 13px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
  body #preguntas .faq { display: flex; flex-direction: column; counter-reset: faq; align-items: flex-end; gap: 10px; }
  body #preguntas .faq details, body #preguntas .faq details:first-child { border: 0; }
  body #preguntas .faq summary {
    gap: 14px;
    justify-content: flex-start;
    counter-increment: faq;
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 13px 20px;
    border-radius: 20px 20px 5px 20px;
    background: var(--blue);
    color: var(--bg);
    box-shadow: none;
    opacity: .55;
    font: 700 17px/1.3 var(--font-display);
    transition: opacity .25s var(--ease-out), box-shadow .25s var(--ease-out);
  }
  
  body #preguntas .faq summary::before {
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--muted);
    font: 800 13px/1 var(--font-text);
    content: none;
    display: none;
  }
  body #preguntas .faq summary svg { display: none; }
  body #preguntas .faq summary:hover { background: var(--blue); opacity: .85; }
  body #preguntas .faq details.sel summary {
    background: var(--blue);
    color: var(--bg);
    opacity: 1;
    box-shadow: 0 10px 20px -10px var(--blue);
  }
  body #preguntas .faq details.sel summary::before { background: var(--green); color: var(--bg); }
  body #preguntas .faq details p { display: none; }
  body #preguntas .faq details::details-content { display: none; }
  .faq-panel { display: flex; }
  .faq-k { font: 700 13px/1 var(--font-text); letter-spacing: .14em; color: var(--blue); }
  .faq-panel h3 { margin: 8px 0 12px; font: 800 25px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--navy); }
  .faq-panel p { margin: 0; line-height: 1.55; color: var(--text); max-width: none; font-size: 18px; }
  .faq-panel p a { color: var(--blue); }
  .faq-wa { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .faq-wa small { color: var(--muted); font-size: 14.5px; }

  /* Opiniones: franja siempre visible (3 tarjetas) */
  body #testimonios .wrap { row-gap: 16px; column-gap: 16px; }
  body #testimonios .section-head { display: flex; justify-content: space-between; align-items: center; margin: 0; max-width: none; width: 100%; }
  body #testimonios .section-head h2 { letter-spacing: -.02em; font-size: var(--h2-d); }
  body #testimonios .section-head p { display: none; }
  .test-more { background: none; border: 0; padding: 0; font: 700 15px/1 var(--font-display); color: var(--blue); cursor: pointer; }
  #testimonios.tiene-mas .test-more { display: inline; }
  #testimonios .test-card:nth-child(n+4) { display: none; }
  #testimonios.todas .test-card:nth-child(n+4) { display: flex; }
  body #testimonios .test-action { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 2px; align-items: center; text-align: left; justify-items: start; }
  body #testimonios .test-action-t { margin: 0; grid-column: 1; grid-row: 1; }
  body #testimonios .test-action-p { margin: 0; grid-column: 1; grid-row: 2; }
  body #testimonios .test-action .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  /* sin opiniones publicadas: solo una invitación discreta */
  #testimonios:has(.test-empty:not([hidden])) .section-head, #testimonios:has(.test-empty:not([hidden])) .test-empty { display: none; }
  #testimonios:has(.test-empty:not([hidden])) .test-action { padding: 22px 28px; border-radius: 20px; background: var(--blue-soft); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .pn-group[data-tab="1"] #nosotros, .pn-group[data-tab="2"] #preguntas { animation: none; } }

/* ── «Por qué nosotros» · ajuste (2026-10-20): pestaña 1 más ordenada y compacta (ficha de la empresa completa, en franja);
   en «Preguntas» el menú oculta «Agendar visita». Solo escritorio. Deshacer: respaldos/*.antes-pestanas-ajuste-2026-10-20.* ── */
@media (min-width: 901px) {
  body #nosotros > .wrap { row-gap: 0; }
  
  
  
  
  
  
  
  
  
  
  body #nosotros .company dl div, body #nosotros .company dl div:nth-child(1) {
    border-bottom: 0;
    grid-column: auto;
    grid-row: auto;
    padding: 2px 0;
    border: 0;
  }
  body #nosotros .company dl div:nth-child(6) dd { font-size: 13.5px; }
  
}

/* ── «Preguntas» · diseño 3 de conversación (2026-10-20): preguntas como burbujas azules a la izquierda y respuesta grande con avatar.
   Solo escritorio. Deshacer: restaurar respaldos/*.antes-preguntas-chat-2026-10-20.* ── */
@media (min-width: 901px) {
  body #preguntas .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 40px; }
  
  body #preguntas .faq details { align-self: flex-end; max-width: 100%; }
  
  
  
  
  .faq-panel { flex-direction: row; align-items: flex-start; gap: 14px; padding: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; }
  .faq-av { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--bg); font: 800 15px/1 var(--font-text); }
  .faq-b { padding: 30px 34px 26px; border-radius: 6px 26px 26px 26px; background: var(--bg); box-shadow: 0 20px 44px -26px rgba(10, 37, 64, .7); animation: pnEntra .28s var(--ease-out); }
  
  
  .faq-panel .faq-wa { display: block; margin: 20px 0 0; padding: 0; font-size: 14.5px; color: var(--muted); }
  .faq-panel .faq-wa a { font-weight: 700; color: var(--blue); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .faq-b { animation: none; } }

/* ── «Por qué elegirnos» · cabe en una pantalla (2026-10-20): tarjetas compactas con las marcas dentro, ficha de la empresa en 2 filas
   con un dato más (giro). Solo escritorio. Deshacer: restaurar respaldos/*.antes-tab1-cabe-2026-10-20.* ── */
.why-brands, .emp-giro { display: none; }
@media (min-width: 901px) {
  
  .pn-group #nosotros, .pn-group #preguntas { padding-bottom: 36px; }
  
  
  
  body #nosotros .why-nums div { padding: 14px 16px 12px; }
  
  body #nosotros .why-list > div { padding: 14px 20px; border-radius: 16px; }
  
  
  
  body #nosotros .why-brands { display: flex; flex-wrap: wrap; gap: 5px 6px; grid-column: 2; margin: 8px 0 0; padding: 0; list-style: none; }
  body #nosotros .why-brands li { padding: 3px 9px; border-radius: 7px; background: var(--blue-soft); color: var(--navy); font: 700 12px/1.4 var(--font-display); }
  
  
  
  body #nosotros .company dl div:nth-child(5) { grid-column: 4; grid-row: 1; }
  body #nosotros .company dl div:nth-child(6) { grid-column: 4; grid-row: 2; }
  body #nosotros .company dl .emp-giro { display: block; grid-column: 1 / span 2; grid-row: 2; padding: 6px 0; border: 0; }
  
  
}
@media (max-width: 900px) { body #nosotros .company dl .emp-giro, body #nosotros .why-brands { display: none; } }

/* ── Continuidad entre secciones (2026-10-20, aprobado por Jose). Solo escritorio (≥ 901 px). Móvil intacto.
   Un solo tamaño de título (44 px, baja en pantallas bajas), una etiqueta sobre cada título, 96 px de aire, ritmo oscuro/claro,
   cierre con la cuadrícula de «Cómo funciona», pie separado, «Por qué nosotros» simplificado.
   Deshacer: restaurar respaldos/*.antes-continuidad-2026-10-20.* ── */
.eyebrow { display: none; }
@media (min-width: 901px) {
  :root { --h2-d: clamp(34px, 5.4svh, 44px); }
  .eyebrow { display: block; margin: 0 0 12px; font: 700 13px/1 var(--font-text); letter-spacing: .14em; color: var(--blue); }
  .eyebrow--d { color: var(--green-light); }
  html:has(#servicios > .ed) #servicios .section-head h2 { font-size: var(--h2-d); line-height: 1.05; letter-spacing: -.03em; }
  html:has(#servicios > .ed) #servicios .eyebrow { margin-bottom: 8px; }
  body #como-funciona.how-scroll .section-head h2 { font-size: var(--h2-d); }
  body #nosotros .section-head h2, body #preguntas .faq-head h2 { font-size: var(--h2-d); }
  
  .closing h2 { font-size: var(--h2-d); line-height: 1.05; }
  .pn-group #nosotros, .pn-group #preguntas { padding-top: 96px; }
  .pn-group #testimonios { padding-bottom: 96px; }
  .pn-bar { top: 20px; }
  /* cierre: misma cuadrícula que «Cómo funciona»; pie con línea verde fina */
  body .closing {
    background:
      linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 56px 56px,
      radial-gradient(ellipse at 15% 0%, var(--navy-2) 0, var(--navy) 70%);
  }
  body footer { border-top: 2px solid rgba(79, 210, 106, .55); }

  /* Por qué nosotros: sin cifras repetidas y ficha en una línea */
  
  
  
  
  body #nosotros .company .emp-c { grid-column: 2; display: block; visibility: visible; }
  body #nosotros .company .emp-c > div { overflow: visible; padding: 0; }
  
  
  body #nosotros .company dl div:nth-child(1) { grid-column: 1; grid-row: 1; }
  body #nosotros .company dl div:nth-child(2) { grid-column: 2; grid-row: 1; }
  body #nosotros .company dl div:nth-child(3) { grid-column: 3; grid-row: 1; }
  
  body #nosotros .company dl div:nth-child(4), body #nosotros .company dl div:nth-child(6), body #nosotros .company dl .emp-giro { display: none; }
  body #nosotros .company.ver-todo dl div:nth-child(4) { display: block; grid-column: 3; grid-row: 2; }
  body #nosotros .company.ver-todo dl div:nth-child(6) { display: block; grid-column: 4; grid-row: 2; }
  body #nosotros .company.ver-todo dl .emp-giro { display: block; grid-column: 1 / span 2; grid-row: 2; }
  .emp-ver { display: inline-flex; gap: 6px; align-items: center; grid-column: 3; margin: 0; padding: 4px 0 0; border: 0; background: none; font: 700 14px/1.3 var(--font-display); color: var(--blue); white-space: nowrap; cursor: pointer; }
  .emp-ver:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

  /* Opiniones: la franja solo aparece con 3 reales; antes, una invitación discreta */
  body .pn-group #testimonios .section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  body .pn-group #testimonios .section-head .eyebrow { grid-column: 1; }
  body .pn-group #testimonios .section-head h2 { grid-column: 1; }
  body .pn-group #testimonios .test-more { grid-column: 2; grid-row: 1 / span 2; }
  body .pn-group #testimonios:not(.tiene-3) .section-head, body .pn-group #testimonios:not(.tiene-3) .test-card, body .pn-group #testimonios:not(.tiene-3) .test-empty, body .pn-group #testimonios:not(.tiene-3) .test-loading { display: none; }
  body .pn-group #testimonios:not(.tiene-3) { padding-top: 0; padding-bottom: 72px; }
  body .pn-group #testimonios:not(.tiene-3) .test-action { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; text-align: center; }
  body .pn-group #testimonios:not(.tiene-3) .test-action > p { margin: 0; }
  body .pn-group #testimonios:not(.tiene-3) .test-action-t { font: 400 15px/1.4 var(--font-text); color: var(--muted); }
  body .pn-group #testimonios:not(.tiene-3) .test-action-p { display: none; }
  body .pn-group #testimonios:not(.tiene-3) .test-action .btn { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; font: 700 15px/1.4 var(--font-display); color: var(--blue); }
}
@media (max-width: 900px) { .emp-ver { display: none; } }

/* ── «Por qué nosotros» SIN PESTAÑAS (2026-10-20, alternativa B que eligió Jose): «Por qué nosotros», «Preguntas» y opiniones se ven
   seguidos en escritorio; el menú tiene «Preguntas». Solo ≥ 901 px. Deshacer: respaldos/*.antes-sin-pestanas-2026-10-20.* ── */
@media (min-width: 901px) {
  .pn-bar { display: none !important; }
  .pn-group[data-tab] #nosotros, .pn-group[data-tab] #preguntas { display: block !important; animation: none; }
  .pn-group #nosotros { padding-top: 96px; padding-bottom: 40px; }
  .pn-group #preguntas { padding-top: 56px; padding-bottom: 56px; }
  .pn-group #nosotros + #preguntas { border-top: 1px solid var(--line, var(--line)); }
}

/* ── FONDOS CON LUZ Y MOVIMIENTO (2026-10-20, elegidos por Jose): solo escritorio (≥ 901 px).
   Oscuros («Así funciona» y «Contacto»): «Luz cálida del interior» (img/fondo-luz-calida.webp, luces de la foto de la portada muy
   desenfocadas) + «Reflejos»: manchas grandes de luz que se desplazan lento. Claros («Por qué nosotros + Preguntas»): luz cálida
   suave + «Sensores»: luces pequeñas que laten con un anillo fino. «Servicios» (edificio 3D) no cambia. Las capas las crea el script
   «Fondos con luz» de index.html. Se detienen con «reducir movimiento». Deshacer: respaldos/*.antes-fondos-2026-10-20.* ── */
.fx-capa { display: none; }
@media (min-width: 901px) {
  body #como-funciona.how-scroll .how-pin, body .closing {
    background: linear-gradient(90deg, rgba(8, 24, 44, .78) 0%, rgba(8, 24, 44, .35) 48%, rgba(8, 24, 44, .05) 100%), url(img/fondo-luz-calida.webp) center / cover, var(--navy-deep);
    isolation: isolate;
  }
  body .closing { position: relative; }
  body .pn-group {
    isolation: isolate;
    background: radial-gradient(ellipse 900px 520px at 92% 0%, rgba(255, 214, 160, .30), transparent 70%),
                radial-gradient(ellipse 760px 520px at 0% 100%, rgba(120, 170, 230, .16), transparent 70%), var(--bg-soft);
  }
  .fx-capa { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .fx-capa i { position: absolute; display: block; border-radius: 50%; will-change: transform, opacity; }

  /* oscuros · reflejos */
  .fx-reflejos { mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, #000 55%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, #000 55%); }
  .fx-reflejos i { width: var(--s); height: var(--s); background: radial-gradient(circle, var(--c), transparent 68%); filter: blur(24px); border-radius: 46% 54% 60% 40% / 50% 42% 58% 50%;
    animation: fxRefleja var(--d) ease-in-out var(--de) infinite alternate; }

  /* claros · sensores */
  .fx-sensores i { width: 5px; height: 5px; background: var(--c); box-shadow: 0 0 6px 1px var(--g); --led: .5; animation: fxLed var(--t) ease-in-out var(--de) infinite; }
  .fx-sensores i::before, .fx-sensores i::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border-radius: 50%; border: 1px solid var(--g); --pk: .45; opacity: 0; animation: fxAnillo var(--d) ease-out var(--de) infinite; }
  .fx-sensores i::after { animation-delay: calc(var(--de) - var(--d) / 2); }
}
@keyframes fxRefleja { 0% { transform: translate(0, 0) rotate(0) scale(1); } 50% { transform: translate(var(--x1), var(--y1)) rotate(40deg) scale(1.15); } 100% { transform: translate(var(--x2), var(--y2)) rotate(-20deg) scale(.92); } }
@keyframes fxLed { 0%, 100% { opacity: calc(var(--led, 1) * .3); } 50% { opacity: var(--led, 1); } }
@keyframes fxAnillo { 0% { transform: scale(.08); opacity: var(--pk, .85); } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-capa i, .fx-capa i::before, .fx-capa i::after { animation: none !important; } .fx-sensores i::before, .fx-sensores i::after { opacity: 0; } }

/* ── Menú de escritorio: en «Servicios» y al llegar a «Contacto» se oculta «Agendar visita» (2026-10-20, pedido de Jose: «que no hayan tantos botones
   verdes»). La clase (cta-oculto) la pone el script «Agendar visita oculto en Servicios y Contacto» de index.html. Solo ≥ 901 px; el espacio se conserva para que
   el menú no salte. Deshacer: respaldos/*.antes-cta-contacto-2026-10-20.* ── */
@media (min-width: 901px) {
  .site-header .header-actions .btn-cta { transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s, background .2s; }
  html.cta-oculto .site-header .header-actions .btn-cta { opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.96); pointer-events: none;
    transition: opacity .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .28s; }
}

/* ── Celular (≤ 760 px): mientras «Agendar por WhatsApp» de «Contacto» está en pantalla se esconde la barra fija de abajo (Agendar visita gratis · teléfono · mensaje), porque el
   contenedor ya tiene esos botones (2026-10-20, pedido de Jose). Baja con su misma animación y vuelve al subir. La clase en-contacto la
   pone el script «Agendar visita oculto en Servicios y Contacto». Deshacer: respaldos/*.antes-barra-contacto-2026-10-20.* ── */
@media (max-width: 760px) {
  html.en-contacto .mobile-bar.is-visible { transform: translateY(110%); pointer-events: none; }
}

/* ═══ SIN TARJETA «FACTURA ELECTRÓNICA» BAJO EL INICIO (2026-10-22, pedido de Jose) ═══
   Escritorio: quedaba una sola tarjeta colgando entre la foto y el fondo blanco. Celular: la línea suelta también se quitó (pedido de
   Jose el mismo día, viéndola en su teléfono). El dato ya está en «Por qué nosotros», «Datos de la empresa» y Preguntas.
   Deshacer: quitar este bloque. */
.hero--casa .facts { display: none; }

/* ═══ CELULAR: SECCIONES ALTERNADAS OSCURO / CLARO (2026-10-22, pedido de Jose: «que no todo sea blanco y plano») ═══
   Orden en celular: Inicio oscuro · Servicios claro · Así funciona oscuro · Por qué nosotros claro · ELIGE LA MARCA OSCURO ·
   Preguntas claro · OPINIONES OSCURO · CONTACTO CLARO · pie oscuro. Solo ≤ 900 px; escritorio sin cambios.
   Deshacer: quitar este bloque y el siguiente («PIE DE PÁGINA DEL CELULAR») o devolver respaldos/*.antes-movil-alternar-pie-2026-10-22.* */
@media (max-width: 900px) {
  /* Elige la marca: banda oscura de borde a borde hasta el final de «Por qué nosotros» */
  #nosotros { padding-bottom: 0 !important; }
  #nosotros .mm { position: relative; z-index: 0; margin-top: 44px; padding: 44px 0 48px; background: var(--navy);
    box-shadow: 0 0 0 100vmax var(--navy); clip-path: inset(0 -100vmax); }
  #nosotros .mm-eyebrow { color: var(--blue-light) !important; }
  #nosotros .mm h3 { color: var(--bg) !important; }
  #nosotros .mm-sub { color: var(--on-navy) !important; }
  #nosotros .mm-t { background: var(--navy-2) !important; border-color: rgba(255,255,255,.16) !important; color: var(--line) !important; box-shadow: none !important; }
  #nosotros .mm-btn { background: transparent !important; color: var(--bg) !important; }
  #nosotros .mm-n { color: var(--bg) !important; }
  #nosotros .mm-m { background: rgba(127,178,255,.16) !important; color: var(--blue-light) !important; }
  #nosotros .mm-mas { background: rgba(255,255,255,.1) !important; color: var(--line) !important; }
  #nosotros .mm-c p { color: var(--line) !important; }

  /* Opiniones: oscuro (mismo fondo que «Así funciona») */
  #testimonios { background: radial-gradient(ellipse at 85% 0%, var(--navy-2) 0, var(--navy) 55%, var(--navy-deep) 100%) !important; }
  #testimonios .section-head h2 { color: var(--bg) !important; }
  #testimonios .section-head p { color: var(--on-navy) !important; }
  #testimonios .eyebrow { color: var(--blue-light) !important; }
  #testimonios .test-more { color: var(--blue-light) !important; }
  #testimonios .test-action { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.22) !important; }
  #testimonios .test-action-t { color: var(--bg) !important; }
  #testimonios .test-action-p { color: var(--on-navy) !important; }
  #testimonios .test-action .btn-outline { background: transparent !important; color: var(--bg) !important; border-color: rgba(255,255,255,.45) !important; }
  /* Sin opiniones publicadas: no se muestra «Lo que dicen nuestros clientes» ni la tarjeta vacía; queda solo la invitación (igual que en escritorio) */
  #testimonios:has(.test-empty:not([hidden])) .section-head, #testimonios:has(.test-empty:not([hidden])) .test-empty { display: none !important; }
  #testimonios:has(.test-empty:not([hidden])) .test-action { margin-top: 0 !important; }

  /* Contacto: claro (el pie sigue oscuro) */
  #contacto.closing { background: var(--bg-soft) !important; color: var(--navy) !important; }
  #contacto .fx-capa { display: none !important; }
  #contacto h2 { color: var(--navy) !important; }
  #contacto p { color: var(--muted) !important; }
  #contacto a:not(.btn) { color: var(--blue) !important; }
  #contacto .btn:not(.btn-cta) { background: var(--bg) !important; color: var(--navy) !important; border-color: var(--on-navy) !important; }
}

/* ═══ PIE DE PÁGINA DEL CELULAR (2026-10-22, diseño 1 «compacto con acordeones», elegido por Jose) ═══
   El HTML es .pie-movil dentro de <footer>; en celular reemplaza al pie de escritorio (.wrap), que sigue igual en > 900 px.
   La barra fija de abajo se esconde desde Contacto hasta el final (script «Agendar visita oculto…», clase en-contacto). */
.pie-movil { display: none; }
@media (max-width: 900px) {
  footer { padding: 0 !important; background: var(--navy-deep) !important; }
  footer > .wrap { display: none !important; }
  .pie-movil { display: block; padding: 40px 20px calc(40px + env(safe-area-inset-bottom)); color: var(--on-navy); font-size: 15px; line-height: 1.55; }
  .pie-movil a { color: inherit; text-decoration: none; }
  .pie-movil ul { list-style: none; margin: 0; padding: 0; }
  .pie-movil svg { display: inline-block; width: 20px; height: 20px; flex: none; }
  .pm-logo { display: inline-flex; padding: 8px 12px; background: var(--bg); border-radius: 12px; }
  .pm-logo img { display: block; height: 34px; width: auto; }
  .pm-about { margin: 16px 0 20px; }
  
  
  
  
  .pm-d { border-bottom: 1px solid rgba(255,255,255,.1); }
  .pm-d summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; color: var(--bg); font-weight: 600; font-size: 16px; cursor: pointer; }
  .pm-d summary::-webkit-details-marker { display: none; }
  .pm-d summary svg { transition: transform .2s ease; }
  .pm-d[open] summary svg { transform: rotate(180deg); }
  .pm-d ul { padding: 0 0 16px; display: grid; gap: 12px; }
  .pm-d a { color: var(--line); }
  .pm-info { margin: 20px 0 0; font-size: 14px; line-height: 2; }
  .pm-info a { color: var(--line); }
  .pm-info svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; color: var(--blue-light); }
  .pm-legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 4px; font-size: 12.5px; color: var(--on-navy-deep); }
  .pm-legal a { text-decoration: underline; }
}
/* La página ya no reserva 76 px abajo para la barra fija: al final (Contacto y pie) la barra está escondida y quedaba una franja blanca bajo el pie */
@media (max-width: 760px) { body { padding-bottom: 0; } }

/* Barra del celular: Agendar + Llamar (el chat se quitó el 2026-11-06; respaldo en respaldos/antes-quitar-chat-2026-11-06/) */
@media (max-width: 760px) {
  .mobile-bar { grid-template-columns: 1fr auto; }
}

/* ═══ Navegación entre páginas (antes navegacion.css) ═══ */
/* Navegación entre «Servicios» y cada servicio: la página del servicio entra de derecha a izquierda y,
   al volver con «Servicios» en las migas, sale de izquierda a derecha. Usa transiciones entre páginas del navegador
   (Chrome y Edge; en otros navegadores se cambia de página sin animación). */
@view-transition { navigation: auto; }
@keyframes nav-entra-der { from { transform: translateX(100%); } to { transform: none; } }
@keyframes nav-sale-der { from { transform: none; } to { transform: translateX(100%); } }
html:active-view-transition-type(adelante)::view-transition-group(root),
html:active-view-transition-type(atras)::view-transition-group(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
html:active-view-transition-type(adelante)::view-transition-old(root) { z-index: 1; animation: none; }
html:active-view-transition-type(adelante)::view-transition-new(root) { z-index: 2; mix-blend-mode: normal; animation: nav-entra-der .45s cubic-bezier(.16, 1, .3, 1) both; }
html:active-view-transition-type(atras)::view-transition-new(root) { z-index: 1; animation: none; }
html:active-view-transition-type(atras)::view-transition-old(root) { z-index: 2; mix-blend-mode: normal; animation: nav-sale-der .45s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none !important; }
}

/* Migas de pan, diseño A: botón «Servicios» en píldora */

/* ═══ Ventana de cada servicio: foto con rótulos, migas, qué incluye, video (antes ventana.css) ═══ */
/* Ventana de cada servicio: foto con rótulos animados (la línea «busca» la pieza, como en el edificio 3D),
   migas de pan con botón «Servicios» y «Qué incluye» en fichas. Se suma a sitio.css; todo va con el prefijo vc-. */
.svc-hero .vc-migas { padding-top: 4px; }
.vc-volver { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); color: var(--navy); font: 700 14px/1 var(--font-display); text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.vc-volver:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.vc-volver:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.vc-volver svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.vc-volver:hover svg { transform: translateX(-2px); }
.svc-hero-grid.vc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; margin-top: 28px; }

.vc-foto { margin: 0; }
.vc-marco { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #cfe0f3; box-shadow: 0 1px 2px rgba(10,37,64,.06), 0 18px 36px -22px rgba(10,37,64,.35); }
.vc-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-marco svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; max-width: none; }
.vc-marco path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1) .3s; }
.vc-marco .vc-halo { stroke: #fff; stroke-width: 5; opacity: .9; }
.vc-marco .vc-trazo { stroke: var(--navy); stroke-width: 1.8; }
.vc-ll.on path { stroke-dashoffset: 0; transition: stroke-dashoffset .75s cubic-bezier(.25, .8, .25, 1) .15s; }
.vc-pt { position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 2.5px solid var(--navy); box-shadow: 0 0 0 3px rgba(255,255,255,.75); transform: scale(0); transition: transform .25s var(--ease-out) .75s; }
.vc-pt.on { transform: scale(1); transition: transform .3s var(--ease-out); }
.vc-tx { position: absolute; z-index: 3; width: max-content; max-width: min(270px, 46%); padding: 14px 18px 16px; background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 1px 2px rgba(10,37,64,.12), 0 12px 26px -14px rgba(10,37,64,.55); opacity: 0; transform: translateX(-14px); text-align: left; transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); }
.vc-tx.der { transform: translateX(14px); }
.vc-tx.on { opacity: 1; transform: none; transition: opacity .35s var(--ease-out) .8s, transform .45s var(--ease-out) .8s; }
.vc-tx .k { display: block; font: 600 12px/1.3 var(--font-text); letter-spacing: .02em; color: #0b4a98; }
.vc-tx .t { display: block; font: 700 19px/1.2 var(--font-display); color: var(--navy); margin-top: 4px; letter-spacing: -.015em; }
.vc-tx .p { display: block; font: 400 14px/1.5 var(--font-text); color: #2a3b50; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.vc-sel { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.vc-sel button { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); font: 600 14px var(--font-text); transition: background-color .2s, border-color .2s, color .2s; }
.vc-sel button:hover { border-color: var(--blue); }
.vc-sel button[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.vc-sel button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.vc-pie { margin-top: 8px; font-size: 13px; color: var(--muted); }

.vc-inc { margin-top: 44px; }
.vc-inc h2 { font: 800 28px/1.15 var(--font-display); color: var(--navy); margin: 0 0 18px; letter-spacing: -.02em; }
.vc-fila { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.vc-fila div { background: var(--green-soft); border-radius: 16px; padding: 18px; font-size: 15px; line-height: 1.45; color: #0a3d10; }
.vc-fila div:nth-child(even) { background: var(--blue-soft); color: #0a2a52; }
.vc-fila svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; display: block; }
.vc-marcas { margin-top: 16px; font-size: 14px; color: var(--muted); }

@media (max-width: 860px) {
  .svc-hero-grid.vc-grid { grid-template-columns: 1fr; gap: 28px; }
  .vc-fila { grid-template-columns: 1fr 1fr; }
}
/* Solo en celular las tarjetas de la foto se achican (en tablet hay espacio para el texto completo) */
@media (max-width: 560px) {
  .vc-tx { padding: 10px 14px 12px; }
  .vc-tx .p { display: none; }
  .vc-tx .t { font-size: 16px; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .vc-marco path, .vc-pt, .vc-tx, .vc-tx.on, .vc-ll.on path { transition: none; } }

/* Video del servicio */
.vc-video { padding: 8px 0 56px; }
.vc-video h2 { font: 800 28px/1.15 var(--font-display); color: var(--navy); margin: 0 0 8px; letter-spacing: -.02em; }
.vc-video p { margin: 0 0 18px; color: var(--muted); }
.vc-video video { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--navy); box-shadow: 0 1px 2px rgba(10,37,64,.06), 0 18px 36px -22px rgba(10,37,64,.35); }

/* ═══ Objetivos táctiles (auditoría Google): en pantallas táctiles los enlaces sueltos del pie y del contacto miden al menos 44 px de alto ═══ */
@media (pointer: coarse) {
  footer li > a, .pm-legal a, .closing-mail a, .company dd a { display: inline-block; padding-block: 12px; }
}