/*
Theme Name: MG Administraciones
Theme URI: https://www.isabelmorenogreses.es
Author: Vicent Martí
Description: Tema a medida para el despacho de M.ª Isabel Moreno Greses. Marfil, grafito y granate; Lora para titulares. Reproduce la portada aprobada y la arquitectura del rediseño de 2026.
Version: 0.1.0
Requires at least: 6.1
Requires PHP: 8.0
Text Domain: mg-administraciones
*/

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/lora-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-italic.woff2') format('woff2');
}

:root {
  --marfil: #F6F2EF;
  --marfil-claro: #FBF8F5;
  --grafito: #2B2A2C;
  --grafito-suave: #4A4849;
  --apagado: #7A7470;
  --granate: #7E1A29;
  --granate-oscuro: #6A1522;
  --linea: #E4DDD5;
  --linea-fuerte: #D5CCC2;
  --sans: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--marfil);
  color: var(--grafito);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

a { color: var(--granate); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--granate);
  outline-offset: 3px;
  border-radius: 2px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--granate);
  color: #FDFBF9;
  padding: 10px 18px;
  z-index: 100;
}
.salto-contenido:focus { left: 0; }

/* ===== Cabecera ===== */
/* Ojo: estas clases conviven con .contenedor en el mismo elemento —
   padding-block para no pisar el padding lateral del contenedor. */
.cabecera-sitio { padding-block: 26px; }
.cabecera-fila { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.logo { line-height: 1.1; }
.logo a { display: block; color: inherit; }
.logo .mg {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 42px;
  color: var(--granate);
  letter-spacing: 0.01em;
}
.logo .admin { font-size: 14px; letter-spacing: 0.34em; color: var(--grafito); margin-top: 2px; }
.logo .titular { font-family: var(--serif); font-size: 13.5px; color: var(--apagado); margin-top: 5px; }
nav.principal { display: flex; gap: 30px; margin-left: auto; flex-wrap: wrap; }
nav.principal a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grafito);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
nav.principal a:hover { color: var(--granate); }
nav.principal a[aria-current="page"] { color: var(--granate); border-bottom-color: var(--granate); }

/* Botón de menú: solo existe en pantallas estrechas (ver media query). */
.menu-boton { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 24px;
  border: 1.5px solid var(--granate);
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn .flecha { font-size: 16px; line-height: 1; }
.btn-solido { background: var(--granate); color: #FDFBF9; }
.btn-solido:hover { background: var(--granate-oscuro); border-color: var(--granate-oscuro); color: #FDFBF9; }
.btn-borde { color: var(--granate); }
.btn-borde:hover { background: rgba(126, 26, 41, 0.06); }

/* ===== Hero (inicio) ===== */
/* La primera pantalla termina donde empieza la franja de valores: el hero
   ocupa el viewport menos la cabecera (~148px con el logo a tres líneas),
   con el contenido centrado en vertical. El max() evita que se aplaste
   en ventanas bajas. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(1150px, max(540px, calc(100vh - 148px)));
  min-height: min(1150px, max(540px, calc(100svh - 148px)));
  display: grid;
  align-items: center;
}
/* En grid, el margin auto del contenedor anula el stretch y lo encoge a su
   contenido; el width lo devuelve a su ancho normal. */
.hero > .contenedor { width: 100%; }
.hero-foto {
  position: absolute;
  top: 0; bottom: 0;
  left: 42%;
  /* El borde derecho de la foto se alinea con el del contenedor de 1200px
     en vez de sangrar hasta el borde del navegador, que era lo único de la
     página que rompía los márgenes simétricos. */
  right: max(32px, calc((100% - 1200px) / 2 + 32px));
  /* Iglesia de la Asunción, plaça de Benimaclet. Foto CC0 de Erik Albers
     (Wikimedia Commons), recortada a la ventana iglesia + palmera. */
  background: url('assets/img/hero-benimaclet.jpg') center / cover no-repeat;
  /* Los navegadores sin image-set(type()) se quedan con el jpg de arriba. */
  background-image: image-set(
    url('assets/img/hero-benimaclet.webp') type('image/webp'),
    url('assets/img/hero-benimaclet.jpg') type('image/jpeg')
  );
}
.hero-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--marfil) 0%, rgba(246,242,239,0) 38%);
}
.hero-foto .pie-foto {
  position: absolute;
  right: 30px; bottom: 24px;
  text-align: right;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FDFBF9;
  text-shadow: 0 1px 8px rgba(30,25,20,0.55);
}
.hero-contenido { position: relative; z-index: 1; max-width: 560px; padding: 64px 0 72px; }
.kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--grafito-suave);
  margin-bottom: 30px;
}
.kicker::after { content: ''; width: 88px; height: 1px; background: var(--granate); opacity: 0.55; }
h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--grafito);
  text-wrap: balance;
}
h1 .granate { color: var(--granate); }
.hero-sub {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.4;
  color: var(--grafito-suave);
  margin-top: 30px;
  max-width: 27ch;
}
.hero-regla { width: 74px; height: 3px; background: var(--granate); margin: 30px 0 26px; }
.hero-desde { font-family: var(--serif); font-size: 19.5px; color: var(--grafito-suave); max-width: 30ch; }

