/* =====================================================================
   Buda Fence LLC · sistema de diseño (tokens + componentes + franjas)
   Diseñador, 2026-11-12; actualizado 2026-11-13 con el logo del cliente recoloreado (marca/kit/logo/).
   Tema negro (2026-11-13): bloque [data-tema="negro"] al final; sin el atributo, tema claro.
   El logo del portón pasa a marca/anterior/kit-porton/.
   Fuente de verdad para el Constructor: no inventar otros valores.
   La versión anterior (escudo verde, descartada) está en marca/anterior/.
   ===================================================================== */

/* Tipografías: Google Fonts, SIL Open Font License 1.1, subconjunto latin
   (U+0000-00FF: á é í ó ú ü ñ ¿ ¡, comprobado en la hoja CSS de Google Fonts).
   Pendiente del "sí" del operador para bajar los woff2:
     archivo-black-400-latin.woff2           (titulares: palo seco muy pesado, como la letra del logo)
     archivo-400-latin.woff2 · -600- · -700-  (texto, botones, etiquetas; misma familia)
   Se alojan en sitio/assets/fonts/ con OFL.txt al lado. */

:root {
  /* ---- Color: marca ---- */
  --c-oxido:        #B5482A; /* ACCIÓN: botón de llamar, marco del logo */
  --c-oxido-hover:  #9C3C22;
  --c-carbon:       #242424; /* texto principal, letras del logo */
  --c-verde:        #123A31; /* bandas, banda de llamada, pie */
  --c-verde-2:      #1B4A3F; /* superficie secundaria sobre verde */
  --c-blanco:       #FFFFFF; /* fondo principal */
  /* ---- Apoyo ---- */
  --c-piedra:       #F5F1EA; /* fondo alterno cálido (secciones pares) */
  --c-arena:        #E9DDC9; /* texto secundario sobre verde */
  --c-linea:        #E2DCD0; /* bordes y separadores sobre claro */
  --c-suave:        #5E5E5E; /* texto secundario sobre blanco/piedra */
  --c-error:        #A8321F;

  /* Contrastes medidos (WCAG 2.x):
     blanco/óxido 5,35 (botón) · blanco/óxido-hover 6,81 · carbón/blanco 15,5 · carbón/piedra 13,8
     blanco/verde 12,5 · arena/verde 9,3 · suave/blanco 6,5 · suave/piedra 5,8 · óxido/blanco 5,35 · óxido/piedra 4,75
     error/blanco 6,7
     PROHIBIDO: óxido sobre verde (2,34) y verde junto a carbón (1,24) como texto o borde que tenga que verse.
     Botón óxido sobre fondo verde: lleva borde blanco de 2 px. */

  /* ---- Papeles ---- */
  --bg:            var(--c-blanco);
  --bg-alt:        var(--c-piedra);
  --bg-banda:      var(--c-verde);
  --text:          var(--c-carbon);
  --text-suave:    var(--c-suave);
  --text-on-banda: var(--c-blanco);
  --accion:        var(--c-oxido);
  --accion-hover:  var(--c-oxido-hover);
  --accion-text:   var(--c-blanco);
  --foco:          var(--c-carbon);
  --foco-on-banda: var(--c-blanco);

  /* ---- Tipografía ---- */
  --f-titulo: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-texto:  "Archivo", "Segoe UI", Roboto, Arial, sans-serif;
  --w-normal: 400; --w-medio: 600; --w-fuerte: 700;
  --t-xs:   0.875rem;
  --t-sm:   1rem;
  --t-base: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --t-lg:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --t-h3:   clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --t-h2:   clamp(1.5rem, 1.05rem + 2.1vw, 3rem);   /* 24 px a 360-390: "REAL CUSTOMER REVIEWS" cabe en una línea (antes 30 px desbordaba) */
  --t-h1:   clamp(2.375rem, 1.6rem + 3.4vw, 4.5rem);
  --lh-titulo: 1.02;
  --lh-texto:  1.55;
  --track-titulo: -0.005em;
  --track-etiqueta: 0.08em;

  /* ---- Espacio (base 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  --ancho-max: 1180px;
  --seccion-y: clamp(48px, 6vw, 96px);

  /* ---- Formas: las del logo (barras rectas, esquinas casi vivas) ---- */
  --r-sm: 3px;
  --r-md: 4px;
  --b-fino: 2px;
  --b-grueso: 3px;
  --sh-tarjeta: 0 1px 0 rgba(36, 36, 36, .10);
  --sh-cabecera: 0 1px 0 var(--c-linea);

  /* ---- Movimiento ---- */
  --dur-rapida: 150ms;
  --dur-media: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --alto-tactil: 48px;

  /* ---- Franjas de material ---- */
  --franja-alto: clamp(28px, 4vw, 56px);       /* separadores */
  --franja-alto-cabecera: clamp(72px, 10vw, 140px);
}

/* =====================================================================
   Componentes base
   ===================================================================== */

h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; line-height: var(--lh-titulo);
  letter-spacing: var(--track-titulo); text-transform: uppercase; color: var(--text); }
body { font: var(--w-normal) var(--t-base)/var(--lh-texto) var(--f-texto); color: var(--text); background: var(--bg); }
.etiqueta { font: var(--w-fuerte) var(--t-xs)/1.2 var(--f-texto); text-transform: uppercase;
  letter-spacing: var(--track-etiqueta); color: var(--c-oxido); }
.banda .etiqueta { color: var(--c-arena); }

/* Botón de llamar */
.btn-call {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--alto-tactil); padding: 0 var(--s-5);
  font: var(--w-fuerte) var(--t-sm)/1 var(--f-texto); text-transform: uppercase;
  letter-spacing: var(--track-etiqueta); text-decoration: none;
  color: var(--accion-text); background: var(--accion);
  border: var(--b-fino) solid var(--accion); border-radius: var(--r-md);
  transition: background-color var(--dur-rapida) var(--ease), transform var(--dur-rapida) var(--ease);
}
.btn-call:hover { background: var(--accion-hover); border-color: var(--accion-hover); }
.btn-call:active { transform: scale(.97); }
.btn-call:focus-visible { outline: var(--b-grueso) solid var(--foco); outline-offset: 2px; }
/* Sobre verde (banda, pie, portada con degradado verde): borde blanco */
.banda .btn-call, .site-footer .btn-call, .hero .btn-call { border-color: var(--c-blanco); }
.banda .btn-call:focus-visible, .site-footer .btn-call:focus-visible, .hero .btn-call:focus-visible { outline-color: var(--foco-on-banda); }

/* Botón secundario (EN: correo · ES: WhatsApp) */
.btn-alt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--alto-tactil); padding: 0 var(--s-5);
  font: var(--w-fuerte) var(--t-sm)/1 var(--f-texto); text-transform: uppercase;
  letter-spacing: var(--track-etiqueta); text-decoration: none;
  color: var(--c-carbon); background: transparent;
  border: var(--b-fino) solid var(--c-carbon); border-radius: var(--r-md);
  transition: background-color var(--dur-rapida) var(--ease), color var(--dur-rapida) var(--ease);
}
.btn-alt:hover { background: var(--c-carbon); color: var(--c-blanco); }
.btn-alt:active { transform: scale(.97); }
.btn-alt:focus-visible { outline: var(--b-grueso) solid var(--foco); outline-offset: 2px; }
.banda .btn-alt, .site-footer .btn-alt, .hero .btn-alt { color: var(--c-blanco); border-color: var(--c-blanco); }
.banda .btn-alt:hover, .site-footer .btn-alt:hover, .hero .btn-alt:hover { background: var(--c-blanco); color: var(--c-verde); }

/* Banda lisa de color (el texto siempre va sobre liso) */
.banda { background: var(--bg-banda); color: var(--text-on-banda); }
.banda h1, .banda h2, .banda h3 { color: var(--c-blanco); }

/* Tarjeta de servicio: barra de óxido arriba, como el larguero del logo */
.card {
  background: var(--c-blanco); color: var(--text);
  border: 1px solid var(--c-linea); border-top: 6px solid var(--c-oxido); border-radius: var(--r-md);
  box-shadow: var(--sh-tarjeta); overflow: hidden;
  transition: transform var(--dur-media) var(--ease), border-color var(--dur-media) var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--c-carbon); border-top-color: var(--c-oxido-hover); }
.card:focus-within { outline: var(--b-grueso) solid var(--foco); outline-offset: 2px; }

/* Campo de formulario (si el director decide que hay formulario) */
.field { display: grid; gap: var(--s-1); }
.field label { font: var(--w-medio) var(--t-sm)/1.3 var(--f-texto); color: var(--text); }
.field input, .field textarea, .field select {
  min-height: var(--alto-tactil); padding: var(--s-3) var(--s-4);
  font: var(--w-normal) var(--t-base)/1.4 var(--f-texto); color: var(--text);
  background: var(--c-blanco); border: var(--b-fino) solid var(--c-carbon); border-radius: var(--r-sm);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: var(--b-grueso) solid var(--c-oxido); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--c-error); }
