/* Baryol Estudio — hoja de estilos */

@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}

:root{
  --grafito:#1D1E20;
  --grafito-2:#26272A;
  --grafito-3:#151618;
  --hueso:#F3F2EE;
  --piedra:#E8E6E0;
  --blanco:#FFFFFF;
  --texto:#38393C;
  --texto-suave:#5A5853;
  --claro-suave:#B7B5AF;
  --claro-tenue:#A9A7A1;
  --linea-oscura:#5B5C60;
  --acento:#CFCCC4;
  --ancho:1280px;
  --curva:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hueso);color:var(--grafito);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Jost,sans-serif;font-weight:500;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

.contenedor{max-width:var(--ancho);margin:0 auto;padding-left:24px;padding-right:24px}
.oscuro{background:var(--grafito);color:var(--hueso)}
.oscuro a:hover{color:var(--acento)}
.seccion{padding-top:104px;padding-bottom:104px}
.antetitulo{font-family:Jost,sans-serif;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:20px}
.oscuro .antetitulo{color:var(--acento)}
.titulo-seccion{font-size:clamp(34px,4vw,56px);line-height:1.05;letter-spacing:-.01em}

/* Logo */
.marca{display:flex;align-items:center;gap:14px}
.marca svg{flex:none}
.marca-texto{display:flex;flex-direction:column;line-height:1;font-family:Jost,sans-serif}
.marca-texto .baryol{font-size:20px;font-weight:500;letter-spacing:.32em}
.marca-texto .estudio{font-size:9px;font-weight:400;letter-spacing:.98em;margin-top:7px}

/* Botones */
.boton{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;font-weight:500;font-family:inherit;font-size:16px;border:0;cursor:pointer}
.boton-claro{background:var(--hueso);color:var(--grafito);border-radius:0 0 var(--curva) 0}
.oscuro .boton-claro:hover{background:var(--blanco);color:var(--grafito)}
.boton-borde{border:1px solid var(--linea-oscura);color:var(--hueso)}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:10;background:var(--grafito);color:var(--hueso);border-bottom:1px solid #333437}
.cabecera .contenedor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:16px;padding-bottom:16px}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-size:15px}
.menu a{padding:10px 0}
.menu .menu-contacto{padding:12px 22px;border:1px solid var(--hueso);border-radius:0 0 16px 0}

/* Portada */
.portada .contenedor{display:flex;flex-wrap:wrap;align-items:center;gap:72px;padding-top:96px;padding-bottom:120px}
.portada-texto{flex:1 1 480px;min-width:0}
.portada h1{font-weight:400;font-size:clamp(40px,5.6vw,80px);line-height:1.04;letter-spacing:-.015em}
.portada .entradilla{margin-top:32px;max-width:520px;font-size:18px;color:var(--claro-suave)}
.portada .botones{margin-top:44px;display:flex;flex-wrap:wrap;gap:14px}
.simbolo-fotos{flex:0 1 400px;min-width:0;max-width:400px;margin:0 auto;position:relative;width:100%;aspect-ratio:308/440}
.simbolo-fotos img{position:absolute;object-fit:cover;background:#2A2B2E}
.simbolo-fotos .bloque-alto{left:0;top:0;width:71.43%;height:40%}
.simbolo-fotos .bloque-bajo{left:0;top:50%;width:100%;height:50%;border-bottom-right-radius:28.57% 40%}

/* Bienvenida */
.bienvenida .contenedor{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.bienvenida-texto{flex:2 1 520px;min-width:0}
.bienvenida h2{font-size:clamp(30px,3.4vw,48px);line-height:1.15}
.bienvenida-texto .lead{margin-top:20px;font-family:Jost,sans-serif;font-size:clamp(22px,2.2vw,30px);line-height:1.35;font-weight:300;color:var(--texto)}
.indice{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;padding-top:8px;border-bottom:1px solid var(--grafito)}
.indice a{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--grafito);padding:16px 0;font-size:17px}
.indice a:hover{color:var(--texto-suave)}
.indice span{font-family:Jost,sans-serif;font-size:13px;letter-spacing:.2em}

/* Estudio */
.sec-estudio{background:var(--piedra)}
.sec-estudio .titulo-seccion{margin-bottom:56px}
.rejilla-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:56px 40px}
.tarjeta-foto{display:flex;flex-direction:column;gap:20px}
.tarjeta-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#2A2B2E}
.tarjeta-foto img.curva{border-bottom-right-radius:56px}
.tarjeta-foto h3{font-size:28px;line-height:1.2}
.tarjeta-foto p{font-size:17px;color:var(--texto)}

