/* ============================================================
   Josué Sánchez Palacios — hoja de estilos
   Piedra cálida, azul profundo, verticalidad, silencio.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  /* Paleta material */
  --stone:        #eee5d3;
  --stone-soft:   #f4ece0;
  --stone-deep:   #d9caa9;
  --ink:          #2b2620;
  --ink-soft:     #5c5344;
  --navy:         #16233a;
  --navy-deep:    #0e1726;
  --wine:         #6e1423;
  --gold:         #a3854f;
  --rule:         rgba(43,38,32,0.18);

  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body:    'EB Garamond', 'Iowan Old Style', Georgia, serif;

  --container: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.small-caps{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
}

.rule{
  width: 42px;
  height: 1px;
  background: var(--gold);
  margin: 1.4rem auto;
  border: none;
}

/* ---------- Header ---------- */

.site-header{
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: var(--stone);
}

.site-header .brand{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header .header-right{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}

.main-nav{
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.2rem);
}

@media (max-width: 700px){
  .site-header{
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    row-gap: 0.9rem;
  }

  .site-header .brand{
    white-space: normal;
  }

  .site-header .header-right{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.7rem;
  }

  .main-nav{
    gap: 1.1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lang-select{
    flex-wrap: wrap;
    justify-content: center;
  }
}

.main-nav a{
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.main-nav a.active,
.main-nav a:hover{
  border-color: var(--navy);
}

.lang-select{
  display: flex;
  gap: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.lang-select button{
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.15rem 0.1rem;
}

.lang-select button.active{
  color: var(--ink);
  border-bottom: 1px solid var(--navy);
}

.lang-note{
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%) translateY(12px);
  background: var(--navy);
  color: var(--stone-soft);
  padding: 0.75rem 1.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 100;
}

.lang-note.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   HOME — Entrada de dos estados
   ------------------------------------------------------------
   Estado 1: 03-home-fachada-limpia-aprobada.png  (fachada sin
             texto; el nombre y el selector se componen aquí
             como tipografía real, en la posición exacta que
             marca 01-home-fachada-principal-aprobada.png)
   Estado 2: 02-home-tres-puertas-aprobada.png

   Ambas láminas tienen proporción 3/2, de modo que el umbral
   ocupa la misma región en las dos. Las hojas de la puerta son
   recortes EXACTOS de la propia fachada: con la puerta cerrada
   la imagen es idéntica al original.
   ============================================================ */

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

body.home{
  overflow: hidden;
  height: 100%;
}

.entrance{
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #9e9082 0%, #b9aa99 22%, #c0ad97 78%, #a3947f 100%);

  /* Umbral en coordenadas de viewport (las fija main.js). */
  --door-t: 34%;
  --door-r: 37%;
  --door-b: 12%;
  --door-l: 40%;
  --door-cx: 51.172%;
  --door-cy: 61.31%;
  --frame-w: 100vw;

  /* Ancho de la lámina en unidades de viewport: no depende de JS, así el
     nombre y el selector nunca quedan mal colocados al redimensionar. */
  --fw: 100vw;

  /* Un solo gesto: abrir ↗ entrar ↗ asentarse. */
  --ease-cam:  cubic-bezier(0.48, 0.02, 0.18, 1);
  --ease-leaf: cubic-bezier(0.58, 0.02, 0.22, 1);
}

.plate{ position: absolute; inset: 0; }
.plate__move{ position: absolute; inset: 0; }

.plate__frame{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
}

/* Las dos láminas llenan la pantalla mientras el recorte sea mínimo; en
   formatos estrechos se muestran completas sobre el tono de piedra. */
@media (min-aspect-ratio: 4/3) and (max-aspect-ratio: 3/2){
  .plate__frame{ width: auto; height: 100%; }
  .entrance{ --fw: 150vh; }
}

.plate__img{
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Estado 2: pantalla azul/galería (#home-gallery) --------------------
   Sin estancia intermedia: al pulsar la puerta aparece directamente esta
   pantalla completa. El diseño y el CSS de .dir-gallery / .dgy-* viven
   más abajo, en "HOME — segunda pantalla: galería"; aquí sólo se controla
   su visibilidad. */

#home-gallery{ display: none; }

/* ---- Estado 1: la fachada ---- */

.plate--facade{
  z-index: 2;
  transform-origin: var(--door-cx) var(--door-cy);
}

.plate--facade .plate__frame{
  perspective: calc(var(--frame-w) * 1.5);
  perspective-origin: 51.172% 61.31%;
}

/* Hueco del vano en la imagen base, 0,16% por dentro del canto de las hojas
   para que con la puerta cerrada no aparezca ninguna línea. */
.plate--facade .plate__img{
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
    39.74% 34.36%, 39.74% 88.26%, 62.60% 88.26%, 62.60% 34.36%, 39.74% 34.36%
  );
}

/* ---- Las dos hojas ---- */

.leaf{
  position: absolute;
  top: 34.20%;
  height: 54.22%;
  background-image: url('../img/fachada-limpia.jpg');
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: filter 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.leaf--l{
  left: 39.583%;
  width: 11.589%;
  background-size: 862.89% 184.43%;
  background-position: 44.771% 74.705%;
  transform-origin: 0% 50%;
}

.leaf--r{
  left: 51.172%;
  width: 11.588%;
  background-size: 862.96% 184.43%;
  background-position: 57.879% 74.705%;
  transform-origin: 100% 50%;
}

/* Reflejo de hover: luz recorriendo una superficie de madera. */
.leaf::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    112deg,
    rgba(255,247,232,0) 24%,
    rgba(255,247,232,0.095) 46%,
    rgba(255,247,232,0.04) 60%,
    rgba(255,247,232,0) 78%
  );
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine){
  .door-hover .leaf::after{ opacity: 1; }
  .door-hover .leaf{ filter: brightness(1.035); }
}

/* ---- Nombre y selector de idioma ----------------------------------------
   Tipografía real, nítida en HiDPI, con el negro tinta de la identidad.
   Van dentro de la lámina para que acompañen a la fachada al entrar.
   El margen se mide contra el borde de la PANTALLA: cuando la lámina
   desborda el viewport, max() aparta el bloque lo que haga falta. */

.facade-id{
  position: absolute;
  z-index: 3;
  top:   max(7.4%,   calc((var(--fw) / 1.5 - 100vh) / 2 + 3.4vh));
  right: max(4.167%, calc((var(--fw) - 100vw) / 2 + 2.4vw));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--fw) * 0.0075);
  color: #1f1c17;
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

.plate--facade .brand{
  font-size: calc(var(--fw) * 0.01619);
  font-weight: 400;
  letter-spacing: 0.0328em;
}

.facade-lang{
  display: flex;
  align-items: baseline;
  gap: 0.235em;
  font-size: calc(var(--fw) * 0.012454);
  letter-spacing: 0.005em;
}

.facade-lang button.lang-hit{
  background: none;
  border: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.facade-lang .lang-sep{
  color: inherit;
}

/* ---- Zonas de clic invisibles ---- */

.door-enter{
  position: absolute;
  top: 12.30%;
  left: 39.583%;
  width: 23.177%;
  height: 76.12%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
}

.door-enter:focus-visible,
.plate--facade .brand:focus-visible,
.facade-lang button.lang-hit:focus-visible{
  outline: 2px solid rgba(120, 100, 70, 0.85);
  outline-offset: 3px;
}

/* ============================================================
   Estado 1 — fachada, adaptación MOBILE (≤767px)
   ------------------------------------------------------------
   Composición fotográfica propia para móvil (no es el desktop
   reducido): Referencias/Página principal/home-mobile-background.png,
   copiada sin alterar a assets/img/home-mobile-fondo.jpg (mismo
   procedimiento ya usado con el fondo de la galería: reencode
   JPEG q94, diff medio ~1.4/255 frente al PNG original).
   El diseño desktop de arriba no se toca: esta sección sólo entra
   en juego por debajo de 768px.
   ============================================================ */

@media (max-width: 767px){

  /* Home mobile: flujo natural, sin forzar pantalla completa. La foto se
     muestra a su proporción real (width:100%, height:auto); si es más
     alta que el viewport, la página simplemente hace scroll, como
     cualquier documento normal. Nada de fixed/dvh/cover/recortes.

     body.home y #entrance sólo se liberan de su bloqueo a la pantalla
     MIENTRAS se ve la fachada (selector :not(.is-inside)): en cuanto se
     pulsa la puerta y se añade .is-inside, #entrance recupera exactamente
     su fixed + overflow:hidden de siempre (regla base, sin tocar) para la
     galería — esa segunda pantalla queda intacta, igual que antes. Y en
     ese estado #entrance ya no es contenido de flujo normal del body, así
     que liberar el overflow de body.home no tiene ningún efecto ahí. */
  body.home{
    overflow: visible;
    height: auto;
  }

  .entrance:not(.is-inside){
    position: static;
    inset: auto;
    height: auto;
    overflow: visible;
  }

  .plate--facade{
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  /* position:relative (no static): sigue anclando .door-enter y
     .facade-id en su lugar de siempre, pero ahora participa del flujo
     normal — su alto lo da aspect-ratio (la proporción REAL del archivo,
     1170×2532), no un cálculo de viewport. Con width:100% + esa misma
     proporción fija, el marco mide exactamente lo que la foto necesita
     para mostrarse completa y sin deformar; si es más alto que la
     pantalla, el documento simplemente crece y aparece scroll nativo.

     (Se probó primero con la propia etiqueta <img> + content:url() para
     el intercambio de imagen, pero causaba un glitch de pintado en este
     navegador — un rectángulo sólido espurio sobre la puerta — así que
     se usa en su lugar background-image sobre este mismo contenedor,
     con background-size:100% 100%: como el marco tiene EXACTAMENTE la
     proporción real de la foto, no hay ninguna deformación — no es un
     "cover" que recorta, es un ajuste 1:1 porque las proporciones ya
     coinciden por construcción.) */
  .plate--facade .plate__frame{
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1170 / 2532;
    margin: 0;
    padding: 0;
    perspective: none;
    background: url('../img/home-mobile-fondo.jpg') 0 0 / 100% 100% no-repeat;
  }

  /* El <img> de escritorio (fachada-limpia.jpg) se oculta: la foto mobile
     ahora la pinta el fondo de .plate__frame, arriba. */
  .plate--facade .plate__img{
    display: none;
  }

  /* Las hojas de escritorio se ocultan: son recortes de fachada-limpia.jpg
     y no de la foto mobile; su hover, además, sólo aplica con puntero
     fino (no en táctil). */
  .plate--facade .leaf{
    display: none;
  }

  /* Zona de clic sobre la puerta de la composición mobile (medida sobre
     home-mobile-background.png), con margen generoso. Sigue siendo un
     porcentaje del propio marco, así que no depende de si el marco mide
     exactamente el viewport o es algo más alto/bajo. */
  .door-enter{
    top: 20%;
    left: 38%;
    width: 54%;
    height: 60%;
  }

  /* Mismo contenido y misma tipografía que en escritorio; sólo se
     adapta el tamaño (la fórmula de escritorio usa 100vw y se
     vuelve ilegible en un móvil). */
  .plate--facade .brand{
    font-size: 0.95rem;
  }

  .facade-lang{
    font-size: 0.72rem;
  }

  /* Nombre + idiomas, arriba a la derecha, por encima del arco: sigue
     siendo un porcentaje del marco (ahora de alto automático), así que
     su posición no depende de una altura artificial de viewport. */
  .facade-id{
    top: 3.4%;
  }
}

/* ============================================================
   La entrada — clic directo, sin secuencia intermedia
   ------------------------------------------------------------
   La puerta no se abre y no hay estancia ni recorrido interior: al
   pulsarla aparece directamente #home-gallery. El hover de la puerta
   (arriba, con .leaf) es el único efecto que se conserva.
   ============================================================ */

.entrance.is-inside .plate--facade{ display: none; }
.entrance.is-inside #home-gallery{ display: block; }

/* ---------- Footer ---------- */

.site-footer{
  border-top: 1px solid var(--rule);
  padding: 2.2rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.site-footer .footer-links{
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

.site-footer a:hover{
  color: var(--ink);
}

/* ---------- Página interior genérica (Escritos / Audiovisual) ---------- */

.page-hero{
  padding: clamp(4rem, 12vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.page-hero .numeral{
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.page-hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(2.4rem, 7vw, 4rem);
  margin: 0.6rem 0 1.2rem;
}

.page-hero .lede{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto;
}

.coming-soon{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 10vw, 7rem);
  text-align: center;
}

.coming-soon p{
  color: var(--ink-soft);
  font-size: 1.02rem;
}

.coming-soon .status{
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.55rem 1.6rem;
  border: 1px solid var(--rule);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}

/* ---------- Dirección ---------- */

.direccion-hero{
  padding: clamp(3.5rem, 10vw, 6rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  text-align: center;
}

.direccion-hero .numeral{
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.direccion-hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  margin: 0.6rem 0 1.3rem;
}

.direccion-hero .lede{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.4;
  max-width: 30ch;
  margin: 0 auto 1.8rem;
}

.direccion-hero .desc{
  max-width: 56ch;
  margin: 0 auto 0.6rem;
  color: var(--ink-soft);
  font-size: 1.03rem;
}

.direccion-hero .note{
  max-width: 56ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.form-wrap{
  padding: 0 var(--gutter) clamp(4rem, 10vw, 7rem);
}

.form-panel{
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--stone-deep);
  outline: 1px solid var(--rule);
  outline-offset: 6px;
  padding: clamp(2rem, 5vw, 3.2rem);
  background: var(--stone-soft);
}

.form-panel h2{
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 1.8rem;
}

.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

@media (max-width: 620px){
  .field-row{ grid-template-columns: 1fr; }
}

.field{
  margin-bottom: 1.4rem;
}

.field label{
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}

.field .input-icon{
  position: relative;
}

.field .input-icon svg{
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--ink-soft);
  pointer-events: none;
}

.field input,
.field select,
.field textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--stone);
  border: 1px solid var(--stone-deep);
  padding: 0.75rem 2.4rem 0.75rem 0.9rem;
  appearance: none;
  -webkit-appearance: none;
}

.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235c5344' stroke-width='1.4'><path d='M5 8l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 15px;
}

.field textarea{
  min-height: 110px;
  resize: vertical;
  font-style: italic;
  padding-right: 0.9rem;
}

.field textarea::placeholder{
  color: var(--ink-soft);
  opacity: 0.75;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--navy);
}

.btn-submit{
  width: 100%;
  background: var(--navy);
  color: var(--stone-soft);
  border: none;
  padding: 1rem 1.2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: background 0.25s ease;
}

.btn-submit:hover{ background: var(--navy-deep); }
.btn-submit:disabled{ opacity: 0.6; cursor: default; }

.confidentiality{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.confidentiality svg{
  width: 14px;
  height: 14px;
  stroke: var(--ink-soft);
}

.form-error{
  max-width: 720px;
  margin: 1.2rem auto 0;
  text-align: center;
  color: var(--wine);
  font-size: 0.88rem;
  display: none;
}

.form-error.show{ display: block; }

/* ---------- Principios ---------- */

.principios{
  padding: clamp(3.5rem, 9vw, 6rem) var(--gutter);
  max-width: 760px;
  margin: 0 auto;
}

.principios .numeral{
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  display: block;
}

.principios h1{
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  margin: 0.6rem 0 2.6rem;
}

.principios ol{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: principio;
}

.principios li{
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
}

.principios li:last-child{ border-bottom: 1px solid var(--rule); }

.principios .num{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.2rem;
}

.principios p{
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.principios strong{
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
   DIRECCIÓN — diseño aprobado
   Referencias/Dirección/04-direccion-diseno-final-aprobado.png
   ------------------------------------------------------------
   Composición reconstruida en HTML/CSS reales y medida sobre la
   referencia (1537 × 1023 px). Cada valor es una fracción de
   --P, el ancho de la composición, de modo que las proporciones
   aprobadas se conservan exactas a cualquier tamaño. El único
   asset es el monograma, extraído de la propia referencia.
   ============================================================ */

body.direccion{
  --P: clamp(960px, min(100vw, 100vh * 1.5024), 1560px);

  /* Desplazamiento uniforme de todo el bloque principal (columna
     izquierda + formulario) hacia arriba: se resta por igual, en
     píxeles, al "top" de cada elemento. Ninguna posición relativa
     entre ellos cambia; sólo sube el conjunto como un solo bloque
     dentro de .dir-page (que conserva su alto y su posición). */
  --lift: 65px;

  --dir-paper:    #f3eae0;
  --dir-ink:      #14110d;
  --dir-ink-deep: #0a0908;
  --dir-burgundy: #5a0c09;
  --dir-navy:     #16283f;
  --dir-rule:     #d6c7b3;
  --dir-field:    #dcc9b5;
  --dir-fieldbg:  #f0e7dd;

  margin: 0;
  min-height: 100vh;
  background: var(--dir-paper);
  color: var(--dir-ink);
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-x: hidden;
}

/* Papel: textura apenas perceptible, sin grano visible. */
body.direccion::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.dir-page{
  position: relative;
  width: var(--P);
  /* La proporción 1.5024 fija el ancho de la composición (--P), pero
     ningún hijo usa la ALTURA de .dir-page para posicionarse (todos son
     fracciones de --P). Los 45px que sobraban debajo del marco del
     formulario eran por tanto lienzo vacío, no espacio reservado por
     ningún elemento: se recortan aquí sin mover ni escalar nada dentro. */
  height: calc(var(--P) / 1.5024 - 45px);
  flex: none;
}

#form-wrap{ display: contents; }

/* ============================================================
   HOME — segunda pantalla: galería (I. Dirección / II. Escritos / III. Audiovisual)
   ------------------------------------------------------------
   Vive en index.html, detrás de la puerta de la fachada (#home-gallery).
   El cuadro enlaza a direccion.html, la página interna con el formulario.

   direccion-layout-reference.png MANDA sobre: fondo, composición,
   espacios, navegación, idiomas, escala y posición del cuadro,
   posición de los tres puntos.

   direccion-painting-reference.png MANDA ÚNICAMENTE sobre: la
   pintura, el marco, el título de la obra, el autor y el
   tratamiento visual de esa ficha. El cuadro (assets/img/
   direccion-cuadro.jpg) es un recorte exacto del marco de esa
   referencia — no ha sido redibujado ni recompuesto.

   Todo texto e icono es HTML/CSS real. Cada medida es una
   fracción del ancho del lienzo (--GW, que reproduce el lienzo
   1536×1024 de ambas referencias) para conservar exactamente las
   proporciones aprobadas a cualquier tamaño.
   ============================================================ */

.dir-gallery{
  /* El lienzo conserva la proporción 1536×1024 de las referencias y se
     encaja dentro de la pantalla sin recortarse ni deformarse. */
  --GW: min(100vw, calc(100vh * 1.5));
  --GH: calc(var(--GW) / 1.5);

  /* Ancho del conjunto marco+ficha, tal como lo fija la referencia
     de layout (55.143% del lienzo). El resto de medidas de esta
     sección son fracciones de --fw, tomadas de la referencia de
     la pintura, para que la ficha escale junto con el marco. */
  --fw: calc(var(--GW) * 0.55143);

  --gold:  #c99a48;
  --ivory: #e7e0d3;
  --stone: #96999c;

  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  /* Fondo: asset real (Referencias/Dirección/direccion-background-dark.png),
     sin degradado ni grano CSS superpuesto — cover/center/no-repeat para que
     cubra toda la pantalla, permanezca centrado y se adapte a cualquier
     viewport sin deformarse ni repetirse. */
  background: url('../img/direccion-fondo-oscuro.jpg') center center / cover no-repeat;
  color: var(--ivory);
}

.dgy-canvas{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--GW);
  height: var(--GH);
}

/* ---- Navegación superior ----------------------------------------------
   El espacio donde figuraba el nombre personal queda deliberadamente
   vacío: no se sustituye por ningún otro elemento.

   I · II · III forman un grupo independiente centrado por sí mismo en
   --GW (left:50% + translateX(-50%)), sin relación con los idiomas: así
   el centrado no depende de medir manualmente cada posición ni se ve
   afectado por lo que haya a la derecha. El hueco entre elementos es el
   promedio del que había entre ellos en la implementación anterior. */

.dgy-nav{
  position: absolute;
  top: calc(var(--GH) * 0.06934);
  left: 0;
  width: 100%;
  height: calc(var(--GH) * 0.01074);
  line-height: 1;
}

.dgy-nav-group{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--GW) * 0.056067);
}

.dgy-item{
  position: relative;
  font-family: var(--font-body);
  font-size: calc(var(--GW) * 0.01267);
  text-transform: uppercase;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

.dgy-item--active{ letter-spacing: -0.020em; }
.dgy-item--escritos{ letter-spacing: 0.010em; }
.dgy-item--audiovisual{ letter-spacing: 0.005em; }

.dgy-item--active{
  color: var(--gold);
}

.dgy-item--active::after{
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--GH) * 0.02832);
  width: calc(var(--GW) * 0.02995);
  height: max(1px, calc(var(--GH) * 0.00195));
  background: var(--gold);
  transform: translateX(-50%);
}

.dgy-item--inactive{
  color: var(--stone);
  cursor: default;
  user-select: none;
}

/* ---- Idiomas -------------------------------------------------------- */

.dgy-lang.lang-select{
  position: absolute;
  top: calc(var(--GH) * 0.06934);
  left: calc(var(--GW) * 0.86393);
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-body);
  font-size: calc(var(--GW) * 0.01267);
  letter-spacing: 0.075em;
}

