/* ═══════════════════════════════════════════════════════════════════════
   FLORIDA GARAGE DOOR EXPERTS · hoja de estilos única
   369 Creative Agency · septiembre 2026

   Concepto: "Garage abierto". Todo lo que una estafa esconde, esta página
   lo cuelga en la pared: precio, licencia, quién viene, qué cubre la garantía.

   Índice
   0 · Variables (colores medidos, tipografía, espacios)
   1 · Base y utilidades
   2 · Botones e íconos
   3 · Cabecera y navegación
   4 · Hero "el garaje" y la puerta que se abre (elemento firma)
   5 · Placa de licencia
   6 · Presupuesto escrito (el gadget que vende)
   7 · Tablero de servicios y precios
   8 · Qué pasa cuando llamas
   9 · Manual honesto (abrir a mano)
   10 · Garantía
   11 · Reseñas, marcas, tormenta, zonas
   12 · Cierre y pie
   13 · Páginas de servicio y contacto
   14 · Barra móvil
   15 · Movimiento reducido e impresión
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══ 0 · VARIABLES ═══════════════════════════════════════════════════ */
:root {
  /* Colores tomados del logo. Contraste medido contra su fondo habitual:
     --tinta sobre --papel 15.6:1 · --marino sobre --papel 11.9:1
     blanco sobre --rojo 7.1:1 · blanco sobre --marino 13.4:1
     --tinta-2 sobre --papel 8.9:1 · --acero-txt sobre --marino 5.2:1 */
  --marino: #14294a;          /* azul del logo: base de la marca */
  --marino-2: #0d1b33;        /* más profundo: pie y pared del garaje */
  --marino-3: #1f3a66;        /* superficies sobre marino */
  --rojo: #b02028;            /* rojo del logo: SOLO botones y acentos de acción */
  --rojo-2: #8c171e;          /* rojo en hover/active */
  --papel: #f4f5f2;           /* blanco de taller, ligeramente frío */
  --blanco: #ffffff;
  --copia: #fbf3cf;           /* papel amarillo de copia carbónica (el presupuesto) */
  --copia-2: #efe3aa;         /* borde y sombras del papel de copia */
  --acero: #8a939e;           /* gris galvanizado: placas, rieles */
  --acero-claro: #d5d9de;
  --acero-txt: #b9c3cf;       /* texto secundario sobre marino */
  --tinta: #121a28;           /* casi negro con tinte marino */
  --tinta-2: #3d4757;         /* texto secundario sobre papel */
  --linea: #d9dde2;
  --exito: #1d6b3a;
  --foco: #1a5fd0;            /* anillo de foco, 3.6:1 sobre papel */

  --fuente-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fuente-texto: "Barlow", "Segoe UI", sans-serif;

  /* Tamaño base 18px: la tipografía chica no se lee (regla de la casa). */
  --t-base: 1.125rem;
  --t-chico: 0.95rem;
  --t-h3: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --t-h2: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  --t-h1: clamp(2.8rem, 1.6rem + 5.6vw, 6rem);

  --ancho: 1200px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --e1: 0.5rem; --e2: 1rem; --e3: 1.5rem; --e4: 2.5rem; --e5: 4rem;
  --seccion: clamp(4rem, 9vw, 7.5rem);

  --radio: 6px;
  --radio-2: 12px;
  --sombra: 0 10px 30px -12px rgba(13, 27, 51, 0.35);
  --sombra-2: 0 24px 60px -24px rgba(13, 27, 51, 0.45);

  --sale: cubic-bezier(0.2, 0.7, 0.2, 1);   /* salida exponencial */
  --t-rapido: 160ms;
  --t-medio: 320ms;
}


/* ═══ 1 · BASE Y UTILIDADES ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--papel); color: var(--tinta);
  font-family: var(--fuente-texto); font-size: var(--t-base); line-height: 1.55;
  font-variant-numeric: tabular-nums;   /* los precios alinean en columna */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--fuente-titulo); line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; }
