/* ============================================================
   yayimartin.com · Sistema visual
   ------------------------------------------------------------
   Los cinco colores de marca están copiados uno a uno del panel
   «Editar paleta de colores» de Squarespace. No son una deducción
   ni una media de capturas: son los valores del sitio original.
   Cualquier otro tono de este archivo se deriva de esos cinco y
   lleva escrito de dónde sale.

   Las tipografías son las que ya usaba la web en Squarespace,
   Inter Tight y Open Sans, ambas libres en Google Fonts. No hay
   sustituto ni aproximación: son las mismas.
   ============================================================ */

:root {
  color-scheme: light;

  /* Los cinco colores de la paleta original, exactos */
  --papel:       #FFFFFF;
  --franja:      #E7EDEB;   /* gris claro: bandas de sección */
  --turquesa:    #4FECD7;   /* acentos. Solo decorativo: 1,5:1 no vale para texto */
  --azul:        #005DB4;   /* titulares, enlaces y botones. El color de la marca */
  --tinta:       #505051;   /* gris oscuro: el texto. No es negro puro */

  --texto:       var(--tinta);

  /* Derivados. Ninguno inventa un tono nuevo: son los mismos colores
     aclarados u oscurecidos, con el contraste medido sobre blanco. */
  --azul-oscuro:  #004A8F;  /* hover y foco.        9,0:1 */
  --turquesa-osc: #0E8172;  /* turquesa legible.    4,8:1 */
  --texto-suave:  #6E7275;  /* apoyos y pies.       5,4:1 */
  --gris-linea:   #D2DBD8;  /* filetes y bordes */
  --gris-medio:   #C3CFCB;  /* separadores del pie */

  /* Tipografía */
  --titulos: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cuerpo:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica fluida */
  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-md:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:  clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --t-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);

  /* Ritmo vertical y anchos */
  --ancho-texto: 68ch;   /* medida de lectura cómoda */
  --ancho-max:   1120px;
  --pad-x:  clamp(1.25rem, 5vw, 3rem);
  --pad-y:  clamp(3rem, 7vw, 5.5rem);
  --hueco:  clamp(1rem, 2.5vw, 1.75rem);

  --radio: 4px;
  --borde: 1px solid var(--gris-linea);
}

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: var(--t-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--titulos);
  color: var(--azul);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); font-weight: 700; }
h2 { font-size: var(--t-xl);  font-weight: 700; margin-top: 2em; }
h3 { font-size: var(--t-lg);  font-weight: 600; margin-top: 1.75em; }

p, ul, ol { margin: 0 0 1.25em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--azul); }

strong { font-weight: 600; color: var(--tinta); }

a {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--azul-oscuro); }

/* El foco visible no es opcional: hay quien navega solo con teclado */
:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ---------- Estructura ---------- */

.contenedor {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.seccion { padding-block: var(--pad-y); }
.seccion--franja { background: var(--franja); }

/* Columna de lectura para páginas de texto largo */
.prosa { max-width: var(--ancho-texto); }
.prosa h2:first-child { margin-top: 0; }

/* Salta directo al contenido: teclado y lectores de pantalla */
.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: var(--pad-x); top: 0.75rem;
  z-index: 100;
  background: var(--tinta); color: var(--papel);
  padding: 0.75rem 1.25rem; border-radius: var(--radio);
}

/* ---------- Cabecera ---------- */

.cabecera {
  border-bottom: var(--borde);
  background: var(--papel);
  position: sticky; top: 0; z-index: 50;
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hueco);
  min-height: 72px;
  flex-wrap: wrap;
}

.marca {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marca:hover { color: var(--tinta); }
.marca span { color: var(--azul); }

/* El menú reproduce el de la web original: cinco entradas, de las cuales
   «Servicios» no es una página sino una carpeta que despliega cuatro.
   Por eso /servicios da 404 en la web actual: nunca existió.

   Funciona sin JavaScript. El desplegable se abre con :hover y con
   :focus-within, así que también con el teclado. La clase «con-js», que
   pone menu.js al cargar, es la que autoriza a esconder el menú detrás
   de un botón en pantallas estrechas: si el script no llega, no se
   esconde nada. */

.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  flex-wrap: wrap;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  font-weight: 500;
}

