/* ============================================================
   NEIBOR / Seis Casas  ·  Villa Allende Golf, Córdoba
   Sistema visual derivado del Brandbook V.26
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Croma de marca (Brandbook 03 / Códigos) */
  --tinta:   #131e10;   /* SW 6209 Ripe Olive      */
  --verde:   #26332d;   /* SW 6433 Inverness       */
  --salvia:  #c3c5bb;   /* SW 9119 Dirty Martini   */
  --papel:   #eef4ed;   /* SW 9166 Drift of Mist   */
  --tierra:  #af5d00;   /* SW 6635 Determined Orange */

  /* Derivados de trabajo */
  --verde-alto: #1b241f;
  --papel-2:    #e3e9e1;
  --linea-clara: rgba(19,30,16,.14);
  --linea-oscura: rgba(238,244,237,.16);
  --texto-sobre-claro: rgba(19,30,16,.66);
  --texto-sobre-oscuro: rgba(238,244,237,.64);
  --tierra-texto: #8f4c00;

  /* Geometría de marca: el módulo del isotipo corta a 30° */
  --angulo: 30deg;
  --radio: 2px;

  /* Ritmo */
  --gutter: clamp(20px, 4.6vw, 72px);
  --ancho: 1560px;
  --bloque: clamp(72px, 11vh, 150px);

  /* Tipografía */
  --sans: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-display: clamp(2.9rem, 8.4vw, 8.2rem);
  --t-titulo:  clamp(1.95rem, 5vw, 4.6rem);
  --t-sub:     clamp(1.35rem, 2.5vw, 2.3rem);
  --t-dato:    clamp(3.2rem, 10vw, 8rem);
  --t-cuerpo:  clamp(1rem, .55vw + .88rem, 1.15rem);
  --t-rotulo:  .6875rem;

  --easing: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--t-cuerpo);
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--tierra); color:var(--papel); }

/* ---------- 2. Utilidades de estructura ---------- */
/* Encabezado que sostiene el esquema del documento sin entrar en la
   composición: lo anuncia el lector de pantalla, no se ve. */
.titulo-oculto{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.envoltura{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--gutter); }
.seccion{ position:relative; padding-block:var(--bloque); }
.seccion--oscura{ background:var(--verde); color:var(--papel); }
.seccion--tinta{ background:var(--tinta); color:var(--papel); }
.seccion--clara{ background:var(--papel); color:var(--tinta); }
.seccion--salvia{ background:var(--salvia); color:var(--tinta); }

/* Rótulo vertical en el borde: recurso del feed de marca */
.rotulo-vertical{
  position:absolute; top:var(--bloque); right:calc(var(--gutter) * .35);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:clamp(2.6rem, 5.4vw, 5.6rem); font-weight:300;
  letter-spacing:-.02em; line-height:1;
  color:currentColor; opacity:.11; pointer-events:none; user-select:none;
}
@media (max-width: 900px){ .rotulo-vertical{ display:none; } }

