/* Aktual Design — Obras con el sistema visual vigente (Adrian, 2026-10-13). Aprobado por Adrian y aplicado el 2026-10-21.
   Se carga después de estilos.css y obras.css y solo cambia el aspecto: letras, colores, superficies y líneas.
   La distribución no se mueve: cada bloque conserva su medida y su lugar (las alturas de texto se igualan a propósito).
   - Letras: Host Grotesk para todo; Instrument Serif solo para los nombres de obra.
   - Paleta: espresso y nogal; crema para el texto y los botones; ocre solo en líneas, foco y datos.
   - Bordes rectos; sin halos, brillos ni baños de luz sobre las fotos; grano solo en los fondos.
   - Mayúsculas solo en los rótulos de datos (11 px) y en los botones, como en el resto del sitio.
   - La cabecera es la común (misma pieza que Inicio, Estudio y Qué hacemos). */

/* ---------- Letras del sistema (OFL, en /fuentes) ---------- */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/instrument-serif-latin-400-normal.woff2') format('woff2'); 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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/instrument-serif-latin-ext-400-normal.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Host Grotesk'; font-weight: 300 800; font-display: swap; src: url('../fuentes/host-grotesk-latin.woff2') format('woff2'); 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: 'Host Grotesk'; font-weight: 300 800; font-display: swap; src: url('../fuentes/host-grotesk-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Paleta vigente */
  --espresso: #1E1915; --nogal: #3B2E25; --bronce: #8C6A48; --ocre: #B8894F; --arena: #D8CBB6; --crema: #EFE8DC;
  --taupe-claro: #A69B8E; --ocre-hondo: #6B4A2B;
  --linea: rgb(239 232 220 / .22);
  --curva: cubic-bezier(.22, 1, .36, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .75 -.36'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Los nombres que usan estilos.css y obras.css, llevados a la paleta vigente */
  --carbon: var(--espresso);
  --carbon-hondo: var(--espresso);
  --carbon-claro: var(--nogal);        /* fondo de una foto mientras llega */
  --marfil: var(--crema);
  --texto-claro: var(--crema);
  --texto-suave: var(--arena);
  --tenue: var(--taupe-claro);         /* datos sobre espresso (6,4:1) */
  --mineral: var(--taupe-claro);
  --sombra: var(--espresso);
  --terracota: var(--bronce);
  --ambar: var(--ocre);                /* el acento: solo líneas, foco y datos */
  --ambar-rgb: 184 137 79;
  --ambar-boton: var(--crema);         /* los botones principales son crema, como en todo el sitio */
  --ambar-boton-luz: var(--arena);
  --luz: var(--crema);
  --luz-rgb: 239 232 220;
  --linea-oscura: var(--linea);
  --borde: var(--linea);
  --borde-fuerte: rgb(239 232 220 / .5);
  --vidrio-claro: transparent;
  --r-boton: 0; --r-imagen: 0; --r-panel: 0;
  --sombra-suave: none;
  --f-display: 'Host Grotesk', system-ui, sans-serif;
  --f-titulo: 'Host Grotesk', system-ui, sans-serif;
  --f-texto: 'Host Grotesk', system-ui, sans-serif;
  --f-obra: 'Instrument Serif', 'Times New Roman', serif;
}

/* ---------- Fondos: espresso con grano (sin el halo ámbar) ---------- */
.pagina-obras { background: var(--espresso); }
.pagina-obras .obras, .pagina-obras .propuestas, .pagina-obras .pie { background: var(--espresso) var(--grano) 0 0 / 180px 180px; }
/* Interiorismo conceptual: la misma penumbra cálida que su sección del Inicio, del lado de la imagen */
.pagina-obras .integral { background: radial-gradient(70% 80% at 72% 55%, rgb(107 74 43 / .38), transparent 70%), var(--espresso) var(--grano) 0 0 / 180px 180px; }

/* ---------- Cabecera común (la misma de Inicio, Estudio y Qué hacemos) ---------- */
.pagina-obras .cabecera { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px clamp(20px, 5vw, 96px); border: 0; background: none; color: var(--crema); -webkit-backdrop-filter: none; backdrop-filter: none;
  --tinta-cab: var(--crema); --fondo-cab: var(--espresso); --linea-cab: rgb(239 232 220 / .5);
  transition: transform .6s var(--curva), color .4s var(--curva); }
.pagina-obras .cabecera[data-tinta="oscura"] { color: var(--espresso); --tinta-cab: var(--espresso); --fondo-cab: var(--crema); --linea-cab: rgb(30 25 21 / .45); }
.pagina-obras .cabecera.oculta { transform: translate3d(0, -100%, 0); }
.pagina-obras .cabecera.translucida { background: rgb(30 25 21 / .58); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
.pagina-obras .cabecera.translucida[data-tinta="oscura"] { background: rgb(239 232 220 / .66); }
@media (prefers-reduced-transparency: reduce) {
  .pagina-obras .cabecera.translucida { background: var(--espresso); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
html.menu-abierto .pagina-obras .cabecera { transform: none; }
.pagina-obras .marca img { display: block; width: 52px; height: 52px; }
.pagina-obras .navegacion { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); margin-left: 0; font-size: 15px; font-weight: 500; }
.pagina-obras .navegacion a { position: relative; padding-block: 12px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; }
.pagina-obras .navegacion a::after { bottom: 8px; opacity: 1; transition: transform .3s var(--curva); }
.pagina-obras .navegacion .navegacion__cta { display: none; }
.pagina-obras .cabecera__acciones { display: flex; align-items: center; gap: 12px; }
.pagina-obras .idiomas { display: flex; gap: 0; padding: 0; border: 1px solid var(--linea-cab); border-radius: 0; font-size: 12px; letter-spacing: .08em; transition: border-color .4s var(--curva); }
.pagina-obras .idiomas button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 0; background: none; color: inherit; opacity: 1; font-size: 12px; font-weight: 600; letter-spacing: .08em; cursor: pointer; }
.pagina-obras .idiomas button[aria-pressed="true"] { color: var(--fondo-cab); background: var(--tinta-cab); }
.pagina-obras .boton--cabecera { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--tinta-cab); border-radius: 0;
  background: var(--tinta-cab); color: var(--fondo-cab); box-shadow: none; font-family: var(--f-texto); font-size: 12px; font-weight: 600; line-height: normal; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva), transform .3s var(--curva); }