.field .error { font: var(--w-medio) var(--t-xs)/1.3 var(--f-texto); color: var(--c-error); }

/* Cabecera blanca (las letras del logo son carbón: no van sobre verde) */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 60px; padding: var(--s-2) var(--gutter);
  background: var(--c-blanco); box-shadow: var(--sh-cabecera);
}
.site-header { min-height: 68px; }
.site-header .logo img { display: block; height: 52px; width: auto; }   /* buda-fence-header-128.webp (484×128, 2x): sello + rótulo. 52 px en móvil para que quepa el botón "Call" a 360-390 px */
@media (min-width: 900px) { .site-header { min-height: 80px; } .site-header .logo img { height: 64px; } }

/* Pie verde: logo buda-fence-footer-on-green-128.webp (sello + rótulo blanco) o el sello transparente; "© Buda Fence LLC" */
.site-footer { background: var(--c-verde); color: var(--c-blanco); padding: var(--s-8) var(--gutter) var(--s-6); }
.site-footer a { color: var(--c-blanco); text-decoration-color: var(--c-arena); }
.site-footer a:hover { color: var(--c-arena); }
.site-footer .legal { font-size: var(--t-xs); color: var(--c-arena); }

/* Portada: foto real de fondo + degradado oscuro SOLO donde va el texto */
.hero { position: relative; isolation: isolate; color: var(--c-blanco); min-height: min(88svh, 760px);
  display: grid; align-items: start; padding: var(--s-8) var(--gutter); }
.hero > picture, .hero > img { position: absolute; inset: 0; z-index: -2; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 70%); }
/* Móvil: texto arriba (cielo), degradado de arriba hacia abajo */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.60) 38%, rgba(0,0,0,0) 62%); }
/* Escritorio: texto a la izquierda, degradado lateral */
@media (min-width: 900px) {
  .hero { align-items: center; }
  .hero::before { background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.60) 40%, rgba(0,0,0,0) 66%); }
}
/* 0,60 de negro sobre el cielo más claro (#E8EEF3) da 6,4:1 con texto blanco: no bajar de 0,55 (5,4:1). */
/* Portada real (t2-16): la zona tranquila en escritorio es el cielo de la DERECHA (el árbol ocupa la izquierda).
   Medido sobre hero-cedar-fence-desktop: píxel más claro (99 %) de esa zona #EBECF0 → con 0,60 de negro, 6,47:1.
   Móvil (hero-cedar-fence-mobile): cielo arriba, 6,4:1. El texto no pasa del 40 % del ancho (escritorio)
   ni del 38 % del alto (móvil): ahí el degradado ya empieza a bajar. */
@media (min-width: 900px) {
  .hero--derecha { justify-items: end; text-align: left; }
  .hero--derecha::before { background: linear-gradient(270deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.60) 40%, rgba(0,0,0,0) 66%); }
  .hero--derecha img { --hero-pos: 50% 40%; }
}

/* =====================================================================
   Franjas de material (solo franjas: cabecera de subpágina, separadores,
   banda de llamada y pie). NUNCA con texto encima. CSS puro, sin fotos.
   Uso: <div class="franja franja-cedro" aria-hidden="true"></div>
   ===================================================================== */
.franja { display: block; width: 100%; height: var(--franja-alto); }
.franja--cabecera { height: var(--franja-alto-cabecera); }

/* Tablas verticales de cedro (madera: pino y cedro, decks, pérgolas) */
.franja-cedro {
  background-color: #9E3F24;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.38) 0 3px, transparent 3px 34px),          /* junta entre tablas */
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 3px 9px, transparent 9px 20px,
                                     rgba(0,0,0,.06) 20px 26px, transparent 26px 34px),      /* veta y canto */
    linear-gradient(180deg, #B5482A, #9E3F24);
}

/* Variante con foto real: tablas de cedro del portón corredizo del cliente (t1-05, 18 KB).
   Se repite en horizontal; ruta desde la raíz del sitio (vale en / y en /es/). */