/* Servicios */
.cabeza-seccion{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px;margin-bottom:48px}
.cabeza-seccion > p{max-width:420px;color:var(--texto-suave)}
.oscuro .cabeza-seccion > p{color:var(--claro-suave)}
.servicios-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:16px}
.servicio{background:var(--blanco);padding:32px 28px 40px;display:flex;flex-direction:column;gap:14px;min-height:250px}
.servicio span{font-family:Jost,sans-serif;font-size:13px;letter-spacing:.2em;color:var(--texto-suave)}
.servicio h3{font-size:24px;line-height:1.2}
.servicio p{color:#46474A}
.servicio.destacado{background:var(--grafito);color:var(--hueso);border-bottom-right-radius:56px}
.servicio.destacado span{color:var(--claro-suave)}
.servicio.destacado p{color:var(--acento)}

/* Proyectos */
.cabeza-seccion .intro{flex:1 1 420px;min-width:0;max-width:640px}
.cabeza-seccion .intro p{margin-top:20px;color:var(--claro-suave)}
.proyectos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:44px 28px}
.proyecto{display:flex;flex-direction:column;gap:12px}
.proyecto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-bottom-right-radius:56px;background:#2A2B2E}
.proyecto-cabeza{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border-top:1px solid var(--linea-oscura);padding-top:14px;margin-top:4px}
.proyecto-cabeza h3{font-size:22px}
.proyecto-cabeza span,.proyecto > p{color:var(--claro-tenue);font-size:15px}
.proyecto-cabeza span{font-family:Jost,sans-serif;font-size:13px;letter-spacing:.2em;white-space:nowrap}

/* Arquitecto */
.arquitecto .contenedor{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start;padding-top:112px;padding-bottom:112px}
.arquitecto-foto{flex:1 1 300px;min-width:0;max-width:420px;display:flex;flex-direction:column;gap:24px}
.arquitecto-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-bottom-right-radius:72px;background:#2A2B2E}
.firma{display:flex;align-items:center;gap:14px;font-size:15px;color:var(--texto)}
.arquitecto-texto{flex:1 1 480px;min-width:0}
.bloques{margin-top:40px;display:flex;flex-direction:column;gap:32px}
.bloques div{border-top:1px solid var(--grafito);padding-top:20px}
.bloques h3{font-size:22px;margin-bottom:10px}
.bloques p{font-size:17px;color:var(--texto)}

/* Contacto */
.contacto .contenedor{display:flex;flex-wrap:wrap;gap:64px}
.contacto-datos{flex:1 1 340px;min-width:0}
.contacto-datos > p{margin:24px 0 28px;color:var(--claro-suave);max-width:440px}
.contacto-datos .boton{margin-bottom:40px}
.datos{margin:0;display:grid;gap:22px}
.datos dt{font-family:Jost,sans-serif;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--claro-tenue)}
.datos dd{margin:4px 0 0;font-size:19px;overflow-wrap:anywhere}
.formulario{flex:1 1 420px;min-width:0;display:grid;gap:20px;align-content:start}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px}
.formulario label{display:grid;gap:8px;font-size:14px;color:var(--claro-suave)}
.formulario input[type=text],.formulario input[type=email],.formulario select,.formulario textarea{width:100%;min-height:50px;padding:0 16px;background:var(--grafito-2);border:1px solid var(--linea-oscura);color:var(--hueso);font:inherit;font-size:16px;border-radius:0}
.formulario textarea{padding:14px 16px;resize:vertical}
.formulario .aceptar{display:flex;gap:12px;align-items:flex-start}
.formulario .aceptar input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--hueso);flex:none}
.formulario .aceptar a{text-decoration:underline}
.formulario .boton{justify-self:start}
.oculto{position:absolute;left:-9999px}

/* Pie */
.pie{background:var(--grafito-3);color:var(--claro-tenue)}
.pie .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px;padding-top:64px;padding-bottom:40px}
.pie .marca{flex-direction:column;align-items:flex-start;gap:18px;color:var(--hueso)}
.pie .marca-texto .baryol{font-size:22px}
.pie .marca-texto .estudio{font-size:10px;margin-top:8px}
.pie-legal{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:14px}
.pie-legal nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.pie-legal a{padding:10px 0}
.pie-legal a:hover{color:var(--hueso)}

/* Páginas legales */
.legal{padding-top:80px;padding-bottom:104px}
.legal .contenedor{max-width:820px}
.legal h1{font-size:clamp(34px,4vw,52px);line-height:1.1;margin-bottom:12px}
.legal .fecha{color:var(--texto-suave);margin-bottom:48px}
.legal h2{font-size:24px;margin:44px 0 14px;padding-top:20px;border-top:1px solid var(--grafito)}
.legal p,.legal li{color:var(--texto);font-size:17px}
.legal p + p{margin-top:14px}
.legal ul{padding-left:22px;margin:14px 0 0}
.legal li + li{margin-top:8px}
.legal a{text-decoration:underline}
.legal table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid #C9C6BE;vertical-align:top}
.legal .tabla{overflow-x:auto}
.volver{display:inline-flex;align-items:center;gap:8px;margin-bottom:40px;color:var(--texto-suave)}

/* Página de gracias */
.gracias{min-height:70vh;display:flex;align-items:center}
.gracias h1{font-size:clamp(36px,5vw,64px);font-weight:400;line-height:1.1}
.gracias p{margin:24px 0 40px;color:var(--claro-suave);max-width:520px;font-size:18px}

@media (max-width:640px){
  .seccion{padding-top:72px;padding-bottom:72px}
  .portada .contenedor{padding-top:56px;padding-bottom:80px;gap:56px}
  .arquitecto .contenedor{padding-top:72px;padding-bottom:72px}
  .pie-legal{align-items:flex-start}
  .menu{gap:0 20px;font-size:14px}
  .menu .menu-contacto{padding:10px 16px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}