/* ═══════════════════════════════════════════════════════════════════════
   FLORIDA LOCKSMITH PROS · hoja de estilos única
   369 Creative Agency · septiembre 2026

   Concepto: "la mesa de despacho". El sitio se comporta como el escritorio
   de despacho de la empresa, abierto 24 horas. Un solo elemento firma: el
   tablero de solapas del hero. Todo lo demás es quieto, grande y legible.

   Índice
   0 · Variables (colores medidos, tipografía, espacios)
   1 · Base y reset
   2 · Tipografía
   3 · Botones y enlaces de acción
   4 · Cabecera y menú
   5 · Tablero de solapas (elemento firma)
   6 · Ticket (precio por escrito)
   7 · Llegada ("what you'll see at your door")
   8 · Índice de servicios
   9 · Puertas corredizas (bloque destacado)
   10 · Trabajos reales (fotos)
   11 · Reseñas
   12 · Historia y marcas
   13 · Zonas de servicio
   14 · Pie
   15 · Barra fija de móvil
   16 · Páginas interiores (servicio, zona, about, contacto, galería)
   17 · Formulario
   18 · Movimiento reducido e impresión
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · VARIABLES ═════════════════════════════════════════════════════
   Los colores salen del logo. Contrastes medidos (WCAG 2.2):
   --tinta sobre --blanco 16.9:1 · --tinta sobre --gris-frio 15.0:1
   --blanco sobre --marino 12.6:1 · --blanco sobre --marino-noche 16.0:1
   --blanco sobre --naranja 3.3:1 → solo en texto grande y negrita (≥ 20 px 700),
   por eso todos los botones naranja llevan letra grande. Nunca texto oscuro
   sobre naranja.
   --naranja sobre --marino-noche 5.0:1 → sirve para títulos y cifras.
   --piedra (texto secundario sobre marino) 7.4:1.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --marino: #00285A;          /* estructura: cabecera, bloques, pie */
  --marino-noche: #061A3A;    /* tablero y fondo del hero */
  --marino-solapa: #12315F;   /* cada solapa del tablero */
  --marino-linea: #1E4680;    /* líneas sobre marino */
  --naranja: #F85000;         /* acciones y la llave. Solo eso. */
  --naranja-oscuro: #D94600;  /* hover de botones */
  --blanco: #FFFFFF;
  --gris-frio: #EEF1F5;       /* secciones alternas, teñido de marino */
  --gris-linea: #C9D1DD;
  --piedra: #B9C6D8;          /* texto secundario sobre marino */
  --tinta: #0B1B33;           /* texto sobre blanco */
  --tinta-suave: #3C4B60;     /* texto secundario sobre blanco (9.1:1) */
  --foco: #FFB35C;            /* anillo de foco visible sobre cualquier fondo */

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

  --ancho: 1180px;
  --radio: 3px;               /* un solo radio en todo el sitio */
  --espacio: clamp(3.5rem, 8vw, 7rem);   /* aire entre secciones */
  --suave: cubic-bezier(.22, 1, .36, 1); /* salida exponencial */
}

