/* =========================================================
   Agencia SEO Vigo · hoja única
   Orden: tokens → reset → etiquetas → componentes → utilidades
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --rojo:#FC1002;        /* bordes, acentos, detalles. NO para texto: 4,0:1 */
  --rojo-boton:#C50D02;  /* botones y enlaces. 6,1:1 AA */
  --rojo-hondo:#8F0901;  /* hover y foco. 9,5:1 AAA */
  /* 12/09/2026: el relleno rosa desaparece. Se conserva el nombre del token
     para no tocar todos los componentes de golpe, pero su valor pasa a ser
     el blanco de la placa esmalte: el color lo pone el borde, no el fondo. */
  --rojo-tenue:#ffffff;
  /* Única excepción a «nunca texto en gris»: el rótulo de barrio de la
     cronología de /consultor-seo, que es decoración de fondo y no contenido.
     5,5:1 sobre blanco, cumple AA. No usarlo para texto de verdad. */
  --rotulo:#6E6862;
  --tinta:#111114;
  --linea:#e4e3e0;
  --blanco:#ffffff;

  --fuente:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --t-base:1.0625rem;
  --t-h1:clamp(1.45rem,2.4vw,1.75rem);
  --t-h2:1.25rem;
  --t-h3:1.0625rem;
  --t-menor:.875rem;

  --radio:9px;
  --placa-ancho:60px;   /* placa de 4 dígitos, medida real */
  --borde-placa:2px;
  --sombra-cabecera:0 2px 8px rgba(143,9,1,.13);
  --sombra-formulario:0 4px 14px rgba(143,9,1,.10);  /* 23/08: mismo nivel que la de las tarjetas, para que se note el desnivel sobre el fondo blanco */
  --sombra-tarjeta:0 4px 14px rgba(143,9,1,.10);
  --ancho-max:1280px;
  --ancho-texto:66ch;
}

/* ---------- FUENTES ---------- */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fuentes/space-grotesk-400.woff2?v=65fd17fc') format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fuentes/space-grotesk-700.woff2?v=35f8aec5') format('woff2');
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* `overflow-x:clip` y no `hidden`: los bloques a sangre —el separador y el
   fondo de la bandera— se estiran con `calc(50% - 50vw)`, y ahí se mezclan dos
   formas de medir que no coinciden. El `50%` sale del contenedor, al que el
   navegador ya le ha restado la barra de desplazamiento; el `50vw` sale del
   viewport, que por definición del estándar SÍ la incluye. La resta se pasa
   justo lo que mide la barra —unos 15 px— y el elemento sobresale 7,5 px por
   cada lado. Solo se nota donde la barra ocupa sitio, es decir en Windows y
   Linux: en macOS y en móvil flota por encima y no se ve. Confirmado por Óscar
   en su Chrome el 29/08.

   `clip` recorta sin convertir el body en contenedor de desplazamiento, que es
   lo que sí haría `hidden` y podría romper el `position:sticky` de la cabecera. */
body{margin:0;overflow-x:clip}
/* `ol` junto a `ul`, y `h4` junto al resto de encabezados: los dos faltaban y
   los dos se notaban. Sin `ol` en el reset, las tres listas ordenadas del sitio
   —la cronología de /consultor-seo, el flujo de /contenidos y la metodología de
   la portada— arrastraban los 40 px de sangría y el margen inferior que el
   navegador les pone por defecto; en la cronología eso dejaba además la calzada
   descolgada de las placas, porque se posiciona respecto a la caja de relleno.
   Sin `h4`, las cuatro tarjetas de /contenidos —las únicas del sitio cuyo
   título es h4 y no h3, porque ahí cuelgan de un h3— sumaban 37 px de alto
   frente a las 21 tarjetas idénticas del resto: dentro de un contenedor flex
   los márgenes no colapsan, se suman al hueco. Detectado en la revisión del
   29/08. */
h1,h2,h3,h4,p,ul,ol,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}

/* ---------- ETIQUETAS ---------- */
body{
  font-family:var(--fuente);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--tinta);
  background:var(--blanco);
}
h1{font-size:var(--t-h1);line-height:1.2;font-weight:700}
h2{font-size:var(--t-h2);line-height:1.3;font-weight:700}
h3{font-size:var(--t-h3);font-weight:700}
p{max-width:var(--ancho-texto)}
a{color:var(--rojo-boton)}
a:hover{color:var(--rojo-hondo)}
address{font-style:normal}
:focus-visible{outline:2px solid var(--rojo-hondo);outline-offset:2px}

/* ---------- COMPONENTES ---------- */

/* Salto al contenido. Primer elemento del documento y fuera de pantalla hasta
   que recibe el foco: quien navega con teclado lo encuentra en la primera
   tabulación y se ahorra el logotipo y los siete enlaces del menú en cada una
   de las doce páginas. Es el requisito 2.4.1 de las WCAG, nivel A.

   Se mueve con `transform` y no con `top` para no forzar recálculo de diseño,
   y con `z-index` por encima de la cabecera pegajosa para que no quede tapado
   al aparecer. */
.salto{
  position:fixed;
  top:0;
  left:.75rem;
  z-index:30;
  padding:.6rem 1rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:0 0 var(--radio) var(--radio);
  background:var(--blanco);
  color:var(--tinta);
  font-size:var(--t-menor);
  font-weight:700;
  text-decoration:none;
  transform:translateY(-110%);
}
.salto:focus{transform:translateY(0)}

/* Contenedor */
.interior{
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:1.25rem;
}

/* La placa: logotipo */
.marca{
  position:relative;
  display:inline-flex;
  align-items:center;
  height:36px;
  padding-inline:.75rem;
  border:var(--borde-placa) solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  color:var(--tinta);
  font-size:var(--t-menor);
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
/* Extiende el área táctil a 48 px sin engordar la placa */
.marca::after{content:"";position:absolute;inset:-6px 0}
.marca:hover{color:var(--tinta);border-color:var(--rojo-hondo)}

/* Cabecera */
.cabecera{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--blanco);
  box-shadow:var(--sombra-cabecera);
}
.cabecera .interior{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-block:1rem;
}
.menu{display:flex;align-items:center;gap:.35rem}
.menu__enlace{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding-inline:.7rem;
  border-radius:var(--radio);
  color:var(--tinta);
  font-size:var(--t-menor);
  font-weight:700;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
/* Sin relleno: la respuesta del hover la da el color y un subrayado grueso,
   que es lo que queda al retirar el rosa. */
.menu__enlace:hover{color:var(--rojo-hondo);box-shadow:inset 0 -2px 0 var(--rojo-hondo)}
.menu__enlace[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--rojo)}

.hamburguesa{
  display:none;
  width:48px;
  height:48px;
  place-items:center;
  margin-right:-8px;
  cursor:pointer;
}

/* Panel móvil */
.panel{
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:var(--blanco);
  color:var(--tinta);
}
/* El panel mide siempre el alto de la pantalla, pero su contenido son unos
   565 px: la barra, siete enlaces de 56 px y el bloque de contacto. En móvil
   en horizontal —390 o 430 px de alto— el último enlace y los botones de
   Llamar y WhatsApp se quedaban fuera SIN posibilidad de llegar a ellos: el
   <dialog> modal bloquea el desplazamiento de la página y él mismo no lo
   permitía. Medido y confirmado el 29/08.

   `overflow-y:auto` y no `scroll`: donde el contenido cabe —todos los móviles
   en vertical y las tabletas— no aparece barra alguna y nada cambia.
   `overscroll-behavior:contain` evita que al llegar al final del panel el
   gesto siga arrastrando la página de debajo. */