h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 var(--e2); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--e2); padding-left: 1.25rem; }
strong { font-weight: 700; }
small { font-size: var(--t-chico); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.seccion--marino { background: var(--marino); color: var(--blanco); }
.seccion--marino h2, .seccion--marino h3 { color: var(--blanco); }
.seccion--blanco { background: var(--blanco); }
.lede { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.45; color: var(--tinta-2); max-width: 62ch; }
.seccion--marino .lede { color: var(--acero-txt); }
.prosa { max-width: 68ch; }
.prosa h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); margin: var(--e4) 0 var(--e2); }
.prosa h3 { margin: var(--e3) 0 var(--e1); }
.prosa p + p { margin-top: 0; }
.encabezado { max-width: 62ch; margin-bottom: var(--e4); }
.encabezado h2 { margin-bottom: var(--e2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.salto { position: absolute; left: var(--e2); top: -100px; z-index: 200; background: var(--marino); color: var(--blanco); padding: 0.6rem 1rem; border-radius: var(--radio); }
.salto:focus { top: var(--e2); }
.provisional { /* dato sin confirmar: el cliente lo ve en la demo y lo cambia en CONFIGURACIÓN */
  border-bottom: 2px dotted var(--acero); cursor: help;
}
.migas { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 var(--e2); padding: 0; list-style: none; font-size: var(--t-chico); color: var(--tinta-2); }
.migas li + li::before { content: "/"; margin-right: 0.4rem; color: var(--acero); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }


/* ═══ 2 · BOTONES E ÍCONOS ═══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.75rem 1.5rem;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radio); border: 2px solid transparent; cursor: pointer;
  transition: background var(--t-rapido) var(--sale), color var(--t-rapido) var(--sale), transform var(--t-rapido) var(--sale), box-shadow var(--t-rapido) var(--sale);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--rojo { background: var(--rojo); color: var(--blanco); box-shadow: 0 8px 18px -10px rgba(176, 32, 40, 0.7); }
.btn--rojo:hover { background: var(--rojo-2); color: var(--blanco); }
.btn--marino { background: var(--marino); color: var(--blanco); }
.btn--marino:hover { background: var(--marino-3); }
.btn--contorno { background: transparent; color: var(--marino); border-color: var(--marino); }
.btn--contorno:hover { background: var(--marino); color: var(--blanco); }
.btn--claro { background: var(--blanco); color: var(--marino); }
.btn--claro:hover { background: var(--papel); }
.btn--contorno-claro { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, 0.55); }
.btn--contorno-claro:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--blanco); }
.btn--bloque { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; pointer-events: none; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--marino); text-decoration: none; }
.enlace-flecha:hover { text-decoration: underline; }
.telefono-grande { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); text-decoration: none; letter-spacing: 0.01em; }


/* ═══ 3 · CABECERA Y NAVEGACIÓN ══════════════════════════════════════ */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.cabecera__interior { display: flex; align-items: center; gap: var(--e3); min-height: 84px; }
.cabecera__logo { display: block; flex: none; }
.cabecera__logo img { height: 52px; width: auto; }
.nav { margin-left: auto; }
.nav__lista { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__enlace, .nav__boton {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.7rem 0.9rem;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--marino); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--radio);
}
.nav__enlace:hover, .nav__boton:hover, .nav__boton[aria-expanded="true"] { background: var(--papel); }
.nav__enlace[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--rojo); }
.nav__boton .ico { width: 1em; height: 1em; transition: transform var(--t-rapido) var(--sale); }
.nav__boton[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__panel {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 300px;
  margin: 0; padding: 0.5rem; list-style: none;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-2); box-shadow: var(--sombra-2);
}
.nav__panel[hidden] { display: none; }
.nav__panel a { display: block; padding: 0.6rem 0.8rem; border-radius: var(--radio); text-decoration: none; font-weight: 500; }
.nav__panel a:hover { background: var(--papel); }
.nav__panel a[aria-current="page"] { color: var(--rojo); font-weight: 700; }
.nav__panel small { display: block; color: var(--tinta-2); }
.cabecera__llamar { flex: none; }
/* Dos líneas: el botón principal y, debajo, la línea directa en pequeño */
.cabecera__tels { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding-block: 0.5rem; }
.cabecera__tels .cabecera__llamar { min-height: 42px; padding: 0.4rem 1.2rem; font-size: 1.15rem; }
.cabecera__tel2 { font-size: 0.95rem; font-weight: 600; line-height: 1; color: var(--marino); text-decoration: none; white-space: nowrap; }
.cabecera__tel2 span { font-family: var(--fuente-titulo); font-size: 1.1rem; font-weight: 700; }
.cabecera__tel2:hover { color: var(--rojo); }
/* La cabecera nunca parte palabras del menú en dos líneas */
.nav__enlace, .nav__boton { white-space: nowrap; }
/* Anchos intermedios: menú más compacto y la segunda línea sale de la cabecera (sigue en hero, pie y contacto) */
@media (max-width: 1320px) {
  .nav__enlace, .nav__boton { padding-inline: 0.6rem; font-size: 1.1rem; }
  .cabecera__interior { gap: var(--e2); }
}
@media (max-width: 1220px) {
  .cabecera__tel2 { display: none; }
}
.menu-movil__tel2 { margin-top: 0.6rem; }
.garaje__tel2 { margin: var(--e3) 0 0; color: var(--acero-txt); font-size: 1.05rem; }
.garaje__tel2 a { color: var(--blanco); font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.garaje__tel2 a:hover { text-decoration: underline; }
.telefono-grande--2 { display: block; margin-top: 0.25rem; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); }
.tarjeta-region--directa { border: 2px solid var(--marino); }
.cabecera__llamar-tel { display: none; }
.hamburguesa {
  display: none; flex: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: none; border: 2px solid var(--linea); border-radius: var(--radio); color: var(--marino); cursor: pointer;
}
.hamburguesa .ico { width: 26px; height: 26px; }
.menu-movil {
  display: none; position: fixed; inset: 84px 0 0 0; z-index: 99; overflow-y: auto;
  background: var(--blanco); padding: var(--e3) var(--margen) calc(var(--e5) + 80px);
}
.menu-movil[data-abierto="true"] { display: block; }
.menu-movil__grupo { margin-bottom: var(--e3); }
.menu-movil__grupo h3 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 0.5rem; }
.menu-movil__grupo a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--linea); font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 700; text-decoration: none; color: var(--marino); }
.menu-movil__grupo a[aria-current="page"] { color: var(--rojo); }
.menu-movil__tel { margin-top: var(--e3); }