/* ═══ 1 · BASE ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--fuente-texto);
  font-size: 1.125rem; line-height: 1.55;          /* 18 px de base. La letra chica no se lee. */
  color: var(--tinta); background: var(--blanco);
}
@media (min-width: 1001px) { body { font-size: 1.25rem; } }  /* 20 px en escritorio */
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.salto { position: absolute; left: -999px; top: 0; background: var(--naranja); color: #fff; padding: .6rem 1rem; z-index: 100; font-weight: 700; }
.salto:focus { left: 1rem; top: 1rem; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caja { width: min(100% - 2rem, var(--ancho)); margin-inline: auto; }
@media (min-width: 760px) { .caja { width: min(100% - 4rem, var(--ancho)); } }
section { padding-block: var(--espacio); }
.fondo-marino { background: var(--marino); color: var(--blanco); }
.fondo-noche  { background: var(--marino-noche); color: var(--blanco); }
.fondo-gris   { background: var(--gris-frio); }

/* ═══ 2 · TIPOGRAFÍA ════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--fuente-titulo); font-weight: 800; line-height: .98;
  letter-spacing: -.01em; margin: 0 0 .6em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0;
}
h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 700; }
p  { margin: 0 0 1em; max-width: 68ch; }
.intro { font-size: 1.2em; line-height: 1.45; max-width: 44ch; }
.secundario { color: var(--tinta-suave); }
.fondo-marino .secundario, .fondo-noche .secundario { color: var(--piedra); }
.cifra { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.35em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
ul.lista { padding-left: 1.2em; margin: 0 0 1.2em; }
ul.lista li { margin-bottom: .35em; }
strong { font-weight: 700; }

/* ═══ 3 · BOTONES ═══════════════════════════════════════════════════════
   Un solo tipo de botón principal: naranja sólido, letra grande y blanca.
   El secundario es contorno. Nada de pastillas ni sombras.
   ══════════════════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3.4rem; padding: .7em 1.4em; border-radius: var(--radio);
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.35rem; line-height: 1;
  letter-spacing: .01em; text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color .25s var(--suave), transform .25s var(--suave), border-color .25s var(--suave);
  white-space: nowrap;
}
.boton svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.boton-naranja { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.boton-naranja:hover { background: var(--naranja-oscuro); border-color: var(--naranja-oscuro); }
.boton-naranja:active { transform: translateY(1px); }
.boton-contorno { background: transparent; color: var(--tinta); border-color: currentColor; }
.boton-contorno:hover { background: rgba(0, 40, 90, .07); }
.fondo-marino .boton-contorno, .fondo-noche .boton-contorno { color: #fff; }
.fondo-marino .boton-contorno:hover, .fondo-noche .boton-contorno:hover { background: rgba(255, 255, 255, .1); }
.boton-grande { font-size: 1.6rem; min-height: 4rem; padding: .75em 1.6em; }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.tel { font-family: var(--fuente-titulo); font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none; }

/* ═══ 4 · CABECERA ══════════════════════════════════════════════════════ */
.cabecera { background: var(--marino); color: #fff; position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--marino-linea); }
.cabecera-caja { display: flex; align-items: center; gap: 1.2rem; min-height: 4.6rem; }
.logo { display: block; flex: 0 0 auto; }
.logo img { height: 3.1rem; width: auto; }
@media (min-width: 1001px) { .logo img { height: 3.6rem; } }
.menu { display: none; margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; align-items: center; }
.menu a, .menu summary {
  display: block; padding: .7rem .85rem; color: #fff; text-decoration: none;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; border-radius: var(--radio);
}
.menu a:hover, .menu summary:hover, .menu a[aria-current="page"] { background: rgba(255, 255, 255, .1); }
.menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--naranja); }
.menu details { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); }
.menu-desplegable {
  position: absolute; top: calc(100% + .4rem); left: 0; min-width: 34rem; background: #fff; color: var(--tinta);
  border-radius: var(--radio); box-shadow: 0 18px 40px -12px rgba(6, 26, 58, .45); padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.4rem;
}
.menu-desplegable a { font-family: var(--fuente-texto); font-weight: 600; font-size: 1.05rem; color: var(--tinta); padding: .45rem .6rem; }
.menu-desplegable a:hover { background: var(--gris-frio); }
.menu-desplegable .grupo { grid-column: 1 / -1; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.1rem; color: var(--marino); padding: .7rem .6rem .2rem; letter-spacing: .04em; }
.menu-desplegable .grupo:first-child { padding-top: .2rem; }
.cabecera-tel { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.cabecera-tel .tel { color: #fff; font-size: 1.45rem; padding: .4rem .2rem; display: none; }
.cabecera-tel .boton { font-size: 1.15rem; min-height: 2.8rem; padding: .5em 1em; }
@media (max-width: 759px) { .cabecera-tel .boton { display: none; } .logo img { height: 2.7rem; } }   /* en móvil la acción vive en la barra fija de abajo */
.menu-boton { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 2px solid rgba(255, 255, 255, .35); color: #fff; border-radius: var(--radio); padding: .5rem .8rem; cursor: pointer; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; }
.menu-boton svg { width: 1.3em; height: 1.3em; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
@media (min-width: 1001px) {
  .menu { display: block; }
  .cabecera-tel { margin-left: 0; }
  .cabecera-tel .tel { display: inline-block; }
  .menu-boton { display: none; }
}
/* Menú móvil: se abre como panel bajo la cabecera. Sin JS el panel se ve siempre. */
.menu-movil { background: var(--marino-noche); color: #fff; border-top: 1px solid var(--marino-linea); }
.js .menu-movil { display: none; }
.js .menu-movil.abierto { display: block; }
.menu-movil ul { list-style: none; margin: 0; padding: .6rem 0; }
.menu-movil a { display: block; padding: .8rem 1rem; color: #fff; text-decoration: none; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.4rem; }
.menu-movil .sub a { font-family: var(--fuente-texto); font-weight: 600; font-size: 1.05rem; padding: .5rem 1rem .5rem 2rem; color: var(--piedra); }
.menu-movil .grupo { padding: .9rem 1rem .2rem; font-family: var(--fuente-titulo); font-weight: 800; color: var(--naranja); letter-spacing: .04em; }
@media (min-width: 1001px) { .menu-movil { display: none !important; } }

/* ═══ 5 · TABLERO DE SOLAPAS ════════════════════════════════════════════
   El elemento firma. Cada carácter es una solapa; al cargar giran una vez
   y al escribir una ciudad giran otra vez hacia la respuesta. Sin JS el
   valor de cada fila es texto plano y el tablero muestra las tres regiones.
   ══════════════════════════════════════════════════════════════════════ */
.hero { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 6vw, 5rem) var(--espacio); overflow: hidden; }
/* Foto de fondo del hero: la van en una casa de Miami, con un velo marino más denso donde va el texto.
   En móvil manda una foto vertical. La foto no lleva alt porque el titular ya dice todo. */
.hero-fondo { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; }
.hero-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 26, 58, .94) 0%, rgba(6, 26, 58, .8) 40%, rgba(6, 26, 58, .42) 100%),
              linear-gradient(0deg, rgba(6, 26, 58, .9) 0%, rgba(6, 26, 58, 0) 35%);
}
@media (max-width: 759px) {
  .hero-fondo img { object-position: 50% 30%; }
  .hero-fondo::after { background: linear-gradient(180deg, rgba(6, 26, 58, .88) 0%, rgba(6, 26, 58, .8) 55%, rgba(6, 26, 58, .96) 100%); }
}
.hero-caja { position: relative; }
.hero-caja { display: grid; gap: 2.2rem; }
.hero-caja > * { min-width: 0; }               /* el tablero no puede ensanchar la página en móvil */
.hero h1 { margin-bottom: .35em; max-width: 12ch; }
.hero .intro { color: var(--piedra); }
.tablero {
  container-type: inline-size;         /* las solapas se dimensionan según el ancho del tablero */
  min-width: 0; max-width: 100%;
  background: var(--marino-noche); border: 1px solid var(--marino-linea); border-radius: var(--radio);
  padding: clamp(1rem, 3vw, 1.8rem);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255,255,255,.06);
}
.tablero-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--marino-linea); padding-bottom: .7rem; margin-bottom: 1rem; font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .08em; font-size: 1.05rem; color: var(--piedra); }
.tablero-cabecera .reloj { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 759px) { .tablero-cabecera { font-size: .9rem; letter-spacing: .05em; } }
.fila { display: grid; gap: .3rem .9rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.fila:last-of-type { border-bottom: 0; }
.fila-etq { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1rem; letter-spacing: .1em; color: var(--piedra); }
.fila-val {
  font-family: var(--fuente-titulo); font-weight: 700; line-height: 1;
  /* 18 solapas en móvil (0.8em cada una con hueco) deben caber en el ancho del tablero */
  font-size: clamp(.9rem, calc((100cqi - 2rem) / 14.6), 2.1rem);
  letter-spacing: .04em; color: #fff; white-space: nowrap; overflow: hidden; display: flex; gap: .06em; min-width: 0;
}
.fila-val.naranja { color: var(--naranja); }
.solapa {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: .74em; height: 1.32em; background: var(--marino-solapa); border-radius: 2px;
  transform-style: preserve-3d; backface-visibility: hidden; flex: 0 0 auto;
}
.solapa::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.45); }
.solapa.vacia { background: rgba(18, 49, 95, .55); }
.solapa.gira { animation: solapa-gira .11s linear; }
@keyframes solapa-gira {
  0%   { transform: rotateX(0deg); }
  49%  { transform: rotateX(-88deg); }
  51%  { transform: rotateX(88deg); }
  100% { transform: rotateX(0deg); }
}
.tablero-busca { margin-top: 1.1rem; display: grid; gap: .7rem; }
.tablero-busca label { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .06em; color: var(--piedra); }
.tablero-busca .campo { display: flex; gap: .6rem; flex-wrap: wrap; }
.tablero-busca input {
  flex: 1 1 14rem; min-height: 3.4rem; padding: .5rem .9rem; background: #fff; color: var(--tinta);
  border: 2px solid transparent; border-radius: var(--radio); font-size: 1.2rem;
}
.tablero-busca input:focus-visible { outline-offset: 2px; }
.tablero-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.js .tablero-lista { display: none; }              /* sin JS: las tres regiones a la vista */
.tablero-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .5rem 0; border-top: 1px solid var(--marino-linea); }
.tablero-lista .tel { color: var(--naranja); font-size: 1.4rem; }
.tablero-respuesta { margin-top: 1.1rem; display: grid; gap: .9rem; }
.tablero-respuesta p { margin: 0; color: var(--piedra); }
.tablero-respuesta .acciones .boton { flex: 1 1 12rem; }
.hero-pruebas { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 1.4rem; padding: 0; list-style: none; color: var(--piedra); font-weight: 600; }
.hero-pruebas li { display: flex; align-items: center; gap: .45em; }
.hero-pruebas svg { width: 1.2em; height: 1.2em; stroke: var(--naranja); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1001px) {
  .hero-caja { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 3.5rem; }
  .fila { grid-template-columns: 8rem minmax(0, 1fr); }
  /* 20 solapas en escritorio, descontando la etiqueta de 8rem y el relleno */
  .fila-val { font-size: clamp(.9rem, calc((100cqi - 11.5rem) / 16.3), 2.2rem); }
}

