/* =========================================================================
   Ramírez · Arquitectura y Construcción
   Sistema visual: papel, tinta y una regla fina. Nada más.
   ========================================================================= */

:root{
  /* --- color ------------------------------------------------------------ */
  --papel:    #F6F5F3;
  --papel-2:  #ECEAE6;
  --papel-3:  #E2DFDA;
  --tinta:    #15161A;
  --tinta-80: #15161Acc;
  --gris:     #5E5E63;   /* 5.92:1 sobre papel */
  --linea:    #D7D4CF;
  --linea-2:  #C4C0B9;
  --barro:    #7A5B43;   /* 5.66:1 sobre papel */

  /* --- tipografía -------------------------------------------------------- */
  --titular: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dato:    "Space Mono", "SFMono-Regular", Consolas, monospace;

  /* --- medidas ----------------------------------------------------------- */
  --margen:  clamp(1.25rem, 5vw, 5.5rem);
  --columna: 1480px;
  --aire:    clamp(5rem, 11vw, 11rem);
  --aire-c:  clamp(3rem, 6vw, 6rem);

  /* --- movimiento --------------------------------------------------------- */
  --curva:  cubic-bezier(.22,.68,.26,1);
  --lenta:  1.05s;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--titular);
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:clamp(1rem,.95rem + .22vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

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

:focus-visible{
  outline:2px solid var(--tinta);
  outline-offset:3px;
}

/* -------------------------------------------------------------------------
   Rejilla base
   ------------------------------------------------------------------------- */
.lienzo{
  width:100%;
  max-width:var(--columna);
  margin-inline:auto;
  padding-inline:var(--margen);
}
.lienzo--ancho{ max-width:1760px; }

.rejilla{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,2.25rem);
}

/* En pantalla angosta la rejilla de 12 deja de existir. El !important es
   deliberado: tiene que ganarle a los grid-column escritos en el atributo
   style de cada bloque, que si no dejarían columnas de 28 px. */
@media (max-width:860px){
  .rejilla{ grid-template-columns:minmax(0,1fr); }
  .rejilla > *{ grid-column:1 / -1 !important; align-self:auto !important; }
}

section{ position:relative; }
.bloque{ padding-block:var(--aire); }
.bloque--corto{ padding-block:var(--aire-c); }

.banda--2{ background:var(--papel-2); }
.banda--tinta{ background:var(--tinta); color:var(--papel); }
.banda--tinta a{ color:var(--papel); }

/* -------------------------------------------------------------------------
   Tipografía
   ------------------------------------------------------------------------- */
h1,h2,h3,h4{
  margin:0;
  font-family:var(--titular);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.02;
  text-wrap:balance;
}

/* El titular gigante usa el eje de ancho de Archivo: estrecho y pesado,
   como la portada de una revista de arquitectura. */
.titular{
  font-size:clamp(2.75rem,8.4vw,7.6rem);
  font-variation-settings:"wdth" 86,"wght" 700;
  letter-spacing:-.034em;
  line-height:.95;
}
.titular em{
  font-style:normal;
  font-variation-settings:"wdth" 86,"wght" 400;
}

.titulo{
  font-size:clamp(1.9rem,4.1vw,3.5rem);
  font-variation-settings:"wdth" 92,"wght" 600;
  letter-spacing:-.028em;
  line-height:1.03;
}

.subtitulo{
  font-size:clamp(1.25rem,2.1vw,1.8rem);
  font-variation-settings:"wdth" 96,"wght" 500;
  letter-spacing:-.02em;
  line-height:1.2;
}

/* Etiqueta en monoespaciada: el recurso que hereda del logotipo. */
.rotulo{
  display:block;
  font-family:var(--dato);
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--gris);
  line-height:1.5;
}
.banda--tinta .rotulo{ color:var(--linea-2); }

