/* ==========================================================================
   Reset y base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body,
h1, h2, h3, h4, p,
figure, ul, ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

a {
  text-decoration: none;
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ==========================================================================
   Variables / paleta
   ========================================================================== */
:root {
  --color-bg: #fdfbf9;
  --color-bg-alt: #f6efec;
  --color-text: #2b2226;
  --color-text-muted: #6b5c60;
  --color-border: #e8dcd9;

  --color-accent: #7a3347;      /* ciruela / burdeos suave */
  --color-accent-hover: #5e2536;
  --color-accent-soft: #f6e9ec;
  --color-process-card: #d6d5dc; /* pastel a juego, tarjetas de "Cómo trabajo" */

  --font-base: "Inter", Arial, Helvetica, "Segoe UI", sans-serif;
  --font-heading: "Fraunces", "Georgia", serif;

  --container-width: 1180px;
  --radius: 6px;
  --transition: 0.2s ease;

  /* Altura real de la cabecera sticky, usada para que los enlaces de
     ancla (#solutions, #showcase...) no queden tapados debajo de
     ella. Distinta en móvil (≤1000px, cabecera en grid de 2 filas)
     y en escritorio (una sola fila). */
  --header-height: 150px;
}

@media (min-width: 1001px) {
  :root {
    --header-height: 100px;
  }
}

body {
  font-family: var(--font-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 24px;
}

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

.skip-link {
  position: absolute;
  left: 0;
  top: -100%;
  background: var(--color-accent);
  color: #fff;
  padding: 10px 16px;
  z-index: 1000;
  transition: top var(--transition);
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   Botones / CTA
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-accent-hover);
}

.btn--secondary {
  background-color: rgba(253, 251, 249, 0.65);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-accent-soft);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* Slogan comercial fijo bajo la barra de navegación (siempre visible con el scroll) */
.site-header__slogan {
  margin: 0;
  padding: 4px 16px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 801px) {
  .site-header__slogan {
    padding-block: 10px;
    font-size: 0.85rem;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-block: 16px;
}

.logo {
  display: inline-flex; 
  align-items: center;
  text-decoration: none;
  /* Da profundidad 3D para que el giro del logo (rotateY) se vea como
     un volteo real en el eje vertical, no como un simple aplastado
     horizontal */
  perspective: 400px;
}

.logo-svg {
  display: block;
  height: 74px;
  width: 74px;
  /* Giro de entrada, una sola vez, solo al cargar la página (no es
     "infinite": una animación normal se reproduce una vez por
     defecto en cuanto el elemento se pinta) */
  animation: girarLogo 2.6s ease-in-out both;
}

@keyframes girarLogo {
  from {
    opacity: 0;
    transform: rotateY(-180deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-svg {
    animation: none;
  }
}

/* CAMBIO: los márgenes negativos que acercan el logo al borde
   izquierdo/arriba solo tienen sentido en el layout de escritorio
   (fila con el nav a la derecha); en el layout móvil (grid, ≤1000px)
   desbordaban la caja del logo hacia fuera del viewport. Se limitan
   a ≥1001px, el mismo corte que separa ambos layouts. */
@media (min-width: 1001px) {
  .logo {
    margin-left: -16px;
  }

  .logo-svg {
    margin-top: -8px;
  }
}

.main-nav {
  flex: 1;
  /* Red de seguridad: min-width:0 permite que este ítem flex se
     encoja por debajo del ancho de su contenido (por defecto un ítem
     flex no se encoge más allá de eso), así el overflow-x lo absorbe
     este contenedor con scroll propio y silencioso, en vez de
     desbordar .header__inner y provocar scroll horizontal en toda la
     página si algún idioma no llega a caber del todo. */
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.main-nav::-webkit-scrollbar {
  display: none;
}

.main-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  /* CAMBIO: nowrap (una sola línea, sin envolver) + gap fluido que
     crece con el ancho de viewport en vez de un valor fijo. Recalculado
     tras añadir el 8º enlace ("Código nativo"): con el mismo ancho de
     contenedor, 7 huecos en vez de 6 necesitan un valor por hueco
     menor para que los enlaces no queden apretados (antes 20-48px,
     ahora escalado por 6/7 ≈ 17-41px) */
  flex-wrap: nowrap;
  gap: clamp(16px, 8vw - 63px, 41px);
}

.main-nav__list li {
  /* Sin esto, el <li> podía encogerse por debajo del ancho de su
     texto y la frase se partía en 2 líneas dentro del enlace (visible
     sobre todo en etiquetas de 2 palabras: "Código nativo", "Sobre
     mí", "Native code"...) */
  flex-shrink: 0;
}

.main-nav__list a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color var(--transition);
}

/* Tramo de escritorio más estrecho (justo tras pasar a esta cabecera
   de una fila, ≤1220px): con 8 enlaces no cabe el tamaño base sin
   desbordar el contenedor en ningún idioma, así que se reduce más aún
   solo aquí */
@media (min-width: 1001px) and (max-width: 1220px) {
  .main-nav__list {
    gap: clamp(10px, 4.5vw - 35px, 22px);
  }

  .main-nav__list a {
    font-size: 0.78rem;
  }
}

/* Ucraniano: etiquetas en conjunto más largas que en el resto de
   idiomas; solo se reduce el gap (la fuente ya quedó bien ajustada
   para todos), para ganar el hueco que le falta sin tocar el resto */
html[lang="uk"] .main-nav__list {
  gap: clamp(10px, 4vw - 30px, 22px);
}

@media (min-width: 1001px) and (max-width: 1220px) {
  html[lang="uk"] .main-nav__list {
    gap: clamp(8px, 3vw - 22px, 17px);
  }
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-accent);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* Desplegable de idioma a medida (sustituye al <select> nativo, que
   sigue en el DOM oculto como fuente de verdad para i18n.js): en
   móvil el sistema operativo dibuja la lista de un <select> nativo
   con su propio tamaño de fuente, que el CSS no puede controlar; con
   un <ul> propio sí. */
.lang-switcher {
  position: relative;
}

.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
}

.lang-switcher__arrow {
  transition: transform var(--transition);
}

.lang-switcher__btn[aria-expanded="true"] .lang-switcher__arrow {
  transform: rotate(180deg);
}

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 4.5rem;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  z-index: 1200;
}