/* Malla chain link (rombos) */
.franja-malla {
  background-color: var(--c-verde);
  background-image:
    repeating-linear-gradient(45deg,  rgba(233,221,201,.55) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(-45deg, rgba(233,221,201,.55) 0 2px, transparent 2px 18px);
}

/* Panel de metal (chapa nervada) */
.franja-metal {
  background-color: #2C2C2C;
  background-image: repeating-linear-gradient(90deg,
    #242424 0 6px, #3B3B3B 6px 10px, #4A4A4A 10px 12px, #2E2E2E 12px 22px, #242424 22px 28px);
}

/* Barrotes de hierro con larguero arriba y abajo */
.franja-hierro {
  background-color: var(--c-piedra);
  background-image:
    linear-gradient(180deg, transparent 0 16%, var(--c-carbon) 16% calc(16% + 4px), transparent calc(16% + 4px) calc(84% - 4px),
                    var(--c-carbon) calc(84% - 4px) 84%, transparent 84%),                       /* dos largueros */
    repeating-linear-gradient(90deg, transparent 0 26px, var(--c-carbon) 26px 31px, transparent 31px 36px); /* barrotes finos */
}

/* Versión animable de las tablas: el Constructor pinta N <span> (uno por tabla, ~34 px de ancho).
   GSAP las hace entrar una a una con el scroll (ver marca.md). Sin JS se ven quietas. */
.franja-tablas { display: flex; gap: 3px; overflow: hidden; background: transparent; } /* las juntas dejan ver el fondo, como una cerca real */
.franja-tablas > span { flex: 1 0 31px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.07) 0 6px, transparent 6px 17px, rgba(0,0,0,.06) 17px 23px, transparent 23px),
              linear-gradient(180deg, #B5482A, #9E3F24); }
/* Remate opcional en punta de las tablas (como el poste del logo de referencia) */
.franja-tablas--punta > span { clip-path: polygon(0 10px, 50% 0, 100% 10px, 100% 100%, 0 100%); }
@media (prefers-reduced-motion: reduce) { .franja-tablas > span { transform: none !important; opacity: 1 !important; } }

/* =====================================================================
   Portada: la cerca que se levanta (efecto firma · ver marca.md)
   Una fila de tablas en punta, del color de la sección siguiente, a lo largo del borde
   inferior de la foto. Sin JS: quietas y completas. Con JS: crecen una a una tras "load".
   ===================================================================== */
.hero-cerca { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  height: clamp(44px, 7vw, 96px); display: flex; align-items: flex-end; gap: 3px; pointer-events: none;
  overflow: hidden; } /* imprescindible: las tablas que no caben se recortan; sin esto la página se ensancha en móvil */
.hero:has(.hero-cerca) { padding-bottom: calc(clamp(44px, 7vw, 96px) + var(--s-6)); } /* el texto nunca queda tapado */
.hero-cerca > span { flex: 1 0 26px; background: var(--hero-cerca-color, var(--c-blanco));
  transform-origin: 50% 100%; clip-path: polygon(0 12px, 50% 0, 100% 12px, 100% 100%, 0 100%); }
.hero-cerca > span { height: 100%; }
.hero-cerca > span:nth-child(even) { height: calc(100% - 8px); } /* leve ritmo de tablas */
@media (min-width: 900px) { .hero-cerca > span { flex-basis: 34px; } }
/* Estado inicial solo si hay JS y se puede animar; si GSAP no llega en 3 s, .fx-listo las muestra */
.js .hero-cerca > span { transform: scaleY(0); }
.js.fx-listo .hero-cerca > span { transform: none; transition: transform .4s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .hero-cerca > span { transform: none !important; } }

/* =====================================================================
   Opiniones (estilo tarjeta de Google, con texto de muestra hasta que lleguen las reales)
   Sin datos estructurados de reseñas. Sin el logotipo de Google: solo la palabra.
   ===================================================================== */
.reviews { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 699px) {   /* móvil: carrusel con imán, se ve asomar la siguiente */
  .reviews { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); }
  .review-card { scroll-snap-align: start; }
}
.review-card { background: var(--c-blanco); border: 1px solid var(--c-linea); border-radius: 8px;
  padding: var(--s-5); display: grid; gap: var(--s-3); box-shadow: 0 1px 2px rgba(36,36,36,.06); }
.review-card__head { display: flex; align-items: center; gap: var(--s-3); }
.review-card__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--c-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Ccircle cx='12' cy='8.5' r='4'/%3E%3Cpath d='M4 20c0-4.2 3.6-6.5 8-6.5s8 2.3 8 6.5z'/%3E%3C/svg%3E") center / 24px no-repeat; } /* icono genérico de persona, sin foto ni inicial */
.review-card__name { font: var(--w-fuerte) var(--t-sm)/1.2 var(--f-texto); color: var(--c-carbon); }
.review-card__meta { font-size: var(--t-xs); color: var(--c-suave); }
.review-card__stars { color: #E7A417; letter-spacing: 2px; font-size: 1.125rem; line-height: 1; } /* ★★★★★ con aria-label "5 de 5 estrellas" */
.review-card__text { margin: 0; color: var(--c-carbon); }
.review-card--muestra .review-card__text { font-style: italic; color: var(--c-suave); }
.review-card__badge { justify-self: stretch; font: var(--w-fuerte) .8125rem/1.3 var(--f-texto);
  color: var(--c-oxido); background: #FBF1EC; border: 1px dashed var(--c-oxido); border-radius: 6px; padding: 6px 10px; }
/* Etiqueta siempre visible en cada tarjeta de ejemplo: "Example · your real Google reviews will go here" /
   "Ejemplo · aquí irán sus reseñas reales de Google". Óxido sobre #FBF1EC: 4,81:1. */
.review-card__source { font-size: var(--t-xs); color: var(--c-suave); }

/* =====================================================================
   TEMA NEGRO (llamada del cliente, 2026-11-13: "colores como negro que resalte")
   Reversible: se activa con <html data-tema="negro"> en todas las páginas y se quita borrando el atributo.
   Sin el atributo, la web vuelve al tema claro (copia de seguridad: marca/anterior/tokens-claro-2026-11-13.css).
   Negro de base, texto blanco, óxido como único color de acción. El verde sale de la interfaz y vive solo en el sello.
   Las secciones de lectura larga (servicios, preguntas, textos de subpágina, mapa) siguen en claro: ver marca.md.
   ===================================================================== */

/* Clases que el Constructor añade una vez y sirven en los dos temas:
   .seccion--oscura   → secciones que van en negro en el tema negro (cómo trabajamos, opiniones, tira tras la portada).
                        En el tema claro se ven en piedra, como hasta ahora.
   .logo-claro / .logo-oscuro → dos <img> del logo dentro de .logo; cada tema enseña el suyo. */
.seccion--oscura { background: var(--bg-alt); }
.site-header .logo .logo-oscuro, .logo .logo-oscuro { display: none; }

:root[data-tema="negro"] {
  /* ---- Color ---- */
  --c-negro:        #0E0E0E; /* base: cabecera, tira tras la portada, bandas, pie */
  --c-sup:          #1A1A1A; /* superficie sobre negro: tarjetas de opiniones, paneles */
  --c-sup-2:        #242424; /* bordes y separadores sobre negro */
  --c-gris-calido:  #B9B2A6; /* texto secundario sobre negro */
  --c-oxido-vivo:   #E0673F; /* etiquetas y enlaces sobre negro (no botones) */
  --c-oxido-hover-oscuro: #C4512F; /* hover del botón sobre negro (más claro, no más oscuro) */

  /* Contrastes medidos (WCAG 2.x):
     blanco/negro 19,3 · blanco/superficie 17,4 · gris cálido/negro 9,2 · gris cálido/superficie 8,3
     texto del botón: blanco/óxido 5,35 · blanco/óxido hover oscuro 4,6
     el botón contra el fondo negro: óxido/negro 3,6 (componente de interfaz ≥3)
     óxido vivo/negro 5,7 · óxido vivo/superficie 5,1 · estrellas ámbar/superficie 8,1
     en las secciones claras no cambia nada: carbón/blanco 15,5 · carbón/piedra 13,8 */

  /* ---- Papeles ---- */
  --bg-banda:      var(--c-negro);
  --text-on-banda: var(--c-blanco);
  --foco-on-banda: var(--c-blanco);
  --sh-cabecera:   0 1px 0 var(--c-sup-2);
  --hero-cerca-color: var(--c-negro);   /* las tablas de la portada, del color de la tira negra que sigue */
}

/* Cabecera negra: logo con rótulo blanco (el disco blanco del sello resalta sobre negro) */
:root[data-tema="negro"] .site-header { background: var(--c-negro); color: var(--c-blanco); }
:root[data-tema="negro"] .site-header a:not(.btn-call):not(.btn-alt) { color: var(--c-blanco); }
:root[data-tema="negro"] .site-header .logo .logo-claro { display: none; }
:root[data-tema="negro"] .site-header .logo .logo-oscuro { display: block; }

/* Botón de llamar: el óxido brilla sobre negro (resplandor suave, nada en bucle) */
:root[data-tema="negro"] .site-header .btn-call,
:root[data-tema="negro"] .banda .btn-call,
:root[data-tema="negro"] .site-footer .btn-call,
:root[data-tema="negro"] .hero .btn-call,
:root[data-tema="negro"] .seccion--oscura .btn-call {
  border-color: var(--c-oxido);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 24px rgba(181, 72, 42, .38);
}
:root[data-tema="negro"] .site-header .btn-call:hover,
:root[data-tema="negro"] .banda .btn-call:hover,
:root[data-tema="negro"] .site-footer .btn-call:hover,
:root[data-tema="negro"] .hero .btn-call:hover,
:root[data-tema="negro"] .seccion--oscura .btn-call:hover {
  background: var(--c-oxido-hover-oscuro); border-color: var(--c-oxido-hover-oscuro);
}
/* Botón secundario sobre negro: contorno blanco; al pasar, relleno blanco y texto negro */
:root[data-tema="negro"] .site-header .btn-alt,
:root[data-tema="negro"] .seccion--oscura .btn-alt { color: var(--c-blanco); border-color: var(--c-blanco); }
:root[data-tema="negro"] .banda .btn-alt:hover,
:root[data-tema="negro"] .site-footer .btn-alt:hover,
:root[data-tema="negro"] .hero .btn-alt:hover,
:root[data-tema="negro"] .seccion--oscura .btn-alt:hover { background: var(--c-blanco); color: var(--c-negro); }

/* Portada: misma foto; capa negra algo más densa y un fundido a negro abajo, donde arrancan las tablas */
:root[data-tema="negro"] .hero::before {
  background:
    linear-gradient(0deg, rgba(14,14,14,.85) 0%, rgba(14,14,14,0) 22%),
    linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,0) 62%);
}
@media (min-width: 900px) {
  :root[data-tema="negro"] .hero::before {
    background:
      linear-gradient(0deg, rgba(14,14,14,.85) 0%, rgba(14,14,14,0) 22%),
      linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.62) 40%, rgba(0,0,0,0) 66%);
  }
  :root[data-tema="negro"] .hero--derecha::before {
    background:
      linear-gradient(0deg, rgba(14,14,14,.85) 0%, rgba(14,14,14,0) 22%),
      linear-gradient(270deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.62) 40%, rgba(0,0,0,0) 66%);
  }
}
/* 0,62–0,66 de negro sobre el cielo más claro: texto blanco ≥6,8:1 (antes 6,4:1). La foto sigue siendo el LCP:
   no se añade ninguna imagen ni efecto antes de que pinte. */

