:root{
  --petroleo:#16262F; --petroleo-claro:#1E3340; --lino:#EFE9DC; --travertino:#DCD3C1;
  --arena:#C2AC8A; --carbon:#141413; --espresso:#3A2418; --niebla:#C9D2D5; --niebla-tenue:#8FA0A6;
  --serif:'Cormorant Garamond',Georgia,Times,serif;
  --sans:'Inter','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono',Menlo,monospace;
  --pagina:1180px; --margen:56px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--lino);color:var(--carbon);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--petroleo-claro);text-decoration:none;transition:color .16s ease}
a:hover{color:#4E1E26}
::selection{background:var(--travertino);color:var(--carbon)}
svg{display:block}
.wrap{max-width:var(--pagina);margin:0 auto;padding:0 var(--margen)}
.rotulo{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:var(--espresso)}
.oscuro{background:var(--petroleo);color:var(--lino)}
.oscuro .rotulo{color:var(--arena)}

.cabecera{border-bottom:1px solid rgba(194,172,138,.35)}
.cabecera .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:22px;padding-bottom:22px}
.logo{display:flex;align-items:center;gap:15px}
.logo svg{flex:none}
.logo__texto{display:flex;flex-direction:column;gap:4px}
.logo__nombre{font-family:var(--serif);font-size:20px;line-height:1;letter-spacing:.28em;color:var(--lino)}
.logo__grupo{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:#A8B4B8}
.cabecera__lugar{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:#A8B4B8}

.hero{min-height:78vh;display:flex;align-items:center}
.hero .wrap{width:100%;padding-top:120px;padding-bottom:120px}
.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.hero__eyebrow span:first-child{width:26px;height:1px;background:var(--arena)}
.hero h1{font-family:var(--serif);font-weight:300;font-size:68px;line-height:1.1;letter-spacing:-.01em;margin:0 0 36px;max-width:22ch;text-wrap:pretty}
.hero h1 em{font-style:italic;color:var(--arena)}
.hero p{font-family:var(--serif);font-size:21px;line-height:1.7;color:var(--niebla);max-width:46ch;margin:0}

.principios{border-bottom:1px solid rgba(194,172,138,.45)}
.principios__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.principio{padding:64px 48px;border-right:1px solid rgba(194,172,138,.4)}
.principio:first-child{padding-left:0}
.principio:last-child{padding-right:0;border-right:0}
.principio__num{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--espresso);margin-bottom:18px}
.principio h2{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.25;margin:0 0 12px}
.principio p{font-family:var(--serif);font-size:16px;line-height:1.7;color:var(--espresso);margin:0;max-width:32ch}

.contacto .wrap{padding-top:104px;padding-bottom:104px;display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:start}
.contacto h2{font-family:var(--serif);font-weight:300;font-size:42px;line-height:1.14;margin:0;max-width:16ch;text-wrap:pretty}
.contacto h2 em{font-style:italic;color:var(--petroleo-claro)}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
.datos dt{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--espresso);margin-bottom:10px}
.datos dd{font-family:var(--serif);font-size:20px;color:var(--carbon);margin:0}
.datos dd a{color:var(--carbon)}
.datos dd a:hover{color:#4E1E26}

.pie{background:var(--petroleo);color:var(--niebla)}
.pie .wrap{padding-top:56px;padding-bottom:40px}
.pie__fila{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.pie__nombre{font-family:var(--serif);font-size:18px;letter-spacing:.28em;color:var(--lino)}
.pie__copy{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--niebla-tenue);text-align:right}
.pie__legal{border-top:1px solid rgba(194,172,138,.28);margin-top:32px;padding-top:22px}
.pie__legal p{font-family:var(--serif);font-style:italic;font-size:14px;line-height:1.7;color:var(--niebla-tenue);margin:0;max-width:70ch}

.error .wrap{padding-top:140px;padding-bottom:140px}
.error h1{font-family:var(--serif);font-weight:300;font-size:56px;line-height:1.1;margin:0 0 20px}
.error p{font-family:var(--serif);font-size:19px;line-height:1.7;color:var(--niebla);margin:0 0 40px;max-width:44ch}
.error a{font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.24em;color:var(--lino);border-bottom:1px solid var(--arena);padding-bottom:7px}
.error a:hover{color:var(--arena)}

@media (max-width:900px){
  :root{--margen:24px}
  .hero{min-height:auto}
  .hero .wrap{padding-top:88px;padding-bottom:88px}
  .hero h1{font-size:42px}
  .principios__grid{grid-template-columns:1fr}
  .principio{padding:32px 0;border-right:0;border-bottom:1px solid rgba(194,172,138,.4)}
  .principio:last-child{border-bottom:0}
  .contacto .wrap{grid-template-columns:1fr;gap:40px}
  .datos{grid-template-columns:1fr}
  .pie__fila{flex-direction:column;align-items:flex-start;gap:24px}
  .pie__copy{text-align:left}
  .error h1{font-size:38px}
}