.credenciales {
  display: flex;
  align-items: stretch;
  margin-top: 38px;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  flex-wrap: wrap;
}
.credencial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 26px 18px 0;
}
.credencial + .credencial { border-left: 1px solid var(--linea); padding-left: 26px; }
/* Alturas distintas para que los dos logos pesen visualmente lo mismo:
   el del ICAV es compacto y el del CAF es un lockup muy apaisado.
   El margen del CAF completa la misma banda de 42px, así los textos
   de las dos credenciales arrancan a la misma altura. */
.logo-colegio { display: block; width: auto; }
.logo-icav { height: 42px; }
.logo-caf { height: 32px; margin: 5px 0; }
.credencial p { font-size: 14.5px; line-height: 1.45; color: var(--grafito-suave); max-width: 24ch; }
.credencial strong { color: var(--grafito); font-weight: 600; }
.hero-botones { display: flex; gap: 18px; margin-top: 38px; flex-wrap: wrap; }

/* Pantallas de portátil (1080p de alto o menos): el hero a escala completa no
   cabe en una pantalla, así que se compacta el ritmo vertical para que la
   primera pantalla termine justo donde empieza la franja de valores. */
@media (min-width: 921px) and (max-height: 1020px) {
  .hero-contenido { padding: 40px 0 48px; }
  .kicker { margin-bottom: 20px; }
  .hero h1 { font-size: clamp(42px, 5vw, 60px); }
  .hero-sub { font-size: 20px; margin-top: 22px; }
  .hero-regla { margin: 22px 0 18px; }
  .hero-desde { font-size: 17.5px; }
  .credenciales { margin-top: 26px; }
  .credencial { padding-block: 14px; }
  .hero-botones { margin-top: 28px; }
}

/* ===== Franja de valores ===== */
.valores { background: var(--marfil-claro); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.valores-malla { display: grid; grid-template-columns: repeat(4, 1fr); }
.valor { display: flex; gap: 18px; padding: 44px 30px; }
.valor + .valor { border-left: 1px solid var(--linea); }
.valor svg { flex: none; width: 34px; height: 34px; stroke: var(--granate); margin-top: 4px; }
.valor h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--granate); }
.valor p { font-size: 15px; line-height: 1.55; color: var(--grafito-suave); margin-top: 6px; }

/* ===== Bloques comunes ===== */
section.bloque { padding-block: 88px; }
.bloque + .bloque { border-top: 1px solid var(--linea); }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--granate);
  margin-bottom: 18px;
}
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 22ch;
}
.prosa { max-width: 62ch; }
.prosa p { margin-top: 20px; color: var(--grafito-suave); }
.prosa p strong { color: var(--grafito); }
.prosa h2, .prosa h3 { margin-top: 40px; }
.prosa ul, .prosa ol { margin: 16px 0 0 22px; color: var(--grafito-suave); }
.prosa li { margin-top: 8px; }

.criterio { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.criterio .prosa p:first-of-type { margin-top: 0; }

.areas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 54px; }
.area {
  background: var(--marfil-claro);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--granate);
  padding: 46px 44px 42px;
  display: flex;
  flex-direction: column;
}
.area h3 { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.2; color: var(--grafito); }
.area .lema { font-family: var(--serif); font-style: italic; font-size: 17.5px; color: var(--granate); margin-top: 12px; }
.area p.descripcion { color: var(--grafito-suave); margin-top: 18px; font-size: 16px; }
.area ul { list-style: none; margin-top: 22px; }
.area li {
  font-size: 15.5px;
  color: var(--grafito-suave);
  padding: 8px 0 8px 24px;
  position: relative;
  border-top: 1px solid var(--linea);
}
.area li::before {
  content: '';
  position: absolute;
  left: 2px; top: 17px;
  width: 9px; height: 1.5px;
  background: var(--granate);
}
.area .btn { margin-top: 30px; align-self: flex-start; }