.panel[open]{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.panel::backdrop{background:rgb(17 17 20 / .4)}
.panel__barra{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--linea);
}
.panel__barra .hamburguesa{display:grid}
.panel__menu{padding-inline:1.25rem}
.panel__enlace{
  display:flex;
  align-items:center;
  min-height:56px;
  border-bottom:1px solid var(--linea);
  color:var(--tinta);
  font-size:var(--t-base);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
}
.panel__enlace:last-child{border-bottom:0}
.panel__enlace[aria-current="page"]{color:var(--rojo-hondo)}
.panel__contacto{
  display:flex;
  gap:.5rem;
  margin-top:auto;
  padding:1.25rem;
}

/* Botones */
.boton{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding-inline:1rem;
  border:var(--borde-placa) solid var(--rojo);
  border-radius:var(--radio);
  color:var(--tinta);
  font-size:var(--t-menor);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
}
.boton:hover{color:var(--rojo-hondo);border-color:var(--rojo-hondo);background:var(--blanco)}
.boton--relleno{
  border-color:var(--rojo-boton);
  background:var(--rojo-boton);
  color:var(--blanco);
}
.boton--relleno:hover{
  border-color:var(--rojo-hondo);
  background:var(--rojo-hondo);
  color:var(--blanco);
}

/* Contenido */
main{padding-block:2.5rem 3rem}

/* Primer impacto: texto a la izquierda, formulario al lado.
   Un párrafo suelto ocupando media pantalla es un error. */
.portada{
  display:grid;
  grid-template-columns:45fr 55fr;   /* el formulario manda: es lo que hay que rellenar */
  gap:3rem;
  align-items:center;
}
/* Variante para páginas donde el formulario no comparte fila con el texto
   (presupuesto-seo): titular, entradilla y CTA a todo el ancho, formulario
   debajo, con el mismo espacio vertical que ya usa el móvil. */
.portada--apilada{grid-template-columns:1fr}
.entradilla{margin-top:.9rem}

/* Separador entre bloques de contenido de la home, bajo el primer impacto.
   Rompe el ancho de `.interior` a lo bruto (como la línea del pie, que va en
   el propio <footer> y no en su `.interior`) para llegar de borde a borde. */
.separador{
  border:0;
  border-top:1px solid var(--linea);
  margin-block:3rem;
  margin-inline:calc(50% - 50vw);
}
/* En escritorio los bloques cortos —una fila de logotipos, una cronología de
   una sola línea— quedan pegados unos a otros con 3rem: el ojo los lee como un
   solo amasijo en vez de como tres secciones. En móvil no pasa, porque cada
   bloque ya ocupa casi toda la pantalla. */
@media (min-width:901px){
  .separador{margin-block:4.5rem}
}

/* Bloque de contenido bajo el primer impacto: título breve + texto corto.
   Se reutiliza para cada sección nueva que se añada a la home. Aquí el texto
   no comparte columna con nada, así que ocupa todo el ancho del contenido
   en vez de la medida de lectura de 66ch que usan los párrafos sueltos. */
.bloque h2{margin-bottom:.75rem}
.bloque p{max-width:none}
.bloque p + p{margin-top:1rem}
/* Subtítulo dentro de un bloque: hijo directo a propósito. Los h3 de las
   tarjetas del catálogo también viven dentro de un `.bloque`, pero anidados
   más abajo, y llevan su propia placa: si el selector no fuera directo les
   metería este margen y descuadraría la cabecera de cada tarjeta. */
.bloque > h3{margin-top:2rem;margin-bottom:.75rem}

/* Lista dentro de un bloque de contenido: la misma viñeta cuadrada roja de
   las listas de las tarjetas, pero al tamaño del texto corrido en vez del
   reducido que usa la tarjeta. */
.lista{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.lista li{position:relative;padding-left:1.1rem}
.lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:.6em;
  width:6px;
  height:6px;
  border-radius:1px;
  background:var(--rojo);
}

/* Bloque que cierra la página sin línea divisoria propia: el borde inferior
   de las tarjetas del catálogo ya marca el corte, así que solo aporta el
   espacio y deja que la línea del footer (`.pie`) cierre la página. */
.bloque--formulario{margin-top:3rem}
.bloque--formulario p{margin-bottom:1.5rem}

/* Catálogo de servicios sueltos (posicionamiento-web y similares): una
   tarjeta por servicio, con más contenido que la tarjeta de la home (intro,
   tareas incluidas, qué consigues, qué te entregamos). Tres columnas fijas
   en escritorio, no auto-fit, para que no varíe el número de tarjetas por
   fila según el ancho disponible; el grid iguala solo la altura de cada
   fila automáticamente. */
.catalogo{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:2.5rem;
}
@media (min-width:901px){
  .catalogo{grid-template-columns:repeat(3,1fr)}
}
/* Variante de dos tarjetas por fila (p. ej. SEO local: sitio web vs. ficha de
   Google Maps), mismo componente .catalogo__tarjeta, sin la tercera columna. */
@media (min-width:901px){
  .catalogo--dos{grid-template-columns:repeat(2,1fr)}
}
/* Variante de cuatro tarjetas en una sola fila. A 1280 px cada una queda en
   unos 290 px, así que el texto va justo: se reserva para bloques de frases
   cortas. Entre 601 y 1100 px pasa a dos columnas, porque cuatro no caben sin
   partir palabras. */
.catalogo--cuatro{grid-template-columns:1fr}
@media (min-width:601px){
  .catalogo--cuatro{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1101px){
  .catalogo--cuatro{grid-template-columns:repeat(4,1fr);gap:1.25rem}
  /* Con la columna estrecha, la placa del título necesita poder ocupar dos
     líneas en vez de forzarse a una. */
  .catalogo--cuatro .catalogo__titulo{min-height:52px;padding-inline:.5rem}
}
.catalogo__tarjeta{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  padding:1.5rem;
  border:1px solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:var(--sombra-tarjeta);
}
.catalogo__titulo{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:36px;
  padding:.4rem .75rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:var(--radio);
  background:var(--tinta);
  color:var(--blanco);
  font-size:var(--t-menor);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.catalogo__intro{font-size:var(--t-menor)}
/* Cuando la tarjeta lleva varios párrafos, el `gap` de .9rem del contenedor
   los separa demasiado y la tarjeta crece de más: aquí basta un respiro. */
.catalogo__tarjeta .catalogo__intro + .catalogo__intro{margin-top:-.35rem}
.catalogo__etiqueta{
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--tinta);
}
/* Icono de marca antes de cada etiqueta: la misma placa en miniatura que el
   CTA (.marca-mini), a menor tamaño, con un icono distinto según el papel
   del bloque: check para las tareas incluidas, flecha para los resultados
   (qué consigues / qué te entregamos). Así se diferencian de la viñeta de
   la lista sin salirse de elementos que ya existen en la marca. */
.catalogo__etiqueta--icono{display:flex;align-items:center;gap:.5rem}
.catalogo__etiqueta--icono .marca-mini,
.catalogo__resultado .marca-mini{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:26px;
  height:22px;
  margin-top:0;
  border:var(--borde-placa) solid var(--rojo);
  border-radius:6px;
  color:var(--rojo);
}
.catalogo__lista{display:flex;flex-direction:column;gap:.4rem}
.catalogo__lista li{position:relative;padding-left:.9rem;font-size:var(--t-menor)}
.catalogo__lista li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:5px;
  height:5px;
  border-radius:1px;
  background:var(--rojo);
}
.catalogo__resultado{display:flex;gap:.6rem;align-items:flex-start}
.catalogo__resultado .marca-mini{margin-top:.1em}
.catalogo__resultado p{font-size:var(--t-menor)}
/* Aviso corto para servicios cuya ejecución puede implicar un coste externo
   (p. ej. linkbuilding): mismo tamaño que el resto del texto secundario de
   la tarjeta, pero en rojo hondo para que se note sin sonar alarmante. */
