/* ═══════════════════════════════════════════════════════════════════
   PLAZMAR · hoja de estilo única
   Mundo oscuro deliberado: la marca ES negro y bronce. No hay modo
   claro — una versión clara traiciona la identidad (brief B2).
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Tokens extraídos de las imágenes de marca reales, no elegidos a ojo */
  --tinta:      #0A0A0B;   /* fondo */
  --tinta-2:    #131110;   /* superficie elevada */
  --tinta-3:    #1C1815;   /* superficie sobre elevada */
  --linea:      #2A241D;   /* bordes */
  --oro:        #A17645;   /* acento principal — bronce cálido, NUNCA amarillo */
  --oro-luz:    #C9995F;   /* hover, énfasis */
  --oro-claro:  #E0B888;   /* dorado legible sobre fotografía */
  --oro-sombra: #5A3C1E;
  --hueso:      #F2EFEA;   /* texto */
  --gris:       #8C8479;   /* texto secundario — sesgado a cálido a propósito */
  --gris-claro: #BAB1A4;   /* secundario sobre fotografía, donde el gris no llega */
  --alerta:     #D4784E;

  --display:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --texto:'Newsreader','Iowan Old Style',Georgia,serif;

  --paso:clamp(5.5rem,11vw,11rem);   /* separación vertical entre secciones */
  --borde:clamp(1.25rem,5vw,4rem); /* margen lateral */
  --max:76rem;
  --barra:4.25rem;                 /* alto de la cabecera fija */
}

*{box-sizing:border-box}
/* display:grid/flex en reglas posteriores anularia [hidden]; esto lo impide */
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--barra) + 1rem)}
body{
  margin:0; background:var(--tinta); color:var(--hueso);
  font-family:var(--texto); font-weight:300;
  font-size:clamp(1rem,.55vw + .9rem,1.125rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto es imprescindible: los <img> llevan width/height como atributos
   para reservar sitio y evitar saltos de maquetación, y sin esto el navegador
   los trataría como altura fija. Las reglas que fijan height:100% van después
   y siguen ganando. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro-luz); outline-offset:3px; border-radius:2px}

.env{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--borde)}
.medida{max-width:34em}
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:.75rem; top:-4rem; z-index:100;
  background:var(--oro); color:var(--tinta); padding:.7rem 1.1rem;
  font-family:var(--display); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; transition:top .2s ease;
}
.saltar:focus{top:.75rem}

/* ── Tipografía ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display); text-wrap:balance; margin:0}
/* El peso baja segun sube el tamano: a 7rem el light es elegante, a 1.5rem
   se lava sobre negro. Antes todo iba a 300 y los intermedios desaparecian. */
h1{font-weight:300} h2{font-weight:400} h3,h4{font-weight:500}
h1{font-size:clamp(2.6rem,8.4vw,7.5rem); line-height:.96; letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.6vw,4rem); line-height:1.06; letter-spacing:-.025em}
h3{font-size:1.05rem; font-weight:500; letter-spacing:.02em}
h4{font-size:.95rem; font-weight:500; letter-spacing:.04em}
p{margin:0}
em{font-style:normal; color:var(--oro-luz)}
.rotulo{
  font-family:var(--display); font-weight:500; font-size:.68rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--oro);
}
.titulo-seccion{margin-top:.6rem}
/* Titular de escala editorial: la tipografía manda sobre la fotografía */
.titulo--gigante{
  font-size:clamp(2.5rem,7.4vw,6rem); line-height:.94; letter-spacing:-.035em;
  max-width:14ch;
}
.titulo--gigante em{color:var(--oro-luz)}
.parrafo-gris{color:var(--gris)}

/* ── Cabecera ───────────────────────────────────────────────────── */
.cabecera{
  position:fixed; inset-inline:0; top:0; z-index:40; height:var(--barra);
  display:flex; align-items:center;
  background:rgba(10,10,11,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease;
}
.cabecera[data-desplazado="si"]{background:rgba(10,10,11,.94); border-bottom-color:var(--linea)}
.cabecera__caja{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%}
.cabecera__marca img{width:clamp(7.5rem,16vw,9.5rem)}
.nav{display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem)}
.nav a{
  font-family:var(--display); font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--gris);
  padding-block:.4rem; border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.nav a:hover,.nav a:focus-visible{color:var(--hueso)}
.nav a[aria-current="page"]{color:var(--oro); border-bottom-color:var(--oro)}
.nav__cta{
  color:var(--oro-luz) !important; border:1px solid var(--oro); padding:.55rem 1.15rem !important;
  transition:background .3s ease, color .3s ease;
}
.nav__cta:hover,.nav__cta:focus-visible{background:var(--oro); color:var(--tinta) !important}

.hamburguesa{
  display:none; width:2.75rem; height:2.75rem; padding:0; background:none;
  border:1px solid var(--linea); color:var(--hueso); cursor:pointer;
}
.hamburguesa span{display:block; width:1.15rem; height:1px; margin:.3rem auto; background:currentColor; transition:transform .3s ease, opacity .3s ease}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(.41rem) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-.41rem) rotate(-45deg)}

@media (max-width:60rem){
  .hamburguesa{display:block}
  .nav{
    position:fixed; inset:var(--barra) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--tinta-2); border-bottom:1px solid var(--linea);
    padding:.5rem var(--borde) 1.5rem; transform:translateY(-125%);
    transition:transform .38s cubic-bezier(.3,.8,.3,1);
    max-height:calc(100svh - var(--barra)); overflow-y:auto;
  }
  .nav[data-abierto="si"]{transform:none}
  .nav a{padding-block:1rem; border-bottom:1px solid var(--linea); font-size:.82rem}
  .nav__cta{margin-top:1.25rem; text-align:center; padding:1rem !important; border-bottom:1px solid var(--oro)}
}

/* ── Portada de inicio ──────────────────────────────────────────── */
.portada{position:relative; min-height:min(92svh,54rem); display:flex; align-items:flex-end; overflow:hidden}
.portada__foto{position:absolute; inset:0}
/* .portada__foto es de una version anterior del marcado; la portada usa
   .portada__capa. Se conserva por si alguna plantilla vieja lo referencia. */
.portada__foto img{width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.08)}
.portada__velo{
  position:absolute; inset:0;
  /* Antes: 88% de negro plano encima. La fotografia no hacia ningun trabajo
     y la portada se leia como un rectangulo oscuro con texto. Ahora el velo es
     LATERAL: denso donde va el titular, casi limpio donde esta la imagen. */
  /* El titular vive abajo a la izquierda, asi que el velo es DIAGONAL: denso
     en esa esquina y practicamente limpio arriba a la derecha, que es donde
     esta el barrio. Antes era un 88% plano y la fotografia no hacia ningun
     trabajo; despues probe lateral + vertical apilados y volvia a taparlo
     todo. Una sola diagonal, y dos velos minimos para que se lean el menu y
     el pie. */
  background:
    linear-gradient(112deg,rgba(10,10,11,.95) 0%,rgba(10,10,11,.72) 24%,
                    rgba(10,10,11,.22) 56%,rgba(10,10,11,0) 84%),
    linear-gradient(180deg,rgba(10,10,11,.40) 0%,rgba(10,10,11,0) 16%),
    linear-gradient(0deg,rgba(10,10,11,.52) 0%,rgba(10,10,11,0) 22%),
    radial-gradient(120% 80% at 78% 18%,rgba(161,118,69,.16),transparent 62%);
}
.portada__contenido{position:relative; width:100%; padding-block:clamp(3rem,7vw,5.5rem)}
.portada h1{max-width:12ch}
.portada__claim{
  display:block; margin-bottom:clamp(1.25rem,3vw,2rem);
  font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--oro-claro);
  text-shadow:0 1px 14px rgba(10,10,11,1), 0 0 4px rgba(10,10,11,.95);
}
.portada h1{text-shadow:0 2px 24px rgba(10,10,11,.6)}
.portada__pie{margin-top:1.6rem; display:flex; gap:clamp(1rem,4vw,2.5rem); flex-wrap:wrap; align-items:center}
.portada__pie p{color:var(--gris-claro); max-width:30em; text-shadow:0 1px 10px rgba(10,10,11,.9)}

