/* ------------------------------------------------------------------ */
/* Tipografía autoalojada (subset latin, fuente variable 500–600)      */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* Variables de marca                                                   */
/* ------------------------------------------------------------------ */
:root {
  --color-fondo: #faf8f4;
  --color-fondo-alterno: #f3f0e9;
  --color-fondo-oscuro: #1a2332;
  --color-texto: #222a38;
  --color-texto-suave: #5b6270;
  --color-texto-invertido: #f2f1ec;
  --color-texto-invertido-suave: #bcc4d2;
  --color-primario: #233a5c;
  --color-primario-oscuro: #192b46;
  --color-primario-claro: #e6eaf2;
  --color-acento: #b8963e;
  --color-acento-claro: #cfa94b;
  /* Verde de WhatsApp oscurecido para que el texto blanco cumpla contraste
     AA (≈5,4:1; el #1fac54 de antes daba 2,96:1 y bajaba la accesibilidad). */
  --color-whatsapp: #137a37;
  --color-whatsapp-oscuro: #0f6530;
  --color-borde: #e4dfd3;
  --color-blanco: #ffffff;
  --color-error: #a8321f;
  --color-exito: #1d7a45;

  --fuente-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: "Fraunces", Georgia, "Times New Roman", serif;

  /* La rama del logo como máscara incrustada (data URI: funciona también
     abriendo el HTML en local, sin petición externa) */
  --mask-rama: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA/CAQAAADpw0a1AAAJ50lEQVR42s3aaXiV5ZkH8N/7noQlCAkQCLIJyipQMZRSWlmtIEWl4uho1eqMo+NVGW2nxZle7Vx1ZnSqIg7q9EIrFVkdncpY1CKigCyyVtawQ9hD2BMCIdt55wPHmLCUhMTR53w6533Oc/73ff/v9TkxX84KhEJfmxVWAFbNFftStBNpaIA+ChyvPqQvQzvfM9tG283XvZK+vgINheJGek4zJfK1cdICgajqByTVOpxBnhQokGKtIhlUCU456LCWudPcLxXapi4OKxavojdGnztA7bpm5G5dzFVPTKkD6sj/C54WCEXi4kj+XJNJl6SJQHSOIQKRVm63VKE2cqTJlebgBQGF4iL19dTHldIc9Lz9gqRLMkxU0eoVPh+mpWlut1myk4rUt+u8HAoQV99N7nCNmECo2Az7BWG1aRuhtYbngZPiDmu00san0q1WT2DHBc6IDDDFS1p5x1olCuU4iCisthdd6QVzve2asyJyZICuPtPXOoe1sEwPOfadpaFAIK6l35iusxc8pbXu9qlju13VI/WZo4aZ4FZFrvawWIWfiiR70A71XOU9XR2wy3etcLwSoDO6GW66+7xptAJj9TTOBjHvKhFWXUNniHyPsdo5LnRSF81FCcLGRPrJtMo3bLHcELO0drmlogoih+JS/Yvxkjxkjgf92p/dIsfN5pl1hpVhNYx1t6ftt0OKSKSBeuUeFMed8p3Uw2t6yLDIIMetrOTicd1M8Q/e8ahMv9XFz92traft9ITTVQyh5V4x1HYz/cway22QZbn2CZOH6Gy1N/3BIpf7wAe+ba0JkhOAAwEGWmar0YaY7aDJOuAe2yzS7QvyhFV09A6ekOM/3OCAdYrtEi+XJ8JgKY7oabJeepmhu2b+qERYHijuMV6hcRp4RVM/8SPHPGOMDR6SJbxoTK/EnpjX7fQdj8p1v7fM84b5mpbLnuJtC8yyRDfTrdbXDIullj9P9rjtZvl3cxzwota41Tw5XtCicugMqxR5/sZNXnTYYz6QpYud6jjqeLk5e+qqSEfva2WQ92T4rmnyhAKRZP/mEQcVu1dTD3hUukn+S5qf+okDidhWjeqmg1U+lO55+/R1m71+armnE/KH+LWtVvhMHxNs1N0blmiaKG4aedYO62yxyVPa6uRp2203Vsfz1ZRJF02XMffL8AtXGOmPlppimwLplifYEZdusBLN/I9GhntGhv6edESSUmmeNcRJydZ4W67HjBCaY7LF5fmsGoBCcd3d5kOzvazUWO31MVVHp2QldpS5TjsFTpjhH+0111hbzBAqlWas650QWWWbH+gr8L5JVihLnF7NAi3CX2tojN6Gm2y7Xwls8jNrZJNIs7co1dB0VxnknwxzjVFy0cgzBsmTrFRPA+Sa7A/WlIsar27FGIp0MMK7skx3xKsaG2m+NK29pFiIuHa6iztog1GWOuLn5ngPTf2rG5RIVSrPBh9ZZE95zI9fWgkbuU2qiQYYaLxsj0s33032+rh8z3WaCKzSVwuvu1PoOae09pxBjtsry3IrbEsYybmsqSqgQFxzd1koy0THTNHO31kgX18T7U8wIGagJIdErvcnLQ002iqdjZHpVbPskFNB33Fq1s48ItctBssxBuPsNcI42TqRqIW7+NRWiy2zyOOyjUMfC2S7v8JJYc27swCp5pivrUm2aOv7DnjWYLs9kXge4l5bZdlgnanWe0cbP7TJCjeXA6mlRjHED+Qa5Ua5RmvmU4t09KZV2pGQOcl42dbbaLn1PvR9Yxw086zirVYamkBdU6zR0xwLtfC6/fob5bCHK+invcU2y5Jlk9WeN98+T2lUEzjhBfP7N/Xzlht087KHjfAbdYw2x9QKRuihhZLyLmQEHvRL+QKRQChWffYkXcDdA3c6iof8SQc/9jtrPOeQpxQk/CvAoPLvRyJvmShbQ5xSVqHcCst3VJG850sYmabZJVU923zLbP/rF5p5wKdi4gKBMulmaqw0Qd0C2bgMgSJ5Dthnj2w7E1XBhfq5KgGKjDdMnmTFUsy32iMio8yTpDSxq5n7Pea0ULFSgVBdxXIVKpGkvgaaquu0w3ZaYKEdCio0C9UAFIq70W8VJsrTXY7pb71fWZ543loPgw3U3GYL1XejVIXKhE45pkiOHXKcEFdPW51cob06dljoI6vkl0fsC/bXleGUSfOaHk4nvhZX5L9NkKeV9q7WW6bmjljqY0vsRR/36a+RE/Y5IKaNVkKn7LXHZjuVooXeemhsu1net7W8JaqSyUb7e6cFiWoox0x7XCVTexnq2mulRRbbWWGMEtPX7YYKrTXfCkddqZtrdNZakqP22WmLPBm+qZtcH5tm8/kLkMBQx4QoUeQypdr5Zw2VCYVCcUelaCKy1wabrbTewUpt3xfHXusO39PafnPM9JnT6rlcd31100ZzxbIdkqKtJg6baLK8hNiVAO0WQ6BYkQYCnFQmrkS+w9K0UyguSZZxFiVCxZmMHVUKpGdYcYV+hugt1T5LzfPnMw2y5rrqpZcOGqunTJlka7xQoWooP+omaYIK7A8UOCVfgVOOaOdFGYoFkhVbZpIFiJ23iPicqsk6+bb+MqU7apNV1smyDTTVwbUyXa2hBk6Z6hX5FYW7eBwdbkwifoTqOmm2F+2+UAFawX8CbfTSz7e0FzjuoF22yZarWJoOhrtcKN1/erLiaCf4C1knSlRFo/3YyQRjYlLkeNkbii44zPzCgNBYB5m6a6+FJupLEipV7JQiB+021dzKgC7etaZ4yfVOiIlEAkmSfWKcNedS8iz/DVGWeN9AM2nSpaoPjjkkx56quP25gTLD6zo7qY5DkjR1UgPHPe+N80zSzq+vCwXCc0SKVWGQGSqwyVChfI2tVait7UrdJd1SxRftPKOEZs/kvMqv6FIG55GYfU4YKsdR3zDPIdfaYpvbtLQ4EUSrcs65r0uc5EdCWRoZao08Q3xki5ttsMRIXc1VVHs3GrFqzKBX6Oh6s5S41buy/dBuy43UxlxltQUpVo2ytsQiA/Tzmnp+ZLIdHpAly11OW1K9GUbtXL6ECq00TB+vyfBXJjngLsucMtxKe2oHUqxaFweBw7YY6WoTdHKrV9Vxs3mu0MEsJbVhtli19++0y31amSbTQL/XRXfrXGezzZUGxf9PgCIxm+13jwamG6SNdwxUV12p3q1Zq3ypF3iRwHoH3CvJJ25QaqPeSrQ029Ga8yh2iTfO6xzytxrY6DvyJblMit0++2oAnQmUax1yuwZOay8Uqe+E92sOKLzkq7rQNI9J0kSJugJlUoU1D5CxGtwehjbZ5FoZTiMmz3uKawqoJjOKuNAnHrRImkCyIoVfhZedraWjZrlMF3GvWFtbCaTmOu6qm6/NCnwNV639F+b/AH/clzBgva2ZAAAAAElFTkSuQmCC");

  /* Sistema de formas: botones en píldora, superficies casi rectas.
     Los 12/20px de antes redondeaban todo por igual y la web parecía una
     plantilla amable; con 6/10px las fotos y las cajas pesan como bloques. */
  --radio-borde: 6px;
  --radio-borde-grande: 10px;
  --sombra-suave: 0 1px 2px rgba(26, 35, 50, 0.05), 0 8px 24px rgba(26, 35, 50, 0.06);
  --sombra-media: 0 2px 4px rgba(26, 35, 50, 0.06), 0 16px 40px rgba(26, 35, 50, 0.1);
  --ancho-maximo-contenido: 1180px;
  --espaciado-seccion: clamp(5rem, 10vw, 8.5rem);
}