.catalogo__aviso{font-size:.8125rem;color:var(--rojo-hondo)}

/* Fila de tarjetas de servicios: mismo ancho cada una, se reacomodan solas
   según el hueco disponible, sin puntos de ruptura fijos (auto-fit) */
/* Columnas por tramos y no con `auto-fit`: con auto-fit las cuatro tarjetas
   se mantenían en fila hasta los 1024 px y en la franja de los 1100 px cada
   una se quedaba en 197 px de hueco interior, donde el texto del botón no
   entra en una línea a ningún tamaño legible. Con tramos explícitos, la fila
   de cuatro solo existe donde de verdad cabe, y por debajo pasa a 2x2, que
   además evita el 3+1 huérfano al que llevaría `auto-fit`. */
.tarjetas{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:1.5rem;
}
/* La tarjeta es una placa, como el formulario: mismo borde rojo, mismo radio.
   Filas automáticas (no 1fr): así la distancia título→texto y texto→botón
   es siempre la misma (el gap), sea cual sea la longitud del texto. Lo que
   varía es el hueco que queda debajo del botón, no el ritmo interno. */
.tarjeta{
  display:grid;
  grid-template-rows:auto auto auto;
  gap:.75rem;
  padding:1.5rem;
  border:1px solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:var(--sombra-tarjeta);
}
/* Título: la misma placa que el logotipo, pero con el borde en tinta en vez
   de rojo para no confundirse con el borde de la tarjeta, y el fondo que usa
   el nav al pasar el ratón, para que se reconozca como la misma familia.
   flex (no inline-flex) sin justify-self:start: así ocupa todo el ancho de
   la tarjeta y el contenedor mide lo mismo en las cuatro, sea cual sea el
   texto que lleve dentro. */