/* Secciones oscuras: negro con texto blanco; etiquetas en óxido vivo */
:root[data-tema="negro"] .seccion--oscura,
:root[data-tema="negro"] .banda { background: var(--c-negro); color: var(--c-blanco); }
:root[data-tema="negro"] .seccion--oscura h2,
:root[data-tema="negro"] .seccion--oscura h3,
:root[data-tema="negro"] .banda h2, :root[data-tema="negro"] .banda h3 { color: var(--c-blanco); }
:root[data-tema="negro"] .seccion--oscura p { color: var(--c-gris-calido); }
:root[data-tema="negro"] .seccion--oscura .etiqueta,
:root[data-tema="negro"] .banda .etiqueta { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .seccion--oscura a:not(.btn-call):not(.btn-alt) { color: var(--c-blanco); text-decoration-color: var(--c-oxido-vivo); }

/* Pie negro con un larguero de óxido arriba (como el portón) */
:root[data-tema="negro"] .site-footer { background: var(--c-negro); border-top: 4px solid var(--c-oxido); }
:root[data-tema="negro"] .site-footer a { color: var(--c-blanco); text-decoration-color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .site-footer a:hover { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .site-footer .legal { color: var(--c-gris-calido); }

/* Tarjetas de servicio (en sección clara): sin cambios; sobre negro, superficie oscura */
:root[data-tema="negro"] .seccion--oscura .card { background: var(--c-sup); border-color: var(--c-sup-2); color: var(--c-blanco); }

/* Opiniones sobre negro */
:root[data-tema="negro"] .seccion--oscura .review-card { background: var(--c-sup); border-color: var(--c-sup-2); box-shadow: none; }
:root[data-tema="negro"] .seccion--oscura .review-card__meta { color: var(--c-gris-calido); }
:root[data-tema="negro"] .seccion--oscura .review-card__text { color: var(--c-blanco); }
:root[data-tema="negro"] .seccion--oscura .review-card--muestra .review-card__text { color: var(--c-gris-calido); }
:root[data-tema="negro"] .seccion--oscura .review-card__badge { color: var(--c-oxido-vivo); background: transparent; border-color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .seccion--oscura .review-card__avatar { background-color: var(--c-oxido); }

/* Franjas de material más vistosas (contraste alto sobre negro, sin fotos) */
:root[data-tema="negro"] .franja-cedro {
  background-color: #8E3818;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.62) 0 3px, transparent 3px 34px),
    repeating-linear-gradient(90deg, rgba(255,214,170,.16) 3px 8px, transparent 8px 19px,
                                     rgba(0,0,0,.14) 19px 26px, transparent 26px 34px),
    linear-gradient(180deg, #C9582F 0%, #A4431F 55%, #7A2F14 100%);
  box-shadow: inset 0 3px 0 rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.45);
}
:root[data-tema="negro"] .franja-malla {
  background-color: var(--c-negro);
  background-image:
    repeating-linear-gradient(45deg,  rgba(214,210,202,.85) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(-45deg, rgba(150,146,140,.75) 0 2px, transparent 2px 18px);
}
:root[data-tema="negro"] .franja-metal {
  background-color: #151515;
  background-image: repeating-linear-gradient(90deg,
    #121212 0 6px, #2E2E2E 6px 9px, #7A7A7A 9px 10px, #3A3A3A 10px 12px, #1C1C1C 12px 22px, #121212 22px 28px);
}
:root[data-tema="negro"] .franja-hierro {
  background-color: #2A2622;
  background-image:
    linear-gradient(180deg, transparent 0 16%, #6A6A6A 16% calc(16% + 1px), #050505 calc(16% + 1px) calc(16% + 5px),
                    transparent calc(16% + 5px) calc(84% - 5px), #6A6A6A calc(84% - 5px) calc(84% - 4px),
                    #050505 calc(84% - 4px) 84%, transparent 84%),
    repeating-linear-gradient(90deg, transparent 0 25px, #707070 25px 26px, #050505 26px 31px, transparent 31px 36px),
    linear-gradient(180deg, #3A332C, #1E1B18);
}
/* Las tablas en punta (banda de llamada, portada) ya son de cedro: sobre negro se dejan igual; las juntas enseñan el negro */

/* =====================================================================
   Maquetación de la home (Constructor, 2026-11-12). Valores de marca/tokens.css.
   ===================================================================== */
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/archivo-black-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/archivo-400-700-latin.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: var(--b-grueso) solid var(--foco); outline-offset: 2px; }
.banda :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: var(--foco-on-banda); }
.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; }
.skip { position: absolute; left: var(--s-2); top: -100px; z-index: 100; padding: var(--s-3) var(--s-4);
  background: var(--c-carbon); color: var(--c-blanco); font-weight: var(--w-fuerte); border-radius: var(--r-md); }
.skip:focus { top: var(--s-2); }
.wrap { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; } }
.seccion { padding: var(--seccion-y) 0; }
.seccion--alt { background: var(--bg-alt); }
.seccion h2 { font-size: var(--t-h2); max-width: 18ch; }
.intro { margin-top: var(--s-4); max-width: 60ch; color: var(--text-suave); font-size: var(--t-lg); line-height: 1.45; }
.etiqueta { display: block; margin-bottom: var(--s-3); }
.btn-call svg, .btn-alt svg { width: 20px; height: 20px; flex: none; }

/* ---------- Cabecera ---------- */
.site-header { gap: var(--s-3); }
.site-header .logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.site-header .logo img { width: auto; }
.nav { display: none; }
.head-tools { display: flex; align-items: center; gap: var(--s-3); }
.lang { display: inline-flex; align-items: center; font: var(--w-fuerte) var(--t-sm)/1 var(--f-texto); }
.lang > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s-2); }
.lang [aria-current] { color: var(--text); border-bottom: 3px solid var(--c-oxido); min-height: 30px; }
.lang a { color: var(--text-suave); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lang a:hover { color: var(--text); }
.lang .sep { min-width: 0; padding: 0; color: var(--c-linea); }
.site-header .btn-call { min-height: 44px; padding: 0 var(--s-4); }
.site-header .btn-call .num { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; gap: var(--s-1); margin-left: auto; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3);
    font: var(--w-medio) var(--t-sm)/1 var(--f-texto); text-decoration: none; color: var(--text); }
  .nav a:hover { color: var(--c-oxido); text-decoration: underline; text-underline-offset: 6px; }
  .site-header .btn-call .num { display: inline; }
  .site-header .btn-call .corto { display: none; }
}
@media (min-width: 1100px) { .site-header { padding-left: max(var(--gutter), calc((100% - var(--ancho-max)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--ancho-max)) / 2 + var(--gutter))); } }

/* ---------- Portada ---------- */
.hero { min-height: 0; padding: 0; display: block; }
.hero picture, .hero picture img { width: 100%; height: 100%; }
.hero { display: flex; flex-direction: column; min-height: min(calc(100svh - 60px), 720px); }
.hero-in { position: relative; padding: var(--s-6) var(--gutter) var(--s-6); }
.hero-in > * { max-width: 34rem; }
/* Móvil y tableta: la capa oscura va con el bloque de texto y se desvanece 72 px por debajo; debajo, la cerca y el césped a plena luz */
.hero::before { display: none; }
.hero-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -72px; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.60) calc(100% - 72px), rgba(0,0,0,0) 100%); }
.hero h1 { color: var(--c-blanco); font-size: clamp(2rem, 1.1rem + 3.6vw, 3.35rem); max-width: 14ch; }
.hero .etiqueta { color: var(--c-blanco); }
.hero .lead { margin-top: var(--s-4); font-size: var(--t-lg); line-height: 1.4; max-width: 30ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.actions .btn-call, .actions .btn-alt { min-height: 52px; }
.hero img { object-position: 50% 100%; }
@media (max-width: 599px) {
  .actions > * { flex: 1 1 100%; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero-in { padding-top: var(--s-8); }
  .hero-in > * { max-width: 36rem; }
  .actions > * { flex: 0 1 auto; }
}
@media (min-width: 900px) {
  .hero { display: grid; justify-items: end; min-height: min(calc(100svh - 76px), 760px); }
  .hero-in::before { display: none; }
  .hero-in > * { max-width: none; }
  .hero .lead { max-width: 34ch; }
  .hero::before { display: block; background: linear-gradient(270deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.60) 54%, rgba(0,0,0,0) 76%); }
  .hero h1 { max-width: none; font-size: clamp(2.25rem, 1rem + 2.6vw, 2.75rem); }
  .hero img { object-position: 50% 45%; }
  .hero-in { align-self: center; min-height: 0; width: 54%; max-width: 46rem;
    padding: var(--s-8) max(var(--gutter), calc((100vw - var(--ancho-max)) / 2 + var(--gutter))) var(--s-8) 0; }
}

/* ---------- Servicios ---------- */
.grid-svc { display: grid; gap: var(--s-5); margin-top: var(--s-7); grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-svc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-svc { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-piedra); }
.card-txt { padding: var(--s-4) var(--s-5) var(--s-5); }
.card h3 { font-size: var(--t-h3); }
@media (min-width: 1100px) { .card h3 { font-size: 1.3rem; } }
.card p { margin-top: var(--s-2); color: var(--text-suave); }
.card--sinfoto { border-top-width: 1px; border-top-color: var(--c-linea); background: var(--c-piedra); }
.card--sinfoto .franja { height: 48px; }
.card--sinfoto ul { margin-top: var(--s-3); display: grid; gap: var(--s-2); }
.card--sinfoto li { padding-left: var(--s-5); position: relative; font-weight: var(--w-medio); }
.card--sinfoto li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 4px; background: var(--c-oxido); }

/* ---------- Cómo trabajamos ---------- */
.proceso { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
.pasos { position: relative; }
.pasos-l { display: grid; gap: var(--s-6); }
.paso { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s-4); }
.poste { grid-row: span 2; position: relative; display: flex; justify-content: center; }
.poste i { display: block; width: 16px; height: 72px; background: var(--c-carbon); border-radius: 2px 2px 0 0;
  transform-origin: 50% 100%; }