@media (max-width: 1100px) {
  .nav { display: none; }
  .hamburguesa { display: inline-flex; margin-left: auto; }
  .cabecera__llamar, .cabecera__tels { display: none; }
  .cabecera__llamar-tel { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; background: var(--rojo); color: var(--blanco); border-radius: var(--radio); }
  .cabecera__llamar-tel .ico { width: 24px; height: 24px; }
}
@media (max-width: 600px) {
  .cabecera__interior { min-height: 68px; gap: var(--e2); }
  .cabecera__logo img { height: 38px; }
  .menu-movil { inset-block-start: 68px; }
}


/* ═══ 4 · HERO "EL GARAJE" Y LA PUERTA QUE SE ABRE ═══════════════════
   La sección es el interior del garaje. Encima, absoluta, va la puerta
   seccional. Con JS la puerta arranca cerrada y sube una sola vez
   (un único momento orquestado). Sin JS, o con movimiento reducido,
   la puerta no existe: el interior se ve completo desde el primer byte.
   ════════════════════════════════════════════════════════════════════ */
.garaje {
  position: relative; overflow: clip;
  background: var(--marino-2); color: var(--blanco);
  /* Pared de pegboard: puntos en retícula, apenas visibles */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.09) 1.2px, transparent 1.6px),
    linear-gradient(180deg, #102040 0%, var(--marino-2) 60%, #0a1527 100%);
  background-size: 28px 28px, 100% 100%;
}
.garaje::after { /* piso de concreto */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(138, 147, 158, 0.16) 100%);
  pointer-events: none;
}
.garaje__interior {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem);
}
.garaje__texto h1 { margin-bottom: var(--e3); }
.garaje__texto h1 span { display: block; }
.garaje__texto .lede { color: var(--acero-txt); margin-bottom: var(--e4); }
.garaje__pruebas { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e4) 0 0; padding: 0; list-style: none; font-size: var(--t-chico); color: var(--acero-txt); }
.garaje__pruebas li { display: inline-flex; align-items: center; gap: 0.45rem; }
.garaje__pruebas .ico { width: 1.1em; height: 1.1em; color: var(--blanco); }