.corchete{
  font-size:var(--t-rotulo); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.corchete::before{ content:"[ "; opacity:.45; }
.corchete::after{ content:" ]"; opacity:.45; }

.titulo{
  font-size:var(--t-titulo); font-weight:500; line-height:.99;
  letter-spacing:-.032em; margin:0; max-width:17ch; text-wrap:balance;
}
.titulo--ancho{ max-width:24ch; }
.titulo em{ font-style:normal; color:var(--tierra); }
.seccion--oscura .titulo em,.seccion--tinta .titulo em{ color:var(--salvia); }

.parrafo{ max-width:56ch; color:var(--texto-sobre-claro); margin:1.5em 0 0; }
.seccion--oscura .parrafo,.seccion--tinta .parrafo{ color:var(--texto-sobre-oscuro); }
.parrafo b, .parrafo strong{ color:inherit; font-weight:600; opacity:1; }
.seccion--oscura .parrafo b{ color:var(--papel); }

.nota{
  font-size:.78rem; line-height:1.5; letter-spacing:.01em;
  color:var(--texto-sobre-claro); opacity:.75; max-width:60ch;
}
.seccion--oscura .nota,.seccion--tinta .nota{ color:var(--texto-sobre-oscuro); }

/* Marca de dato pendiente: visible a propósito, fácil de encontrar y quitar */
.pendiente{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tierra-texto); border:1px solid currentColor;
  padding:.32em .7em; border-radius:10px; vertical-align:middle; line-height:1.45;
}
.seccion--oscura .pendiente,.seccion--tinta .pendiente{ color:#d79a52; }
/* Sobre salvia el naranja de texto da 3,76:1 y no llega al mínimo.
   Un paso más oscuro del mismo tono da 4,65 y sí. */
.seccion--salvia .pendiente{ color:#7a4100; }

/* ---------- 3. Figuras con el corte de marca (30°) ---------- */
.fig{ position:relative; overflow:hidden; background:var(--salvia); border-radius:var(--radio); }
.fig img{ width:100%; height:100%; object-fit:cover; }
.fig--16x9{ aspect-ratio:16/9; }
.fig--3x2 { aspect-ratio:3/2; }
.fig--4x3 { aspect-ratio:4/3; }
.fig--4x5 { aspect-ratio:4/5; }
.fig--1x1 { aspect-ratio:1/1; }

/* El corte usa siempre el mismo ángulo del isotipo (30° sobre la horizontal).
   El porcentaje vertical se calcula por relación de aspecto para no deformarlo. */
.corte-td.fig--16x9{ clip-path:polygon(0 0, 100% 0, 100% 82.3%, 0 100%); }   /* 10% ancho -> 10*.5774*1.778 */
.corte-ti.fig--16x9{ clip-path:polygon(0 17.7%, 100% 0, 100% 100%, 0 100%); }
.corte-td.fig--3x2 { clip-path:polygon(0 0, 100% 0, 100% 82.7%, 0 100%); }
.corte-ti.fig--3x2 { clip-path:polygon(0 17.3%, 100% 0, 100% 100%, 0 100%); }
.corte-ti.fig--4x3 { clip-path:polygon(0 15.4%, 100% 0, 100% 100%, 0 100%); }
.corte-td.fig--4x3 { clip-path:polygon(0 0, 100% 0, 100% 84.6%, 0 100%); }
.corte-ti.fig--4x5 { clip-path:polygon(0 9.2%, 100% 0, 100% 100%, 0 100%); }
.corte-ti.fig--1x1 { clip-path:polygon(0 11.5%, 100% 0, 100% 100%, 0 100%); }

.fig figcaption{
  position:absolute; left:clamp(.7rem,1.4vw,1.1rem); bottom:clamp(.7rem,1.4vw,1.1rem);
  padding:.5em .85em; border-radius:999px;
  background:rgba(19,30,16,.74); backdrop-filter:blur(6px);
  font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color:var(--papel);
}

/* ---------- 4. Botones: exactamente dos niveles ---------- */
.btn{
  --fondo:var(--tinta); --tinte:var(--papel);
  display:inline-flex; align-items:center; gap:.7em;
  padding:1.02em 1.6em; border:1px solid transparent; border-radius:999px;
  background:var(--fondo); color:var(--tinte);
  font-size:.9rem; font-weight:600; letter-spacing:.01em; text-decoration:none;
  cursor:pointer; transition:transform .45s var(--easing), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }
/* La medida de la flecha estaba sólo dentro de .btn, así que en el enlace
   al mapa el SVG no tenía con qué dimensionarse y se comía el renglón. */
.flecha{ width:.85em; height:.85em; flex:none; transition:transform .45s var(--easing); }
.btn:hover .flecha,.mapa-enlace:hover .flecha{ transform:translate(3px,-3px); }

.btn--fantasma{ --fondo:transparent; --tinte:currentColor; border-color:currentColor; opacity:.85; }
.btn--fantasma:hover{ opacity:1; }
.seccion--oscura .btn,.seccion--tinta .btn,.hero .btn{ --fondo:var(--papel); --tinte:var(--tinta); }
.seccion--oscura .btn--fantasma,.seccion--tinta .btn--fantasma,.hero .btn--fantasma{ --fondo:transparent; --tinte:var(--papel); }

/* Mismo botón, medida de fila de tabla. */
.btn--chico{ padding:.6em 1.15em; font-size:.82rem; gap:.55em; letter-spacing:.02em; }

/* Acento de marca para abrir material. El naranja del brandbook con texto
   blanco da 4.79:1, por encima del mínimo AA; con el papel de marca daría
   4.28 y no llegaría, que es por lo que el relleno lleva blanco puro. */
.btn--acento,
.seccion--oscura .btn--acento,
.seccion--tinta .btn--acento,
.hero .btn--acento{ --fondo:var(--tierra); --tinte:#fff; border-color:var(--tierra); }
.btn--acento:hover{ --fondo:#9c5300; border-color:#9c5300; }
.btn--acento:focus-visible{ outline-color:var(--tinta); }

.acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem; }

/* ---------- 5. Cabecera ---------- */
.cabecera{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem var(--gutter);
  color:var(--papel);
  transition:background .5s var(--easing), padding .5s var(--easing), color .4s, backdrop-filter .5s;
}
.cabecera::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(to bottom, rgba(19,30,16,.94), rgba(19,30,16,.88));
  backdrop-filter:saturate(1.2) blur(10px); transition:opacity .5s var(--easing);
}
.cabecera.pegada{ padding-block:.7rem; }
.cabecera.pegada::after{ opacity:1; }
.cabecera__logo img{ height:clamp(26px,2.4vw,34px); width:auto; transition:height .5s var(--easing); }
.cabecera.pegada .cabecera__logo img{ height:26px; }

.menu{ display:flex; gap:clamp(1rem,2.2vw,2.4rem); list-style:none; margin:0; padding:0; }
.menu a{
  text-decoration:none; font-size:.8rem; font-weight:500; letter-spacing:.04em;
  opacity:.78; position:relative; padding-block:.3rem; transition:opacity .3s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--tierra); transition:right .5s var(--easing);
}
.menu a:hover{ opacity:1; }
.menu a:hover::after{ right:0; }
.menu li:nth-child(n+4){ display:none; }
@media (min-width:1120px){ .menu li:nth-child(n+4){ display:block; } }
@media (max-width:860px){ .menu{ display:none; } }

.cabecera__cta{ display:flex; align-items:center; gap:.6rem; }
.cabecera .btn{ padding:.72em 1.15em; font-size:.8rem; }
@media (max-width:520px){ .cabecera__cta .btn--fantasma{ display:none; } }

/* ---------- 6. Hero ---------- */
.hero{ position:relative; background:var(--tinta); color:var(--papel); }
/* La foto se estira con inset y no con height:100%, que necesita que el
   padre tenga una altura ya resuelta. Si no la tiene, la imagen carga bien
   y se dibuja con cero de alto: la peor falla posible, porque no parece
   una falla. */
.hero__media{ position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; }
.hero__media picture{ position:absolute; inset:0; display:block; }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%;
  min-height:560px; object-fit:cover; transform:scale(1.07); }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(19,30,16,.55) 0%, rgba(19,30,16,0) 34%, rgba(19,30,16,0) 55%, rgba(19,30,16,.72) 100%),
    linear-gradient(to right, rgba(19,30,16,.42), rgba(19,30,16,0) 58%);
}
.hero__capa{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(84px,11vh,132px) var(--gutter) clamp(30px,5vh,56px);
}
.hero__meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  font-size:var(--t-rotulo); letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  opacity:.82;
}
.hero__meta span+span{ opacity:.7; }

/* Titular partido en dos frases: recurso tipográfico del brandbook */
.hero__fila{ display:grid; align-items:center; }

.hero__pie{
  position:relative; z-index:3; background:var(--tinta);
  padding:clamp(1.5rem,2.4vw,2rem) var(--gutter) clamp(1.5rem,2.2vw,1.9rem);
}

/* La banda de datos del predio.
   Los íconos de acá son marcas de medida (perímetro, lote, planta) y no
   objetos como los de amenidades: son dos familias distintas a propósito,
   para que la banda no se lea como una repetición de aquella grilla.
   La cifra manda, el rótulo la nombra y el pie sólo aparece donde el
   dato necesita explicarse. */
.datos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:clamp(1rem,2vw,2rem); row-gap:clamp(1.6rem,3vw,2.4rem);
}
.datos > li{ border-left:1px solid var(--linea-oscura); padding-left:clamp(.9rem,1.8vw,1.7rem); }
.datos > li:nth-child(5n+1){ border-left:0; padding-left:0; }

