/* =========================================================================
   Brillaval — limpieza de cristales en altura en Valencia
   El sistema visual es el muro cortina: montantes y travesaños de 1px que
   dividen la pagina en paneles. Ese es el UNICO recurso con el que se dibuja
   cualquier superficie que no sea fotografia. Sin degradados decorativos,
   sin tarjetas con sombra, sin bordes redondeados.
   El oro esta reservado a dos cosas y a nada mas: la accion de WhatsApp
   y las cotas de altura.
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --cobalto: #01459F;
  --cobalto-hondo: #012F6E;
  --tinta: #0A1626;
  --tinta-suave: #3D4B5C;
  --oro: #D1B02A;
  --oro-vivo: #E8C63A;
  --papel: #F4F5F7;
  --blanco: #FFFFFF;

  /* montantes: la linea del muro cortina */
  --montante: rgba(10, 22, 38, .14);
  --montante-claro: rgba(255, 255, 255, .18);
  --montante-oro: rgba(209, 176, 42, .45);

  --modulo: 1.5rem;
  --borde: 1px;
  --max: 84rem;

}

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

html {
  scroll-behavior: smooth;
  /* superficies del navegador: tambien son diseno */
  accent-color: var(--cobalto);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cobalto); color: #fff; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }

a { color: var(--cobalto); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-variation-settings: 'wdth' 82; letter-spacing: -.02em; line-height: 1.02; }
p { margin: 0; text-wrap: pretty; }

/* El montante del muro cortina se dibuja con bordes reales de 1px en cada
   panel (accesos, mosaico, agua, contacto), no con una trama de fondo. */

.envoltorio { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; }

/* enlace de salto: oculto sin desbordar nada, visible al llegar con el teclado */
.salto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.salto:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  width: auto; height: auto; overflow: visible; clip-path: none;
  background: var(--oro); color: var(--tinta);
  padding: .75rem 1.25rem; text-decoration: none;
  font-variation-settings: 'wdth' 88, 'wght' 700;
}