/* La pared: lo que cuelga a la vista */
.pared { position: relative; display: grid; gap: var(--e3); }
.pared::before { /* estante: una viga clara sobre la que apoyan las piezas */
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -1.25rem; height: 10px;
  background: linear-gradient(180deg, var(--acero-claro), var(--acero)); border-radius: 2px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.6);
}
.placa-lic {
  position: relative;
  padding: 1.1rem 1.3rem 1.1rem 1.3rem;
  background: linear-gradient(180deg, #c9d0d8 0%, #a7b0bb 55%, #b8c0ca 100%);
  color: var(--marino-2);
  border: 2px solid #6e7884; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(0, 0, 0, 0.2), 0 12px 24px -10px rgba(0, 0, 0, 0.7);
  font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.04em;
}
.placa-lic::before, .placa-lic::after { /* remaches */
  content: ""; position: absolute; top: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2f4f6, #7c8794 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.placa-lic::before { left: 9px; } .placa-lic::after { right: 9px; }
.placa-lic__titulo { font-size: 0.9rem; font-weight: 700; opacity: 0.75; margin-bottom: 0.15rem; }
.placa-lic__num { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.placa-lic__fila { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.5rem; font-size: 0.95rem; font-weight: 700; }
.pared .placa-lic { transform: rotate(-1deg); }

.tablero-mini {
  position: relative; padding: 1.2rem 1.4rem 1.3rem;
  background: var(--marino); border: 2px solid var(--acero-claro); border-radius: 4px;
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.8);
  transform: rotate(0.6deg);
}
.tablero-mini::before { /* el gancho del que cuelga */
  content: ""; position: absolute; top: -18px; left: 50%; width: 14px; height: 18px; transform: translateX(-50%);
  border: 3px solid var(--acero-claro); border-bottom: 0; border-radius: 8px 8px 0 0;
}
.tablero-mini h2 { font-size: 1.1rem; letter-spacing: 0.1em; color: var(--acero-txt); margin-bottom: 0.6rem; }
.tablero-mini ul { margin: 0; padding: 0; list-style: none; }
.tablero-mini li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0; border-top: 1px dashed rgba(255, 255, 255, 0.18); font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 600; }
.tablero-mini li::after { content: ""; flex: 1; order: 2; border-bottom: 2px dotted rgba(255, 255, 255, 0.35); transform: translateY(-0.35em); }
.tablero-mini li span:first-child { order: 1; }
.tablero-mini li span:last-child { order: 3; color: var(--blanco); font-weight: 800; }
.tablero-mini p { margin: 0.7rem 0 0; font-size: var(--t-chico); color: var(--acero-txt); font-family: var(--fuente-texto); }

/* La puerta */
.puerta { display: none; }
.js .puerta {
  display: grid; grid-template-rows: repeat(4, 1fr);
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  will-change: transform;
}
.puerta__panel {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, #e9ecef 0%, #d3d8dd 48%, #c2c8cf 52%, #dde1e5 100%);
  border-bottom: 3px solid #9aa4ae;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -6px 12px -6px rgba(0, 0, 0, 0.35);
}
.puerta__panel::before { /* cuatro relieves rectangulares por panel, como una puerta real */
  content: ""; position: absolute; inset: 14% 3%;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 1%,
      rgba(0, 0, 0, 0.07) 1%, rgba(0, 0, 0, 0.07) 1.6%,
      rgba(255, 255, 255, 0.55) 1.6%, rgba(255, 255, 255, 0.55) 2.2%,
      transparent 2.2%, transparent 23%,
      rgba(255, 255, 255, 0.55) 23%, rgba(255, 255, 255, 0.55) 23.6%,
      rgba(0, 0, 0, 0.07) 23.6%, rgba(0, 0, 0, 0.07) 24.2%,
      transparent 24.2%, transparent 25%);
  border-top: 2px solid rgba(255, 255, 255, 0.6); border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.puerta__ventanas { position: absolute; inset: 18% 6%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%; }
.puerta__ventanas span {
  background: linear-gradient(160deg, #263a5a 0%, #0e1c33 55%, #1c2f4f 100%);
  border: 3px solid #f0f2f4; border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.puerta__stencil {
  position: absolute; left: 0; right: 0; bottom: -0.15em; z-index: 2;
  text-align: center; font-family: var(--fuente-titulo); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(3rem, 10vw, 9rem); line-height: 0.9;
  color: var(--rojo); opacity: 0.9;
}
.puerta__panel--texto-arriba .puerta__stencil { bottom: auto; top: -0.15em; }
.puerta__riel { /* riel superior: la puerta "entra" detrás de él */
  position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 6;
  background: linear-gradient(180deg, #4a535e, #2c333c);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.7);
  display: none;
}
.js .puerta__riel { display: block; }
.puerta__manija { /* manija en el panel inferior, a la derecha del centro */
  position: absolute; left: 52%; bottom: 40%; width: 64px; height: 14px; border-radius: 8px;
  background: linear-gradient(180deg, #6e7884, #3d454f); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Apertura: un segundo y medio, con un pequeño "hundimiento" al arrancar el motor */
@keyframes abrir-puerta {
  0%   { transform: translateY(0); }
  8%   { transform: translateY(0.6%); }
  100% { transform: translateY(-103%); }
}
.js .garaje[data-puerta="abriendo"] .puerta { animation: abrir-puerta 1500ms cubic-bezier(0.65, 0, 0.25, 1) forwards; animation-delay: 380ms; }
.js .garaje[data-puerta="abierta"] .puerta { display: none; }
.js .garaje[data-puerta="abierta"] .puerta__riel { display: none; }
/* Lo de adentro también respira: aparece mientras la puerta sube */
.js .garaje[data-puerta="cerrada"] .garaje__interior, .js .garaje[data-puerta="abriendo"] .garaje__interior { opacity: 0; transform: translateY(12px); }
.js .garaje[data-puerta="abriendo"] .garaje__interior { animation: entrar-interior 900ms var(--sale) forwards; animation-delay: 900ms; }
.js .garaje[data-puerta="abierta"] .garaje__interior { opacity: 1; transform: none; }
@keyframes entrar-interior { to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .garaje__interior { grid-template-columns: minmax(0, 1fr); padding-block: 3rem 4rem; }
  .pared { max-width: 480px; }
  .puerta__stencil { font-size: clamp(2.4rem, 12vw, 5rem); }
}


/* ═══ 5 · PLACA DE LICENCIA (franja bajo el hero) ═══════════════════ */
.franja {
  background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.franja__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); margin: 0; padding: var(--e3) 0; list-style: none; }
.franja__lista li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-chico); line-height: 1.35; }
.franja__lista .ico { width: 26px; height: 26px; color: var(--rojo); margin-top: 2px; }
.franja__lista strong { display: block; font-family: var(--fuente-titulo); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--marino); }
@media (max-width: 900px) { .franja__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .franja__lista { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 6 · PRESUPUESTO ESCRITO ════════════════════════════════════════
   Izquierda: el visitante marca problema, tipo de puerta y zona.
   Derecha: una copia carbónica amarilla que se rellena en vivo, con
   sello, número y botones para fijarla por mensaje de texto o llamada.
   ════════════════════════════════════════════════════════════════════ */
.presupuesto { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.presupuesto__form fieldset { border: 0; padding: 0; margin: 0 0 var(--e4); min-width: 0; }
.presupuesto__form legend { font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.8rem; padding: 0; }
.presupuesto__form legend span { color: var(--tinta-2); font-family: var(--fuente-texto); font-size: var(--t-chico); font-weight: 400; margin-left: 0.5rem; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.6rem; }
.opcion { position: relative; display: block; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion__cara {
  display: flex; align-items: center; gap: 0.7rem; min-height: 64px; padding: 0.7rem 0.9rem;
  background: var(--blanco); border: 2px solid var(--linea); border-radius: var(--radio);
  font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: border-color var(--t-rapido) var(--sale), background var(--t-rapido) var(--sale), box-shadow var(--t-rapido) var(--sale);
}
.opcion__cara .ico { width: 30px; height: 30px; color: var(--marino); stroke-width: 1.5; }
.opcion:hover .opcion__cara { border-color: var(--acero); }
.opcion input:checked + .opcion__cara { border-color: var(--marino); background: var(--marino); color: var(--blanco); box-shadow: 0 8px 20px -12px rgba(20, 41, 74, 0.8); }
.opcion input:checked + .opcion__cara .ico { color: var(--blanco); }
.opcion input:focus-visible + .opcion__cara { outline: 3px solid var(--foco); outline-offset: 2px; }
.segmento { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.segmento .opcion__cara { min-height: 52px; padding: 0.55rem 1rem; }
.presupuesto__nota { font-size: var(--t-chico); color: var(--tinta-2); max-width: 52ch; }

/* La copia carbónica */
.copia {
  position: relative;
  background: var(--copia); color: var(--tinta);
  border: 1px solid var(--copia-2); border-radius: 3px;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -20px rgba(13, 27, 51, 0.55), 0 2px 0 var(--copia-2);
  /* Borde superior perforado, como hoja arrancada de un talonario */
  -webkit-mask-image: radial-gradient(circle at 10px 0, transparent 6px, #000 6.5px);
  -webkit-mask-size: 20px 100%; -webkit-mask-repeat: repeat-x;
  mask-image: radial-gradient(circle at 10px 0, transparent 6px, #000 6.5px);
  mask-size: 20px 100%; mask-repeat: repeat-x;
  padding-top: 2rem;
}
.copia__cabeza { display: flex; justify-content: space-between; gap: var(--e2); align-items: flex-start; padding-bottom: 0.8rem; border-bottom: 2px solid var(--tinta); }
.copia__titulo { font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.copia__titulo small { display: block; font-family: var(--fuente-texto); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--tinta-2); margin-top: 0.3rem; }
.copia__num { text-align: right; font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.35; }
.copia__num strong { display: block; color: var(--tinta); font-size: 1.05rem; }
.copia__para { padding: 0.8rem 0; border-bottom: 1px dashed rgba(18, 26, 40, 0.35); font-size: var(--t-chico); color: var(--tinta-2); }
.copia__para strong { color: var(--tinta); font-size: 1.05rem; }
.copia__lineas { list-style: none; margin: 0; padding: 0.4rem 0 0; }
.copia__linea { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px dotted rgba(18, 26, 40, 0.3); }
.copia__linea span:first-child { flex: 1; }
.copia__linea span:first-child small { display: block; color: var(--tinta-2); }
.copia__linea span:last-child { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.45rem; white-space: nowrap; }
.copia__linea--total { border-bottom: 3px double var(--tinta); }
.copia__linea--total span:last-child { font-size: 1.9rem; color: var(--rojo); }
.copia__excluye { margin: 0.9rem 0 0; font-size: var(--t-chico); color: var(--tinta-2); }
.copia__excluye strong { color: var(--tinta); }
.copia__promesa { margin: 0.9rem 0 0; padding: 0.8rem 0.9rem; background: rgba(255, 255, 255, 0.55); border-left: 1px solid var(--tinta); font-size: var(--t-chico); }
.copia__acciones { display: grid; gap: 0.6rem; margin-top: var(--e3); }
.copia__acciones .btn { font-size: 1.15rem; }
.copia__pie { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.copia__sello {
  display: inline-block; padding: 0.2rem 0.6rem;
  border: 3px solid var(--rojo); border-radius: 6px;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.35rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rojo);
  transform: rotate(-4deg); opacity: 0.9;
}
/* El sello se "estampa" cada vez que el visitante cambia algo: respuesta a su acción, no decoración */
.copia[data-sellando="true"] .copia__sello { animation: estampar 380ms var(--sale); }
@keyframes estampar { 0% { transform: rotate(-9deg) scale(1.5); opacity: 0; } 60% { opacity: 0.95; } 100% { transform: rotate(-9deg) scale(1); opacity: 0.85; } }
.copia__form { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px dashed rgba(18, 26, 40, 0.35); }
.copia__form[hidden] { display: none; }
.campo { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }
.campo label { font-weight: 600; font-size: var(--t-chico); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 48px; padding: 0.6rem 0.8rem;
  font: inherit; color: var(--tinta); background: var(--blanco);
  border: 2px solid var(--linea); border-radius: var(--radio);
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--marino); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo--fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.campo .error { display: none; color: var(--rojo); font-size: 0.9rem; }
.campo[data-invalido="true"] .error { display: block; }
.campo[data-invalido="true"] input { border-color: var(--rojo); }
.form__estado { margin-top: 0.6rem; font-weight: 600; }
.form__estado[data-tipo="ok"] { color: var(--exito); }
.form__estado[data-tipo="error"] { color: var(--rojo); }
.trampa { position: absolute; left: -9999px; }

@media (max-width: 960px) {
  .presupuesto { grid-template-columns: minmax(0, 1fr); }
  .copia__sello { font-size: 1.15rem !important; }
}
@media (max-width: 480px) {
  .opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opcion__cara { flex-direction: column; align-items: flex-start; gap: 0.4rem; font-size: 0.95rem; }
  .copia { padding-inline: 1.1rem; }
  .campo--fila { grid-template-columns: minmax(0, 1fr); }
}


/* ═══ 7 · TABLERO DE SERVICIOS Y PRECIOS ═════════════════════════════
   No es una grilla de tarjetas iguales: es el tablero de precios de un
   taller, con puntos de guía hasta el "desde $".
   ════════════════════════════════════════════════════════════════════ */
.tablero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
.tablero__grupo h3 { font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 0.4rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--tinta); }
.tablero__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem 1.2rem;
  padding: 1rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: inherit;
  transition: background var(--t-rapido) var(--sale);
}
.tablero__fila:hover { background: rgba(20, 41, 74, 0.04); }
.tablero__fila:hover .tablero__nombre { text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 4px; }
.tablero__nombre { font-family: var(--fuente-titulo); font-size: 1.55rem; font-weight: 700; line-height: 1.05; }
.tablero__incluye { display: block; margin-top: 0.25rem; font-family: var(--fuente-texto); font-size: var(--t-chico); font-weight: 400; color: var(--tinta-2); }
.tablero__guia { align-self: center; width: clamp(40px, 12vw, 160px); border-bottom: 3px dotted var(--acero); transform: translateY(-4px); }
.tablero__precio { text-align: right; font-family: var(--fuente-titulo); font-size: 1.45rem; font-weight: 800; white-space: nowrap; }
.tablero__precio small { display: block; font-family: var(--fuente-texto); font-size: 0.8rem; font-weight: 500; color: var(--tinta-2); }
.tablero__precio .ico { display: none; }
@media (min-width: 900px) { .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e5); } }
@media (max-width: 520px) {
  .tablero__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .tablero__guia { display: none; }
}


/* ═══ 8 · QUÉ PASA CUANDO LLAMAS (secuencia real: va numerada) ══════ */
.pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.paso { position: relative; padding-top: 0.5rem; border-top: 3px solid var(--rojo); }
.paso::before { counter-increment: paso; content: counter(paso, decimal-leading-zero); display: block; font-family: var(--fuente-titulo); font-size: 3.2rem; font-weight: 800; line-height: 1; color: var(--rojo); margin-bottom: 0.4rem; }
.paso h3 { margin-bottom: 0.4rem; }
.paso p { color: var(--tinta-2); margin: 0; font-size: 1.02rem; }
.seccion--marino .paso p { color: var(--acero-txt); }
.seccion--marino .paso { border-top-color: rgba(255, 255, 255, 0.35); }
.seccion--marino .paso::before { color: var(--blanco); }
@media (max-width: 900px) { .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pasos { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 9 · MANUAL HONESTO: abrir a mano mientras tanto ═══════════════ */
.manual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.manual ol { padding-left: 1.4rem; }
.manual ol li { margin-bottom: 0.5rem; }
.manual__aviso { display: flex; gap: 0.7rem; padding: 0.9rem 1rem; background: var(--blanco); border: 2px solid var(--rojo); border-radius: var(--radio); font-size: var(--t-chico); }
.manual__aviso .ico { width: 28px; height: 28px; color: var(--rojo); flex: none; }
.manual__dibujo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-2); padding: var(--e3); }
.manual__dibujo svg { width: 100%; height: auto; }
.manual__dibujo figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--tinta-2); }
@media (max-width: 860px) { .manual { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 10 · GARANTÍA ═══════════════════════════════════════════════════ */
.garantia { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--linea); }
.garantia th, .garantia td { padding: 0.9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.garantia thead th { font-family: var(--fuente-titulo); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--marino); color: var(--blanco); }
.garantia tbody th { font-weight: 700; width: 28%; }
.garantia td:nth-child(2) { font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 700; white-space: nowrap; }
.garantia td small { display: block; color: var(--tinta-2); font-family: var(--fuente-texto); font-size: 0.9rem; font-weight: 400; white-space: normal; }
.garantia-nota { margin-top: var(--e2); font-size: var(--t-chico); color: var(--tinta-2); max-width: 70ch; }
@media (max-width: 700px) {
  .garantia thead { display: none; }
  .garantia tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0.6rem 0; }
  .garantia th, .garantia td { border: 0; padding: 0.25rem 1rem; }
  .garantia tbody th { width: auto; }
  .garantia tbody tr { border-bottom: 1px solid var(--linea); }
}


/* ═══ 11 · RESEÑAS · MARCAS · TORMENTA · ZONAS ═══════════════════════ */
.resenas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.resena { margin: 0; padding: 1.4rem 1.5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-2); }
.resena blockquote { margin: 0; }
.resena p { font-size: 1.05rem; }
.resena h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.resena footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.9rem; color: var(--tinta-2); }
.resena .estrellas { display: inline-flex; gap: 2px; color: #d99a12; }
.resena .estrellas .ico { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.resenas-pie { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; font-size: var(--t-chico); color: var(--tinta-2); }
@media (max-width: 760px) { .resenas { grid-template-columns: minmax(0, 1fr); } }

.marcas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.2rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.marcas li { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0.6rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.marcas img { max-height: 44px; width: auto; object-fit: contain; }
.marcas-nota { margin-top: var(--e2); font-size: var(--t-chico); color: var(--tinta-2); }

.tormenta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--e4); align-items: center; padding: clamp(1.5rem, 4vw, 3rem); background: var(--blanco); border: 2px solid var(--marino); border-radius: var(--radio-2); }
.tormenta h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 0.6rem; }
.tormenta ul { margin: 0.5rem 0 0; }
.tormenta__precio { text-align: center; padding: 1.2rem; background: var(--marino); color: var(--blanco); border-radius: var(--radio-2); }
.tormenta__precio strong { display: block; font-family: var(--fuente-titulo); font-size: 3.4rem; font-weight: 800; line-height: 1; }
.tormenta__precio span { display: block; font-size: var(--t-chico); color: var(--acero-txt); margin-bottom: 0.9rem; }
@media (max-width: 800px) { .tormenta { grid-template-columns: minmax(0, 1fr); } }

