/* ═══════════════════════════════════════════════════════════════════════
   PLANTATION DAVIE GARAGE DOOR EXPERTS · hoja de estilos
   369 Creative Agency · noviembre 2026

   Identidad (DECISIONES §2): paleta de la hoja de marca del cliente
   ("Opción 3 · Amigable & Local"), Urbanist para títulos, Atkinson
   Hyperlegible Next para el texto (19–20 px), esquinas de 6 px en todo,
   motivo de las "tres tablillas" (la puerta del logo) y las franjas de la
   camioneta una sola vez por página (borde superior del pie).

   Índice:
     1 Variables            7 Síntomas con foto             13 Formularios
     2 Base                 8 Permisos y ZIP                14 Pie y barra móvil
     3 Botones              9 Pruebas y "Check us"          15 Movimiento reducido
     4 Cabecera y menú     10 Páginas de servicio           16 Impresión
     5 Hero (y el de la portada, a sangre)
    5b Apertura de la portada  11 FAQ
     6 Bandas e índice     12 Tablas, prosa y cierre
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · VARIABLES ═══ */
:root {
  --marino: #003855;        /* títulos, campos oscuros · blanco encima 12.9:1 */
  --marino-hondo: #00263A;  /* pie, velos */
  --sol: #F07603;           /* SOLO decorativo (2.9:1 con blanco: nunca fondo de texto) */
  --naranja: #B85400;       /* botón principal con texto blanco · 4.9:1 */
  --naranja-hondo: #8F4100; /* hover y active del botón · 6.9:1 */
  --teal: #02909B;          /* decorativo: franjas, íconos sobre oscuro */
  --teal-texto: #00707A;    /* enlaces sobre blanco · 5.8:1 */
  --teal-claro: #7FD3DA;    /* enlaces sobre marino · 8.6:1 */
  --arena: #F9E1B5;         /* campos de banda (marino encima ≥ 10:1) */
  --arena-suave: #FCF1DC;
  --puerta: #F6F3EC;        /* la puerta de garaje de la apertura (blanco hueso) */
  --blanco: #FFFFFF;
  --texto: #1C2B36;         /* texto corrido ≥ 12:1 */
  --gris-texto: #4A5A66;    /* secundario ≥ 6:1 sobre blanco, ≥ 4.5:1 sobre arena */
  --linea: #D5DCE1;
  --linea-oscura: rgba(255, 255, 255, .22);

  --f-titulo: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --radio: 6px;
  --ancho: 1200px;
  --margen: clamp(1rem, 4vw, 2rem);
  --banda: clamp(3.5rem, 7vw, 6rem);
  --sombra: 0 1px 2px rgba(0, 38, 58, .08), 0 8px 24px rgba(0, 38, 58, .08);
  --cabecera: 76px;
}

/* ═══ 2 · BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera) + 1rem); }
body {
  margin: 0; background: var(--blanco); color: var(--texto);
  font-family: var(--f-texto); font-size: 1.1875rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 1.25rem; } }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--marino); line-height: 1.12; margin: 0 0 .6em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 3.6vw + 1rem, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem); font-weight: 800; }
h3 { font-size: clamp(1.3rem, .6vw + 1.05rem, 1.55rem); font-weight: 700; }
.h3 { font-size: clamp(1.3rem, .6vw + 1.05rem, 1.55rem); }
p, ul, ol, dl { margin: 0 0 1em; }
a { color: var(--teal-texto); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--marino); }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 2px; }
.sin-quiebre { white-space: nowrap; }
.tel-texto { color: inherit; text-decoration: none; white-space: nowrap; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }
.angosto { max-width: 820px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.saltar { position: absolute; left: -9999px; top: .5rem; z-index: 100; background: var(--marino); color: #fff; padding: .7rem 1rem; border-radius: var(--radio); font-weight: 700; }
.saltar:focus { left: .5rem; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-size: clamp(1.2rem, .5vw + 1.08rem, 1.42rem); color: var(--texto); max-width: 38ch; }

/* Las tres tablillas: viñeta de las listas (la puerta del logo) */
.tablillas { list-style: none; padding: 0; }
.tablillas li { position: relative; padding-left: 2.1rem; margin-bottom: .7rem; }
.tablillas li::before {
  content: ""; position: absolute; left: 0; top: .38em; width: 1.25rem; height: .85rem; border-radius: 2px;
  background: linear-gradient(var(--marino) 0 26%, transparent 26% 37%, var(--marino) 37% 63%, transparent 63% 74%, var(--marino) 74% 100%);
}
.tablillas--claras li::before { background: linear-gradient(var(--teal-claro) 0 26%, transparent 26% 37%, var(--teal-claro) 37% 63%, transparent 63% 74%, var(--teal-claro) 74% 100%); }
.filete { display: block; width: 3.2rem; height: .75rem; margin: .4rem 0 1rem; border-radius: 2px;
  background: linear-gradient(var(--sol) 0 26%, transparent 26% 37%, var(--sol) 37% 63%, transparent 63% 74%, var(--sol) 74% 100%); }

