:root {
  /* Paleta «Petróleo»: azul verdoso profundo con detalles dorados. */
  --papel: #f6f7f5;
  --papel-2: #eaeeeb;
  --superficie: #ffffff;
  --tinta: #13202a;
  --tinta-suave: #52606a;
  --regla: #d9e0dc;
  --acento: #0d5563;
  --acento-suave: #e0edef;
  --dorado: #a67c33;
  --libro-1a: #1d3441; --libro-1b: #13202a;
  --libro-2a: #12697a; --libro-2b: #0b4450;
  --libro-3a: #8a6a34; --libro-3b: #5e4520;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 10px;
  --ancho: 1140px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #11181b;
    --papel-2: #172024;
    --superficie: #1c262a;
    --tinta: #e6ecea;
    --tinta-suave: #9eadb1;
    --regla: #2b393e;
    --acento: #7cc3cf;
    --acento-suave: #1b353b;
    --dorado: #d2ad6b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 140px; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 16px; top: 16px; background: var(--superficie); padding: 8px 12px; z-index: 50; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--regla); }
.cabecera-fila { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 10px; }
.marca { text-decoration: none; display: grid; line-height: 1.15; margin-right: auto; }
.marca-nombre { font-family: var(--serif); font-size: 23px; font-weight: 700; color: var(--acento); }
.marca-bajada { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 3px; }
.buscador-mini input {
  width: 240px; padding: 8px 12px 8px 34px; border: 1px solid var(--regla); border-radius: 999px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23889' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 12px center no-repeat;
  font: inherit; font-size: 14px; color: inherit;
}
.menu-fila { display: flex; flex-wrap: wrap; gap: 2px 22px; padding-bottom: 10px; font-size: 14.5px; font-weight: 500; }
.menu a { text-decoration: none; color: var(--tinta-suave); padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: var(--tinta); }
.menu a[aria-current="page"] { color: var(--acento); border-bottom-color: var(--acento); }
.menu .menu-vocalia { margin-left: auto; color: var(--acento); }
.menu-boton { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-boton span { display: block; width: 22px; height: 2px; background: var(--tinta); margin: 5px 0; transition: transform 0.2s; }

/* ---------- Portada ---------- */
.portada { padding: 56px 0 48px; border-bottom: 1px solid var(--regla); background: linear-gradient(180deg, var(--papel-2), var(--papel)); }
.portada-fila { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.sobretitulo { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dorado); font-weight: 600; margin: 0 0 12px; }
.portada h1 { font-size: clamp(36px, 5vw, 56px); margin: 0 0 16px; }
.portada-cargos { font-size: 18px; color: var(--tinta-suave); margin: 0 0 28px; }
.portada-foto { margin: 0; }
.portada-foto img { border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(27, 36, 51, 0.45); aspect-ratio: 8 / 5; object-fit: cover; width: 100%; }
.portada-foto figcaption { font-size: 13px; color: var(--tinta-suave); margin-top: 10px; }
.buscador-grande { display: flex; gap: 8px; max-width: 560px; margin: 16px 0; }
.buscador-grande input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--regla); border-radius: var(--radio); background: var(--superficie); font: inherit; color: inherit; }
.buscador-grande button, .boton { background: var(--acento); color: var(--papel); border: 0; border-radius: var(--radio); padding: 0 22px; font: inherit; font-weight: 600; cursor: pointer; }
.boton { padding: 12px 26px; justify-self: start; }

.presentacion { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding-top: 56px; padding-bottom: 8px; }
.presentacion h2 { font-size: 28px; margin: 0; }
.presentacion-texto { max-width: 760px; font-family: var(--serif); font-size: 19px; line-height: 1.65; }
.presentacion-texto p { margin: 0 0 16px; }
.presentacion-texto p:first-child::first-letter { float: left; font-size: 3.4em; line-height: 0.85; padding: 6px 10px 0 0; color: var(--acento); font-weight: 700; }
.presentacion-mas { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--acento); text-decoration: none; }
.bloque-inicio { padding-top: 48px; padding-bottom: 48px; }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta {
  display: flex; flex-direction: column; gap: 8px; padding: 24px; text-decoration: none; background: var(--superficie);
  border: 1px solid var(--regla); border-radius: 14px; transition: border-color 0.15s, transform 0.15s;
}
.tarjeta:hover { border-color: var(--acento); transform: translateY(-2px); }
.tarjeta h2 { font-size: 21px; margin: 0; }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 15px; flex: 1; }
.tarjeta-dato { font-size: 13px; color: var(--acento); font-weight: 600; }