.dato__n{
  display:flex; align-items:baseline; margin:0;
  font-size:clamp(1.35rem,2.2vw,2.05rem); font-weight:300; line-height:1; letter-spacing:-.042em;
}
.dato__ico{
  width:1.45rem; height:1.45rem; stroke-width:1.1;
  color:var(--salvia); opacity:.8; align-self:center; margin-right:.6rem;
}
.dato__u{ font-size:.46em; font-weight:500; letter-spacing:.02em; margin-left:.3em; opacity:.62; }
.dato__t{
  margin:.6rem 0 0; font-size:var(--t-rotulo); letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; opacity:.6; line-height:1.4;
}
.dato__d{ margin:.55rem 0 0; font-size:.8rem; line-height:1.5; opacity:.72; }

@media (max-width:1080px){
  .datos{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .datos > li:nth-child(5n+1){ border-left:1px solid var(--linea-oscura); padding-left:clamp(.9rem,1.8vw,1.7rem); }
  .datos > li:nth-child(3n+1){ border-left:0; padding-left:0; }
}
/* En el teléfono la banda se vuelve lista: el ícono y la cifra a la
   izquierda, el texto a la derecha, separados por una línea cada uno. */
@media (max-width:720px){
  .datos{ grid-template-columns:1fr; column-gap:0; row-gap:0; }
  .datos > li,
  .datos > li:nth-child(5n+1),
  .datos > li:nth-child(3n+1){
    border-left:0; padding-left:0;
    border-top:1px solid var(--linea-oscura); padding-top:1rem; padding-bottom:1rem;
  }
  .datos > li:first-child{ border-top:0; padding-top:0; }
  .datos > li:last-child{ padding-bottom:0; }
  .dato__n{ font-size:1.5rem; }
  .dato__ico{ width:1.5rem; height:1.5rem; }
  .dato__t{ margin-top:.45rem; }
  .dato__d{ margin-top:.45rem; max-width:40ch; }
}

.desplazar{
  position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(22px,3.4vh,40px); z-index:3;
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:var(--t-rotulo); letter-spacing:.2em; text-transform:uppercase; opacity:.6;
}
.desplazar i{ display:block; width:1px; height:34px; background:currentColor; transform-origin:top; animation:caer 2.4s var(--easing) infinite; }
@keyframes caer{ 0%{transform:scaleY(0);}45%{transform:scaleY(1);}100%{transform:scaleY(0); transform-origin:bottom;} }
@media (max-width:860px){ .desplazar{ display:none; } }

/* ---------- 7. Las seis casas ---------- */

/* La aérea es apaisada y es lo que vende: se lleva el ancho que sobra. La
   ficha se achica hasta donde entra su línea más larga ("Orientación del
   fondo" contra "3, uno en suite con vestidor"), así el dato queda al lado
   del rótulo y no al otro lado de la página. */
.seis{ display:grid; grid-template-columns:minmax(0,1fr) clamp(320px,34%,520px);
  gap:clamp(1.6rem,3.2vw,3rem); align-items:start; }
@media (max-width:1000px){ .seis{ grid-template-columns:1fr; } }
/* Esta sección no respira: va pegada a la de arriba y a la de abajo, para que
   se lean como una sola tirada. Se redefine el token en vez de pisar el
   padding, así el rótulo vertical "Seis", que se cuelga de él, acompaña sin
   tocar nada más. */
#seis{ --bloque: clamp(20px, 3vh, 40px); }

/* Y la aérea se sale del canal izquierdo hasta el borde de la pantalla. No hace
   falta ningún cálculo con 100vw, que además se pelea con la barra de
   desplazamiento: alcanza con sacarle a esta envoltura el tope de ancho y el
   relleno de ese lado, y el primer elemento de la grilla queda pegado al borde.
   Abajo de 1000 la grilla pasa a una columna y el texto quedaría contra el
   borde, así que ahí el canal vuelve. */
#seis > .envoltura{ max-width:none; padding-left:0; }
#seis .implantacion,
#seis .implantacion img{ border-radius:0 var(--radio) var(--radio) 0; }
@media (max-width:1000px){
  #seis > .envoltura{ padding-left:var(--gutter); }
  #seis .implantacion,
  #seis .implantacion img{ border-radius:var(--radio); }
}

/* Las letras van arriba de todo, afuera de la ficha: el filete grueso de la
   ficha arranca abajo de ellas, y de paso quedan fuera del aria-live, que no
   tiene por qué anunciar el cambio de estado de seis botones. */
.seis__col{ min-width:0; }
.seis__col .selector{ margin:0 0 1.2rem; }
/* Los dos botones van debajo de la tabla y dentro de su columna, que es lo que
   accionan. Reparten el ancho a partes iguales; donde los dos no entran en un
   renglón, cada uno toma la columna entera. */
.seis__acciones{ grid-column:2; justify-content:stretch; gap:.5rem;
  margin-top:clamp(1rem,2vw,1.6rem); }
/* Van los dos en un renglón, repartiendo el ancho de la tabla. A cuerpo entero
   suman 500 px y la columna da 448 a 1440 de ventana: se pisaban y caían uno
   abajo del otro. Bajarles el cuerpo es más barato que robarle ancho a la
   aérea, que es lo que vende. */
.seis__acciones .btn{ flex:1 1 auto; justify-content:center;
  font-size:.78rem; padding-inline:1.25em; }
@media (max-width:1000px){ .seis__acciones{ grid-column:1; } }

.implantacion{ position:relative; border-radius:var(--radio); overflow:hidden; background:var(--papel-2); }
.implantacion img{ display:block; width:100%; height:auto; border-radius:var(--radio); }
.chincheta{
  position:absolute; transform:translate(-50%,-50%);
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  background:rgba(238,244,237,.9); color:var(--tinta); border:1px solid rgba(19,30,16,.18);
  font-size:.74rem; font-weight:700; letter-spacing:.02em; cursor:pointer;
  transition:transform .4s var(--easing), background .3s, color .3s, box-shadow .3s;
  box-shadow:0 3px 16px rgba(19,30,16,.22);
}
.chincheta:hover{ transform:translate(-50%,-50%) scale(1.1);
  background:var(--tierra); color:#fff; border-color:var(--tierra); }
.chincheta[aria-pressed="true"]{ background:var(--tierra); color:var(--papel); border-color:var(--tierra); box-shadow:0 0 0 8px rgba(175,93,0,.18); }
.chincheta:focus-visible{ outline:2px solid var(--tierra); outline-offset:4px; }
@media (max-width:620px){
  .chincheta{ width:30px; height:30px; font-size:.66rem; }
  /* Abren una ventana: el área táctil crece sin que cambie el dibujo.
     No pasa de 4 px porque las casas quedan a 40 px una de otra sobre el
     plano y dos áreas superpuestas mandarían al vecino equivocado. */
  .chincheta::after{ content:""; position:absolute; inset:-4px; border-radius:999px; }
}

.ficha{ border-top:2px solid var(--tinta); padding-top:1.4rem; }
.ficha__enc{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.ficha__enc h3{ font-size:clamp(2rem,4vw,3.1rem); font-weight:500; letter-spacing:-.035em; margin:0; line-height:1; }
.ficha__estado{ font-size:var(--t-rotulo); letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--tierra-texto); }
.ficha dl{ margin:1.6rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.05rem 1.2rem; }
.ficha dt{ font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase; font-weight:600; opacity:.5; padding-block:.85rem; border-top:1px solid var(--linea-clara); }
.ficha dd{ margin:0; padding-block:.85rem; border-top:1px solid var(--linea-clara); text-align:right; font-weight:500; }
.ficha dt:first-of-type,.ficha dd:first-of-type{ border-top:0; }
.ficha dd:has(.btn){ padding-block:.5rem; }
.ficha dt:has(+ dd .btn){ padding-block:.5rem; }
.selector{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.6rem; }
.selector button{
  border:1px solid var(--linea-clara); background:transparent; border-radius:999px;
  padding:.6em 1.05em; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .3s var(--easing);
}
.selector button[aria-pressed="true"]{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.selector button:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }

/* Dos secciones claras seguidas no se distinguen entre sí. El filete dice
   dónde termina una y empieza la otra sin tocar el fondo. */
.seccion--corte{ border-top:1px solid var(--linea-clara); }
.seccion--oscura.seccion--corte,.seccion--tinta.seccion--corte{ border-color:var(--linea-oscura); }

/* ---------- 8. Ubicación ---------- */
.ubic{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,1.8rem); margin-top:clamp(2.4rem,5vw,4rem); }
/* La aérea pasa a ser lo que manda: se queda con dos tercios del ancho y la
   lista de referencias se achica hasta donde entra su renglón más largo
   ("Centro de Villa Allende" contra "5 min"). */
.ubic__a{ grid-column:1/5; }
.ubic__b{ grid-column:5/13; display:grid; gap:clamp(1rem,2vw,1.8rem); align-content:start; }
@media (max-width:900px){ .ubic__a,.ubic__b{ grid-column:1/-1; } }
.refs{ list-style:none; margin:1.6rem 0 0; padding:0; }
.refs li{ display:flex; justify-content:space-between; gap:1rem; padding:.72rem 0; border-top:1px solid var(--linea-clara); align-items:baseline; }
.refs__t{ font-size:clamp(1.3rem,2.3vw,2.05rem); font-weight:300; letter-spacing:-.04em;
  line-height:1; text-align:right; white-space:nowrap; }
.refs__u{ font-size:.5em; font-weight:500; letter-spacing:.04em; margin-left:.34em; opacity:.55; }

/* ---------- 10. Contacto ---------- */
.contacto{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,5rem); align-items:start; margin-top:clamp(2.4rem,5vw,4rem); }
@media (max-width:900px){ .contacto{ grid-template-columns:1fr; } }
.campo{ display:block; margin-bottom:1.1rem; }
.campo span{ display:block; font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase; font-weight:600; opacity:.55; margin-bottom:.55rem; }
.campo input,.campo textarea,.campo select{
  width:100%; font:inherit; font-size:1rem; color:inherit; background:transparent;
  border:0; border-bottom:1px solid var(--linea-oscura); padding:.75rem 0; border-radius:0;
  transition:border-color .3s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{ outline:0; border-color:var(--tierra); }
.campo textarea{ resize:vertical; min-height:82px; }
.campo select option{ color:var(--tinta); }
.intencion{ display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 1.8rem; }
.intencion input{ position:absolute; opacity:0; pointer-events:none; }
.intencion label{ border:1px solid var(--linea-oscura); border-radius:999px; padding:.6em 1.05em; font-size:.84rem; cursor:pointer; transition:all .3s var(--easing); }
.intencion input:checked + label{ background:var(--papel); color:var(--tinta); border-color:var(--papel); }
.intencion input:focus-visible + label{ outline:2px solid var(--tierra); outline-offset:3px; }
/* Los dos telefonos comerciales, cada uno con su boton de WhatsApp. El
   nombre y el numero van en la primera columna, el boton en la segunda, de
   modo que las dos filas queden alineadas entre si. */
.comercial{ list-style:none; margin:2.2rem 0 0; padding:0; }
.comercial li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 1.4rem;
  align-items:center; padding:1.25rem 0; border-top:1px solid var(--linea-oscura);
}
.comercial small{
  grid-column:1; display:block; font-size:var(--t-rotulo); letter-spacing:.16em;
  text-transform:uppercase; opacity:.5; margin-bottom:.45rem; font-weight:600;
}
.comercial__tel{
  grid-column:1; text-decoration:none; font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.1rem,1.9vw,1.4rem); font-variant-numeric:tabular-nums;
}
.comercial .btn{ grid-column:2; grid-row:1/3; }
@media (max-width:560px){
  .comercial li{ grid-template-columns:1fr; }
  .comercial .btn{ grid-column:1; grid-row:auto; margin-top:.9rem; justify-content:center; }
}
.contacto .datos-directos{ margin-top:0; }