/* Portada reducida de páginas interiores */
.portadilla{position:relative; padding-block:calc(var(--barra) + clamp(3.5rem,8vw,6rem)) clamp(3rem,6vw,4.5rem); overflow:hidden}
.portadilla__foto{position:absolute; inset:0}
.portadilla__foto img{width:100%; height:100%; object-fit:cover; filter:saturate(1.06) brightness(.98) contrast(1.04)}
.portadilla__velo{position:absolute; inset:0; background:linear-gradient(100deg,rgba(10,10,11,.88),rgba(10,10,11,.40) 52%,rgba(10,10,11,.06))}
.portadilla__contenido{position:relative}
.portadilla h1{font-size:clamp(2.2rem,6vw,5rem); max-width:15ch; margin-top:1rem}
.portadilla p{color:var(--gris); margin-top:1.2rem; max-width:38em}
.migas{font-family:var(--display); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris)}
.migas a{text-decoration:none; color:var(--gris)}
.migas a:hover{color:var(--oro)}
.migas span{margin-inline:.5rem; color:var(--linea)}

/* ── Rutas ──────────────────────────────────────────────────────── */
.rutas{padding-block:var(--paso)}
.rutas__cabecera{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:baseline; margin-bottom:clamp(2rem,4vw,3rem)}
.rejilla{display:grid; gap:clamp(.6rem,1.2vw,1rem)}
.rejilla--dos{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.rejilla--tres{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); margin-top:clamp(.6rem,1.2vw,1rem)}
.ruta{position:relative; display:block; overflow:hidden; text-decoration:none; border:1px solid var(--linea); background:var(--tinta-2)}
.ruta img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Sin grayscale y con luz: .ruta__texto ya lleva su propio degradado
     (de .10 a .88) justo donde va el texto, que es lo que hace falta. */
  filter:brightness(.92) saturate(1.04);
  transition:filter .6s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.ruta:hover img,.ruta:focus-visible img{filter:brightness(.98) saturate(1.06); transform:scale(1.045)}
.ruta__texto{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  gap:.5rem; height:100%; padding:clamp(1.25rem,2.4vw,1.9rem);
  background:linear-gradient(180deg,
    rgba(10,10,11,.10) 0%, rgba(10,10,11,.42) 42%, rgba(10,10,11,.88) 100%);
}
.ruta--grande .ruta__texto{min-height:clamp(19rem,32vw,25rem)}
.ruta--chica .ruta__texto{min-height:clamp(12rem,20vw,15rem)}
.ruta__nombre{font-family:var(--display); font-weight:400; letter-spacing:.16em; text-transform:uppercase; font-size:clamp(.95rem,1.5vw,1.2rem)}
.ruta--grande .ruta__nombre{font-size:clamp(1.15rem,2vw,1.55rem); letter-spacing:.2em}
.ruta p{font-size:.94rem; color:var(--gris-claro); max-width:26em; text-shadow:0 1px 8px rgba(10,10,11,.85)}
.ruta__nombre{text-shadow:0 1px 10px rgba(10,10,11,.8)}
.ruta__flecha{
  font-family:var(--display); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro); opacity:0; transform:translateX(-.4rem); transition:opacity .4s ease, transform .4s ease;
}
.ruta:hover .ruta__flecha,.ruta:focus-visible .ruta__flecha{opacity:1; transform:none}
@media (hover:none){.ruta__flecha{opacity:1; transform:none}}

/* ── Proceso numerado ───────────────────────────────────────────── */
.proceso{padding-block:var(--paso); border-top:1px solid var(--linea); background:var(--tinta-2)}
.pasos{display:grid; gap:clamp(1.75rem,3vw,2.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); margin-top:clamp(2rem,4vw,3rem)}
.paso{display:flex; flex-direction:column; gap:.7rem; padding-top:1.1rem; border-top:1px solid var(--linea)}
.paso__n{font-family:var(--display); font-weight:500; font-size:.72rem; letter-spacing:.12em; color:var(--oro); font-variant-numeric:tabular-nums}
.paso p{color:var(--gris); font-size:.97rem}

/* ── Antes y después ────────────────────────────────────────────── */
.obra{padding-block:var(--paso); border-top:1px solid var(--linea)}
.pares{display:grid; gap:clamp(1.5rem,3vw,2.25rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); margin-top:clamp(2rem,4vw,3rem)}
.par figure{margin:0}
.par__fotos{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--linea); border:1px solid var(--linea)}
.par__fotos div{position:relative; aspect-ratio:3/4; overflow:hidden}
.par__fotos img{width:100%; height:100%; object-fit:cover}
/* El "antes" queda algo mas apagado a proposito — es lo que cuenta la
   historia — pero .55 de saturacion era lavarlo, no matizarlo. */
.par__fotos div:first-child img{filter:saturate(.78) brightness(.94)}
.par__et{
  position:absolute; left:0; bottom:0; padding:.3rem .55rem;
  font-family:var(--display); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(10,10,11,.82); color:var(--gris);
}
.par__fotos div:last-child .par__et{color:var(--oro)}
.par figcaption{margin-top:.85rem; color:var(--gris); font-size:.94rem}

/* ── Confianza / listas ─────────────────────────────────────────── */
.confianza{padding-block:var(--paso); border-top:1px solid var(--linea); background:var(--tinta-2)}
.confianza__caja{display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); align-items:start}
.confianza blockquote{
  margin:0; font-size:clamp(1.35rem,2.6vw,2rem); font-family:var(--display); font-weight:300;
  line-height:1.28; letter-spacing:-.01em; text-wrap:balance;
}
.confianza blockquote span{color:var(--oro-luz)}
.lista{list-style:none; margin:0; padding:0; display:grid; gap:1.15rem}
.lista li{display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; color:var(--gris); font-size:.97rem}
.lista b{color:var(--hueso); font-weight:400; font-family:var(--display); letter-spacing:.02em}
.marca-lista{width:.4rem; height:.4rem; margin-top:.6rem; background:var(--oro); transform:rotate(45deg)}

/* ── Bloques de contenido interior ──────────────────────────────── */
.bloque{padding-block:var(--paso); border-top:1px solid var(--linea)}
.bloque--elevado{background:var(--tinta-2)}
.dos-columnas{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr)); align-items:start}
.dos-columnas p + p{margin-top:1.1rem}
.figura{margin:0; border:1px solid var(--linea)}
.figura img{width:100%; aspect-ratio:16/9; object-fit:cover; filter:saturate(.97)}
.figura figcaption{padding:.8rem 1rem; color:var(--gris); font-size:.86rem; background:var(--tinta-2)}

.tarjetas{display:grid; gap:clamp(1rem,2vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); margin-top:clamp(2rem,4vw,3rem)}
.tarjeta{padding:clamp(1.4rem,2.6vw,2rem); border:1px solid var(--linea); background:var(--tinta-2); display:flex; flex-direction:column; gap:.8rem}
.bloque--elevado .tarjeta{background:var(--tinta-3)}
.tarjeta p{color:var(--gris); font-size:.95rem}
.tarjeta__n{font-family:var(--display); font-weight:500; font-size:.72rem; letter-spacing:.12em; color:var(--oro)}

