/* marianoolmos.es
   Hoja única, escrita a mano. El oro viene del logotipo del cliente (#6d5d24
   medido sobre el PNG original); la tinta, el pergamino y el ladrillo se
   construyen alrededor. Sin framework y sin build: lo que se lee aquí es lo
   que sirve el servidor. */

/* ── Tipografías autoalojadas ─────────────────────────────────────────── */
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Fichas ───────────────────────────────────────────────────────────── */
:root {
  --oro: #6f5f28;
  --oro-medio: #8a7838;
  --oro-claro: #d3b968;
  --oro-papel: #e7d9ad;
  --tinta: #1b1610;
  --tinta-suave: #2a231a;
  --humo: #5a5044;
  --pergamino: #f7f2e8;
  --pergamino-hueso: #eee6d6;
  --texto: #241d15;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--pergamino);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

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

:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 3px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--pergamino); color: var(--texto); padding: 12px 18px;
}
.saltar:focus { left: 12px; top: 12px; }

.envoltura { max-width: 80rem; margin: 0 auto; padding: 0 32px; width: 100%; }
.envoltura--estrecha { max-width: 46rem; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.cabecera { position: absolute; inset: 0 0 auto; z-index: 30; }
.cabecera--solida { position: relative; background: var(--tinta); }

/* Velo bajo la barra: sin él, los últimos enlaces del menú caen sobre la parte
   clara de la fotografía y se quedan en 3,4:1. Medido, no estimado. */
.cabecera:not(.cabecera--solida)::before {
  content: ''; position: absolute; inset: 0 0 -64px; z-index: -1;
  background: linear-gradient(180deg,
    rgba(18, 13, 9, .92) 0%, rgba(18, 13, 9, .7) 52%, rgba(18, 13, 9, 0) 100%);
}

.cabecera__interior {
  display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px);
  min-height: 96px;
}

.marca { display: block; flex: 0 0 auto; line-height: 0; }
.marca img { width: clamp(250px, 21vw, 300px); height: auto; }

.navegacion { margin-left: auto; }
.navegacion ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(18px, 1.9vw, 28px);
}
.navegacion a {
  color: rgba(247, 242, 232, .9);
  text-decoration: none;
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 0; display: inline-block;
  border-bottom: 1px solid transparent;
}
.navegacion a:hover,
.navegacion a[aria-current] { color: var(--oro-papel); border-bottom-color: var(--oro-claro); }

.cabecera__telefono {
  font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); color: var(--pergamino);
  text-decoration: none; letter-spacing: .01em; white-space: nowrap;
}
.cabecera__telefono:hover { color: var(--oro-papel); }

.hamburguesa {
  display: none; margin-left: auto;
  background: none; border: 1px solid rgba(247, 242, 232, .35);
  width: 46px; height: 42px; padding: 11px 10px; cursor: pointer;
  flex-direction: column; justify-content: space-between;
}
.hamburguesa span { display: block; height: 2px; background: var(--pergamino); }
.hamburguesa span.visualmente-oculto { height: 1px; }

/* ── Portada ──────────────────────────────────────────────────────────── */
.portada { position: relative; overflow: hidden; background: var(--tinta); color: var(--pergamino); }

.portada__fondo { position: absolute; inset: 0; z-index: 0; }
.portada__fondo img { width: 100%; height: 100%; object-fit: cover; }
.portada__fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(103deg,
    rgba(20, 15, 10, .95) 0%, rgba(20, 15, 10, .9) 34%,
    rgba(20, 15, 10, .5) 66%, rgba(20, 15, 10, .62) 100%);
}

.portada__contenido {
  position: relative; z-index: 10;
  padding: 200px 0 90px;
}

.antetitulo {
  font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oro-claro); margin: 0 0 22px;
}
.antetitulo--oscuro { color: var(--oro); }
/* Sobre la banda dorada el crema se queda en 4,46:1; el pergamino sube a 5,63. */
.antetitulo--oro { color: var(--pergamino); }

.portada h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.9rem, 6.2vw, 5.2rem);
  line-height: .98; letter-spacing: -.025em;
  margin: 0 0 26px;
  font-variation-settings: 'opsz' 144;
}
.portada h1 em { font-style: normal; color: var(--oro-claro); }