/* etiqueta tecnica: la rotulacion del despiece */
.etiqueta {
  font-variation-settings: 'wdth' 76, 'wght' 650;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.etiqueta--claro { color: rgba(255, 255, 255, .72); }

/* ======================= cabecera ======================= */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  border-bottom: var(--borde) solid var(--montante);
}
.cabecera__fila {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 4.25rem;
}
.cabecera__logo img { height: 1.9rem; width: auto; }
.cabecera nav { margin-left: auto; display: flex; gap: 1.5rem; }
.cabecera nav a {
  color: var(--tinta); text-decoration: none;
  font-variation-settings: 'wdth' 86, 'wght' 550;
  font-size: .95rem; padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.cabecera nav a:hover { border-bottom-color: var(--cobalto); }
@media (max-width: 60rem) { .cabecera nav { display: none; } }

/* ======================= acciones ======================= */
.accion {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 1.4rem;
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-size: 1rem; text-decoration: none;
  border: var(--borde) solid transparent;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s, color .18s;
}
.accion:active { transform: translateY(1px); }
.accion svg { width: 1.15em; height: 1.15em; flex: none; }

/* el oro: solo aqui */
.accion--wasap { background: var(--oro); color: var(--tinta); }
.accion--wasap:hover { background: var(--oro-vivo); }
.accion--llamar { background: transparent; color: var(--tinta); border-color: var(--montante); }
.accion--llamar:hover { border-color: var(--tinta); }
.accion--llamar.accion--claro { color: #fff; border-color: var(--montante-claro); }
.accion--llamar.accion--claro:hover { border-color: #fff; }
.cabecera .accion { padding: .6rem 1rem; font-size: .9rem; }
@media (max-width: 30rem) { .cabecera .accion--llamar { display: none; } }

/* ======================= portada ======================= */
.portada { position: relative; background: var(--tinta); color: #fff; overflow: hidden; }
.portada__foto { position: absolute; inset: 0; }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Campo de cobalto macizo con canto duro y su montante: un panel opaco al lado
   de un pano de vidrio. Sin degradado: el muro cortina no difumina nada. */
.portada__velo {
  position: absolute; inset: 0 auto 0 0;
  width: 54%;
  background: rgba(1, 69, 159, .93);
  border-right: var(--borde) solid var(--montante-claro);
}
.portada__cuerpo {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 5.5rem 1fr;
  gap: 0 2rem;
  padding: 4.5rem 0 3.5rem;
  min-height: min(82vh, 46rem);
  align-content: center;
}
.portada h1 {
  font-size: clamp(2.5rem, 6.4vw, 5.25rem);
  font-variation-settings: 'wdth' 78, 'wght' 800;
  max-width: 15ch;
  margin-bottom: 1.25rem;
}
.portada h1 em { font-style: normal; color: #fff; }
.portada__entradilla {
  max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, .88); margin-bottom: 2rem;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: .85rem; }
.portada__sellos {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: var(--borde) solid var(--montante-claro);
}
.sello b {
  display: block; font-size: 1.5rem; font-variation-settings: 'wdth' 80, 'wght' 750;
  line-height: 1; margin-bottom: .3rem;
}
.sello span { font-size: .8rem; color: rgba(255, 255, 255, .7); letter-spacing: .04em; }

/* la cota de la portada: 0 a 20 m dibujados */
.cota { position: relative; border-left: var(--borde) solid var(--montante-oro); }
.cota__marca {
  position: absolute; left: 0; display: flex; align-items: center; gap: .5rem;
  transform: translateY(50%);
  font-variation-settings: 'wdth' 76, 'wght' 600;
  font-size: .8125rem; letter-spacing: .1em; color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.cota__marca::before { content: ''; width: .75rem; height: 1px; background: var(--montante-oro); }
.cota__marca--tope { color: var(--oro); }
.cota__marca--tope::before { width: 1.4rem; height: 2px; background: var(--oro); }
@media (max-width: 48rem) {
  .portada__cuerpo { grid-template-columns: 2.75rem 1fr; gap: 0 1rem; padding: 3rem 0 2.5rem; }
  .cota__marca { font-size: .8125rem; }
  /* los tres datos en fila, no apilados: caben y se leen de un vistazo */
  .portada__sellos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2rem; }
  .sello b { font-size: 1.15rem; }
  .sello span { font-size: .8125rem; line-height: 1.3; display: block; }
  .portada__acciones .accion { width: 100%; justify-content: center; }
}

/* ======================= secciones ======================= */
/* al saltar desde el menu, el titulo no puede quedar bajo la cabecera fija */
.seccion, .portada { scroll-margin-top: 4.5rem; }
@media (max-width: 60rem) { .seccion, .portada { scroll-margin-top: 7.5rem; } }
.seccion { padding: clamp(4rem, 8vw, 7rem) 0; }
.seccion--papel { background: var(--papel); }
.seccion--cobalto { background: var(--cobalto); color: #fff; }
.seccion--cobalto .etiqueta { color: rgba(255, 255, 255, .7); }
.seccion__titulo {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-variation-settings: 'wdth' 80, 'wght' 750;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}
.seccion__intro { max-width: 60ch; color: var(--tinta-suave); font-size: 1.1rem; }
.seccion--cobalto .seccion__intro { color: rgba(255, 255, 255, .82); }

/* ---------- los tres accesos: paneles, no tarjetas ---------- */
.accesos {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--borde) solid var(--montante);
  border-left: var(--borde) solid var(--montante);
}
.acceso {
  border-right: var(--borde) solid var(--montante);
  border-bottom: var(--borde) solid var(--montante);
  padding: 1.75rem;
  display: flex; flex-direction: column;
}
.acceso__figura { margin: -1.75rem -1.75rem 1.5rem; background: var(--tinta); }
.acceso__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.acceso__dibujo { aspect-ratio: 4 / 3; width: 100%; display: block; background: var(--tinta); }
.acceso h3 { font-size: 1.3rem; font-variation-settings: 'wdth' 84, 'wght' 720; margin-bottom: .6rem; }
.acceso p { color: var(--tinta-suave); font-size: .98rem; }
.acceso__dato {
  margin-top: auto; padding-top: 1.25rem;
  font-variation-settings: 'wdth' 78, 'wght' 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalto);
}
@media (max-width: 62rem) { .accesos { grid-template-columns: 1fr; } }

/* ---------- selector de altura, dentro del contacto ----------
   Una escala vertical sencilla sobre el fondo de la pagina. Nada de
   fotografia detras: una foto haria creer que las cotas se miden sobre
   ella. Aqui la escala solo se mide a si misma, y eso si es honesto. */
.altura {
  margin-top: 3rem;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem;
  background: var(--cobalto); color: #fff;
  border: var(--borde) solid var(--montante-claro);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.altura__caja { position: relative; display: flex; gap: .75rem; margin-top: 1rem; height: 15rem; }
.altura__lectura {
  align-self: flex-start;
  font-variation-settings: 'wdth' 74, 'wght' 800;
  font-size: clamp(2.25rem, 4vw, 3.25rem); color: var(--oro); line-height: .9;
  font-variant-numeric: tabular-nums;
}
.altura__lectura small { font-size: .34em; letter-spacing: .1em; margin-left: .15em; }
.altura__resultado { align-self: center; max-width: 52ch; }
.altura__resultado h3 { font-size: 1.45rem; font-variation-settings: 'wdth' 84, 'wght' 730; margin: .35rem 0 .5rem; }
.altura__resultado p { font-size: 1rem; color: rgba(255, 255, 255, .85); }
.altura__salvedad {
  margin-top: .9rem !important; padding-top: .9rem;
  border-top: var(--borde) solid var(--montante-claro);
  font-size: .9rem !important; color: rgba(255, 255, 255, .65) !important;
}

/* la regla: rotula los metros y marca los 20 en oro */
.regla { position: relative; flex: 0 0 3.25rem; align-self: stretch; }
.regla__marca {
  position: absolute; left: 0; width: 100%; transform: translateY(50%);
  font-variation-settings: 'wdth' 74, 'wght' 600;
  font-size: .8125rem; letter-spacing: .06em; color: rgba(255, 255, 255, .8);
  padding-left: .6rem; white-space: nowrap;
}
.regla__marca::before { content: ''; position: absolute; left: 0; top: 50%; width: .4rem; height: 1px; background: rgba(255, 255, 255, .55); }
.regla__marca--tope { color: var(--oro); font-variation-settings: 'wdth' 74, 'wght' 700; }
.regla__marca--tope::before { background: var(--oro); width: .7rem; height: 2px; }

/* la barra */
.mando__pista {
  position: relative;
  flex: 0 0 3.25rem; width: 3.25rem; align-self: stretch;
  background: rgba(10, 22, 38, .38);
  border: var(--borde) solid rgba(255, 255, 255, .38);
  cursor: grab; touch-action: none;
}
.mando__pista:active { cursor: grabbing; }
/* el relleno es una cota de altura, asi que el oro le corresponde */
.mando__relleno { position: absolute; left: 0; right: 0; bottom: 0; background: var(--oro); opacity: .72; }
.mando__tirador {
  position: absolute; left: -.5rem; right: -.5rem; height: 2.25rem;
  transform: translateY(50%);
  background: var(--oro); border: none;
  display: grid; place-items: center;
  cursor: grab;
}
.mando__tirador::before { content: ''; width: 1.25rem; height: 2px; background: var(--tinta); box-shadow: 0 -5px 0 var(--tinta), 0 5px 0 var(--tinta); }

/* los cuatro tramos, con el activo marcado: el mapa completo de un vistazo */
.tramos { list-style: none; padding: 0; margin: 0; align-self: center; min-width: 13rem; }
.tramos li {
  padding: .7rem .9rem;
  border-left: 2px solid transparent;
  color: rgba(255, 255, 255, .55);
}
.tramos li + li { border-top: var(--borde) solid var(--montante-claro); }
.tramos b {
  display: block; font-variation-settings: 'wdth' 78, 'wght' 700;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
}
.tramos span { font-size: .95rem; }
.tramos li.activo { color: #fff; border-left-color: var(--oro); background: rgba(255, 255, 255, .07); }

@media (max-width: 78rem) {
  .altura { grid-template-columns: auto minmax(0, 1fr); }
  .tramos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); min-width: 0; }
  .tramos li + li { border-top: none; border-left: 2px solid transparent; }
  .tramos li.activo { border-left-color: var(--oro); }
}
@media (max-width: 62rem) {
  .altura { grid-template-columns: 1fr; gap: 1.75rem; }
  .tramos { grid-template-columns: repeat(2, 1fr); }
  .altura__caja { height: 13rem; }
}

/* ---------- agua ---------- */
.agua { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-top: 3rem; border: var(--borde) solid var(--montante); }
.agua__texto { padding: clamp(1.75rem, 3vw, 3rem); }
.agua__texto h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-variation-settings: 'wdth' 80, 'wght' 760; margin-bottom: 1rem; }
.agua__texto p + p { margin-top: 1rem; }
.agua__lista { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.agua__lista li {
  padding: .8rem 0 .8rem 1.75rem; position: relative;
  border-top: var(--borde) solid var(--montante);
  font-variation-settings: 'wdth' 92, 'wght' 550;
}
.agua__lista li::before {
  content: ''; position: absolute; left: 0; top: 1.35rem;
  width: .6rem; height: .6rem; background: var(--cobalto);
}
.agua__figura { position: relative; background: var(--tinta); min-height: 22rem; }
.agua__figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 62rem) { .agua { grid-template-columns: 1fr; } .agua__figura { min-height: 16rem; order: -1; } }

/* ---------- trabajos ---------- */
/* mosaico de filas uniformes: todas las piezas de una banda ocupan las mismas
   filas, asi que nunca queda hueco. La banda alta y la baja dan el ritmo. */
.trabajos {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(6rem, 9.5vw, 10rem);
  gap: var(--borde); background: var(--montante); border: var(--borde) solid var(--montante);
}
.trabajo { position: relative; background: var(--tinta); overflow: hidden; }
.trabajo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.trabajo:hover img { transform: scale(1.035); }
.trabajo--ancho  { grid-column: span 4; grid-row: span 3; }
.trabajo--medio  { grid-column: span 2; grid-row: span 3; }
.trabajo--tercio { grid-column: span 2; grid-row: span 2; }
/* el antes y despues: composicion vertical con texto dentro, asi que no se
   recorta nunca. Cabe entera y la caja se adapta a ella. */
.trabajo--mitad  { grid-column: span 2; grid-row: span 4; }
.trabajo--completo { background: var(--papel); }
.trabajo--completo img { object-fit: contain; }
.trabajo--completo:hover img { transform: none; }
.trabajo__pie {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.1rem .9rem;
  background: linear-gradient(to top, rgba(10, 22, 38, .88), transparent);
  color: #fff;
}
.trabajo__pie b { display: block; font-variation-settings: 'wdth' 86, 'wght' 700; font-size: 1rem; }
.trabajo__pie span { font-size: .8rem; color: rgba(255, 255, 255, .78); }
@media (max-width: 62rem) {
  .trabajos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(5.5rem, 13vw, 8rem); }
  .trabajo--ancho { grid-column: span 2; grid-row: span 3; }
  .trabajo--medio { grid-column: span 1; grid-row: span 3; }
  .trabajo--tercio { grid-column: span 1; grid-row: span 2; }
  /* en movil cada antes y despues ocupa el ancho entero: es lo que necesita
     una composicion vertical con texto para poder leerse */
  .trabajo--mitad { grid-column: span 2; grid-row: span 5; }
}

/* ---------- resenas ---------- */
.resenas { margin-top: 3rem; display: grid; grid-template-columns: 20rem 1fr; gap: 3rem; align-items: start; }
.nota { border: var(--borde) solid var(--montante-claro); padding: 2rem; text-align: center; }
.nota__numero { font-size: 4.5rem; font-variation-settings: 'wdth' 76, 'wght' 800; line-height: 1; color: #fff; }
.nota__estrellas { display: flex; justify-content: center; gap: .2rem; margin: .75rem 0 .5rem; }
.nota__estrellas svg { width: 1.1rem; height: 1.1rem; fill: rgba(255,255,255,.92); }
.citas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--borde); background: var(--montante-claro); border: var(--borde) solid var(--montante-claro); }
.cita { background: var(--cobalto-hondo); padding: 1.75rem; }
.cita p { font-size: 1.02rem; }
@media (max-width: 62rem) { .resenas { grid-template-columns: 1fr; gap: 2rem; } .citas { grid-template-columns: 1fr; } }