.menu > a,
.menu__titulo {
  color: var(--texto);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
}
.menu > a:hover,
.menu__titulo:hover { color: var(--azul); border-bottom-color: var(--azul); }
.menu [aria-current] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* ----- Desplegable de Servicios ----- */

.menu__grupo { position: relative; }

.menu__titulo {
  font: inherit;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding-inline: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.menu__flecha {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}
.menu__grupo.abierto .menu__flecha { transform: rotate(180deg); }

.menu__desplegable {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
}
.menu__desplegable a {
  display: block;
  color: var(--texto);
  text-decoration: none;
  padding: 0.45rem 1rem;
  white-space: nowrap;
  border-bottom: 0;
}
.menu__desplegable a:hover {
  color: var(--azul);
  background: var(--franja);
  border-bottom: 0;
}
.menu__desplegable [aria-current] { border-bottom: 0; font-weight: 600; }

/* En pantalla ancha el desplegable flota sobre la página. Solo aquí se
   esconde: en móvil la lista va en línea, dentro del menú desplegado. */
@media (min-width: 900px) {
  .menu__desplegable {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 15rem;
    background: var(--papel);
    border: var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    z-index: 60;
  }
  .con-js .menu__desplegable { display: none; }
  .menu__grupo:hover .menu__desplegable,
  .menu__grupo:focus-within .menu__desplegable,
  .con-js .menu__grupo:hover .menu__desplegable,
  .con-js .menu__grupo:focus-within .menu__desplegable,
  .con-js .menu__grupo.abierto .menu__desplegable { display: flex; }
}

/* ----- Botón de menú en pantallas estrechas ----- */

.menu__interruptor {
  display: none;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta);
  background: none;
  border: var(--borde);
  border-radius: var(--radio);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
}
.menu__barras,
.menu__barras::before,
.menu__barras::after {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.menu__barras { position: relative; }
.menu__barras::before,
.menu__barras::after { content: ''; position: absolute; left: 0; }
.menu__barras::before { top: -5px; }
.menu__barras::after  { top: 5px; }

@media (max-width: 899px) {
  .con-js .menu__interruptor { display: inline-flex; }
  .con-js .menu { display: none; }
  .con-js .menu.abierto { display: flex; }

  .menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding-bottom: 1rem;
  }
  .menu__grupo { width: 100%; }
  .menu__desplegable { padding: 0.25rem 0 0.5rem; }
  .menu__desplegable a { padding-left: 1rem; }
  .con-js .menu__desplegable { display: none; }
  .con-js .menu__grupo.abierto .menu__desplegable { display: flex; }
}

/* ---------- Botones ---------- */

.boton {
  display: inline-block;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radio);
  text-decoration: none;
  border: 2px solid var(--azul);
  background: var(--azul);
  color: var(--papel);
  transition: background-color .15s ease, border-color .15s ease;
}
.boton:hover {
  background: var(--azul-oscuro);
  border-color: var(--azul-oscuro);
  color: var(--papel);
}

.boton--linea {
  background: transparent;
  color: var(--azul);
}
.boton--linea:hover { background: var(--azul); color: var(--papel); }

/* ---------- Pie ---------- */

.pie {
  border-top: var(--borde);
  background: var(--franja);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

.pie__rejilla {
  display: grid;
  gap: var(--hueco) clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.pie h2 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin: 0 0 0.75em;
}

.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 0.4em; }
.pie a { color: var(--texto); text-decoration: none; }
.pie a:hover { color: var(--azul); text-decoration: underline; }

.pie__legal {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--gris-medio);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
}

/* ---------- Cabecera de página interior ---------- */