.datos-directos{ list-style:none; margin:2rem 0 0; padding:0; }
.datos-directos li{ padding:1.1rem 0; border-top:1px solid var(--linea-oscura); }
.datos-directos a{ text-decoration:none; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:500; letter-spacing:-.02em; }
.datos-directos small{ display:block; font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase; opacity:.5; margin-bottom:.5rem; font-weight:600; }

/* ---------- 11. Pie ---------- */
.pie{ background:var(--tinta); color:var(--papel); padding:clamp(3rem,6vw,5rem) 0 clamp(3.2rem,6.4vw,5.4rem); }
.pie__top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-end; padding-bottom:2.4rem; border-bottom:1px solid var(--linea-oscura); }
.pie__logo img{ height:clamp(34px,4vw,54px); }
.pie__bajo{ display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.76rem; opacity:.55; letter-spacing:.02em; }

/* ---------- 12. Animaciones de entrada ---------- */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--easing), transform .9s var(--easing); }
.rev.en{ opacity:1; transform:none; }
.rev-d1{ transition-delay:.09s; } .rev-d2{ transition-delay:.18s; } .rev-d3{ transition-delay:.27s; } .rev-d4{ transition-delay:.36s; }
.rev-izq{ opacity:0; transform:translateX(-34px); }
.rev-der{ opacity:0; transform:translateX(34px); }
.rev-izq.en,.rev-der.en{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .rev,.rev-izq,.rev-der{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero__media img{ transform:none; }
  .desplazar i{ animation:none; }
  .btn:hover{ transform:none; }
}

/* ---------- 13. Ventana de la ficha técnica ----------
   Repite la arista del isotipo: la esquina superior izquierda baja a 30
   grados. */
.modal{
  --corte: clamp(56px,9vw,118px);
  --caida: calc(var(--corte) * .5774);
  width:min(1120px, calc(100vw - 2 * var(--gutter)));
  max-width:calc(100vw - 2 * var(--gutter));
  max-height:min(880px, 88vh); max-height:min(880px, 88svh);
  padding:0; border:0; margin:auto;
  background:var(--papel); color:var(--tinta);
  clip-path:polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%, 0 var(--caida));
  overflow:hidden; flex-direction:column;
}
.modal[open]{ display:flex; }
.modal::backdrop{ background:rgba(19,30,16,.8); }