/* ---------- contacto ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 3rem; border: var(--borde) solid var(--montante); }
.contacto__lado { padding: clamp(1.75rem, 3vw, 2.75rem); }
.contacto__lado + .contacto__lado { border-left: var(--borde) solid var(--montante); }
.campo { display: block; margin-bottom: 1.25rem; }
.campo__nombre { display: block; margin-bottom: .4rem; font-variation-settings: 'wdth' 84, 'wght' 620; font-size: .88rem; cursor: pointer; }
.campo input, .campo textarea, .campo select {
  width: 100%; padding: .75rem .9rem;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--blanco);
  border: var(--borde) solid var(--montante);
  border-radius: 0;
}
.campo textarea { min-height: 7rem; resize: vertical; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--tinta-suave); }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 2px solid var(--cobalto); outline-offset: -2px; border-color: var(--cobalto); }
.campo input::placeholder, .campo textarea::placeholder { color: #5B6879; }
.campo--error input, .campo--error textarea { border-color: #B3261E; }
.campo__aviso { display: none; margin-top: .35rem; font-size: .85rem; color: #B3261E; }
.campo--error .campo__aviso { display: block; }
.formulario__envio { width: 100%; justify-content: center; border: none; cursor: pointer; font-family: inherit; }
.formulario__nota { margin-top: .9rem; font-size: .85rem; color: var(--tinta-suave); }
.datos { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.datos li { padding: .9rem 0; border-top: var(--borde) solid var(--montante); }
.datos a { font-variation-settings: 'wdth' 88, 'wght' 620; }
@media (max-width: 62rem) {
  .contacto { grid-template-columns: 1fr; }
  .contacto__lado + .contacto__lado { border-left: none; border-top: var(--borde) solid var(--montante); }
}

/* ---------- pie ---------- */
.pie { background: var(--tinta); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 2rem; font-size: .92rem; }
.pie__fila { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.pie img { height: 1.7rem; width: auto; margin-bottom: 1rem; }
.pie h4 { margin: 0 0 .75rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); font-variation-settings: 'wdth' 78, 'wght' 650; }
.pie a { color: #fff; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .45rem; }
.pie__legal { margin-top: 3rem; padding-top: 1.5rem; border-top: var(--borde) solid var(--montante-claro); font-size: .82rem; color: rgba(255, 255, 255, .56); }

/* ---------- navegacion en movil: la pagina es larga ---------- */
.nav-movil { display: none; }
@media (max-width: 60rem) {
  .nav-movil {
    display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 4.25rem; z-index: 40;
    background: var(--blanco); border-bottom: var(--borde) solid var(--montante);
    scrollbar-width: none;
  }
  .nav-movil::-webkit-scrollbar { display: none; }
  .nav-movil a {
    flex: none; padding: .7rem 1rem; text-decoration: none; color: var(--tinta);
    font-variation-settings: 'wdth' 82, 'wght' 600; font-size: .9rem; white-space: nowrap;
    border-right: var(--borde) solid var(--montante);
  }
}

/* ---------- barra fija de movil ---------- */
.barra-movil { display: none; }
@media (max-width: 48rem) {
  .barra-movil {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    border-top: var(--borde) solid var(--montante);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--blanco);
  }
  .barra-movil .accion { justify-content: center; padding: 1rem; border-radius: 0; }
  .barra-movil .accion--llamar { border: none; border-right: var(--borde) solid var(--montante); }
  body { padding-bottom: 4rem; }
}