.rotulo--regla{
  position:relative;
  padding-top:1.15rem;
  border-top:1px solid var(--linea);
}
.banda--tinta .rotulo--regla{ border-color:#44454B; }

.numeral{
  font-family:var(--dato);
  font-size:.66rem;
  letter-spacing:.14em;
  color:var(--gris);
}

.entrada{
  font-size:clamp(1.05rem,1.35vw,1.26rem);
  line-height:1.55;
  color:var(--tinta);
  max-width:46ch;
  text-wrap:pretty;
}
.parrafo{
  color:var(--gris);
  max-width:58ch;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
/* Un correo largo no tiene dónde partirse y se sale de la caja a 320 px */
.parrafo a,.entrada a{ overflow-wrap:anywhere; }
.parrafo + .parrafo{ margin-top:1.1em; }
/* Dentro de una pila el espacio ya lo pone el gap: el margen lo duplicaría */
.apilado > .parrafo + .parrafo{ margin-top:0; }
.banda--tinta .parrafo{ color:#B9B6B1; }

/* -------------------------------------------------------------------------
   Enlaces y botones
   ------------------------------------------------------------------------- */
.enlace{
  display:inline-block;
  font-family:var(--dato);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  padding-bottom:.42em;
  border-bottom:1px solid var(--linea-2);
  transition:border-color .35s var(--curva), color .35s var(--curva);
}
.enlace:hover{ border-color:var(--tinta); color:var(--barro); }
.banda--tinta .enlace{ border-color:#4A4B50; }
.banda--tinta .enlace:hover{ border-color:var(--papel); color:var(--papel); }

.boton{
  display:inline-flex;
  align-items:center;
  gap:.9em;
  font-family:var(--dato);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.15em 1.9em;
  background:var(--tinta);
  color:var(--papel);
  border:1px solid var(--tinta);
  transition:background .4s var(--curva), color .4s var(--curva);
}
.boton:hover{ background:transparent; color:var(--tinta); }
.boton--hueco{ background:transparent; color:var(--tinta); }
.boton--hueco:hover{ background:var(--tinta); color:var(--papel); }
.banda--tinta .boton{ background:var(--papel); color:var(--tinta); border-color:var(--papel); }
.banda--tinta .boton:hover{ background:transparent; color:var(--papel); }

.boton .flecha{ transition:transform .4s var(--curva); }
.boton:hover .flecha{ transform:translateX(.35em); }

/* -------------------------------------------------------------------------
   Navegación
   ------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--papel);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--curva), background .4s var(--curva);
}
.nav.posada{ border-bottom-color:var(--linea); }

.nav__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  height:clamp(66px,7.4vw,86px);
}

/* En la barra va la marca reducida: el descriptor en monoespaciada del
   lockup completo no es legible por debajo de unos 40 px de alto. */
.nav__marca{ display:block; flex:0 0 auto; }
.nav__marca img{ height:clamp(17px,1.85vw,22px); width:auto; }

.nav__menu{
  display:flex;
  align-items:center;
  gap:clamp(1.5rem,2.9vw,2.9rem);
}
.nav__menu a{
  font-family:var(--dato);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--tinta);
  position:relative;
  padding-block:.4em;
}
.nav__menu a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--tinta);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--curva);
}
.nav__menu a:hover::after,
.nav__menu a[aria-current="page"]::after{ transform:scaleX(1); }

/* El botón de contacto se va antes que los enlaces: el menú nunca desaparece */
@media (max-width:880px){
  .nav__menu{ gap:1.45rem; }
  .nav__menu a{ font-size:.63rem; letter-spacing:.11em; }
}
/* Los tres enlaces se quedan siempre: Contacto es una página, no un botón
   duplicado, y esconderlo en teléfono dejaría al visitante sin salida. */
@media (max-width:620px){
  .nav__menu{ gap:1.1rem; }
  .nav__menu a{ font-size:.6rem; letter-spacing:.07em; }
}
@media (max-width:380px){
  .nav__menu{ gap:.8rem; }
  .nav__menu a{ font-size:.55rem; letter-spacing:.05em; }
}

/* -------------------------------------------------------------------------
   Portada
   ------------------------------------------------------------------------- */