.modal__enc{
  position:relative; flex:none;
  padding:calc(var(--caida) + clamp(1rem,2vw,1.6rem)) clamp(1.4rem,3vw,2.6rem) clamp(1.1rem,2vw,1.6rem);
  border-bottom:1px solid var(--linea-clara);
}
.modal__enc .corchete{ display:block; opacity:.6; }
.modal__titulo{
  font-size:clamp(1.45rem,3vw,2.3rem); font-weight:500; line-height:1.02;
  letter-spacing:-.032em; margin:.7rem 0 0; max-width:22ch;
}
.modal__cerrar{
  position:absolute; top:clamp(.9rem,1.8vw,1.4rem); right:clamp(.9rem,1.8vw,1.4rem);
  width:44px; height:44px; flex:none; cursor:pointer;
  border:1px solid var(--linea-clara); border-radius:999px; background:none;
  display:grid; place-items:center;
  transition:background .3s var(--easing), border-color .3s var(--easing);
}
.modal__cerrar:hover{ background:var(--tinta); border-color:var(--tinta); color:var(--papel); }
.modal__cerrar:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }
.equis{ width:15px; height:15px; position:relative; }
.equis::before,.equis::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:currentColor; }
.equis::before{ transform:rotate(45deg); }
.equis::after{ transform:rotate(-45deg); }

.modal__cuerpo{
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem) clamp(1.8rem,3.4vw,2.8rem);
}

/* Ventana de planos: el visor queda pegado y la tira pasa al lado */
.modal--planos{ width:min(1340px, calc(100vw - 2 * var(--gutter))); }
/* El titular entra en un renglón y le deja altura al visor */
.modal--planos .modal__titulo{ max-width:40ch; }
.modal--planos .modal__enc{ padding-bottom:clamp(.9rem,1.6vw,1.2rem); }
.planos{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.4rem,2.8vw,2.6rem); align-items:start; }

.planos__visor{ position:sticky; top:0; }
.planos__marco{
  appearance:none; -webkit-appearance:none; display:block; width:100%; padding:0;
  margin:0; height:clamp(240px,44vh,500px); height:clamp(240px,44svh,500px); background:#fff; overflow:hidden;
  border:1px solid var(--linea-clara); cursor:zoom-in;
}
.planos__marco:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }
.planos__marco img{ width:100%; height:100%; object-fit:contain; display:block; }
.planos__pie{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-top:.9rem;
  font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.planos__pie span{ opacity:.55; }
.planos__pie a,
.planos__pie button{ text-decoration:underline; text-underline-offset:.2em; }
.planos__pie button{
  appearance:none; -webkit-appearance:none; border:0; background:none; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:zoom-in;
}
.planos__pie button:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }
.planos__datos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;
  margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--linea-clara);
}
.planos__datos dt{ font-size:var(--t-rotulo); letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; opacity:.5; }
.planos__datos dd{ margin:.35rem 0 0; font-size:clamp(1rem,1.6vw,1.25rem);
  font-weight:400; letter-spacing:-.025em; }

.planos__tira{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,1.6vw,1.3rem); }
.planos__tira .nota{ grid-column:1/-1; margin:0 0 .3rem; }

.mini{
  appearance:none; -webkit-appearance:none; border:0; background:none; padding:0;
  cursor:pointer; text-align:left; display:block;
}
.mini__marco{
  display:block; aspect-ratio:3/2; overflow:hidden; background:#fff;
  border:1px solid var(--linea-clara); transition:border-color .3s var(--easing);
}
.mini__marco img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.1s var(--easing); }
.mini__pie{ display:block; margin-top:.6rem; font-size:var(--t-rotulo);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.55;
  transition:opacity .3s var(--easing); }
.mini:hover .mini__marco img{ transform:scale(1.05); }
.mini:hover .mini__pie{ opacity:1; }
.mini[aria-current="true"] .mini__marco{ border-color:var(--tinta); border-width:2px; }
.mini[aria-current="true"] .mini__pie{ opacity:1; }
.mini:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }
/* Los planos son dibujos de línea: se ven enteros, no recortados */
.mini--plano .mini__marco img{ object-fit:contain; }

@media (max-width:900px){
  .planos{ grid-template-columns:1fr; }
  .planos__visor{ position:static; }
  .planos__marco{ height:clamp(220px,38vh,420px); height:clamp(220px,38svh,420px); }
}
@media (max-width:480px){
  .planos__datos{ grid-template-columns:1fr 1fr; gap:.9rem 1rem; }
}
@media (prefers-reduced-motion: no-preference){
  .modal[open]{ animation:modal-entra .4s var(--easing); }
  .modal[open]::backdrop{ animation:modal-velo .4s var(--easing); }
}
@keyframes modal-entra{ from{ opacity:0; transform:translateY(16px); } }
@keyframes modal-velo{ from{ opacity:0; } }

@media (max-width:640px){
  /* Hoja a pantalla completa: se fija al borde, sin dejar que el
     margen automático del navegador la corra. */
  .modal{ --corte:clamp(48px,14vw,90px);
    width:100vw; max-width:100vw; height:100vh; height:100svh; max-height:100vh; max-height:100svh;
    inset:0; margin:0; }
  .modal__cerrar{ width:40px; height:40px; }
}