.portadilla {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2rem);
  border-bottom: var(--borde);
}
.portadilla p {
  margin: 0.5rem 0 0;
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

/* ---------- Detalles de composición ---------- */

.dato {
  border-left: 3px solid var(--azul);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin-bottom: 1.5rem;
}
.dato p { margin: 0; }

.actualizado {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .cabecera, .pie__rejilla, .saltar { display: none; }
  body { font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
}

/* ============================================================
   Portada
   ============================================================ */

.portada__rejilla {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .portada__rejilla { grid-template-columns: 1.35fr 1fr; }
}

.portada__texto p { max-width: 60ch; }

/* El antetítulo turquesa: el remate de color de la portada.
   Se usa el turquesa oscurecido porque el vivo sobre blanco no
   llega al contraste mínimo para texto. */
.portada__antetitulo {
  font-family: var(--titulos);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--turquesa-osc);
  margin: 0 0 0.75rem;
}

.portada__retrato img {
  width: 100%;
  border-radius: var(--radio);
}

/* ---------- Cifras ---------- */

.cifras {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.cifras li { margin: 0; }
.cifras p { max-width: 38ch; margin-bottom: 0; }

.cifra {
  font-family: var(--titulos);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--tinta);
  letter-spacing: -0.04em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.cifra span { color: var(--turquesa-osc); }

.cifras h2 {
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0.6rem 0 0.4rem;
}

.cifras__pie {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font-family: var(--titulos);
  font-size: var(--t-lg);
  color: var(--texto-suave);
}
.cifras__pie a { font-weight: 600; }

/* ---------- Servicios ---------- */

.seccion__titulo { margin-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Los servicios son cuatro. Con columnas automáticas caben tres y la
   cuarta se queda sola en una segunda fila; por eso las columnas van
   fijadas: dos y dos, o las cuatro en fila cuando hay sitio. */
.servicios {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* En las páginas de servicio solo se listan los otros tres */
@media (min-width: 1000px) {
  .servicios--otros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.servicio { margin: 0; }
.servicio img {
  width: clamp(96px, 20vw, 128px);
  height: auto;
  margin-bottom: 0.75rem;
}

/* El número no decora: la web original numera sus cuatro servicios */
.servicio__num {
  font-family: var(--titulos);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--turquesa-osc);
  margin: 0 0 0.25rem;
  font-variant-numeric: tabular-nums;
}

.servicio h3 { margin-top: 0; margin-bottom: 0.5rem; }
.servicio p { max-width: 42ch; }

.enlace-mas {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ---------- Reseñas de Google ---------- */

.resenas__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.resenas__cabeza h2 { margin: 0; }

.nota-google {
  font-family: var(--titulos);
  font-weight: 600;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.nota-google strong { color: var(--tinta); font-size: var(--t-lg); }

.estrellas { color: var(--azul); letter-spacing: 0.1em; }

.resenas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--hueco);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.resena {
  margin: 0;
  background: var(--papel);
  border: var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.resena blockquote {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.65;
}
.resena blockquote::before { content: '«'; color: var(--azul); }
.resena blockquote::after  { content: '»'; color: var(--azul); }

.resena__autor {
  margin: 0;
  margin-top: auto;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.resena__autor strong {
  display: block;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  color: var(--tinta);
}

.resenas__pie { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; }

/* ---------- Portada de una página de servicio ---------- */

.servicio-portada__rejilla {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 800px) {
  .servicio-portada__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.38fr);
  }
}

.servicio-portada__texto { min-width: 0; }
.servicio-portada__texto h1 { margin-top: 0; }

/* La frase corta bajo el titular. En la web original es un H4 usado como
   reclamo, no como encabezado: aquí es lo que es, un párrafo destacado. */
.servicio-portada__claim {
  font-family: var(--titulos);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--azul);
  max-width: 34ch;
  margin-bottom: 1.5rem;
}

.servicio-portada__icono img {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
  display: block;
}

/* En el bloque de «otros servicios» el titular es un enlace, no un
   número: son atajos a las otras tres páginas. */
.servicios--otros .servicio h3 { font-size: var(--t-lg); }
.servicios--otros .servicio h3 a {
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 2px solid transparent;
}
.servicios--otros .servicio h3 a:hover {
  color: var(--azul);
  border-bottom-color: var(--azul);
}

.seccion__entrada {
  margin-top: 0;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: var(--t-lg);
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

/* ---------- Quien soy: trayectoria ---------- */

.trayectoria {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .trayectoria { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); }
  /* El icono acompaña la lectura sin adelantarla: queda fijo mientras
     se recorren los tres hitos. */
  .trayectoria__icono { position: sticky; top: 6rem; }
}

.trayectoria h1 { margin-top: 0; }
/* min-width:0 evita que un texto largo estire la columna de la rejilla */
.trayectoria__texto { min-width: 0; }

.trayectoria__icono img {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin-inline: auto;
  display: block;
}

/* Los tres hitos son una cronología: una lista ordenada, con la línea
   dibujada por el borde izquierdo y el punto en cada fecha. */
.hitos {
  list-style: none;
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  border-left: 2px solid var(--gris-linea);
}

.hito {
  position: relative;
  padding-left: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
}
.hito:last-child { padding-bottom: 0; }

.hito__fecha {
  position: relative;
  margin: 0 0 0.35rem;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--turquesa-osc);
}
.hito__fecha::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 3vw, 2.25rem) - 6px);
  top: 0.4em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--azul);
}