.portada{
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  align-items:stretch;
  min-height:clamp(540px,86vh,900px);
}

/* El titular de portada vive en media página: se dimensiona contra esa
   columna, no contra el ancho total. */
.portada .titular{
  font-size:clamp(2.45rem,4.55vw,4.7rem);
}
@media (max-width:900px){
  .portada .titular{ font-size:clamp(2.45rem,8.6vw,4.4rem); }
}

.portada__texto{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:3rem;
  padding:clamp(2.5rem,5vw,5rem) clamp(1.25rem,4vw,4.5rem) clamp(2.5rem,5vw,4.5rem) var(--margen);
}

.portada__pie{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
@media (max-width:1180px){
  /* Debajo de este ancho el párrafo y el botón ya no caben lado a lado
     sin empujar el botón fuera de la columna. */
  .portada__pie{ flex-direction:column; align-items:flex-start; gap:1.75rem; }
}

.portada__foto{
  position:relative;
  overflow:hidden;
  background:var(--papel-3);
}
.portada__foto img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}
.portada__credito{
  position:absolute;
  left:clamp(1rem,2vw,1.75rem);
  bottom:clamp(1rem,2vw,1.6rem);
  font-family:var(--dato);
  font-size:.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}

@media (max-width:900px){
  .portada{
    grid-template-columns:1fr;
    min-height:0;
  }
  .portada__texto{
    padding:clamp(2.5rem,8vw,3.5rem) var(--margen) clamp(2rem,6vw,3rem);
    gap:2.25rem;
  }
  .portada__foto{ aspect-ratio:4/3; }
}

/* -------------------------------------------------------------------------
   Carrusel de portada
   Fundido cruzado, no deslizamiento: con fotos de distinta proporción el
   deslizamiento delata los bordes y el fundido no.
   ------------------------------------------------------------------------- */
.carrusel{ position:relative; width:100%; height:100%; }

.carrusel__toma{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity .9s var(--curva);
}
.carrusel__toma[data-activa]{ opacity:1; }
.carrusel__toma img{ width:100%; height:100%; object-fit:cover; }

/* Velo inferior: los controles van sobre fotografías de luminosidad
   impredecible y tienen que leerse en todas. */
.carrusel__velo{
  position:absolute; inset:auto 0 0 0;
  height:46%;
  background:linear-gradient(to top,rgba(10,11,13,.66),rgba(10,11,13,0));
  pointer-events:none;
}

.carrusel__barra{
  position:absolute;
  left:clamp(1rem,2.4vw,2rem);
  /* Espacio extra a la derecha: ahí vive el botón flotante de WhatsApp y
     si no, tapa la flecha de siguiente. */
  right:calc(clamp(1rem,2.4vw,2rem) + 68px);
  bottom:clamp(1rem,2.4vw,1.75rem);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
}

.carrusel__pie{
  font-family:var(--dato);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 10px rgba(10,11,13,.5);
}

.carrusel__mandos{ display:flex; align-items:center; gap:.65rem; flex:0 0 auto; }

/* En teléfono el nombre de la casa y los mandos no caben en un renglón */
@media (max-width:620px){
  .carrusel__barra{ flex-direction:column; align-items:flex-start; gap:.8rem; }
  .carrusel__pie{ font-size:.58rem; letter-spacing:.1em; }
}

