/* ==========================================================================
   VALTERRA PIRINEO — hoja de estilos
   Paleta y tipografía según briefing de marca.
   ========================================================================== */

:root{
  --grafito:#1A1A1A;
  --grafito-hondo:#111111;
  --blanco-roto:#F4F1EA;
  --gris:#6F6B66;
  --gris-claro:#9A948C;
  --cobre:#B87333;

  --display:"Cormorant Garamond", Georgia, serif;
  --texto:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ancho:1360px;
  --aire:clamp(5rem, 11vw, 10.5rem);
}

/* La web crece con la pantalla: en monitores grandes todo sube de tamaño */
html{font-size:100%;}
@media (min-width:1400px){html{font-size:108%;}}
@media (min-width:1700px){html{font-size:117%;}}
@media (min-width:2100px){html{font-size:126%;}}

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

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

body{
  margin:0;
  background:var(--grafito);
  color:var(--blanco-roto);
  font-family:var(--texto);
  font-size:1.0625rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

::selection{background:var(--cobre);color:var(--grafito);}

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

/* --- Tipografía ---------------------------------------------------------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.15;
  margin:0;
}

h1{font-size:clamp(2.4rem,7vw,5.4rem);}
h2{font-size:clamp(1.9rem,4.4vw,3.6rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.1em;}

p{margin:0 0 1.4em;max-width:64ch;}
p:last-child{margin-bottom:0;}

.eyebrow{
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--cobre);
  margin:0 0 1.6rem;
  font-weight:500;
}

.claim{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:clamp(.85rem,1.6vw,1.05rem);
}

/* --- Estructura ---------------------------------------------------------- */

.contenedor{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
}

.seccion{padding-block:var(--aire);}
.seccion--claro{background:var(--blanco-roto);color:var(--grafito);}
.seccion--claro .eyebrow{color:var(--cobre);}
.seccion--claro p{color:#3A3733;}

.regla{
  width:100%;height:1px;border:0;
  background:currentColor;opacity:.14;margin:0;
}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:1.1rem;
  transition:background-color .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.cabecera.compacta{
  background:rgba(17,17,17,.96);
  backdrop-filter:blur(8px);
  padding-block:.6rem;
  border-bottom-color:rgba(244,241,234,.1);
}

.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.cabecera__logo img{height:52px;width:auto;transition:height .35s ease;}
.cabecera.compacta .cabecera__logo img{height:40px;}

.nav{display:flex;align-items:center;gap:2.2rem;}
.nav a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding-block:.4rem;position:relative;color:var(--blanco-roto);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--cobre);transition:width .3s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{width:100%;}

.nav__wa{
  border:1px solid rgba(244,241,234,.35);
  padding:.55rem 1.1rem;
}
.nav__wa::after{display:none;}
.nav__wa:hover{border-color:var(--cobre);color:var(--cobre);}

.hamburguesa{
  display:none;background:none;border:0;cursor:pointer;
  padding:.6rem;color:var(--blanco-roto);
  position:relative;z-index:12;
}
.cabecera__logo{position:relative;z-index:12;}
.hamburguesa span{display:block;width:26px;height:1px;background:currentColor;margin:6px 0;transition:transform .3s ease,opacity .3s ease;}
.menu-abierto .hamburguesa span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-abierto .hamburguesa span:nth-child(2){opacity:0;}
.menu-abierto .hamburguesa span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* --- Portada ------------------------------------------------------------- */

.portada{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding-block:9rem 4rem;
}
.portada__fondo{position:absolute;inset:0;overflow:hidden;}
.portada__fondo img{width:100%;height:100%;object-fit:cover;}
.portada__velo{position:absolute;inset:0;background:rgba(10,10,10,.52);}
.portada__contenido{position:relative;z-index:2;}

.portada h1{margin-bottom:1.6rem;}
.portada__intro{
  font-size:clamp(.95rem,1.7vw,1.12rem);
  letter-spacing:.05em;color:rgba(244,241,234,.86);margin-bottom:3rem;
}
.portada .claim{
  display:block;color:var(--cobre);margin-bottom:3rem;
  padding-top:2rem;border-top:1px solid rgba(184,115,51,.4);max-width:24ch;
}

.acciones{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;}

.boton{
  display:inline-block;
  font-family:var(--texto);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border:1px solid var(--blanco-roto);
  background:transparent;color:var(--blanco-roto);
  cursor:pointer;border-radius:0;text-align:center;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.boton[disabled]{opacity:.5;cursor:wait;}
.boton:hover{background:var(--blanco-roto);color:var(--grafito);}
.boton--cobre{border-color:var(--cobre);color:var(--cobre);}
.boton--cobre:hover{background:var(--cobre);color:var(--grafito);border-color:var(--cobre);}
.boton--oscuro{border-color:var(--grafito);color:var(--grafito);}
.boton--oscuro:hover{background:var(--grafito);color:var(--blanco-roto);}

.enlace-fino{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--cobre);padding-bottom:.35rem;
  transition:color .3s ease;
}
.enlace-fino:hover{color:var(--cobre);}

.bajar{
  position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  z-index:2;width:1px;height:56px;background:rgba(244,241,234,.3);overflow:hidden;
}
.bajar::after{
  content:"";position:absolute;inset:0;background:var(--cobre);
  animation:bajar 2.6s ease-in-out infinite;
}
@keyframes bajar{
  0%{transform:translateY(-100%);}
  60%,100%{transform:translateY(100%);}
}

/* --- Bloques de dos columnas -------------------------------------------- */

.duo{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.duo--invertido .duo__media{order:-1;}
.duo__media img{width:100%;aspect-ratio:4/5;object-fit:cover;}

/* --- Servicios ----------------------------------------------------------- */

.encabezado-seccion{max-width:52ch;margin-bottom:clamp(3rem,6vw,5rem);}
.encabezado-seccion p{margin-top:1.6rem;}

.servicios{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.servicio{
  padding:2.6rem 2.4rem 2.6rem 0;
  border-top:1px solid rgba(26,26,26,.14);
  display:flex;gap:1.8rem;align-items:flex-start;
}
.servicio__num{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.12em;
  color:var(--cobre);padding-top:.3rem;flex:none;
}
.servicio h3{margin-bottom:.9rem;}
.servicio p{font-size:.97rem;line-height:1.7;margin:0;}

/* --- Proyectos ----------------------------------------------------------- */

.galeria{
  column-count:2;
  column-gap:clamp(1.5rem,3vw,3rem);
}
.proyecto{
  display:block;cursor:pointer;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.proyecto__marco{overflow:hidden;background:var(--grafito-hondo);}
.proyecto img{
  width:100%;height:100%;object-fit:cover;
  transition:filter .6s ease, transform .8s cubic-bezier(.2,.6,.2,1);
}
/* El blanco y negro solo en equipos con ratón: en móvil no hay hover,
   así que las fotos se quedarían grises para siempre. */
@media (hover:hover) and (pointer:fine){
  .proyecto img{filter:grayscale(1) contrast(1.02);}
  .proyecto:hover img,.proyecto:focus-visible img{filter:grayscale(0);transform:scale(1.03);}
}
.proyecto__pie{padding-top:1.2rem;}
.proyecto__nombre{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;
  font-size:1.1rem;display:block;
}
.proyecto__dato{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris-claro);margin-top:.5rem;display:block;
}
.proyecto--alto .proyecto__marco{aspect-ratio:3/4;}
.proyecto--ancho .proyecto__marco{aspect-ratio:16/11;}
.proyecto--pano .proyecto__marco{aspect-ratio:16/9;}

/* --- Carpintería --------------------------------------------------------- */

.mosaico{
  display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(1.2rem,2.2vw,1.8rem);margin-top:clamp(3rem,5vw,4.5rem);
}
.mosaico figure{margin:0;min-height:0;}
.mosaico img{width:100%;height:100%;object-fit:cover;display:block;}
.mosaico figure:nth-child(1){grid-column:1;grid-row:1 / span 2;}
.mosaico figure:nth-child(2){grid-column:2;grid-row:1;}
.mosaico figure:nth-child(2) img{aspect-ratio:16/10;}
.mosaico figure:nth-child(3){grid-column:2;grid-row:2;}
.mosaico figure:nth-child(3) img{aspect-ratio:1/1;}

.destacado{
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);
  text-transform:none;letter-spacing:.02em;line-height:1.4;
  color:var(--cobre);margin-bottom:2rem;max-width:20ch;
}

/* --- Proceso ------------------------------------------------------------- */

.proceso{display:grid;grid-template-columns:repeat(5,1fr);gap:0;}
.paso{padding:2.2rem 1.6rem 0 0;border-top:1px solid rgba(244,241,234,.16);}
.paso__num{
  font-family:var(--display);color:var(--cobre);
  font-size:.95rem;letter-spacing:.14em;display:block;margin-bottom:1.4rem;
}
.paso h3{font-size:.98rem;letter-spacing:.16em;margin-bottom:.9rem;}
.paso p{font-size:.9rem;line-height:1.65;color:var(--gris-claro);}

/* --- Contacto ------------------------------------------------------------ */

.contacto{position:relative;}
.contacto__fondo{position:absolute;inset:0;overflow:hidden;}
.contacto__fondo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.contacto__velo{position:absolute;inset:0;background:rgba(17,17,17,.88);}
.contacto .contenedor{position:relative;z-index:2;}

.contacto__rejilla{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(3rem,7vw,6rem);}

.datos{list-style:none;padding:0;margin:2.8rem 0 0;}
.datos li{padding:1.1rem 0;border-top:1px solid rgba(244,241,234,.14);}
.datos span{
  display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cobre);margin-bottom:.35rem;
}
.datos a:hover{color:var(--cobre);}

/* --- Formulario ---------------------------------------------------------- */

.formulario{display:grid;gap:1.6rem;}
.campo{display:flex;flex-direction:column;gap:.55rem;}
.campo label{
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-claro);
}
.campo input,.campo select,.campo textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(244,241,234,.28);
  color:var(--blanco-roto);font-family:var(--texto);font-size:1rem;
  padding:.7rem 0;border-radius:0;
  transition:border-color .3s ease;
}
.campo textarea{resize:vertical;min-height:110px;}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-bottom-color:var(--cobre);
}
.campo select{appearance:none;cursor:pointer;}
.campo select option{background:var(--grafito);color:var(--blanco-roto);}