/* Acordeón de preguntas frecuentes */
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding-block:1.25rem; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:1rem; letter-spacing:.01em;
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary::after{content:'+'; color:var(--oro); font-size:1.3rem; line-height:1; transition:transform .3s ease}
.pregunta[open] summary::after{transform:rotate(45deg)}
.pregunta__cuerpo{padding-bottom:1.4rem; color:var(--gris); font-size:.97rem; max-width:52em}

/* ── Cierre y botones ───────────────────────────────────────────── */
.cierre{padding-block:var(--paso); border-top:1px solid var(--linea); text-align:center}
.cierre h2{margin-inline:auto}
.cierre p{color:var(--gris); margin:1.1rem auto 2.25rem; max-width:36em}
.botones{display:flex; gap:1rem; flex-wrap:wrap; justify-content:center}
.boton{
  display:inline-flex; align-items:center; gap:.7rem; padding:1rem 2.1rem;
  border:1px solid var(--oro); color:var(--oro-luz); text-decoration:none; background:none; cursor:pointer;
  font-family:var(--display); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease;
}
.boton:hover,.boton:focus-visible{background:var(--oro); color:var(--tinta)}
.boton--tenue{border-color:var(--linea); color:var(--gris)}
.boton--tenue:hover,.boton--tenue:focus-visible{background:var(--tinta-3); color:var(--hueso); border-color:var(--gris)}
.boton[disabled],.boton[aria-disabled="true"]{border-color:var(--linea); color:var(--gris); cursor:not-allowed}
.boton[disabled]:hover,.boton[aria-disabled="true"]:hover{background:transparent; color:var(--gris)}
.nota{margin-top:1.25rem; font-family:var(--display); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris)}

/* ── Formulario ─────────────────────────────────────────────────── */
.formulario{margin-top:clamp(2rem,4vw,3rem)}
.campos{display:grid; gap:1.5rem 1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.campo{display:flex; flex-direction:column; gap:.5rem}
.campo--ancho{grid-column:1/-1}
.campo label,.grupo legend{
  font-family:var(--display); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris);
}
.campo label .req{color:var(--oro)}
.campo input,.campo select,.campo textarea{
  width:100%; padding:.85rem .95rem; background:var(--tinta-2); color:var(--hueso);
  border:1px solid var(--linea); border-radius:0; font-family:var(--texto);
  font-size:1rem; font-weight:300; transition:border-color .25s ease, background .25s ease;
}
.campo textarea{min-height:8rem; resize:vertical}
.campo select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),linear-gradient(135deg,var(--oro) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 1.25rem,calc(100% - .8rem) 1.25rem;
  background-size:.35rem .35rem,.35rem .35rem; background-repeat:no-repeat; padding-right:2.5rem;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro); background:var(--tinta-3); outline:none}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:2px solid var(--oro-luz); outline-offset:2px}