/* ------------------------------------------------------------------ */
/* Reset básico                                                        */
/* ------------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--fuente-base);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-primario);
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

/* Los anclajes (#servicios, #contacto…) no deben quedar bajo la cabecera fija */
[id] {
  scroll-margin-top: 5.5rem;
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: 3px solid var(--color-primario);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background-color: var(--color-acento);
  color: var(--color-blanco);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar-al-contenido {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primario);
  color: var(--color-blanco);
  padding: 0.75em 1em;
  z-index: 100;
}

.saltar-al-contenido:focus {
  left: 0;
}

/* ------------------------------------------------------------------ */
/* Layout general                                                      */
/* ------------------------------------------------------------------ */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo-contenido);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.contenedor--estrecho {
  max-width: 46rem;
}

.contenedor--estrecho h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.contenedor--estrecho h2 {
  font-size: 1.4rem;
  margin-top: 2em;
}

.seccion {
  padding-block: var(--espaciado-seccion);
}

.seccion--alterna {
  background-color: var(--color-fondo-alterno);
}

.seccion--oscura {
  position: relative;
  overflow: hidden;
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-invertido);
}

/* Rama gigante en marca de agua sobre el fondo oscuro */
.seccion--oscura::before {
  content: "";
  position: absolute;
  top: -3rem;
  right: -5rem;
  width: 34rem;
  height: 30rem;
  background-color: var(--color-acento);
  opacity: 0.06;
  transform: rotate(-15deg);
  -webkit-mask: var(--mask-rama) no-repeat center / contain;
  mask: var(--mask-rama) no-repeat center / contain;
  pointer-events: none;
}