.tarjeta__titulo{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:36px;
  padding:.4rem .75rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:var(--radio);
  background:var(--tinta);
  color:var(--blanco);
  font-size:var(--t-menor);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.tarjeta__texto{font-size:var(--t-menor);text-align:center}
/* Centrado y ancho fijo: mismo texto en los cuatro botones («Más info»), así
   que un ancho fijo los deja idénticos en las cuatro tarjetas, sin depender
   de cómo se acomode el resto del contenido de cada una. */
@media (min-width:600px){
  /* `minmax(0,1fr)` y no `1fr`: `1fr` equivale a `minmax(auto,1fr)` y no deja
     que una columna baje de su contenido mínimo, así que las tarjetas cuyo
     botón tiene el texto más largo salían más anchas que las demás. Con 0 de
     mínimo las dos columnas miden exactamente igual.

     Solo dos columnas, nunca cuatro: con el ancho máximo del sitio en 1280 px,
     una fila de cuatro deja 242 px de hueco por tarjeta y estos textos piden
     261 px a tamaño normal. Cabrían a 11 px, que es letra de nota al pie para
     el que es el botón principal de la portada. Medido, no estimado. */
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){
  /* Cuatro en fila solo desde 1200 px. Por debajo la tarjeta baja a 197 px de
     hueco y el texto del botón no entra en una línea a ningún tamaño legible;
     desde 1200 quedan 242 px y entra a 12 px sin partirse. Medido, no
     estimado. */
  .tarjetas{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* A todo el ancho de la tarjeta, como la placa del título: los textos son
   llamadas a la acción de hasta 30 caracteres y con el ancho fijo de 9rem no
   entraban en una línea. `nowrap` con el tamaño medido para el peor caso —la
   fila de cuatro a 1200 px, donde quedan 242 px de hueco— garantiza que
   ninguno parta nunca. 48 px de alto, el mínimo táctil del proyecto. */
.tarjeta__boton{
  /* `.boton` lleva `flex:1`, pensado para los dos botones del panel móvil. En
     la tarjeta, que es una columna flexible, ese `1` los estira a lo alto de
     forma desigual según cuánto texto tenga cada tarjeta. Aquí manda el
     contenido. */
  flex:0 0 auto;
  /* La tarjeta es una rejilla y sus elementos se estiran a la altura de la
     fila: sin esto el botón medía 48 o 55 px según cuánto texto tuviera la
     tarjeta de al lado. `end` lo deja a su altura natural y apoyado abajo,
     así los cuatro quedan alineados entre sí. */
  align-self:end;
  width:100%;
  /* Fino y alargado: es una llamada a la acción, no una placa de título, y a
     48 px competía visualmente con el h3. Los 48 px del mínimo táctil que fija
     CLAUDE.md se mantienen abajo, en el tramo de una columna, que es el que se
     pulsa con el dedo; aquí se usa con ratón. */
  min-height:38px;
  padding-inline:.25rem;
  font-size:.75rem;
  white-space:nowrap;
  border-color:var(--tinta);
}
.tarjeta__boton:hover{border-color:var(--tinta)}

/* En móvil el botón se queda igual de fino que en escritorio —a 48 px pesaba
   demasiado y competía con la tarjeta entera— pero extiende su área pulsable
   por arriba y por abajo hasta los 48 px del mínimo táctil, sin engordar. Es
   el mismo recurso que ya usa la placa del logotipo. El dedo tiene su destino,
   el ojo ve un botón esbelto. */
.tarjeta__boton{position:relative}
@media (max-width:599px){
  .tarjeta__boton::after{content:"";position:absolute;inset:-5px 0}
}


/* Listado de la metodología: en vez de viñetas, la misma placa en miniatura
   que ya usamos junto al CTA (`.marca-mini`), pero con el número del paso
   dentro. Así se rompe el patrón de la viñeta sin salirse de la identidad. */
.metodologia{
  display:grid;
  gap:2rem;
  counter-reset:paso;
  margin-top:1.5rem;
}
.metodologia__paso{position:relative;padding-left:2.75rem}
.metodologia__paso::before{
  counter-increment:paso;
  content:counter(paso);
  position:absolute;
  left:0;
  top:.1rem;
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border:var(--borde-placa) solid var(--rojo);
  border-radius:7px;
  color:var(--rojo);
  font-size:var(--t-menor);
  font-weight:700;
}
.metodologia__paso h3{margin-bottom:.4rem}
.metodologia__paso p{max-width:none}

/* A partir de 901px (el mismo corte que usamos para el fondo de la bandera
   en móvil) el listado pasa a dos columnas: cada párrafo mantiene un ancho
   de lectura normal, pero el bloque aprovecha mejor el ancho del fondo. */
@media (min-width:901px){
  .metodologia{
    grid-template-columns:1fr 1fr;
    column-gap:3rem;
    row-gap:2rem;
  }
}

/* Botón fino y de ancho libre (a diferencia del de las tarjetas, este texto
   es más largo y no le conviene un ancho fijo), con el mismo borde negro. */
.metodologia__cta{text-align:center;margin-top:2.5rem}

/* Prueba: la bandera de Vigo como fondo del bloque. Coincide con la paleta
   (rojo y blanco), por eso funciona incluso muy tenue. Va en un ::before
   para poder bajarle la opacidad sin afectar al contenido, que queda por
   encima (z-index) y nunca puede desbordar la sección (overflow:hidden). */
/* Sin overflow:hidden aquí: cortaría el truco de ancho completo del ::before
   de abajo. La sección en sí sigue midiendo lo mismo que el contenido; solo
   el fondo decorativo se expande hasta el borde de la pantalla, igual que
   la línea separadora, para que quede a ras de las líneas divisorias. */
.bloque--bandera{position:relative;padding-block:2rem}
.bloque--bandera::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  z-index:0;
  background-image:url('/img/bandera-vigo.webp?v=d6ff462c');
  background-size:cover;
  background-position:center;
  opacity:.05;
}
.bloque--bandera>*{position:relative;z-index:1}
.boton--mini{
  min-height:36px;
  font-size:.8125rem;
  border-color:var(--tinta);
}
.boton--mini:hover{border-color:var(--tinta)}

/* Páginas legales: aviso legal, privacidad, cookies. Texto corrido, sin
   above the fold, así que se limita al ancho de lectura y se separan los
   bloques por la jerarquía de h2, no por líneas divisorias. */
.legal{max-width:var(--ancho-texto);font-size:var(--t-menor)}
.legal h1{margin-bottom:1.5rem}
.legal h2{margin-top:2rem}
.legal p,.legal ul{margin-top:.75rem}
.legal ul{display:grid;gap:.4rem}
.legal a{color:var(--rojo-boton)}
.legal a:hover{color:var(--rojo-hondo)}

/* Página de gracias: solo confirma el envío, sin formulario ni placa. */
.gracias{max-width:var(--ancho-texto)}


/* Formulario de captación: es una placa */
.captura{
  display:grid;
  gap:.85rem;
  min-width:0;
  padding:1.5rem;
  border:var(--borde-placa) solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:var(--sombra-formulario);
}
/* La llamada a la acción vive junto al texto, no dentro del formulario:
   así el formulario solo tiene campos y baja de 645 a 400 px de alto. */
.llamada{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  margin-top:1.6rem;
  font-size:var(--t-h2);
  font-weight:700;
  line-height:1.3;
}
/* Variante para cuando la llamada va justo debajo de un h2: al mismo tamaño y
   peso que el original competiría con el título y parecería un segundo
   encabezado. Mantiene la flecha y la sangría, baja a texto normal. */
.llamada--nota{
  font-size:var(--t-base);
  font-weight:400;
}

/* Resalte de una frase dentro de un párrafo: el mismo fondo y el mismo rojo
   que toma un enlace del menú al pasar el ratón, pero fijo. Sirve para
   destacar sin recurrir otra vez a la negrita, que en estas páginas ya está
   muy usada. `box-decoration-break:clone` hace que, cuando la frase parte en
   dos líneas, cada línea lleve su propio relleno y sus esquinas redondeadas
   en vez de quedar cortada a hacha por el medio. */
.resalte{
  padding:.1em .35em;
  border-radius:var(--radio);
  background:var(--tinta);
  color:var(--blanco);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* La placa en miniatura: la marca aparece aquí sin encajonar el texto */
.marca-mini{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  width:38px;
  height:30px;
  margin-top:.1em;
  border:var(--borde-placa) solid var(--rojo);
  border-radius:7px;
  color:var(--rojo);
}
/* Dos campos cortos por fila: menos altura sin quitar nada */
.pareja{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;min-width:0}
.campo{display:grid;gap:.3rem;min-width:0}
.campo label{font-size:var(--t-menor);font-weight:700}
.campo__nota{font-weight:400}
.campo input,.campo select,.campo textarea{
  width:100%;
  min-width:0;
  padding-inline:.75rem;
  border:1px solid var(--linea);
  border-radius:var(--radio);
  font-family:inherit;
  font-size:var(--t-base);
  color:var(--tinta);
  background:var(--blanco);
}
.campo input,.campo select{height:48px}
.campo textarea{min-height:110px;padding-block:.65rem;resize:vertical}
/* Un `<select>` sin ancho fijo se dimensiona por defecto a la opción más
   larga de la lista, no a la seleccionada: en un formulario con opciones
   largas (como el desplegable de servicios) eso empuja la rejilla entera
   fuera de pantalla en móvil. `min-width:0` en cada nivel (campo, pareja,
   captura) permite que la pista de la rejilla se encoja al ancho real
   disponible; el texto que no cabe se recorta dentro de la caja. */
.campo select{appearance:auto}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{border-color:var(--rojo-hondo)}

/* Campo señuelo: existe en el DOM pero no se ve ni se tabula. El nombre de la
   clase es neutro a propósito; lo que hace se explica en CLAUDE.md, no aquí. */
.campo-extra{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consentimiento{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  font-size:var(--t-menor);
  line-height:1.4;
}
.consentimiento input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:1px 0 0;
  accent-color:var(--rojo-boton);
}
.captura .boton{min-height:44px}
/* Borde negro en el botón de envío, igual que en los mini-botones de las
   tarjetas: no en `.boton--relleno` a lo bruto, que también viste el botón
   de Llamar del panel móvil y ese no ha cambiado. */
.captura .boton--relleno{border-color:var(--tinta)}
.captura .boton--relleno:hover{border-color:var(--tinta)}
/* Sin `nowrap`, a propósito (revertido el 28/08 tras probarlo y quitarlo el
   mismo día): el texto es la frase completa, no una versión corta, y mide
   unos 550 px. Al ser un elemento de la rejilla del formulario, forzar una
   sola línea obligaba a la columna entera a medir 550 px, sacando el
   formulario fuera de la pantalla y provocando scroll horizontal en la
   portada, /seo-local, /seo-mensual y /diseno-web-seo. Es una línea de
   apoyo: que parta en dos renglones en móvil es exactamente lo que debe
   pasar; en escritorio, donde el formulario ocupa el ancho entero, cabe en
   una sola línea sin forzar nada. */
.captura__ayuda{
  margin-top:-.4rem;
  font-size:.8125rem;
  text-align:center;
}
.captura__ayuda a{color:var(--rojo-boton);font-weight:700}
.captura__ayuda a:hover{color:var(--rojo-hondo)}

@media (max-width:900px){
  .portada{grid-template-columns:1fr;gap:2rem;align-items:start}
  /* La medida corta es un recurso de escritorio. En móvil el ancho ya lo limita
     la pantalla: mantenerla obligaría al titular a partirse en más líneas y
     empujaría el formulario fuera de la primera pantalla. */
  .pareja{grid-template-columns:1fr}
  /* En móvil el bloque es muy alto y estrecho (el listado se apila), así que
     `cover` + centrado deja ver casi toda la altura de la bandera pero solo
     una franja vertical estrecha por el ancho — y esa franja central es
     justo la columna del escudo. Desplazamos el encuadre a un lateral para
     que se vea el aspa roja/blanca, no el escudo ampliado. */
  .bloque--bandera::before{background-position:15% center}
}

/* ---------- MURO DE LOGOTIPOS ----------
   Los logotipos de cliente son marcas ajenas y van en su color: junto al
   favicon, la única excepción de color del sitio. Cada archivo se exporta ya
   al tamaño exacto en que se ve, al doble para pantallas densas, y con los
   anchos normalizados por superficie —no por alto— para que un logotipo muy
   apaisado no aplaste a uno cuadrado. Por eso aquí no hace falta encajarlos en
   una celda: basta con centrarlos y dejar que cada uno mida lo suyo.
   `width`/`height` van en el HTML para que el navegador reserve el hueco antes
   de descargar y la página no dé saltos al cargar. */
.muro{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:2.25rem 3rem;
  margin-top:2.5rem;
}
.muro img{display:block;max-width:100%;height:auto}
@media (max-width:600px){.muro{gap:1.75rem 2rem}}

/* ---------- RESEÑAS ----------
   Tres opiniones en fila, no una debajo de otra: reparten el ancho y bajan la
   altura del bloque. La tarjeta es la misma del catálogo (borde rojo fino y la
   sombra teñida), el nombre va en la placa y las estrellas son el único sitio
   del sitio donde el rojo de marca hace de relleno y no de borde: son un
   detalle, que es justo para lo que sirve `--rojo`. */
.resenas{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin-top:2.5rem;
}
@media (min-width:901px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.5rem;
  border:1px solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:var(--sombra-tarjeta);
}
/* Estrellas a la izquierda y servicio a su derecha, siempre. Las estrellas no
   se encogen y el servicio ocupa el resto: si es largo parte en dos líneas ahí
   mismo, en lugar de caerse debajo. Así las tres tarjetas tienen la misma
   cabecera aunque los servicios midan distinto. Las estrellas van en el rojo de
   marca y el servicio en tinta, para no juntar dos rojos. */
.resena__cabecera{display:flex;align-items:flex-start;gap:.6rem}
.resena__estrellas{flex:0 0 auto;display:flex;gap:.2rem;margin-top:.05rem;color:var(--rojo)}
.resena__servicio{
  flex:1 1 auto;
  min-width:0;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.35;
}
.resena__texto{font-size:var(--t-menor);margin:0}
/* Una reseña larga se parte en párrafos dentro de la propia cita: el
   `blockquote` pasa a ser el contenedor y el espaciado lo pone su `gap`. */
.resena__texto{display:flex;flex-direction:column;gap:.7rem}
/* `.bloque p + p` añade 1rem a cualquier párrafo seguido de otro dentro de un
   bloque, y aquí se sumaba al `gap` de la cita: el hueco salía del doble. Se
   anula con la misma especificidad, pero declarado más abajo. */
.resena__texto p{margin:0}
.resena__texto p + p{margin-top:0}
/* El nombre cierra la tarjeta abajo del todo aunque los textos midan distinto:
   `margin-top:auto` empuja la placa al pie y las tres quedan alineadas. */
.resena__autor{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:.4rem .75rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:var(--radio);
  background:var(--rojo-tenue);
  font-size:var(--t-menor);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
}

/* ---------- LA AVENIDA · cronología de /consultor-seo ----------
   La placa de calle recorriendo una avenida: cada hito es una placa sobre una
   calzada continua, y entre placa y placa el nombre de un barrio de Vigo. El
   hito actual lleva la placa rellena, el mismo gesto que el botón y que el
   enlace activo del nav: es el «estás aquí». */
.avenida{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;margin-top:2.5rem}
/* La calzada pasa por el centro vertical de las placas: 36 px de alto / 2, menos
   el píxel del propio trazo. */
.avenida::before{content:"";position:absolute;top:17px;left:0;right:0;height:2px;background:var(--linea);z-index:0}
.avenida__hito{position:relative;z-index:1;display:flex;flex-direction:column;gap:.7rem}
.avenida__placa{align-self:flex-start;display:inline-flex;align-items:center;height:36px;padding-inline:.7rem;border:var(--borde-placa) solid var(--tinta);border-radius:var(--radio);background:var(--blanco);font-size:var(--t-menor);font-weight:700;letter-spacing:.03em;line-height:1}
.avenida__hito--actual .avenida__placa{border-color:var(--rojo-boton);background:var(--rojo-boton);color:var(--blanco)}
.avenida__texto{font-size:var(--t-menor)}

/* El tramo entre dos placas: caja transparente que va del borde derecho de esta
   placa al borde izquierdo de la siguiente (de ahí el `right` negativo, que se
   come el hueco de la rejilla). El rótulo va centrado dentro y lleva fondo
   blanco: es él quien tapa la calzada justo donde se posa, de modo que la línea
   parece pasar por detrás. */
.avenida__tramo{
  position:absolute;
  top:17px;
  left:calc(var(--placa-ancho) + .5rem);
  right:-1.5rem;
  transform:translateY(-50%);
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.avenida__barrio{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding-inline:.5rem;
  background:var(--blanco);
  color:var(--rotulo);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}

/* El corte sube de 900 a 1000 px por el rótulo del tramo: entre 901 y 995 px
   la columna deja 101 px y «CASCO VELLO» mide 120, así que se salía y —al
   llevar fondo blanco— tapaba el borde de la placa de 2026. Medido el 29/08. */
@media (max-width:1000px){
  .avenida{grid-template-columns:1fr;gap:0}
  /* La calzada se pone de pie y las placas se apoyan en ella. */
  .avenida::before{top:0;bottom:0;left:17px;right:auto;width:2px;height:auto}
  .avenida__hito{padding-left:5.5rem;padding-bottom:2.5rem;gap:.45rem}
  .avenida__placa{position:absolute;left:0;top:0}
  /* El título se centra con la placa en vez de empezar arriba del todo. */
  .avenida__hito h3{min-height:36px;display:flex;align-items:center}
  /* El rótulo cruza la calzada vertical al pie de cada hito. */
  .avenida__tramo{top:auto;bottom:.6rem;left:0;right:auto;transform:none;justify-content:flex-start}
  .avenida__barrio{padding-inline:.35rem}
}

/* Proceso: una secuencia de pasos encadenados por flechas. Es primo de
   `.avenida` pero no la misma pieza: la avenida es la historia de la empresa
   —placa con el año, texto descriptivo y el rótulo del barrio sobre la
   calzada—, mientras que esto es un flujo de trabajo, solo etiquetas, sin
   fechas ni cuerpo de texto. Va en <ol> porque el orden es el significado.

   Reparto con `flex:1 1 0` en vez de una rejilla de columnas fijas: los pasos
   miden muy distinto —«Briefing» frente a «Investigación de las Serps y
   competencia»— y así todos acaban igual de anchos sin fijar el número de
   pasos en el CSS. Añadir o quitar uno no obliga a tocar nada aquí.

   La base es 0 y no un ancho concreto: con una base de 150 px la fila no
   cabía por debajo de 1200 px y se partía dejando el último paso solo y
   estirado. Con base 0 cada paso solo reclama lo que su palabra más larga
   necesita, así que la fila aguanta entera hasta bastante más abajo. */
.proceso{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  gap:.75rem;
  margin-top:2.5rem;
}
.proceso__paso{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:.7rem .8rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:var(--radio);
  background:var(--rojo-tenue);
  font-size:var(--t-menor);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
  line-height:1.3;
}
/* La flecha no encoge ni crece: solo los pasos reparten el ancho sobrante. */
.proceso__flecha{
  flex:0 0 auto;
  align-self:center;
  display:inline-flex;
  color:var(--rojo);
}

/* El corte va donde va porque está medido en el navegador, no estimado: por
   debajo de este ancho los seis pasos ya no caben en una fila y se partían
   dejando el último solo y estirado a todo lo ancho, con la flecha abriendo
   el renglón. Así solo existen dos estados, una fila o una columna, y ningún
   intermedio a medias. Si se añade o se alarga un paso, hay que volver a
   medirlo. */
/* Línea de cierre del flujo. Hermana del <ol>, no hija: mismo patrón que
   `.metodologia__cta` en la portada. Centrada en todos los anchos, a
   diferencia del resto del texto del sitio, porque cierra una secuencia que
   ya está centrada y alinearla a la izquierda la dejaría descolgada. */
.proceso__cierre{text-align:center;margin-top:1.5rem}

@media (max-width:960px){
  /* En vertical la flecha apunta hacia abajo, que es hacia donde se lee. */
  .proceso{flex-direction:column;align-items:stretch}
  /* Obligatorio al cambiar de eje: en columna, `flex-basis` deja de medir el
     ancho y pasa a medir la ALTURA, así que los 150px del reparto horizontal
     convertían cada paso en una caja de 150px de alto. Aquí la altura la marca
     el texto. */
  .proceso__paso{flex:0 0 auto}
  .proceso__flecha{transform:rotate(90deg)}
}

/* CTA de cierre: una llamada corta y directa a WhatsApp para quien ha
   llegado hasta el final de la página y solo necesita un empujón. Centrada,
   a diferencia del resto de `.bloque`, porque aquí no hay nada al lado con
   lo que alinear el texto a la izquierda. */
.cta-cierre{text-align:center}
/* El texto es la llamada entera, no una etiqueta corta. Borde negro, el mismo
   criterio ya acordado que usa `.captura .boton--relleno` en los botones de
   envío.

   El `nowrap` SOLO a partir de 701 px: el texto mide 643 px y por debajo de esa
   ventana el botón se salía del contenedor y provocaba scroll horizontal en
   móvil (medido el 28/08). En pantallas estrechas parte en varias líneas y el
   botón crece a lo alto, que es lo que debe pasar. */
.cta-cierre .boton{
  white-space:normal;
  line-height:1.35;
  padding-block:.9rem;
  max-width:100%;
}
@media (min-width:701px){
  .cta-cierre .boton{white-space:nowrap;padding-block:0}
}
.cta-cierre .boton--relleno{border-color:var(--tinta)}
.cta-cierre .boton--relleno:hover{border-color:var(--tinta)}

/* Banner de consentimiento de cookies. Fijo al pie hasta que el visitante
   decide; después no se vuelve a mostrar salvo que pulse «Personalizar» o el
   enlace de /cookies para cambiar de opinión.

   Nombre `.aviso-cookies`, no `.consentimiento`: esa clase ya existía para
   la casilla «He leído y acepto la política de privacidad» del formulario
   (más abajo, `.consentimiento{display:flex;...}`). Reutilizar el nombre
   el 28/08 hizo que la casilla del formulario heredara `position:fixed` y
   se rompiera en todas las páginas — visto y corregido el mismo día. No
   volver a usar `consentimiento` a secas para nada nuevo.

   Botones propios `.aviso-cookies__boton`, no `.boton`: aquí interesa un
   botón más estrecho que el CTA de toda la web, sin `min-height:52px` ni
   mayúsculas. Los tres —Aceptar todas, Personalizar, Rechazar— comparten
   exactamente el mismo estilo y tamaño a propósito: ninguna decisión puede
   parecer más fácil que la otra con solo mirar el color. */
.aviso-cookies{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:20;
  background:var(--blanco);
  border-top:var(--borde-placa) solid var(--rojo);
  box-shadow:var(--sombra-cabecera);
}
.aviso-cookies[hidden]{display:none}
.aviso-cookies__interior{
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding:1rem 1.25rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1.5rem;
}
.aviso-cookies__texto{
  flex:1 1 var(--ancho-texto);
  font-size:var(--t-menor);
}
.aviso-cookies__texto a{color:var(--rojo-boton);font-weight:700}
.aviso-cookies__texto a:hover{color:var(--rojo-hondo)}
.aviso-cookies__panel{
  flex-basis:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem 1rem;
}
.aviso-cookies__panel[hidden]{display:none}
.aviso-cookies__opcion{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--t-menor);
  font-weight:700;
}
.aviso-cookies__botones{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  flex:0 0 auto;
}
/* Borde negro (--tinta), no rojo: el mismo criterio ya acordado para los
   botones rellenos que van sobre una placa propia -.captura, .cta-cierre-,
   para que las cajas que ya tienen su propio borde rojo alrededor no
   dupliquen el color en el borde del botón. */
.aviso-cookies__boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:.55rem 1.1rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:var(--radio);
  background:var(--rojo-boton);
  color:var(--blanco);
  font-size:var(--t-menor);
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}
.aviso-cookies__boton:hover{background:var(--rojo-hondo);border-color:var(--tinta)}

@media (max-width:640px){
  .aviso-cookies__interior{padding:1rem}
  .aviso-cookies__botones{flex-basis:100%}
  /* Los tres botones caben en una sola fila incluso en el móvil más
     estrecho (320 px) reduciendo letra y relleno; nunca partiendo en dos
     filas, que es justo lo que Óscar pidió evitar. */
  .aviso-cookies__boton{
    padding:.4rem .55rem;
    font-size:.6875rem;
  }
}

/* Área pulsable de 48 px en los tres botones del banner, sin cambiar su
   aspecto. Aquí importa más que en ningún otro sitio: es donde la norma exige
   que rechazar sea tan fácil como aceptar, y en móvil el botón se quedaba en
   30 px de alto. La capa invisible se reparte a los lados de cada botón, no
   entre ellos, para que no se solapen las zonas de dos botones vecinos. */
.aviso-cookies__boton::after{content:"";position:absolute;inset:-5px 0}
@media (max-width:640px){
  .aviso-cookies__boton::after{inset:-9px 0}
}

/* Pie */
.pie{border-top:1px solid var(--linea);padding-block:2.5rem 0;margin-top:3rem}
/* Clase propia, no `.pie .interior`: si no, esta regla gana por especificidad
   al display:flex del cierre y lo convierte en rejilla sin que se note. */
.pie__columnas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem;
  align-items:start;
}
.pie__negocio{display:grid;gap:1rem;justify-items:start}
/* Antes era h2: se cambia a párrafo porque no son encabezados de contenido,
   solo etiquetas del pie. La estética se mantiene igual con esta clase. */
.pie__titulo{
  font-size:var(--t-menor);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.6rem;
}
.pie__bloque li+li{margin-top:.45rem}
.pie__bloque a{color:var(--tinta);font-size:var(--t-menor);text-decoration:none}
.pie__bloque a:hover{color:var(--rojo-hondo)}
.pie address{font-size:var(--t-menor);line-height:1.7}
.pie address a{color:var(--tinta);text-decoration:none}
.pie address a:hover{color:var(--rojo-hondo)}

/* WhatsApp: el icono va monocromo en la tinta del sitio, no en el verde
   corporativo de la aplicación. Así se reconoce sin romper la paleta. */
.pie__wa{display:inline-flex;align-items:center;gap:.4rem}
.pie__wa svg{flex:0 0 auto}

/* Cierre: legales y copyright en una sola línea */
.pie__cierre{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.5rem 1.5rem;
  border-top:1px solid var(--linea);
  margin-top:2.5rem;
  padding-block:1.25rem;
}
.pie__legales{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.pie__legales a{color:var(--tinta);font-size:var(--t-menor);text-decoration:none}
.pie__legales a:hover{color:var(--rojo-hondo)}
/* max-width:none anula la medida de 66 caracteres que heredan los párrafos:
   si no, la caja llega al borde pero el texto se queda a su izquierda. */
.pie__copy{font-size:var(--t-menor);margin:0;max-width:none}

/* Cita textual de una fuente externa (p. ej. la guía de Google): respalda
   una afirmación sin reformularla. Barra roja a la izquierda, el mismo rojo
   que usa `.resalte` para marcar lo relevante, sin sumar una tercera sombra:
   la profundidad aquí también la da un borde, no una sombra. */
.cita{
  margin:1.5rem 0;
  padding-left:1.25rem;
  border-left:var(--borde-placa) solid var(--rojo);
  font-style:italic;
}
.cita p{margin:0;max-width:var(--ancho-texto)}
.cita footer{
  margin-top:.5rem;
  font-style:normal;
  font-size:var(--t-menor);
}
.cita footer a{color:var(--rojo-boton)}
.cita footer a:hover{color:var(--rojo-hondo)}

/* ---------- ADAPTACIÓN ---------- */
/* La hamburguesa entra a 1024: por debajo el nav no cabe junto a la placa */
/* La hamburguesa entra a 1130 px, no a 1024. Con siete enlaces el nav mide
   903 px y el logotipo 151: por debajo de ~1125 px de ventana el menú se sale
   del contenedor y el último enlace queda cortado. Medido el 28/08 al añadir
   «Diseño web SEO». Si algún día se añade un octavo enlace, hay que volver a
   medir y subir este número. */
@media (max-width:1130px){
  .menu{display:none}
  .hamburguesa{display:grid}
}


/* ---------- BLOG ----------
   Añadido el 12/09/2026 con la página /blog vacía. Solo lo que esa
   página necesita: cabecera, estado vacío y columna lateral. Los
   componentes del artículo (claves, vídeo, infografía, compartir) se
   añaden el día que se publique el primero, no antes. */

/* Cabecera del blog: el h1 y la entradilla comparten fila, para no
   gastar dos alturas de pantalla antes del contenido. En móvil la
   entradilla baja sola debajo del titular. */
.blog-portada{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1.25rem;
  margin-top:2rem;
}
.blog-portada h1{margin:0}
.blog-portada .entradilla{margin:0;flex:1 1 22ch;min-width:0}

/* Dos bloques: contenido y lateral. Mismo corte de 901 px que el resto
   del sitio. La lateral se queda fija al hacer scroll. */
.blog{margin-top:1.5rem}
@media (min-width:901px){
  .blog{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    column-gap:2.5rem;
  }
}
@media (min-width:1101px){
  .blog{grid-template-columns:minmax(0,1fr) 320px;column-gap:3rem}
}
.blog__contenido{min-width:0}

.lateral{margin-top:2.5rem;min-width:0}
.lateral__fijo{display:flex;flex-direction:column;gap:1.5rem}
@media (min-width:901px){
  .lateral{margin-top:0}
  /* Lo que se queda fijo es SOLO la caja de la auditoría, no la columna
     entera. Si se fija el bloque completo y sus cajas suman más que la
     altura de la pantalla, el navegador ancla la parte de arriba y recorta
     el resto: eso es lo que se veía cortado al hacer scroll, tanto en el
     artículo como en el índice. Fijando la caja que importa —que siempre
     cabe—, las demás se van hacia arriba con normalidad y nada se corta. */
  .lateral__caja--cta{position:sticky;top:1.5rem}
}
.lateral__caja{
  padding:1.25rem;
  border:1px solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:var(--sombra-tarjeta);
}
/* La caja del CTA se distingue de las demás por el borde de tinta. */
.lateral__caja--cta{border:var(--borde-placa) solid var(--tinta)}
.lateral__titulo{
  display:inline-flex;
  align-items:center;
  padding:.25rem .6rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:6px;
  background:var(--tinta);
  color:var(--blanco);
  font-size:.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.lateral p{margin-top:.9rem;font-size:var(--t-menor)}
/* Las dos cajas de la lateral van centradas: son piezas de apoyo, no
   texto corrido. */
.lateral__caja{text-align:center}
.lateral__titulo{justify-content:center}
.lateral .boton{margin-top:1rem}
/* Botón de la lateral: a todo el ancho de la caja y más estrecho de
   alto que el botón normal. Mantiene los 44 px de área táctil. */
.boton--ancho{
  display:flex;
  width:100%;
  justify-content:center;
  padding-block:.55rem;
  min-height:44px;
  align-items:center;
}
/* Categorías sin enlace mientras no haya artículos: enlazar a una
   categoría vacía es un callejón sin salida. Centradas y en versalitas;
   sin viñeta, que con el texto centrado quedaría descolgada. */
.lateral__categorias{
  display:flex;flex-direction:column;gap:.6rem;
  margin-top:1rem;padding:0;list-style:none;
}
.lateral__categorias li{
  font-size:var(--t-menor);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Estado vacío: mientras no haya ni un artículo publicado. Una línea
   de texto y nada más; se retira entera con la primera publicación. */
.blog-vacio{margin-top:1.5rem}


/* ---------- BLOG · ARTÍCULO ----------
   Añadido el 14/09/2026 con la primera publicación. */

/* Misma rejilla que /blog: cuerpo y lateral. */
.articulo{margin-top:1.5rem}
@media (min-width:901px){
  /* Sin `align-items:start`: las dos columnas miden lo mismo que la fila y
     así el bloque `sticky` de la lateral tiene recorrido por el que viajar.
     Con `start`, la columna se encoge a su contenido y el fijo no se mueve. */
  /* El h1 cruza las dos columnas y la lateral arranca justo debajo, a la
     altura de la imagen destacada. Sin `align-items:start`: las columnas
     miden lo que la fila, que es lo que da recorrido al bloque `sticky`. */
  .articulo{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    column-gap:2.5rem;
    row-gap:0;
    grid-template-areas:
      "titulo titulo"
      "cuerpo lateral";
  }
  .articulo > h1{grid-area:titulo}
  .articulo__cuerpo{grid-area:cuerpo}
  .articulo .lateral{grid-area:lateral}
}
@media (min-width:1101px){
  .articulo{grid-template-columns:minmax(0,1fr) 320px;column-gap:3rem}
}

/* El cuerpo del artículo va un punto más grande que el resto del sitio: es
   texto largo y se lee seguido. El `max-width:none` anula la medida de 66
   caracteres que heredan los párrafos, igual que hace `.bloque p`; queda
   acotado aquí y no toca al resto de las páginas. */
.articulo__cuerpo{min-width:0;font-size:1.125rem}
.articulo__cuerpo p{max-width:none;margin-top:1rem}
.articulo > h1{margin-bottom:1.5rem}
.articulo__cuerpo h2{margin-top:2.5rem}
.articulo__cuerpo h3{margin-top:1.75rem}
.articulo__cuerpo ul,.articulo__cuerpo ol{margin-top:1rem}

/* Imagen destacada: contenida, nunca a sangre. Es el elemento LCP, así que
   va sin lazy, con fetchpriority alto y con width y height declarados. */
.destacada{width:100%;height:auto;margin-bottom:1.5rem;border-radius:var(--radio)}
/* Variante para imágenes cuadradas (infografías, calendarios): a todo el
   ancho de la columna medirían 780 px de alto y empujarían el texto fuera de
   la primera pantalla. Topadas a 560 px se leen igual y no se comen la
   página. Van centradas para que no queden descolgadas a la izquierda. */
.destacada--cuadrada{max-width:560px;margin-inline:auto;display:block}

/* Datos del artículo: categoría, fecha y autor como chapas. */
.articulo__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1.25rem}
.chapa{
  display:inline-flex;
  align-items:center;
  padding:.25rem .55rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:6px;
  background:var(--tinta);
  color:var(--blanco);
  font-size:.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}
/* Fecha y autor no son categorías: esmalte con borde rojo. */
.chapa--dato{background:var(--blanco);color:var(--tinta);border-color:var(--rojo)}
.chapa--dato.chapa--fecha{font-variant-numeric:tabular-nums}

.articulo__cuerpo .entradilla{margin-top:1.25rem;font-size:1.1875rem}

/* Listas del artículo: viñeta cuadrada roja, la del resto del sitio. */
.articulo__cuerpo ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.6rem}
.articulo__cuerpo ul li{position:relative;padding-left:1rem}
.articulo__cuerpo ul li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:1px;background:var(--rojo);
}
/* Listas numeradas: SIN flex. Convertir un `ol` en contenedor flex hace que
   sus `li` dejen de ser elementos de lista y el navegador no pinta el número:
   eso vacío los pasos del primer artículo. La separación se hace con margen
   entre elementos, que es lo que había que haber usado desde el principio.
   El número va en negrita, que aquí es información y no adorno. */
.articulo__cuerpo ol{padding-left:1.5rem;list-style:decimal}
.articulo__cuerpo ol li + li{margin-top:.6rem}
.articulo__cuerpo ol li::marker{font-weight:700}

/* Compartir: fila de iconos, sin placas. Se igualan por altura porque cada
   logotipo tiene su propia proporción. */
.compartir{
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;
  margin-top:2.5rem;padding-top:1.25rem;
  border-top:1px solid var(--linea);
}
.compartir__titulo{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;margin-right:.5rem;
}
.compartir a,.compartir button{
  display:inline-grid;place-items:center;
  width:40px;height:40px;padding:0;border:0;border-radius:6px;
  background:none;color:var(--tinta);cursor:pointer;
}
.compartir a:hover,.compartir button:hover{background:var(--rojo-tenue);color:var(--rojo-hondo)}
.compartir svg{height:21px;width:auto;max-width:28px}

/* ---------- BLOG · ÍNDICE DE ARTÍCULOS ----------
   Una tarjeta por artículo, en una columna: con la lateral al lado, el ancho
   da de sobra y una rejilla de tres dejaría tarjetas huérfanas. */
.entradas{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem}
.entrada{
  display:flex;flex-direction:column;gap:.9rem;
  padding:1.25rem;
  border:1px solid var(--rojo);
  border-radius:var(--radio);
  background:var(--blanco);
  box-shadow:var(--sombra-tarjeta);
  min-width:0;
}
.entrada h2{font-size:var(--t-h2);line-height:1.35}
.entrada h2 a{color:var(--tinta);text-decoration:none}
.entrada h2 a:hover{color:var(--rojo-hondo)}
.entrada img{width:100%;height:auto;border-radius:var(--radio)}
.entrada img[width="1120"]{max-width:420px}
.entrada__meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.entrada__leer{margin-top:auto;font-weight:700}

/* Caja de autor: cierra el artículo. Es donde se trabaja el E-E-A-T, así que
   lleva nombre, cargo y enlaces a quien firma. La foto se añadirá cuando
   Óscar la suba; hasta entonces la caja funciona sin ella. */
.autor{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "foto nombre"
    "foto cargo"
    "bio  bio"
    "enlaces enlaces";
  column-gap:1rem;
  row-gap:.35rem;
  align-items:center;
  margin-top:2.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--linea);
}
/* Foto pequeña y redonda: acompaña, no compite. 56 px en pantalla y el
   doble en el archivo para pantallas de alta densidad. */