.carrusel__boton{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  padding:0;
  background:rgba(246,245,243,.14);
  border:1px solid rgba(246,245,243,.5);
  color:#fff;
  font-family:var(--dato);
  font-size:.85rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(6px);
  transition:background .3s var(--curva), border-color .3s var(--curva);
}
.carrusel__boton:hover{ background:rgba(246,245,243,.3); border-color:#fff; }
.carrusel__boton:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.carrusel__cuenta{
  font-family:var(--dato);
  font-size:.62rem;
  letter-spacing:.12em;
  color:#fff;
  min-width:4.2em;
  text-align:center;
  text-shadow:0 1px 10px rgba(10,11,13,.5);
}

@media (prefers-reduced-motion:reduce){
  .carrusel__toma{ transition:none; }
}

/* El visor de una página de proyecto: el carrusel vive dentro */
.visor{
  position:relative;
  overflow:hidden;
  background:var(--papel-3);
  aspect-ratio:16/9;
}
@media (max-width:760px){ .visor{ aspect-ratio:4/3; } }

/* -------------------------------------------------------------------------
   Franja · obra a lo ancho de la pantalla, con el nombre debajo
   ------------------------------------------------------------------------- */
.franja{ display:block; text-decoration:none; }
.franja + .franja{ margin-top:clamp(2.5rem,5vw,4.5rem); }

.franja__marco{
  overflow:hidden;
  background:var(--papel-3);
  aspect-ratio:21/9;
}
.franja__marco img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s var(--curva);
}
.franja:hover .franja__marco img{ transform:scale(1.025); }

.franja__pie{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.3rem 1.5rem;
  margin-top:1.1rem;
  padding-top:.9rem;
  border-top:1px solid var(--linea);
}

@media (max-width:760px){
  .franja__marco{ aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce){
  .franja__marco img{ transition:none; }
}

/* -------------------------------------------------------------------------
   Obra · el muro de imágenes
   Cada pieza cuelga a su propia altura, como cuadros en una pared.
   ------------------------------------------------------------------------- */
.muro{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1.5rem,3vw,3rem) clamp(1rem,2.2vw,2.25rem); }

.obra{ position:relative; display:block; text-decoration:none; }
.obra__marco{
  position:relative;
  overflow:hidden;
  background:var(--papel-3);
}
.obra__marco img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.3s var(--curva);
}
.obra:hover .obra__marco img{ transform:scale(1.035); }

.obra__pie{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.3rem 1.5rem;
  margin-top:1.05rem;
  padding-top:.85rem;
  border-top:1px solid var(--linea);
}
.obra__nombre{
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  font-variation-settings:"wdth" 96,"wght" 500;
  letter-spacing:-.018em;
  line-height:1.15;
}
.obra__sitio{
  font-family:var(--dato);
  font-size:.63rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gris);
  white-space:nowrap;
}

/* Colocación: tres piezas, tres alturas distintas */
.obra--a{ grid-column:1 / span 7; }
.obra--a .obra__marco{ aspect-ratio:4/3; }

.obra--b{ grid-column:9 / span 4; align-self:end; padding-bottom:clamp(0rem,4vw,4.5rem); }
.obra--b .obra__marco{ aspect-ratio:3/4; }

/* La tercera se ancla al borde derecho: la asimetría se lee intencional,
   no como una pieza suelta flotando en el centro. */
.obra--c{ grid-column:5 / span 8; margin-top:clamp(0rem,3vw,3rem); }
.obra--c .obra__marco{ aspect-ratio:16/9; }

@media (max-width:860px){
  .obra--a,.obra--b,.obra--c{
    grid-column:1 / -1;
    align-self:auto;
    margin-top:0;
    padding-bottom:0;
  }
  .obra--b .obra__marco{ aspect-ratio:4/5; }
}

/* -------------------------------------------------------------------------
   Índice de proyectos (página Proyectos)
   ------------------------------------------------------------------------- */
.indice{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(2.5rem,5vw,5rem) clamp(1rem,2.2vw,2.25rem); }

.ficha{ position:relative; }
.ficha__marco{ position:relative; overflow:hidden; background:var(--papel-3); }
.ficha__marco img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--curva); }
.ficha a:hover .ficha__marco img{ transform:scale(1.035); }
.ficha a{ text-decoration:none; display:block; }

.ficha__datos{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:1rem;
  margin-top:1.05rem;
  padding-top:.85rem;
  border-top:1px solid var(--linea);
}
/* En pantalla angosta las tres columnas se estrangulan: mejor apiladas */
@media (max-width:560px){
  .ficha__datos{ grid-template-columns:minmax(0,1fr); gap:.3rem; }
  .ficha__datos .numeral{ order:-1; }
}

