/* ==========================================================================
   OBRALOCAL — reforma de locales comerciales
   Demo ASCENDIA · plan Profesional · estático, mobile-first, sin frameworks.

   Sistema: paleta ASCENDIA con el gris pizarra promovido a color de mando
   (portada, paneles y datos) porque aquí el interlocutor es un negocio, no
   una casa. Todo va a canto vivo —sin esquinas redondeadas ni sombras
   difusas—: reglas de 1px, retículas y bloques que se leen como una hoja de
   planificación de obra.

   El motivo estructural es la FRANJA DE PLANIFICACIÓN: la barra segmentada
   del cronograma. Aparece como firma en los separadores, en la portada y,
   en su versión completa, como diagrama de fases con los tramos nocturnos
   marcados en terracota.
   ========================================================================== */

:root {
  /* Paleta ASCENDIA, nombrada con el vocabulario de la obra */
  --lienzo:       #F5F1EB;
  --arena:        #EBE5DB;
  --papel:        #FFFDFA;
  --tinta:        #1A1A1A;
  --terracota:    #C1502E;
  --terracota-os: #A6421F;   /* terracota legible en texto pequeño sobre claro */
  --terracota-cl: #E9A88E;   /* y su equivalente sobre fondo oscuro */
  --pizarra:      #4A5859;
  --pizarra-cl:   #5E6C6D;
  --pizarra-os:   #3B4748;
  --regla:        #D8D1C5;
  --regla-fina:   #E4DED4;
  --sobre-osc:    #E6E2DA;   /* texto sobre pizarra/tinta */
  --sobre-tenue:  #C2CCCC;
  --verde-ok:     #2E6B45;

  /* Tipografía: display técnico, texto neutro y condensada para los datos */
  --titular: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dato:    "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  /* Medidas */
  --ancho: 1200px;
  --aire: clamp(3.75rem, 8.5vw, 7rem);
  --canto: 2px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 6.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.18; }
h4 { font-family: var(--titular); font-weight: 700; font-size: 1.02rem; margin: 0 0 .4em; letter-spacing: -.015em; }

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
strong, b { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.salto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--lienzo);
  padding: .8rem 1.1rem; font-weight: 600; text-decoration: none;
}
.salto:focus { left: .5rem; top: .5rem; }

.oculto-visual {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.25rem; }
.medida { max-width: 62ch; }

.bloque { padding-block: var(--aire); }
.bloque-arena { background: var(--arena); }
.bloque-pizarra { background: var(--pizarra); color: var(--sobre-osc); }
.bloque-tinta { background: var(--tinta); color: var(--sobre-osc); }
.bloque-pizarra h2, .bloque-pizarra h3, .bloque-tinta h2, .bloque-tinta h3 { color: #fff; }

.titular-bloque { max-width: 48ch; margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.entradilla { color: var(--pizarra); font-size: 1.075rem; }
.bloque-pizarra .entradilla, .bloque-tinta .entradilla { color: var(--sobre-tenue); }

/* Etiqueta condensada: la nomenclatura de una hoja de obra */
.etiqueta {
  display: block;
  font-family: var(--dato);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terracota-os);
  margin-bottom: .9rem;
}
.etiqueta-apagada { color: var(--pizarra-cl); }
.bloque-pizarra .etiqueta, .bloque-tinta .etiqueta { color: var(--terracota-cl); }

.acento { color: var(--terracota); }
.bloque-pizarra .acento, .bloque-tinta .acento { color: var(--terracota-cl); }

/* ---------- Franja de planificación (firma gráfica) ---------- */
.franja {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-bottom: 1.6rem;
}
.franja span { background: var(--regla); flex: 1 1 auto; }
.franja span:nth-child(3) { background: var(--terracota); flex-grow: 1.6; }
.franja span:nth-child(5) { background: var(--pizarra); }
.bloque-pizarra .franja span, .bloque-tinta .franja span { background: rgba(255,255,255,.24); }
.bloque-pizarra .franja span:nth-child(3), .bloque-tinta .franja span:nth-child(3) { background: var(--terracota); }
.bloque-pizarra .franja span:nth-child(5), .bloque-tinta .franja span:nth-child(5) { background: rgba(255,255,255,.5); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.4rem;
  font-family: var(--titular);
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: var(--canto);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-g { padding: 1.05rem 1.8rem; font-size: 1.02rem; }
.btn-p { padding: .55rem 1rem; font-size: .875rem; border-width: 1.5px; }
.btn-ancho { width: 100%; }

.btn-solido { background: var(--terracota); color: #fff; border-color: var(--terracota); }
.btn-solido:hover { background: var(--terracota-os); border-color: var(--terracota-os); }

.btn-linea { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn-linea:hover { background: var(--tinta); color: var(--lienzo); }

.btn-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-claro:hover { background: #fff; color: var(--tinta); border-color: #fff; }

.icono-wa { width: 1.15em; height: 1.15em; flex: none; }

/* Enlace de continuidad */
.enlace {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--titular); font-weight: 700; font-size: .98rem;
  text-decoration: none; padding-bottom: .3rem;
  border-bottom: 2px solid var(--terracota);
  transition: gap .18s ease, color .18s ease;
}
.enlace:hover { gap: .9rem; color: var(--terracota-os); }
.enlace svg { width: 1em; height: 1em; flex: none; }
.bloque-pizarra .enlace:hover, .bloque-tinta .enlace:hover { color: var(--terracota-cl); }
.tras-bloque { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ---------- Aviso de demo ---------- */
.aviso-demo {
  background: var(--tinta); color: var(--sobre-osc);
  font-family: var(--dato); font-size: .95rem; letter-spacing: .04em;
  padding: .5rem 0;
}
.aviso-demo .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .7rem; text-align: center; }
.aviso-demo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.aviso-demo b { color: var(--terracota-cl); font-weight: 600; }

/* ---------- Cabecera ---------- */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245,241,235,.95);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--regla);
  transition: box-shadow .22s ease;
}
.barra.fijada { box-shadow: 0 1px 18px -8px rgba(26,26,26,.4); }
.barra-interior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }

.marca { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tinta); }
.marca-signo { width: 32px; height: 32px; flex: none; }
.marca-nombre {
  display: block;
  font-family: var(--titular); font-weight: 700; font-size: 1.18rem;
  letter-spacing: -.03em; line-height: 1;
}
.marca-cola {
  display: block; margin-top: .25rem;
  font-family: var(--dato); font-size: .8rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pizarra-cl);
}

.abrir-menu {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px;
  background: none; border: 1px solid var(--regla); border-radius: var(--canto); cursor: pointer;
}
.abrir-menu-barra { display: block; height: 2px; background: var(--tinta); transition: transform .2s ease, opacity .2s ease; }
.abrir-menu[aria-expanded="true"] .abrir-menu-barra:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.abrir-menu[aria-expanded="true"] .abrir-menu-barra:nth-child(2) { opacity: 0; }
.abrir-menu[aria-expanded="true"] .abrir-menu-barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--lienzo); border-bottom: 1px solid var(--regla);
  padding: .5rem 1.25rem 1.5rem;
}
.menu.abierto { display: block; }
.menu-lista { display: flex; flex-direction: column; margin-bottom: 1.15rem; }
.menu-lista a {
  display: block; padding: .8rem 0; text-decoration: none;
  font-family: var(--titular); font-weight: 500;
  border-bottom: 1px solid var(--regla-fina);
}
.menu-lista a:hover, .menu-lista a[aria-current="page"] { color: var(--terracota-os); }