.zonas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.zona { padding: 1.4rem 1.5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-2); }
.zona h3 { text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem; }
.zona .telefono-grande { display: inline-block; color: var(--marino); margin-bottom: 0.6rem; }
.zona p { font-size: 0.95rem; color: var(--tinta-2); line-height: 1.5; margin: 0; }
.zona p span { white-space: nowrap; }
@media (max-width: 900px) { .zonas { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 12 · CIERRE Y PIE ══════════════════════════════════════════════ */
.cierre { text-align: center; }
.cierre h2 { margin-bottom: var(--e2); }
.cierre .lede { margin-inline: auto; margin-bottom: var(--e3); }
.cierre .acciones { justify-content: center; }
.cierre .telefono-grande { color: var(--blanco); }

.pie { background: var(--marino-2); color: var(--acero-txt); padding: var(--e5) 0 calc(var(--e4) + 72px); font-size: var(--t-chico); }
.pie__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: var(--e4); }
/* El logo del pie es el original (marino + rojo). Sobre el fondo marino necesita una placa
   clara para que el azul del dibujo se lea; sin ella la cara del técnico se pierde. */
.pie__logo picture { display: inline-block; background: var(--blanco); padding: 0.9rem 1.1rem; border-radius: var(--radio-2); margin-bottom: var(--e2); }
.pie__logo img { width: min(100%, 280px); height: auto; display: block; }
.pie h3 { color: var(--blanco); font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.7rem; }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li { margin-bottom: 0.4rem; }
.pie a { color: var(--blanco); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie__placa { margin-top: var(--e3); }
.pie__placa .placa-lic { transform: none; }
.pie__pagos { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.pie__pagos img { height: 32px; width: auto; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2); margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid rgba(255, 255, 255, 0.15); }
@media (max-width: 960px) { .pie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pie__grid { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 13 · PÁGINAS DE SERVICIO Y CONTACTO ════════════════════════════ */
.ficha { background: var(--marino); color: var(--blanco); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.ficha .migas { color: var(--acero-txt); }
.ficha .migas li + li::before { color: var(--acero); }
.ficha__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.ficha h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem); margin-bottom: var(--e2); }
.ficha .lede { color: var(--acero-txt); }
.ficha__meta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--e3) 0 0; padding: 0; list-style: none; }
.ficha__meta li { padding: 0.45rem 0.9rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; font-size: var(--t-chico); }
.ficha__meta strong { color: var(--blanco); }
.ficha__incluye { padding: 1.3rem 1.5rem; background: var(--marino-2); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radio-2); }
.ficha__incluye h2 { font-size: 1.05rem; letter-spacing: 0.1em; color: var(--acero-txt); margin-bottom: 0.6rem; }
.ficha__incluye ul { margin: 0; padding: 0; list-style: none; }
.ficha__incluye li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.4rem 0; border-top: 1px dashed rgba(255, 255, 255, 0.18); font-weight: 500; }
.ficha__incluye .ico { width: 20px; height: 20px; color: var(--blanco); margin-top: 3px; }
@media (max-width: 860px) { .ficha__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

.articulo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e5); align-items: start; }
.aparte { position: sticky; top: 110px; display: grid; gap: var(--e3); }
.aparte__caja { padding: 1.3rem 1.4rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-2); }
.aparte__caja h3 { font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 0.6rem; }
.aparte__caja .telefono-grande { color: var(--marino); display: block; }
.aparte__caja ul { padding-left: 1.1rem; margin: 0; }
.aparte__caja li { margin-bottom: 0.3rem; }
@media (max-width: 960px) { .articulo { grid-template-columns: minmax(0, 1fr); } .aparte { position: static; } }