/* ---------- entrada, un solo momento ---------- */
/* Un unico momento de entrada, en el mecanismo. El resto de la pagina
   aparece ya visible: repetir el mismo fundido en cada seccion es ruido. */
@media (prefers-reduced-motion: no-preference) {
  .entra { opacity: 0; transform: translateY(14px); }
  .entra.vista { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
}


/* =========================================================================
   Páginas interiores (servicios, trabajos, nosotros, contacto)
   Mismo sistema: campo de cobalto, montantes de 1px, cero sombras.
   ========================================================================= */

/* --- cabecera de página interior: campo macizo, sin fotografía --- */
.cabeza {
  background: var(--cobalto); color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: var(--borde) solid var(--montante-claro);
}
.cabeza h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-variation-settings: 'wdth' 78, 'wght' 800;
  max-width: 18ch;
}
.cabeza__entrada {
  margin-top: 1.25rem; max-width: 58ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, .88);
}

/* --- miga de pan --- */
.miga { padding: .9rem 0; border-bottom: var(--borde) solid var(--montante); font-size: .875rem; }
.miga ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.miga li { display: flex; align-items: center; gap: .5rem; color: var(--tinta-suave); }
.miga li + li::before { content: '/'; color: var(--montante); }
.miga a { color: var(--tinta-suave); text-decoration: none; }
.miga a:hover { color: var(--cobalto); text-decoration: underline; }