/* ═══ 5b · CANDADO DE APERTURA (solo home) ═══════════════════════════
   Cubre el hero al cargar. El arco se abre con un clic y el candado entero
   sube como una puerta y deja ver la portada. Solo existe con JS (.js);
   con "reducir movimiento" no aparece; se muestra una vez por sesión.
   ══════════════════════════════════════════════════════════════════════ */
.candado { display: none; }
.js .candado {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 60;
  background: var(--marino-noche);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  clip-path: inset(0 0 0 0);
  transition: clip-path .85s cubic-bezier(.7, 0, .3, 1);
}
.js .candado.sube { clip-path: inset(0 0 100% 0); }
.js .candado.fuera { display: none; }
.candado-svg { width: min(52vw, 330px); height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.candado-arco { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .42s cubic-bezier(.34, 1.56, .64, 1); }
.candado.abre .candado-arco { transform: translateY(-40px) rotate(-24deg); }
.candado-cuerpo { transform-box: fill-box; transform-origin: 50% 0; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.candado.abre .candado-cuerpo { transform: translateY(6px); }
.candado-lineas { opacity: 0; transform: translateX(-12px); transition: opacity .3s ease-out, transform .35s var(--suave); }
.candado.abre .candado-lineas { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .js .candado { display: none; } }

/* ═══ 6 · TICKET ════════════════════════════════════════════════════════
   Tres preguntas siempre visibles (nada escondido en pasos) y a la derecha
   la orden de trabajo que se va llenando. Sin JS la orden muestra el rango
   completo del servicio elegido en el HTML.
   ══════════════════════════════════════════════════════════════════════ */
.ticket-seccion h2 { max-width: 16ch; }
.ticket-grid { display: grid; gap: 2.2rem; margin-top: 2rem; }
.ticket-grid > * { min-width: 0; }
@media (min-width: 1001px) { .ticket-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } }
.paso { border: 0; padding: 0; margin: 0 0 1.8rem; min-width: 0; }
.paso legend { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.5rem; margin-bottom: .6rem; padding: 0; }
.paso legend small { display: block; font-family: var(--fuente-texto); font-weight: 500; font-size: .95rem; color: var(--tinta-suave); margin-top: .15rem; }
.opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 3.6rem; padding: .6rem .7rem;
  border: 2px solid var(--gris-linea); border-radius: var(--radio); background: #fff;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; line-height: 1.05; transition: border-color .2s var(--suave), background-color .2s var(--suave);
}
.opcion input:hover + span { border-color: var(--marino); }
.opcion input:checked + span { border-color: var(--marino); background: var(--marino); color: #fff; }
.opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }
.paso .ciudad { display: grid; gap: .4rem; margin-top: .8rem; }
.paso .ciudad input { min-height: 3.2rem; padding: .4rem .8rem; border: 2px solid var(--gris-linea); border-radius: var(--radio); font-size: 1.1rem; max-width: 24rem; }
.orden {
  background: #fff; color: var(--tinta); border-radius: var(--radio); position: relative;
  box-shadow: 0 24px 50px -24px rgba(6, 26, 58, .45), 0 2px 0 var(--gris-linea);
  border-top: 10px solid var(--marino);
}
.orden::before { /* borde perforado arriba, como un talón de orden de trabajo */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 0; border-top: 2px dashed rgba(255,255,255,.5);
}
.orden-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem .9rem; border-bottom: 2px solid var(--tinta); }
.orden-cabecera img { height: 2.4rem; width: auto; }
.orden-num { text-align: right; font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.05; }
.orden-num small { display: block; font-family: var(--fuente-texto); font-weight: 600; font-size: .85rem; color: var(--tinta-suave); letter-spacing: .06em; }
.orden-cuerpo { padding: 1rem 1.4rem; }
.orden-linea { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--gris-linea); font-size: 1.05rem; }
.orden-linea dt { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .05em; color: var(--tinta-suave); font-size: 1rem; }
.orden-linea dd { margin: 0; font-weight: 600; }
.orden-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0 .4rem; }
.orden-total .cifra { font-size: clamp(2rem, 4vw, 2.7rem); color: var(--marino); }
.orden-total span:first-child { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .05em; }
.orden-nota { font-size: .98rem; color: var(--tinta-suave); margin: 0 0 .8rem; }
.orden-firma { border-top: 2px solid var(--tinta); padding: .9rem 1.4rem 1.3rem; font-size: 1rem; }
.orden-firma p { margin-bottom: .9rem; }
.orden-firma .acciones .boton { flex: 1 1 11rem; }
.orden-sello { position: absolute; right: 1.2rem; top: 4.6rem; transform: rotate(-9deg); border: 3px solid var(--naranja); color: var(--naranja); font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.1rem; letter-spacing: .1em; padding: .15rem .55rem; border-radius: var(--radio); opacity: .95; }