.ficha--grande{ grid-column:1 / span 8; }
.ficha--grande .ficha__marco{ aspect-ratio:3/2; }
.ficha--alta{ grid-column:9 / span 4; align-self:end; }
.ficha--alta .ficha__marco{ aspect-ratio:2/3; }
.ficha--media{ grid-column:1 / span 5; }
.ficha--media .ficha__marco{ aspect-ratio:1/1; }
.ficha--ancha{ grid-column:6 / span 7; align-self:center; }
.ficha--ancha .ficha__marco{ aspect-ratio:16/10; }

@media (max-width:860px){
  .ficha--grande,.ficha--alta,.ficha--media,.ficha--ancha{
    grid-column:1 / -1; align-self:auto;
  }
  .ficha--alta .ficha__marco{ aspect-ratio:4/5; }
  .ficha--media .ficha__marco{ aspect-ratio:4/3; }
}

/* -------------------------------------------------------------------------
   En obra · tablero de estado, deliberadamente simétrico
   La obra concluida cuelga en asimetría; ésta se ordena en pares para que
   se lea como un parte de avance y no como portafolio.
   ------------------------------------------------------------------------- */
.par{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,3.5rem) clamp(1rem,2.2vw,2.25rem);
}
@media (max-width:760px){ .par{ grid-template-columns:minmax(0,1fr); } }

.enobra__marco{
  position:relative;
  overflow:hidden;
  background:var(--papel-3);
  aspect-ratio:4/3;
}
.enobra__marco img{ width:100%; height:100%; object-fit:cover; }

/* Toda imagen que no sea fotografía de obra terminada va rotulada.
   El visitante tiene que poder distinguir lo dibujado de lo construido. */
.sello{
  position:absolute;
  left:0; top:0;
  padding:.5em .9em;
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--dato);
  font-size:.58rem;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.enobra__pie{
  margin-top:1.05rem;
  padding-top:.85rem;
  border-top:1px solid var(--linea);
}
.enobra__fila{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.3rem 1.5rem;
}
.entrega{
  display:block;
  margin-top:.75rem;
  font-family:var(--dato);
  font-size:.63rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--barro);
}

/* -------------------------------------------------------------------------
   Proyecto y obra, lado a lado
   Sin cortinilla deslizante: dos imágenes fijas se comparan de un vistazo
   y no dependen de que nadie arrastre nada.
   ------------------------------------------------------------------------- */
.pareja{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.6rem,1.4vw,1.1rem);
}
@media (max-width:620px){ .pareja{ grid-template-columns:minmax(0,1fr); } }

.pareja figure{ margin:0; }
.pareja__marco{
  position:relative;
  overflow:hidden;
  background:var(--papel-3);
  aspect-ratio:3/2;
}
.pareja__marco img{ width:100%; height:100%; object-fit:cover; }
.pareja figcaption{
  margin-top:.75rem;
  font-family:var(--dato);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris);
}

/* -------------------------------------------------------------------------
   Servicios · lista numerada, sin tarjetas
   ------------------------------------------------------------------------- */