.principios { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.principio h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; max-width: 18ch; }
.principio .regla { width: 52px; height: 2.5px; background: var(--granate); margin: 20px 0 4px; }
.principio p { color: var(--grafito-suave); margin-top: 18px; }

.cierre { background: var(--grafito); color: #EDE8E2; padding: 96px 0; }
.cierre-malla { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; }
.cierre .anyo { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 7vw, 92px); line-height: 1; color: #F6F2EF; }
.cierre .anyo span { color: #C9707C; }
.cierre .desde-label { font-size: 12.5px; letter-spacing: 0.3em; text-transform: uppercase; color: #A8A19B; margin-bottom: 14px; }
.cierre p { color: #C9C2BB; margin-top: 18px; max-width: 58ch; }
.cierre p.destacada { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: #EDE8E2; margin-top: 0; }
.cierre .btn { margin-top: 34px; border-color: #C9707C; color: #F6F2EF; background: transparent; }
.cierre .btn:hover { background: rgba(201, 112, 124, 0.14); }

/* ===== Interiores ===== */
.cabecera-pagina { padding-block: 60px 0; }
.cabecera-pagina h1 { font-size: clamp(36px, 4.6vw, 58px); max-width: 21ch; }
.cabecera-pagina .intro {
  font-size: 19px;
  color: var(--grafito-suave);
  max-width: 62ch;
  margin-top: 26px;
}
.cabecera-pagina .firma {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--granate);
  margin-top: 26px;
}
/* Firma con el sello del colegio (servicios jurídicos y herencias). */
.firma-colegiada {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}
.firma-colegiada .logo-icav { height: 38px; }
.firma-colegiada .firma { margin-top: 0; }
.cabecera-pagina .acciones { margin-top: 34px; display: flex; gap: 18px; flex-wrap: wrap; }

/* Cabecera interior a dos columnas: titular a la izquierda, intro y firma a la
   derecha. Evita la columna muerta en pantallas anchas. */
.cabecera-malla {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 88px;
  align-items: start;
  margin-top: 34px;
}
.cabecera-apoyo .intro:first-child { margin-top: 0; }

.materias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: 56px;
}
.materia { background: var(--marfil-claro); padding: 36px 38px; }
.materia h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.25; color: var(--grafito); }
.materia p { font-size: 15.5px; color: var(--grafito-suave); margin-top: 12px; }
.materia .ver {
  display: inline-block;
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Variante en lista editorial: para páginas de servicios sin imágenes,
   filas tipo sumario a todo el ancho — título a la izquierda, descripción
   a la derecha — con separadores finos entre materias. */
.materias-lista { margin-top: 56px; }
.materias-lista .materia {
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 88px;
  padding: 36px 0;
  border-top: 1px solid var(--linea);
}
.materias-lista .materia:last-child { border-bottom: 1px solid var(--linea); }
.materias-lista .materia h3 { grid-column: 1; grid-row: 1; font-size: 23px; max-width: 20ch; }
.materias-lista .materia p { grid-column: 2; grid-row: 1; margin-top: 0; max-width: 58ch; font-size: 16px; }
.materias-lista .materia .ver { grid-column: 2; grid-row: 2; }

.panel {
  border: 1px solid var(--linea);
  border-left: 3px solid var(--granate);
  background: var(--marfil-claro);
  padding: 40px 44px;
  margin-top: 64px;
  max-width: 860px;
}
.panel h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.25; }
.panel p { color: var(--grafito-suave); margin-top: 14px; max-width: 65ch; }
.panel .btn { margin-top: 26px; }

/* Panel ancho: misma retícula que las filas de materias, para que el cierre
   de las páginas de servicios ocupe el contenedor completo. */
.panel-ancho {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 88px;
  padding: 46px 48px;
}
.panel-ancho h3 { grid-column: 1; grid-row: 1; max-width: 16ch; }
.panel-ancho p { grid-column: 2; max-width: 58ch; }
.panel-ancho p:first-of-type { margin-top: 0; }
.panel-ancho .btn { grid-column: 2; justify-self: start; }

/* Sección partida: cabecera de sección a la izquierda, contenido a la derecha. */
.seccion-partida {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 88px;
  align-items: start;
}

/* Páginas de lectura (legales): columna centrada tipo documento. */
.pagina-lectura { max-width: 680px; }
.pagina-lectura .prosa { max-width: none; }

/* En la malla de propuesta el formulario comparte fila con la intro. */
.malla-propuesta .formulario { margin-top: 0; }

.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 56px; }
.paso .num { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; color: var(--granate); }
.paso h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin-top: 14px; }
.paso p { font-size: 15px; color: var(--grafito-suave); margin-top: 10px; }

details.faq { border-top: 1px solid var(--linea); max-width: 820px; }
details.faq:last-of-type { border-bottom: 1px solid var(--linea); }
details.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 300;
  color: var(--granate);
}
details.faq[open] summary::after { content: '−'; }
details.faq .respuesta { padding: 0 44px 26px 0; color: var(--grafito-suave); max-width: 68ch; }