/* ═══ 7 · LLEGADA ═══════════════════════════════════════════════════════ */
.llegada-grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 760px) { .llegada-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1001px) { .llegada-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.llegada-item svg { width: 4.2rem; height: 4.2rem; stroke: var(--marino); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem; }
.llegada-item figure { margin: 0 0 1rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); background: var(--gris-linea); }
.llegada-item figure img { width: 100%; height: 100%; object-fit: cover; }
.llegada-item h3 { margin-bottom: .35em; }
.llegada-item p { margin: 0; font-size: 1.02rem; }
.verificar { margin-top: 3rem; display: grid; gap: 1.2rem; padding: 1.6rem; background: #fff; border-left: 6px solid var(--naranja); border-radius: var(--radio); }
.verificar h3 { margin: 0; }
.verificar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-weight: 600; }
.verificar li a { color: var(--marino); }
@media (min-width: 1001px) { .verificar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; } }

/* ═══ 8 · ÍNDICE DE SERVICIOS ═══════════════════════════════════════════
   Lista densa, no tarjetas. Cada grupo es una tabla de filas con nombre,
   qué resuelve y precio "desde". Las fotos van a un lado, recortadas.
   ══════════════════════════════════════════════════════════════════════ */
.servicios-grupo { display: grid; gap: 1.2rem 2.5rem; padding: 2rem 0; border-top: 2px solid var(--tinta); }
.servicios-grupo:first-of-type { margin-top: 2rem; }
.servicios-grupo h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; }
.servicios-grupo .secundario { max-width: 30ch; margin: 0; }
.servicios-lista { list-style: none; margin: 0; padding: 0; }
.servicios-lista li { border-top: 1px solid var(--gris-linea); }
.servicios-lista a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding: .8rem 0; text-decoration: none;
  transition: padding-left .25s var(--suave);
}
.servicios-lista a:hover { padding-left: .6rem; }
.servicios-lista .nombre { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.35rem; color: var(--marino); }
.servicios-lista .desde { font-family: var(--fuente-titulo); font-weight: 700; color: var(--tinta-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.servicios-lista .que { grid-column: 1 / -1; font-size: 1rem; color: var(--tinta-suave); }
.servicios-foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radio); }
.servicios-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1001px) {
  .servicios-grupo { grid-template-columns: 15rem minmax(0, 1fr) 18rem; align-items: start; }
  .servicios-grupo.sin-foto { grid-template-columns: 15rem minmax(0, 1fr); }
}

