/* =========================================================================
   SECCIONES · continúa la dirección fijada en estilo.css
   La web cruza la línea de flotación: arriba hueso, abajo tinta.
   ========================================================================= */

:root{--acento-txt: var(--cinta)}
.etiqueta{color:var(--acento-txt)}

.seccion{padding:var(--pad-y) var(--margen); background:var(--fondo); color:var(--texto)}

.seccion--claro{
  --fondo: var(--hueso); --texto: var(--tinta);
  --tenue: color-mix(in oklab, var(--tinta) 68%, transparent);
  --borde: color-mix(in oklab, var(--tinta) 18%, transparent);
  --acento-txt: #7A5A24;
}
.seccion--hondo{
  --fondo: var(--tinta-alta); --texto: var(--hueso);
  --tenue: color-mix(in oklab, var(--hueso) 64%, transparent);
  --borde: color-mix(in oklab, var(--hueso) 18%, transparent);
  --acento-txt: var(--cinta);
}

/* ---------- declaración ---------- */
.declaracion{padding-block:clamp(5rem,12vw,11rem)}
.declaracion__t{
  font-family:var(--display-f); font-weight:400;
  font-size:clamp(1.6rem, .9rem + 2.6vw, 3.1rem); line-height:1.24;
  letter-spacing:-.02em; max-width:26ch; text-wrap:balance; margin:0;
}

/* ---------- cabecera de bloque ---------- */
.bloque__cab{max-width:52rem; margin-bottom:clamp(2.8rem,6vw,5rem)}
.bloque__cab--centro{margin-inline:auto; text-align:center}
.bloque__t{
  font-family:var(--display-f); font-weight:400;
  font-size:clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem);
  line-height:1; letter-spacing:-.025em; margin:.6rem 0 0; text-wrap:balance;
}
.bloque__entrada{
  margin-top:1.4rem; max-width:46ch; color:var(--tenue);
  font-size:var(--step-1); line-height:1.5;
}
.bloque__cab--centro .bloque__entrada{margin-inline:auto}

/* ---------- rejilla de obras: dos proporciones y un desfase ---------- */
.obras{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  gap:clamp(2.5rem,5vw,5rem) clamp(1rem,2.5vw,2rem);
}
.obra{margin:0}
.obra img{width:100%; height:100%; object-fit:cover}
.obra--h{grid-column:span 7}
.obra--v{grid-column:span 5; margin-top:clamp(2.5rem,8vw,7rem)}
.obras .obra:nth-child(3){grid-column:4 / span 7}
.obra--h picture{display:block; aspect-ratio:3/2; overflow:hidden}
.obra--v picture{display:block; aspect-ratio:4/5; overflow:hidden}
.obra__pie{
  display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--borde); margin-top:.7rem; padding-top:.6rem;
  font:500 .6875rem/1.4 var(--cuerpo-f); letter-spacing:.14em;
  text-transform:uppercase; color:var(--tenue);
}
@media (max-width: 52rem){
  .obra--h, .obra--v, .obras .obra:nth-child(3){grid-column:1 / -1}
  .obra--v{margin-top:0}
}

/* ---------- lista de servicios ---------- */
.lista-servicios{
  list-style:none; margin:clamp(3.5rem,7vw,6rem) 0 0; padding:0;
  display:grid; gap:clamp(1.8rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit, minmax(min(15rem,100%),1fr));
}
.lista-servicios li{border-top:1px solid var(--borde); padding-top:1.1rem}
.lista-servicios h3{font:500 var(--step-0)/1.3 var(--cuerpo-f); margin:0 0 .5rem}
.lista-servicios p{color:var(--tenue); font-size:var(--step--1); line-height:1.55; max-width:32ch}

/* ---------- respiro a pantalla completa ---------- */
.respiro{
  position:relative; min-height:88svh; display:flex; align-items:flex-end;
  isolation:isolate; background:var(--tinta); padding:0 0 clamp(3rem,7vw,5.5rem);
}
.respiro__foto{position:absolute; inset:0; z-index:-2}
.respiro__foto img{width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.respiro__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, var(--tinta) 0%,
    color-mix(in oklab, var(--tinta) 64%, transparent) 34%,
    color-mix(in oklab, var(--tinta) 12%, transparent) 78%);
}
.respiro__frase{
  font-family:var(--display-f); font-weight:400;
  font-size:clamp(1.9rem, 1rem + 3.4vw, 4rem); line-height:1.08;
  letter-spacing:-.025em; max-width:20ch; margin:0; color:var(--hueso);
}
.respiro__pie{
  margin-top:1.1rem; color:color-mix(in oklab, var(--hueso) 62%, transparent);
  font:500 .6875rem/1.5 var(--cuerpo-f); letter-spacing:.24em; text-transform:uppercase;
}

/* ---------- el cruce: la línea vuelve a aparecer ---------- */
.cruce{background:var(--tinta); padding:clamp(3.5rem,8vw,7rem) var(--margen)}
.cruce .flot{display:block; margin-left:calc(50% - 50vw)}