/* ---------- Portada ---------- */
.apertura {
  background: var(--pizarra); color: var(--sobre-osc);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  position: relative; overflow: hidden;
}
/* Retícula tenue: el papel milimetrado de un plano */
.apertura::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.apertura > .contenedor { position: relative; }
.apertura h1 { color: #fff; margin-bottom: .3em; }
/* Sobre pizarra, el terracota puro no llega al contraste mínimo: se aclara */
.apertura .etiqueta, .apertura .acento { color: var(--terracota-cl); }
.apertura-rejilla { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: start; }
.apertura-guia { font-size: clamp(1.075rem, 2vw, 1.2rem); color: var(--sobre-tenue); max-width: 46ch; }
.apertura-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.apertura-acciones .btn { flex: 1 1 230px; }

.apertura-medio { position: relative; }
.apertura-imagen {
  margin: 0;
  border: 1px solid rgba(255,255,255,.22);
  background: var(--pizarra-os);
  overflow: hidden;
}
.apertura-imagen img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.apertura-pie {
  display: flex; flex-wrap: wrap; gap: .2rem 1.25rem;
  padding: .7rem .9rem;
  border-top: 1px solid rgba(255,255,255,.22);
  font-family: var(--dato); font-size: .92rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sobre-tenue);
}
.apertura-pie b { color: #fff; font-weight: 600; }

/* Sello de dato duro sobre la imagen */
.sello {
  display: inline-block;
  background: var(--terracota); color: #fff;
  padding: .75rem 1rem .8rem;
  margin-top: -1px;
}
.sello-cifra {
  display: block; font-family: var(--titular); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1; letter-spacing: -.03em;
}
.sello-texto {
  display: block; margin-top: .3rem;
  font-family: var(--dato); font-size: .88rem; letter-spacing: .14em; text-transform: uppercase;
  color: #F7DCD1;
}

/* ---------- Banda de cifras ---------- */
.cifras { border-bottom: 1px solid var(--regla); }
.cifras-lista { display: grid; }
.cifra { padding: 1.5rem 0; border-bottom: 1px solid var(--regla-fina); }
.cifra:last-child { border-bottom: 0; }
.cifra dt {
  font-family: var(--dato); font-size: .92rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pizarra-cl);
  margin-bottom: .35rem;
}
.cifra dd {
  margin: 0;
  font-family: var(--titular); font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.03em; line-height: 1.05;
}
.cifra dd small {
  display: block; margin-top: .45rem;
  font-family: var(--texto); font-weight: 400; font-size: .92rem;
  letter-spacing: 0; color: var(--pizarra); line-height: 1.5;
}

/* ---------- Tarjetas de diferencial ---------- */
.tarjetas { display: grid; gap: 1px; background: var(--regla); border: 1px solid var(--regla); }
.tarjeta { display: flex; flex-direction: column; background: var(--lienzo); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.bloque-pizarra .tarjeta h3, .bloque-tinta .tarjeta h3 { color: var(--tinta); }
.tarjeta-orden {
  display: block;
  font-family: var(--dato); font-size: .92rem; font-weight: 600;
  letter-spacing: .2em; color: var(--terracota-os);
  margin-bottom: 1.5rem; padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--terracota);
}
.tarjeta p { color: var(--pizarra); font-size: .99rem; margin-bottom: 1.1rem; }
.tarjeta-nota {
  display: block; margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--regla-fina);
  font-family: var(--dato); font-size: .95rem; letter-spacing: .06em;
  color: var(--pizarra-cl);
}
.tarjeta-nota b { color: var(--tinta); font-weight: 600; }
.bloque-arena .tarjetas .tarjeta { background: var(--arena); }

/* ---------- Cronograma de fases ---------- */
.crono { border-top: 1px solid var(--regla); }
.bloque-pizarra .crono, .bloque-tinta .crono { border-color: rgba(255,255,255,.2); }

.crono-escala {
  display: none;
  font-family: var(--dato); font-size: .88rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pizarra-cl);
}
.bloque-pizarra .crono-escala { color: var(--sobre-tenue); }
.crono-escala b { font-family: var(--dato); font-weight: 600; padding: .5rem 0; }
.crono-escala span { padding: .5rem 0 .5rem .5rem; border-left: 1px solid var(--regla); }
.bloque-pizarra .crono-escala span { border-color: rgba(255,255,255,.2); }

.crono-fase {
  display: grid; gap: .9rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--regla);
}
.bloque-pizarra .crono-fase, .bloque-tinta .crono-fase { border-color: rgba(255,255,255,.2); }
.crono-nombre { display: flex; align-items: baseline; gap: .8rem; }
.crono-orden { font-family: var(--dato); font-size: .92rem; letter-spacing: .14em; color: var(--terracota-os); flex: none; }
.bloque-pizarra .crono-orden { color: var(--terracota-cl); }
.crono-nombre h3 { font-size: 1.12rem; margin: 0 0 .15rem; }
.crono-detalle {
  display: block; margin-top: .2rem;
  font-family: var(--dato); font-size: .95rem; letter-spacing: .06em; color: var(--pizarra-cl);
}
.bloque-pizarra .crono-detalle { color: var(--sobre-tenue); }