/* ═══ 9 · CORREDIZAS ════════════════════════════════════════════════════ */
.corredizas-grid { display: grid; gap: 2rem; align-items: center; }
.corredizas-grid figure { margin: 0; }
.corredizas-grid img { border-radius: var(--radio); width: 100%; }
.corredizas-grid figcaption { font-size: 1rem; color: var(--piedra); margin-top: .6rem; }
@media (min-width: 1001px) { .corredizas-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; } }
.problemas { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .5rem; }
.problemas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--marino-linea); }
.problemas svg { width: 1.6rem; height: 1.6rem; stroke: var(--naranja); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: .15rem; }
.problemas strong { display: block; font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 700; }

/* ═══ 10 · TRABAJOS ═════════════════════════════════════════════════════ */
.trabajos-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
@media (min-width: 760px) { .trabajos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1001px) { .trabajos-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trabajo { margin: 0; }
.trabajo a { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radio); background: var(--gris-frio); }
.trabajo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--suave); }
.trabajo a:hover img { transform: scale(1.03); }
.trabajo figcaption { font-size: .98rem; color: var(--tinta-suave); margin-top: .5rem; line-height: 1.35; }
.trabajo figcaption strong { color: var(--tinta); }
.trabajos-grid.grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .trabajos-grid.grande { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ═══ 11 · RESEÑAS ══════════════════════════════════════════════════════ */
.resenas-cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.calificacion { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.calificacion .cifra { font-size: 2.2rem; color: var(--marino); }
.estrellas { display: inline-flex; gap: .1rem; }
.estrellas svg { width: 1.4rem; height: 1.4rem; fill: var(--naranja); stroke: none; }
.resenas-grid { display: grid; gap: 1.2rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.resena { background: #fff; border-radius: var(--radio); padding: 1.4rem 1.5rem; display: grid; gap: .8rem; align-content: start; border-top: 4px solid var(--marino); }
.resena blockquote { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.resena blockquote p { margin: 0; }
.resena footer { font-size: .98rem; color: var(--tinta-suave); display: grid; gap: .1rem; }
.resena footer strong { color: var(--tinta); }

/* ═══ 12 · HISTORIA Y MARCAS ════════════════════════════════════════════ */
.historia-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1001px) { .historia-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } }
.historia-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.historia-foto { margin: 0 0 1.5rem; }
.historia-foto img { border-radius: var(--radio); width: 100%; }
.historia-foto figcaption { font-size: 1rem; color: var(--tinta-suave); margin-top: .6rem; }
.historia-datos li { padding: 1rem 0; border-top: 1px solid var(--gris-linea); display: grid; gap: .2rem; }
.historia-datos .cifra { font-size: 2.4rem; color: var(--marino); line-height: 1; }
.marcas { margin-top: 3rem; padding-top: 2rem; border-top: 2px solid var(--tinta); }
.marcas h3 { font-size: 1.3rem; margin-bottom: 1rem; }
.marcas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.marcas li { font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.2rem; padding: .35rem .8rem; border: 2px solid var(--gris-linea); border-radius: var(--radio); }
.marcas li.socio { border-color: var(--marino); color: var(--marino); }

/* ═══ 13 · ZONAS ════════════════════════════════════════════════════════ */
.zonas-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 760px) { .zonas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zona { padding: 1.5rem 0 0; border-top: 3px solid var(--naranja); display: grid; gap: .6rem; align-content: start; }
.zona h3 { margin: 0; font-size: 2rem; }
.zona .tel { color: #fff; font-size: 1.9rem; display: inline-block; }
.zona .eta { color: var(--piedra); font-weight: 600; }
.zona .ciudades { color: var(--piedra); font-size: 1rem; margin: 0; max-width: none; }
.zona a.mas { color: #fff; font-weight: 700; }

/* ═══ 14 · PIE ══════════════════════════════════════════════════════════ */
.pie { padding: 3rem 0 7rem; font-size: 1rem; }
@media (min-width: 1001px) { .pie { padding-bottom: 3rem; } }
.pie-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .pie-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.pie h4 { color: #fff; font-size: 1.15rem; margin-bottom: .6rem; letter-spacing: .04em; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pie a { color: var(--piedra); text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie .tel { color: #fff; font-size: 1.4rem; }
.pie-logo img { height: 3rem; width: auto; margin-bottom: 1rem; }
.pie-legal { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--marino-linea); color: var(--piedra); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .95rem; }
.pie-legal a { color: var(--piedra); }

/* ═══ 15 · BARRA MÓVIL ══════════════════════════════════════════════════ */
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--marino-noche); padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(6, 26, 58, .35);
}
.barra-movil .boton { min-height: 3.3rem; font-size: 1.3rem; padding: .5em .6em; }
.barra-movil .boton-contorno { color: #fff; border-color: rgba(255,255,255,.7); }
@media (min-width: 1001px) { .barra-movil { display: none; } }

/* ═══ 16 · PÁGINAS INTERIORES ═══════════════════════════════════════════ */
.franja { background: var(--marino-noche); color: #fff; border-bottom: 1px solid var(--marino-linea); font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .05em; font-size: 1.05rem; }
.franja-caja { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; min-height: 2.8rem; padding-block: .4rem; }
.franja .punto { display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--naranja); margin-right: .4em; box-shadow: 0 0 0 4px rgba(248, 80, 0, .2); }
.franja .reloj { font-variant-numeric: tabular-nums; }
.franja .tel { color: var(--naranja); margin-left: auto; font-size: 1.2rem; }
.franja .ciudad-recordada:empty { display: none; }
.interior-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); }
.interior-hero h1 { max-width: 14ch; }
.interior-hero .intro { color: var(--piedra); }
.interior-hero .acciones { margin-top: 1.4rem; }
.miga { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .6rem; font-size: 1rem; color: var(--piedra); }
.miga a { color: var(--piedra); }
.miga li + li::before { content: "/"; margin-right: .6rem; opacity: .6; }
.servicio-grid { display: grid; gap: 2.5rem; }
.servicio-grid > * { min-width: 0; }
@media (min-width: 1001px) { .servicio-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; } }
.servicio-texto h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-top: 1.6em; }
.servicio-texto h2:first-child { margin-top: 0; }
.servicio-lado { display: grid; gap: 1.5rem; position: sticky; top: 5.6rem; }
.servicio-lado figure { margin: 0; }
.servicio-lado img { border-radius: var(--radio); width: 100%; }
.servicio-lado figcaption { font-size: .98rem; color: var(--tinta-suave); margin-top: .5rem; }
.ilustracion { background: var(--gris-frio); border-radius: var(--radio); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 2rem; }
.ilustracion svg { width: min(100%, 16rem); height: auto; stroke: var(--marino); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ilustracion svg .naranja { stroke: var(--naranja); }
.precio-caja { background: var(--marino); color: #fff; border-radius: var(--radio); padding: 1.4rem 1.5rem; display: grid; gap: .4rem; }
.precio-caja .etq { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .08em; color: var(--piedra); font-size: 1rem; }
.precio-caja .cifra { font-size: 2.3rem; line-height: 1; }
.precio-caja p { margin: .3rem 0 0; color: var(--piedra); font-size: 1rem; }
.precio-caja .acciones { margin-top: .8rem; }
.precio-caja .acciones .boton { flex: 1 1 10rem; }
.precio-caja .boton-contorno { color: #fff; }
.pasos { list-style: none; counter-reset: paso; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--gris-linea); }
.pasos li::before { content: counter(paso); font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--naranja); }
.pasos strong { display: block; font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 700; }
.faq { margin-top: 2rem; border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid var(--gris-linea); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.35rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.8rem; line-height: 1; color: var(--naranja); flex: 0 0 auto; transition: transform .3s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.2rem; }
.faq p:last-child { margin-bottom: 0; }
.relacionados { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.relacionados a { display: inline-block; padding: .55rem 1rem; border: 2px solid var(--gris-linea); border-radius: var(--radio); text-decoration: none; font-family: var(--fuente-titulo); font-weight: 700; font-size: 1.15rem; color: var(--marino); }
.relacionados a:hover { border-color: var(--marino); }
.cierre h2 { max-width: 18ch; }
.cierre .acciones { margin-top: 1.5rem; }
.ciudades-lista { columns: 2; column-gap: 2rem; list-style: none; margin: 1.5rem 0 0; padding: 0; font-weight: 600; }
@media (min-width: 760px) { .ciudades-lista { columns: 3; } }
@media (min-width: 1001px) { .ciudades-lista { columns: 4; } }
.ciudades-lista li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--gris-linea); }
.contacto-grid { display: grid; gap: 2.5rem; }
.contacto-grid > * { min-width: 0; }
@media (min-width: 1001px) { .contacto-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }
.contacto-datos { display: grid; gap: 1.2rem; }
.contacto-datos > div { padding-top: 1rem; border-top: 2px solid var(--tinta); }
.contacto-datos figure { margin: 0; }
.contacto-datos figure img { border-radius: var(--radio); width: 100%; }
.contacto-datos figcaption { font-size: 1rem; color: var(--tinta-suave); margin-top: .5rem; }
.contacto-datos .etq { display: block; font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .06em; color: var(--tinta-suave); font-size: 1rem; margin-bottom: .2rem; }
.contacto-datos .tel { color: var(--marino); font-size: 2rem; display: block; }
.resenas-botones { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin-top: 2rem; }
.resenas-botones a { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 4.5rem; border: 2px solid var(--gris-linea); border-radius: var(--radio); text-decoration: none; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.5rem; color: var(--marino); }
.resenas-botones a:hover { border-color: var(--marino); }
.about-grid { display: grid; gap: 2.5rem; }
.about-grid > * { min-width: 0; }
@media (min-width: 1001px) { .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; } }