/* El contenido, por encima de la marca de agua */
.seccion--oscura > .contenedor {
  position: relative;
}

.seccion--oscura h2 {
  color: var(--color-blanco);
}

.seccion__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primario);
  margin-bottom: 1.1rem;
}

/* La rama del logo firma cada etiqueta de sección */
.seccion__etiqueta::before {
  content: "";
  width: 1.3em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: var(--mask-rama) no-repeat center / contain;
  mask: var(--mask-rama) no-repeat center / contain;
}

.seccion--oscura .seccion__etiqueta {
  color: var(--color-acento);
}

.seccion h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  max-width: 22ch;
}

.seccion__intro {
  color: var(--color-texto-suave);
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  max-width: 52ch;
}

.seccion--oscura .seccion__intro {
  color: var(--color-texto-invertido-suave);
}

/* Cabeceras de sección.
   Las siete secciones abrían igual: etiqueta, titular a dos líneas e
   entradilla, siempre pegados a la izquierda y con media página vacía a la
   derecha. El ojo aprendía el patrón a la segunda y dejaba de mirar. Estas
   dos variantes se reparten de modo que dos secciones seguidas nunca abran
   igual (ver el orden en index.html). */
.seccion__cabecera {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.seccion__cabecera > :last-child {
  margin-bottom: 0;
}

/* Dividida: titular a la izquierda, entradilla a la derecha alineada por
   abajo. Ocupa el hueco muerto de la derecha.
   Sin regla inferior a propósito: la lista de servicios ya trae las suyas y
   quedaban dos líneas paralelas con una banda muerta en medio. */
.seccion__cabecera--dividida {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

.seccion__cabecera--dividida h2 {
  margin-bottom: 0;
}

/* Centrada: rompe el eje izquierdo que domina el resto de la página. */
.seccion__cabecera--centrada {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.seccion__cabecera--centrada h2,
.seccion__cabecera--centrada .seccion__intro,
.seccion__cabecera--centrada .trazo-titulo {
  margin-inline: auto;
}

@media (max-width: 768px) {
  .seccion__cabecera--dividida {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
  }
}

/* Animación de aparición (solo con JS activo y sin reduced-motion) */
html.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .revelar.esta-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Trazo dorado que se dibuja bajo los títulos de sección (inyectado por
   main.js; hermano del subrayado a mano alzada del h1) */
.trazo-titulo {
  display: block;
  width: 7.5rem;
  height: 0.6rem;
  margin-top: 0.4rem;
  overflow: visible;
}

.trazo-titulo path {
  fill: none;
  stroke: var(--color-acento);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}

.trazo-titulo.esta-visible path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s ease-out 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .trazo-titulo path {
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ------------------------------------------------------------------ */
/* Botones                                                              */
/* ------------------------------------------------------------------ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              transform 0.15s ease, box-shadow 0.2s ease;
}

.boton:hover {
  transform: translateY(-1px);
}

.boton:active {
  transform: translateY(0);
}

.boton svg {
  flex-shrink: 0;
}

.boton--primario {
  background-color: var(--color-primario);
  color: var(--color-blanco);
  box-shadow: var(--sombra-suave);
}

.boton--primario:hover {
  background-color: var(--color-primario-oscuro);
}

/* Sobre fondo oscuro el azul tinta del botón se comería a sí mismo: toma el
   relevo el dorado, que así deja de ser adorno y dirige la mirada al CTA. */
.seccion--oscura .boton--primario {
  background-color: var(--color-acento);
  color: var(--color-primario-oscuro);
  box-shadow: 0 8px 24px rgba(184, 150, 62, 0.22);
}

.seccion--oscura .boton--primario:hover {
  background-color: var(--color-acento-claro);
}

.boton--secundario {
  background-color: transparent;
  border-color: currentColor;
  color: var(--color-primario);
}

.boton--secundario:hover {
  background-color: var(--color-primario-claro);
}

.boton--whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-blanco);
  box-shadow: var(--sombra-suave);
}

.boton--whatsapp:hover {
  background-color: var(--color-whatsapp-oscuro);
}

/* ------------------------------------------------------------------ */
/* Cabecera                                                             */
/* ------------------------------------------------------------------ */
.cabecera {
  position: sticky;
  top: 0;
  background-color: rgba(26, 35, 50, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  z-index: 50;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cabecera--con-sombra {
  border-bottom-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 20px rgba(26, 35, 50, 0.25);
}

.cabecera :focus-visible {
  outline-color: var(--color-acento);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.cabecera__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-texto-invertido);
}

.cabecera__logo img {
  flex-shrink: 0;
}

.cabecera__toggle-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.6em;
  border-radius: 8px;
}

.icono-hamburguesa,
.icono-hamburguesa::before,
.icono-hamburguesa::after {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-texto-invertido);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.icono-hamburguesa::before {
  content: "";
  position: absolute;
  top: -7px;
}

.icono-hamburguesa::after {
  content: "";
  position: absolute;
  top: 7px;
}

.cabecera__toggle-menu[aria-expanded="true"] .icono-hamburguesa {
  background-color: transparent;
}

.cabecera__toggle-menu[aria-expanded="true"] .icono-hamburguesa::before {
  transform: translateY(7px) rotate(45deg);
}

.cabecera__toggle-menu[aria-expanded="true"] .icono-hamburguesa::after {
  transform: translateY(-7px) rotate(-45deg);
}

.cabecera__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.cabecera__lista-nav {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cabecera__lista-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  color: var(--color-texto-invertido);
  padding-block: 0.25em;
}

.cabecera__lista-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background-color: var(--color-acento);
  transition: right 0.2s ease;
}

.cabecera__lista-nav a:hover::after {
  right: 0;
}

.cabecera .boton--whatsapp {
  padding: 0.6em 1.2em;
  font-size: 0.9375rem;
}

@media (max-width: 768px) {
  .cabecera__toggle-menu {
    display: block;
  }

  .cabecera__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-fondo-oscuro);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--sombra-media);
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
    display: none;
  }

  .cabecera__nav.esta-abierto {
    display: flex;
  }

  .cabecera__lista-nav {
    flex-direction: column;
    gap: 1rem;
  }

  .cabecera__lista-nav a {
    font-size: 1.1rem;
  }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */
.seccion-hero {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
  overflow: hidden;
}

/* Los heros van sobre superficie oscura: el azul tinta ocupa una superficie de
   verdad en vez de asomar solo en detalles. Se encadenan con la cabecera
   (también oscura), así que las páginas abren con un bloque que manda. */
.seccion-hero.seccion--oscura {
  padding-block: clamp(4rem, 8vw, 7rem);
  background:
    linear-gradient(168deg, #22314a 0%, var(--color-fondo-oscuro) 52%, #131c2b 100%);
}

/* En las landings de servicio, sin foto, el hueco de la derecha lo ocupa la
   rama en marca de agua que .seccion--oscura ya trae de serie.
   En la portada esa rama quedaría tapada por la foto, así que ahí se cambia
   por un resplandor dorado. */
.seccion-hero--portada.seccion--oscura::before {
  top: -35%;
  right: -15%;
  width: 65%;
  height: auto;
  aspect-ratio: 1;
  opacity: 1;
  transform: none;
  -webkit-mask: none;
  mask: none;
  background: radial-gradient(circle, rgba(184, 150, 62, 0.18), transparent 62%);
}

.seccion-hero__interior {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Etiqueta del hero: era una píldora con fondo y borde, el recurso de toda
   plantilla SaaS. Ahora es una línea tipográfica en versalitas con la rama
   dorada delante: más discreta y más de marca. */
.seccion-hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--color-primario-oscuro);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.seccion-hero.seccion--oscura .seccion-hero__etiqueta {
  color: var(--color-acento-claro);
}

/* La rama del logo como marca decorativa, teñida con el color del texto */
.seccion-hero__etiqueta::before {
  content: "";
  width: 1.15em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--mask-rama) no-repeat center / contain;
  mask: var(--mask-rama) no-repeat center / contain;
}

.seccion-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: 0.5em;
}

.seccion-hero.seccion--oscura h1 {
  color: var(--color-blanco);
}

/* El titular de portada manda: es lo primero que ve quien llega de Google.
   Las landings de servicio se quedan un escalón por debajo a propósito: son
   páginas secundarias y su h1 es más largo. */
.seccion-hero--portada h1 {
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  line-height: 1.04;
  margin-bottom: 0.45em;
}

/* Palabra destacada del titular: subrayado dorado a mano alzada */
.resalte {
  font-style: normal;
  white-space: nowrap;
  padding-bottom: 0.12em;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 9" preserveAspectRatio="none"><path d="M3 7 Q 60 2 117 5.5" fill="none" stroke="%23b8963e" stroke-width="3.5" stroke-linecap="round"/></svg>') no-repeat bottom / 100% 0.26em;
}

.seccion-hero__intro {
  font-size: 1.125rem;
  color: var(--color-texto-suave);
  max-width: 46ch;
}

.seccion-hero.seccion--oscura .seccion-hero__intro,
.seccion-hero.seccion--oscura .seccion-hero__valoracion {
  color: var(--color-texto-invertido-suave);
}

.seccion-hero.seccion--oscura .seccion-hero__intro {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
}

.seccion-hero__acciones {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.seccion-hero__valoracion {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  color: var(--color-texto-suave);
}

/* El sprite solo define símbolos: no se pinta. */
.sprite-iconos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Valoración en estrellas. El tamaño se controla con font-size (las estrellas
   miden 1em), así que cada contexto lo ajusta en un sitio y no hay que tocar
   el ancho de cinco SVG a mano. */
.estrellas {
  display: inline-flex;
  gap: 2px;
  color: var(--color-acento);
  font-size: 1rem;
  line-height: 0;
}

.estrellas svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Panel visual del hero (foto de stock provisional hasta tener la del cliente) */
.seccion-hero__visual {
  position: relative;
}

.seccion-hero__panel {
  position: relative;
  aspect-ratio: 4 / 4.6;
  max-height: 460px;
  width: 100%;
  margin: 0;
  border-radius: var(--radio-borde-grande);
  background:
    radial-gradient(120% 100% at 85% 10%, rgba(184, 150, 62, 0.2), transparent 45%),
    linear-gradient(155deg, #2e4a75 0%, var(--color-primario) 45%, #14213a 100%);
  box-shadow: var(--sombra-media);
  overflow: hidden;
}

.seccion-hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo azul sutil en la base: da profundidad a la foto */
.seccion-hero__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(22, 33, 51, 0.35));
  pointer-events: none;
}

/* Toque de marca: la foto entra "sucia" (desenfocada y apagada) y una
   pasada de escobilla la deja impecable — la limpieza se nota al entrar */