.autor__foto{
  grid-area:foto;
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  border:var(--borde-placa) solid var(--rojo);
}
.autor__nombre{grid-area:nombre;font-weight:700;margin:0;align-self:end}
.autor__cargo{
  grid-area:cargo;
  margin:0;
  font-size:.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  align-self:start;
}
/* La bio en tinta, como todo, pero un punto por debajo del texto normal:
   es una nota de pie de artículo, no cuerpo de lectura. */
.autor__bio{grid-area:bio;margin:.4rem 0 0;font-size:.9375rem;max-width:60ch}
.autor__enlaces{
  grid-area:enlaces;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:.25rem;
  font-size:.9375rem;
  font-weight:700;
}
/* El enlace a LinkedIn en su azul de marca: contrasta con el rojo de
   «Trabajar con él» y se distingue de un vistazo. 4,7:1 sobre blanco. */
.autor__enlaces a[href*="linkedin.com"]{color:#0A66C2}
.autor__enlaces a[href*="linkedin.com"]:hover{color:#084E96}

/* En escritorio la foto ocupa toda la altura de la caja y el texto se
   apila a su derecha: nombre y cargo en la misma línea, bio debajo y
   enlaces al final. Una sola columna de texto, sin huecos sueltos. */
@media (min-width:601px){
  .autor{
    grid-template-columns:auto auto 1fr;
    grid-template-areas:
      "foto nombre  cargo"
      "foto bio     bio"
      "foto enlaces enlaces";
    column-gap:1.25rem;
    align-items:start;
  }
  .autor__nombre,.autor__cargo{align-self:baseline}
  .autor__cargo{margin-left:.25rem}
}

/* Categorías del artículo: desplegable compacto entre la fila de compartir
   y la caja de autor. Se usa `<details>`, que abre y cierra sin JavaScript
   y ya es accesible con teclado. La flecha propia sustituye al triángulo
   del navegador, que cambia de forma en cada sistema. */
.categorias-post{margin-top:1.5rem}
.categorias-post summary{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:36px;
  padding:.3rem .7rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:6px;
  background:var(--blanco);
  font-size:.8125rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  cursor:pointer;
  list-style:none;
}
.categorias-post summary::-webkit-details-marker{display:none}
.categorias-post summary:hover{background:var(--rojo-tenue);border-color:var(--rojo)}
.categorias-post summary svg{transition:transform .15s ease}
.categorias-post[open] summary svg{transform:rotate(180deg)}
.categorias-post__lista{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin-top:.6rem;padding:0;list-style:none;
}
.categorias-post__lista a{
  display:inline-flex;align-items:center;
  padding:.25rem .55rem;
  border:var(--borde-placa) solid var(--tinta);
  border-radius:6px;
  background:var(--tinta);
  color:var(--blanco);
  font-size:.8125rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
  text-decoration:none;
}
.categorias-post__lista a:hover{background:var(--rojo-hondo);border-color:var(--rojo-hondo);color:var(--blanco)}