.consentimiento{
  display:flex;gap:.8rem;align-items:flex-start;
  font-size:.82rem;line-height:1.6;color:var(--gris-claro);
}
.consentimiento input{margin-top:.35rem;accent-color:var(--cobre);flex:none;}
.consentimiento a{border-bottom:1px solid var(--cobre);}

.aviso-form{font-size:.85rem;letter-spacing:.02em;padding:.9rem 0;display:none;}
.aviso-form.ok{display:block;color:var(--cobre);}
.aviso-form.error{display:block;color:#E0846B;}

.miel{position:absolute;left:-9999px;opacity:0;}

/* --- Pie ----------------------------------------------------------------- */

.pie{background:var(--grafito-hondo);padding-block:clamp(4rem,7vw,6rem) 2.5rem;}
.pie__superior{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;
  gap:3rem;padding-bottom:3rem;
}
.pie__logo img{height:110px;width:auto;margin-bottom:1.6rem;}
.pie__tagline{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-claro);}
.pie h4{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cobre);margin:0 0 1.4rem;font-weight:500;
}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;}
.pie li a{font-size:.88rem;color:var(--gris-claro);}
.pie li a:hover{color:var(--blanco-roto);}
.pie__inferior{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  padding-top:2.2rem;border-top:1px solid rgba(244,241,234,.12);
  font-size:.75rem;color:var(--gris);
}
.pie__legal{display:flex;flex-wrap:wrap;gap:1.5rem;}
.pie__legal a:hover{color:var(--cobre);}