.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contacto .copia { padding-top: 2rem; }
.tarjetas-region { display: grid; gap: var(--e2); }
.tarjeta-region { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; padding: 1.1rem 1.3rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-2); }
.tarjeta-region h3 { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: 0.03em; }
.tarjeta-region .telefono-grande { color: var(--marino); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
.tarjeta-region p { grid-column: 1 / -1; margin: 0; font-size: var(--t-chico); color: var(--tinta-2); }
.tarjeta-region .btn { font-size: 1rem; min-height: 44px; padding-inline: 1rem; }
.horario { margin-top: var(--e3); padding: 1.1rem 1.3rem; background: var(--marino); color: var(--blanco); border-radius: var(--radio-2); }
.horario strong { font-family: var(--fuente-titulo); font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; display: block; }
.horario span { color: var(--acero-txt); font-size: var(--t-chico); }
@media (max-width: 900px) { .contacto { grid-template-columns: minmax(0, 1fr); } }


/* ═══ 14 · BARRA MÓVIL FIJA ══════════════════════════════════════════ */
.barra-movil {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--linea); border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-movil a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: 62px; padding: 0.4rem 0.3rem;
  background: var(--blanco); color: var(--marino); text-decoration: none;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.barra-movil a .ico { width: 24px; height: 24px; }
.barra-movil a.barra-movil__principal { background: var(--rojo); color: var(--blanco); }
@media (max-width: 760px) { .barra-movil { display: grid; } }
@media (min-width: 761px) { .pie { padding-bottom: var(--e5); } }


/* ═══ 16 · FOTOS ══════════════════════════════════════════════════════
   Fotos generadas para el sitio (ver prompts-imagenes-flgarage.md).
   Ninguna muestra caras: la promesa "la foto de tu técnico" se cumple
   con fotos reales del cliente, no con estas.
   ════════════════════════════════════════════════════════════════════ */
.foto { margin: 0; }
.foto img { width: 100%; height: auto; border-radius: var(--radio-2); }
.foto figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--tinta-2); }
.seccion--marino .foto figcaption { color: var(--acero-txt); }