.poste b { position: absolute; top: 80px; font: 400 var(--t-sm)/1 var(--f-titulo); color: var(--c-oxido); }
.paso h3 { font-size: var(--t-h3); align-self: end; }
.paso p { margin-top: var(--s-2); color: var(--text-suave); max-width: 34ch; }
.riel { display: none; }
.fotos-obra { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.fotos-obra img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
@media (min-width: 900px) {
  .pasos-l { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .paso { grid-template-columns: 1fr; }
  .poste { grid-row: auto; justify-content: flex-start; height: 104px; }
  .poste b { top: auto; bottom: 0; left: 0; }
  .paso { align-content: start; }
  .paso h3 { margin-top: var(--s-4); align-self: start; }
  .riel { display: block; position: absolute; left: 0; right: 0; top: 18px; height: 6px; background: var(--c-oxido); transform-origin: 0 50%; z-index: 0; }
  .poste i { position: relative; z-index: 1; margin-left: 4px; }
  .fotos-obra { gap: var(--s-5); }
}

/* ---------- Zonas ---------- */
.zonas { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.zonas .intro { margin-top: 0; }
.cities { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.cities li { padding: var(--s-2) var(--s-3); border: var(--b-fino) solid var(--c-carbon); border-radius: var(--r-sm); font-weight: var(--w-fuerte); }
.has-map .cities { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.mapa { position: relative; }
#map { width: 100%; aspect-ratio: 3 / 4; max-height: 70svh; border: var(--b-fino) solid var(--c-carbon); border-radius: var(--r-md); background: var(--c-piedra); z-index: 0; }
#map .leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.04); }
.leaflet-tooltip.zona { padding: 3px 7px; background: var(--c-blanco); color: var(--c-carbon); border: var(--b-fino) solid var(--c-carbon);
  border-radius: var(--r-sm); box-shadow: none; font: var(--w-fuerte) 13px/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .04em; }
.leaflet-tooltip.zona::before { display: none; }
.leaflet-container .leaflet-control-attribution { font: 12px/1.4 var(--f-texto); background: rgba(255,255,255,.9); }
.leaflet-container .leaflet-control-attribution a { color: var(--c-carbon); }
@media (min-width: 600px) { #map { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) {
  .zonas { grid-template-columns: 5fr 7fr; align-items: start; gap: var(--s-7); }
  #map { aspect-ratio: 1 / 1; max-height: 600px; }
}

/* ---------- Preguntas ---------- */
.faq { margin-top: var(--s-6); max-width: 820px; border-top: var(--b-fino) solid var(--c-carbon); }
.faq details { border-bottom: 1px solid var(--c-linea); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: var(--s-3) 0;
  cursor: pointer; list-style: none; font: var(--w-fuerte) var(--t-lg)/1.3 var(--f-texto); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 3px solid var(--c-oxido); border-bottom: 3px solid var(--c-oxido);
  transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-media) var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 0 var(--s-5); max-width: 62ch; color: var(--text-suave); }

/* ---------- Banda de llamada ---------- */
.cierre-franja { height: var(--franja-alto); background: var(--c-blanco); }
.seccion--alt + .cierre-franja { background: var(--c-piedra); }
.cierre { padding: var(--s-8) 0; }
.cierre h2 { font-size: var(--t-h2); max-width: 16ch; }
.cierre p { margin-top: var(--s-4); color: var(--c-arena); font-size: var(--t-lg); }
.tel-grande { display: inline-block; padding: 6px 0; margin-top: var(--s-5); font: 400 clamp(2rem, 1.2rem + 3.5vw, 3.5rem)/1 var(--f-titulo); color: var(--c-blanco); text-decoration: none; }
.tel-grande:hover { text-decoration: underline; text-decoration-thickness: 3px; }
@media (min-width: 900px) { .cierre .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-7); align-items: end; } .cierre .actions { justify-content: flex-end; } }

/* ---------- Pie ---------- */
.site-footer { border-top: 1px solid var(--c-verde-2); padding-bottom: calc(var(--s-6) + 76px); }
.foot-in { display: grid; gap: var(--s-6); }
.foot-logo img { width: auto; height: 72px; }
.foot-in p { color: var(--c-arena); max-width: 38ch; }
.foot-in .tel { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-blanco); font-weight: var(--w-fuerte); }
.foot-nav { display: flex; flex-wrap: wrap; column-gap: var(--s-4); }
.foot-nav a, .site-footer .lang a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.site-footer .lang [aria-current] { color: var(--c-blanco); border-bottom-color: var(--c-arena); }
.site-footer .lang a { color: var(--c-arena); }
.site-footer .lang .sep { color: var(--c-verde-2); }
.site-footer .legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-verde-2); }
@media (min-width: 900px) { .foot-in { grid-template-columns: 1.3fr 1fr 1fr; } .site-footer { padding-bottom: var(--s-6); } }

/* ---------- Barra fija móvil ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: var(--s-2);
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom)); background: var(--c-blanco); border-top: 1px solid var(--c-linea);
  transition: transform var(--dur-media) var(--ease); }
.callbar a { min-width: 0; min-height: 52px; padding: 0 var(--s-2); letter-spacing: .03em; }
@media (max-width: 419px) { .callbar .btn-alt svg { display: none; } }
.callbar .btn-call { flex: 1.9 1 0; }
.callbar .btn-alt { flex: 1 1 0; }
.callbar.is-away { transform: translateY(110%); }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- Franjas (ruta relativa a assets/, vale en / y en /es/ y en local) ---------- */


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Pantallas muy estrechas: el botón de la cabecera queda solo con el icono (nombre accesible en texto oculto) */
@media (max-width: 379px) {
  .site-header .btn-call { padding: 0 var(--s-3); }
  .site-header .btn-call .corto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .actions .btn-call, .actions .btn-alt { letter-spacing: .03em; padding: 0 var(--s-3); }
}

/* =====================================================================
   v3 (Constructor, 2026-11-13): logo del cliente, menú de servicios agrupado,
   sello, servicios enlazados, opiniones de ejemplo, plantilla de subpágina.
   ===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- Cabecera ---------- */
.site-header { gap: var(--s-2); }
.site-header .logo img { height: 44px; }
.site-header > .head-tools { margin-left: auto; gap: var(--s-2); }
.site-header .head-tools > .btn-call { display: none; }
@media (min-width: 600px) { .site-header .head-tools > .btn-call { display: inline-flex; } .site-header .logo img { height: 52px; } }
@media (min-width: 900px) { .site-header .logo img { height: 64px; } }
@media (max-width: 379px) {
  .site-header .logo img { height: 36px; }
  .lang > * { min-width: 40px; padding: 0 var(--s-1); }
  .lang .sep { min-width: 0; padding: 0; }
}
/* Menú de escritorio: solo desde 1200 px (antes no cabe junto al botón con el número) */
.nav { display: none !important; }
@media (min-width: 1200px) {
  .nav { display: flex !important; align-items: center; gap: 0; margin-left: auto; }
  .site-header > .head-tools { margin-left: var(--s-3); }
  .menu-m { display: none; }
}
.svc-menu { position: relative; }
.svc-menu > summary, .nav > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-3);
  font: var(--w-medio) var(--t-sm)/1 var(--f-texto); color: var(--text); text-decoration: none; cursor: pointer; list-style: none; }
.svc-menu > summary::-webkit-details-marker, .menu-m > summary::-webkit-details-marker { display: none; }
.svc-menu > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-rapida) var(--ease); }
.svc-menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.svc-menu > summary:hover, .nav > a:hover { color: var(--c-oxido); }
.svc-panel { position: absolute; top: calc(100% + 14px); left: -24px; z-index: 70; display: grid; grid-template-columns: repeat(4, max-content);
  gap: var(--s-5) var(--s-6); padding: var(--s-5) var(--s-6); background: var(--c-blanco); border: 1px solid var(--c-linea);
  border-top: 4px solid var(--c-oxido); border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 12px 28px rgba(36,36,36,.14); }
.svc-h, .mm-h { margin: 0 0 var(--s-2); font: var(--w-fuerte) var(--t-xs)/1.2 var(--f-texto); text-transform: uppercase;
  letter-spacing: var(--track-etiqueta); color: var(--c-oxido); }
.svc-g ul, .mm-g ul { display: grid; }
.svc-g a, .mm-g a, .mm-links a { display: flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; font-weight: var(--w-medio); }
.svc-g a:hover, .mm-g a:hover, .mm-links a:hover { color: var(--c-oxido); text-decoration: underline; }
/* Menú móvil y tableta: botón de 44 px y panel bajo la cabecera */
.menu-m > summary { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; list-style: none;
  border: var(--b-fino) solid var(--c-carbon); border-radius: var(--r-md); color: var(--c-carbon); }
.menu-m > summary svg { width: 24px; height: 24px; }
.menu-m[open] > summary { background: var(--c-carbon); color: var(--c-blanco); }
.menu-m-panel { position: fixed; left: 0; right: 0; top: 68px; z-index: 70; max-height: calc(100svh - 68px); overflow-y: auto;
  padding: var(--s-5) var(--gutter) var(--s-7); background: var(--c-blanco); border-top: 4px solid var(--c-oxido); box-shadow: 0 16px 28px rgba(36,36,36,.16);
  display: grid; gap: var(--s-4); }
.menu-m-panel > .svc-h { margin: 0; }
.mm-g { border-bottom: 1px solid var(--c-linea); padding-bottom: var(--s-2); }
.mm-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
@media (min-width: 600px) { .menu-m-panel { grid-template-columns: repeat(2, 1fr); } .menu-m-panel > .svc-h, .mm-links { grid-column: 1 / -1; } }
@media (min-width: 900px) { .menu-m-panel { top: 80px; max-height: calc(100svh - 80px); grid-template-columns: repeat(4, 1fr); } }

/* ---------- Portada: sello "10+" y espacio para la cerca ---------- */
.sello { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); padding: 6px 12px; border: 1px solid var(--c-arena);
  border-radius: var(--r-md); font: var(--w-fuerte) var(--t-sm)/1.2 var(--f-texto); color: var(--c-blanco); background: rgba(0,0,0,.25); }