.pagina-obras .boton--cabecera:hover { background: transparent; color: var(--tinta-cab); box-shadow: none; }
.pagina-obras .menu-boton { display: none; min-height: 44px; padding: 0 16px; border: 1px solid currentColor; border-radius: 0; background: none; color: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 1100px) {
  .pagina-obras .boton--cabecera { display: none; }
  .pagina-obras .navegacion { gap: 20px; }
}
@media (max-width: 899px) {
  .pagina-obras .marca img { width: 44px; height: 44px; }
  .pagina-obras .menu-boton { display: inline-flex; align-items: center; min-height: 44px; }
  .pagina-obras .idiomas { padding: 0; }
  .pagina-obras .navegacion { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--e2); padding: 96px clamp(20px, 5vw, 96px) 48px; background: var(--espresso); color: var(--crema);
    opacity: 0; visibility: hidden; transition: opacity .4s var(--curva), visibility 0s linear .4s; }
  .pagina-obras .navegacion a { font-family: var(--f-obra); font-size: 44px; font-weight: 400; line-height: 1.1; letter-spacing: 0; }
  .pagina-obras .navegacion a::after { display: none; }
  .pagina-obras .navegacion .navegacion__cta { display: inline-flex; align-items: center; margin-top: var(--e4); min-height: 56px; padding: 0 22px; border-radius: 0; background: var(--crema); color: var(--espresso);
    font-family: var(--f-texto); font-size: 14px; font-weight: 600; line-height: normal; letter-spacing: .08em; text-transform: uppercase; }
}