/* Hero: la foto del garaje va detrás del interior; el velo mantiene el contraste del titular */
.garaje--foto { background-image: none; background-color: var(--marino-2); }
.garaje__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.garaje__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 27, 51, 0.96) 0%, rgba(13, 27, 51, 0.9) 40%, rgba(13, 27, 51, 0.62) 100%), linear-gradient(180deg, rgba(13, 27, 51, 0.15) 0%, rgba(13, 27, 51, 0.05) 50%, rgba(13, 27, 51, 0.75) 100%); }
.garaje--foto::after { display: none; }

/* Pasos con la foto de la pieza en la mano */
.pasos-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pasos-grid .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pasos-grid .foto img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sombra-2); }
@media (max-width: 900px) { .pasos-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pasos-grid .pasos { grid-template-columns: minmax(0, 1fr); } }

/* Manual: la foto del cordón */
.manual__foto img { aspect-ratio: 1; object-fit: cover; }

/* Tormenta: foto · texto · precio */
.tormenta--foto { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr) minmax(0, 0.55fr); }
.tormenta--foto h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.tormenta__foto { margin: 0; height: 100%; }
.tormenta__foto img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; border-radius: var(--radio-2); }
@media (max-width: 1000px) { .tormenta--foto { grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); } .tormenta__foto { grid-column: 1 / -1; } .tormenta__foto img { aspect-ratio: 16 / 9; min-height: 0; } }
@media (max-width: 800px) { .tormenta--foto { grid-template-columns: minmax(0, 1fr); } }