/* ---------- 14. Ajustes finos por tamaño ---------- */
@media (max-width:430px){
  :root{ --t-display:2.45rem; --t-titulo:1.75rem; }
  .ficha dl{ grid-template-columns:1fr; gap:0; }
  .ficha dt{ border-top:1px solid var(--linea-clara); padding-bottom:.15rem; }
  .ficha dd{ border-top:0; text-align:left; padding-top:.1rem; padding-bottom:.9rem; }
}
@media (max-width:900px){
  .rotulo-vertical{ display:none; }
  /* En pantallas chicas el desplazamiento lateral de entrada se cambia por vertical
     para que ningún bloque asome fuera del ancho de la pantalla. */
  .rev-izq,.rev-der{ transform:translateY(22px); }
}

/* ============================================================
   21. Incorporaciones del mock up v1
   ============================================================ */

/* Hero: la imagen manda, el titular acompaña */
.hero__titular{
  grid-row:3; grid-column:1; align-self:end; justify-self:start;
  font-size:clamp(1.55rem,3.4vw,3.1rem); font-weight:400; line-height:1.06;
  letter-spacing:-.028em; margin:0; max-width:18ch;
}
.hero__titular b{ font-weight:600; }
.hero__apunte{
  grid-row:3; grid-column:1; align-self:end; justify-self:end; text-align:right; margin:0;
  font-size:var(--t-rotulo); letter-spacing:.2em; text-transform:uppercase; font-weight:600; opacity:.7;
}
@media (max-width:860px){
  .hero__apunte{ display:none; }
  .hero__titular{ max-width:14ch; }
}

/* Íconos de línea */
.ico{ width:1.9rem; height:1.9rem; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.ico--sm{ width:1.45rem; height:1.45rem; }

/* 16. Enlace al mapa */
.mapa-enlace{ display:inline-flex; align-items:center; gap:.7rem; margin-top:clamp(2rem,4vw,3rem);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:.3rem;
  font-size:.95rem; font-weight:500; transition:gap .4s var(--easing); }
.mapa-enlace:hover{ gap:1.1rem; }

/* 17. Atributos principales: cuatro columnas sobre fondo claro */
.amenidades{ text-align:center; }
.titulo--centro{ max-width:24ch; margin-inline:auto; margin-top:0; }

/* Cuatro columnas iguales. Lo único que se mueve entre tamaños es el gap y
   la cantidad de columnas: ni el ícono ni el texto cambian de medida. */
.amen{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none; margin:clamp(3rem,6vw,5rem) 0 0; padding:0;
  gap:clamp(2.6rem,4.4vw,4rem) clamp(1.4rem,2.4vw,2.6rem);
}
/* Son diez atributos, así que la tercera fila queda con dos. Se corren a
   las columnas del medio para que la fila cierre centrada y no pegada a
   la izquierda. */
.amen > li:nth-child(9){ grid-column:2; }
.amen > li:nth-child(10){ grid-column:3; }
.amen__ico{
  width:clamp(2.3rem,3vw,2.8rem); height:clamp(2.3rem,3vw,2.8rem);
  stroke-width:1.15; color:var(--tinta); margin:0 auto 1.25rem; display:block;
}
.amen h3{
  font-size:.86rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  margin:0; line-height:1.35;
}
.amen p{ margin:.75rem auto 0; font-size:.92rem; line-height:1.5; max-width:27ch;
  color:var(--texto-sobre-claro); }

/* La misma grilla, pero sin bajada: estos atributos son etiquetas y no
   conceptos que haya que explicar. Sin el párrafo debajo la fila pide menos
   aire, y el título pide una medida donde cortar, que antes se la daba el
   párrafo. */
.amen--solo{ row-gap:clamp(2.2rem,3.4vw,3rem); }
.amen--solo h3{ max-width:26ch; margin-inline:auto; }

.seccion--oscura .amen__ico,.seccion--tinta .amen__ico{ color:var(--salvia); }
.seccion--oscura .amen p,.seccion--tinta .amen p{ color:var(--texto-sobre-oscuro); }

@media (max-width:1100px){
  .amen{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  /* Con tres columnas los nueve primeros llenan tres filas y el décimo
     queda solo: va al medio. */
  .amen > li:nth-child(9){ grid-column:auto; }
  .amen > li:nth-child(10){ grid-column:2; }
}
@media (max-width:760px){
  .amen{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .amen > li:nth-child(9),
  .amen > li:nth-child(10){ grid-column:auto; }
}
@media (max-width:560px){
  .amen{ grid-template-columns:1fr; gap:2.2rem; }
  .amen p{ max-width:30ch; }
}

/* Desplegable de ficha técnica */
.ficha-tecnica__cuerpo{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(1.6rem,3vw,2.6rem); }
.ficha-tecnica__cuerpo h4{ font-size:var(--t-rotulo); letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; margin:0 0 .7rem; opacity:.55; }
.ficha-tecnica__cuerpo p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--texto-sobre-claro); }

/* 18. Galería a pantalla completa
   Cada render ocupa una pantalla entera, como el hero. Se pasa solo cada
   cinco segundos y también a mano, y la foto abre entera en una ventana. */
.galeria{ position:relative; background:var(--tinta); overflow:hidden; }
.galeria__pista{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.galeria__pista::-webkit-scrollbar{ display:none; }
.galeria__slide{ flex:0 0 100%; scroll-snap-align:start; position:relative;
  height:100vh; height:100svh; min-height:540px; }

/* La foto entera es el botón que abre la ventana. */
/* Acá la cadena de alturas pasaba por un <button>, que no siempre le pasa
   su altura a lo que lleva adentro. Con inset no hace falta que se la pase. */
.galeria__abrir{
  position:absolute; inset:0; z-index:1;
  display:block; padding:0; margin:0; border:0; background:none; cursor:zoom-in;
}
.galeria__abrir picture{ position:absolute; inset:0; display:block; }
.galeria__slide img{ position:absolute; inset:0; display:block;
  width:100%; height:100%; min-height:540px; object-fit:cover; }

/* La cruz de ampliar: con puntero aparece al pasar por encima, sin puntero
   no hay con qué revelarla y queda siempre a la vista. */
.galeria__lupa{
  position:absolute; top:clamp(88px,12vh,128px); right:var(--gutter); z-index:3;
  width:44px; height:44px; border-radius:999px; display:grid; place-items:center;
  background:rgba(19,30,16,.4); border:1px solid rgba(238,244,237,.34); color:var(--papel);
  backdrop-filter:blur(6px); opacity:0; transform:scale(.88);
  transition:opacity .35s var(--easing), transform .35s var(--easing);
}
.galeria__lupa svg{ width:17px; height:17px; }
.galeria__abrir:hover .galeria__lupa,
.galeria__abrir:focus-visible .galeria__lupa{ opacity:1; transform:none; }
@media (hover:none){ .galeria__lupa{ opacity:1; transform:none; } }

.galeria__slide figcaption{
  position:absolute; left:var(--gutter); bottom:clamp(3.4rem,6vw,4.6rem); z-index:3;
  color:var(--papel); font-size:clamp(1.1rem,2.1vw,1.7rem); font-weight:500;
  letter-spacing:-.02em; max-width:18ch; text-shadow:0 2px 30px rgba(19,30,16,.6); }
.galeria__slide::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(19,30,16,.62), rgba(19,30,16,0) 46%); }