.entradilla {
  font-size: clamp(1rem, 1.2vw, 1.13rem); line-height: 1.6;
  color: rgba(247, 242, 232, .84);
  max-width: 42ch; margin: 0 0 38px;
}
.entradilla--corta { max-width: 38ch; }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.boton {
  display: inline-block; text-decoration: none;
  background: var(--oro-papel); color: #17120c;
  padding: 16px 30px; font-size: 14.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--oro-papel);
  transition: background-color .2s ease, color .2s ease;
}
.boton:hover { background: #fff; border-color: #fff; }
.boton--hueco { background: transparent; color: var(--pergamino); border-color: rgba(247, 242, 232, .5); font-weight: 500; }
.boton--hueco:hover { background: rgba(247, 242, 232, .12); border-color: var(--pergamino); color: var(--pergamino); }
.boton--claro { background: var(--oro-papel); color: #17120c; }
.boton--oscuro { background: var(--tinta); color: var(--pergamino); border-color: var(--tinta); }
.boton--oscuro:hover { background: var(--oro); border-color: var(--oro); color: #fff; }

.enlace-subrayado {
  color: inherit; text-decoration: none; font-size: 15.5px;
  border-bottom: 1px solid var(--oro-claro); padding-bottom: 3px;
}
.enlace-subrayado:hover { border-bottom-width: 2px; }

/* Raíl de servicios bajo el titular */
.rail {
  position: relative; z-index: 10;
  border-top: 1px solid rgba(247, 242, 232, .2);
  background: rgba(20, 15, 10, .45);
}
.rail__interior { display: grid; grid-template-columns: repeat(3, 1fr); }
.rail__interior > div { padding: 26px 34px 30px; border-left: 1px solid rgba(247, 242, 232, .2); }
.rail__interior > div:first-child { padding-left: 0; border-left: 0; }
.rail h2 {
  font-family: var(--serif); font-weight: 400; font-size: 20px;
  margin: 0 0 8px; color: var(--pergamino);
}
.rail p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(247, 242, 232, .78); }

/* ── Secciones ────────────────────────────────────────────────────────── */
.seccion { padding: 104px 0; }
.seccion--claro { background: var(--pergamino); color: var(--texto); }
.seccion--oscuro { background: var(--tinta); color: var(--pergamino); }
.seccion--oro { background: var(--oro); color: var(--pergamino); }

.titular {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.06; letter-spacing: -.018em;
  margin: 0 0 26px; max-width: 20ch;
  font-variation-settings: 'opsz' 120;
}
.titular--claro { color: var(--pergamino); }

.seccion p { max-width: 62ch; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.rejilla-2--ajustada { grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }

.lamina figcaption {
  font-size: 13.5px; color: var(--humo); margin-top: 12px; padding-left: 14px;
  border-left: 2px solid var(--oro-medio);
}
.lamina--oscura figcaption { color: rgba(247, 242, 232, .62); }

.datos {
  list-style: none; margin: 40px 0 0; padding: 26px 0 0;
  border-top: 1px solid rgba(36, 29, 21, .18);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.datos li { display: flex; flex-direction: column; gap: 4px; }
.datos b {
  font-family: var(--serif); font-weight: 400; font-size: 27px; color: var(--oro);
  line-height: 1;
}
.datos span { font-size: 13.5px; line-height: 1.4; color: var(--humo); }

/* Productos */
.rejilla-productos { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.productos { list-style: none; margin: 0; padding: 0; }
.productos li {
  display: flex; align-items: baseline; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid rgba(247, 242, 232, .16);
}
.productos li:first-child { padding-top: 0; }
.productos__numero { font-size: 13px; letter-spacing: .1em; color: var(--oro-claro); }
.productos__nombre {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2.05rem); line-height: 1.15;
  font-variation-settings: 'opsz' 72;
}
/* Banda panorámica a sangre bajo el índice de productos */
.banda { margin: 76px 0 0; }
.banda__foto { height: 300px; overflow: hidden; }
.banda__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.banda figcaption {
  font-size: 13.5px; color: rgba(247, 242, 232, .62); padding-top: 14px;
}

/* Servicios */
.servicios {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 54px; border-top: 1px solid rgba(36, 29, 21, .2);
}
.servicios article { padding: 34px 38px 0; border-left: 1px solid rgba(36, 29, 21, .2); }
.servicios article:first-child { padding-left: 0; border-left: 0; }
.servicios h3 {
  font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2;
  margin: 0 0 12px;
}
.servicios p { margin: 0; font-size: 16px; color: #453a2c; }

/* Calidad */
.seccion--oro .titular { max-width: 16ch; }
.seccion--oro p { color: rgba(247, 242, 232, .92); font-size: 17.5px; }
.seccion--oro p + p { margin-bottom: 0; }

/* Contacto */
.rejilla-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contacto { list-style: none; margin: 0; padding: 0; }
.contacto li {
  padding: 22px 0; border-top: 1px solid rgba(247, 242, 232, .18);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.contacto li:first-child { border-top: 0; padding-top: 0; }
.contacto__etiqueta {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--oro-claro);
}
.contacto__dato {
  font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15;
  color: var(--pergamino); text-decoration: none;
}
a.contacto__dato:hover { color: var(--oro-papel); }
.contacto__dato--menor { font-size: 21px; word-break: break-word; }
.contacto .enlace-subrayado { margin-top: 6px; font-size: 14.5px; }

/* ── Documentos legales ───────────────────────────────────────────────── */
.documento { padding: 76px 0 96px; }
.documento .titular { max-width: 24ch; margin-bottom: 34px; }
.documento h2 {
  font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.25;
  margin: 44px 0 12px;
}
.documento p, .documento li { font-size: 16.5px; }
.documento a { color: var(--oro); }
.documento--error { min-height: 52vh; }

.ficha, .lista { list-style: none; margin: 24px 0; padding: 0; }
.ficha li {
  padding: 11px 0; border-bottom: 1px solid rgba(36, 29, 21, .14);
  display: grid; grid-template-columns: 200px 1fr; gap: 4px 16px; align-items: baseline;
}
.ficha b {
  font-weight: 600; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--humo);
}
.lista li { padding: 8px 0 8px 20px; position: relative; }
.lista li::before {
  content: ''; position: absolute; left: 0; top: 15px;
  width: 8px; height: 1px; background: var(--oro-medio);
}
.fecha { margin-top: 46px; font-size: 14px; color: var(--humo); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { background: var(--tinta); color: rgba(247, 242, 232, .72); padding: 26px 0; }
.pie__linea {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 32px;
}
.pie p { margin: 0; font-size: 13.5px; }
.pie a { color: rgba(247, 242, 232, .82); text-decoration: none; }
.pie a:hover { color: var(--oro-papel); text-decoration: underline; }
.pie__legales { color: rgba(247, 242, 232, .72); }
.pie__firma { color: rgba(247, 242, 232, .58); }
.pie__firma a { color: rgba(247, 242, 232, .72); }

/* ── Adaptación a pantallas menores ───────────────────────────────────── */
@media (max-width: 1040px) {
  .rejilla-2, .rejilla-productos, .rejilla-contacto { grid-template-columns: 1fr; gap: 48px; }
  .rejilla-2--ajustada { grid-template-columns: 1fr; gap: 28px; }
  .titular { max-width: none; }
}

/* El menú se pliega en cuanto la barra deja de tener sitio de sobra. */
@media (max-width: 1100px) {
  html { scroll-padding-top: 80px; }
  .cabecera { position: relative; background: var(--tinta); }
  .cabecera__interior { min-height: 78px; gap: 16px; }
  .marca img { width: 250px; }
  .cabecera__telefono { display: none; }
  .hamburguesa { display: flex; }

  .navegacion {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    background: var(--tinta); border-top: 1px solid rgba(247, 242, 232, .2);
    display: none; margin-left: 0;
  }
  .navegacion[data-abierta] { display: block; }
  .navegacion ul { flex-direction: column; gap: 0; padding: 8px 32px 22px; }
  .navegacion li { border-bottom: 1px solid rgba(247, 242, 232, .12); }
  .navegacion li:last-child { border-bottom: 0; }
  .navegacion a { display: block; padding: 15px 0; font-size: 14px; border-bottom: 0; }

  .portada__contenido { padding: 96px 0 72px; }
}

@media (max-width: 900px) {
  .marca img { width: 218px; }
  .portada__contenido { padding: 72px 0 64px; }
  .portada__fondo::after {
    background: linear-gradient(180deg,
      rgba(20, 15, 10, .9) 0%, rgba(20, 15, 10, .78) 45%, rgba(20, 15, 10, .93) 100%);
  }
  .rail__interior { grid-template-columns: 1fr; }
  .rail__interior > div {
    padding: 20px 0; border-left: 0; border-top: 1px solid rgba(247, 242, 232, .18);
  }
  .rail__interior > div:first-child { border-top: 0; padding-top: 22px; }

  .seccion { padding: 72px 0; }
  .servicios { grid-template-columns: 1fr; margin-top: 34px; }
  .servicios article { padding: 26px 0 0; border-left: 0; border-top: 1px solid rgba(36, 29, 21, .18); }
  .servicios article:first-child { border-top: 0; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .envoltura { padding: 0 20px; }
  .datos { grid-template-columns: 1fr; gap: 18px; }
  .contacto__dato { font-size: 29px; }
  .contacto__dato--menor { font-size: 18px; }
  .ficha li { grid-template-columns: 1fr; }
  .navegacion ul { padding: 8px 20px 22px; }
  .acciones { gap: 12px; }
  .acciones .boton { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}