.seccion-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(148, 155, 165, 0.22);
  -webkit-backdrop-filter: blur(6px) saturate(0.55) brightness(0.96);
  backdrop-filter: blur(6px) saturate(0.55) brightness(0.96);
  clip-path: inset(0 0 0 0);
  animation: barrido-limpio 1.5s ease-in-out 0.5s forwards;
  pointer-events: none;
}

@keyframes barrido-limpio {
  to {
    clip-path: inset(0 0 0 100%);
  }
}

/* La escobilla dorada que hace la pasada */
.seccion-hero__visual::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--color-acento), rgba(184, 150, 62, 0.35));
  box-shadow: 0 0 12px rgba(184, 150, 62, 0.45);
  opacity: 0;
  z-index: 2;
  animation: pasada-escobilla 1.5s ease-in-out 0.5s;
  pointer-events: none;
}

@keyframes pasada-escobilla {
  0% {
    left: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    left: calc(100% - 5px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seccion-hero__panel::before,
  .seccion-hero__visual::after {
    content: none;
  }
}

/* La valoración de Google, antes una línea perdida bajo los botones, ahora es
   una tarjeta que pisa la esquina de la foto: el mejor argumento de venta de
   la web, puesto encima del trabajo que lo justifica. */
.tarjeta-valoracion {
  position: absolute;
  left: clamp(-1.75rem, -2vw, -1rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0.9rem 1.4rem;
  background-color: var(--color-blanco);
  color: var(--color-texto);
  border-radius: var(--radio-borde-grande);
  box-shadow: var(--sombra-media);
}

.tarjeta-valoracion__nota {
  font-family: var(--fuente-titulos);
  font-weight: 550;
  font-size: 2.4rem;
  line-height: 0.9;
  color: var(--color-primario);
}

.tarjeta-valoracion__detalle {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.tarjeta-valoracion__detalle .estrellas {
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .tarjeta-valoracion {
    left: 0.9rem;
    bottom: 0.9rem;
    padding: 0.7rem 1.1rem;
    gap: 0.7rem;
  }

  .tarjeta-valoracion__nota {
    font-size: 1.9rem;
  }
}

/* Barrido reutilizable: imágenes que se limpian al entrar en pantalla.
   El velo solo existe con JS activo (sin JS la foto se ve limpia);
   la escobilla la inyecta main.js como span.barrido__escobilla. */
.barrido {
  position: relative;
}

html.js .barrido::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radio-borde-grande);
  background-color: rgba(148, 155, 165, 0.22);
  -webkit-backdrop-filter: blur(6px) saturate(0.55) brightness(0.96);
  backdrop-filter: blur(6px) saturate(0.55) brightness(0.96);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}

html.js .barrido.esta-limpio::before {
  animation: barrido-limpio 1.4s ease-in-out var(--retardo-barrido, 0s) forwards;
}

html.js .barrido__escobilla {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--color-acento), rgba(184, 150, 62, 0.35));
  box-shadow: 0 0 12px rgba(184, 150, 62, 0.45);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

html.js .barrido.esta-limpio .barrido__escobilla {
  animation: pasada-escobilla 1.4s ease-in-out var(--retardo-barrido, 0s);
}

/* Cascada en la galería: cada foto se limpia un poco después que la anterior */
.rejilla-trabajos .barrido:nth-child(2) {
  --retardo-barrido: 0.18s;
}

.rejilla-trabajos .barrido:nth-child(3) {
  --retardo-barrido: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  html.js .barrido::before {
    content: none;
  }

  html.js .barrido__escobilla {
    display: none;
  }
}

@media (max-width: 860px) {
  .seccion-hero__interior {
    grid-template-columns: 1fr;
  }

  .seccion-hero__panel {
    aspect-ratio: 16 / 9;
    max-height: 260px;
  }
}

/* Portada en pantallas medianas y grandes: la foto deja de ser una tarjeta
   contenida y sangra hasta el borde derecho del viewport. El texto respira en
   la retícula; la foto se comporta como arquitectura, no como adorno. */
@media (min-width: 861px) {
  .seccion-hero--portada .seccion-hero__interior {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }

  /* Altura explícita, no "100%": con la altura sin resolver, la imagen cae a su
     alto intrínseco (874px) y estira el hero fuera de la pantalla. */
  .seccion-hero--portada .seccion-hero__panel {
    aspect-ratio: auto;
    max-height: none;
    height: clamp(30rem, 44vw, 42rem);
    box-shadow: none;
    border-radius: var(--radio-borde-grande) 0 0 var(--radio-borde-grande);
  }

  /* Sangrado: anula el margen del contenedor hasta tocar el viewport.
     El hero ya recorta con overflow:hidden, así que el ancho de la barra de
     scroll que 100vw arrastra no genera scroll horizontal. */
  .seccion-hero--portada .seccion-hero__visual {
    margin-right: calc((100vw - min(var(--ancho-maximo-contenido), 100vw)) / -2 - 1.25rem);
  }
}


/* Hero simple para landings de servicio */
.seccion-hero__interior--simple {
  grid-template-columns: 1fr;
  max-width: 52rem;
}

/* ------------------------------------------------------------------ */
/* Landings de servicio                                                 */
/* ------------------------------------------------------------------ */
.lista-incluye {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem 2rem;
}

.lista-incluye li {
  position: relative;
  padding-left: 2rem;
}

.lista-incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--color-primario);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>') no-repeat center / contain;
}

.seccion-cta {
  text-align: center;
}

.seccion-cta .seccion__intro {
  margin-inline: auto;
}