/* ═══ 3 · BOTONES ═══ */
.botones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.5rem 0 0; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 52px;
  padding: .8rem 1.35rem; border-radius: var(--radio); border: 2px solid transparent;
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.12rem; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--naranja); color: #fff; }
.boton--principal:hover, .boton--principal:focus-visible { background: var(--naranja-hondo); color: #fff; }
.boton--linea { background: #fff; color: var(--marino); border-color: var(--marino); }
.boton--linea:hover { background: var(--marino); color: #fff; }
.boton--clara { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.boton--clara:hover { background: #fff; color: var(--marino); }
.boton--chico { min-height: 44px; padding: .55rem 1rem; font-size: 1rem; }
.boton[disabled] { opacity: .7; cursor: progress; }
.botones--columna { flex-direction: column; align-items: stretch; }
.sms-aviso { flex-basis: 100%; margin: .5rem 0 0; font-size: 1rem; color: var(--gris-texto); }
.oscuro .sms-aviso { color: #fff; }

/* ═══ 4 · CABECERA Y MENÚ ═══ */
.cabecera { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 1.25rem; min-height: var(--cabecera); }
.marca { display: flex; align-items: center; flex: none; text-decoration: none; }
.marca__img { height: 46px; width: auto; }
@media (min-width: 1180px) { .marca__img { height: 54px; } }
@media (max-width: 380px) { .marca__img { height: 38px; } }
.nav { display: none; align-items: center; gap: .25rem; margin-left: auto; }
.nav > a, .nav__grupo > button {
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.08rem; color: var(--marino); text-decoration: none;
  padding: .6rem .75rem; border-radius: var(--radio); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
}
.nav > a:hover, .nav__grupo > button:hover, .nav > a[aria-current="page"], .nav__grupo > button.actual { background: var(--arena-suave); color: var(--marino); }
.nav__grupo { position: relative; }
.nav__grupo > button[aria-expanded="true"] .ico { transform: rotate(180deg); }
.desplegable { position: absolute; top: calc(100% + .5rem); left: 50%; transform: translateX(-50%); width: min(880px, 92vw);
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.5rem; }
.desplegable__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.desplegable__h { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texto); margin: 0 0 .6rem; }
.desplegable ul { list-style: none; margin: 0; padding: 0; }
.desplegable li a { display: block; padding: .45rem .5rem; margin: 0 -.5rem; border-radius: var(--radio); color: var(--marino); text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.desplegable li a:hover { background: var(--arena-suave); }
.desplegable li small { display: block; font-weight: 400; color: var(--gris-texto); font-size: .9rem; }
.desplegable__pie { display: flex; gap: 1.5rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--linea); font-weight: 700; }
.cabecera__llamar { display: none; margin-left: auto; }
.llamar__numero { display: none; }
.hamburguesa { margin-left: auto; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--marino); border-radius: var(--radio); background: #fff; color: var(--marino); cursor: pointer; }
.hamburguesa .ico { width: 26px; height: 26px; }
@media (min-width: 1180px) {
  .nav { display: flex; }
  .cabecera__llamar { display: inline-flex; margin-left: .5rem; }
  .llamar__numero { display: inline; }
  .hamburguesa { display: none; }
}
@media (min-width: 640px) and (max-width: 1179px) { .cabecera__llamar { display: inline-flex; } .hamburguesa { margin-left: .5rem; } }
.menu-movil { position: fixed; inset: var(--cabecera) 0 0 0; z-index: 39; background: #fff; overflow-y: auto; padding: 1.25rem var(--margen) 6rem; display: none; }
.menu-movil[data-abierto="true"] { display: block; }
.menu-movil ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.menu-movil a { display: block; padding: .7rem 0; color: var(--marino); font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; text-decoration: none; border-bottom: 1px solid var(--linea); }
.menu-movil a[aria-current="page"] { color: var(--naranja); }
.menu-movil__h { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris-texto); margin: 1.25rem 0 .25rem; }
.menu-movil .boton { border-bottom: 0; }
@media (min-width: 1180px) { .menu-movil { display: none !important; } }

/* Migas */
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; padding: 0; margin: 0 0 1rem; font-size: .95rem; color: var(--gris-texto); }
.migas li + li::before { content: "/"; margin-right: .5rem; color: var(--linea); }
.migas a { color: var(--gris-texto); }

/* ═══ 5 · HERO ═══ */
.hero { padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero__rejilla { display: grid; gap: 2rem; align-items: center; }
.hero__texto h1 { margin-bottom: .35em; }
.hero__lic { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; font-size: 1rem; color: var(--gris-texto); }
.hero__lic a { color: var(--gris-texto); }
.hero__foto { position: relative; margin: 0; }
.hero__foto img { width: 100%; border-radius: var(--radio); object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.hero--home .hero__foto img { aspect-ratio: 4 / 3; max-height: 62vh; }
.hero__tablillas { position: absolute; left: -1rem; bottom: 1.5rem; width: 4.5rem; height: 3rem; border-radius: 3px;
  background: linear-gradient(var(--sol) 0 26%, transparent 26% 37%, var(--sol) 37% 63%, transparent 63% 74%, var(--sol) 74% 100%); }
@media (min-width: 900px) {
  .hero__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 4vw, 4rem); }
  .hero--home .hero__foto img { aspect-ratio: 5 / 4; max-height: none; }
  .hero--interno .hero__foto img { aspect-ratio: 4 / 3; }
}
.hero--interno { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.hero--interno h1 { font-size: clamp(2.1rem, 2.8vw + 1rem, 3.4rem); }
.hero--plano .hero__texto { max-width: 52rem; }

/* Hero de la portada, a sangre. En el celular: la foto arriba (3:2) y el texto debajo sobre
   marino. Desde 900 px: la foto ocupa todo el hero y un velo marino a la izquierda sostiene
   el texto en blanco. El foco de la foto (object-position) vive en recursos.py. */
.hero-home { position: relative; isolation: isolate; overflow: hidden; background: var(--marino); color: #fff; }
.hero-home__foto { margin: 0; overflow: hidden; }
.hero-home__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.hero-home__contenido { padding-top: 1.75rem; padding-bottom: 2.75rem; }
.hero-home h1 { color: #fff; }
.hero-home .lead { color: #E8EFF3; }
.hero-home .hero__lic { color: #DCE6EC; }
.hero-home .hero__lic a { color: #fff; }
@media (min-width: 900px) {
  .hero-home { display: flex; align-items: center; min-height: min(86vh, 780px); }
  .hero-home__foto { position: absolute; inset: 0; z-index: -1; }
  .hero-home__foto img { height: 100%; aspect-ratio: auto; }
  .hero-home__foto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 38, 58, .94) 0%, rgba(0, 38, 58, .88) 40%, rgba(0, 38, 58, .45) 62%, rgba(0, 38, 58, .05) 84%);
  }
  .hero-home__contenido { padding-top: 4rem; padding-bottom: 4.5rem; }
  .hero-home__texto { max-width: min(36rem, 52vw); }
}

/* Entrada del hero: con apertura, el texto sube cuando la pantalla se levanta (1,75 s); sin
   apertura (ya vista o JS apagado), al cargar. Con "reducir movimiento", todo quieto y a la vista. */
.hero-home__texto > * { --d: 0ms; }
.hero-home__texto > :nth-child(2) { --d: 70ms; }
.hero-home__texto > :nth-child(3) { --d: 140ms; }
.hero-home__texto > :nth-child(4) { --d: 210ms; }
@media (prefers-reduced-motion: no-preference) {
  .sin-apertura .hero-home__texto > *, .con-apertura .hero-home__texto > * { animation: subir 560ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d); }
  .con-apertura .hero-home__texto > * { animation-delay: calc(1750ms + var(--d)); }
  .apertura-saltada .hero-home__texto > * { animation-delay: var(--d); }
  .sin-apertura .hero-home__foto img { animation: acercar 1400ms cubic-bezier(.2, .7, .2, 1) both; }
  .con-apertura .hero-home__foto img { animation: acercar 1400ms cubic-bezier(.2, .7, .2, 1) 1650ms both; }
  .apertura-saltada .hero-home__foto img { animation-delay: 0ms; }
}
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes acercar { from { transform: scale(1.06); } to { transform: none; } }

/* ═══ 5b · APERTURA DE LA PORTADA ═══
   Una vez por sesión: la pantalla es una puerta de garaje blanca de cinco secciones con el
   logo real al centro (incrustado en el HTML: pinta con el primer cuadro).
     0,06 s  aparece el logo
     0,75 s  la puerta DEL LOGO sube y deja ver la luz de adentro (0,8 s)
     1,65 s  la pantalla entera sube como una puerta seccional (0,95 s) y entra el hero
   Lo corre el CSS solo: el JS únicamente la salta (toque o tecla) y la retira al final.
   Las medidas del hueco (--hx, --hy, --hw, --hh, en % del logo) las escribe el generador. */
.apertura { display: none; }
.con-apertura .apertura {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; cursor: pointer;
  background-color: var(--puerta);
  /* juntas entre las cinco secciones: sombra fina y labio claro */
  background-image: repeating-linear-gradient(180deg,
    transparent 0 calc(20% - 3px),
    rgba(0, 56, 85, .13) calc(20% - 3px) calc(20% - 1px),
    rgba(255, 255, 255, .95) calc(20% - 1px) 20%);
  animation: pantalla-sube 950ms cubic-bezier(.65, 0, .25, 1) 1650ms forwards;
}
/* el burlete de goma del canto de abajo */
.con-apertura .apertura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--marino-hondo); }
.apertura.saltada { opacity: 0; transition: opacity 250ms ease; }
.apertura.fuera { display: none !important; }
.apertura__logo { position: relative; width: min(80vw, 560px); aspect-ratio: 402 / 248; }
.con-apertura .apertura__logo { animation: logo-aparece 500ms cubic-bezier(.2, .7, .2, 1) 60ms both; }
.apertura__base { width: 100%; height: 100%; }
.apertura__hueco {
  position: absolute; overflow: hidden;
  left: calc(var(--hx) * 1%); top: calc(var(--hy) * 1%); width: calc(var(--hw) * 1%); height: calc(var(--hh) * 1%);
}
/* la luz cálida del garaje, con los naranjas del sol del logo */
.apertura__luz { position: absolute; inset: 0; background: radial-gradient(120% 140% at 50% 100%, #FFF4DC 0%, #FDB03A 55%, #F68A28 100%); }
/* la puerta del logo: el mismo dibujo visto por la ventana del hueco, sobre fondo opaco (tapa la luz) */
.apertura__puerta { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; background: var(--puerta); }
.con-apertura .apertura__puerta { animation: puerta-sube 800ms cubic-bezier(.65, 0, .25, 1) 750ms both; }
.apertura__saltar { position: absolute; right: var(--margen); bottom: 2rem; font-weight: 700; font-size: 1rem; color: var(--gris-texto); }
@keyframes logo-aparece { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes puerta-sube { from { transform: none; } to { transform: translateY(-100%); } }
@keyframes pantalla-sube { from { transform: none; } to { transform: translateY(-101%); visibility: hidden; } }

/* ═══ 6 · BANDAS E ÍNDICE DE SERVICIOS ═══ */
.banda { padding: var(--banda) 0; }
.banda--arena { background: var(--arena); }
.banda--arena-suave { background: var(--arena-suave); }
.banda--marino { background: var(--marino); color: #fff; }
.banda--marino h2, .banda--marino h3 { color: #fff; }
.banda--marino a { color: var(--teal-claro); }
.cabeza-banda { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cabeza-banda p { color: var(--gris-texto); margin: 0; }
.banda--marino .cabeza-banda p { color: #DCE6EC; }

.pruebas { padding: 1.5rem 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pruebas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem 2rem; }
.pruebas__lista li { display: flex; gap: .75rem; align-items: flex-start; }
.pruebas__lista .ico { color: var(--teal-texto); margin-top: .2rem; width: 1.5rem; height: 1.5rem; }
.pruebas__lista strong { display: block; font-family: var(--f-titulo); font-weight: 800; color: var(--marino); font-size: 1.12rem; line-height: 1.2; }
.pruebas__lista span { display: block; font-size: 1rem; color: var(--gris-texto); line-height: 1.4; }
@media (min-width: 700px) { .pruebas__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pruebas__lista { grid-template-columns: repeat(4, 1fr); } }

.indice { display: grid; gap: 2.5rem; }
.indice__grupo h3 { display: flex; align-items: center; gap: .7rem; font-size: 1.35rem; padding-bottom: .7rem; border-bottom: 3px solid var(--marino); }
.indice__grupo ul { list-style: none; margin: 0; padding: 0; }
.indice__grupo li { border-bottom: 1px solid var(--linea); }
.indice > * { min-width: 0; }
.indice__grupo a { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .9rem 0; text-decoration: none; color: var(--texto); }
.indice__grupo a:hover .indice__nombre { color: var(--naranja); }
.indice__nombre { font-family: var(--f-titulo); font-weight: 800; font-size: 1.2rem; color: var(--marino); }
.indice__tiempo { display: block; font-size: .92rem; font-weight: 700; color: var(--teal-texto); }
.indice__corto { font-size: 1rem; color: var(--gris-texto); }
@media (min-width: 900px) { .indice { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ═══ 7 · SÍNTOMAS CON FOTO ═══
   Reemplaza la maqueta 3D (quitada el 10/11/2026). Seis tarjetas blancas sobre marino:
   foto real, síntoma, la pieza que suele fallar y el enlace a la reparación. Todo a la vista. */
.sintomas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .sintomas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sintomas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sintomas .sintoma { display: flex; flex-direction: column; background: #fff; color: var(--texto); border-radius: var(--radio); overflow: hidden; }
.sintoma__foto { margin: 0; }
.sintoma__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.sintoma__texto { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.sintomas .sintoma h3 { color: var(--marino); font-size: 1.3rem; margin: 0 0 .5rem; }
.sintomas .sintoma p { font-size: 1.02rem; color: var(--texto); margin: 0 0 1rem; }
.sintomas .sintoma__enlace { margin-top: auto; font-family: var(--f-titulo); font-weight: 800; font-size: 1.08rem; color: var(--naranja); text-decoration: none; }
.sintomas .sintoma__enlace:hover { color: var(--naranja-hondo); text-decoration: underline; }

/* ═══ 8 · PERMISOS Y ZIP ═══ */
.dos-col { display: grid; gap: 2.5rem; }
/* Sin esto, una tabla ancha (min-width) estira la columna y la página entera en el celular */
.dos-col > *, .servicio__rejilla > *, .hero__rejilla > *, .comprueba > * { min-width: 0; }
@media (min-width: 960px) { .dos-col { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } }
.zip { background: #fff; border: 2px solid var(--marino); border-radius: var(--radio); padding: 1.5rem; }
.zip h3 { margin-bottom: .4rem; }
.zip p.zip__ayuda { font-size: 1rem; color: var(--gris-texto); }
.zip form { display: flex; gap: .6rem; flex-wrap: wrap; }
.zip label { flex-basis: 100%; font-weight: 700; }
.zip input { flex: 1 1 10rem; min-height: 52px; font: inherit; font-size: 1.25rem; letter-spacing: .08em; padding: .5rem .9rem; border: 2px solid var(--gris-texto); border-radius: var(--radio); color: var(--texto); }
.zip input:focus { border-color: var(--marino); }
.zip__respuesta { margin: 1rem 0 0; font-size: 1.05rem; }
.zip__respuesta:empty { display: none; }
.zip__respuesta.visible { padding: .9rem 1rem; background: var(--arena-suave); border-radius: var(--radio); }

/* ═══ 9 · PRUEBAS Y "CHECK US BEFORE YOU CALL" ═══ */
.comprueba { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .comprueba { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; } }
.comprueba__lista { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.comprueba__lista li { position: relative; padding: 1rem 0 1rem 3.4rem; border-bottom: 1px solid rgba(0, 56, 85, .2); counter-increment: paso; }
.comprueba__lista li::before { content: counter(paso); position: absolute; left: 0; top: 1rem; width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  border-radius: var(--radio); background: var(--marino); color: #fff; font-family: var(--f-titulo); font-weight: 800; }
.comprueba__lista h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.comprueba__lista p { margin: 0; font-size: 1.05rem; }
.comprueba__foto img { border-radius: var(--radio); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--encuadre, 40% 50%); }

/* Casas de aquí: dos años grandes */
.anios { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 0 0 1.5rem; }
.anio strong { display: block; font-family: var(--f-titulo); font-weight: 800; font-size: clamp(3rem, 5vw + 1rem, 4.75rem); line-height: 1; color: var(--marino); letter-spacing: -.03em; }
.anio span { display: block; color: var(--gris-texto); font-size: 1rem; max-width: 18ch; }

/* ═══ 10 · PÁGINAS DE SERVICIO ═══ */
.prosa { max-width: 68ch; }
.prosa h2 { margin-top: 1.6em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.3em; }
.prosa ul:not(.tablillas), .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .4rem; }
.servicio__rejilla { display: grid; gap: 3rem; }
@media (min-width: 1000px) { .servicio__rejilla { grid-template-columns: minmax(0, 1fr) 380px; gap: 4rem; align-items: start; } .servicio__lateral { position: sticky; top: calc(var(--cabecera) + 1.5rem); } }
.lateral__caja { background: var(--arena-suave); border-radius: var(--radio); padding: 1.4rem; margin-bottom: 1.25rem; }
.lateral__caja h2 { font-size: 1.3rem; margin-bottom: .5rem; }
.lateral__caja p { font-size: 1.02rem; }
.lateral__caja .boton { width: 100%; }
.lateral__tiempo { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--marino); }
.foto-cuerpo { margin: 2rem 0; }
.foto-cuerpo img { width: 100%; border-radius: var(--radio); aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.servicio__lateral figure { margin: 0 0 1.25rem; }
.servicio__lateral figure img { width: 100%; border-radius: var(--radio); aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.honesta { background: var(--arena); border-radius: var(--radio); padding: clamp(1.25rem, 3vw, 2rem); margin: 2.5rem 0; }
.honesta h2 { font-size: clamp(1.4rem, 1vw + 1rem, 1.75rem); margin-bottom: .5rem; }
.honesta p:last-child { margin-bottom: 0; }
.permiso-linea { display: flex; gap: .75rem; align-items: flex-start; padding: 1.1rem 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin: 2rem 0; font-size: 1.05rem; }
.permiso-linea .ico { color: var(--teal-texto); width: 1.5rem; height: 1.5rem; margin-top: .15rem; }
.permiso-linea p { margin: 0; }
.relacionados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2rem; }
@media (min-width: 700px) { .relacionados ul { grid-template-columns: repeat(2, 1fr); } }
.relacionados a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--marino); font-family: var(--f-titulo); font-weight: 800; font-size: 1.15rem; }
.relacionados a::after { content: "\2192"; color: var(--naranja); font-size: 1.3rem; }
.relacionados a:hover { color: var(--naranja); }

/* ═══ 11 · FAQ ═══ */
.faq { border-top: 1px solid var(--linea); max-width: 60rem; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item h3 { margin: 0; font-size: inherit; }
.faq__boton { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.15rem, .4vw + 1.05rem, 1.35rem); color: var(--marino); line-height: 1.25; }
.faq__signo { flex: none; width: 1.5rem; height: 1.5rem; position: relative; }
.faq__signo::before, .faq__signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 3px; background: var(--naranja); transform: translate(-50%, -50%); border-radius: 2px; transition: transform .2s ease; }
.faq__signo::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__signo::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__panel > div { padding: 0 0 1.25rem; max-width: 68ch; }
.js .faq__panel[data-abierto="false"] { display: none; }
.banda--marino .faq, .banda--marino .faq__item { border-color: var(--linea-oscura); }

/* ═══ 12 · TABLAS, PROSA Y CIERRE ═══ */
.tabla-envoltura { overflow-x: auto; margin: 1.5rem 0 2rem; border: 1px solid var(--linea); border-radius: var(--radio); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 1rem; }
caption { text-align: left; padding: .9rem 1rem; font-weight: 700; color: var(--marino); }
th, td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-top: 1px solid var(--linea); }
thead th { background: var(--marino); color: #fff; font-family: var(--f-titulo); font-weight: 800; border-top: 0; }
tbody th { font-weight: 700; color: var(--marino); width: 24%; background: var(--arena-suave); }
.fuentes { font-size: .95rem; color: var(--gris-texto); }
.fuentes li { margin-bottom: .35rem; word-break: break-word; }
.revisado { font-size: .95rem; color: var(--gris-texto); }
.respuesta-corta { font-size: clamp(1.2rem, .5vw + 1.08rem, 1.4rem); border-left: 0; background: var(--arena-suave); padding: 1.25rem 1.4rem; border-radius: var(--radio); max-width: 60rem; }
.es-linea { padding: 1.25rem 0; text-align: center; border-top: 1px solid var(--linea); margin: 0; font-size: 1.1rem; }
.es-linea a { font-weight: 700; }
.cierre { position: relative; color: #fff; overflow: hidden; background: var(--marino-hondo); }
.cierre__foto { position: absolute; inset: 0; }
.cierre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.cierre__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 38, 58, .94) 0%, rgba(0, 38, 58, .82) 45%, rgba(0, 38, 58, .35) 100%); }
.cierre .contenedor { position: relative; padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.cierre h2 { color: #fff; max-width: 18ch; }
.cierre p { max-width: 44ch; color: #E8EFF3; }
.cierre--simple { background: var(--marino); }
.lista-zonas { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem 2rem; }
@media (min-width: 700px) { .lista-zonas { grid-template-columns: repeat(2, 1fr); } }
.lista-zonas a { font-family: var(--f-titulo); font-weight: 800; font-size: 1.2rem; }
.lista-ciudades { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.lista-ciudades li { padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.lista-ciudades h3 { margin: 0 0 .25rem; }
.lista-ciudades h3 a { text-decoration: none; }
.lista-ciudades h3 a::after { content: " \2192"; color: var(--naranja); }
.lista-ciudades p { margin: 0; font-size: 1.05rem; color: var(--gris-texto); }
html:not(.js) .solo-js { display: none; }
.tel-grande, .pie__tel, .anio strong { font-style: italic; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { background: var(--arena-suave); border-radius: var(--radio); padding: .35rem .75rem; font-size: 1rem; }

/* ═══ 13 · FORMULARIOS ═══ */
.caja-form { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--sombra); }
.campo { margin-bottom: 1.1rem; }
.campo label, .ventanas legend { display: block; font-weight: 700; margin-bottom: .35rem; color: var(--marino); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 52px; font: inherit; font-size: 1.1rem; color: var(--texto); padding: .65rem .85rem; border: 2px solid #8796A1; border-radius: var(--radio); background: #fff; }
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--marino); outline: 3px solid rgba(184, 84, 0, .35); outline-offset: 1px; }
.campo__ayuda { font-size: .95rem; color: var(--gris-texto); margin: -.15rem 0 .4rem; }
.campo__error { color: #A3260F; font-weight: 700; font-size: .98rem; margin: .4rem 0 0; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: #A3260F; }
.campo--casilla { display: flex; gap: .75rem; align-items: flex-start; }
.campo--casilla input { width: 1.4rem; height: 1.4rem; min-height: 0; margin-top: .2rem; flex: none; accent-color: var(--marino); }
.campo--casilla label { font-weight: 400; font-size: .98rem; color: var(--texto); }
.ventanas { border: 0; padding: 0; margin: 0 0 1.1rem; }
.ventanas__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 560px) { .ventanas__lista { grid-template-columns: repeat(4, 1fr); } }
.ventanas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ventanas label { display: block; padding: .6rem .7rem; border: 2px solid #8796A1; border-radius: var(--radio); cursor: pointer; font-weight: 700; font-size: 1rem; color: var(--marino); text-align: center; }
.ventanas label small { display: block; font-weight: 400; color: var(--gris-texto); font-size: .85rem; }
.ventanas input:checked + label { border-color: var(--marino); background: var(--marino); color: #fff; }
.ventanas input:checked + label small { color: #DCE6EC; }
.ventanas input:focus-visible + label { outline: 3px solid var(--naranja); outline-offset: 2px; }
.trampa { position: absolute; left: -9999px; }
.formulario__aviso { background: #FFF1EC; border: 2px solid #A3260F; color: #6E1A0A; padding: .9rem 1rem; border-radius: var(--radio); font-weight: 700; }
.formulario__legal { font-size: .92rem; color: var(--gris-texto); margin: 1rem 0 0; }
.formulario__exito { background: var(--arena-suave); border-radius: var(--radio); padding: 1.5rem; }
.formulario__exito:focus { outline: 3px solid var(--marino); }
.caja { background: var(--arena-suave); border-radius: var(--radio); padding: 1.4rem; margin-bottom: 1.25rem; }
.caja--marino { background: var(--marino); color: #fff; }
.caja--marino h2, .caja--marino h3 { color: #fff; }
.caja--marino a { color: #fff; }
.tel-grande { font-family: var(--f-titulo); font-weight: 800; font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); margin: .2rem 0 .5rem; }
.tel-grande a { text-decoration: none; }
.pasos { padding-left: 1.4rem; }
.pasos li { margin-bottom: .9rem; }
.pasos h3 { font-size: 1.15rem; margin: 0 0 .2rem; }
.pasos p { margin: 0; font-size: 1.05rem; }
.datos-lista { margin: 0; }
.datos-lista > div { padding: .9rem 0; border-bottom: 1px solid var(--linea); }
.datos-lista dt { font-weight: 700; color: var(--marino); }
.datos-lista dd { margin: .2rem 0 0; }

/* ═══ 14 · PIE Y BARRA MÓVIL ═══ */
.pie { position: relative; background: var(--marino-hondo); color: #DCE6EC; padding: 3.5rem 0 7rem; font-size: 1.02rem; }
/* Las franjas de la camioneta: una sola vez por página, aquí */
.pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: linear-gradient(var(--sol) 0 33.3%, var(--teal) 33.3% 66.6%, var(--marino) 66.6% 100%); }
.pie a { color: #fff; }
.pie h2 { color: #fff; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .8rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .45rem; }
.pie__rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .pie__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pie__rejilla { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.pie__logo { width: 210px; height: auto; margin-bottom: 1rem; }
.pie__tel { font-family: var(--f-titulo); font-weight: 800; font-size: 1.7rem; text-decoration: none; }
.pie__lic { display: flex; gap: .5rem; align-items: center; }
.pie__legal { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea-oscura); font-size: .95rem; }
.pie__legal p { margin: 0; }
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--linea); box-shadow: 0 -6px 20px rgba(0, 38, 58, .1); transition: transform .25s ease; }
.barra-movil .boton { min-height: 50px; padding: .5rem .6rem; font-size: 1.05rem; }
.hero-a-la-vista .barra-movil, .escribiendo .barra-movil { transform: translateY(110%); }
@media (min-width: 900px) { .barra-movil { display: none; } .pie { padding-bottom: 3rem; } }

/* ═══ 15 · MOVIMIENTO REDUCIDO ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .apertura { display: none !important; }
}

/* ═══ 16 · IMPRESIÓN ═══ */
@media print {
  .cabecera, .barra-movil, .menu-movil, .apertura, .pie::before, .botones { display: none !important; }
  body { font-size: 12pt; }
  .faq__panel { display: block !important; }
}