.lang-switcher__menu[hidden] {
  display: none;
}

.lang-switcher__menu [role="option"] {
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-text);
}

.lang-switcher__menu [role="option"]:hover,
.lang-switcher__menu [role="option"]:focus-visible,
.lang-switcher__menu [role="option"][aria-selected="true"] {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.lang-switcher__menu [role="option"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 34px;
  padding: 8px;
}

/* Las 3 líneas se posicionan de forma absoluta (en vez de con flex)
   para poder animarlas de hamburguesa a "X": la del medio (span) se
   desvanece y las de arriba/abajo (::before/::after) rotan 45° y se
   desplazan hasta superponerse en el centro. */
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle::before {
  top: 9px;
}

.nav-toggle span {
  top: 16px;
}

.nav-toggle::after {
  top: 23px;
}

.nav-toggle[aria-expanded="true"]::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"]::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  /* CAMBIO: padding-top reducido — ahora que la cabecera pesa mucho
     menos (logo SVG de 64px en vez de la imagen de 140px), sobraba
     mucho aire entre la cabecera y el hero */
  padding-top: 24px;
  padding-bottom: 96px;
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.hero__inner {
  max-width: 780px;
  text-align: left;
}

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.2vw, 2.65rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 20px;
}

.hero__subtitle {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__tags li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* ==========================================================================
   Secciones genéricas (títulos)
   ========================================================================== */
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
}

@media (min-width: 801px) {
  .section-eyebrow {
    font-size: 0.95rem;
  }

  .hero__tags li {
    font-size: 0.95rem;
  }
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 16px;
  max-width: 46ch;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-bottom: 40px;
}

/* ==========================================================================
   Solutions (Soluciones)
   ========================================================================== */
.solutions {
  padding-top: 4px;
  padding-bottom: 96px;
}

.showcase__disclaimer {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
  padding-left: 14px;
  max-width: 65ch;
  margin-top: -24px;
  margin-bottom: 40px;
}

.solutions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.solutions__item h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

.solutions__item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Showcase (escaparate de demos)
   ========================================================================== */