.galeria__barra{ position:absolute; left:var(--gutter); right:var(--gutter);
  bottom:clamp(1.5rem,2.6vw,2.2rem); z-index:4; display:flex; gap:.4rem; align-items:center; }
.galeria__tramo{ flex:1; height:2px; background:rgba(238,244,237,.28); overflow:hidden; }
.galeria__tramo i{ display:block; height:100%; width:0; background:var(--papel); }
.galeria__tramo.activo i{ width:100%; transition:width 5s linear; }
.galeria__tramo.vista i{ width:100%; }

/* La botonera dice de dos maneras que esto se pasa: el número de cuántas
   son y las flechas. En el teléfono también, que antes no se veían. */
.galeria__nav{ position:absolute; right:var(--gutter); bottom:clamp(3.2rem,6vw,4.4rem);
  z-index:4; display:flex; gap:.5rem; align-items:center; }
.galeria__cuenta{ margin:0 .5rem 0 0; color:var(--papel); font-size:var(--t-rotulo);
  letter-spacing:.18em; font-weight:600; font-variant-numeric:tabular-nums; opacity:.72; }
/* Dos galerías seguidas se confunden si no dicen cuál es cuál. El rótulo
   va pegado al contador, que es donde ya se mira para saber dónde se está. */
.galeria__donde{ color:var(--papel); font-size:var(--t-rotulo); letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; padding-right:.8rem;
  border-right:1px solid rgba(238,244,237,.3); }
.galeria__nav button{ width:44px; height:44px; border-radius:999px; cursor:pointer;
  background:rgba(238,244,237,.14); border:1px solid rgba(238,244,237,.3); color:var(--papel);
  display:grid; place-items:center; transition:background .3s; backdrop-filter:blur(6px); }
.galeria__nav button:hover{ background:rgba(238,244,237,.28); }
.galeria__nav button:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }

@media (max-width:760px){
  /* Un render apaisado recortado a la forma del teléfono deja a la vista
     poco más de la cuarta parte del ancho, y una cocina deja de parecer una
     cocina. Acá entra entero, de borde a borde, y el escenario oscuro de
     arriba y abajo recibe el pie y los controles, que sobre la foto nunca
     se leen del todo. */
  /* A pantalla entera la foto apaisada quedaría nadando en oscuro: la
     diapositiva se acorta hasta que el conjunto de foto, pie y controles
     ocupa la hoja sin huecos grandes. */
  .galeria__slide{ display:flex; flex-direction:column; justify-content:center;
    height:clamp(460px,74vh,660px); height:clamp(460px,74svh,660px); min-height:0; }
  .galeria__abrir{ position:relative; inset:auto; height:auto; flex:none; }
  .galeria__abrir picture{ position:relative; inset:auto; height:auto; }
  .galeria__slide img{ position:relative; inset:auto; height:auto; min-height:0;
    object-fit:contain; }
  .galeria__slide::after{ display:none; }
  .galeria__slide figcaption{ position:static; max-width:none; text-shadow:none;
    margin:1.4rem 0 0; padding-inline:var(--gutter); }
  .galeria__lupa{ top:.8rem; right:.8rem; width:38px; height:38px; }
  .galeria__nav{ bottom:clamp(2.6rem,7vw,3.4rem); }
  .galeria__nav button{ width:40px; height:40px; }
}

/* La ventana de la foto no lleva el recorte de marca ni el papel: acá manda
   la imagen, que entra entera, sin recorte y sobre fondo oscuro. */
.modal--foto{
  width:100vw; max-width:100vw; height:100vh; height:100svh; max-height:100vh; max-height:100svh;
  inset:0; margin:0; padding:0; border:0; clip-path:none;
  background:rgba(19,30,16,.97); color:var(--papel);
  align-items:center; justify-content:center;
}
.modal--foto::backdrop{ background:rgba(19,30,16,.92); }
/* Abierta con una imagen sola, como el plano de una casa, no hay a dónde ir */
.modal--foto.foto--sola .foto__nav{ display:none; }
.modal--foto.foto--sola .foto{ max-width:calc(100vw - 2 * clamp(20px,4vw,72px)); }
.modal--foto.foto--sola .foto img{ cursor:zoom-in; }
/* Y con un toque pasa a su medida real: ahí la ventana se recorre */
.modal--foto.foto--lupa{ overflow:auto; align-items:flex-start; justify-content:flex-start;
  padding:clamp(12px,2vw,28px); }
.modal--foto.foto--lupa .foto{ max-width:none; margin:auto; }
.modal--foto.foto--lupa .foto img{ max-width:none; max-height:none; width:auto; height:auto;
  cursor:zoom-out; }
.modal--foto .modal__cerrar{ z-index:4; border-color:rgba(238,244,237,.3);
  background:rgba(238,244,237,.12); color:var(--papel); backdrop-filter:blur(6px); }
.modal--foto .modal__cerrar:hover{ background:rgba(238,244,237,.26); border-color:rgba(238,244,237,.5); }
.foto{ margin:0; display:flex; flex-direction:column; gap:1rem; min-width:0;
  max-width:calc(100vw - 2 * clamp(56px,9vw,120px)); }
.foto picture{ display:block; min-height:0; }
.foto img{ display:block; width:auto; height:auto; margin-inline:auto;
  max-width:100%; max-height:calc(100vh - 9rem); max-height:calc(100svh - 9rem); object-fit:contain; }