.hito h2 { margin: 0 0 0.5rem; font-size: var(--t-xl); }
.hito p  { margin: 0; }

/* ---------- Quien soy: valores ---------- */

.valores__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.valores__cabeza img {
  width: clamp(88px, 16vw, 120px);
  height: auto;
  order: -1;
}
@media (min-width: 700px) {
  .valores__cabeza img { order: 0; }
}

/* Cuatro valores: mismo motivo que en los servicios para fijar las
   columnas y no dejar el cuarto huérfano en una fila para él solo. */
.valores {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .valores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.valor { margin: 0; }
/* La web original escribe «__ Puntualidad»: dos guiones bajos delante de
   cada valor. Es un recurso gráfico, no texto, así que se dibuja con CSS
   y no se lee en voz alta. */
.valor h3 {
  margin: 0 0 0.5rem;
  font-size: var(--t-lg);
}
.valor h3::before {
  content: '';
  display: block;
  width: 2.25rem;
  height: 3px;
  background: var(--turquesa);
  margin-bottom: 0.75rem;
}
.valor p { margin: 0; max-width: 42ch; }

/* ---------- Testimonios ---------- */

.testimonios {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--hueco);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.testimonio {
  margin: 0;
  border-left: 3px solid var(--azul);
  padding: 0.25rem 0 0.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.testimonio blockquote {
  margin: 0;
  font-family: var(--titulos);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.45;
  color: var(--tinta);
}
.testimonio blockquote::before { content: '«'; }
.testimonio blockquote::after  { content: '»'; }

.testimonio__autor {
  margin: auto 0 0;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.testimonio__autor strong {
  display: block;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  color: var(--tinta);
}

/* ---------- Llamada final ---------- */

.llamada { text-align: center; }
.llamada h2 {
  margin-top: 0;
  margin-inline: auto;
  max-width: 22ch;
}
.llamada__alt {
  margin-bottom: 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* ---------- Blog ---------- */

.contenedor--texto { max-width: calc(var(--ancho-texto) + var(--pad-x) * 2); }

/* ----- Listado de entradas ----- */

.entradas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.entradas__ficha { margin: 0; display: flex; flex-direction: column; }

.entradas__ficha img {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin-bottom: 0.75rem;
}

.entradas__fecha {
  margin: 0 0 0.35rem;
  font-family: var(--titulos);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.entradas__ficha h2 {
  margin: 0 0 0.6rem;
  font-size: var(--t-lg);
  line-height: 1.3;
}
.entradas__ficha h2 a {
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 2px solid transparent;
}
.entradas__ficha h2 a:hover { color: var(--azul); border-bottom-color: var(--azul); }
.entradas__ficha p:last-child {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* ----- Una entrada ----- */

.entrada__volver {
  margin-top: 0;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  font-weight: 600;
}
.entrada__volver a { text-decoration: none; }
.entrada__volver a:hover { text-decoration: underline; }

.entrada h1 { margin-top: 0.5rem; }

.entrada__datos {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--titulos);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* El punto separa fecha y categorías sin necesidad de escribirlo en el
   HTML, donde sería texto que los lectores de pantalla leen en voz alta. */
.entrada__categorias::before { content: '·'; margin: 0 0.5rem; }

.entrada__portada {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

.entrada .prosa h2 { margin-top: 2.5rem; }
.entrada .prosa p  { margin-bottom: 1.25rem; }
.entrada .prosa pre {
  overflow-x: auto;
  background: var(--franja);
  padding: 1rem;
  border-radius: var(--radio);
  font-size: var(--t-sm);
}

.entrada__pie {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: var(--borde);
}

/* ---------- Tablas dentro de la prosa legal ---------- */

/* Una tabla ancha no debe empujar la página entera a la derecha: se
   desplaza dentro de su propio marco. */
.tabla {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--t-sm);
}
.tabla th,
.tabla td {
  border: 1px solid var(--gris-linea);
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.tabla th {
  font-family: var(--titulos);
  background: var(--franja);
  color: var(--tinta);
}

/* ---------- Contacto ---------- */

.contacto__rejilla {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .contacto__rejilla { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.contacto__texto { min-width: 0; }
.contacto__texto h1 { margin-top: 0; }

.contacto__entrada {
  font-size: var(--t-lg);
  color: var(--texto-suave);
  max-width: 48ch;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* ----- Formulario ----- */

.formulario { max-width: 34rem; }

.campo { margin: 0 0 1.25rem; }

.campo label {
  display: block;
  font-family: var(--titulos);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.35rem;
}
.campo__obligatorio,
.campo__opcional {
  font-weight: 400;
  color: var(--texto-suave);
}

.campo input,
.campo textarea {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--papel);
  border: var(--borde);
  border-radius: var(--radio);
  padding: 0.65rem 0.8rem;
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 1px;
  border-color: var(--azul);
}

/* La casilla del consentimiento va delante de su texto, no encima */
.campo--casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.campo--casilla input {
  width: auto;
  margin-top: 0.2rem;
  flex: none;
}
.campo--casilla label {
  margin-bottom: 0;
  font-weight: 400;
  font-family: var(--cuerpo);
  font-size: var(--t-sm);
}

/* Campo trampa para robots. Se esconde sin display:none para que los
   programas que buscan campos ocultos no lo detecten tan fácil, y se
   saca del recorrido del teclado y de los lectores de pantalla. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.formulario__clausula {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--texto-suave);
  border-left: 3px solid var(--gris-linea);
  padding-left: 1rem;
  margin-bottom: 1.75rem;
}

/* ----- Datos de contacto ----- */

.contacto__datos {
  background: var(--franja);
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.contacto__datos h2 { margin-top: 0; font-size: var(--t-xl); }

.datos {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 1.25rem;
}
.datos__etiqueta {
  display: block;
  font-family: var(--titulos);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.15rem;
}
.datos address { font-style: normal; }

/* ---------- Cofinanciación FEDER ----------
   No es decoración: es el cartel de publicidad de una subvención europea
   y suele llevar obligación de permanecer visible. No retirar sin
   comprobar antes las condiciones de la ayuda. */

.pie__feder {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-medio);
}
.pie__feder img {
  max-width: min(100%, 520px);
  height: auto;
}

/* Botón CONTACTA de la cabecera: existe en la web original y es su
   llamada a la acción permanente. */
.boton--menu {
  padding: 0.5rem 1.1rem;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--azul);
}
.boton--menu:hover { background: var(--azul); color: var(--papel); }