.campo input::placeholder,.campo textarea::placeholder{color:#5E574E}
.campo__ayuda{font-size:.8rem; color:var(--gris)}
.campo__error{font-family:var(--display); font-size:.72rem; letter-spacing:.08em; color:var(--alerta); min-height:1rem}
.campo[data-invalido="si"] input,.campo[data-invalido="si"] select,.campo[data-invalido="si"] textarea{border-color:var(--alerta)}

.grupo{border:1px solid var(--linea); padding:clamp(1.25rem,2.5vw,1.9rem); margin:0 0 1.5rem; background:var(--tinta-2)}
.grupo legend{padding-inline:.6rem; color:var(--oro)}
.grupo[hidden]{display:none}

.consentimiento{display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start; margin-top:1.75rem}
.consentimiento input{width:1.1rem; height:1.1rem; margin-top:.28rem; accent-color:var(--oro); flex:none}
.consentimiento label{font-size:.88rem; color:var(--gris); font-family:var(--texto); letter-spacing:0; text-transform:none}
.consentimiento a{color:var(--oro-luz)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aviso-envio{margin-top:1.5rem; padding:1rem 1.15rem; border:1px solid var(--linea); background:var(--tinta-2); font-size:.94rem; color:var(--gris)}
.aviso-envio[data-tipo="error"]{border-color:var(--alerta); color:var(--alerta)}
.aviso-envio[data-tipo="ok"]{border-color:var(--oro); color:var(--hueso)}
.aviso-envio[hidden]{display:none}

/* ── WhatsApp flotante ──────────────────────────────────────────── */
.flotante{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:35;
  display:inline-flex; align-items:center; gap:.65rem; padding:.85rem 1.25rem;
  background:var(--oro); color:var(--tinta); text-decoration:none;
  font-family:var(--display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 .6rem 2rem rgba(0,0,0,.55); transition:background .3s ease, transform .3s ease;
}
.flotante:hover,.flotante:focus-visible{background:var(--oro-luz); transform:translateY(-2px)}
.flotante svg{width:1.15rem; height:1.15rem; flex:none}
.flotante__texto{display:inline}
@media (max-width:34rem){
  .flotante{padding:.95rem; border-radius:50%}
  .flotante__texto{display:none}
}

/* ── Aviso de cookies ───────────────────────────────────────────── */
.cookies{
  position:fixed; inset-inline:0; bottom:0; z-index:45;
  background:var(--tinta-3); border-top:1px solid var(--linea);
  padding:clamp(1.25rem,3vw,1.75rem) 0; transform:translateY(110%);
  transition:transform .45s cubic-bezier(.3,.8,.3,1);
}
.cookies[data-visible="si"]{transform:none}
.cookies__caja{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; justify-content:space-between}
.cookies p{color:var(--gris); font-size:.9rem; max-width:44em}
.cookies a{color:var(--oro-luz)}
.cookies__botones{display:flex; gap:.75rem; flex-wrap:wrap}
.cookies .boton{padding:.75rem 1.4rem; font-size:.7rem}

/* ── Pie ────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea); background:var(--tinta-2); padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.pie__rejilla{display:grid; gap:clamp(2rem,4vw,3rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.pie__marca img{width:9.5rem; margin-bottom:1.1rem}
.pie__marca p{color:var(--gris); font-size:.88rem; max-width:24em}
.pie h4{color:var(--oro); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.1rem}
.pie ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.pie li a{text-decoration:none; color:var(--gris); font-size:.9rem; transition:color .25s ease}
.pie li a:hover,.pie li a:focus-visible{color:var(--hueso)}
.pie__legal{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.75rem; border-top:1px solid var(--linea);
  display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:space-between; align-items:center;
  color:var(--gris); font-family:var(--display); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
}

/* ── Páginas legales ────────────────────────────────────────────── */
.legal{padding-block:clamp(2.5rem,5vw,4rem) var(--paso)}
.legal__cuerpo{max-width:46em}
.legal__cuerpo h2{font-size:clamp(1.3rem,2.2vw,1.75rem); margin-top:clamp(2.5rem,5vw,3.5rem)}
.legal__cuerpo h3{margin-top:2rem; color:var(--oro)}
.legal__cuerpo p,.legal__cuerpo li{color:var(--gris); font-size:.97rem}
.legal__cuerpo p{margin-top:1rem}
.legal__cuerpo ul{margin-top:1rem; padding-left:1.2rem; display:grid; gap:.6rem}
.legal__cuerpo table{width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.9rem}
.legal__cuerpo th,.legal__cuerpo td{text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--gris)}
.legal__cuerpo th{font-family:var(--display); font-weight:500; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--oro)}
.tabla{width:100%; overflow-x:auto}
.dato-pendiente{color:var(--alerta); border-bottom:1px dashed var(--alerta); font-style:normal}

/* ── Barra de configuración incompleta (solo interna) ───────────── */
.pendiente-barra{
  position:fixed; inset-inline:0; top:0; z-index:60;
  background:var(--alerta); color:#160B05; padding:.5rem 1rem; text-align:center;
  font-family:var(--display); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
body[data-borrador="si"]{padding-top:2rem}
body[data-borrador="si"] .cabecera{top:2rem}

/* ── Aparición al hacer scroll ──────────────────────────────────── */
.aparece{opacity:0; transform:translateY(1.5rem); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.aparece[data-visible="si"]{opacity:1; transform:none}

/* ═══════════════════════════════════════════════════════════════════
   CAPA CINEMATOGRÁFICA
   Todo lo que sigue es presentación. Si el navegador la ignora o el
   visitante pide menos animación, la web se lee igual de bien.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Telón de entrada ───────────────────────────────────────────── */
.telon{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:var(--tinta); transition:opacity .85s ease, visibility .85s;
  /* Red de seguridad: si el JavaScript fallara, el telón se retira solo.
     Nunca puede quedarse tapando la web. */
  animation:telonSeguro .9s ease 2.4s forwards;
}
@keyframes telonSeguro{to{opacity:0; visibility:hidden; pointer-events:none}}
.telon[data-fuera="si"]{opacity:0; visibility:hidden; pointer-events:none; animation:none}
.telon img{width:min(15rem,42vw); opacity:0; animation:telonMarca 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.telon__linea{
  position:absolute; bottom:22%; left:50%; translate:-50% 0;
  width:min(15rem,42vw); height:1px; background:var(--linea); overflow:hidden;
}
.telon__linea::after{
  content:''; position:absolute; inset:0; background:var(--oro);
  transform-origin:left; animation:telonCarga 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes telonMarca{
  0%{opacity:0; transform:translateY(.8rem); filter:blur(6px)}
  55%{opacity:1; transform:none; filter:blur(0)}
  100%{opacity:1; transform:none}
}
@keyframes telonCarga{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* ── Portada en movimiento ──────────────────────────────────────── */
.portada__escena{position:absolute; inset:0; overflow:hidden; will-change:transform}
.portada__capa{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.7s cubic-bezier(.4,0,.2,1);
}
.portada__capa[data-visible="si"]{opacity:1}
/* La primera foto es el suelo de la portada: siempre visible, pase lo que
   pase con las demás. Así la portada nunca puede quedarse en negro. */
.portada__capa:first-child{opacity:1}
.portada__capa img{
  width:100%; height:100%; object-fit:cover;
  /* Antes saturate(.74): la foto llegaba lavada y encima el velo la tapaba al
     88%. Con el velo ya lateral, la imagen puede permitirse color. */
  filter:saturate(1.06) contrast(1.05);
  transform:scale(1.04);
}
/* El zoom lento es lo que hace que una foto se lea como plano de vídeo */
.portada__capa:first-child img{animation:planoBase 26s ease-in-out infinite alternate}
.portada__capa[data-visible="si"]:not(:first-child) img{animation:planoLento 15s linear both}
@keyframes planoLento{
  from{transform:scale(1.03) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.2%,-1%,0)}
}
@keyframes planoBase{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(1%,-1.2%,0)}
}
.portada__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease; filter:saturate(.78) contrast(1.04);
}
.portada__escena[data-video="si"] .portada__video{opacity:1}
.portada__escena[data-video="si"] .portada__capa{opacity:0}

/* Lienzo del polvo de oro. Va sobre la foto, en modo pantalla, para
   que sume luz en vez de ensuciar. */
canvas[data-fondo]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; mix-blend-mode:screen; pointer-events:none;
  transition:opacity 2.2s ease;
}
canvas[data-fondo][data-activo="si"]{opacity:.92}

.portada__contenido{will-change:transform,opacity}

/* Indicador de que hay más abajo */
.portada__pista{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-family:var(--display); font-size:.6rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gris); pointer-events:none;
}
.portada__pista span{display:block; width:1px; height:2.6rem; background:linear-gradient(var(--oro),transparent); overflow:hidden}
.portada__pista span::after{
  content:''; display:block; width:1px; height:1rem; background:var(--oro-claro);
  animation:pistaBaja 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pistaBaja{0%{transform:translateY(-1rem)} 60%,100%{transform:translateY(2.6rem)}}

/* ── Titular por palabras ───────────────────────────────────────── */
.palabra{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em}
.palabra__int{
  display:inline-block; transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,.84,.28,1);
}
.palabra__int.acento{color:var(--oro-luz)}
[data-titular][data-listo="si"] .palabra__int{transform:none}
/* Sin JavaScript el titular se ve tal cual, sin quedarse escondido */
[data-titular]:not([data-listo]) .palabra__int{transform:none}

/* ── Aparición escalonada ───────────────────────────────────────── */
.surge{
  opacity:0; transform:translateY(1.6rem);
  transition:opacity .85s ease, transform .85s cubic-bezier(.16,.84,.28,1);
}
.surge[data-visible="si"]{opacity:1; transform:none}

/* ── Foto a sangre ──────────────────────────────────────────────── */
.sangre{position:relative; overflow:hidden; height:clamp(22rem,62vh,38rem); border-block:1px solid var(--linea)}
.sangre img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); filter:saturate(1.04) brightness(.96); will-change:transform;
}
.sangre__velo{
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.55) 45%,rgba(10,10,11,.2) 100%);
}
.sangre__texto{position:relative; height:100%; display:flex; flex-direction:column; justify-content:center}
.sangre blockquote{
  margin:0; max-width:22ch; font-family:var(--display); font-weight:300;
  font-size:clamp(1.6rem,3.6vw,2.9rem); line-height:1.18; letter-spacing:-.015em;
  text-shadow:0 2px 22px rgba(10,10,11,.8);
}
.sangre blockquote em{color:var(--oro-claro)}
.sangre cite{
  display:block; margin-top:1.4rem; font-style:normal; color:var(--gris-claro);
  font-family:var(--display); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
}

/* ── Ficha técnica: la foto de obra anotada como un plano ───────── */
.ficha{
  margin:0; --calle:clamp(0rem,13vw,11.5rem);
  padding-inline:var(--calle);   /* aire lateral para que quepan las etiquetas */
}
.ficha__marco{
  position:relative; aspect-ratio:var(--proporcion,4/5);
  border:1px solid var(--linea); background:var(--tinta-2);
}
.ficha__marco picture,.ficha__marco img{position:absolute; inset:0; width:100%; height:100%}
.ficha__marco img{object-fit:cover}

/* Cantoneras: cuatro escuadras finas, como en una hoja de despiece */
.ficha__esquinas{position:absolute; inset:-1px; pointer-events:none}
.ficha__esquinas::before,.ficha__esquinas::after{
  content:''; position:absolute; width:1.4rem; height:1.4rem; border:1px solid var(--oro);
}
.ficha__esquinas::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.ficha__esquinas::after{bottom:-1px; right:-1px; border-left:0; border-top:0}
.ficha__indice{
  position:absolute; top:.85rem; right:1rem;
  font-family:var(--display); font-size:.62rem; letter-spacing:.24em;
  color:var(--oro); font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(10,10,11,.9);
}

.ficha__nota{
  position:absolute; top:var(--y); display:flex; align-items:center;
  --largo:clamp(1.6rem,7vw,5.5rem);
  opacity:0; transition:opacity .7s ease .25s;
}
.ficha:hover .ficha__nota,.ficha__marco:focus-within .ficha__nota{transition-delay:0s}
.ficha[data-visible="si"] .ficha__nota,.ficha__nota{opacity:1}
.ficha__nota[data-lado="der"]{left:var(--x); flex-direction:row}
.ficha__nota[data-lado="izq"]{right:calc(100% - var(--x)); flex-direction:row-reverse}
.ficha__punto{
  width:.42rem; height:.42rem; flex:none; background:var(--oro-claro);
  transform:rotate(45deg); box-shadow:0 0 0 3px rgba(10,10,11,.55);
}
.ficha__linea{width:var(--largo); height:1px; flex:none; background:var(--oro); opacity:.75}
.ficha__eti{
  font-family:var(--display); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--hueso); white-space:nowrap; padding:.15rem 0;
  text-shadow:0 1px 10px rgba(10,10,11,.95);
}
.ficha__nota[data-lado="der"] .ficha__eti{margin-left:.55rem}
.ficha__nota[data-lado="izq"] .ficha__eti{margin-right:.55rem; text-align:right}

