/* =====================================================================
   Buda Fence LLC · sistema de diseño (tokens + componentes + franjas)
   Diseñador, 2026-11-12. Logo final: marco de portón (marca/kit/).
   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.875rem, 1.45rem + 1.8vw, 3rem);
  --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 .logo img { display: block; height: 40px; width: auto; }   /* buda-fence-logo-small.svg */
@media (min-width: 900px) { .site-header { min-height: 76px; } .site-header .logo img { height: 52px; } } /* buda-fence-logo.svg */

/* Pie verde: logo buda-fence-logo-on-green.svg, "© 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/). */
.franja-cedro--foto {
  background: #9E3F24 url("/assets/img/strip-cedar-photo-896.webp") left center / auto 100% repeat-x;
}

/* 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; } }

/* =====================================================================
   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 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-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) ---------- */
.franja-cedro--foto { background: #9E3F24 url("img/strip-cedar-photo-896.webp") left center / auto 100% repeat-x; }

@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); }
}