.lista{ margin:0; padding:0; list-style:none; border-top:1px solid var(--linea); }
.banda--tinta .lista{ border-color:#44454B; }

.lista__item{
  display:grid;
  grid-template-columns:minmax(0,3.5rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.9rem,3.6vw,3.2rem);
  border-bottom:1px solid var(--linea);
}
.banda--tinta .lista__item{ border-color:#44454B; }

@media (min-width:880px){
  .lista__item{ grid-template-columns:3.5rem minmax(0,22rem) minmax(0,1fr); align-items:start; }
}

/* Debajo de 880 la rejilla tiene dos columnas y tres hijos, así que el
   cuerpo de texto caía en la segunda fila, primera columna: 3.5rem de
   ancho. Una palabra por renglón. Aquí ocupa el renglón completo. */
@media (max-width:879px){
  .lista__cuerpo{ grid-column:1 / -1; }
}

.lista__num{
  font-family:var(--dato);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--gris);
  padding-top:.5em;
}
.lista__titulo{
  font-size:clamp(1.3rem,2.2vw,1.95rem);
  font-variation-settings:"wdth" 94,"wght" 500;
  letter-spacing:-.022em;
  line-height:1.12;
}
.lista__cuerpo{ color:var(--gris); max-width:52ch; margin:0; }
.banda--tinta .lista__cuerpo{ color:#B9B6B1; }
@media (max-width:879px){
  .lista__cuerpo{ margin-top:.9rem; }
}

/* -------------------------------------------------------------------------
   Datos de una obra (la ficha técnica)
   ------------------------------------------------------------------------- */
.datos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;
  border-top:1px solid var(--linea);
  border-left:1px solid var(--linea);
}
.dato{
  padding:clamp(1.25rem,2.4vw,1.85rem) clamp(1rem,1.8vw,1.5rem);
  border-right:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.dato dt{
  font-family:var(--dato);
  font-size:.6rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:.7rem;
}
.dato dd{
  margin:0;
  font-size:clamp(1.15rem,1.9vw,1.6rem);
  font-variation-settings:"wdth" 94,"wght" 500;
  letter-spacing:-.02em;
  line-height:1.1;
}
.dato dd small{
  display:block;
  font-family:var(--dato);
  font-size:.7rem;
  letter-spacing:.08em;
  font-variation-settings:normal;
  color:var(--gris);
  margin-top:.35rem;
}

/* -------------------------------------------------------------------------
   Galería de una obra
   ------------------------------------------------------------------------- */
.galeria{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(1rem,2.2vw,2.25rem); }
.toma{ position:relative; overflow:hidden; background:var(--papel-3); }
.toma img{ width:100%; height:100%; object-fit:cover; }

.toma--llena{ grid-column:1 / -1; aspect-ratio:16/9; }
.toma--mitad{ grid-column:span 6; aspect-ratio:4/3; }
.toma--tercio{ grid-column:span 4; aspect-ratio:3/4; }
.toma--dos-tercios{ grid-column:span 8; aspect-ratio:3/2; }
.toma--alta{ grid-column:span 4; aspect-ratio:2/3; }
.toma--resto{ grid-column:span 8; aspect-ratio:3/2; align-self:end; }

@media (max-width:760px){
  .toma--mitad,.toma--tercio,.toma--dos-tercios,.toma--alta,.toma--resto{
    grid-column:1 / -1;
  }
  .toma--tercio,.toma--alta{ aspect-ratio:4/5; }
}

/* -------------------------------------------------------------------------
   Retrato del estudio
   ------------------------------------------------------------------------- */
.retrato{ position:relative; overflow:hidden; background:var(--papel-3); }
.retrato img{ width:100%; height:auto; }

.cita{
  font-size:clamp(1.35rem,2.6vw,2.15rem);
  font-variation-settings:"wdth" 96,"wght" 400;
  letter-spacing:-.022em;
  line-height:1.22;
  margin:0;
  text-wrap:pretty;
}
.cita__firma{
  display:block;
  margin-top:1.6rem;
  font-family:var(--dato);
  font-size:.64rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gris);
}

/* -------------------------------------------------------------------------
   Formulario
   ------------------------------------------------------------------------- */
.forma{ display:grid; gap:clamp(1.4rem,2.6vw,2rem); }
@media (min-width:720px){
  .forma{ grid-template-columns:1fr 1fr; }
  .forma .campo--ancho{ grid-column:1 / -1; }
}

.campo{ display:block; }
.campo > span{
  display:block;
  font-family:var(--dato);
  font-size:.62rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gris);
  margin-bottom:.7rem;
}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  font-family:var(--titular);
  font-size:1rem;
  font-variation-settings:"wdth" 100,"wght" 400;
  color:var(--tinta);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--linea-2);
  padding:.75em 0;
  border-radius:0;
  transition:border-color .35s var(--curva);
  appearance:none;
}
.campo select{
  background-image:linear-gradient(45deg,transparent 50%,var(--gris) 50%),linear-gradient(135deg,var(--gris) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(1.25em),calc(100% - 6px) calc(1.25em);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:1.8em;
}
.campo textarea{ resize:vertical; min-height:7.5em; line-height:1.55; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ outline:none; border-bottom-color:var(--tinta); }
.campo input::placeholder,
.campo textarea::placeholder{ color:#A6A29C; }

.acuerdo{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  font-size:.86rem;
  line-height:1.5;
  color:var(--gris);
}
.acuerdo input{
  flex:0 0 auto;
  width:1rem; height:1rem;
  margin-top:.28em;
  accent-color:var(--tinta);
}
.acuerdo a{ color:var(--tinta); }

.trampa{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.aviso{
  font-family:var(--dato);
  font-size:.72rem;
  letter-spacing:.04em;
  line-height:1.6;
  padding:1em 1.2em;
  border-left:2px solid var(--tinta);
  background:var(--papel-2);
}
.aviso[hidden]{ display:none; }
.aviso--mal{ border-color:#9A2C2C; color:#7E2424; }

/* -------------------------------------------------------------------------
   Pie
   ------------------------------------------------------------------------- */
.pie{ background:var(--tinta); color:var(--papel); }
.pie a{ color:var(--papel); text-decoration:none; }
.pie__arriba{
  display:grid;
  gap:clamp(2.5rem,5vw,4rem);
  padding-block:clamp(3.5rem,7vw,6rem);
}
@media (min-width:880px){
  .pie__arriba{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); }
}
.pie__marca img{ height:clamp(38px,4.2vw,46px); width:auto; }
.pie__lista{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.pie__lista a{
  font-size:.95rem;
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--curva);
  overflow-wrap:anywhere;
}
.pie__lista a:hover{ border-bottom-color:var(--papel); }

.pie__abajo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  padding-block:1.6rem;
  border-top:1px solid #44454B;
  font-family:var(--dato);
  font-size:.62rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--linea-2);
}
.pie__abajo a{ color:var(--linea-2); }
.pie__abajo a:hover{ color:var(--papel); }

/* -------------------------------------------------------------------------
   Revelados
   El recorte va SIEMPRE en el hijo: un elemento recortado por completo
   no cuenta como visible para IntersectionObserver y nunca se revelaría.
   ------------------------------------------------------------------------- */
.sube{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .95s var(--curva), transform .95s var(--curva);
}
.sube.ya{ opacity:1; transform:none; }

.cortina > *{
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--lenta) var(--curva);
}
.cortina.ya > *{ clip-path:inset(0 0 0 0); }

