.local-page{padding-top:92px}
.local-hero{padding:clamp(3rem,8vw,6.5rem) 0 3rem;border-bottom:1px solid var(--line)}
.local-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.local-kicker{color:var(--gold);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.local-hero h1{font-size:clamp(2.35rem,6vw,5.3rem);line-height:.95;margin:.75rem 0 1.15rem;max-width:15ch}
.local-hero p{font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.7;max-width:62ch}
.local-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem}
.local-actions .btn{min-height:44px}
.local-info{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.3rem;box-shadow:var(--shadow-lg)}
.local-info h2{font-size:1.35rem;margin:0 0 1rem}
.local-detail{display:flex;gap:.75rem;padding:.75rem 0;border-top:1px solid var(--line);line-height:1.45}
.local-detail:first-of-type{border-top:0}
.local-detail strong{display:block;color:#fff}
.local-detail span,.local-detail address{color:var(--muted);font-style:normal}
/* Horario día por día (pedido de Diomes 2026-08-11): dos columnas que se alinean
   solas, sin tabla. El día se separa de la hora con un punteado tenue. */
.local-horas{list-style:none;margin:.15rem 0 0;padding:0;display:grid;gap:.3rem}
.local-horas li{display:flex;align-items:baseline;gap:.5rem}
.local-horas .local-dia{color:#fff;flex:0 0 auto;min-width:6.2em}
.local-horas li::before{content:"";order:1;flex:1 1 auto;border-bottom:1px dotted var(--line);transform:translateY(-.25em)}
.local-horas .local-horas-val{order:2;flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:420px){.local-horas .local-dia{min-width:5.4em}.local-horas li{font-size:.94rem}}
.local-section{padding:clamp(3.5rem,7vw,6rem) 0;border-bottom:1px solid var(--line)}
.local-head{max-width:760px;margin-bottom:2rem}
.local-head h2{font-size:clamp(1.8rem,4vw,3rem);margin:.55rem 0}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
/* Estas cuatro tarjetas se quedaron con `rgba(11,10,8,.72)` —el negro amarronado
   del diseño viejo— y NO seguían al tema: en /kissimmee y /omaha eran manchas
   oscuras sueltas en medio de una página blanca. Ahora usan las superficies del
   tema, con la misma sombra de dos capas que el resto del sitio. */
.service-card,.review-card,.faq-item,.quote-card{
  border:1px solid var(--line);background:var(--card);border-radius:14px;padding:1.05rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .35s var(--lift-ease),box-shadow .35s var(--lift-ease),transform .35s var(--lift-ease)}
.service-card:hover,.review-card:hover,.quote-card:hover{
  border-color:var(--red-edge);box-shadow:var(--shadow-md);transform:translateY(var(--lift))}
.service-card{min-height:94px;display:flex;align-items:flex-end;font-weight:800}
.promise-grid,.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quote-card h3{margin:0 0 .6rem;font-size:1.25rem}
.gallery-local{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.gallery-local figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-sunk)}
.gallery-local img{display:block;width:100%;height:360px;object-fit:cover}
.gallery-local figcaption{padding:.8rem 1rem;color:var(--muted)}
.photo-pending{border:1px dashed var(--red-edge);border-radius:16px;padding:1.5rem;color:var(--muted)}
.reviews-local{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.review-stars{color:var(--gold);letter-spacing:.12em;margin-bottom:.6rem}
.review-card blockquote{margin:0 0 .8rem;line-height:1.6}
.review-card cite{font-style:normal;color:var(--muted)}
.review-note{margin-top:1rem;color:var(--muted)}
/* RESEÑAS REALES DE GOOGLE (prefijo .gr-).
   El prefijo no es capricho: esta página carga index.css, que ya define nombres
   genéricos, y reutilizarlos apila elementos (le pasó a /cotizar). */
.gr-resumen{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.gr-nota{font-size:2.1rem;font-weight:800;line-height:1}
.gr-estrellas{display:inline-flex;gap:.15rem}
.gr-estrellas svg{width:20px;height:20px;display:block}
.gr-estrellas svg.on{fill:var(--gold)}
/* Las que faltan quedan dibujadas pero apagadas: así se lee "4 de 5" de un
   vistazo en vez de contar cuántas hay. */
.gr-estrellas svg.off{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.45}
.gr-total{color:var(--muted)}
.review-stars .off{opacity:.3}
.review-card cite{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.92rem}
.review-card cite img{border-radius:50%;display:block;flex:none}
.review-card cite a{color:inherit;text-decoration:none}
.review-card cite a:hover{text-decoration:underline}
.gr-cuando{opacity:.75}
/* El enlace SIEMPRE en su propia línea. Si se deja fluir con `margin-left:auto`
   queda al lado del nombre en unas tarjetas y salta abajo en otras según lo
   largo que sea el nombre del autor, y la fila de tarjetas se ve desalineada. */
.gr-ver{flex-basis:100%;margin-top:.35rem;color:var(--red)!important;font-weight:700}
/* EL MAPA. Dos cosas que no estaban y sí importan:

   1) `.map-local` no tenía fondo NI recorte propio. El iframe lleva las
      esquinas redondeadas, así que en las cuatro esquinas —y en todo el hueco
      mientras carga (va con loading="lazy"), o si Google no responde, o si un
      bloqueador corta la petición— se veía LO QUE HAY DETRÁS en vez del mapa.
      Reproducido cortando la petición a maps.google.com: aparece un marco del
      color del fondo de la página alrededor del recuadro. Ahora el contenedor
      es una superficie del tema y recorta él mismo.

   2) `color-scheme` se heredaba de :root. Se fija AQUÍ, explícito, porque el
      iframe es un documento de Google y ese es el único aviso que recibe de
      qué tema queremos: así sigue el botón de sol/luna del sitio y no el modo
      oscuro del sistema operativo ni el de la cuenta de Google de quien mira.
      Sin esto, alguien con Maps en oscuro puede ver el mapa oscuro dentro de
      una página clara. */
.map-local{background:var(--surface-sunk);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;color-scheme:light}
[data-theme="dark"] .map-local{color-scheme:dark}
.map-local iframe{display:block;width:100%;height:390px;border:0;border-radius:16px;
  background:var(--surface-sunk);color-scheme:inherit}
/* La otra mitad del mismo problema: `.map-local` NUNCA llevó el filtro que sí
   tiene `.loc-map`, así que en modo oscuro estas dos páginas enseñaban un mapa
   BLANCO dentro de una página negra. Medido: luminancia 0.90 con el sitio en
   oscuro. Con esto los dos mapas del sitio se comportan igual: claros en claro
   y oscuros en oscuro. Es el mismo filtro, para que no haya dos aspectos de
   mapa distintos. */
[data-theme="dark"] .map-local iframe{
  filter:invert(.88) hue-rotate(180deg) saturate(.65) brightness(.92)}
.faq-list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
/* Iba en #fff fijo: con la tarjeta ya clara, la pregunta se volvía invisible. */
.faq-item summary{cursor:pointer;font-weight:800;color:var(--text)}
.faq-item p{margin:.75rem 0 0}
.local-form{max-width:760px}
.local-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.local-form .field-full{grid-column:1/-1}
.local-form label{display:block;margin-bottom:.4rem;font-weight:700;color:var(--body-c)}
/* Estos campos solo tenían `width`, así que el navegador los dibujaba con su
   estilo de fábrica y se veían distintos a los del resto del sitio. Los
   colores salen de los tokens; aquí va solo la geometría. */
.local-form input,.local-form textarea{
  width:100%;font-family:inherit;font-size:16px;   /* 16px evita el zoom de iOS */
  padding:.7rem .85rem;border-radius:var(--r-sm);
  background:var(--input-bg);border:1px solid var(--input-line);color:var(--input-text);
  transition:border-color .2s,box-shadow .2s;
}
.local-form input:focus,.local-form textarea:focus{
  outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px var(--input-focus-ring);
}
.local-form input::placeholder,.local-form textarea::placeholder{color:var(--input-ph);opacity:1}
.local-form textarea{min-height:130px;resize:vertical}
.local-form .hp{position:absolute;left:-10000px}
.local-form-msg{margin-top:.8rem;min-height:1.4em}
/* Antes: verde y rojo claros pensados para fondo negro (2.0:1 y 2.6:1 sobre blanco). */
.local-form-msg.ok{color:var(--ok)}.local-form-msg.err{color:var(--error)}
@media(max-width:900px){
  .local-grid,.promise-grid,.visit-grid{grid-template-columns:1fr}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-local{grid-template-columns:1fr}
}
@media(max-width:620px){
  .local-page{padding-top:76px}
  .local-hero{padding-top:2.4rem}
  .local-actions{display:grid;grid-template-columns:1fr 1fr}
  .local-actions .btn{padding:.68rem .6rem;font-size:.76rem;justify-content:center;text-align:center}
  .gallery-local,.faq-list,.local-form-grid{grid-template-columns:1fr}
  .local-form .field-full{grid-column:auto}
  .gallery-local img{height:260px}
  .map-local iframe{height:320px}
}