.foto figcaption{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  font-size:.95rem; font-weight:500; }
.foto__cuenta{ font-size:var(--t-rotulo); letter-spacing:.18em; font-weight:600;
  font-variant-numeric:tabular-nums; opacity:.55; flex:none; }
.foto__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:48px; height:48px; border-radius:999px; cursor:pointer;
  background:rgba(238,244,237,.12); border:1px solid rgba(238,244,237,.28); color:var(--papel);
  display:grid; place-items:center; transition:background .3s var(--easing); }
.foto__nav:hover{ background:rgba(238,244,237,.26); }
.foto__nav:focus-visible{ outline:2px solid var(--tierra); outline-offset:3px; }
.foto__nav svg{ width:18px; height:18px; }
.foto__nav--ant{ left:clamp(8px,1.8vw,26px); }
.foto__nav--sig{ right:clamp(8px,1.8vw,26px); }
@media (max-width:640px){
  /* En el teléfono la foto va de borde a borde: con un render apaisado y
     la pantalla parada, cada píxel de ancho cuenta. */
  .foto{ width:100vw; max-width:100vw; }
  .foto img{ max-height:calc(100vh - 11rem); max-height:calc(100svh - 11rem); }
  .foto figcaption{ padding-inline:var(--gutter); }
  .foto__nav{ width:42px; height:42px; top:auto; bottom:1.1rem; transform:none; }
  .foto__nav--ant{ left:calc(50% - 50px); }
  .foto__nav--sig{ right:calc(50% - 50px); }
  .foto figcaption{ flex-direction:column; gap:.35rem; padding-bottom:3.4rem; }
}

/* 19. El marco de la aérea
   La imagen va en el flujo, no absoluta, así que su propio alto manda y no
   hace falta fijarle proporción al marco. Las chinchetas se cuelgan encima. */
.implantacion{ position:relative; }
.implantacion picture{ display:block; }
.chincheta{ transition:transform .4s var(--easing), background .3s, color .3s, box-shadow .3s, opacity .4s; }

/* El rótulo en versales con interletrado abierto mide 170 px fijos. Para que
   el dato comparta renglón con él sin partirse necesita 220, o sea una ficha
   de 409 para arriba, que recién aparece cerca de los 1460 de ventana. Abajo
   de eso el dato va abajo del rótulo, igual que en el teléfono, y usa el
   ancho entero. Se nota sobre todo en el botón de la ficha técnica, que
   partido en dos renglones dentro de la píldora queda roto. */
@media (min-width:1001px) and (max-width:1459px){
  .ficha dl{ grid-template-columns:1fr; gap:0; }
  .ficha dt{ border-top:1px solid var(--linea-clara); padding-bottom:.15rem; }
  .ficha dd{ border-top:0; text-align:left; padding-top:.1rem; padding-bottom:.9rem; }
}

/* 20. Respaldo: el banner de marcas y el contacto al pie
   La sección va sobre salvia, el neutro del manual, sin textura encima. Es
   el escalón entre el papel de las dos secciones de arriba y la tinta del
   contacto, y de paso separa las tres sin necesidad de un filete. */
.respaldo{ position:relative; }
@media (min-width:901px){
  /* Al quedar sólo el banner, la sección se volvió más corta que el rótulo
     vertical, que arranca en el borde del contenido y se derramaba sobre la
     sección de abajo. El piso de altura lo contiene y de paso le da cuerpo de
     banda a las tres firmas, que es lo que se pidió de esta sección. */
  .respaldo{ min-height:clamp(470px,54vh,580px); min-height:clamp(470px,54svh,580px); display:flex; align-items:center; }
  .respaldo > .envoltura{ width:100%; }
}

.marcas{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.6rem);
  border-top:1px solid var(--linea-clara); }
@media (max-width:760px){ .marcas{ grid-template-columns:1fr; gap:0; } }
.marca{ padding-top:1.6rem; border-top:1px solid transparent; margin-top:-1px; }
@media (max-width:760px){
  .marca{ border-top-color:var(--linea-clara); padding-bottom:1.6rem; }
  .marca:first-child{ border-top-color:transparent; }
  .marca:last-child{ padding-bottom:0; }
}
/* Las tres firmas comparten alto de ranura: los dos logotipos que ya
   llegaron y el nombre de GRAB, que sigue escrito a mano, quedan a la misma
   altura y la fila no se desarma. Los dos van sólo en PNG: sips le tira el
   canal alfa al pasarlos a AVIF y los deja con fondo blanco, que sobre
   salvia sería un recuadro. */
.marca__firma{ display:flex; align-items:center; height:clamp(54px,6.2vw,88px); }
.marca__firma img{ display:block; width:auto; height:100%; max-width:100%; object-fit:contain; object-position:left center; }
.marca__nombre{ font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:600; letter-spacing:-.03em;
  margin:0; line-height:1; }
/* Debajo de la firma, el telefono comercial y su boton. Autonomo no lleva:
   proyecta, no vende, y no hay un numero suyo para publicar. Por eso cada
   marca se estira a lo alto por su cuenta en vez de alinearse con las otras. */
.marca__tel{
  display:block; margin-top:1.1rem; text-decoration:none; font-weight:500;
  font-size:clamp(1.02rem,1.5vw,1.2rem); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.marca__wa{ margin-top:.85rem; }

/* El rol no es decoración: dice qué hace cada firma. Sobre salvia, media
   tinta da 3,8:1 y no llega al mínimo, así que va a tres cuartos, que da
   5,3 y sí pasa. */
.marca__rol{ display:block; margin-top:.8rem; font-size:var(--t-rotulo); letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; opacity:.75; }


/* ============================================================
   28. Hero claro: la axonométrica manda y el texto se invierte
   ============================================================ */
/* La aérea entra a sangre. El encuadre baja el centro de interés para que
   el conjunto quede sobre el titular y no detrás de la cabecera. */
.hero--mixto .hero__media img{ transform:none; object-position:center 62%; }
.hero--mixto .hero__media::after{
  background:
    linear-gradient(to bottom, rgba(19,30,16,.62) 0%, rgba(19,30,16,.18) 14%, rgba(19,30,16,0) 26%),
    linear-gradient(to top, rgba(19,30,16,.78) 0%, rgba(19,30,16,.34) 18%, rgba(19,30,16,0) 44%);
}