/* ═══ 17 · FORMULARIO ═══════════════════════════════════════════════════ */
.formulario { display: grid; gap: 1rem; }
.formulario label { display: grid; gap: .3rem; font-weight: 600; }
.formulario input, .formulario select, .formulario textarea {
  min-height: 3.2rem; padding: .5rem .8rem; border: 2px solid var(--gris-linea); border-radius: var(--radio); background: #fff; width: 100%;
}
.formulario textarea { min-height: 7rem; resize: vertical; }
.formulario input:focus-visible, .formulario textarea:focus-visible, .formulario select:focus-visible { border-color: var(--marino); outline-offset: 0; }
.formulario .dos { display: grid; gap: 1rem; }
@media (min-width: 560px) { .formulario .dos { grid-template-columns: 1fr 1fr; } }
.formulario .aviso { font-size: 1rem; color: var(--tinta-suave); margin: 0; }
.formulario [role="status"]:empty { display: none; }
.formulario [role="status"] { padding: .8rem 1rem; border-radius: var(--radio); background: var(--gris-frio); font-weight: 600; }
.formulario .miel { position: absolute; left: -9999px; }

/* ═══ 18 · MOVIMIENTO REDUCIDO E IMPRESIÓN ══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .solapa.gira { animation: none; }
}
@media print {
  .cabecera, .barra-movil, .menu-movil, .franja, .pie, .tablero-busca { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .orden { box-shadow: none; border: 1px solid #000; }
}