.dgy-lang.lang-select button.lang-hit{
  background: none;
  border: none;
  border-bottom: none;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--stone);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dgy-lang.lang-select button.lang-hit.active{
  color: var(--stone);
}

.dgy-lang .lang-sep{
  margin: 0 calc(var(--GW) * 0.0037);
  color: var(--stone);
  opacity: 0.7;
}

/* ---- El cuadro ----------------------------------------------------------
   Tamaño, escala y posición: referencia de layout (55.143% del
   lienzo, iniciando al 20.313% de su alto). Contenido, marco y
   proporción interna: referencia de la pintura — la imagen es un
   recorte exacto de esa referencia, sin recomponer. */

.dgy-frame{
  position: absolute;
  top: calc(var(--GH) * 0.20313);
  left: 50%;
  transform: translateX(-50%);
  width: var(--fw);
  margin: 0;
}

.dgy-frame-img{
  display: block;
  width: 100%;
  height: auto;
}

/* ---- El cuadro, entrada a Dirección --------------------------------
   El marco y la pintura siguen siendo protagonistas: la señal de que
   es interactivo es mínima, sobre la propia pintura, sin overlays,
   texto ni botones. Sólo se toca el enlace nuevo y la imagen; nada de
   lo ya aprobado (tamaño, posición, marco, ficha) cambia. */