/* --- Botón WhatsApp flotante -------------------------------------------- */

.wa-flotante{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;
  width:54px;height:54px;border-radius:50%;
  background:var(--grafito-hondo);border:1px solid rgba(184,115,51,.5);
  display:grid;place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  transition:background-color .3s ease,transform .3s ease;
}
.wa-flotante:hover{background:var(--cobre);transform:translateY(-2px);}
.wa-flotante svg{width:26px;height:26px;fill:var(--blanco-roto);}

/* --- Visor de imágenes --------------------------------------------------- */

.visor{
  position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.97);
  display:none;place-items:center;padding:4rem 1.5rem;
}
.visor.activo{display:grid;}
.visor img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;}
.visor__cerrar{
  position:absolute;top:1.5rem;right:1.5rem;background:none;border:0;
  color:var(--blanco-roto);font-size:2rem;line-height:1;cursor:pointer;padding:.5rem;
}
.visor__pie{
  position:absolute;bottom:1.8rem;left:0;right:0;text-align:center;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-claro);
}

/* --- Revelado al hacer scroll -------------------------------------------- */

.revelar{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
.revelar.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.revelar{opacity:1;transform:none;}}

/* --- Página interior (legales) ------------------------------------------ */

.pagina-legal{padding-block:12rem var(--aire);}
.pagina-legal h1{margin-bottom:3rem;}
.pagina-legal h2{font-size:clamp(1.15rem,2vw,1.45rem);margin:3rem 0 1.2rem;}
.pagina-legal p,.pagina-legal li{color:var(--gris-claro);font-size:.98rem;max-width:72ch;}
.pagina-legal ul{padding-left:1.2rem;margin-bottom:1.4em;}
.pagina-legal li{margin-bottom:.5rem;}