.seccion-cta .seccion-hero__acciones {
  justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Servicios (lista editorial: número, nombre, descripción, flecha)     */
/* ------------------------------------------------------------------ */
.lista-servicios {
  margin-top: 3rem;
  border-top: 1px solid var(--color-borde);
}

.fila-servicio {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 0.85fr) minmax(0, 1.5fr) 2.75rem;
  align-items: baseline;
  column-gap: 1.5rem;
  padding: 1.9rem 0.5rem;
  border-bottom: 1px solid var(--color-borde);
  text-decoration: none;
  color: var(--color-texto);
}

/* Al pasar el ratón, la fila se "limpia": un velo dorado la recorre de
   izquierda a derecha, la misma idea que la escobilla de las fotos. */
.fila-servicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(184, 150, 62, 0.09), rgba(184, 150, 62, 0.02));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.fila-servicio:hover::before,
.fila-servicio:focus-visible::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .fila-servicio::before {
    transition: none;
  }
}

.fila-servicio__numero {
  font-family: var(--fuente-titulos);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-acento);
}

.fila-servicio h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0;
  transition: color 0.2s ease;
}

.fila-servicio p {
  color: var(--color-texto-suave);
  margin: 0;
}

/* Botón circular: hace evidente que la fila entera es clicable */
.fila-servicio__flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--color-acento);
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--color-acento);
  justify-self: end;
  align-self: center;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.fila-servicio:hover h3,
.fila-servicio:focus-visible h3 {
  color: var(--color-primario);
}

.fila-servicio:hover .fila-servicio__flecha,
.fila-servicio:focus-visible .fila-servicio__flecha {
  background-color: var(--color-acento);
  color: var(--color-blanco);
  transform: translateX(4px);
}

@media (max-width: 720px) {
  .fila-servicio {
    grid-template-columns: 2.5rem 1fr 2.75rem;
    row-gap: 0.35rem;
  }

  .fila-servicio p {
    grid-column: 2 / 3;
    font-size: 0.9375rem;
  }
}

.servicios__nota {
  margin-top: 2.5rem;
  color: var(--color-texto-suave);
}

/* ------------------------------------------------------------------ */
/* Por qué elegirnos                                                    */
/* ------------------------------------------------------------------ */
/* De cuatro columnas iguales (el "feature grid" de manual) a una retícula
   2×2 editorial: filete superior, numeral grande en su propia columna y
   texto colgado a la derecha. */
.rejilla-motivos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 3.5rem;
  margin-top: 3.5rem;
}

.motivo {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1.4rem;
  row-gap: 0.5rem;
  border-top: 1px solid var(--color-borde);
  padding-top: 1.5rem;
}

.motivo__numero {
  grid-row: 1 / 3;
  font-family: var(--fuente-titulos);
  font-size: 3rem;
  font-weight: 500;
  line-height: 0.9;
  color: var(--color-acento);
  letter-spacing: 0.02em;
}

.motivo h3 {
  font-size: 1.35rem;
  margin: 0;
}

.motivo p {
  grid-column: 2;
}

@media (max-width: 720px) {
  .rejilla-motivos {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.motivo p {
  color: var(--color-texto-suave);
  margin: 0;
}

.seccion--oscura .motivo p {
  color: var(--color-texto-invertido-suave);
}

/* ------------------------------------------------------------------ */
/* Nuestro trabajo (galería de fotos)                                   */
/* ------------------------------------------------------------------ */
.rejilla-trabajos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

/* En pantalla grande la galería deja de ser tres tarjetas clónicas: una foto
   grande manda a la izquierda y las otras dos se apilan a la derecha. */
@media (min-width: 861px) {
  .rejilla-trabajos {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .rejilla-trabajos .tarjeta-trabajo:first-child {
    grid-row: 1 / 3;
  }

  .rejilla-trabajos .tarjeta-trabajo:first-child img {
    aspect-ratio: auto;
    height: 100%;
  }

  .rejilla-trabajos .tarjeta-trabajo:not(:first-child) img {
    aspect-ratio: 16 / 10;
  }
}

.tarjeta-trabajo {
  position: relative;
  display: block;
  border-radius: var(--radio-borde-grande);
  overflow: hidden;
  box-shadow: var(--sombra-suave);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-trabajo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
}

/* Vertical, no apaisada: las fotos del cliente vienen así de su perfil de
   Google y forzarlas a 4:3 les comía medio encuadre. Manda la foto real. */
.tarjeta-trabajo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tarjeta-trabajo:hover img {
  transform: scale(1.04);
}

/* Degradado inferior para que el pie de foto se lea sobre cualquier imagen */
.tarjeta-trabajo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 33, 51, 0.65), transparent 45%);
  pointer-events: none;
}