.dgy-frame-link{
  position: relative;
  display: block;
}

.dgy-frame-img{
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

/* Atenúa ~8% sólo el lienzo pintado, no el marco: es una segunda copia de la
   MISMA imagen, recortada (clip-path) al rectángulo interior del cuadro
   —medido directamente sobre el propio asset, fuera del marco dorado—, con
   brightness(0.92) encima. Revertir = quitar este bloque y la <img> que lo
   usa en index.html. */
.dgy-painting-dim{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  clip-path: inset(6.5% 4.6% 7.8% 4.6%);
  filter: brightness(0.92);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

@media (hover: hover) and (pointer: fine){
  .dgy-frame-link:hover .dgy-frame-img{
    transform: scale(1.006);
    filter: brightness(1.025);
  }
  .dgy-frame-link:hover .dgy-painting-dim{
    transform: scale(1.006);
    filter: brightness(calc(0.92 * 1.025));
  }
}

.dgy-frame-link:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

/* ---- Ficha museográfica --------------------------------------------
   Posición, tamaño, cursiva del título, autor y jerarquía: tal
   como resuelve la referencia de la pintura, expresados como
   fracción del ancho del propio marco (--fw) para que escalen
   junto con él. */

.dgy-caption{
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin: calc(var(--fw) * 0.0219) 0 0;
}

.dgy-title{
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: calc(var(--fw) * 0.02184);
  line-height: 1;
  color: var(--ivory);
}

.dgy-row{
  position: relative;
  margin-top: calc(var(--fw) * 0.01524);
  line-height: 1;
}

.dgy-author{
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(var(--fw) * 0.02039);
  line-height: 1;
  color: var(--stone);
}

.dgy-dots{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(var(--fw) * 0.0272);
}

.dgy-dot{
  /* 35% más pequeños que el tamaño anterior (0.01771 → 0.01151 de --fw). */
  width: calc(var(--fw) * 0.01151);
  height: calc(var(--fw) * 0.01151);
  border-radius: 50%;
  background: var(--stone);
  flex: none;
}

.dgy-dot--active{ background: var(--gold); }


/* ---- Footer editorial ---------------------------------------------------
   Una sola línea discreta, fuera de .dir-page (que es un lienzo de
   proporción fija y no participa del flujo natural del documento). El
   cuerpo pasa a columna para que este pie siga a la composición principal
   sin desplazar ni recalcular nada dentro de ella. */

.dir-footer{
  width: 100%;
  /* Reducidos para que la composición + footer quepan en 100vh en desktop
     sin achicar ningún contenido; en viewports bajos/móvil el body sigue
     permitiendo scroll con normalidad (no hay overflow:hidden). */
  margin-top: clamp(0.5rem, 0.6vw, 0.75rem);
  padding: 0.4rem var(--gutter) 0.5rem;
  border-top: 1px solid var(--dir-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 400;
  color: #6f6a5f;
  text-align: center;
}

.dir-footer a{
  color: inherit;
  transition: opacity 0.2s ease;
}

.dir-footer a:hover{ opacity: 0.65; }

.dir-footer-sep{
  color: inherit;
  opacity: 0.45;
}

/* ---- Columna izquierda ---- */

body.direccion .direccion-hero{
  position: absolute;
  left: calc(var(--P) * 0.057254);
  top: 0;
  width: calc(var(--P) * 0.42);
  padding: 0;
  text-align: left;
}

body.direccion .direccion-hero .numeral{
  position: absolute;
  top: calc(var(--P) * 0.136587 - var(--lift));
  left: 0;
  display: block;
  font-family: var(--font-display);
  font-size: calc(var(--P) * 0.024984);
  font-weight: 500;
  letter-spacing: 0.0153em;
  line-height: 1;
  color: var(--dir-burgundy);
}

body.direccion .direccion-hero h1{
  position: absolute;
  top: calc(var(--P) * 0.183573 - var(--lift));
  left: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: calc(var(--P) * 0.070787);
  letter-spacing: -0.0161em;
  line-height: 1;
  color: var(--dir-ink-deep);
  white-space: nowrap;
}

body.direccion .direccion-hero .lede{
  position: absolute;
  top: calc(var(--P) * 0.268317 - var(--lift));
  left: 0;
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-style: normal;
  font-size: calc(var(--P) * 0.011956);
  text-transform: uppercase;
  letter-spacing: 0.1206em;
  line-height: 1;
  color: var(--dir-burgundy);
  white-space: nowrap;
}

/* Separador: línea corta — rombo diminuto — línea corta */
.dir-sep{
  position: absolute;
  top: calc(var(--P) * 0.305465 - var(--lift));
  left: calc(var(--P) * 0.000651);
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

.dir-sep i:last-child{ width: calc(var(--P) * 0.031880); }

.dir-sep i{
  display: block;
  width: calc(var(--P) * 0.031229);
  height: max(1px, calc(var(--P) * 0.0013));
  flex: none;
  background: var(--dir-burgundy);
  opacity: 0.5;
}

.dir-sep b{
  display: block;
  width: calc(var(--P) * 0.004554);
  height: calc(var(--P) * 0.004554);
  margin: 0 calc(var(--P) * 0.012052);
  background: var(--dir-burgundy);
  transform: rotate(45deg);
}

body.direccion .direccion-hero .desc,
body.direccion .direccion-hero .note{
  position: absolute;
  left: 0;
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: calc(var(--P) * 0.016938);
  line-height: 1.383;
  color: var(--dir-ink);
}

body.direccion .direccion-hero .desc{
  top: calc(var(--P) * 0.331122 - var(--lift));
  width: calc(var(--P) * 0.385);
}

body.direccion .direccion-hero .note{
  top: calc(var(--P) * 0.446282 - var(--lift));
  width: calc(var(--P) * 0.245);
}

.dir-monograma{
  position: absolute;
  top: calc(var(--P) * 0.510085 - var(--lift));
  left: calc(var(--P) * 0.029929);
  width: calc(var(--P) * 0.095641);
  height: auto;
  opacity: 1;
  pointer-events: none;
}

/* ---- Columna derecha: el formulario ---- */
/* Papelería institucional: doble filete, sin radios ni sombras. */

body.direccion .form-wrap{
  position: absolute;
  left: calc(var(--P) * 0.495771);
  top: calc(var(--P) * 0.074821 - var(--lift));
  width: calc(var(--P) * 0.462590);
  height: calc(var(--P) * 0.561483);
  padding: 0;
}

body.direccion .form-panel{
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  background: none;
  border: 1px solid var(--dir-rule);
  outline: 1px solid var(--dir-rule);
  outline-offset: calc(var(--P) * 0.004554);
  border-radius: 0;
  box-shadow: none;
  padding: calc(var(--P) * 0.033832);
  /* display:grid con .form-content y .confirm-content apiladas en la
     misma celda (grid-area:1/1, más abajo): el panel siempre mide lo
     que necesita el más alto de los dos, así el marco doble nunca
     cambia de tamaño al pasar de uno a otro — ni aquí ni en mobile,
     donde .form-panel es height:auto (puramente de contenido). */
  display: grid;
}

body.direccion .form-panel h2{
  margin: 0 0 calc(var(--P) * 0.041736);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  font-size: calc(var(--P) * 0.017436);
  letter-spacing: 0.0573em;
  line-height: 1;
  color: var(--dir-burgundy);
}

/* ---- Segundo estado: confirmación de envío ----------------------------
   .form-content y .confirm-content ocupan la MISMA celda de grid (se
   superponen); solo una es visible/interactiva a la vez, alternado por
   JS con dos clases. .form-content define siempre la altura del panel
   (es la más alta de las dos), así que el contenedor jamás cambia de
   tamaño al confirmarse el envío. */
body.direccion .form-content{
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 280ms ease, visibility 280ms;
}

body.direccion .form-content.is-sent{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.direccion .confirm-content{
  grid-area: 1 / 1;
  align-self: center;
  min-width: 0;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 450ms ease, visibility 450ms;
}

body.direccion .confirm-content.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.direccion .confirm-lead{
  margin: 0 0 calc(var(--P) * 0.014993);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--P) * 0.013949);
  line-height: 1.4;
  color: var(--dir-ink);
}

body.direccion .confirm-body{
  max-width: calc(var(--P) * 0.30);
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(var(--P) * 0.020000);
  line-height: 1.5;
  color: var(--dir-ink-deep);
}

body.direccion .confirm-body strong{
  font-weight: 600;
}

/* Firma: asset aprobado (assets/img/firma.png, recortada a su tinta real
   sin alterar el trazo). width fijo + margin-right fijo + margin-left:auto
   reparte el resto del ancho a la izquierda: la firma queda anclada a un
   margen cómodo del borde derecho, nunca centrada bajo el mensaje —
   proporciones tomadas de la referencia óptica aprobada (Captura.png). */
body.direccion .confirm-sign{
  display: block;
  width: 49%;
  height: auto;
  margin: calc(var(--P) * 0.040) 1% 0 auto;
  opacity: 0.78;
}

body.direccion .field-row{ display: block; }

body.direccion .field{ margin: 0 0 calc(var(--P) * 0.017373); }
body.direccion form > .field:last-of-type{ margin-bottom: 0; }

body.direccion .field label{
  display: block;
  margin: 0 0 calc(var(--P) * 0.010729);
  font-family: var(--font-body);
  font-size: calc(var(--P) * 0.010960);
  text-transform: uppercase;
  letter-spacing: 0.0910em;
  line-height: 1;
  color: var(--dir-ink);
}

body.direccion .field input,
body.direccion .field select,
body.direccion .field textarea{
  display: block;
  width: 100%;
  height: calc(var(--P) * 0.042290);
  background: var(--dir-fieldbg);
  border: 1px solid var(--dir-field);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: calc(var(--P) * 0.014945);
  color: var(--dir-ink);
  padding: 0 calc(var(--P) * 0.032) 0 calc(var(--P) * 0.0122);
  appearance: none;
  -webkit-appearance: none;
}

body.direccion .field textarea{
  height: calc(var(--P) * 0.089135);
  min-height: 0;
  padding: calc(var(--P) * 0.0112) calc(var(--P) * 0.0122);
  line-height: 1.383;
  font-style: normal;
  resize: vertical;
}

body.direccion .field select{ background-image: none; }

body.direccion .field .input-icon{ position: relative; }

body.direccion .field .input-icon svg{
  position: absolute;
  right: calc(var(--P) * 0.0117);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--P) * 0.0143);
  height: calc(var(--P) * 0.0143);
  stroke: var(--dir-ink);
  fill: none;
  pointer-events: none;
}

/* Galón del desplegable, dibujado en CSS sobre el propio campo. */
body.direccion .field:has(> select){ position: relative; }

body.direccion .field:has(> select)::after{
  content: "";
  position: absolute;
  right: calc(var(--P) * 0.0150);
  bottom: calc(var(--P) * 0.0182);
  width: calc(var(--P) * 0.0084);
  height: calc(var(--P) * 0.0084);
  border-right: 1px solid var(--dir-ink);
  border-bottom: 1px solid var(--dir-ink);
  transform: rotate(45deg);
  pointer-events: none;
}

body.direccion .field input:focus,
body.direccion .field select:focus,
body.direccion .field textarea:focus{
  outline: none;
  border-color: var(--dir-navy);
}

body.direccion .btn-submit{
  /* display:flex sólo para que el texto quede ópticamente centrado (el
     line-height "normal" del bloque dejaba 3px de más debajo del texto);
     ancho, alto, margen y demás quedan exactamente igual. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--P) * 0.272609);
  height: calc(var(--P) * 0.035134);
  margin: calc(var(--P) * 0.014964) auto 0;
  background: var(--dir-navy);
  border: none;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: calc(var(--P) * 0.013949);
  text-transform: uppercase;
  letter-spacing: 0.1287em;
  color: #f2ece2;
  cursor: pointer;
  transition: background 0.25s ease;
}

body.direccion .btn-submit:hover{ background: #0f1e30; }

body.direccion .confidentiality{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--P) * 0.0078);
  margin: calc(var(--P) * 0.017244) 0 0;
  font-family: var(--font-body);
  font-size: calc(var(--P) * 0.014945);
  line-height: 1;
  color: var(--dir-ink);
}

body.direccion .confidentiality svg{
  width: calc(var(--P) * 0.0156);
  height: calc(var(--P) * 0.0156);
  stroke: var(--dir-ink);
  fill: none;
  flex: none;
}

body.direccion .form-error{
  margin: calc(var(--P) * 0.010) 0 0;
  font-size: calc(var(--P) * 0.0125);
  color: var(--wine);
  text-align: center;
}

/* ============================================================
   DIRECCIÓN — MOBILE (≤767px)
   ------------------------------------------------------------
   Referencia visual maestra: Referencias/Dirección/
   direccion-mobile-reference.png — manda sobre proporciones,
   jerarquía, espaciado y tono; no es una réplica en píxeles.

   El diseño de escritorio (arriba) es un cartel de proporción fija
   con todo posicionado en absoluto sobre --P. Aquí se traduce a un
   documento vertical normal: cada elemento pasa a flujo natural
   (position:static) y sus medidas dejan de ser fracciones de --P
   para ser tamaños de tipografía/espaciado propios del móvil.
   Se reutilizan exactamente los mismos tokens de color
   (--dir-burgundy, --dir-ink, --dir-paper, --dir-rule, --dir-field,
   --dir-navy) y el mismo HTML del formulario — Web3Forms, access
   key, nombres de campo, opciones del selector y confirmación no
   se tocan, sólo cambia su presentación. Nada de esto entra en
   juego en desktop. */

@media (max-width: 767px){

  body.direccion .dir-page{
    width: 100%;
    height: auto;
    /* Margen lateral reducido (antes 18vw): en 390–393px ronda los
       28–32px pedidos; en 430px crece con naturalidad sin llegar a
       sentirse apretado. Solo cambia el lateral: arriba/abajo, igual
       que antes. */
    padding: clamp(3rem, 14vw, 4rem) clamp(1.5rem, 8vw, 2.5rem) clamp(2.5rem, 10vw, 3.5rem);
  }

  /* ---- Columna izquierda del cartel → columna única ---- */

  body.direccion .direccion-hero{
    position: static;
    width: 100%;
    max-width: none;
  }

  body.direccion .direccion-hero .numeral{
    position: static;
    display: block;
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
  }

  body.direccion .direccion-hero h1{
    position: static;
    font-size: clamp(2.2rem, 10.5vw, 3rem);
    letter-spacing: -0.01em;
    white-space: normal;
    margin: 0 0 0.85rem;
  }

  body.direccion .direccion-hero .lede{
    position: static;
    font-size: 0.82rem;
    letter-spacing: 0.11em;
    white-space: normal;
    margin: 0 0 1.3rem;
  }

  body.direccion .dir-sep{
    position: static;
    transform: none;
    margin: 0 0 1.6rem;
  }

  body.direccion .dir-sep i,
  body.direccion .dir-sep i:last-child{
    width: 1.5rem;
    height: 1px;
  }

  body.direccion .dir-sep b{
    width: 5px;
    height: 5px;
    margin: 0 0.65rem;
  }

  body.direccion .direccion-hero .desc,
  body.direccion .direccion-hero .note{
    position: static;
    width: 100%;
    max-width: 34rem;
    font-size: 1.02rem;
    line-height: 1.65;
  }

  body.direccion .direccion-hero .desc{
    margin: 0 0 1.3rem;
  }

  body.direccion .direccion-hero .note{
    margin: 0;
  }

  /* Monograma tenue, desplazado a la derecha (margin-left:auto en una
     columna que ya no tiene ancho fijo ni posición absoluta). Reducido
     ~27% (40vw/11rem → 29vw/8rem) respecto a la versión anterior; el
     margen que lo rodea se recorta un poco junto con él para que no
     quede un vacío de más antes del formulario, sin tocar su carácter
     tenue ni su asimetría. */
  body.direccion .dir-monograma{
    position: static;
    display: block;
    width: 29vw;
    max-width: 8rem;
    margin: 2rem 0 0 auto;
  }

  /* ---- Columna derecha del cartel → formulario, debajo ---- */

  body.direccion .form-wrap{
    position: static;
    width: 100%;
    height: auto;
    margin: 2.5rem 0 0;
  }

  body.direccion .form-panel{
    width: 100%;
    height: auto;
    outline-offset: 6px;
    /* Padding interior reducido (antes 6vw): menos espacio acumulado
       entre el marco y los campos, que ahora ganan ancho real. */
    padding: 2rem clamp(1rem, 4.5vw, 1.5rem);
  }

  body.direccion .form-panel h2{
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin: 0 0 1.75rem;
  }

  /* ---- Segundo estado: confirmación de envío (composición propia de
     mobile, no una reducción de la de escritorio — mismo mecanismo de
     apilado en grid, valores en rem en vez de fracciones de --P). ---- */
  body.direccion .confirm-lead{
    margin: 0 0 0.7rem;
    font-size: 0.92rem;
    line-height: 1.4;
  }

  body.direccion .confirm-body{
    max-width: 15.5rem;
    font-size: 1.08rem;
    line-height: 1.55;
  }

  /* Firma: mismo asset e idéntico principio (ancho fijo + margen derecho
     fijo + margin-left:auto), con proporciones propias de mobile: algo
     menos ancha y con un desplazamiento relativo menor que en desktop,
     acorde al ancho disponible. */
  body.direccion .confirm-sign{
    width: 40%;
    margin: 1.6rem 9% 0 auto;
  }

  /* .field-row ya es display:block de forma incondicional (ver arriba):
     Nombre y Correo ya se apilan verticalmente en cualquier ancho. */

  body.direccion .field{
    margin: 0 0 1.25rem;
  }

  body.direccion .field label{
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem;
  }

  body.direccion .field input,
  body.direccion .field select,
  body.direccion .field textarea{
    height: 3rem;
    font-size: 0.98rem;
    padding: 0 2.5rem 0 0.9rem;
  }

  body.direccion .field textarea{
    height: 7.5rem;
    padding: 0.8rem 0.9rem;
  }

  body.direccion .field .input-icon svg{
    right: 0.9rem;
    width: 17px;
    height: 17px;
  }

  body.direccion .field:has(> select)::after{
    right: 1.1rem;
    bottom: 1.35rem;
    width: 7px;
    height: 7px;
  }

  body.direccion .btn-submit{
    width: 100%;
    height: 3.1rem;
    margin: 0.6rem 0 0;
    font-size: 0.86rem;
  }

  body.direccion .confidentiality{
    margin: 1.1rem 0 0;
    font-size: 0.82rem;
    gap: 0.45rem;
  }

  body.direccion .confidentiality svg{
    width: 15px;
    height: 15px;
  }

  body.direccion .form-error{
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
  }
}