/* ---------- Títulos: Host Grotesk (los de sección) e Instrument Serif (los nombres de obra) ---------- */
.pagina-obras .obras__cabeza h1, .pagina-obras .propuestas h2, .pagina-obras .ficha__datos h3 { font-family: var(--f-texto); font-weight: 500; letter-spacing: -.035em; }
/* Interiorismo conceptual: grotesco fino, como su título en el Inicio */
.pagina-obras .integral h2 { font-family: var(--f-texto); font-weight: 300; letter-spacing: -.04em; }
.pagina-obras .ficha__cabeza h2, .pagina-obras .ficha__siguiente strong { font-family: var(--f-obra); font-weight: 400; letter-spacing: -.01em; }
.pagina-obras .obras__cabeza p, .pagina-obras .integral__intro, .pagina-obras .propuestas__intro, .pagina-obras .ficha__cabeza .ficha__descripcion { color: var(--arena); }

/* ---------- Rótulos de datos: 11 px en mayúsculas, como en el resto del sitio (la altura de línea se conserva) ---------- */
.pagina-obras .tarjeta__dato, .pagina-obras .filtros__rotulo, .pagina-obras .filtros__cuenta, .pagina-obras .filtros__limpiar, .pagina-obras .ficha__fila dt,
.pagina-obras .integral__imagen figcaption, .pagina-obras .propuestas__rotulo, .pagina-obras .propuesta__dato {
  font-family: var(--f-texto); font-size: 11px; font-weight: 500; line-height: 1.5825; letter-spacing: .2em; text-transform: uppercase; }
.pagina-obras .tarjeta__dato, .pagina-obras .filtros__rotulo, .pagina-obras .filtros__cuenta, .pagina-obras .ficha__fila dt,
.pagina-obras .integral__imagen figcaption, .pagina-obras .propuesta__dato { color: var(--taupe-claro); }
.pagina-obras .propuestas__rotulo { color: var(--ocre); }
.pagina-obras .etiqueta { font-family: var(--f-texto); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-claro); }
.pagina-obras .etiqueta--acento, .pagina-obras .etiqueta--propuesta { color: var(--ocre); }
/* «Quitar filtros»: línea fina ocre debajo, sin brillo */
.pagina-obras .filtros__limpiar { color: var(--crema); background-image: linear-gradient(var(--ocre), var(--ocre)); }

/* ---------- Filtros ---------- */
.pagina-obras .filtro { font-family: var(--f-texto); font-weight: 500; letter-spacing: -.01em; }
.pagina-obras .filtro::after { height: 1px; bottom: -1px; background: var(--crema); box-shadow: none; transition: transform .6s var(--curva); }
.pagina-obras .chip { border: 1px solid var(--linea); border-radius: 0; background: transparent; box-shadow: none; color: var(--crema); font-family: var(--f-texto); font-weight: 500; letter-spacing: .02em; }
.pagina-obras .chip:hover { border-color: rgb(239 232 220 / .5); background: transparent; }
.pagina-obras .chip[aria-pressed="true"] { border-color: var(--crema); background: var(--crema); color: var(--espresso); box-shadow: none; }

/* ---------- Tarjetas: sin luminaria ni baño de luz encima; esquinas rectas ---------- */
.pagina-obras .tarjeta::before { display: none; }
.pagina-obras .tarjeta__marco::after { display: none; }
.pagina-obras .tarjeta__marco::before { background: rgb(30 25 21 / .7); }
/* Nombre de obra en Instrument Serif: 4/3 del tamaño anterior con la misma altura de línea (21,6 px), así nada se mueve */
.pagina-obras .tarjeta__nombre { font-family: var(--f-obra); font-size: 1.5rem; font-weight: 400; line-height: .9; letter-spacing: 0; background-image: none; }
.pagina-obras .tarjeta__enlace:hover .tarjeta__nombre, .pagina-obras .tarjeta__enlace:focus-visible .tarjeta__nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: var(--ocre); }