.showcase {
  padding-top: 0;
  padding-bottom: 96px;
}

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-bg);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.showcase-card:hover,
.showcase-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 31, 38, 0.1);
  border-color: var(--color-accent);
}

.showcase-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background-color: var(--color-bg-alt);
  transition: transform 0.35s ease;
}

.showcase-card:hover .showcase-card__img,
.showcase-card:focus-visible .showcase-card__img {
  transform: scale(1.04);
}

.showcase-card__img--contain {
  object-fit: contain;
  padding: 24px;
}

.showcase-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px;
}

.showcase-card__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  color: var(--color-text);
  margin-bottom: 8px;
}

.showcase-card__desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.showcase-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent);
}

.showcase-card__link::after {
  content: "\2192";
  transition: transform var(--transition);
}

.showcase-card:hover .showcase-card__link::after,
.showcase-card:focus-visible .showcase-card__link::after {
  transform: translateX(4px);
}

/* ==========================================================================
   About (Sobre mí)
   ========================================================================== */
.about {
  padding-block: 28px;
  background-color: var(--color-bg-alt);
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 56px;
  align-items: start;
}

.about__photo {
  background-color: var(--color-bg-alt);
  /* CAMBIO: fija la foto mientras se hace scroll por el texto de al
     lado (solo tiene efecto en escritorio, donde .about__inner es una
     grid de 2 columnas y el texto es más alto que la foto; en móvil,
     de una sola columna, es un elemento más en el flujo normal) */
  position: sticky;
  top: 96px;
  padding-top: 22px;
}

.about__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
  /* Desplaza el recorte hacia la izquierda para que se vea la cara
     completa, en vez del centro por defecto */
  object-position: 30% center;
}

.about__name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-bottom: 0;
}

.about__intro {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-bottom: 24px;
}

.about__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.about__skills li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
}

.about__block {
  margin-bottom: 28px;
}

.about__block:last-child {
  margin-bottom: 0;
}

.about__block h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.about__block p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 65ch;
}

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

  .about__photo {
    position: static;
    width: 100%;
    padding-top: 0;
    order: 1;
  }

  /* La foto vive antes de .about__content en el HTML (para quedar
     sticky junto al texto en escritorio), pero en móvil queremos que
     aparezca justo debajo del título, antes del nombre/intro/etiquetas.
     display: contents "disuelve" .about__content para que sus hijos
     (eyebrow, título, nombre, intro, etiquetas, bloques) pasen a ser
     ítems directos del grid y admitan su propio order junto a la
     foto. */
  .about__content {
    display: contents;
  }

  .about__content > .section-title {
    order: 0;
  }

  .about__content > .about__bio,
  .about__content > .about__skills {
    order: 2;
  }

  .about__content > .about__block {
    order: 3;
  }
}

/* ==========================================================================
   Process (Proceso)
   ========================================================================== */
.process {
  position: relative;
  overflow: hidden;
  padding-block: 46px;
  /* CAMBIO: fondo distinto del de "Sobre mí" (--color-bg-alt), para
     que ambas secciones no se fundan visualmente una con otra. Sirve
     también de respaldo mientras no haya vídeo (o si falla la carga). */
  background-color: var(--color-bg);
}

/* Imagen de fondo fija detrás de las tarjetas del proceso */
.image-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Capa translúcida por encima de la imagen para "apagarla" (opaca) y
   que las tarjetas de texto sigan siendo perfectamente legibles */
.image-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(253, 251, 249, 0.8);
}

.process__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* CAMBIO: con el vídeo de fondo detrás, el gris apagado de
   .section-subtitle pierde contraste justo en las zonas más oscuras
   del vídeo (aunque haya overlay). Se oscurece y refuerza solo dentro
   de esta sección. */
.process .section-subtitle {
  color: var(--color-text);
  font-weight: 500;
}