/* Zonas con foto */
.zona--foto { padding: 0; overflow: hidden; }
.zona__foto { margin: 0; }
.zona__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.zona__cuerpo { padding: 1.2rem 1.5rem 1.4rem; }

/* Tablero: foto sobre la columna de portones */
.tablero__foto { margin: 0 0 1rem; }
.tablero__foto img { aspect-ratio: 16 / 10; object-fit: cover; }

/* Cierre con foto de fondo */
.cierre--foto { position: relative; overflow: hidden; }
.cierre__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.cierre--foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 41, 74, 0.55), rgba(20, 41, 74, 0.85)); }
.cierre--foto .contenedor { position: relative; }

/* Ficha de servicio: foto en la columna derecha, "qué incluye" pasa al aparte */
.ficha__foto { margin: 0; }
.ficha__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radio-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
.aparte__caja--incluye ul { list-style: none; padding: 0; }
.aparte__caja--incluye li { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.4rem 0; border-top: 1px dashed var(--linea); margin: 0; font-weight: 500; }
.aparte__caja--incluye .ico { width: 20px; height: 20px; color: var(--rojo); margin-top: 3px; }

/* Contacto: quién viene */
.contacto__foto { margin: 0 0 var(--e3); }
.contacto__foto img { aspect-ratio: 4 / 3; object-fit: cover; }


/* Aviso de respaldo cuando un botón "Text us" se toca en una computadora sin app de mensajes */
.sms-aviso { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; background: var(--blanco); color: var(--tinta); border: 2px solid var(--marino); border-radius: var(--radio); font-size: var(--t-chico); line-height: 1.4; }
.acciones .sms-aviso, .barra-movil .sms-aviso { flex-basis: 100%; }


/* ═══ 15 · MOVIMIENTO REDUCIDO E IMPRESIÓN ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .puerta, .puerta__riel { display: none !important; }
  .js .garaje .garaje__interior { opacity: 1 !important; transform: none !important; animation: none !important; }
  .copia__sello { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media print {
  .cabecera, .pie, .barra-movil, .puerta, .puerta__riel, .presupuesto__form, .copia__acciones, .copia__form, .menu-movil { display: none !important; }
  body { background: #fff; color: #000; }
  .copia { box-shadow: none; border: 1px solid #000; mask-image: none; -webkit-mask-image: none; }
}