/* --- bloque de texto + foto, alternando lado --- */
.bloque {
  display: grid; grid-template-columns: 1fr 1fr;
  border: var(--borde) solid var(--montante);
  margin-top: 2rem;
}
.bloque + .bloque { margin-top: -1px; }          /* montantes compartidos */
.bloque__texto { padding: clamp(1.75rem, 3.5vw, 3rem); }
.bloque__texto h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  font-variation-settings: 'wdth' 80, 'wght' 750;
  margin-bottom: 1rem;
}
.bloque__texto p + p { margin-top: 1rem; }
.bloque__texto p { color: var(--tinta-suave); }
.bloque__dato {
  display: inline-block; margin-top: 1.5rem;
  font-variation-settings: 'wdth' 78, 'wght' 700;
  /* sin versalitas: son frases de 30-40 caracteres y en mayúsculas cuestan de leer */
  font-size: .8125rem; letter-spacing: .02em;
  color: var(--cobalto);
  border-top: 2px solid var(--cobalto); padding-top: .6rem;
}
.bloque__figura { position: relative; background: var(--tinta); min-height: 20rem; }
.bloque__figura img, .bloque__figura svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bloque--invertido .bloque__texto { order: 2; }
@media (max-width: 62rem) {
  .bloque, .bloque--invertido { grid-template-columns: 1fr; }
  .bloque--invertido .bloque__texto { order: 0; }
  .bloque__figura { min-height: 14rem; order: -1; }
}