.franja { background: var(--papel-2); border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); padding: 44px 0; }
.franja-cabecera { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.franja-cabecera h2 { margin: 0; font-size: 28px; }
.franja-cabecera a { color: var(--acento); font-weight: 600; text-decoration: none; font-size: 15px; }
.libros { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
.libro {
  position: relative; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; padding: 14px 12px 14px 20px; text-decoration: none;
  background: linear-gradient(135deg, var(--libro-1a), var(--libro-1b)); color: #f3eee6; border-radius: 4px 10px 10px 4px;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.55); transition: transform 0.15s;
}
.libro:nth-child(3n + 2) { background: linear-gradient(135deg, var(--libro-2a), var(--libro-2b)); }
.libro:nth-child(3n) { background: linear-gradient(135deg, var(--libro-3a), var(--libro-3b)); }
.libro:hover { transform: translateY(-3px); }
.libro-lomo { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: rgba(255, 255, 255, 0.14); border-radius: 4px 0 0 4px; }
.libro-titulo { font-family: var(--serif); font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }
.libro-titulo small { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; opacity: 0.8; margin-top: 6px; }

.dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.destacado { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: center; text-decoration: none; background: var(--superficie); border: 1px solid var(--regla); border-radius: 14px; overflow: hidden; }
.destacado img { height: 100%; object-fit: cover; }
.destacado > div { padding: 22px 22px 22px 0; }
.destacado h2 { margin: 0 0 6px; font-size: 22px; }
.destacado p { margin: 0; color: var(--tinta-suave); }
.destacado-texto { grid-template-columns: 1fr; background: var(--acento-suave); border-color: transparent; }
.destacado-texto > div { padding: 24px; }
.destacado:hover { border-color: var(--acento); }

/* ---------- Páginas internas ---------- */
.encabezado-pagina { padding: 44px 0 28px; border-bottom: 1px solid var(--regla); background: var(--papel-2); }
.encabezado-pagina h1 { font-size: clamp(30px, 4vw, 44px); margin: 0; }
.bajada { color: var(--tinta-suave); font-size: 17px; margin: 10px 0 0; max-width: 760px; }
.migas { font-size: 14px; margin-bottom: 6px; }
.migas a { color: var(--acento); text-decoration: none; font-weight: 500; }
.pagina { padding-top: 36px; padding-bottom: 72px; }
.con-indice { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.indice { position: sticky; top: 150px; display: grid; gap: 2px; font-size: 14px; max-height: calc(100vh - 170px); overflow-y: auto; }
.indice-titulo { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 8px; font-weight: 600; }
.indice a { text-decoration: none; color: var(--tinta-suave); padding: 5px 0 5px 12px; border-left: 2px solid var(--regla); }
.indice a:hover { color: var(--acento); border-left-color: var(--acento); }
.secciones { display: grid; gap: 40px; min-width: 0; }
.seccion h2 { font-size: 25px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--regla); }
.seccion h2 a { text-decoration: none; }
.subtitulo { font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dorado); margin: 22px 0 8px; font-weight: 600; }
.texto { margin: 8px 0; max-width: 780px; }
.texto a { color: var(--acento); }
.imagen { max-height: 90px; width: auto; margin: 6px 0 12px; }

.lista-documento, .lista-enlace { display: grid; gap: 6px; margin: 8px 0; }
.doc, .enlace {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; text-decoration: none;
  background: var(--superficie); border: 1px solid var(--regla); border-radius: var(--radio); transition: border-color 0.15s, background 0.15s;
}
.enlace { grid-template-columns: 1fr auto; font-weight: 500; }
.doc:hover, .enlace:hover { border-color: var(--acento); background: var(--acento-suave); }
.doc-tipo { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 5px; background: var(--papel-2); color: var(--tinta-suave); min-width: 58px; text-align: center; }
.doc-pdf { background: #f6e3e5; color: #8f1d2c; }
.doc-word { background: #e2ebf7; color: #1f4f8f; }
.doc-diapositivas { background: #f8ead9; color: #95541a; }
@media (prefers-color-scheme: dark) {
  .doc-pdf { background: #4a2328; color: #f2b3bb; }
  .doc-word { background: #22344d; color: #a9c6ef; }
  .doc-diapositivas { background: #45321f; color: #eec59a; }
}
.doc-titulo { min-width: 0; overflow-wrap: anywhere; }
.doc-peso { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }
.flecha { color: var(--acento); }

/* Galería */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--papel-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.foto:hover img { transform: scale(1.04); }
.visor { position: fixed; inset: 0; background: rgba(10, 12, 16, 0.92); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; z-index: 60; }
.visor img { max-height: 88vh; max-width: 100%; margin: auto; border-radius: 6px; }
.visor button { background: none; border: 0; color: #fff; font-size: 34px; cursor: pointer; height: 100%; }
.visor .visor-cerrar { position: absolute; top: 12px; right: 16px; height: auto; font-size: 28px; }
.video { position: relative; display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video .play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 26px; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* Formulario */
.formulario { display: grid; gap: 16px; max-width: 640px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulario label { display: grid; gap: 6px; font-weight: 500; font-size: 14.5px; }
.formulario input, .formulario textarea { padding: 11px 13px; border: 1px solid var(--regla); border-radius: var(--radio); background: var(--superficie); font: inherit; color: inherit; font-weight: 400; }
.trampa { position: absolute; left: -9999px; }
.aviso { padding: 16px 20px; border-radius: var(--radio); margin: 0; }
.aviso h2 { border: 0; padding: 0; margin: 0 0 6px; }
.aviso-ok { background: var(--acento-suave); }
.aviso-error { background: var(--acento-suave); color: var(--acento); font-weight: 500; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--regla); background: var(--papel-2); padding: 36px 0; font-size: 14px; color: var(--tinta-suave); }
.pie-fila { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; }
.pie-nombre { font-family: var(--serif); font-size: 18px; color: var(--tinta); font-weight: 600; margin: 0 0 4px; }
.pie p { margin: 0; }
.pie-menu { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: flex-end; align-content: start; }
.pie-menu a { text-decoration: none; }
.pie-menu a:hover { color: var(--acento); }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .portada-fila, .dos-columnas, .con-indice, .pie-fila, .presentacion { grid-template-columns: 1fr; }
  .presentacion { gap: 12px; padding-top: 40px; }
  .presentacion-texto { font-size: 17.5px; }
  .portada-foto { order: -1; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .libros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .indice { display: none; }
  .pie-menu { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .contenedor { padding: 0 16px; }
  html { scroll-padding-top: 80px; }
  .buscador-mini { display: none; }
  .menu-boton { display: block; }
  .menu { display: none; border-top: 1px solid var(--regla); }
  .menu.abierto { display: block; }
  .menu-fila { flex-direction: column; gap: 0; padding: 8px 16px 14px; font-size: 16px; }
  .menu a { padding: 10px 0; border-bottom: 1px solid var(--regla); }
  .menu a[aria-current="page"] { border-bottom-color: var(--regla); }
  .menu .menu-vocalia { margin-left: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .portada { padding-top: 24px; }
  .tarjetas, .fila-campos { grid-template-columns: 1fr; }
  .destacado { grid-template-columns: 1fr; }
  .destacado img { height: 180px; }
  .destacado > div { padding: 0 20px 20px; }
  .doc { grid-template-columns: auto 1fr; }
  .doc-peso { grid-column: 2; }
  .libros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .visor { grid-template-columns: 40px 1fr 40px; }
}