/* Despacho */
.despacho-malla { display: grid; grid-template-columns: 7fr 4fr; gap: 72px; align-items: start; }
.foto-reservada {
  aspect-ratio: 3 / 4;
  border: 1.5px dashed var(--linea-fuerte);
  background: var(--marfil-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--apagado);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 20px;
}
.foto-despacho { width: 100%; height: auto; display: block; }
.tarjeta-credencial {
  border: 1px solid var(--linea);
  border-top: 3px solid var(--granate);
  background: var(--marfil-claro);
  padding: 34px 36px;
  margin-top: 40px;
  max-width: 480px;
}
/* Mientras el despacho no tiene foto, la tarjeta encabeza su columna. */
.tarjeta-credencial:first-child { margin-top: 0; }
.tarjeta-credencial .nombre { font-family: var(--serif); font-weight: 500; font-size: 23px; }
.tarjeta-credencial ul { list-style: none; margin-top: 16px; }
.tarjeta-credencial li { padding: 9px 0; border-top: 1px solid var(--linea); font-size: 15px; color: var(--grafito-suave); }
.tarjeta-logos {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}
.tarjeta-logos .logo-icav { height: 36px; }
.tarjeta-logos .logo-caf { height: 27px; }

/* Contacto */
.contacto-malla { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; margin-top: 8px; }
.dato-contacto { padding: 20px 0; border-top: 1px solid var(--linea); }
.dato-contacto .etiqueta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--apagado);
}
.dato-contacto .valor-dato { font-size: 17px; margin-top: 6px; color: var(--grafito); }
.dato-contacto a { color: var(--grafito); }
.dato-contacto a:hover { color: var(--granate); }

.gestiones { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 48px; }

/* Formularios */
form.formulario, .zona-formulario { margin-top: 40px; max-width: 680px; }
.campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.campo { margin-top: 22px; }
.campo label { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 7px; }
.campo label .req { color: var(--granate); }
.campo input, .campo textarea, .campo select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--linea-fuerte);
  background: #FFFDFB;
  font: inherit;
  font-size: 15.5px;
  color: var(--grafito);
}
.campo textarea { min-height: 120px; resize: vertical; }
.nota-obligatorios { font-size: 13px; color: var(--apagado); margin-top: 18px; }
.clausula {
  font-size: 13px;
  color: var(--apagado);
  line-height: 1.6;
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--marfil-claro);
  border: 1px solid var(--linea);
}
.clausula strong { color: var(--grafito-suave); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--grafito-suave); }
.check input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--granate); }
form .btn { margin-top: 28px; }
.campo-web { position: absolute; left: -9999px; top: -9999px; }
.exito {
  margin-top: 26px;
  padding: 22px 26px;
  border: 1px solid var(--granate);
  background: rgba(126, 26, 41, 0.05);
}
.exito h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--granate); }
.exito p { font-size: 15px; color: var(--grafito-suave); margin-top: 8px; }
.nota-prototipo { font-size: 12.5px; font-style: italic; color: var(--apagado); margin-top: 16px; }