/* --- columna de texto corrido --- */
.prosa { max-width: 68ch; }
.prosa h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-variation-settings: 'wdth' 82, 'wght' 740;
  margin: 2.5rem 0 .85rem;
}
.prosa h2:first-child { margin-top: 0; }
.prosa p + p { margin-top: 1rem; }
.prosa p { color: var(--tinta-suave); }
.prosa strong { color: var(--tinta); font-variation-settings: 'wdth' 100, 'wght' 650; }
.prosa ul { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.prosa ul li {
  padding: .8rem 0 .8rem 1.75rem; position: relative;
  border-top: var(--borde) solid var(--montante);
  color: var(--tinta-suave);
}
.prosa ul li::before {
  content: ''; position: absolute; left: 0; top: 1.35rem;
  width: .6rem; height: .6rem; background: var(--cobalto);
}

/* --- ficha de trabajo --- */
.ficha { border: var(--borde) solid var(--montante); margin-top: 2rem; }
.ficha + .ficha { margin-top: -1px; }
.ficha__fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--borde); background: var(--montante); }
/* altura fija: asi una ficha con una sola foto no sale con una imagen gigante
   y otra con tres no sale con tiras. Todas las bandas miden lo mismo. */
.ficha__fotos img { width: 100%; height: clamp(13rem, 20vw, 19rem); object-fit: cover; background: var(--tinta); }
/* el antes y despues lleva texto dentro: se ve entero, nunca recortado */
.ficha__fotos--completo { background: var(--papel); }
.ficha__fotos--completo img {
  height: auto; max-height: 34rem; object-fit: contain;
  background: var(--papel); padding: 1rem;
}
.ficha__texto { padding: clamp(1.75rem, 3.5vw, 2.5rem); }
.ficha__texto h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-variation-settings: 'wdth' 80, 'wght' 750; }
.ficha__donde {
  display: block; margin: .4rem 0 1rem;
  font-variation-settings: 'wdth' 78, 'wght' 620;
  font-size: .8125rem; letter-spacing: .02em; color: var(--cobalto);
}
.ficha__texto p { color: var(--tinta-suave); }
.ficha__texto p + p { margin-top: 1rem; }