/* ---------- Interiorismo conceptual: la línea de luz queda como filete ocre de 1 px, sin brillo ---------- */
.pagina-obras .integral__luz { background: var(--ocre); box-shadow: none; }
.pagina-obras .integral__luz::after { display: none; }
.pagina-obras .integral__incluye li { border-top-color: var(--linea); font-family: var(--f-texto); }
.pagina-obras .integral__incluye li:last-child { border-bottom-color: var(--linea); }

/* ---------- Botones: rectos, crema sobre espresso, sin brillo ---------- */
.pagina-obras .boton { border-radius: 0; box-shadow: none; font-family: var(--f-texto); letter-spacing: .08em; }
.pagina-obras .boton--ambar, .pagina-obras .boton--claro { border-color: var(--crema); background: var(--crema); color: var(--espresso); }
.pagina-obras .boton--ambar:hover, .pagina-obras .boton--ambar:focus-visible, .pagina-obras .boton--claro:hover { border-color: var(--arena); background: var(--arena); box-shadow: none; }
.pagina-obras .saltar { border-radius: 0; }

/* ---------- Propuestas de diseño ---------- */
.pagina-obras .propuesta__nombre { font-family: var(--f-texto); }
.pagina-obras .propuesta__abrir:focus-visible { border-radius: 0; }

/* ---------- Pie ---------- */
.pagina-obras .pie__datos a:hover, .pagina-obras .pie__datos a:focus-visible { color: var(--crema); }

/* ---------- Barra de acción del teléfono: recta, como el botón flotante del resto del sitio ---------- */
@media (max-width: 899px) {
  .pagina-obras .barra-accion { background: rgb(30 25 21 / .82); border-top-color: var(--linea); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .pagina-obras .barra-accion a { border-radius: 0; font-family: var(--f-texto); }
  .pagina-obras .barra-accion__principal { background: var(--crema); color: var(--espresso); }
  .pagina-obras .barra-accion__wa { border-color: rgb(239 232 220 / .5); background: transparent; color: var(--crema); }
}

/* ---------- Ficha de cada obra y visor ---------- */
.pagina-obras .ficha { background: var(--espresso); }
.pagina-obras .ficha::backdrop { background: rgb(30 25 21 / .7); }
.pagina-obras .ficha__barra { background: rgb(30 25 21 / .58); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
.pagina-obras .ficha__marca, .pagina-obras .visor__titulo, .pagina-obras .rejilla__vacia p { font-weight: 500; letter-spacing: -.01em; }
.pagina-obras .ficha__cerrar { border-radius: 0; }
.pagina-obras .visor__flecha { border: 1px solid rgb(239 232 220 / .45); border-radius: 0; background: rgb(30 25 21 / .35); }
.pagina-obras .visor__flecha:hover, .pagina-obras .visor__flecha:focus-visible { border-color: var(--crema); background: rgb(30 25 21 / .55); }
.pagina-obras .visor__cuenta { font-variant-numeric: tabular-nums; }
.pagina-obras .ficha__fila { border-top-color: var(--linea); }
.pagina-obras .ficha__fila:last-child { border-bottom-color: var(--linea); }
.pagina-obras .ficha__siguiente a:hover strong, .pagina-obras .ficha__siguiente a:focus-visible strong { color: var(--crema); text-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; text-decoration-color: var(--ocre); }
.pagina-obras .comparador__rotulo { border-radius: 0; }
@media (max-width: 599px) {
  .pagina-obras .visor__flecha { border-radius: 0; background: rgb(30 25 21 / .45); }
  /* Tarjetas estrechas: el rótulo conserva la separación anterior para no partirse en dos líneas (no se mueve nada) */
  .pagina-obras .tarjeta__dato { letter-spacing: .14em; }
}