.sello b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.25em; font-variant-numeric: tabular-nums; }
.hero .actions { margin-top: var(--s-4); }
.hero-cerca { z-index: 2; overflow: hidden; flex-wrap: wrap; }
@media (max-width: 899px) { .hero-in { align-self: stretch; } }

/* ---------- Servicios agrupados (cada tarjeta enlaza a su subpágina) ---------- */
.svc-group { margin-top: var(--s-7); }
.svc-group-h { font-size: var(--t-lg); padding-bottom: var(--s-3); border-bottom: var(--b-fino) solid var(--c-carbon); }
.svc-group .grid-svc { margin-top: var(--s-4); gap: var(--s-3); }
.svc-card a { display: grid; grid-template-columns: 112px 1fr; height: 100%; color: inherit; text-decoration: none; }
.svc-card img { height: 100%; min-height: 96px; aspect-ratio: auto; object-fit: cover; }
.svc-card .card-txt { display: grid; align-content: center; gap: var(--s-1); padding: var(--s-3) var(--s-4); }
.svc-card .card-t { font: 400 1.0625rem/1.15 var(--f-titulo); text-transform: uppercase; }
.svc-card .card-d { color: var(--text-suave); font-size: var(--t-sm); line-height: 1.4; }
.svc-card a:hover .card-t { color: var(--c-oxido); text-decoration: underline; }
.svc-card { border-top-width: 4px; }
@media (min-width: 600px) {
  .svc-group .grid-svc { gap: var(--s-5); }
  .svc-card a { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .svc-card img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .svc-card .card-txt { align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); }
  .svc-card .card-t { font-size: 1.2rem; }
}
.fotos-obra img { background: var(--c-piedra); }

/* ---------- Opiniones (tarjetas de ejemplo) ---------- */
.reviews { margin-top: var(--s-6); }
.review-card__stars { font-size: 1.25rem; }

/* ---------- Plantilla de subpágina ---------- */
.sp-franja { position: relative; overflow: hidden; }
.sp-franja .capa { position: absolute; top: 0; bottom: 0; left: -6%; width: 112%; height: 100%; will-change: transform; }
.sp-hero { padding: var(--s-5) 0 var(--s-7); }
.migas { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: var(--t-sm); color: var(--text-suave); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-underline-offset: 3px; }
.sp-hero-in { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.sp-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); max-width: 16ch; }
.sp-hero .lead { margin-top: var(--s-4); font-size: var(--t-lg); line-height: 1.5; color: var(--text); max-width: 56ch; }
.sp-hero-foto img, .sp-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--c-piedra); }
.sp-hero-foto { position: relative; }
.sp-hero-foto::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c-oxido); border-radius: var(--r-md) var(--r-md) 0 0; }
@media (min-width: 900px) {
  .sp-hero-in { grid-template-columns: 1.05fr 1fr; gap: var(--s-7); align-items: center; }
}
.sp-body { padding-bottom: var(--seccion-y); }
.sp-sec { padding: var(--s-7) 0; border-top: 1px solid var(--c-linea); display: grid; gap: var(--s-5); }
.sp-sec:first-child { border-top: 2px solid var(--c-carbon); }
.sp-sec h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); max-width: 22ch; }
.sp-txt p { margin-top: var(--s-4); max-width: 64ch; color: var(--text); }
.lista { margin-top: var(--s-4); display: grid; gap: var(--s-2); max-width: 64ch; }
.lista li { position: relative; padding-left: var(--s-5); }
.lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 4px; background: var(--c-oxido); }
@media (min-width: 900px) {
  .sp-sec--foto { grid-template-columns: 1.1fr 1fr; gap: var(--s-7); align-items: center; }
  .sp-sec--inv .sp-txt { order: 2; }
}
.pasos--3 .pasos-l { }
@media (min-width: 900px) { .pasos--3 .pasos-l { grid-template-columns: repeat(3, 1fr); } }
.rel { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.rel a { display: grid; gap: var(--s-1); min-height: 44px; padding: var(--s-4) var(--s-5); border: 1px solid var(--c-linea); border-left: 6px solid var(--c-oxido);
  border-radius: var(--r-md); color: inherit; text-decoration: none; background: var(--c-blanco); }
.rel a span { font: 400 1.0625rem/1.2 var(--f-titulo); text-transform: uppercase; }
.rel a small { color: var(--text-suave); font-size: var(--t-sm); }
.rel a:hover span { color: var(--c-oxido); text-decoration: underline; }
@media (min-width: 600px) { .rel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rel { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Pie con la lista de servicios ---------- */
.foot-h { margin-bottom: var(--s-2); font: var(--w-fuerte) var(--t-xs)/1.2 var(--f-texto) !important; text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--c-arena); }
.foot-svc { columns: 2; column-gap: var(--s-5); }
.foot-svc li { padding: 5px 0; break-inside: avoid; }
.foot-svc a { color: var(--c-blanco); font-size: var(--t-sm); }
.foot-logo img { height: 64px; width: auto; }
@media (min-width: 900px) { .foot-in { grid-template-columns: 1fr 1.4fr 1fr; } }

/* ---------- Efectos: estado final si no hay movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-franja .capa, .hero picture, .hero-in { transform: none !important; opacity: 1 !important; }
}

/* Menús cerrados: fuera del flujo (algunos navegadores siguen midiendo el contenido de un details cerrado) */
.svc-menu:not([open]) > .svc-panel, .menu-m:not([open]) > .menu-m-panel { display: none; }
/* Mapa con 12 ciudades: etiquetas más pequeñas y caja más alta en escritorio para que entre a zoom 9 */
.leaflet-tooltip.zona { padding: 2px 5px; font-size: 11px; letter-spacing: .03em; }
@media (min-width: 900px) { #map { aspect-ratio: 4 / 5; max-height: 720px; } .leaflet-tooltip.zona { font-size: 12px; } }

/* ===== v4 (critica-v2) ===== */
/* Fallo 3: la barra de llamada se esconde mientras el menú móvil está abierto */
body:has(.menu-m[open]) .callbar, body.menu-abierto .callbar { transform: translateY(110%); }
.menu-m-panel { padding-bottom: 24px; }
/* Fallo 8: párrafos de zonas separados; en móvil, cuerpo normal */
.zonas-txt .intro + .intro { margin-top: var(--s-4); }
@media (max-width: 599px) { .zonas-txt .intro { font-size: var(--t-base); line-height: 1.55; } }
/* Fallo 9: estrellas de ejemplo con contraste de 3:1 como mínimo */
.review-card__stars { color: #B87500; }
/* Fallo 10: el carrusel se alcanza con el teclado */
.reviews:focus-visible { outline: var(--b-grueso) solid var(--foco); outline-offset: 4px; }
/* Fallo 11: enlaces de servicios del pie a 44 px */
.foot-svc { gap: 0; }
.foot-svc li { padding: 0; }
.foot-svc a { display: inline-flex; align-items: center; min-height: 44px; }
/* Fallo 7: secciones sin foto en dos columnas (titular a la izquierda, texto a la derecha) */
@media (min-width: 900px) {
  .sp-sec:not(.sp-sec--foto) .sp-txt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); }
  .sp-sec:not(.sp-sec--foto) .sp-txt h2 { grid-column: 1; grid-row: 1 / span 8; align-self: start; }
  .sp-sec:not(.sp-sec--foto) .sp-txt > :not(h2) { grid-column: 2; max-width: 64ch; }
  .sp-sec:not(.sp-sec--foto) .sp-txt > h2 + * { margin-top: 0; }
}

/* =====================================================================
   v5 (Constructor, 2026-11-13): tema negro (extras sobre el bloque de marca/tokens.css),
   tira de sellos, formulario de estimado, panel de correo.
   El tema se activa con <html data-tema="negro"> (interruptor THEME en el generador).
   ===================================================================== */

/* ---------- Logo: cada tema enseña el suyo ---------- */
.site-header .logo .logo-oscuro { display: none; }
:root[data-tema="negro"] .site-header .logo .logo-claro { display: none; }
:root[data-tema="negro"] .site-header .logo .logo-oscuro { display: block; }

/* ---------- Tira de sellos tras la portada (negra en el tema negro; piedra en el claro) ---------- */
.tira { padding: var(--s-5) 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: center; }
.chips li { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--w-fuerte) var(--t-sm)/1.3 var(--f-texto);
  text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--text); }
.chips li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--c-oxido); clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 100%, 0 100%); }
:root[data-tema="negro"] .tira .chips li { color: var(--c-blanco); }
:root[data-tema="negro"] .tira .chips li::before { background: var(--c-oxido-vivo); }
@media (max-width: 599px) { .chips { flex-direction: column; align-items: flex-start; gap: var(--s-2); } .tira { padding: var(--s-4) 0; } }
.cierre-sellos { margin-top: var(--s-3) !important; font: var(--w-fuerte) var(--t-sm)/1.3 var(--f-texto) !important; text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--c-arena) !important; }