.process__steps {
  display: grid;
  /* Móvil/tablet: 1 columna (o 2 si caben 320px, sin huecos raros).
     min(320px, 100%) evita que el mínimo de 320px desborde el
     contenedor en móviles muy estrechos (p. ej. 344px con el padding
     de .container ya restado), que descentraba la tarjeta. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px 48px;
  counter-reset: none;
}

/* CAMBIO: en pantallas grandes, los 5 pasos se reparten en 3 + 2 en
   vez de 3 + 1 (que dejaría un hueco vacío) o de simplemente estirar
   2 columnas irregulares. Grid de 6 columnas base: cada uno de los 3
   primeros pasos ocupa 2 columnas (3 × 2 = 6, fila completa); en la
   fila de abajo, los 2 últimos ocupan 3 columnas cada uno (mitad y
   mitad), usando todo el ancho disponible sin dejar margen a los
   lados. */
@media (min-width: 900px) {
  .process__steps {
    grid-template-columns: repeat(6, 1fr);
  }

  .process__steps li:nth-child(1) { grid-column: 1 / 3; }
  .process__steps li:nth-child(2) { grid-column: 3 / 5; }
  .process__steps li:nth-child(3) { grid-column: 5 / 7; }
  .process__steps li:nth-child(4) { grid-column: 1 / 4; }
  .process__steps li:nth-child(5) { grid-column: 4 / 7; }
}

.process__steps li {
  /* CAMBIO: fondo pastel propio, distinto del fondo beige de la
     sección (--color-bg-alt), pero a juego con la paleta ciruela del
     sitio — así cada paso destaca como una tarjeta en vez de fundirse
     con el fondo */
  background-color: rgba(196, 155, 178, 0.55);
  border-radius: var(--radius);
  padding: 24px;
}

.process__steps h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.process__steps p {
  font-size: 0.95rem;
  color: #000;
  max-width: 60ch;
}

.process__steps p + p {
  margin-top: 1em;
}


/* ==========================================================================
   Por qué código nativo (justo antes de Tarifas: refuerza la confianza
   técnica antes de que el visitante vea el precio)
   ========================================================================== */
.native-code {
  padding-block: 64px;
  background-color: var(--color-bg-alt);
}

.native-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 32px;
  margin-top: 32px;
}

.native-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.native-card__number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.5;
  margin-bottom: 12px;
}

.native-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

.native-card p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   Pricing (Tarifas)
   ========================================================================== */
.pricing {
  padding-block: 46px;
  /* Mismo degradado que el hero (.hero), para dar continuidad visual
     con la sección de inicio */
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
}

.pricing__intro {
  font-size: 0.98rem;
  color: var(--color-text-muted);
  max-width: 70ch;
  margin-top: -16px;
  margin-bottom: 48px;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  padding: 32px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.pricing-card:hover,
.pricing-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 31, 38, 0.08);
}

.pricing-card--featured {
  position: relative;
  border-color: var(--color-accent);
  box-shadow: 0 12px 28px rgba(43, 58, 85, 0.12);
}

.pricing-card__badge {
  position: absolute;
  z-index: 9000;
  top: -12px;
  right: 20px;
  padding: 4px 12px;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pricing-card__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}

.pricing-card__range {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.pricing-card__desc {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  flex: 1;
}

.pricing-card__features li {
  font-size: 0.88rem;
  color: var(--color-text);
  padding-left: 20px;
  position: relative;
}

.pricing-card__features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-card .btn {
  align-self: flex-start;
}

/* Móvil: en vez de apilar las 3 tarjetas en columna (obliga a hacer
   scroll vertical largo y a "recordar" la tarjeta de arriba para
   compararla), se convierten en un carrusel horizontal. Dejar asomar
   un trozo de la siguiente tarjeta por el borde derecho es la señal
   visual de "aquí hay más, desliza": se consigue dándole a cada
   tarjeta un ancho fijo (85%) menor al 100% del viewport, así siempre
   sobra hueco para el inicio de la próxima.
   Sin scroll-snap: tanto "mandatory" como "proximity" podían sentirse
   como que la pantalla deja de responder al tacto en algunos
   navegadores móviles (el encaje forcejea con el gesto en pleno
   arrastre). Se prioriza un scroll libre y fiable al 100% sobre el
   ajuste automático perfecto. */
@media (max-width: 800px) {
  .pricing__grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* "Sangra" hasta el borde de la pantalla (compensando el padding
       de .container) y lo vuelve a añadir como padding propio, para
       que la primera tarjeta seguir alineada con el resto del
       contenido de la página, pero el scroll pueda llegar hasta el
       borde real de la pantalla */
    margin-inline: -24px;
    padding-inline: 24px;
    padding-top: 16px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .pricing__grid::-webkit-scrollbar {
    display: none;
  }

  .pricing-card {
    flex: 0 0 85%;
    max-width: 340px;
  }
}

/* ==========================================================================
   FAQ (preguntas frecuentes)
   ========================================================================== */
.faq {
  padding-top: 48px;
  padding-bottom: 96px;
  background-color: var(--color-bg-alt);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
}

.faq__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  padding: 16px 20px;
}