[data-demora="1"]{ transition-delay:.09s; }
[data-demora="2"]{ transition-delay:.18s; }
[data-demora="3"]{ transition-delay:.27s; }
[data-demora="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .sube,.cortina > *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
  .obra__marco img,.ficha__marco img{ transition:none; }
}

/* -------------------------------------------------------------------------
   Utilidades
   ------------------------------------------------------------------------- */
.solo-lectores{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.saltar{
  position:fixed; left:0; top:0; z-index:100;
  transform:translateY(-130%);
  transition:transform .2s var(--curva);
  background:var(--tinta); color:var(--papel);
  padding:.9em 1.4em;
  font-family:var(--dato); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
}
.saltar:focus{ transform:none; }

.regla{ border:0; border-top:1px solid var(--linea); margin:0; }
.banda--tinta .regla{ border-color:#44454B; }

.apilado{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-content:start; }
.apilado--junto{ gap:1.1rem; }

.flotante{
  position:fixed;
  right:clamp(1rem,2.5vw,2rem);
  bottom:clamp(1rem,2.5vw,2rem);
  z-index:55;
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px; height:54px;
  border-radius:50%;
  background:var(--tinta);
  color:var(--papel);
  text-decoration:none;
  box-shadow:0 2px 18px rgba(21,22,26,.22);
  transition:transform .35s var(--curva);
}
.flotante:hover{ transform:translateY(-3px); }
.flotante svg{ width:25px; height:25px; }