/* --- llamada final --- */
.cierre { background: var(--cobalto); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.cierre h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-variation-settings: 'wdth' 80, 'wght' 760; max-width: 22ch; }
.cierre p { margin-top: 1rem; max-width: 54ch; color: rgba(255, 255, 255, .85); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
@media (max-width: 48rem) { .cierre__acciones .accion { width: 100%; justify-content: center; } }

/* Anclas dentro de un bloque ------------------------------------------------
   La cabecera es pegajosa, asi que un ancla que apunta a un bloque (no a una
   seccion entera) aterriza con el titulo por detras de la cabecera. Se le da
   el mismo margen de parada que a .seccion. */
.bloque[id] { scroll-margin-top: 4.5rem; }
@media (max-width: 60rem) {
  .bloque[id] { scroll-margin-top: 7.5rem; }
}

/* Menu de movil en pantallas estrechas ---------------------------------------
   Las paginas interiores anaden "Inicio", y con cinco pestanas la tira se
   sale por la derecha en un telefono de 375 px: "Contacto" queda cortado y
   parece roto, aunque la tira se pueda arrastrar. En vez de encoger la letra,
   se estrecha por el eje de anchura, que es para lo que esta. */
@media (max-width: 26rem) {
  .nav-movil a { padding: 0.7rem 0.75rem; font-variation-settings: "wdth" 76, "wght" 600; }
}

/* --- preguntas frecuentes: una retícula de celdas ---------------------------
   Mismo muro cortina que el resto. Aquí los montantes se hacen con el hueco
   de la retícula teñido del color del montante, en vez de con bordes y
   márgenes negativos: con siete celdas y una de ellas a doble ancho, los
   márgenes negativos dejan costuras dobles en los cruces. El resultado a la
   vista es el mismo: líneas de 1px, sin radios ni sombras. */
.dudas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--borde);
  background: var(--montante);
  border: var(--borde) solid var(--montante);
  margin-top: 2rem;
}
.dudas__celda {
  background: var(--blanco);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.dudas__celda--ancha { grid-column: 1 / -1; }
.dudas__pregunta {
  font-size: 1.0625rem;
  font-variation-settings: 'wdth' 84, 'wght' 720;
  color: var(--tinta);
  margin: 0 0 .7rem;
}
.dudas__respuesta { color: var(--tinta-suave); margin: 0; }
@media (max-width: 48rem) {
  .dudas { grid-template-columns: 1fr; }
  .dudas__celda--ancha { grid-column: auto; }
}