.ficha__pie{margin-top:1.2rem; color:var(--gris); font-size:.92rem; max-width:46em}
.ficha__pie b{color:var(--hueso); font-family:var(--display); font-weight:500; letter-spacing:.02em}

/* Sin calle lateral no hay sitio para líneas: las etiquetas pasan a ser
   una lista debajo de la foto, que se lee mejor que un amontonamiento. */
@media (max-width:64rem){
  .ficha__marco{display:flex; flex-wrap:wrap}
  .ficha__nota{
    position:static; opacity:1; order:2; flex-direction:row !important;
    margin:0 .4rem .4rem 0; align-self:flex-end;
    background:rgba(10,10,11,.72); backdrop-filter:blur(6px);
    border:1px solid var(--linea); padding:.35rem .6rem;
  }
  .ficha__linea{display:none}
  .ficha__nota .ficha__eti{margin:0 0 0 .5rem; font-size:.58rem; letter-spacing:.16em}
  .ficha__marco{align-content:flex-end; padding:.6rem}
}

/* ── Línea de avance del proceso ────────────────────────────────── */
.pasos[data-avance]{position:relative; --avance:0%}
.pasos[data-avance]::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:var(--oro); transform:scaleX(calc(var(--avance) / 100%)); transform-origin:left;
  transition:transform .18s linear;
}
.pasos[data-avance] .paso{border-top-color:transparent}

/* ── Brillo que sigue al puntero ────────────────────────────────── */
.ruta,.tarjeta{--px:50%; --py:50%; position:relative}
.ruta::after,.tarjeta::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:radial-gradient(20rem 20rem at var(--px) var(--py),rgba(201,153,95,.20),transparent 70%);
  transition:opacity .45s ease;
}
.ruta:hover::after,.ruta:focus-visible::after,.tarjeta:hover::after{opacity:1}
.tarjeta{transition:border-color .4s ease, transform .5s cubic-bezier(.2,.7,.3,1)}
.tarjeta:hover{border-color:var(--oro-sombra); transform:translateY(-3px)}

/* Barrido de luz al pasar por una ruta */
.ruta__texto::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(105deg,transparent 35%,rgba(224,184,136,.14) 50%,transparent 65%);
  transform:translateX(-60%);
  transition:opacity .3s ease;
}
.ruta:hover .ruta__texto::before,.ruta:focus-visible .ruta__texto::before{
  opacity:1; animation:barrido 1.1s cubic-bezier(.3,.7,.3,1) forwards;
}
@keyframes barrido{from{transform:translateX(-60%)} to{transform:translateX(60%)}}

/* ── Transición entre páginas ───────────────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:salirPag .35s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:entrarPag .5s cubic-bezier(0,0,.2,1) both}
@keyframes salirPag{to{opacity:0; transform:translateY(-1.2rem)}}
@keyframes entrarPag{from{opacity:0; transform:translateY(1.2rem)}}

/* ── Renuncia a todo lo anterior si se pide menos movimiento ────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .aparece,.surge{opacity:1; transform:none}
  .palabra__int{transform:none}
  .portada__capa{opacity:1}
  .portada__pista{display:none}
  canvas[data-fondo]{display:none}
  .telon{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ── SECUENCIAS DIRIGIDAS POR SCROLL ──────────────────────────────────────
   Sirve para cualquier pagina, no solo la portada: la marca va en la pista
   ([data-activa]), no en <html>. Asi puede haber una secuencia en la portada
   y otra en una portadilla sin que se pisen.

   secuencias.js pone data-activa SOLO cuando decide encenderla (escritorio,
   sin ahorro de datos, sin movimiento reducido) y solo despues de cargar el
   primer fotograma. Sin ese atributo la pista no tiene altura y la pagina se
   comporta exactamente como antes: esto no puede romper la version de movil. */
.portada__ventanas,
.portadilla__secuencia{position:absolute; inset:0; width:100%; height:100%; display:none}
[data-secuencia-pista][data-activa="si"] .portada__ventanas,
[data-secuencia-pista][data-activa="si"] .portadilla__secuencia{display:block}
[data-secuencia-pista][data-activa="si"] .portada__escena .portada__capa,
[data-secuencia-pista][data-activa="si"] .portadilla__foto{display:none}

/* La pista es el recorrido de scroll; la cabecera se queda pegada arriba
   mientras se recorre. 420svh dan un avance comodo: menos y la escena se
   resuelve de golpe, mas y el visitante se cansa antes de llegar al menu. */
[data-secuencia-pista][data-activa="si"]{height:420svh}
[data-secuencia-pista][data-activa="si"] .portada,
[data-secuencia-pista][data-activa="si"] .portadilla{
  position:sticky; top:0; height:100svh; min-height:0;
  display:flex; align-items:flex-start; overflow:hidden;
}
/* El texto sube ARRIBA. Anclado abajo se quedaba pegado al borde inferior
   durante todo el recorrido y la ultima linea se cortaba. */
[data-secuencia-pista][data-activa="si"] .portada__contenido,
[data-secuencia-pista][data-activa="si"] .portadilla__contenido{
  padding-block:calc(var(--barra) + clamp(1.5rem,5svh,3.5rem)) 0;
  width:100%;
}
/* La pista de "Sigue" sobra cuando el propio scroll ya es el mecanismo. */
[data-secuencia-pista][data-activa="si"] .portada__pista{opacity:.35}

/* El velo original tapa al 88-97% porque debajo hay una foto de dia. Sobre
   una escena nocturna eso es negro sobre negro. Aqui pasa a ser diagonal:
   denso donde va el titular, casi limpio donde esta la imagen. */
[data-secuencia-pista][data-activa="si"] .portada__velo{
  background:
    linear-gradient(112deg,rgba(10,10,11,.90) 0%,rgba(10,10,11,.58) 22%,
                    rgba(10,10,11,.10) 50%,rgba(10,10,11,0) 74%),
    linear-gradient(180deg,rgba(10,10,11,.34) 0%,rgba(10,10,11,0) 14%),
    linear-gradient(0deg,rgba(10,10,11,.40) 0%,rgba(10,10,11,0) 18%);
}
/* El polvo de oro es la firma de la casa y se queda, pero a media voz. */
[data-secuencia-pista][data-activa="si"] canvas[data-fondo]{opacity:.42}

@media (prefers-reduced-motion:reduce){
  [data-secuencia-pista][data-activa="si"]{height:auto}
  [data-secuencia-pista][data-activa="si"] .portada,
  [data-secuencia-pista][data-activa="si"] .portadilla{position:relative; height:auto}
  [data-secuencia-pista][data-activa="si"] .portada__ventanas,
  [data-secuencia-pista][data-activa="si"] .portadilla__secuencia{display:none}
  [data-secuencia-pista][data-activa="si"] .portada__escena .portada__capa,
  [data-secuencia-pista][data-activa="si"] .portadilla__foto{display:block}
}

/* ── PORTADILLAS · el plano de fondo ──────────────────────────────────────
   Va sobre la foto y aparece cuando tiene imagen que dar (data-listo lo pone
   planos.js al recibir 'canplay'). Sin ese atributo es invisible, asi que un
   vídeo que no carga o que el navegador no deja reproducir no deja hueco:
   simplemente sigue viendose la foto. */
.portadilla__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease;
  /* el mismo tratamiento que la foto que hay debajo, para que el relevo
     entre una y otro no se note */
  filter:saturate(1.06) brightness(.98) contrast(1.04);
}
.portadilla__video[data-listo="si"]{opacity:1}
@media (prefers-reduced-motion:reduce){ .portadilla__video{display:none} }