.tarjeta-trabajo__pie {
  position: absolute;
  left: 1.25rem;
  bottom: 1rem;
  z-index: 1;
  color: var(--color-blanco);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.tarjeta-trabajo__pie::before {
  content: "";
  width: 1.05em;
  height: 0.9em;
  background-color: var(--color-acento);
  -webkit-mask: var(--mask-rama) no-repeat center / contain;
  mask: var(--mask-rama) no-repeat center / contain;
}

/* ------------------------------------------------------------------ */
/* Sobre nosotros                                                       */
/* ------------------------------------------------------------------ */
.seccion-sobre-nosotros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.seccion-sobre-nosotros__imagen {
  position: relative;
}

.seccion-sobre-nosotros__imagen img {
  width: 100%;
  border-radius: var(--radio-borde-grande);
  box-shadow: var(--sombra-media);
}

/* Marco dorado desplazado tras la foto: un detalle de imprenta que rompe la
   simetría del bloque texto-imagen sin añadir más cromo. */
@media (min-width: 769px) {
  .seccion-sobre-nosotros__imagen::after {
    content: "";
    position: absolute;
    inset: 1.5rem -1.25rem -1.25rem 1.5rem;
    border: 1.5px solid rgba(184, 150, 62, 0.45);
    border-radius: var(--radio-borde-grande);
    z-index: -1;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .seccion-sobre-nosotros {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */
/* Reseñas                                                              */
/* ------------------------------------------------------------------ */
/* Las reseñas son lo único de esta web que un competidor no puede copiar.
   Estaban en tres tarjetas iguales —el grid de testimonios de siempre— con el
   5,0 de nota al pie en una esquina. Ahora el dato ancla la sección y las
   citas van sin caja: un panel a la izquierda, las voces a la derecha. */
.resenas__interior {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.resenas__marcador {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: 1.75rem 2rem;
}

/* El 5,0 es el mejor argumento de venta de la web. Que se vea. */
.resenas__media {
  font-family: var(--fuente-titulos);
  font-weight: 550;
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 0.85;
  color: var(--color-acento);
}

.resenas__detalle {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9375rem;
  color: var(--color-texto-invertido-suave);
}

.resenas__detalle .estrellas {
  font-size: 1.125rem;
}

.resenas__lista {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

/* Sin marco: son palabras de otros, no fichas de producto. La regla dorada
   basta para marcarlas como voz ajena. */
.resena {
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid rgba(184, 150, 62, 0.55);
}

.resena p {
  margin: 0 0 0.85rem;
  color: var(--color-texto-invertido);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
}

.resena footer {
  color: var(--color-texto-invertido-suave);
  font-size: 0.9rem;
}

@media (max-width: 860px) {
  .resenas__interior {
    grid-template-columns: 1fr;
  }
}

.seccion--oscura .boton--secundario {
  color: var(--color-texto-invertido);
}

.seccion--oscura .boton--secundario:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------ */
/* Preguntas frecuentes                                                 */
/* ------------------------------------------------------------------ */
.contenedor--estrecho-medio {
  max-width: 52rem;
}

/* Sin cajitas blancas: cada pregunta es una fila sobre un filete, como la
   lista de servicios. Menos cromo, más tipografía. */
.acordeon {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-borde);
}

.acordeon__item {
  border-bottom: 1px solid var(--color-borde);
  transition: border-color 0.2s ease;
}

.acordeon__item[open] {
  border-bottom-color: var(--color-acento);
}

.acordeon__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 1.125rem;
  padding: 1.4rem 0.25rem;
}

.acordeon__item summary::-webkit-details-marker {
  display: none;
}

.acordeon__item summary::after {
  content: "+";
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-primario);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.acordeon__item[open] summary::after {
  transform: rotate(45deg);
}

.acordeon__item p {
  margin: 0;
  padding: 0 0.25rem 1.5rem;
  max-width: 62ch;
  color: var(--color-texto-suave);
}

/* ------------------------------------------------------------------ */
/* Contacto                                                             */
/* ------------------------------------------------------------------ */
.seccion-contacto {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 768px) {
  .seccion-contacto {
    grid-template-columns: 1fr;
  }
}

/* Ficha de datos, no lista con iconos.
   El teléfono, el sobre y la chincheta eran iconos de línea del catálogo de
   siempre, y convivían a 200px de la rama de la marca: dos idiomas visuales
   en la misma columna, y el de catálogo era el que reconoce todo el mundo.
   Una etiqueta tipográfica hace el mismo trabajo, no se parece a la de nadie
   y encima nombra el dato en vez de insinuarlo con un dibujo. */
.datos-contacto {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
  display: grid;
  gap: 0.85rem;
}

.datos-contacto li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-borde);
}

.datos-contacto li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.datos-contacto__campo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

@media (max-width: 480px) {
  .datos-contacto li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.formulario-contacto {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde-grande);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--sombra-suave);
}

.campo-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.campo-formulario--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6em;
}

.campo-formulario--checkbox input {
  margin-top: 0.3em;
  accent-color: var(--color-primario);
}

.campo-formulario--checkbox label {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-texto-suave);
}

.campo-formulario label {
  font-weight: 600;
  font-size: 0.9em;
}

.campo-formulario input,
.campo-formulario textarea {
  font: inherit;
  padding: 0.8em 1em;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  background-color: var(--color-fondo);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Color explícito del placeholder: el gris por defecto del navegador se queda
   por debajo del contraste AA. opacity:1 porque Firefox lo atenúa de serie. */
.campo-formulario input::placeholder,
.campo-formulario textarea::placeholder {
  color: var(--color-texto-suave);
  opacity: 1;
}

.campo-formulario input:focus,
.campo-formulario textarea:focus {
  outline: none;
  border-color: var(--color-primario);
  background-color: var(--color-blanco);
  box-shadow: 0 0 0 3px rgba(35, 58, 92, 0.15);
}

.formulario-contacto .boton {
  align-self: flex-start;
}

.texto-secundario {
  color: var(--color-texto-suave);
  font-size: 0.9em;
}

.formulario-contacto__mensaje-estado {
  margin: 0;
  font-size: 0.9em;
  font-weight: 500;
}

.formulario-contacto__mensaje-estado[data-estado="enviando"] {
  color: var(--color-texto-suave);
}

.formulario-contacto__mensaje-estado[data-estado="exito"] {
  color: var(--color-exito);
}

.formulario-contacto__mensaje-estado[data-estado="error"] {
  color: var(--color-error);
}

.formulario-contacto .boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Trampa antispam: fuera de la vista sin usar display:none ni
   visibility:hidden, que algunos bots detectan y esquivan. */
.campo-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .formulario-contacto .boton {
    align-self: stretch;
  }
}