/* ===== Pie ===== */
.pie-sitio { background: var(--marfil); border-top: 1px solid var(--linea); padding: 56px 0 40px; }
.pie-malla { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.pie-marca .mg { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--granate); }
.pie-marca .mg span { font-size: 15px; letter-spacing: 0.2em; color: var(--grafito); }
.pie-marca .nombre { font-family: var(--serif); font-size: 15px; color: var(--grafito-suave); margin-top: 4px; }
.pie-marca .colegiada { font-size: 13.5px; color: var(--apagado); margin-top: 10px; max-width: 40ch; line-height: 1.6; }
.pie-servicios { font-size: 14px; }
.pie-servicios .titulo-col {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 12px;
}
.pie-servicios a { display: block; color: var(--grafito-suave); padding: 4px 0; }
.pie-servicios a:hover { color: var(--granate); }
.pie-datos { font-size: 14px; color: var(--grafito-suave); line-height: 2; text-align: right; }
.pie-datos a { color: var(--grafito-suave); }
.pie-datos a:hover { color: var(--granate); }
.pie-legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--apagado);
}
.pie-legal nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pie-legal nav a {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--apagado);
}
.pie-legal nav a:hover { color: var(--granate); }
.pie-legal .copy { line-height: 1.7; max-width: 62ch; }

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .valores-malla { grid-template-columns: 1fr 1fr; }
  .valor:nth-child(3) { border-left: none; }
  .valor:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .cabecera-fila { gap: 20px; }
  nav.principal { gap: 20px; margin-left: 0; width: 100%; order: 3; }

  /* Menú hamburguesa. Solo con JS activo: sin JS el menú queda desplegado. */
  .menu-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--linea-fuerte);
    color: var(--granate);
    cursor: pointer;
  }
  .menu-boton svg { width: 22px; height: 22px; }
  .menu-boton .icono-cerrar { display: none; }
  .menu-abierto .menu-boton .icono-abrir { display: none; }
  .menu-abierto .menu-boton .icono-cerrar { display: block; }
  .js nav.principal { display: none; }
  .js .menu-abierto nav.principal {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 6px;
  }
  .menu-abierto nav.principal a {
    padding: 13px 0;
    border-top: 1px solid var(--linea);
    border-bottom: none;
    font-size: 14px;
  }
  .menu-abierto nav.principal a[aria-current="page"] { color: var(--granate); }

  .hero { min-height: 0; display: block; }
  /* relative y no static: el pie de foto se ancla a la foto, no al hero
     entero (anclado al hero caía encima de los botones). left/right a auto
     para anular los desplazamientos del posicionado de escritorio. */
  .hero-foto {
    position: relative; left: auto; right: auto; width: 100%; height: 320px; background-position: center 30%;
    /* A 320px de alto no hacen falta los 1200px del original: variante de 800. */
    background-image: image-set(
      url('assets/img/hero-benimaclet-movil.webp') type('image/webp'),
      url('assets/img/hero-benimaclet.jpg') type('image/jpeg')
    );
  }
  .hero-foto::before { background: linear-gradient(180deg, var(--marfil) 0%, rgba(246,242,239,0) 30%); }
  .hero-contenido { max-width: none; padding: 44px 0 56px; }
  .criterio, .principios, .areas, .cierre-malla, .materias, .contacto-malla, .gestiones { grid-template-columns: 1fr; gap: 40px; }
  .materias, .gestiones { gap: 1px; }
  .cabecera-malla, .materias-lista .materia, .panel-ancho { grid-template-columns: 1fr; }
  .seccion-partida { grid-template-columns: 1fr; row-gap: 36px; }
  .materias-lista .materia h3, .materias-lista .materia p, .materias-lista .materia .ver,
  .panel-ancho h3, .panel-ancho p, .panel-ancho .btn { grid-column: auto; grid-row: auto; }
  .materias-lista .materia p { margin-top: 12px; }
  .panel-ancho p:first-of-type { margin-top: 14px; }
  .cabecera-apoyo .intro:first-child { margin-top: 26px; }
  .despacho-malla { grid-template-columns: 1fr; gap: 48px; }
  .foto-reservada { max-width: 340px; }
  .pie-datos { text-align: left; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  /* Solo el padding lateral: con el atajo `padding` esta regla, al ir más
     tarde en el fichero, pisaba el padding vertical de .cabecera-sitio y
     .cabecera-pagina (comparten elemento con .contenedor) y en móvil el
     logo quedaba pegado al kicker de las páginas interiores. */
  .contenedor { padding-inline: 22px; }
  /* A 44px, "responsabilidad." mide mas que un movil de 390px y desborda. */
  h1 { font-size: clamp(34px, 10vw, 44px); }
  .valores-malla { grid-template-columns: 1fr; }
  .valor { border-left: none !important; border-top: 1px solid var(--linea); padding: 28px 4px; }
  .valor:first-child { border-top: none; }
  .credenciales { flex-direction: column; }
  .credencial { padding-right: 0; }
  .credencial + .credencial { border-left: none; padding-left: 0; border-top: 1px solid var(--linea); }
  .logo-caf { margin: 0; }
  section.bloque { padding-block: 60px; }
  .cierre { padding: 64px 0; }
  .area { padding: 34px 26px 32px; }
  .materia { padding: 28px 24px; }
  .panel { padding: 30px 26px; }
  .pasos { grid-template-columns: 1fr; gap: 30px; }
  .campos-2 { grid-template-columns: 1fr; gap: 0; }
}