/* ── MENU AGRUPADO ────────────────────────────────────────────────────────
   El menu repite las tres preguntas de la portada. Cada etiqueta es un enlace
   de verdad a su pagina principal, no un boton muerto, y despliega el resto
   al pasar por encima o al tabular hasta el.

   Sin JavaScript a proposito: :hover cubre el raton y :focus-within cubre el
   teclado. Un menu que necesita un guion para abrirse es un menu que se queda
   cerrado el dia que el guion falla. */
.nav__grupo{position:relative}
.nav__jefe::after{
  content:""; display:inline-block; width:.3rem; height:.3rem; margin-left:.45rem;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-.15em) rotate(45deg); opacity:.55;
}
/* Marca el grupo cuando la pagina abierta es una de sus hijas: el visitante
   ve en que rama esta aunque la etiqueta no sea la pagina exacta. */
.nav a[data-dentro="si"]{color:var(--oro-claro)}

.nav__panel{
  position:absolute; top:100%; left:-.9rem; min-width:16rem;
  display:flex; flex-direction:column;
  background:var(--tinta-2); border:1px solid var(--linea);
  padding:.4rem 0; margin-top:.55rem;
  opacity:0; visibility:hidden; transform:translateY(-.4rem);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  z-index:40;
}
.nav__grupo:hover .nav__panel,
.nav__grupo:focus-within .nav__panel{opacity:1; visibility:visible; transform:none}
.nav__panel a{
  padding:.7rem 1.1rem; border-bottom:0; white-space:nowrap;
  font-size:.78rem; letter-spacing:.04em; text-transform:none;
}
.nav__panel a:hover,.nav__panel a:focus-visible{background:var(--tinta-3); color:var(--hueso)}
/* El puente invisible: sin el, el raton cae en el hueco entre la etiqueta y
   el panel, se pierde el :hover y el panel se cierra en la cara. */
.nav__grupo::after{content:""; position:absolute; top:100%; left:0; right:0; height:.7rem}

@media (max-width:60rem){
  /* En el menu desplegable de movil no hay sitio para paneles flotantes:
     cada grupo se muestra entero, con sus hijos indentados debajo. */
  .nav__grupo{position:static}
  .nav__grupo::after{display:none}
  .nav__jefe::after{display:none}
  .nav__panel{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; background:none; border:0; box-shadow:none;
    padding:0 0 .4rem 1rem; margin:0;
  }
  .nav__panel a{
    padding-block:.75rem; font-size:.76rem; color:var(--gris);
    border-bottom:1px solid var(--linea);
  }
}

/* ── PORTADA · botones bajo el titular ────────────────────────────────────
   La portada ahora es la captacion: titular, dos lineas y dos botones. El
   primero es el camino principal (agencia), el segundo el de capital. */
.portada__botones{margin-top:1.7rem; display:flex; flex-wrap:wrap; gap:.8rem 1rem}
/* Con el titular a dos lineas explicitas (<br>) el ancho maximo de 12ch se
   queda corto y partia "agencia inmobiliaria" por la mitad. */
[data-secuencia-pista] .portada h1{max-width:22ch}

/* ── FOTO A SANGRE · con plano de video encima ─────────────────────────────
   Mismo mecanismo que en las portadillas: la foto es el suelo, el video se
   monta encima y solo se hace visible cuando ya tiene imagen (data-listo lo
   pone planos.js). Sin carga, sin permiso o sin movimiento: se ve la foto. */
.sangre__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s ease;
  filter:saturate(1.04) brightness(.96);
}
.sangre__video[data-listo="si"]{opacity:1}
.sangre__texto .boton{margin-top:1.6rem; align-self:flex-start}
@media (prefers-reduced-motion:reduce){ .sangre__video{display:none} }

/* ── CONTRASTE DEL TEXTO SOBRE VIDEO Y FOTO ───────────────────────────────
   Los grises (#8C8479) se eligieron sobre fotos oscurecidas al 62%. Con los
   planos luminosos debajo, gris sobre madera clara no se lee. Sobre imagen el
   texto va en hueso con sombra, y el velo se densifica en la franja del texto. */
.portadilla__contenido p,
.portadilla p{color:var(--hueso); text-shadow:0 1px 3px rgba(10,10,11,.9), 0 2px 18px rgba(10,10,11,.75)}
.portadilla .migas, .portadilla .migas a{color:var(--gris-claro); text-shadow:0 1px 3px rgba(10,10,11,.9)}
.portadilla .rotulo{text-shadow:0 1px 3px rgba(10,10,11,.9)}
.portadilla h1{text-shadow:0 2px 6px rgba(10,10,11,.7), 0 4px 28px rgba(10,10,11,.55)}
.portadilla__velo{
  background:
    linear-gradient(100deg,rgba(10,10,11,.90) 0%,rgba(10,10,11,.66) 38%,
                    rgba(10,10,11,.28) 66%,rgba(10,10,11,.06) 100%),
    linear-gradient(180deg,rgba(10,10,11,.45) 0%,rgba(10,10,11,0) 22%);
}
.portada__pie p{color:var(--hueso); opacity:.92; text-shadow:0 1px 3px rgba(10,10,11,.9), 0 2px 18px rgba(10,10,11,.7)}
.portada__claim{text-shadow:0 1px 3px rgba(10,10,11,.95)}
/* bloque a sangre con video: la frase y el boton, legibles pase lo que pase */
.sangre__velo{
  background:
    linear-gradient(90deg,rgba(10,10,11,.88) 0%,rgba(10,10,11,.62) 48%,rgba(10,10,11,.30) 100%),
    linear-gradient(180deg,rgba(10,10,11,.35),rgba(10,10,11,0) 30%,rgba(10,10,11,0) 70%,rgba(10,10,11,.45));
}
.sangre blockquote{color:var(--hueso); text-shadow:0 2px 6px rgba(10,10,11,.8), 0 4px 26px rgba(10,10,11,.6)}
.sangre cite{color:var(--gris-claro); text-shadow:0 1px 3px rgba(10,10,11,.9)}

/* ── PETALOS CON FOTO ─────────────────────────────────────────────────────
   El segmentador de la portada eran cajas negras con texto. Cada petalo lleva
   ahora una foto detras con un degradado que se densifica hacia abajo, que es
   donde vive el texto. Especificidad .amapola .petalo para ganar a las reglas
   inline del segmentador sin depender del orden de carga. */
.amapola .petalo{overflow:hidden; isolation:isolate; justify-content:flex-end; min-height:15rem}
.amapola .petalo--foco{min-height:19rem}
.petalo__foto{position:absolute; inset:0; z-index:-1; display:block}
.petalo__foto picture,.petalo__foto img{display:block; width:100%; height:100%}
.petalo__foto img{
  object-fit:cover; transform:scale(1.04);
  filter:brightness(.66) saturate(.98);
  transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
.petalo__foto::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,.18) 0%,rgba(10,10,11,.50) 42%,rgba(10,10,11,.92) 100%);
}
.amapola .petalo:hover .petalo__foto img,
.amapola .petalo:focus-visible .petalo__foto img{transform:scale(1.09); filter:brightness(.78) saturate(1.06)}
.amapola .petalo__eti,.amapola .petalo__t,.amapola .petalo__d,.amapola .petalo__mas{
  position:relative; text-shadow:0 1px 3px rgba(10,10,11,.9), 0 2px 14px rgba(10,10,11,.6);
}
.amapola .petalo__d{opacity:.92}
@media (prefers-reduced-motion:reduce){ .petalo__foto img{transition:none} .amapola .petalo:hover .petalo__foto img{transform:scale(1.04)} }