.crono-pista { position: relative; height: 26px; background: var(--regla-fina); }
.bloque-pizarra .crono-pista, .bloque-tinta .crono-pista { background: rgba(255,255,255,.1); }
.crono-tramo {
  position: absolute; top: 0; bottom: 0;
  left: var(--ini, 0%); width: var(--anc, 20%);
  background: var(--pizarra);
}
.bloque-pizarra .crono-tramo { background: var(--sobre-tenue); }
/* Tramo en horario de cierre: rayado, como una zona acotada del plano */
.crono-tramo-noche,
.bloque-pizarra .crono-tramo-noche,
.bloque-tinta .crono-tramo-noche {
  background-color: var(--terracota);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px);
}

.crono-leyenda {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 1.5rem;
  font-family: var(--dato); font-size: .95rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pizarra-cl);
}
.bloque-pizarra .crono-leyenda { color: var(--sobre-tenue); }
.crono-leyenda span { display: inline-flex; align-items: center; gap: .5rem; }
.crono-leyenda i { width: 22px; height: 10px; flex: none; background: var(--pizarra); }
.bloque-pizarra .crono-leyenda i { background: var(--sobre-tenue); }
.crono-leyenda .noche, .bloque-pizarra .crono-leyenda .noche {
  background-color: var(--terracota);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 4px, transparent 4px 8px);
}

/* ---------- Obras: rejilla antes / después ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtro {
  padding: .5rem 1rem;
  background: transparent; border: 1px solid var(--regla); border-radius: var(--canto);
  font-family: var(--dato); font-size: .98rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pizarra);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.filtro:hover { border-color: var(--pizarra); }
.filtro[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--lienzo); }
.recuento { font-family: var(--dato); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pizarra-cl); margin-bottom: 2rem; }

.obras { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.obra { display: flex; flex-direction: column; border-top: 2px solid var(--tinta); padding-top: 1.35rem; }
.obra .obra-ficha { margin-top: auto; }
.obra[hidden] { display: none; }

.par { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.par figure { position: relative; margin: 0; background: var(--arena); overflow: hidden; }
.par img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.par figcaption {
  position: absolute; top: 0; left: 0;
  font-family: var(--dato); font-size: .88rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .28rem .6rem;
  background: rgba(26,26,26,.78); color: #fff;
}
.par .despues figcaption { background: var(--terracota); }

.obra-cabecera {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .2rem 1rem; margin-bottom: 1rem;
}
.obra-cabecera h3 { margin: 0; }
.obra-tipo { font-family: var(--dato); font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-os); }
.obra p { color: var(--pizarra); font-size: .98rem; margin: 1.1rem 0 0; }

.obra-ficha {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--regla);
  font-family: var(--dato); font-size: .95rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pizarra-cl);
}
.obra-ficha b { color: var(--tinta); font-weight: 600; }

/* Vista previa en la portada: una sola imagen por obra */
.avance { display: grid; gap: 2rem; }
.avance-obra { display: flex; flex-direction: column; border-top: 2px solid var(--tinta); padding-top: 1.25rem; }
.avance-obra .obra-ficha { margin-top: auto; }
.avance-obra .lamina { margin-bottom: 1.1rem; }
.lamina { background: var(--arena); overflow: hidden; }
.lamina img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Servicios ---------- */
.servicio {
  display: grid; gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-block: clamp(2.5rem, 5.5vw, 4rem);
  border-top: 1px solid var(--regla);
  align-items: start;
}
.servicio:first-of-type { border-top: 0; padding-top: 0; }
.servicio-texto p { color: var(--pizarra); }
.servicio h2 { margin-bottom: .35em; }

.incluye { display: grid; gap: .7rem; margin: 1.5rem 0 0; }
.incluye li { position: relative; padding-left: 1.6rem; font-size: .97rem; color: var(--pizarra); }
.incluye li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; background: var(--terracota);
}
.incluye a { text-decoration: none; border-bottom: 1px solid var(--regla); }
.incluye a:hover { color: var(--terracota-os); border-bottom-color: var(--terracota-os); }