/* ---------- Portada en tema negro: capa propia (texto a la derecha) + fundido a negro abajo ---------- */
:root[data-tema="negro"] .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(14,14,14,.88) 0%, rgba(14,14,14,0) 100%); }
:root[data-tema="negro"] .hero-in { z-index: 1; }
:root[data-tema="negro"] .hero-in::before { background: linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.64) calc(100% - 72px), rgba(0,0,0,0) 100%); }
@media (min-width: 900px) {
  :root[data-tema="negro"] .hero::before { display: block; background: linear-gradient(270deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.64) 54%, rgba(0,0,0,0) 76%); }
}

/* ---------- Cabecera y menús en negro ---------- */
:root[data-tema="negro"] .lang a { color: var(--c-gris-calido); }
:root[data-tema="negro"] .lang a:hover { color: var(--c-blanco); }
:root[data-tema="negro"] .lang [aria-current] { color: var(--c-blanco); border-bottom-color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .lang .sep { color: var(--c-sup-2); }
:root[data-tema="negro"] .site-header :focus-visible { outline-color: var(--c-blanco); }
:root[data-tema="negro"] .svc-menu > summary, :root[data-tema="negro"] .nav > a { color: var(--c-blanco); }
:root[data-tema="negro"] .svc-menu > summary:hover, :root[data-tema="negro"] .nav > a:hover { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .menu-m > summary { color: var(--c-blanco); border-color: var(--c-blanco); }
:root[data-tema="negro"] .menu-m[open] > summary { background: var(--c-blanco); color: var(--c-negro); }
:root[data-tema="negro"] .svc-panel, :root[data-tema="negro"] .menu-m-panel { background: var(--c-sup); border-color: var(--c-sup-2); border-top-color: var(--c-oxido); box-shadow: 0 16px 32px rgba(0,0,0,.6); }
:root[data-tema="negro"] .svc-h, :root[data-tema="negro"] .mm-h { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .svc-g a, :root[data-tema="negro"] .mm-g a, :root[data-tema="negro"] .mm-links a { color: var(--c-blanco); }
:root[data-tema="negro"] .svc-g a:hover, :root[data-tema="negro"] .mm-g a:hover, :root[data-tema="negro"] .mm-links a:hover { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .mm-g { border-bottom-color: var(--c-sup-2); }
.mm-links .mm-estimado { font-weight: var(--w-fuerte); }

/* ---------- Barra de llamar en negro ---------- */
:root[data-tema="negro"] .callbar { background: var(--c-negro); border-top-color: var(--c-sup-2); }
:root[data-tema="negro"] .callbar .btn-alt { color: var(--c-blanco); border-color: var(--c-blanco); }
:root[data-tema="negro"] .callbar .btn-call { border-color: var(--c-oxido); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(181,72,42,.35); }
:root[data-tema="negro"] .callbar :focus-visible { outline-color: var(--c-blanco); }

/* ---------- Secciones oscuras: pasos, opiniones ---------- */
:root[data-tema="negro"] .seccion--oscura .poste i { background: var(--c-blanco); }
:root[data-tema="negro"] .seccion--oscura .poste b { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .seccion--oscura .paso p { color: var(--c-gris-calido); }
:root[data-tema="negro"] .seccion--oscura .fotos-obra img { background: var(--c-sup); }
:root[data-tema="negro"] .seccion--oscura .review-card__stars { color: #E7A417; }
:root[data-tema="negro"] .seccion--oscura .reviews:focus-visible { outline-color: var(--c-blanco); }


/* ---------- Pie en negro ---------- */
:root[data-tema="negro"] .foot-h { color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .foot-in p { color: var(--c-gris-calido); }
:root[data-tema="negro"] .foot-in .tel, :root[data-tema="negro"] .foot-svc a, :root[data-tema="negro"] .foot-nav a { color: var(--c-blanco); }
:root[data-tema="negro"] .site-footer .lang a { color: var(--c-gris-calido); }
:root[data-tema="negro"] .site-footer .lang [aria-current] { border-bottom-color: var(--c-oxido-vivo); }
:root[data-tema="negro"] .site-footer .legal { border-top-color: var(--c-sup-2); }
:root[data-tema="negro"] .site-footer { border-bottom: 0; }

/* ---------- Banda de llamada ---------- */
:root[data-tema="negro"] .banda p { color: var(--c-gris-calido); }
:root[data-tema="negro"] .banda .cierre-sellos { color: var(--c-blanco) !important; }
:root[data-tema="negro"] .cierre-franja { background: var(--c-blanco); }
:root[data-tema="negro"] .cierre-franja.sobre-alt { background: var(--c-piedra); }
:root[data-tema="negro"] .cierre { border-bottom: 0; }

/* ---------- 404 ---------- */
:root[data-tema="negro"] .p404 .btn-alt { color: var(--c-carbon); }

/* ---------- Formulario de estimado ---------- */
.form-wrap { display: grid; gap: var(--s-6); }
.form-intro h2 { font-size: var(--t-h2); max-width: 18ch; }
.form-tel { margin-top: var(--s-5); }
@media (min-width: 900px) { .form-wrap { grid-template-columns: 4fr 8fr; gap: var(--s-8); align-items: start; } .form-intro { position: sticky; top: 104px; } }
.estimate-form { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .estimate-form { grid-template-columns: 1fr 1fr; } .estimate-form .f-ancho { grid-column: 1 / -1; } }
.estimate-form .field { gap: var(--s-2); min-width: 0; align-content: start; }
.estimate-form .field label { font: var(--w-fuerte) var(--t-sm)/1.3 var(--f-texto); }
.estimate-form input, .estimate-form select, .estimate-form textarea { width: 100%; max-width: 100%; }
.estimate-form select { appearance: auto; }
.estimate-form textarea { min-height: 120px; resize: vertical; }
.estimate-form input[type="file"] { padding: var(--s-3); min-height: 56px; background: var(--c-blanco); }
.estimate-form .ayuda { font-size: var(--t-xs); line-height: 1.4; color: var(--text-suave); }
.estimate-form .field input:user-invalid, .estimate-form .field select:user-invalid { border-color: var(--c-error); }
.f-trampa input { min-height: 44px; }
.f-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.f-error { grid-column: 1 / -1; padding: var(--s-3) var(--s-4); border: var(--b-fino) solid var(--c-error); border-radius: var(--r-sm); color: var(--c-error); background: #FDF1EF; font-weight: var(--w-fuerte); }
.f-enviar { display: grid; gap: var(--s-3); justify-items: start; }
.f-enviar .btn-call { min-height: 56px; padding: 0 var(--s-6); cursor: pointer; }
.f-consent { font-size: var(--t-xs); line-height: 1.5; color: var(--text-suave); max-width: 62ch; }
.f-consent a { color: var(--text); }
/* Aviso de "no activo" / enviado / error. Sin JavaScript, #estimate-off se ve con :target. */
.form-estado { grid-column: 1 / -1; padding: var(--s-5); border: var(--b-fino) solid var(--c-carbon); border-left: 8px solid var(--c-oxido); border-radius: var(--r-md); background: var(--c-blanco); color: var(--c-carbon); }
.form-estado h3 { font-size: var(--t-h3); }
.form-estado p { margin-top: var(--s-2); max-width: 60ch; }
.form-estado .actions { margin-top: var(--s-4); }
.form-estado .btn-alt { color: var(--c-carbon); border-color: var(--c-carbon); }
.form-estado .btn-alt:hover { background: var(--c-carbon); color: var(--c-blanco); }
.form-estado:target { display: block; }
.form-estado[hidden]:target { display: block; }
.form-wrap:has(.form-estado.es-visible) .estimate-form { display: none; }
@media (min-width: 900px) { .form-estado { grid-column: 2; } }

/* ---------- Panel de correo (EN): Gmail, aplicación de correo, copiar ---------- */
.mail-dialog { border: var(--b-fino) solid var(--c-carbon); border-radius: var(--r-md); padding: var(--s-5); max-width: min(420px, calc(100vw - 32px)); background: var(--c-blanco); color: var(--c-carbon); box-shadow: 0 20px 48px rgba(0,0,0,.45); }
.mail-dialog::backdrop { background: rgba(0,0,0,.6); }
.mail-dialog h2 { font: 400 var(--t-lg)/1.2 var(--f-titulo); text-transform: uppercase; margin-bottom: var(--s-4); }
.mail-dialog .md-list { display: grid; gap: var(--s-3); }
.mail-dialog .md-list a, .mail-dialog .md-list button { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-md);
  font: var(--w-fuerte) var(--t-sm)/1 var(--f-texto); text-transform: uppercase; letter-spacing: var(--track-etiqueta); text-decoration: none; cursor: pointer; }
.mail-dialog .md-gmail { background: var(--c-oxido); color: var(--c-blanco); border: var(--b-fino) solid var(--c-oxido); }
.mail-dialog .md-app, .mail-dialog .md-copy, .mail-dialog .md-cerrar { background: transparent; color: var(--c-carbon); border: var(--b-fino) solid var(--c-carbon); }
.mail-dialog .md-dir { text-align: center; font-weight: var(--w-fuerte); word-break: break-all; padding: var(--s-2) 0; }

@media (prefers-reduced-motion: reduce) { .estimate-form *, .mail-dialog * { transition: none !important; animation: none !important; } }

/* ---------- Sello "#1" de la portada, al lado del h1 (orden del operador): misma letra y cuerpo que el h1 ---------- */
.hero-titulo { display: grid; gap: var(--s-3); align-items: stretch; }
.hero .sello-1 { margin: 0; max-width: none; display: flex; align-items: center; gap: var(--s-3); padding: 8px 14px; background: var(--c-oxido); color: var(--c-blanco);
  border: 2px solid var(--c-blanco); border-radius: var(--r-md); box-shadow: 0 6px 20px rgba(0,0,0,.45); text-transform: uppercase; }
.hero .sello-1 .s1-n { font: 400 clamp(2rem, 1.1rem + 3.6vw, 3.35rem)/1 var(--f-titulo); letter-spacing: var(--track-titulo); }   /* = .hero h1 (móvil) */
.hero .sello-1 .s1-t { font: 400 .8125rem/1.2 var(--f-titulo); letter-spacing: .04em; }
.hero .sello-1 { justify-self: start; }
@media (min-width: 900px) {
  .hero-titulo { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); }
  .hero .sello-1 { flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 10px 18px; justify-self: stretch; width: 11rem; }
  .hero .sello-1 .s1-n { font-size: clamp(2.25rem, 1rem + 2.6vw, 2.75rem); }                                                    /* = .hero h1 (escritorio) */
  .hero .sello-1 .s1-t { font-size: .875rem; }
}
@media (min-width: 1200px) { .hero-titulo { margin-right: calc(-1 * max(0px, (100vw - 1180px) / 2 + 8px)); } }   /* el h1 gana ancho sobre el margen derecho (no hay desborde: queda margen) */

/* ---------- Cabecera de escritorio: sin saltos de línea (ES es más largo) ---------- */
.site-header .nav > a, .svc-menu > summary, .site-header .btn-call { white-space: nowrap; }
@media (min-width: 1280px) {
  .nav > a, .svc-menu > summary { padding: 0 var(--s-2); }
  .site-header { padding-left: max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter))); }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .nav { display: none !important; }
  .menu-m { display: block; }
  .site-header > .head-tools { margin-left: auto; }
}

/* =====================================================================
   v5 · Opiniones reales con rotación (Constructor, 2026-11-14)
   Sin JavaScript: todas las tarjetas en lista (rejilla). Con JavaScript: carrusel de desplazamiento con imán,
   que gira solo (6 s), se pausa y se mueve a mano. Con movimiento reducido no gira solo.
   ===================================================================== */
.carrusel { position: relative; margin-top: var(--s-6); }
.reviews { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: 0; overflow: visible; grid-auto-flow: row; grid-auto-columns: auto; scroll-snap-type: none; padding-bottom: 0; }
@media (min-width: 700px) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reviews { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }

.review-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5); }
.review-card .rq { font: 400 4.5rem/.7 var(--f-titulo); height: 2rem; color: var(--c-oxido); }
:root[data-tema="negro"] .seccion--oscura .review-card .rq { color: var(--c-oxido-vivo); }
.review-card__text { margin: 0; }
.review-card__text p { margin: 0; font-size: var(--t-base); line-height: 1.55; color: inherit; }
.review-card__name { margin: auto 0 0; padding-top: var(--s-2); font: var(--w-fuerte) var(--t-sm)/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: var(--track-etiqueta); color: var(--text); }
.review-card__nota { margin: 0; font-size: var(--t-xs); line-height: 1.3; color: var(--text-suave); font-style: italic; }
:root[data-tema="negro"] .seccion--oscura .review-card__name { color: var(--c-blanco); }
:root[data-tema="negro"] .seccion--oscura .review-card__nota { color: var(--c-gris-calido); }
:root[data-tema="negro"] .seccion--oscura .review-card__text, :root[data-tema="negro"] .seccion--oscura .review-card__text p { color: var(--c-blanco); }

/* ---- Con JavaScript: carrusel ---- */
.js-car .reviews { display: flex; gap: var(--car-gap, 16px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0; position: relative; --pv: 1; }
.js-car .reviews::-webkit-scrollbar { display: none; }
.js-car .review-card { flex: 0 0 calc((100% - var(--car-gap, 16px) * (var(--pv) - 1)) / var(--pv)); scroll-snap-align: start; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (min-width: 700px) { .js-car .reviews { --pv: 2; } }
@media (min-width: 1100px) { .js-car .reviews { --pv: 3; } }
/* Las que quedan fuera de la vista se atenúan; las que entran, se aclaran (fundido suave sobre el negro) */
.js-car .review-card.fuera { opacity: .35; transform: scale(.98); }
.car-ctl { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.car-ctl button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  background: transparent; color: var(--text); border: var(--b-fino) solid currentColor; border-radius: var(--r-md); }
.car-ctl button:hover { background: var(--text); color: var(--bg); }
.car-ctl button svg { width: 22px; height: 22px; }
.car-ctl .car-cuenta { margin-left: auto; font: var(--w-fuerte) var(--t-sm)/1 var(--f-texto); letter-spacing: var(--track-etiqueta); color: var(--text-suave); font-variant-numeric: tabular-nums; }
:root[data-tema="negro"] .seccion--oscura .car-ctl button { color: var(--c-blanco); }
:root[data-tema="negro"] .seccion--oscura .car-ctl button:hover { background: var(--c-blanco); color: var(--c-negro); }
:root[data-tema="negro"] .seccion--oscura .car-ctl .car-cuenta { color: var(--c-gris-calido); }
:root[data-tema="negro"] .seccion--oscura .car-ctl button:focus-visible { outline-color: var(--c-blanco); }
.car-ctl .car-pausa .i-play { display: none; }
.car-ctl .car-pausa[aria-pressed="true"] .i-play { display: block; }
.car-ctl .car-pausa[aria-pressed="true"] .i-pausa { display: none; }
@media (prefers-reduced-motion: reduce) {
  .js-car .review-card { transition: none; }
  .js-car .reviews { scroll-behavior: auto; }
}

/* Estrellas (decisión del operador): doradas sobre negro, ámbar oscuro sobre claro; texto accesible "5 de 5 estrellas" */
.review-card .review-card__stars { display: block; margin-top: calc(var(--s-1) * -1); color: #B87500; font-size: 1.375rem; letter-spacing: 3px; line-height: 1; }
:root[data-tema="negro"] .seccion--oscura .review-card .review-card__stars { color: #E7A417; }

/* Lista de ciudades siempre visible (también en móvil): una línea discreta bajo el mapa (operador, 14 nov 2026) */
.map-linea { margin-top: var(--s-3); font-size: var(--t-xs); line-height: 1.5; color: var(--text-suave); }

/* v6 · vídeos de obras (14 nov 2026) */
.sp-videos .vids { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: start; margin-top: 20px; }
.sp-videos .vid { margin: 0; }
.sp-videos video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio, 10px); background: #111; }
.sp-videos figcaption { margin-top: 8px; font-size: .92rem; opacity: .85; }
@media (max-width: 520px) { .sp-videos .vids { grid-template-columns: 1fr; } }
.sp-videos.seccion { padding-top: 0; }

/* ---------- Móvil: botón visible "Services / Servicios" (operador, 14 nov 2026) ---------- */
.svc-m > summary { width: auto; padding: 0 10px 0 12px; gap: 6px; font: var(--w-fuerte) 13px/1 var(--f-texto); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.svc-m > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.svc-m[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
@media (max-width: 599px) {
  .site-header .logo img { height: 36px; }
  .site-header .lang [aria-current], .site-header .lang .sep { display: none; }
  .site-header .lang > a { min-width: 40px; padding: 0 4px; }
}
@media (max-width: 379px) { .svc-m > summary { padding: 0 8px; font-size: 12px; } .site-header .logo img { height: 30px; } .site-header > .head-tools { gap: 6px; } }
@media (max-width: 339px) { .site-header .logo img { height: 26px; } .svc-m > summary { padding: 0 6px; letter-spacing: 0; } }
@media (max-width: 899px) { .site-header .head-tools > .btn-call { display: none; } }   /* abajo ya está la barra fija de llamar */
/* ---------- Lanzamiento (14 nov 2026) ---------- */
.ref-wrap { position: relative; display: block; }
.ref-tag { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; background: rgba(0,0,0,.72); color: #fff; font: 600 11px/1.3 var(--f-texto); border-radius: 2px; }
.legal-wrap { max-width: 760px; }
.legal-wrap h1 { font-size: var(--t-h2); margin-bottom: var(--s-2); }
.legal-wrap h2 { font-size: var(--t-h3, 1.35rem); margin-top: var(--s-6); }
.legal-wrap p { max-width: 68ch; }
.legal-fecha { color: var(--text-suave); }
.site-footer .legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
.legal-wrap h2 { max-width: none; margin-bottom: var(--s-2); }
.legal-wrap p { margin: 0 0 var(--s-3); }