/* ---------- obra viva ---------- */
.bajo{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
}
@media (max-width: 52rem){ .bajo{grid-template-columns:1fr} }
.bajo__foto{margin:0}
.bajo__foto picture{display:block; aspect-ratio:4/5; overflow:hidden}
.bajo__foto img{width:100%; height:100%; object-fit:cover}
.lista-plana{list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0}
.lista-plana li{
  border-top:1px solid var(--borde); padding:.95rem 0;
  font-size:var(--step-0); color:var(--tenue);
}

/* ---------- pasos ---------- */
.pasos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fit, minmax(min(14rem,100%),1fr));
}
.pasos li{border-top:1px solid var(--borde); padding-top:1.1rem}
.pasos__n{
  display:block; font:400 var(--step-0)/1 var(--display-f);
  color:var(--acento-txt); letter-spacing:.08em; margin-bottom:.9rem;
}
.pasos h3{font:500 var(--step-0)/1.3 var(--cuerpo-f); margin:0 0 .5rem}
.pasos p{color:var(--tenue); font-size:var(--step--1); line-height:1.55}

.ancho{margin:clamp(3.5rem,7vw,6rem) 0 0}
.ancho picture{display:block; aspect-ratio:16/9; overflow:hidden}
.ancho img{width:100%; height:100%; object-fit:cover}

/* ---------- formulario ---------- */
.form{
  display:grid; gap:1.4rem; margin:clamp(2.5rem,5vw,4rem) auto 0;
  grid-template-columns:repeat(auto-fit, minmax(min(16rem,100%),1fr));
  align-items:start; max-width:56rem;
}
.campo{display:grid; gap:.45rem}
.campo--ancho, .form > .boton, .form > .campo__ayuda{grid-column:1 / -1}
.form > .boton{justify-self:start}
.campo label{
  font:500 .6875rem/1 var(--cuerpo-f); letter-spacing:.2em;
  text-transform:uppercase; color:var(--tenue);
}
.campo input, .campo select, .campo textarea{
  font:400 16px/1.4 var(--cuerpo-f); color:var(--texto);
  min-height:48px; padding:.75rem .9rem;
  background:color-mix(in oklab, var(--hueso) 7%, transparent);
  border:1px solid var(--borde); border-radius:0;
  transition:border-color .25s;
}
.campo textarea{min-height:126px; resize:vertical}
.campo select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.campo select option{background:var(--tinta-alta); color:var(--hueso)}
.campo input::placeholder, .campo textarea::placeholder{
  color:color-mix(in oklab, var(--texto) 44%, transparent);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible{
  border-color:var(--cinta);
}
.campo [aria-invalid="true"]{border-color:#E4674C}
.campo__error{margin:0; font-size:var(--step--1); color:#F09077}
.campo__error:empty{display:none}
.campo__ayuda{margin:0; font-size:var(--step--1); color:var(--tenue)}

/* ---------- pie ---------- */
.pie{background:var(--tinta); color:var(--hueso); padding:0 var(--margen) clamp(2rem,4vw,3rem)}
.pie .flot{display:block; margin-left:calc(50% - 50vw); margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.pie .flot::after{content:none}
.pie__grid{
  display:grid; gap:clamp(2rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit, minmax(min(14rem,100%),1fr));
}
.pie__logo{
  font:400 var(--step-1)/1 var(--display-f); letter-spacing:.3em;
  text-transform:uppercase; margin:0 0 .8rem;
}
.pie__logo span{color:var(--cinta)}
.pie__nota{
  color:color-mix(in oklab, var(--hueso) 62%, transparent);
  margin:0; max-width:34ch; font-size:var(--step--1); line-height:1.55;
}
.pie__col{display:grid; gap:.1rem; align-content:start}
.pie__h{
  font:500 .6875rem/1 var(--cuerpo-f); letter-spacing:.24em;
  text-transform:uppercase; color:var(--cinta); margin:0 0 .6rem;
}
.pie__col a{
  color:inherit; text-decoration:none; min-height:44px;
  display:flex; align-items:center; font-size:var(--step--1);
}
@media (hover:hover) and (pointer:fine){ .pie__col a:hover{color:var(--cinta)} }
.pie__legal{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.4rem;
  border-top:1px solid color-mix(in oklab, var(--hueso) 18%, transparent);
  font-size:var(--step--1); color:color-mix(in oklab, var(--hueso) 62%, transparent);
}
.pie__legal p{margin:0}
.pie__legal a{color:inherit; min-height:44px; display:inline-flex; align-items:center}

/* ---------- objetivos táctiles (ui-guidelines: 44 px en móvil) ---------- */
.marca{display:inline-flex; align-items:center; min-height:44px}
.enlace-cta{display:inline-flex; align-items:center; min-height:44px}
.saltar{min-height:44px; display:inline-flex; align-items:center}
.boton{display:inline-flex; align-items:center; justify-content:center; min-height:48px}