/* ═══════════════════════════════════════════════════════════════════════
   CAPA DE OFICIO
   ─────────────────────────────────────────────────────────────────────
   Remates que no mueven un pixel de la maqueta pero cambian la sensacion:
   tipografia bien resuelta, seleccion de marca, foco visible y nitido,
   y ningun elemento del navegador sin vestir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Escala tipografica ──────────────────────────────────────────
   Antes cada tamano era un clamp() suelto y el ritmo no cuadraba entre
   secciones. Esto fija la escala una vez (razon 1.25, la cuarta mayor)
   para que todo lo nuevo caiga en su sitio sin decidirlo a ojo. */
:root{
  --t-xs:  clamp(.72rem, .69rem + .12vw,  .78rem);
  --t-sm:  clamp(.84rem, .80rem + .18vw,  .92rem);
  --t-md:  clamp(1rem,   .96rem + .22vw, 1.09rem);
  --t-lg:  clamp(1.18rem, 1.10rem + .38vw, 1.42rem);
  --t-xl:  clamp(1.45rem, 1.28rem + .78vw, 2.05rem);
  --t-2xl: clamp(1.9rem,  1.55rem + 1.6vw, 3.1rem);
  --t-3xl: clamp(2.4rem,  1.8rem  + 2.8vw, 4.4rem);

  /* Alturas de linea por funcion, no por tamano: los titulares respiran
     poco y el texto corrido respira mucho. */
  --interlinea-titular: 1.08;
  --interlinea-texto:   1.62;
}

/* ── 2 · Tipografia fina ─────────────────────────────────────────────
   Kerning y ligaduras activos, y el tamano optico de Newsreader (es una
   fuente variable con eje opsz 6..72) haciendo su trabajo: los titulares
   se afinan y el texto pequeno engorda para leerse mejor. */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  font-optical-sizing: auto;
}

/* Las comillas y guiones de apertura cuelgan fuera del bloque, que es como
   se compone un texto de verdad. Solo lo entiende Safari; el resto lo ignora
   sin romper nada. */
@supports (hanging-punctuation: first) {
  .medida, .pregunta__cuerpo, .tarjeta p{ hanging-punctuation: first last; }
}

/* Ningun titular con una palabra sola colgando en la ultima linea, y ningun
   parrafo terminado en huerfana. Es la diferencia entre "compuesto" y
   "volcado". */
h1, h2, h3, .titulo-seccion, .amapola__pregunta, .intro__pregunta{
  text-wrap: balance;
}
p, .medida, li{ text-wrap: pretty; }

/* Cifras alineadas en columna dondequiera que haya numeros que comparar:
   simulador, valorador y tabla comparativa. */
.sim__cifra, .val__cifra, .comparativa td, .paso__n, .tarjeta__n{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "kern" 1, "tnum" 1;
}

/* ── 3 · Seleccion de texto ──────────────────────────────────────────
   El azul del navegador sobre una paleta de bronce canta muchisimo. */
::selection{ background: var(--oro); color: var(--tinta); text-shadow: none; }
::-moz-selection{ background: var(--oro); color: var(--tinta); text-shadow: none; }

/* ── 4 · Foco visible ────────────────────────────────────────────────
   Un anillo de marca, separado del elemento para que se lea sobre
   fotografia, y con su propio hueco. Quien navega con teclado tiene que
   ver donde esta sin esforzarse. */
:focus-visible{
  outline: 2px solid var(--oro-luz);
  outline-offset: 3px;
  border-radius: 1px;
}
/* El navegador pinta el foco tambien al hacer clic con raton en algunos
   controles; ahi sobra. */
:focus:not(:focus-visible){ outline: none; }

/* ── 5 · Enlaces dentro del texto ────────────────────────────────────
   El subrayado por defecto corta las letras con descendente (g, j, p).
   Se baja, se afina y se colorea. */
.medida a:not(.boton), .pregunta__cuerpo a:not(.boton), .legal a:not(.boton){
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in oklab, var(--oro) 55%, transparent);
  transition: text-decoration-color .25s ease, color .25s ease;
}
.medida a:not(.boton):hover, .pregunta__cuerpo a:not(.boton):hover,
.legal a:not(.boton):hover{
  color: var(--oro-luz);
  text-decoration-color: var(--oro-luz);
}
@supports not (color: color-mix(in oklab, red, blue)){
  .medida a:not(.boton){ text-decoration-color: var(--oro-sombra); }
}

/* ── 6 · Barra de desplazamiento ─────────────────────────────────────
   Una barra gris de sistema sobre un fondo negro delata la plantilla. */
