/* Portada nueva de presertec.cl (propuesta 31-oct-2026). Marca 2026: botón Start + onda de corriente.
   Tokens de la plataforma (frontend/src/estilos.css): verde #4F8B0D, acción #3F7A0A, profundo #2F5807, tinta #131313. */
:root {
  --verde: #4F8B0D; --accion: #3F7A0A; --profundo: #2F5807; --claro: #9CCB5B; --lima: #B8DE84;
  --tinta: #131313; --texto: #333333; --gris: #6B6B6B; --linea: #DEDEDE; --fondo: #F5F5F5; --papel: #FFFFFF;
  --rojo: #D32E12; --amarillo: #FFCC00; --noche: #0F110E; --noche2: #1A1D17;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --r-xl: 32px; --r-l: 24px; --r-m: 18px;
  --ancho: 1240px;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--texto); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--tinta); text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
html[lang="en"] [data-es], html[lang="es"] [data-en] { display: none !important; }
.salto { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; }
.salto:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--claro); outline-offset: 3px; }

/* Barra superior */
.barra { background: var(--tinta); color: #CFCFCB; font-size: 13.5px; }
.barra .envoltura { display: flex; align-items: center; gap: 18px; min-height: 38px; }
.barra a { text-decoration: none; }
.barra .emergencia { display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 600; }
.barra .emergencia i { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 4px rgba(211, 46, 18, 0.25); animation: latido 2s ease-in-out infinite; }
.barra .esp { flex: 1; }
.barra .idioma { display: inline-flex; border-radius: 999px; background: #262923; padding: 3px; }
.barra .idioma button { border: 0; background: transparent; color: #CFCFCB; font: 600 12.5px/1 var(--sans); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.barra .idioma button[aria-pressed="true"] { background: var(--accion); color: #FFFFFF; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(211, 46, 18, 0.05); } }

/* Encabezado */
.cabeza { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.cabeza .envoltura { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.cabeza .logo img { width: clamp(150px, 15vw, 210px); height: auto; }
.cabeza nav { flex: 1; display: flex; justify-content: center; gap: 4px; }
.cabeza nav a { text-decoration: none; font-weight: 500; font-size: 15.5px; color: var(--tinta); padding: 10px 14px; border-radius: 999px; transition: background-color 160ms ease; }
.cabeza nav a:hover { background: var(--fondo); }
.cabeza .acciones { display: flex; align-items: center; gap: 10px; }
.carro { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--tinta); padding: 10px 14px; border-radius: 999px; background: var(--fondo); transition: background-color 160ms ease; }
.carro:hover { background: #ECEDEA; }
.carro svg { width: 20px; height: 20px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font: 600 16px/1 var(--sans); padding: 15px 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform 160ms ease-out, background-color 160ms ease, border-color 160ms ease; white-space: nowrap; }
.boton:active { transform: scale(0.97); }
.boton.verde { background: var(--accion); color: #FFFFFF; }
.boton.verde:hover { background: var(--profundo); }
.boton.rojo { background: transparent; color: #FFFFFF; border-color: var(--rojo); }
.boton.rojo:hover { background: rgba(211, 46, 18, 0.18); }
.boton.chico { padding: 12px 18px; font-size: 15px; }
.boton svg { width: 18px; height: 18px; }
.menu-movil { display: none; }

/* Portada */
.tapa { background: radial-gradient(90% 120% at 85% 10%, #22351A 0%, #141812 48%, var(--noche) 100%); color: #D6D6D2; overflow: hidden; }
.tapa .envoltura { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 6vw, 84px); }
.tapa h1 { color: #FFFFFF; font-size: clamp(40px, 6.2vw, 80px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; }
.tapa h1 em { font-style: normal; color: var(--claro); }
.tapa .bajada { margin-top: 22px; font-size: clamp(17px, 1.6vw, 20px); max-width: 34em; color: #CFCFCB; }
.tapa .botones { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tapa .repuesto { color: #E8F1DC; font-weight: 600; text-decoration: none; padding: 12px 6px; display: inline-flex; gap: 8px; align-items: center; }
.tapa .repuesto:hover { text-decoration: underline; text-underline-offset: 4px; }
.tapa .sello { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: #A9ABA4; }
.tapa .sello b { color: #FFFFFF; font-weight: 600; }
.escena { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; background: #1E221B; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); justify-self: end; width: 100%; max-width: 520px; }
.escena video { width: 100%; height: 100%; object-fit: cover; }
.escena .placa { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(15, 17, 14, 0.62); backdrop-filter: blur(10px); color: #FFFFFF; }
.escena .placa svg { width: 42px; height: 42px; flex: none; }
.escena .placa b { display: block; font-size: 15px; }
.escena .placa small { color: #C9D7B8; font-size: 13px; }
.escena .pausa { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(15, 17, 14, 0.55); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.escena .pausa svg { width: 16px; height: 16px; }
.onda-tapa { display: block; width: 100%; height: 40px; margin-top: -20px; }

/* ¿Qué necesitas? */
.necesitas { padding-block: clamp(48px, 7vw, 88px) 0; }
.titulo-seccion { display: grid; gap: 10px; margin-bottom: 28px; }
.titulo-seccion h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.04; }
.titulo-seccion p { color: var(--gris); max-width: 46em; }
.accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.acceso { position: relative; display: grid; gap: 14px; align-content: start; padding: 26px 24px 24px; border-radius: var(--r-l); background: var(--fondo); text-decoration: none; color: var(--texto); min-height: 230px; transition: transform 220ms var(--curva), background-color 220ms ease; cursor: pointer; border: 0; text-align: left; font: inherit; }
.acceso:hover { transform: translateY(-4px); background: #EEF4E6; }
.acceso .icono { width: 84px; height: 84px; border-radius: 26px; background: linear-gradient(160deg, #FFFFFF 30%, #E2F0CF); display: grid; place-items: center; box-shadow: 0 10px 22px -12px rgba(63, 122, 10, 0.55); transition: transform 220ms var(--curva); }
.acceso .icono svg { width: 66px; height: 66px; overflow: visible; }
.acceso .icono img { width: 46px; height: 46px; }
.acceso.urgente .icono { background: linear-gradient(160deg, #FFFFFF 30%, #FFD8CD); box-shadow: 0 10px 22px -12px rgba(211, 46, 18, 0.6); }
.acceso.oscuro .icono { background: #24271F; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .acceso:hover .icono { transform: translateY(-2px) rotate(-3deg); } }
.acceso h3 { font-size: 21px; line-height: 1.15; }
.acceso p { font-size: 15px; color: var(--texto); }
.acceso .ir { margin-top: auto; font-weight: 600; color: var(--accion); display: inline-flex; gap: 6px; align-items: center; }
.acceso.urgente { background: #FBEDEA; }
.acceso.urgente:hover { background: #F8E1DC; }
.acceso.urgente .ir { color: var(--rojo); }
.acceso.oscuro { background: var(--tinta); color: #D6D6D2; }
.acceso.oscuro h3 { color: #FFFFFF; }
.acceso.oscuro p { color: #CFCFCB; }
.acceso.oscuro .icono { background: #24271F; }
.acceso.oscuro .ir { color: var(--claro); }
.acceso.oscuro:hover { background: #1E211B; }

/* Cifras */
.cifras { padding-block: clamp(48px, 7vw, 88px); }
.cifras .fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cifra { border-top: 3px solid var(--verde); padding-top: 16px; display: grid; gap: 6px; }
.cifra b { font: 700 clamp(36px, 4.6vw, 58px)/1 var(--sans); letter-spacing: -0.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifra span { font-size: 15px; color: var(--texto); max-width: 18em; }

/* Servicios con video */
.servicios { padding-block: clamp(48px, 7vw, 96px); background: var(--fondo); }
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.servicio { position: relative; grid-column: span 3; border-radius: var(--r-l); overflow: hidden; background: #1C1F19; min-height: 380px; text-decoration: none; color: #FFFFFF; isolation: isolate; }
.servicio.ancho { grid-column: span 6; }
.servicio video, .servicio img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 700ms var(--curva); }
.servicio:hover video { transform: scale(1.04); }
.servicio::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 9, 0) 35%, rgba(10, 12, 9, 0.86) 100%); }
.servicio .texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: grid; gap: 6px; }
.servicio h3 { color: #FFFFFF; font-size: 22px; line-height: 1.15; }
.servicio p { font-size: 14.5px; color: #DCE3D3; }
.servicio .ir { font-weight: 600; color: var(--lima); font-size: 14.5px; }
.otros { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.otro { display: grid; gap: 6px; padding: 20px; border-radius: var(--r-m); background: var(--papel); text-decoration: none; transition: transform 220ms var(--curva); }
.otro:hover { transform: translateY(-3px); }
.otro b { color: var(--tinta); font-size: 17px; }
.otro span { font-size: 14.5px; color: var(--gris); }

/* Cómo trabajamos */
.metodo { background: var(--noche); color: #CFCFCB; padding-block: clamp(56px, 8vw, 104px); }
.metodo .titulo-seccion h2 { color: #FFFFFF; }
.metodo .titulo-seccion p { color: #A9ABA4; }
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.paso { border-radius: var(--r-l); background: var(--noche2); padding: 24px; display: grid; gap: 10px; align-content: start; }
.paso .cuando { font: 500 13px/1 var(--mono); color: var(--claro); }
.paso h3 { color: #FFFFFF; font-size: 20px; }
.paso p { font-size: 15px; color: #BDBFB8; }
.metodo .onda { display: block; width: 100%; height: 36px; margin-bottom: 18px; }

/* SmartGen + tienda + asistente */
section.trio { padding-block: clamp(56px, 8vw, 104px); }
section.trio .fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.panel { border-radius: var(--r-xl); padding: clamp(26px, 4vw, 44px); display: grid; gap: 16px; align-content: start; }
.panel h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; }
.panel.tienda { background: #EEF4E6; }
.panel.asistente { background: var(--tinta); color: #D6D6D2; }
.panel.asistente h2 { color: #FFFFFF; }
.panel .lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.panel .lista li { display: flex; gap: 10px; align-items: baseline; }
.panel .lista li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; transform: translateY(-1px); }
.chat { display: grid; gap: 10px; }
.chat .m { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.chat .c { justify-self: end; background: var(--accion); color: #FFFFFF; border-bottom-right-radius: 6px; }
.chat .a { background: #24271F; color: #E4E6E0; border-bottom-left-radius: 6px; }
.chat .a b { color: #FFFFFF; }
.asistente .cabecita { display: flex; align-items: center; gap: 12px; }
.asistente .cabecita img { width: 52px; height: 52px; }
.marcas { margin-top: 14px; border-radius: var(--r-xl); background: var(--fondo); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; }
.marcas h3 { font-size: 22px; }
.marcas .nombres { display: flex; flex-wrap: wrap; gap: 8px; }
.marcas .nombres span { padding: 8px 14px; border-radius: 999px; background: var(--papel); font-weight: 600; font-size: 14.5px; color: var(--tinta); }
.sello-smartgen { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--papel); font-size: 14px; }
.sello-smartgen b { display: inline-grid; place-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--tinta); color: #FFFFFF; font-size: 12.5px; }

/* Cierre */
.cierre { background: radial-gradient(80% 140% at 15% 100%, #22351A 0%, #141812 50%, var(--noche) 100%); color: #CFCFCB; padding-block: clamp(56px, 8vw, 104px) 28px; }
.cierre .grande { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px; align-items: end; }
.cierre h2 { color: #FFFFFF; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.cierre .contacto { display: grid; gap: 14px; }
.cierre .contacto a { text-decoration: none; display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-m); background: #1C2019; transition: background-color 160ms ease; }
.cierre .contacto a:hover { background: #242A20; }
.cierre .contacto small { color: #A9ABA4; font-size: 13px; }
.cierre .contacto b { color: #FFFFFF; font-size: 18px; font-weight: 600; }
.cierre .contacto a.urg b { color: #FF8A73; }
.pie { margin-top: clamp(48px, 7vw, 88px); padding-top: 24px; border-top: 1px solid #2A2E26; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; font-size: 14px; color: #8F928B; }
.pie img { width: 220px; height: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 16px; }
.pie a { text-decoration: none; color: #BDBFB8; }
.pie a:hover { color: #FFFFFF; }

/* Barra fija del teléfono */
.barra-movil { display: none; }

/* Entradas suaves (sin dejar nada oculto si no hay JS) */
.aparece { transition: opacity 600ms var(--curva), transform 600ms var(--curva); }
.js .aparece:not(.visto) { opacity: 0.001; transform: translateY(18px); }

@media (max-width: 1080px) {
  .cabeza nav { display: none; }
  .menu-movil { display: inline-flex; }
  .accesos, .cifras .fila, .pasos, .otros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio, .servicio.ancho { grid-column: span 6; }
}
@media (max-width: 860px) {
  .tapa .envoltura, section.trio .fila, .cierre .grande, .marcas { grid-template-columns: minmax(0, 1fr); }
  .escena { justify-self: stretch; max-width: none; aspect-ratio: 4 / 4.4; }
  .barra .correo { display: none; }
}
@media (max-width: 620px) {
  body { padding-bottom: 76px; }
  .barra .envoltura { gap: 10px; }
  .barra .emergencia { white-space: nowrap; font-size: 13px; }
  .barra .emergencia .larga, .barra a[href^="https://app"] { display: none; }
  /* La burbuja del asistente sube sobre la barra fija del teléfono */
  .as-burbuja { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Con Tomás apagado la burbuja es WhatsApp, que ya está en la barra fija: no se repite */
  .as-burbuja.as-wa { display: none !important; }
  .as-panel { bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important; height: min(560px, calc(100vh - 190px)) !important; }
  .cabeza .carro span, .cabeza .acciones .boton { display: none; }
  .accesos, .cifras .fila, .pasos, .otros { grid-template-columns: minmax(0, 1fr); }
  .servicio, .servicio.ancho { grid-column: span 12; min-height: 340px; }
  .acceso { min-height: 0; }
  .barra-movil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(19, 19, 19, 0.96); backdrop-filter: blur(10px); padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); gap: 6px; }
  .barra-movil a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: #E4E6E0; font-size: 12px; font-weight: 600; padding: 6px 2px; border-radius: 12px; }
  .barra-movil a svg { width: 22px; height: 22px; }
  .barra-movil a.urg { color: #FF8A73; }
  .barra-movil a.cot { background: var(--accion); color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece, .acceso, .otro, .servicio video { transition: none !important; }
  .js .aparece:not(.visto) { opacity: 1; transform: none; }
  .barra .emergencia i { animation: none; }
}

/* Especialidades (31-oct-2026): escáner destacado y tarjetas con fotos propias */
.especialidades { padding-block: clamp(56px, 8vw, 104px); }
.esp-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.especialidad { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-l); overflow: hidden; background: var(--fondo); }
.especialidad > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms var(--curva); }
.especialidad:hover > img { transform: scale(1.03); }
.especialidad .texto { padding: 20px 22px 24px; display: grid; gap: 8px; align-content: start; }
.especialidad h3 { font-size: 21px; line-height: 1.15; }
.especialidad p { font-size: 15px; color: var(--texto); }
.especialidad.escaner { grid-column: span 3; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; background: var(--tinta); color: #D6D6D2; }
.especialidad.escaner > img { aspect-ratio: auto; height: 100%; min-height: 360px; }
.especialidad.escaner .texto { padding: clamp(24px, 4vw, 44px); gap: 14px; align-content: center; }
.especialidad.escaner h3 { color: #FFFFFF; font-size: clamp(26px, 3vw, 36px); }
.especialidad.escaner p { color: #CFCFCB; font-size: 16.5px; }
.marcas-motor { display: flex; flex-wrap: wrap; gap: 8px; }
.marcas-motor span { padding: 8px 14px; border-radius: 999px; background: #24271F; color: #E8F1DC; font-weight: 600; font-size: 14.5px; }
.mini-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.mini-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }

/* Flota: carril que se desliza */
.flota { padding-block: 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.carril { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, calc((100vw - var(--ancho)) / 2 + 16px)); padding: 4px max(16px, calc((100vw - var(--ancho)) / 2 + 16px)) 12px; scrollbar-width: thin; }
.carril img { flex: none; width: min(420px, 78vw); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-l); scroll-snap-align: start; }

/* Galería de trabajos con filtros */
.galeria { padding-block: clamp(56px, 8vw, 104px); background: var(--fondo); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filtros button { border: 0; border-radius: 999px; padding: 10px 16px; font: 600 14.5px/1 var(--sans); background: var(--papel); color: var(--tinta); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease-out; }
.filtros button:hover { background: #E7EFDC; }
.filtros button:active { transform: scale(0.97); }
.filtros button[aria-pressed="true"] { background: var(--accion); color: #FFFFFF; }
.mosaico { columns: 4 240px; column-gap: 12px; }
.mosaico button { display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; cursor: zoom-in; break-inside: avoid; position: relative; }
.mosaico img { width: 100%; height: auto; display: block; transition: transform 500ms var(--curva); }
.mosaico button:hover img { transform: scale(1.04); }
.mosaico button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 13px; color: #FFFFFF; text-align: left; background: linear-gradient(180deg, rgba(10, 12, 9, 0), rgba(10, 12, 9, 0.78)); opacity: 0; transition: opacity 200ms ease; }
.mosaico button:hover span, .mosaico button:focus-visible span { opacity: 1; }
.mosaico .entra { animation: entra 420ms var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
.mas { display: flex; justify-content: center; margin-top: 18px; }
.visor { border: 0; padding: 0; border-radius: 20px; background: var(--noche); color: #E4E6E0; max-width: min(92vw, 980px); }
.visor::backdrop { background: rgba(5, 6, 5, 0.82); }
.visor img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.visor p { margin: 0; padding: 12px 16px 16px; font-size: 15px; }
.visor .cerrar { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(15, 17, 14, 0.7); color: #FFFFFF; font-size: 24px; cursor: pointer; }
@media (max-width: 1080px) { .esp-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .especialidad.escaner { grid-column: span 2; } }
@media (max-width: 860px) { .especialidad.escaner { grid-template-columns: minmax(0, 1fr); } .especialidad.escaner > img { min-height: 0; aspect-ratio: 4 / 3; } }
@media (max-width: 620px) { .esp-rejilla { grid-template-columns: minmax(0, 1fr); } .especialidad.escaner { grid-column: auto; } .mosaico { columns: 2 140px; } }
@media (prefers-reduced-motion: reduce) { .mosaico .entra { animation: none; } .especialidad > img, .mosaico img { transition: none; } }
[hidden] { display: none !important; }

/* ======================================================================================================================
   Páginas interiores con el diseño de la portada (31-oct-2026). Las genera utilidades/construir.py.
   sitio.css se carga antes que este archivo (formulario de cotización, catálogo y tienda): aquí se ajusta lo que choca.
   ====================================================================================================================== */
:root { --r: 12px; --r-panel: 20px; }
h1, h2, h3 { font-weight: 700; max-width: none; }
.legado, .dlg { --fondo: #FFFFFF; }
.cierre .pie { background: none; padding-bottom: 0; }
@media (min-width: 621px) { body { padding-bottom: 0; } }
.b { border-radius: 999px; }
.dlg { border-radius: var(--r-l); }
.campo input, .campo select, .campo textarea { border-radius: 14px; }
@media (max-width: 599px) { .dlg { border-radius: 0; } }

/* Menú: «Servicios» en el escritorio y el botón de menú en el teléfono abren el mismo panel */
.cabeza nav .abre-menu { border: 0; background: none; font: 500 15.5px/1 var(--sans); color: var(--tinta); padding: 10px 14px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color 160ms ease; }
.cabeza nav .abre-menu:hover, .cabeza nav .abre-menu[aria-expanded="true"] { background: var(--fondo); }
.cabeza nav .abre-menu svg { width: 14px; height: 14px; transition: transform 200ms var(--curva); }
.cabeza nav .abre-menu[aria-expanded="true"] svg { transform: rotate(180deg); }
.cabeza nav a[aria-current="page"] { background: #EEF4E6; color: var(--profundo); }
button.menu-movil { cursor: pointer; }
.menu-panel { border-top: 1px solid rgba(0, 0, 0, 0.06); background: var(--papel); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35); }
.menu-panel .envoltura { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr); gap: clamp(20px, 4vw, 48px); padding-block: 24px 28px; min-height: 0; align-items: start; }
.menu-panel h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
.menu-servicios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; list-style: none; margin: 0; padding: 0; }
.menu-servicios a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; text-decoration: none; transition: background-color 160ms ease; }
.menu-servicios a:hover, .menu-servicios a[aria-current="page"] { background: #EEF4E6; }
.menu-servicios b { color: var(--tinta); font-size: 15.5px; font-weight: 600; }
.menu-servicios span { color: var(--gris); font-size: 13.5px; line-height: 1.35; }
.menu-paginas { display: grid; gap: 2px; }
.menu-paginas a { text-decoration: none; color: var(--tinta); font-weight: 500; padding: 9px 12px; border-radius: 12px; }
.menu-paginas a:hover { background: var(--fondo); }
.menu-paginas .boton { margin-top: 12px; }
.menu-panel[hidden] { display: none; }
.menu-panel.entra { animation: baja 260ms var(--curva) both; }
@keyframes baja { from { opacity: 0; transform: translateY(-6px); } }

/* Portada de cada página */
.pag { background: radial-gradient(90% 130% at 85% 0%, #22351A 0%, #141812 50%, var(--noche) 100%); color: #D6D6D2; overflow: hidden; }
.pag .envoltura { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(28px, 5vw, 72px) clamp(40px, 6vw, 84px); }
.pag.solo .envoltura { grid-template-columns: minmax(0, 1fr); }
.pag h1 { color: #FFFFFF; font-size: clamp(36px, 5.2vw, 66px); line-height: 1; letter-spacing: -0.035em; }
.pag h1 em { font-style: normal; color: var(--claro); }
.pag .bajada { margin-top: 20px; font-size: clamp(17px, 1.5vw, 19.5px); max-width: 36em; color: #CFCFCB; }
.pag .botones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pag .escena { aspect-ratio: 4 / 4.2; }
.pag .escena.ancha { aspect-ratio: 4 / 3; max-width: 600px; }
.pag .escena > img { width: 100%; height: 100%; object-fit: cover; }
.pag .chips { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.pag .chips span { padding: 7px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #E8F1DC; font-weight: 600; font-size: 14px; }
.miga { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px; color: #A9ABA4; margin-bottom: 18px; }
.miga a { color: #CFE3B5; text-decoration: none; }
.miga a:hover { text-decoration: underline; text-underline-offset: 3px; }
.boton.claro { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.24); }
.boton.claro:hover { background: rgba(255, 255, 255, 0.16); }
.boton.alerta { background: var(--rojo); color: #FFFFFF; }
.boton.alerta:hover { background: #B3250E; }
.boton.contorno { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.boton.contorno:hover { background: var(--fondo); }
.boton .i { width: 20px; height: 20px; }

/* Secciones y piezas */
.sec { padding-block: clamp(48px, 7vw, 96px); }
.sec.gris { background: var(--fondo); }
.dos-col { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.dos-col > div:first-child { position: sticky; top: 100px; }
.dos-col h2, .sec h2.grande { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.dos-col .bajada, .sec .bajada { margin-top: 14px; color: var(--gris); font-size: 17px; max-width: 34em; }
.incluye { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.incluye li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 20px; border-radius: var(--r-m); background: var(--fondo); }
.sec.gris .incluye li { background: var(--papel); }
.incluye .marca-ok { width: 34px; height: 34px; border-radius: 12px; background: #E5F2D0; color: var(--accion); display: grid; place-items: center; }
.incluye .marca-ok svg { width: 18px; height: 18px; stroke-width: 2.4; }
.incluye b { display: block; color: var(--tinta); font-size: 17px; line-height: 1.25; margin-bottom: 4px; }
.incluye span { font-size: 15px; color: var(--texto); }
.paso .num { font: 600 13px/1 var(--mono); color: var(--claro); }
.lectura { border-radius: var(--r-xl); background: var(--noche); color: #CFCFCB; padding: clamp(22px, 3.4vw, 36px); display: grid; gap: 18px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.6); }
.lectura .lectura-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 13px/1 var(--mono); color: var(--claro); }
.lectura .lectura-cab i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #84DB43; margin-right: 8px; box-shadow: 0 0 0 4px rgba(132, 219, 67, 0.18); }
.lectura dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.lectura dl div { background: var(--noche2); border-radius: 14px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.lectura dt { font-size: 13px; color: #A9ABA4; }
.lectura dd { margin: 0; font: 600 clamp(18px, 1.9vw, 23px)/1.15 var(--mono); color: #FFFFFF; overflow-wrap: anywhere; }
.lectura dd small { font-size: 0.6em; color: var(--claro); margin-left: 3px; }
.lectura p { font-size: 13.5px; color: #8F928B; }
.carril.fotos button { flex: none; padding: 0; border: 0; background: none; border-radius: var(--r-l); overflow: hidden; cursor: zoom-in; scroll-snap-align: start; position: relative; }
.carril.fotos img { width: min(300px, 70vw); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; transition: transform 500ms var(--curva); }
.carril.fotos button:hover img { transform: scale(1.04); }
.carril.fotos button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; font-size: 13px; line-height: 1.35; color: #FFFFFF; text-align: left; background: linear-gradient(180deg, rgba(10, 12, 9, 0), rgba(10, 12, 9, 0.82)); }
.franja { padding-block: clamp(48px, 7vw, 96px); overflow: hidden; }
.franja .titulo-seccion { margin-bottom: 20px; }
.preguntas { display: grid; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 600; font-size: 18px; color: var(--tinta); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: linear-gradient(var(--accion), var(--accion)) center / 16px 2.5px no-repeat, linear-gradient(var(--accion), var(--accion)) center / 2.5px 16px no-repeat; transition: transform 220ms var(--curva); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding: 0 0 20px; max-width: 46em; }
.vecinos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vecinos .otro { background: var(--fondo); }
.sec.gris .vecinos .otro { background: var(--papel); }
.otro .ir { margin-top: 8px; font-weight: 600; color: var(--accion); font-size: 14.5px; }
.texto-largo { display: grid; gap: 16px; max-width: 44em; }
.texto-largo h1 { font-size: clamp(32px, 4vw, 48px); }
.texto-largo h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 12px; }
.texto-largo ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.texto-largo a { color: var(--accion); }

/* Índice de servicios: tarjetas con foto */
a.especialidad { text-decoration: none; color: inherit; transition: transform 220ms var(--curva); }
a.especialidad:hover { transform: translateY(-4px); }
.especialidad .ir { margin-top: 6px; font-weight: 600; color: var(--accion); }
.especialidad.urgente { background: #FBEDEA; }
.especialidad.urgente .ir { color: var(--rojo); }

/* Banda de emergencia */
.banda-sos { background: var(--tinta); color: #CFCFCB; }
.banda-sos .envoltura { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 24px; align-items: center; padding-block: clamp(32px, 5vw, 56px); }
.banda-sos h2 { color: #FFFFFF; font-size: clamp(24px, 3vw, 34px); }
.banda-sos p { margin-top: 10px; }
.banda-sos .tel { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #FF8A73; font: 600 clamp(24px, 3.4vw, 40px)/1 var(--mono); white-space: nowrap; }
.banda-sos .tel i { width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 5px rgba(211, 46, 18, 0.25); animation: latido 2s ease-in-out infinite; }
.banda-sos .botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Plan anual (contratos) */
.plan-anual { overflow-x: auto; border-radius: var(--r-l); background: var(--papel); padding: 8px 12px; }
.plan-anual table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 4px; font-size: 14px; }
.plan-anual th { font-weight: 600; color: var(--gris); text-align: center; padding: 6px 0; }
.plan-anual th[scope="row"] { text-align: left; color: var(--tinta); white-space: nowrap; padding-right: 10px; }
.plan-anual td { height: 34px; border-radius: 9px; background: var(--fondo); }
.plan-anual td.si { background: var(--verde); }
.plan-anual td.si.pv { background: var(--profundo); }
.plan-anual td.si.bc { background: var(--tinta); }
.plan-ley { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: 14px; color: var(--gris); }
.plan-ley i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }

/* Empresa: línea de tiempo, foto de técnicos y cobertura */
.hitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hitos li { border-radius: var(--r-l); background: var(--fondo); padding: 24px; display: grid; gap: 8px; align-content: start; }
.sec.gris .hitos li { background: var(--papel); }
.hitos b { font: 700 clamp(30px, 3.4vw, 42px)/1 var(--sans); color: var(--verde); letter-spacing: -0.03em; }
.hitos strong { color: var(--tinta); font-size: 18px; }
.hitos p { font-size: 15px; }
.foto-curva { border-radius: var(--r-xl); overflow: hidden; background: var(--fondo); margin: 0; }
.foto-curva img { width: 100%; height: auto; }
.par .foto-curva img { aspect-ratio: 1 / 1; object-fit: cover; }
.foto-curva figcaption { padding: 12px 16px; font-size: 14px; color: var(--gris); }
.par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.par .texto { display: grid; gap: 14px; align-content: center; }
.par h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; }
.sello-grande { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 14px; border-radius: 999px; background: var(--papel); justify-self: start; }
.sello-grande img { width: 120px; height: auto; }
.sello-grande b { font-size: 15px; color: var(--tinta); }
.lista-puntos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lista-puntos li { display: flex; gap: 10px; align-items: baseline; }
.lista-puntos li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; transform: translateY(-1px); }

/* Contacto */
.contacto-datos { display: grid; gap: 12px; }
.contacto-datos > div { border-radius: var(--r-m); background: var(--fondo); padding: 16px 18px; display: grid; gap: 4px; }
.contacto-datos small { color: var(--gris); font-size: 13.5px; }
.contacto-datos a, .contacto-datos p { color: var(--tinta); font-weight: 600; font-size: 18px; text-decoration: none; overflow-wrap: anywhere; }
.contacto-datos a.urg { color: var(--rojo); font-family: var(--mono); }
.caja-form { border-radius: var(--r-xl); background: var(--fondo); padding: clamp(20px, 3.4vw, 40px); }

/* Contenido heredado (catálogo, tienda, privacidad) dentro del diseño nuevo */
.legado { padding-block: clamp(32px, 5vw, 64px); }
.legado .sec, .legado .sec2 { padding-block: 0; }
.legado .w, .legado .wb { max-width: none; padding: 0; margin: 0; }
.ti-carro-btn.ti-flotante { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 65; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45); }

@media (max-width: 1080px) {
  .menu-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hitos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .pag .envoltura, .dos-col, .par, .banda-sos .envoltura, .menu-panel .envoltura { grid-template-columns: minmax(0, 1fr); }
  .pag .escena, .pag .escena.ancha { justify-self: stretch; max-width: none; aspect-ratio: 4 / 3; }
  .dos-col > div:first-child { position: static; }
  .vecinos { grid-template-columns: minmax(0, 1fr); }
  .lectura dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .menu-servicios, .incluye, .hitos { grid-template-columns: minmax(0, 1fr); }
  .pag .botones .boton { flex: 1 1 auto; }
  .ti-carro-btn.ti-flotante { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cabeza .acciones .boton.menu-movil { display: inline-flex; padding: 12px 14px; }
  .cabeza .envoltura { gap: 12px; }
  .cabeza .acciones { margin-left: auto; }
  .menu-panel .envoltura { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel.entra, .banda-sos .tel i { animation: none; }
  a.especialidad, .carril.fotos img { transition: none; }
}

/* Tienda y taller físicos (Víctor, 31-oct-2026): dirección arriba, en la portada y abajo con mapa */
.barra .direccion { display: inline-flex; align-items: center; gap: 6px; color: #CFE3B8; }
.barra .direccion svg { width: 15px; height: 15px; flex: none; }
.donde { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.35); width: fit-content; }
.visitanos { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; margin-block: clamp(40px, 6vw, 72px) 8px; padding: 22px; border-radius: var(--r-l); background: #1A1E17; }
.visitanos .texto { display: grid; gap: 12px; align-content: center; padding: 8px; }
.visitanos small { color: var(--claro); font-weight: 600; font-size: 14px; }
.visitanos h2 { color: #FFFFFF; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.05; letter-spacing: -0.02em; }
.visitanos p { color: #CFCFCB; font-size: 16px; }
.visitanos .dir { display: flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 600; }
.visitanos .dir svg { width: 20px; height: 20px; color: var(--claro); flex: none; }
.visitanos .botones { display: flex; flex-wrap: wrap; gap: 10px; }
.boton.contorno-claro { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.visitanos .mapa { min-height: 300px; border-radius: var(--r-m); overflow: hidden; background: #2A2F26; }
.visitanos iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; filter: saturate(0.85); }
@media (max-width: 900px) { .barra .direccion { display: none; } .visitanos { grid-template-columns: 1fr; padding: 16px; } }

/* Aviso de cookies (assets/cookies.js): tarjeta abajo a la izquierda; en el teléfono, sobre la barra fija */
.cookies { position: fixed; z-index: 70; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); width: min(520px, calc(100vw - 32px));
  background: var(--papel); color: var(--texto); border-radius: var(--r-m); padding: 18px 20px; box-shadow: 0 18px 50px rgba(19, 19, 19, 0.22), 0 0 0 1px rgba(19, 19, 19, 0.06);
  display: grid; gap: 14px; opacity: 0; transform: translateY(12px); transition: opacity 220ms var(--curva), transform 220ms var(--curva); }
.cookies.visible { opacity: 1; transform: none; }
.cookies[hidden] { display: none; }
.cookies-txt { margin: 0; font-size: 14.5px; line-height: 1.5; }
.cookies-txt b { color: var(--tinta); }
.cookies-txt a { color: var(--accion); font-weight: 600; }
.cookies-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cookies-b { font: 600 14.5px/1 var(--sans); border-radius: 999px; padding: 12px 20px; cursor: pointer; border: 1.5px solid var(--linea); background: var(--papel); color: var(--tinta); min-height: 44px; transition: transform 160ms ease-out, background-color 160ms ease; }
.cookies-b:active { transform: scale(0.97); }
.cookies-si { background: var(--accion); border-color: var(--accion); color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .cookies-si:hover { background: var(--profundo); border-color: var(--profundo); } .cookies-no:hover { border-color: var(--gris); } }
@media (max-width: 620px) {
  .cookies { left: 12px; right: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); padding: 16px; }
  .cookies-botones { justify-content: stretch; }
  .cookies-b { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cookies { transition: opacity 150ms linear; transform: none; } }

/* Página de gracias (formulario enviado) */
.gracias { padding-block: clamp(40px, 7vw, 96px); }
.gracias .tarjeta-gracias { max-width: 720px; align-self: start; background: var(--papel); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px); box-shadow: 0 1px 0 rgba(19, 19, 19, 0.04); }
.gracias .check { width: 56px; height: 56px; border-radius: 50%; background: var(--verde); color: #FFFFFF; display: grid; place-items: center; margin-bottom: 18px; }
.gracias .check svg { width: 28px; height: 28px; }
.gracias h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 12px; color: var(--tinta); }
.gracias .folio { display: inline-block; font-family: var(--mono); font-weight: 600; background: var(--fondo); border-radius: 10px; padding: 6px 12px; margin: 4px 0 18px; color: var(--tinta); }
.gracias ol { margin: 8px 0 24px; padding-left: 22px; line-height: 1.6; }
.gracias ol li { margin-bottom: 6px; }
.gracias .botones { display: flex; gap: 12px; flex-wrap: wrap; }
.gracias .gracias-h2 { font-size: 20px; margin: 18px 0 6px; color: var(--tinta); }
.gracias .boton.borde { background: transparent; color: var(--tinta); border-color: var(--linea); }
@media (hover: hover) and (pointer: fine) { .gracias .boton.borde:hover { border-color: var(--gris); } }
.gracias a[href^="tel:"] { white-space: nowrap; font-weight: 600; color: var(--accion); }
.gracias .botones { margin-top: 22px; }

/* /gracias/ con la mitad derecha visual (1-nov-2026: «que haya algo interesante que ver después de enviar el mensaje») */
.gracias-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.gracias-visual { display: grid; gap: 14px; }
.gv-video { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--tinta); aspect-ratio: 4 / 5; }
.gv-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-video figcaption { position: absolute; inset: auto 0 0 0; padding: 110px 22px 20px; color: #FFFFFF; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; line-height: 1.25; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  letter-spacing: -0.01em; background: linear-gradient(to top, rgba(19, 19, 19, 0.92) 0%, rgba(19, 19, 19, 0.7) 45%, rgba(19, 19, 19, 0) 100%); }
.gv-video figcaption small { display: block; font-size: 13px; font-weight: 600; color: var(--claro); margin-bottom: 4px; letter-spacing: 0; }
.gv-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gv-cifras div { background: var(--papel); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.gv-cifras b { font-size: clamp(22px, 2.2vw, 28px); line-height: 1; letter-spacing: -0.02em; color: var(--verde); font-variant-numeric: tabular-nums; }
.gv-cifras span { font-size: 13px; line-height: 1.3; color: var(--texto, #333333); }
.gv-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gv-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
@media (prefers-reduced-motion: no-preference) { .gv-fotos img { transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); } }
@media (hover: hover) and (pointer: fine) { .gv-fotos img:hover { transform: scale(1.03); } }
@media (max-width: 900px) {
  .gracias-grid { grid-template-columns: 1fr; }
  .gv-video { aspect-ratio: 16 / 10; }
  .gv-fotos { display: none; }
}
@media (max-width: 520px) {
  .gv-cifras { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .gv-cifras div { padding: 10px; }
  .gv-cifras span { font-size: 11.5px; }
}

/* ======================================================================================================================
   SmartGen con protagonismo (Víctor, 2-nov-2026): sello en el encabezado, banda de la alianza en la portada, pie,
   página /smartgen con la línea por familia y documentos oficiales en las fichas. Logo en assets/img/smartgen/.
   ====================================================================================================================== */
/* Sello del encabezado (todas las páginas) */
.sello-sg { display: grid; gap: 4px; justify-items: start; padding-left: 18px; border-left: 1px solid var(--linea); text-decoration: none; flex: none; }
.sello-sg img { width: 84px; height: auto; }
.sello-sg span { font-size: 11.5px; line-height: 1.1; font-weight: 500; color: var(--gris); white-space: nowrap; transition: color 160ms ease; }
.sello-sg:hover span { color: var(--tinta); }
/* Sello en la portada oscura */
.sello-sg-tapa { display: inline-flex; align-items: center; gap: 10px; color: #A9ABA4; text-decoration: none; transition: color 160ms ease; }
.sello-sg-tapa img { width: 84px; height: auto; }
.sello-sg-tapa:hover { color: #FFFFFF; }
/* PRESERTEC junto a SmartGen */
.dupla { display: flex; align-items: center; gap: 18px; }
.dupla-pre { width: 168px; height: auto; }
.dupla-sg { width: 158px; height: auto; }
.dupla-x { width: 1px; height: 40px; background: var(--linea); flex: none; }
.dupla.clara .dupla-x { background: rgba(255, 255, 255, 0.28); }

/* Banda de la alianza (portada) */
.alianza { background: var(--noche); color: #CFCFCB; padding-block: clamp(56px, 8vw, 104px); }
.alianza-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.alianza-foto { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; background: #1E221B; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); }
.alianza-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.alianza-foto figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(15, 17, 14, 0.66); backdrop-filter: blur(10px); color: #FFFFFF; font-size: 14px; line-height: 1.35; }
.alianza h2 { margin-top: 28px; color: #FFFFFF; font-size: clamp(30px, 4vw, 48px); line-height: 1.04; }
.alianza h2 em { font-style: normal; color: var(--claro); }
.alianza-texto > p { margin-top: 16px; font-size: 17px; max-width: 36em; }
.alianza-puntos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.alianza-puntos li { border-top: 3px solid var(--verde); padding-top: 12px; display: grid; gap: 4px; align-content: start; }
.alianza-puntos b { color: #FFFFFF; font-size: 16.5px; line-height: 1.25; }
.alianza-puntos span { font-size: 14.5px; color: #A9ABA4; }
.alianza .botones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.sg-linea { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sg-prod { display: grid; gap: 2px; align-content: start; padding: 10px 10px 14px; border-radius: var(--r-m); background: var(--noche2); text-decoration: none; transition: transform 220ms var(--curva), background-color 160ms ease; }
.sg-prod-foto { display: block; background: #FFFFFF; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.sg-prod-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.sg-prod b { color: #FFFFFF; font-size: 15.5px; padding-inline: 4px; }
.sg-prod small { color: #A9ABA4; font-size: 13.5px; padding-inline: 4px; }
.sg-prod.sg-todo { align-content: end; background: var(--accion); padding: 18px; }
.sg-prod.sg-todo b { font-size: 19px; }
.sg-prod.sg-todo small { color: #E8F1DC; }
@media (hover: hover) and (pointer: fine) { .sg-prod:hover { transform: translateY(-3px); } .sg-prod.sg-todo:hover { background: var(--profundo); } }

/* Pie */
.pie .pie-sg { display: inline-flex; align-items: center; gap: 14px; color: #BDBFB8; }
.pie .pie-sg img { width: 128px; height: auto; }
.pie .pie-sg span { font-size: 13.5px; line-height: 1.35; max-width: 17em; }

/* Página /smartgen */
.pag-sg .dupla { margin-bottom: 26px; }
.pag .escena.foto-alianza { aspect-ratio: 3 / 2; max-width: 620px; }
.familias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.familia { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); border-radius: var(--r-l); overflow: hidden; background: var(--papel); scroll-margin-top: 100px; }
.familia-foto { background: #FFFFFF; display: grid; place-items: center; padding: 16px; }
.familia-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.familia-texto { padding: 22px 24px 24px 6px; display: grid; gap: 10px; align-content: start; }
.familia-texto small { color: var(--gris); font-size: 13px; font-weight: 500; }
.familia h3 { font-size: 21px; line-height: 1.15; }
.familia p { font-size: 15px; }
.familia.grande { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.familia.grande .familia-foto { padding: 28px; }
.familia.grande .familia-texto { padding: clamp(24px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px) clamp(24px, 3.4vw, 44px) 8px; align-content: center; }
.familia.grande h3 { font-size: clamp(24px, 2.6vw, 32px); }
.familia.grande p { font-size: 16.5px; }
.modelos { display: flex; flex-wrap: wrap; gap: 6px; }
.modelos a { padding: 7px 11px; border-radius: 999px; background: var(--fondo); color: var(--tinta); font: 600 13.5px/1.2 var(--sans); text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.modelos a:hover { background: #E5F2D0; color: var(--profundo); }
.familia-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; margin-top: 2px; }
.familia-acc a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }
.familia-acc .doc { color: var(--accion); }
.familia-acc .doc .i { width: 18px; height: 18px; }
.familia-acc .doc small { color: var(--gris); font-weight: 500; font-size: 13px; }
.familia-acc .ver { color: var(--tinta); }
.familia-acc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sg-firma { display: block; width: 150px; height: auto; margin-bottom: 20px; }
.descargas { display: grid; gap: 8px; }
.descargas h3 { font-size: 15px; font-weight: 600; color: var(--gris); margin-top: 12px; }
.descargas h3:first-child { margin-top: 0; }
.descargas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.descargas a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-m); background: var(--fondo); text-decoration: none; transition: background-color 160ms ease; }
.descargas a:hover { background: #EEF4E6; }
.descargas .i { width: 20px; height: 20px; color: var(--accion); margin-top: 2px; }
.descargas b { display: block; color: var(--tinta); font-size: 16px; line-height: 1.3; }
.descargas small { color: var(--gris); font-size: 13.5px; }

/* Ficha del catálogo: documentos oficiales SmartGen */
.ficha-sg { grid-column: 1 / -1; background: #F5F5F5; border-radius: 18px; padding: 18px 20px; }
.ficha-sg h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ficha-sg h3 img { width: 96px; height: auto; }
.ficha-sg ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ficha-sg p { font-size: 14.5px; color: var(--gris); }
.ficha-sg a { color: var(--accion); }

@media (max-width: 1240px) and (min-width: 1081px) { .cabeza nav a, .cabeza nav .abre-menu { padding-inline: 10px; } .cabeza .envoltura { gap: 16px; } }
@media (max-width: 1080px) {
  .sg-linea { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .familias { grid-template-columns: minmax(0, 1fr); }
  .familia.grande { grid-column: auto; }
}
@media (max-width: 860px) {
  .alianza-grid { grid-template-columns: minmax(0, 1fr); }
  .pag .escena.foto-alianza { aspect-ratio: 3 / 2; }
}
@media (max-width: 620px) {
  .sello-sg { padding-left: 12px; }
  .sello-sg img { width: 72px; }
  .sello-sg span { font-size: 10.5px; }
  .dupla { gap: 14px; }
  .dupla-pre { width: 132px; }
  .dupla-sg { width: 128px; }
  .dupla-x { height: 32px; }
  .alianza-puntos { grid-template-columns: minmax(0, 1fr); }
  .alianza-foto { overflow: visible; background: none; box-shadow: none; }
  .alianza-foto img { border-radius: var(--r-l); }
  .alianza-foto figcaption { position: static; padding: 10px 2px 0; background: none; backdrop-filter: none; color: #A9ABA4; font-size: 13.5px; }
  .alianza .botones .boton { flex: 1 1 auto; }
  .sg-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .familia, .familia.grande { grid-template-columns: minmax(0, 1fr); }
  .familia-texto, .familia.grande .familia-texto { padding: 4px 20px 22px; }
  .familia-foto, .familia.grande .familia-foto { padding: 14px 24px 6px; }
}
@media (max-width: 380px) { .sello-sg span { display: none; } }
@media (prefers-reduced-motion: reduce) { .sg-prod { transition: none; } }
.pag .chips span span { padding: 0; background: none; border-radius: 0; }

/* Horario de atención presencial (taller, recepción de equipos y oficina; 2-nov-2026) */
.cierre .contacto small.horario-presencial { display: block; margin-top: 6px; color: #DCE8CF; font-size: 14px; font-weight: 600; }
.visitanos .horario-presencial { margin-top: 10px; color: #E7EAE3; font-size: 16px; line-height: 1.5; }
.visitanos .horario-presencial b { color: #FFFFFF; }

/* Portada: el catálogo a la vista (2-nov-2026) */
.catalogo-banda .cat-familias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.cat-fam { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-m); background: #F3F5EF; color: var(--tinta); text-decoration: none; transition: background-color 160ms ease, transform 160ms ease-out; }
.cat-fam:hover { background: #EAF0E1; }
.cat-fam:active { transform: scale(0.98); }
.cat-fam-foto { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.cat-fam-foto img { width: 100%; height: 100%; object-fit: contain; }
.cat-fam b { font-size: 19px; margin-top: 6px; }
.cat-fam small { color: var(--tinta2, #333); font-size: 15px; line-height: 1.45; }
.cat-fam .ir { color: var(--accion, #3F7A0A); font-weight: 600; font-size: 15px; }
.cat-todo { margin-top: 24px; }
@media (max-width: 860px) { .catalogo-banda .cat-familias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .catalogo-banda .cat-familias { grid-template-columns: 1fr; } }