.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  list-style: none;
}

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

.faq__item summary::after {
  content: "+";
  float: right;
  color: var(--color-accent);
  font-weight: 700;
}

.faq__item[open] summary::after {
  content: "\00d7";
}

.faq__item p {
  margin-top: 12px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   Contact (CTA final)
   ========================================================================== */
.contact {
  padding-block: 6px;
}

.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.contact__direct {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.contact__direct h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.contact__list-label {
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 90px;
}

.contact__list a {
  color: var(--color-accent);
  font-weight: 600;
  transition: color var(--transition);
}

.contact__list a:hover,
.contact__list a:focus-visible {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.contact__form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}

.form-field input,
.form-field textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field select {
  font-family: inherit;
  font-size: 0.95rem;
  width: 100%;
  /* Sin esto, el <select> no se encoge por debajo del ancho de su
     opción más larga ("Aún no lo sé, necesito asesoramiento"),
     desbordando el formulario hacia la derecha en móviles estrechos */
  min-width: 0;
  /* Mismo alto que los input/textarea de al lado (12px de arriba y
     abajo hacía que el select nativo, con menos "aire" propio, se
     viera más bajo y desentonara) */
  padding: 14px;
  /* Borde transparente (no border:none) en los 4 lados: en reposo no
     se ve nada, pero al enfocar, la regla compartida de abajo solo
     cambia el border-color, así aparece el mismo borde completo que
     en el resto de campos en vez de una única línea inferior */
  border: 1px solid transparent;
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #a3241f;
}

.form-field__error {
  font-size: 0.85rem;
  color: #a3241f;
}

.contact__form .btn {
  align-self: flex-start;
}

.contact__privacy-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: -4px;
}

.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  animation: form-status-entrada 0.4s ease both;
}

@keyframes form-status-entrada {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-status {
    animation: none;
  }
}

.form-status--success {
  background-color: #e6f4ea;
  color: #1e6b3a;
}

.form-status--error {
  background-color: #fbe8e8;
  color: #a3241f;
}

.form-status--rate_limited,
.form-status--privacy_required {
  background-color: #fff6e0;
  color: #8a6400;
}

@media (max-width: 800px) {
  .contact__inner {
    grid-template-columns: 1fr;
    /* El gap de 56px es cómodo entre las 2 columnas de escritorio,
       pero en móvil (1 columna) se acumula entre CADA elemento
       apilado (eyebrow, título, subtítulo, formulario...), empujando
       el formulario bien abajo antes de que se vea */
    gap: 20px;
  }

  .contact__form {
    padding: 24px;
    order: 1;
  }

  /* .contact__direct vive dentro de .contact__intro en el HTML (para
     que en escritorio quede bajo el subtítulo, en la misma columna).
     display: contents "disuelve" ese contenedor en móvil para que sus
     hijos pasen a ser ítems directos del grid y admitan su propio
     order: así el formulario puede ir antes que el bloque de contacto
     directo sin tener que duplicar el HTML. */
  .contact__intro {
    display: contents;
  }

  .contact__intro > .section-eyebrow,
  .contact__intro > .section-title,
  .contact__intro > .section-subtitle {
    order: 0;
  }

  /* Con .contact__intro disuelto, el margin-bottom del subtítulo se
     suma al gap de la grid en vez de colapsar como en flujo normal
     (aquí ya no hay flujo normal, son ítems de grid): se anula para
     que solo mande el gap y no se duplique el espacio. */
  .contact__intro > .section-subtitle {
    margin-bottom: 0;
  }

  .contact__direct {
    order: 2;
  }
}

/* ==========================================================================
   Botón flotante "volver arriba"
   ========================================================================== */
.site-footer {
  position: relative;
}