/* ------------------------------------------------------------------ */
/* Blog                                                                 */
/* ------------------------------------------------------------------ */
.rejilla-entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.tarjeta-entrada {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde-grande);
  padding: 2rem 1.75rem;
  text-decoration: none;
  color: var(--color-texto);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tarjeta-entrada:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: transparent;
}

.tarjeta-entrada h2 {
  font-size: 1.35rem;
  margin: 0;
}

.tarjeta-entrada p {
  color: var(--color-texto-suave);
  margin: 0;
  flex-grow: 1;
}

.entrada__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.entrada__categoria {
  background-color: var(--color-primario-claro);
  color: var(--color-primario-oscuro);
  font-weight: 600;
  padding: 0.2em 0.8em;
  border-radius: 999px;
}

.tarjeta-entrada__leer {
  color: var(--color-primario);
  font-weight: 600;
}

/* Artículo individual */
.entrada h1 {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
}

.entrada__resumen {
  background-color: var(--color-primario-claro);
  border-left: 4px solid var(--color-primario);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
  padding: 1.25rem 1.5rem;
  margin-block: 2rem;
}

.entrada__resumen p {
  margin: 0;
  font-size: 1.0625rem;
}

.entrada h2 {
  font-size: 1.6rem;
  margin-top: 2em;
}

.entrada h3 {
  font-size: 1.15rem;
  margin-top: 1.75em;
}

.entrada ul,
.entrada ol {
  padding-left: 1.4em;
  margin-bottom: 1.25em;
}

.entrada li {
  margin-bottom: 0.4em;
}

.entrada__cta {
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-invertido);
  border-radius: var(--radio-borde-grande);
  padding: 2rem;
  margin-block: 2.5rem;
  text-align: center;
}

.entrada__cta h2 {
  color: var(--color-blanco);
  margin-top: 0;
  font-size: 1.5rem;
}

.entrada__cta p {
  color: var(--color-texto-invertido-suave);
}

.entrada__volver {
  display: inline-block;
  margin-bottom: 2rem;
  font-weight: 600;
  text-decoration: none;
}

.entrada__volver:hover {
  text-decoration: underline;
}

.entrada__aviso {
  font-size: 0.875rem;
  color: var(--color-texto-suave);
  border-top: 1px solid var(--color-borde);
  padding-top: 1.25rem;
  margin-top: 2.5rem;
}

/* ------------------------------------------------------------------ */
/* Páginas legales y de error                                           */
/* ------------------------------------------------------------------ */
/* Las tablas anchas hacen scroll dentro de su caja: la página nunca
   se desplaza en horizontal. */
.tabla-scroll {
  overflow-x: auto;
  margin-block: 1.5rem;
}

.tabla-scroll table {
  margin-block: 0;
  min-width: 34rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-size: 0.9375rem;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  overflow: hidden;
}

th, td {
  text-align: left;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-borde);
}

th {
  background-color: var(--color-fondo-alterno);
  font-weight: 600;
}

tbody tr:last-child td {
  border-bottom: none;
}

.seccion-error {
  text-align: center;
}

.seccion-error .seccion__intro {
  margin-inline: auto;
  margin-bottom: 2rem;
}

.seccion-error__codigo {
  font-family: var(--fuente-titulos);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-primario-claro);
  margin: 0 0 0.1em;
}

/* 404 jugable: la cifra llega con polvo y se limpia frotando
   (js/limpiar-404.js pinta y borra el lienzo) */
.mancha-404 {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  padding: 0.75rem 2.5rem;
}

.mancha-404 .seccion-error__codigo {
  margin: 0;
  color: rgba(184, 150, 62, 0.45);
}

.mancha-404__lienzo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radio-borde-grande);
  cursor: grab;
  touch-action: pan-y;
}

.mancha-404--limpia .mancha-404__lienzo {
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.mancha-404__lienzo--barrido {
  animation: barrido-limpio 1.2s ease-in-out forwards;
  pointer-events: none;
}

html.js .mancha-404__escobilla {
  animation: pasada-escobilla 1.2s ease-in-out;
}

/* La pista solo tiene sentido con JS activo (sin JS no hay polvo) */
.mancha-404__pista {
  display: none;
}

html.js .mancha-404__pista {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-texto-suave);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}

html.js .mancha-404__pista--limpia {
  color: var(--color-acento);
  font-weight: 600;
}

.mancha-404__boton {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-primario);
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .mancha-404__lienzo--barrido {
    animation: none;
    opacity: 0;
  }

  html.js .mancha-404__escobilla {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Pie de página                                                        */
/* ------------------------------------------------------------------ */
.pie-pagina {
  background-color: var(--color-fondo-oscuro);
  color: var(--color-texto-invertido-suave);
  padding-block: 3.5rem 0;
  font-size: 0.9375rem;
}

.pie-pagina__interior {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.pie-pagina__marca {
  display: block;
  width: fit-content;
  margin: 0 0 1.25rem;
}

.pie-pagina__marca img {
  display: block;
}

.pie-pagina h3 {
  font-family: var(--fuente-base);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blanco);
  margin-top: 0;
  margin-bottom: 1rem;
}

.pie-pagina__lista-enlaces {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-pagina p a {
  color: var(--color-texto-invertido);
  text-decoration: none;
}

.pie-pagina p a:hover {
  text-decoration: underline;
}

.pie-pagina__lista-enlaces a {
  color: var(--color-texto-invertido-suave);
  text-decoration: none;
}

.pie-pagina__lista-enlaces a:hover {
  color: var(--color-blanco);
  text-decoration: underline;
}

.pie-pagina__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
}

.pie-pagina__legal p {
  margin: 0;
}

@media (max-width: 768px) {
  .pie-pagina__interior {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}