/* --- Adaptación a pantallas pequeñas ------------------------------------ */

@media (max-width:1000px){
  .proceso{grid-template-columns:repeat(2,1fr);}
  .mosaico{grid-template-columns:1fr;}
  .mosaico figure:nth-child(1),.mosaico figure:nth-child(2),.mosaico figure:nth-child(3){grid-column:1;grid-row:auto;}
  .mosaico figure:nth-child(1) img{aspect-ratio:4/5;}
  .contacto__rejilla{grid-template-columns:1fr;}
  .pie__superior{grid-template-columns:1fr 1fr;}
}

@media (max-width:820px){
  .hamburguesa{display:block;}
  .nav{
    position:fixed;inset:0;background:var(--grafito-hondo);z-index:10;
    flex-direction:column;justify-content:center;gap:2.2rem;
    transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .menu-abierto .nav{transform:none;}
  .nav a{font-size:1rem;letter-spacing:.24em;}
  .nav__wa{padding:.8rem 1.8rem;}
  .nav__simbolo{width:64px;opacity:.5;margin-bottom:1rem;}

  .duo{grid-template-columns:1fr;}
  .duo--invertido .duo__media{order:0;}
  .servicios{grid-template-columns:1fr;}
  .servicio{padding-right:0;}
  .galeria{column-count:1;}
  .bajar{display:none;}
  .cabecera__logo img{height:44px;}
  .cabecera.compacta .cabecera__logo img{height:36px;}
  .proceso{grid-template-columns:1fr;}
  .paso{padding-right:0;padding-bottom:1.8rem;}
  .pie__superior{grid-template-columns:1fr;gap:2.5rem;}
  .pie__inferior{flex-direction:column;}
  .portada{min-height:92svh;}
  .boton{width:100%;text-align:center;}
  .acciones{gap:.9rem;}
  .enlace-fino{width:100%;text-align:center;padding:.9rem 0;}
}

.nav__simbolo{display:none;}
@media (max-width:820px){.nav__simbolo{display:block;}}