.back-to-top {
  position: absolute;
  right: 24px;
  bottom: 100%;
  margin-bottom: 12px;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(28, 31, 38, 0.2);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background-color var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: volver-arriba-rebote 1.6s ease-in-out infinite;
}

@keyframes volver-arriba-rebote {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top.is-visible {
    animation: none;
  }
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--color-accent-hover);
}

@media (max-width: 600px) {
  .back-to-top {
    right: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
  padding-block: 28px;
  margin-top: 96px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.footer__inner nav {
  display: flex;
  gap: 20px;
}

.footer__inner nav a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__inner nav a:hover,
.footer__inner nav a:focus-visible {
  color: var(--color-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  /* CAMBIO: layout de cabecera "compacto", activo en TODO este rango
     (hasta 1000px), no solo por debajo de 600px — así el nav de
     escritorio (6 enlaces) nunca tiene que apretarse en el hueco
     estrecho entre 601 y 1000px.
     CAMBIO (grid en vez de flex): con flexbox, centrar "Hablemos"
     entre el logo y el menú hamburguesa exigía que ambos midieran
     EXACTAMENTE lo mismo (si no, el hueco de sobra queda repartido
     a favor del más ancho y el botón se ve descentrado — el bug de
     la captura). Con grid-template-columns: 1fr auto 1fr, la columna
     del medio (ancho automático, ajustado al botón) queda centrada
     de verdad sin importar cuánto midan el logo o el hamburguesa a
     los lados. La fila de abajo (selector de idioma) ocupa las 3
     columnas y se centra con su propio contenido. */
  .header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "logo cta toggle"
      "actions actions actions";
    align-items: center;
    row-gap: 8px;
  }

  .logo {
    grid-area: logo;
    justify-self: start;
  }

  /* Escalado fluido con clamp(): crece de forma continua entre 320px
     y 1000px de viewport, sin saltos bruscos por breakpoint. */
  .logo-svg {
    height: clamp(48px, 40px + 2.5vw, 64px);
    width: clamp(48px, 40px + 2.5vw, 64px);
  }

  /* "Hablemos" centrado de verdad en la columna del medio (selector
     acotado a este botón concreto: la misma clase .btn--primary se
     reutiliza en el hero, tarifas y el formulario, y esos no deben
     verse afectados) */
  .header__inner > .btn--primary {
    grid-area: cta;
    justify-self: center;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 16px 24px;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav__list {
    flex-direction: column;
    gap: 16px;
  }

  .main-nav__list a {
    font-size: 1.2rem;
  }

  .nav-toggle {
    display: flex;
    grid-area: toggle;
    justify-self: end;
  }

  /* Selector de idioma: su propia fila completa, centrada */
  .header__actions {
    grid-area: actions;
    justify-self: center;
    margin-left: 0;
    margin-top: 4px;
  }

}

/* Móvil en horizontal (poca altura de viewport): el layout de 2 filas
   pensado para vertical (logo/cta/toggle + selector de idioma debajo)
   ocupa demasiada altura relativa cuando el viewport mide, por
   ejemplo, ~380px de alto. Se compacta: logo más pequeño, menos
   padding y el selector de idioma vuelve a la misma fila que el
   logo/botón (como en escritorio) en vez de su propia fila. */
@media (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
  .header__inner {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "logo cta actions toggle";
    padding-block: 8px;
    row-gap: 0;
  }

  .logo-svg {
    height: 40px;
    width: 40px;
  }

  .header__inner > .btn--primary {
    justify-self: start;
  }

  .header__actions {
    justify-self: end;
    margin-top: 0;
  }

  /* El menú desplegable (8 enlaces a 1.2rem con gap:16px) no cabe
     entero en una pantalla de ~380px de alto. Se compacta la fuente y
     el espaciado, pero se mantiene un área táctil amplia con padding
     vertical en cada enlace (en vez de fiarlo todo al tamaño de
     fuente, que quedaría difícil de tocar). overflow-y:auto es una
     red de seguridad por si aún así no cupieran todos los enlaces. */
  .main-nav {
    padding: 8px 24px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 2 columnas: aprovecha el ancho disponible en apaisado para
     reducir a la mitad las filas necesarias (y por tanto la altura
     total del menú desplegado) */
  .main-nav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .main-nav__list a {
    display: block;
    padding: 10px 4px;
    font-size: 0.95rem;
  }
}

@media (max-width: 600px) {
  .header__inner {
    /* CAMBIO: gap reducido de los 32px base — con el logo mucho más
       grande, ese hueco entre logo/botón/hamburguesa sobraba y
       empujaba a "Hablemos" fuera de la fila */
    gap: 10px;
  }

  /* CAMBIO: "Hablemos" mantiene el mismo tamaño en todo este rango
     móvil (el de base, ~659px, sin encoger) — solo el menú hamburguesa
     cede un poco de padding para dejarle sitio junto al logo (que ya
     escala con clamp(), ver @media 1000px) */
  /* Icono más pequeño (antes se lograba con menos padding; ahora que
     tiene tamaño fijo para poder animarse a "X", hay que encogerlo
     explícitamente y reubicar las líneas dentro) */
  .nav-toggle {
    width: 36px;
    height: 30px;
  }

  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    left: 6px;
  }

  .nav-toggle::before {
    top: 7px;
  }

  .nav-toggle span {
    top: 14px;
  }

  .nav-toggle::after {
    top: 21px;
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 64px;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* CAMBIO: por debajo de 340px, el hueco entre logo + "Hablemos" +
   hamburguesa (gap de 32px heredado de .header__inner, más el padding
   del botón) ya no cabe en una sola fila y rompe el layout de arriba
   definido en el bloque anterior. Se reduce el gap y se encoge el
   logo/botón/hamburguesa lo justo para que las 3 piezas de la fila de
   arriba sigan cabiendo siempre, en vez de envolver a una fila extra.
   El corte se sube a 360px (con margen sobre los 340px reales) porque
   las métricas de fuente de un móvil real pueden ser unos píxeles más
   anchas que las que usa DevTools al emular el mismo ancho, así que un
   corte exacto en 340px podía desbordar en dispositivos reales de
   ~344px aunque en DevTools cupiera justo. */
@media (max-width: 360px) {
  .header__inner {
    gap: 6px;
  }

  .nav-toggle {
    width: 34px;
    height: 28px;
  }

  .nav-toggle span,
  .nav-toggle::before,
  .nav-toggle::after {
    left: 5px;
  }

  .nav-toggle::before {
    top: 6px;
  }

  .nav-toggle span {
    top: 13px;
  }

  .nav-toggle::after {
    top: 20px;
  }
}

/* ==========================================================================
   Reveal al hacer scroll (IntersectionObserver, ver assets/js/main.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ==========================================================================
   Cascada de etiquetas (hero__tags / about__skills)
   ========================================================================== */
/* Estado inicial: ocultos y ligeramente desplazados hacia arriba.
   CAMBIO: sin transition-delay aquí — si el retraso se aplica también
   al DESAPARECER (no solo al aparecer), el elemento con más retraso
   (el último, --indice-etiqueta más alto) puede quedarse "atascado"
   visible si el usuario hace scroll varias veces seguidas antes de
   que le dé tiempo a completar el desvanecido retrasado. Al quitar el
   delay de aquí, desaparecer siempre es inmediato; el retraso en
   cascada (ver .is-visible más abajo) solo afecta a la entrada. */
.hero__tags li,
.about__skills li {
  opacity: 0;
  transform: translateY(-25px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Estado final cuando la clase "is-visible" se activa */
.hero__tags li.is-visible,
.about__skills li.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--indice-etiqueta, 0) * 0.18s);
}

/* Retraso en cascada para que aparezcan una a una: --indice-etiqueta
   se multiplica por 0.18s arriba, así que aquí solo hace falta el
   número de orden de cada elemento (0, 1, 2, 3...) */
.hero__tags li:nth-child(1),
.about__skills li:nth-child(1) { --indice-etiqueta: 0; }
.hero__tags li:nth-child(2),
.about__skills li:nth-child(2) { --indice-etiqueta: 1; }
.hero__tags li:nth-child(3),
.about__skills li:nth-child(3) { --indice-etiqueta: 2; }
.hero__tags li:nth-child(4),
.about__skills li:nth-child(4) { --indice-etiqueta: 3; }

@media (prefers-reduced-motion: reduce) {
  .hero__tags li,
  .about__skills li {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* Bloques de prueba (responsive y Lighthouse) y cierre de la portada */
.proof {
  padding-block: 64px;
}

.closing__inner p {
  max-width: 65ch;
  margin-top: 16px;
}

.proof__grid {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

@media (min-width: 900px) {
  .proof__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.proof__figure {
  margin: 0;
}

.proof__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.proof__figure--single {
  max-width: 560px;
  margin-inline: auto;
  margin-top: 32px;
}

.closing {
  padding-block: 72px;
}

.closing__inner .btn {
  margin-top: 24px;
}

/* Encuadre de una foto de proof para mostrar más su parte derecha */
.proof__img--right {
  object-position: right 15%;
}

/* Al volver arriba (#hero) el título no queda pegado a la cabecera: margen extra de aterrizaje */
#hero {
  scroll-margin-top: 32px;
}

/* Sección Proceso: textura WebP como fondo, con desvanecido vertical */
.image-bg {
  background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), url("../img/bg_img.webp") center / cover no-repeat;
  /* Desvanecido arriba y abajo: el centro se ve completo y los bordes verticales se funden con el color de la sección */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 8%, rgba(0,0,0,.9) 14%, #000 20%, #000 80%, rgba(0,0,0,.9) 86%, rgba(0,0,0,.5) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 8%, rgba(0,0,0,.9) 14%, #000 20%, #000 80%, rgba(0,0,0,.9) 86%, rgba(0,0,0,.5) 92%, transparent 100%);
}

/* Sección Proceso: capa clara semitransparente para mantener el contraste del texto */
.image-bg::after {
  background-color: rgba(253, 251, 249, 0.65);
}

/* Sombra en las tarjetas de cada paso del proceso */
.process__steps li {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

/* Sombra en las dos fotos de la sección de diseño adaptativo */
#responsive .proof__figure img {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}


/* ==========================================================================
   Páginas legales (aviso legal, privacidad y cookies)
   ========================================================================== */
.legal {
  padding-block: 64px 96px;
}

.legal__inner {
  max-width: 760px;
}

.legal__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 32px;
}

.legal__section {
  margin-bottom: 32px;
}

.legal__section h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 10px;
}

.legal__section p,
.legal__section li {
  color: var(--color-text-muted);
  line-height: 1.7;
}

.legal__section ul {
  margin: 8px 0 0 20px;
  list-style: disc;
}

/* Enlaces dentro del texto legal: negrita y cambio de color al pasar el ratón */
.legal__section p a {
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

.legal__section p a:hover,
.legal__section p a:focus-visible {
  color: var(--color-text);
}

/* Banner de consentimiento de cookies */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3000;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--color-bg, #fdfbf9);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  /* Oculto con opacity/visibility (no con "hidden"/display:none): el
     recuadro ya ocupa su sitio fijo desde el primer fotograma, así que
     cuando consent.js lo revela no hay ningún cambio de geometría que
     Chrome pueda contar como salto de maquetación (CLS). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.cookie-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-text);
}

.cookie-banner__text a {
  font-weight: 700;
  color: var(--color-accent);
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
}

.cookie-banner__actions .btn {
  padding: 10px 16px;
  font-size: 0.9rem;
}

.footer-cookie-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Enlaces legales del pie: en dos filas, cada una centrada (solo en móvil) */
@media (max-width: 600px) {
  .site-footer .footer__inner > p {
    width: 100%;
    text-align: center;
  }

  .site-footer .footer__legal {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .site-footer .footer__legal-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 28px;
  }
}

/* Casilla de aceptación de la política de privacidad (no premarcada) */
.contact__privacy-check {
  margin-top: 16px;
}

.contact__privacy-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  cursor: pointer;
}

.contact__privacy-label input {
  flex-shrink: 0;
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

.contact__privacy-label a {
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: underline;
}

/* Escritorio: textos del pie en la primera fila y enlaces legales centrados en la segunda */
@media (min-width: 601px) {
  .site-footer .footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 88px;
  }

  .site-footer .footer__inner > p {
    margin: 0;
  }

  .site-footer .footer__inner > .footer__legal {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 12px;
  }
}

/* Escritorio: los grupos de enlaces legales no cambian el diseño de una sola línea */
@media (min-width: 601px) {
  .site-footer .footer__legal-row {
    display: contents;
  }
}