html{ scrollbar-color: var(--linea) var(--tinta); scrollbar-width: thin; }
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--tinta); }
::-webkit-scrollbar-thumb{
  background: var(--linea); border: 3px solid var(--tinta); border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover{ background: var(--oro-sombra); }

/* ── 7 · Controles de formulario ─────────────────────────────────────
   Para que las casillas y el cursor no salgan en azul de sistema. */
:root{ accent-color: var(--oro); caret-color: var(--oro-luz); }
input, select, textarea, button{ font: inherit; }
input::placeholder, textarea::placeholder{ color: var(--gris); opacity: .7; }

/* Quitar las flechas del campo numerico: en un simulador estorban y
   ensucian una caja que por lo demas esta limpia. */
input[type="number"]{ -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ── 8 · Imagenes y medios ───────────────────────────────────────────
   Ninguna imagen desborda su caja ni arrastra el espacio fantasma que
   deja el display:inline por defecto. */
img, video, canvas, svg{ max-width: 100%; }
img, video{ display: block; height: auto; }

/* ── 9 · Mas contraste si el sistema lo pide ─────────────────────────
   Accesibilidad de verdad: no solo cumplir el minimo, responder cuando
   alguien pide mas. */
@media (prefers-contrast: more){
  :root{
    --gris:       #C4BCB0;
    --gris-claro: #E4DDD2;
    --linea:      #4A4137;
  }
  .medida a:not(.boton){ text-decoration-color: currentColor; }
}

/* ── 10 · Impresion ──────────────────────────────────────────────────
   Alguien imprimira el aviso legal o una ficha. Que no salga en negro. */
@media print{
  :root{ --tinta:#fff; --tinta-2:#fff; --hueso:#111; --gris:#444; --linea:#bbb; }
  .cabecera, .flotante, .telon, .portada__video, canvas[data-fondo],
  .amapola__volver, .pie__legal nav{ display: none !important; }
  body{ background: #fff; color: #111; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}


/* ═══════════════════════════════════════════════════════════════════════
   IMPACTO Y CONVERSION
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Numeral de portadilla ───────────────────────────────────────────
   Sangrado por el borde derecho y recortado. Da a cada rama una identidad
   propia sin cambiarle la plantilla, y mete el contraste de escala que le
   faltaba a la pagina: 11rem contra 1rem en la misma pantalla. */
.portadilla__cifra{
  position:absolute; right:-.06em; bottom:-.22em; z-index:0; pointer-events:none;
  font-family:var(--display); font-weight:300; line-height:.78;
  font-size:clamp(7rem,22vw,17rem); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px var(--oro-sombra);
  opacity:.5; user-select:none;
}
@supports not (-webkit-text-stroke: 1px red){
  .portadilla__cifra{ color:var(--oro-sombra); opacity:.18; }
}
.portadilla__contenido{ z-index:1 }

/* Titular mas grande y mas apretado: escala editorial, no de plantilla. */
.portadilla h1{
  font-size:clamp(2.5rem,7.2vw,5.8rem);
  line-height:.96; letter-spacing:-.025em; max-width:14ch;
}
/* Reglilla fina bajo el rotulo. Ordena sin decorar. */
.portadilla .rotulo{ position:relative; padding-bottom:.85rem }
.portadilla .rotulo::after{
  content:""; position:absolute; left:0; bottom:0; width:2.6rem; height:1px;
  background:linear-gradient(90deg,var(--oro),transparent);
}

/* ── Barra de conversion ─────────────────────────────────────────────
   Aparece al pasar la primera pantalla y se retira al llegar al cierre.
   Nunca tapa el formulario de verdad: seria pelearse consigo misma. */
.convierte{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem clamp(1rem,4vw,2.5rem);
  padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px));
  background:rgba(13,11,10,.92); backdrop-filter:blur(14px) saturate(1.1);
  border-top:1px solid var(--linea);
  transform:translateY(110%); opacity:0; visibility:hidden;
  transition:transform .45s cubic-bezier(.22,.7,.3,1), opacity .35s ease, visibility .35s;
}
.convierte[data-ver="si"]{ transform:none; opacity:1; visibility:visible }
.convierte__txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0 }
.convierte__t{ font-family:var(--display); font-size:var(--t-md); line-height:1.2 }
.convierte__d{ font-size:var(--t-xs); color:var(--gris); letter-spacing:.06em;
  text-transform:uppercase }
.convierte .boton{ flex:0 0 auto; padding-block:.7rem }
@media (max-width:40rem){
  .convierte__d{ display:none }
  .convierte__t{ font-size:var(--t-sm) }
  .convierte .boton{ padding-inline:1rem; font-size:var(--t-xs) }
}
@media (prefers-reduced-motion:reduce){ .convierte{ transition:none } }


/* ── Banda cinetica ──────────────────────────────────────────────────
   Corre sola, se para al pasar el raton para poder leerla, y se queda
   quieta si el sistema pide menos animacion. El texto se duplica en el
   HTML para que el bucle no de un tiron al reiniciar. */
.tira{overflow:hidden;border-block:1px solid var(--linea);
  background:var(--tinta-2);padding-block:1.1rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tira__pista{display:flex;align-items:center;gap:2.2rem;width:max-content;
  animation:tiraCorre 42s linear infinite}
.tira:hover .tira__pista,.tira:focus-within .tira__pista{animation-play-state:paused}
.tira__it{font-family:var(--display);font-weight:300;white-space:nowrap;
  font-size:clamp(1.15rem,2.6vw,1.9rem);letter-spacing:-.01em;color:var(--hueso)}
.tira__sep{color:var(--oro);font-size:.55em;opacity:.8}
@keyframes tiraCorre{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Manifiesto ──────────────────────────────────────────────────────
   El contraste de escala de la pagina: un titular enorme contra un
   parrafo pequeño, y mucho aire alrededor. */
.manifiesto{padding-block:calc(var(--paso) * 1.1);position:relative;overflow:hidden}
.manifiesto::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 88% 12%,rgba(161,118,69,.10),transparent 68%)}
.manifiesto .env{position:relative;display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end}
@media (max-width:58rem){.manifiesto .env{grid-template-columns:1fr}}
.manifiesto__t{font-family:var(--display);font-weight:300;margin:.6rem 0 0;
  font-size:clamp(2.8rem,9.5vw,7.5rem);line-height:.9;letter-spacing:-.035em}
.manifiesto__t em{font-style:normal;color:var(--oro-luz)}
.manifiesto__p{color:var(--gris-claro);font-size:var(--t-md);
  line-height:var(--interlinea-texto);max-width:34ch;padding-bottom:.6rem}

@media (prefers-reduced-motion:reduce){
  .tira__pista{animation:none;transform:none}
  .tira{-webkit-mask-image:none;mask-image:none}
}


/* ── Garantia junto al boton ─────────────────────────────────────────
   Va pegada al envio, que es donde se decide. Mas abajo no la lee nadie. */
.garantia{margin-top:1.2rem;font-size:var(--t-sm);color:var(--gris);
  line-height:1.55;max-width:46ch;border-left:2px solid var(--oro-sombra);
  padding-left:.95rem}
.garantia__p{display:block;color:var(--hueso);font-family:var(--display);
  font-size:var(--t-md);margin-bottom:.25rem}

/* ── Qué pasa despues ────────────────────────────────────────────────
   Tres pasos numerados. Quita el miedo a dejar el telefono, que es la
   objecion real de cualquier formulario. */
.despues{margin-top:var(--paso)}
.despues__pasos{list-style:none;margin:clamp(1.75rem,4vw,2.5rem) 0 0;padding:0;
  display:grid;gap:1px;background:var(--linea);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  border:1px solid var(--linea)}
.despues__pasos li{background:var(--tinta);padding:clamp(1.2rem,3vw,1.8rem);
  display:flex;flex-direction:column;gap:.45rem}
.despues__n{font-family:var(--display);font-size:var(--t-xs);letter-spacing:.18em;
  color:var(--oro);font-weight:500}
.despues__t{font-family:var(--display);font-size:var(--t-lg);line-height:1.15}
.despues__d{font-size:var(--t-sm);color:var(--gris);line-height:1.5}


/* El indice tambien en el pie: la numeracion es del sitio entero, no un
   adorno de una pantalla. */
.pie__n{display:inline-block;width:1.9em;font-family:var(--display);
  font-size:.72em;letter-spacing:.14em;color:var(--oro);opacity:.75}
.pie a:hover .pie__n{opacity:1;color:var(--oro-luz)}


/* ── Operacion abierta ───────────────────────────────────────────────
   La ficha de una operacion real, con sus cifras. Es lo unico de toda la
   web que aporta prueba, asi que se le da el peso visual que merece: va
   antes que cualquier explicacion. */
.operacion{padding-block:clamp(2.5rem,6vw,4.5rem);
  background:linear-gradient(180deg,#0D0B0A,var(--tinta));
  border-bottom:1px solid var(--linea)}
.operacion__cab{max-width:52rem}
.operacion__t{font-family:var(--display);font-weight:300;margin:.5rem 0 0;
  font-size:clamp(2.2rem,6.5vw,4.2rem);line-height:.98;letter-spacing:-.03em}
.operacion__t span{color:var(--oro);margin-inline:.3em;font-size:.6em;vertical-align:.12em}
.operacion__q{margin-top:1rem;font-size:var(--t-md);color:var(--gris-claro);
  max-width:44ch;line-height:var(--interlinea-texto)}
.operacion__q strong{color:var(--hueso);font-weight:400}

.operacion__cifras{display:grid;gap:1px;margin:clamp(2rem,4vw,2.75rem) 0 0;
  background:var(--linea);border:1px solid var(--linea);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.operacion__cifras>div{background:var(--tinta);padding:1.15rem 1.2rem;
  display:flex;flex-direction:column;gap:.3rem}
.operacion__cifras dt{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);font-family:var(--display);font-weight:500}
.operacion__cifras dd{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,3vw,1.95rem);line-height:1.05;color:var(--hueso);
  font-variant-numeric:tabular-nums}
.operacion__cifras dd span{display:block;font-size:var(--t-xs);color:var(--gris);
  letter-spacing:.08em;margin-top:.3rem;font-weight:500}
.operacion__grande{color:var(--oro-claro)!important;
  font-size:clamp(2.1rem,5vw,3.2rem)!important}

.operacion__dos{display:grid;gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(2rem,4vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.operacion__dos h3{font-family:var(--display);font-weight:400;font-size:var(--t-lg);
  margin:0 0 .9rem}

.operacion__riesgo{margin-top:clamp(1.75rem,4vw,2.5rem);font-size:var(--t-sm);
  color:var(--gris);line-height:1.6;max-width:62ch;
  border-left:2px solid var(--alerta);padding-left:1rem}
.operacion__riesgo b{color:var(--hueso);font-weight:400}

.operacion__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin-top:clamp(1.5rem,3.5vw,2.25rem)}
.operacion__nota{font-size:var(--t-sm);color:var(--gris);max-width:34ch}