.servicio-datos {
  display: grid; gap: 1px;
  margin-top: 1.75rem;
  background: var(--regla); border: 1px solid var(--regla);
}
.servicio-datos > div { background: var(--lienzo); padding: .9rem 1rem; }
.bloque-arena .servicio-datos > div { background: var(--arena); }
.servicio-datos dt {
  font-family: var(--dato); font-size: .88rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pizarra-cl);
}
.servicio-datos dd { margin: .15rem 0 0; font-family: var(--titular); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }

/* ---------- Motivos (por qué elegirnos) ---------- */
.motivos { display: grid; gap: 0; }
.motivo {
  display: grid; gap: .5rem 2rem;
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--regla);
}
.motivo:last-child { border-bottom: 1px solid var(--regla); }
.motivo-orden {
  font-family: var(--titular); font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3rem); line-height: .9; letter-spacing: -.04em;
  color: var(--terracota);
}
.motivo p { color: var(--pizarra); max-width: 68ch; }
.motivo-prueba {
  margin-top: 1rem; padding: .9rem 1.1rem;
  background: var(--arena); border-left: 3px solid var(--terracota);
  font-size: .95rem; color: var(--pizarra);
}
.bloque-arena .motivo-prueba { background: var(--lienzo); }
.motivo-prueba b { color: var(--tinta); }

/* ---------- Citas ---------- */
.citas { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.cita { display: flex; flex-direction: column; margin: 0; }
.cita figcaption { margin-top: auto; }
.cita blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--titular); font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.3; letter-spacing: -.02em;
  color: #fff;
}
.bloque-arena .cita blockquote, .bloque:not(.bloque-pizarra):not(.bloque-tinta) .cita blockquote { color: var(--tinta); }
.cita figcaption {
  font-family: var(--dato); font-size: .95rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sobre-tenue);
  padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.24);
}
.bloque-arena .cita figcaption { color: var(--pizarra-cl); border-top-color: var(--regla); }

/* ---------- Remate ---------- */
.remate-rejilla { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.remate h2 { max-width: 18ch; }
.remate p { max-width: 46ch; color: var(--pizarra); }
.bloque-pizarra .remate p, .bloque-tinta .remate p { color: var(--sobre-tenue); }
.remate-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- Formulario ---------- */
.contacto-rejilla { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }

.formulario {
  background: var(--papel);
  border: 1px solid var(--regla);
  padding: clamp(1.35rem, 4vw, 2.25rem);
  display: grid; gap: 1.15rem;
}
.campo { display: grid; gap: .4rem; }
.campo-par { display: grid; gap: 1.15rem; }
.campo label, .visto span:first-child {
  font-family: var(--dato); font-size: .95rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pizarra);
}
.obligatorio { color: var(--terracota-os); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .8rem .9rem;
  background: var(--lienzo);
  border: 1.5px solid var(--regla); border-radius: var(--canto);
  font-size: 1rem;
  transition: border-color .16s ease, background-color .16s ease;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--pizarra-cl); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--terracota); background: var(--papel); }
.campo textarea { resize: vertical; min-height: 126px; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5859' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 11px;
  padding-right: 2.4rem;
}
.pista-campo { font-size: .84rem; color: var(--pizarra-cl); margin: 0; }
.visto { display: flex; align-items: flex-start; gap: .65rem; }
.visto input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--terracota); flex: none; }
.visto span { font-family: var(--texto); font-size: .87rem; letter-spacing: 0; text-transform: none; color: var(--pizarra); line-height: 1.5; }
.trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.estado-envio { margin: 0; font-size: .92rem; min-height: 1.3em; }
.estado-envio.correcto { color: var(--verde-ok); font-weight: 600; }
.estado-envio.fallo { color: var(--terracota-os); font-weight: 600; }

/* Panel de contacto directo */
.panel {
  background: var(--pizarra); color: var(--sobre-osc);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.panel .etiqueta { color: var(--terracota-cl); }
.panel h2, .panel h3 { color: #fff; }
.panel h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.panel p { color: var(--sobre-tenue); font-size: .97rem; }
.panel .btn { width: 100%; margin-top: .4rem; }
.datos { display: grid; gap: 1.05rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.2); }
.datos dt {
  font-family: var(--dato); font-size: .88rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-tenue); margin-bottom: .1rem;
}
.datos dd { margin: 0; font-size: 1rem; }
.datos a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.datos a:hover { border-bottom-color: #fff; }

/* Qué pasa después */
.despues-titulo {
  font-family: var(--dato); font-size: .95rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pizarra-cl);
  margin: 2.5rem 0 0;
}
.despues { display: grid; gap: 1.05rem; margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--regla); }
.despues li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; font-size: .96rem; color: var(--pizarra); }
.despues b {
  font-family: var(--dato); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracota-os); padding-top: .1em; min-width: 6.5ch;
}

/* ---------- Preguntas ---------- */
.faq { border-top: 1px solid var(--regla); }
.pregunta { border-bottom: 1px solid var(--regla); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
  font-family: var(--titular); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--terracota), var(--terracota)) 50% 50% / 100% 2px no-repeat,
              linear-gradient(var(--terracota), var(--terracota)) 50% 50% / 2px 100% no-repeat;
  transition: transform .22s ease;
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta summary:hover { color: var(--terracota-os); }
.pregunta-cuerpo { padding-bottom: 1.35rem; }
.pregunta-cuerpo p { color: var(--pizarra); max-width: 70ch; font-size: .98rem; }

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: var(--sobre-tenue); padding-top: clamp(3rem, 6vw, 4.5rem); }
.pie a { color: var(--sobre-osc); text-decoration: none; }
.pie a:hover { color: var(--terracota-cl); }
.pie-rejilla { display: grid; gap: 2.25rem; padding-bottom: 2.75rem; }
.pie .marca { color: #fff; margin-bottom: 1rem; }
.pie .marca-cola { color: var(--sobre-tenue); }
.pie-lema { font-size: .95rem; max-width: 34ch; }
.pie-titulo {
  font-family: var(--dato); font-size: .95rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: #fff; margin: 0 0 1rem;
}
.pie-lista { display: grid; gap: .6rem; font-size: .94rem; }
.pie-social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.pie-social a {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--canto);
  transition: border-color .18s ease, background-color .18s ease;
}
.pie-social a:hover { border-color: var(--terracota); background: var(--terracota); color: #fff; }
.pie-social svg { width: 17px; height: 17px; }
.pie-cierre {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-block: 1.3rem; font-size: .82rem;
}
.pie-cierre p { margin: 0; }

/* ==========================================================================
   Puntos de ruptura
   ========================================================================== */
@media (min-width: 620px) {
  .campo-par { grid-template-columns: 1fr 1fr; }
  .cifras-lista { grid-template-columns: repeat(3, 1fr); }
  .cifra { padding: 1.75rem 1.75rem 1.75rem 0; border-bottom: 0; border-right: 1px solid var(--regla-fina); }
  .cifra:last-child { border-right: 0; }
  .cifra + .cifra { padding-left: 1.75rem; }
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
  .avance { grid-template-columns: repeat(2, 1fr); }
  .servicio-datos { grid-template-columns: repeat(3, 1fr); }
  .motivo { grid-template-columns: 4rem 1fr; }
  .crono-fase { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 1.5rem; }
  .crono-escala { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.5rem; }
  .crono-escala > div { display: grid; grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 900px) {
  .abrir-menu { display: none; }
  .menu {
    display: flex !important; align-items: center; gap: 1.75rem;
    position: static; background: none; border: 0; padding: 0;
  }
  .menu-lista { flex-direction: row; gap: 1.6rem; margin: 0; }
  .menu-lista a { padding: 0; border: 0; font-size: .92rem; }
  .menu-lista a[aria-current="page"] { border-bottom: 2px solid var(--terracota); padding-bottom: 3px; }

  .apertura-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .apertura-acciones .btn { flex: 0 0 auto; }

  .tarjetas { grid-template-columns: repeat(3, 1fr); }
  .avance { grid-template-columns: repeat(3, 1fr); }
  .obras-pareja { grid-template-columns: repeat(2, 1fr); }
  .servicio { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .servicio-invertido .servicio-medio { order: -1; }
  .contacto-rejilla { grid-template-columns: 1.15fr .85fr; }
  .citas { grid-template-columns: repeat(3, 1fr); }
  .remate-rejilla { grid-template-columns: 1.1fr .9fr; align-items: end; }
  .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr 1.15fr; }
  .dos-columnas { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
}