/* =====================================================================
   Aconectarme — hoja de estilos única
   Sistema de tokens: expediente de investigación.
   Canal de etiqueta a la izquierda + contenido a la derecha, reglas
   hairline como ritmo vertical, degradado del logo solo como acento.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* Color */
  --tinta:    #0A0A0A;   /* texto principal, panel del hero */
  --papel:    #F2F3F5;   /* fondo neutro frío del sitio */
  --blanco:   #FFFFFF;
  --azul:     #1E2FE0;   /* inicio del degradado del logo */
  --violeta:  #7B2FD1;   /* medio del degradado */
  --magenta:  #D91E9C;   /* fin del degradado: solo texto grande o sobre tinta */
  --niebla:   #63676E;   /* texto secundario — 5.0:1 sobre papel (AA) */
  --linea:    #DFE1E5;   /* bordes hairline */

  --degradado: linear-gradient(90deg, var(--azul) 0%, var(--violeta) 52%, var(--magenta) 100%);

  /* Tipografía */
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida */
  --t-hero:    clamp(2.5rem, 1.4rem + 4.8vw, 5.5rem);
  --t-titulo:  clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  --t-sub:     clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --t-cuerpo:  1.0625rem;
  --t-chico:   0.875rem;
  --t-etiqueta:0.75rem;

  /* Ritmo */
  --ancho-max: 1240px;
  --canal:     190px;      /* ancho del canal de etiqueta */
  --hueco:     clamp(2rem, 1rem + 3vw, 4.5rem);
  --aire-sec:  clamp(4rem, 2.5rem + 6vw, 9rem);
  --radio:     6px;

  --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;   /* compensa la cabecera fija */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 400; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Foco visible y consistente en todo el sitio (piso de calidad) */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible { outline-color: var(--blanco); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.salto-contenido {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--tinta); color: var(--blanco);
  padding: 0.75rem 1.25rem; border-radius: var(--radio);
  font-size: var(--t-chico); font-weight: 600; text-decoration: none;
  transition: top var(--transicion);
}
.salto-contenido:focus { top: 1rem; }

/* ---------------------------------------------------------------
   3. Piezas reutilizables
   --------------------------------------------------------------- */
.etiqueta {
  margin: 0;
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--niebla);
}
.etiqueta--clara { color: rgba(255, 255, 255, 0.62); }

.titulo-seccion {
  font-family: var(--display);
  font-size: var(--t-titulo);
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-bottom: 1.25rem;
}

.parrafo-guia {
  max-width: 62ch;
  font-size: var(--t-sub);
  color: var(--niebla);
  line-height: 1.55;
  margin-bottom: 3rem;
}

.enlace {
  color: var(--azul);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.enlace:hover { color: var(--violeta); }

.boton {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--tinta); color: var(--blanco);
  border: 1px solid var(--tinta);
  padding: 0.9rem 1.6rem;
  border-radius: var(--radio);
  font: 500 var(--t-cuerpo)/1 var(--texto);
  text-decoration: none; cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--azul); border-color: var(--azul); transform: translateY(-1px); }
.boton:active { transform: translateY(0); }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.boton--compacto { padding: 0.6rem 1.1rem; font-size: var(--t-chico); }

.boton--fantasma {
  background: transparent; color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.35);
}
.boton--fantasma:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--blanco); color: var(--blanco);
}

/* ---------------------------------------------------------------
   4. Cabecera
   --------------------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242, 243, 245, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), background var(--transicion);
}
.cabecera[data-desplazada] { border-bottom-color: var(--linea); }

/* Sobre el hero oscuro la cabecera se vuelve transparente y clara */
.cabecera:not([data-desplazada]) {
  background: transparent; backdrop-filter: none;
}
.cabecera:not([data-desplazada]) .cabecera__lista > li > a { color: rgba(255,255,255,0.82); }
.cabecera:not([data-desplazada]) .cabecera__lista > li > a:hover { color: var(--blanco); }

/* El botón de llamada a la acción se salta el color del menú.
   La regla de arriba lleva un selector de tipo (`a`) y por eso ganaba,
   dejando texto blanco sobre botón blanco: invisible. Se iguala la
   especificidad incluyendo `> li > a` también aquí. */
.cabecera__lista > li > a.boton--compacto,
.cabecera:not([data-desplazada]) .cabecera__lista > li > a.boton--compacto {
  background: var(--azul);
  color: var(--blanco);
  border-color: var(--azul);
}
.cabecera__lista > li > a.boton--compacto:hover,
.cabecera:not([data-desplazada]) .cabecera__lista > li > a.boton--compacto:hover {
  background: var(--violeta);
  border-color: var(--violeta);
  color: var(--blanco);
}
/* Sobre el hero oscuro se muestra la variante de logo con la palabra en
   blanco; al desplazarse aparece el logo original sobre el papel claro.
   Antes esto se hacía con filter:brightness(0) invert(1), que aplanaba
   el símbolo del infinito a blanco puro y borraba el degradado de marca. */
.cabecera:not([data-desplazada]) .cabecera__hamburguesa-barras,
.cabecera:not([data-desplazada]) .cabecera__hamburguesa-barras::before,
.cabecera:not([data-desplazada]) .cabecera__hamburguesa-barras::after { background: var(--blanco); }

.cabecera__interior {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

/* Las dos variantes se apilan en la misma celda para que el cambio no
   mueva nada de sitio y no haya salto al hacer scroll. */
.cabecera__marca {
  display: grid;
  grid-template-areas: "logo";
  align-items: center;
  line-height: 0;
}
.cabecera__logo {
  grid-area: logo;
  width: 180px; height: auto;
  transition: opacity var(--transicion);
}
.cabecera__logo--oscuro { opacity: 0; }
.cabecera[data-desplazada] .cabecera__logo--claro  { opacity: 0; }
.cabecera[data-desplazada] .cabecera__logo--oscuro { opacity: 1; }

.cabecera__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
}
.cabecera__lista > li > a {
  text-decoration: none; font-size: var(--t-chico); font-weight: 500;
  color: var(--niebla); transition: color var(--transicion);
}
.cabecera__lista > li > a:hover { color: var(--tinta); }
.cabecera__lista .boton--compacto:hover { color: var(--blanco); }

.cabecera__hamburguesa {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0; position: relative;
}
.cabecera__hamburguesa-barras,
.cabecera__hamburguesa-barras::before,
.cabecera__hamburguesa-barras::after {
  position: absolute; left: 11px; width: 22px; height: 2px;
  background: var(--tinta); content: ""; transition: transform var(--transicion), opacity var(--transicion), background var(--transicion);
}
.cabecera__hamburguesa-barras { top: 21px; }
.cabecera__hamburguesa-barras::before { top: -7px; left: 0; }
.cabecera__hamburguesa-barras::after  { top:  7px; left: 0; }
.cabecera__hamburguesa[aria-expanded="true"] .cabecera__hamburguesa-barras { background: transparent; }
.cabecera__hamburguesa[aria-expanded="true"] .cabecera__hamburguesa-barras::before { transform: translateY(7px) rotate(45deg); }
.cabecera__hamburguesa[aria-expanded="true"] .cabecera__hamburguesa-barras::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------
   5. Hero — único panel oscuro, única animación fuerte
   --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--tinta);
  color: var(--blanco);
  margin-top: -80px;        /* la cabecera flota encima */
  padding: clamp(9rem, 6rem + 10vw, 14rem) 0 clamp(4.5rem, 3rem + 5vw, 8rem);
  overflow: hidden;
}

/* Halo del degradado, muy tenue: el color de marca sin gritar */
.hero::after {
  content: ""; position: absolute; inset: auto -10% -55% -10%;
  height: 70%;
  background: radial-gradient(ellipse at 50% 100%,
              rgba(123, 47, 209, 0.30) 0%,
              rgba(30, 47, 224, 0.14) 42%,
              transparent 72%);
  pointer-events: none;
}

/* Red de nodos: capa 0, entre el fondo y el halo. El contenido va por
   encima con z-index 1 y sigue siendo seleccionable — el lienzo no
   captura eventos, el hero entero es quien escucha el puntero. */
.hero__red {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__interior {
  position: relative; z-index: 1;
  max-width: var(--ancho-max); margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.hero .etiqueta { margin-bottom: 2rem; }

/* --- El elemento de firma: titular en partículas --- */
.hero__titular { position: relative; }

.hero__h1 {
  font-family: var(--display);
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.hero__linea { display: block; }
.hero__linea--acento {
  background: var(--degradado);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Respaldo si background-clip:text no está soportado */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__linea--acento { color: #C77BE8; background: none; }
}

/* El JS fija width/height/top en línea: el lienzo se dibuja algo más
   alto que el bloque de texto para dar aire a acentos y descendentes. */
.hero__lienzo {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  display: none;              /* el JS lo activa solo si puede dibujar */
}
/* Cuando el canvas toma el control, el h1 sigue en el DOM ocupando su
   espacio: se atenúa a opacidad 0 en vez de ocultarse, para que siga
   estando en el árbol de accesibilidad y en el texto que indexa Google
   (visibility:hidden o display:none lo sacarían de ambos).

   Se atenúa el h1 completo y no el color de cada línea porque la línea
   de acento pinta su color con background-clip:text: `color` ahí ya es
   transparent y no puede transicionar. Con opacidad, las dos líneas
   entran exactamente igual. */
.hero__titular[data-activo] .hero__h1 { opacity: 0; }
.hero__titular[data-activo] .hero__lienzo { display: block; }

/* Relevo: las partículas se apagan y el titular real aparece. A partir
   de aquí lo que se lee es tipografía nítida, no una retícula de
   puntos — la animación fue la entrada, no el estado final. */
.hero__titular[data-entregando] .hero__h1 {
  opacity: 1;
  transition: opacity 620ms ease;
}

.hero__bajada {
  margin-top: 2.25rem;
  max-width: 58ch;
  font-size: var(--t-sub);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
.hero__bajada strong { color: var(--blanco); font-weight: 500; }

.hero__acciones {
  margin-top: 2.75rem;
  display: flex; flex-wrap: wrap; gap: 0.875rem;
}
.hero .boton:not(.boton--fantasma) {
  background: var(--blanco); color: var(--tinta); border-color: var(--blanco);
}
.hero .boton:not(.boton--fantasma):hover { background: #E6E7EA; border-color: #E6E7EA; }

/* ---------------------------------------------------------------
   6. Secciones — rejilla de expediente
   --------------------------------------------------------------- */
.seccion {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: var(--aire-sec) clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: var(--canal) 1fr;
  gap: var(--hueco);
  border-top: 1px solid var(--linea);
}
.seccion:first-of-type { border-top: 0; }

.seccion__canal { position: sticky; top: 110px; align-self: start; }
.seccion__canal .etiqueta { position: relative; padding-top: 0.85rem; }
.seccion__canal .etiqueta::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 34px; height: 2px; background: var(--degradado);
}

.seccion__cuerpo { min-width: 0; }

.seccion--pruebas { background: transparent; }

/* --- 01 Método: pasos --- */
.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
}
.paso { border-top: 2px solid var(--tinta); padding-top: 1.25rem; }
.paso__numero {
  display: block; font-family: var(--display);
  font-size: 1.5rem; color: var(--niebla); margin-bottom: 0.35rem;
}
.paso__titulo {
  font-family: var(--display); font-size: 1.6rem;
  margin-bottom: 0.6rem; letter-spacing: -0.01em;
}
.paso p { color: var(--niebla); font-size: 1rem; }

/* --- 02 Servicios --- */
.rejilla-servicios {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden;
}
.servicio {
  background: var(--blanco);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  transition: background var(--transicion);
}
.servicio:hover { background: #FBFBFC; }
.servicio__titulo {
  font-family: var(--display); font-size: 1.5rem;
  margin-bottom: 0.75rem; letter-spacing: -0.01em;
}
.servicio p { color: var(--niebla); font-size: 1rem; }
.servicio__para {
  margin-top: 1rem; font-size: var(--t-chico); font-weight: 500;
  color: var(--tinta);
  padding-top: 0.75rem; border-top: 1px solid var(--linea);
}

/* --- 03 Prueba: logos + reseñas --- */
.logos {
  list-style: none; margin: 0 0 clamp(3rem, 2rem + 3vw, 5rem); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden;
}
.logos__item {
  background: var(--blanco);
  min-height: 118px;
  display: grid; place-items: center;
  padding: 1.25rem;
}
/* Relleno de la última celda. Con 7 logos en una rejilla de 4 quedaba un
   hueco que dejaba ver el gris del fondo, y parecía una tarjeta rota en
   vez de un espacio libre. Este pseudoelemento cuenta como celda. */
.logos::after {
  content: "";
  background: var(--blanco);
}
.logos__item img {
  max-height: 62px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.62;
  transition: filter var(--transicion), opacity var(--transicion);
}
.logos__item:hover img { filter: grayscale(0); opacity: 1; }

/* Logos claros sobre fondo oscuro: sobre la tarjeta blanca desaparecen,
   así que la tarjeta se invierte para ellos. */
.logos__item--oscuro { background: var(--tinta); }
.logos__item--oscuro img { opacity: 0.78; filter: grayscale(1) brightness(1.6); }
.logos__item--oscuro:hover img { opacity: 1; filter: none; }

/* ---- Reseñas con la estética de Google ---------------------------------
   Son opiniones reales publicadas en el perfil de Google del negocio. Se
   presentan con los códigos visuales de esa plataforma —la marca, las
   estrellas ámbar, el avatar circular— porque es lo que hace que se lean
   como verificables y no como testimonios escritos por la casa. Todas las
   rutas de salida llevan al perfil real, que es donde se contrastan. */

.resenas {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.resenas__cabecera {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linea);
}

/* Palabra «Google» con sus colores. Es una cita de la fuente de las
   reseñas, del mismo modo que el nombre del medio en una portada. */
.marca-google {
  font-family: "Product Sans", "Inter", system-ui, sans-serif;
  font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1; flex: 0 0 auto;
}
.marca-google__g  { color: #4285F4; }
.marca-google__o1 { color: #EA4335; }
.marca-google__o2 { color: #FBBC05; }
.marca-google__g2 { color: #4285F4; }
.marca-google__l  { color: #34A853; }
.marca-google__e  { color: #EA4335; }

.resenas__resumen { flex: 1 1 260px; min-width: 0; }
.resenas__titulo {
  margin: 0 0 0.2rem; font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.resenas__nota {
  margin: 0; font-size: var(--t-chico); color: var(--niebla);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.resenas__accion {
  flex: 0 0 auto;
  font-size: var(--t-chico); font-weight: 600;
  color: #1A73E8; text-decoration: none;
  border: 1px solid #D2E3FC; border-radius: 999px;
  padding: 0.5rem 1rem; background: #F8FBFF;
  transition: background var(--transicion), border-color var(--transicion);
}
.resenas__accion:hover { background: #E8F0FE; border-color: #1A73E8; }

/* Ámbar oscurecido: las estrellas son un gráfico portador de información,
   así que necesitan 3:1 contra el fondo (WCAG 1.4.11). El dorado claro de
   Google no llega. */
.estrellas { display: inline-flex; line-height: 1; }
.estrellas__llenas {
  color: #C77700; letter-spacing: 0.08em; font-size: 0.95rem;
}

.resenas__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
}
.resena {
  background: var(--papel);
  border: 1px solid var(--linea); border-radius: 10px;
  padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  display: flex; flex-direction: column; gap: 0.9rem;
}

.resena__persona { display: flex; align-items: center; gap: 0.75rem; }
.resena__avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--blanco); font-weight: 600; font-size: 1.05rem;
  line-height: 1;
}
/* Tonos de los avatares de Google, oscurecidos para que la inicial
   blanca mantenga contraste suficiente. */
.resena__avatar--a { background: #1A73E8; }
.resena__avatar--s { background: #C5221F; }
.resena__avatar--j { background: #137333; }

.resena__nombre {
  margin: 0 0 0.15rem; font-size: 0.9375rem; font-weight: 600;
}
.resena__meta { margin: 0; display: flex; align-items: center; gap: 0.4rem; }

.resena blockquote { margin: 0; }
.resena blockquote p {
  font-size: 0.9375rem; line-height: 1.6; color: #3C4043;
}

.resenas__pie { margin-top: 1.5rem; font-size: var(--t-chico); }

/* --- 04 Fundador --- */
.fundador {
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.fundador__retrato {
  border-radius: var(--radio); overflow: hidden;
  border: 1px solid var(--linea); background: var(--blanco);
  position: relative;
}
/* Filete del degradado: el color de marca tocando el retrato, 3px */
.fundador__retrato::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--degradado);
}
.fundador__texto p { color: var(--niebla); max-width: 60ch; }
.fundador__contacto {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding-top: 1.25rem; border-top: 1px solid var(--linea);
  font-size: var(--t-chico);
}

/* ---------------------------------------------------------------
   7. Formulario
   --------------------------------------------------------------- */
.formulario {
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  max-width: 780px;
}

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

.campo { margin-bottom: 1.5rem; }
.campo-fila {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}

.campo label {
  display: block; font-size: var(--t-chico); font-weight: 600;
  margin-bottom: 0.45rem;
}
.req { color: var(--magenta); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select,
.campo textarea {
  width: 100%;
  font: 400 var(--t-cuerpo)/1.5 var(--texto);
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.75rem 0.9rem;
  transition: border-color var(--transicion), background var(--transicion);
}
.campo textarea { resize: vertical; min-height: 140px; }
.campo select { appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363676E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #C9CCD2; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: var(--blanco); border-color: var(--azul);
}

.campo__ayuda { font-size: var(--t-chico); color: var(--niebla); margin: 0.45rem 0 0; }
.campo__error {
  font-size: var(--t-chico); font-weight: 500; color: #C2185B;
  margin: 0.45rem 0 0;
}
.campo[data-invalido] input,
.campo[data-invalido] select,
.campo[data-invalido] textarea { border-color: #C2185B; }

.casilla { display: flex; gap: 0.75rem; align-items: flex-start; cursor: pointer; }
.casilla input {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--azul);
}
.casilla span { font-size: var(--t-chico); font-weight: 400; color: var(--niebla); line-height: 1.55; }
.campo--consentimiento label { font-weight: 400; margin-bottom: 0; }

.formulario__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.formulario__nota { font-size: var(--t-chico); color: var(--niebla); max-width: 42ch; margin: 0; }

.formulario__aviso {
  margin: 1.5rem 0 0; padding: 1rem 1.25rem;
  border-radius: var(--radio); font-size: 1rem;
  border: 1px solid var(--linea);
}
.formulario__aviso[data-estado="ok"]    { background: #F0FBF4; border-color: #B6E4C6; color: #14532D; }
.formulario__aviso[data-estado="error"] { background: #FDF2F5; border-color: #F0BFCE; color: #8C1338; }

/* ---------------------------------------------------------------
   8. Pie
   --------------------------------------------------------------- */
.pie { background: var(--tinta); color: rgba(255, 255, 255, 0.72); margin-top: var(--aire-sec); }

.pie__interior {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: clamp(3rem, 2rem + 3vw, 5rem) clamp(1.25rem, 4vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 300px) 1fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
}
.pie__marca img { filter: brightness(0) invert(1); margin-bottom: 1.25rem; }
.pie__marca p { font-size: var(--t-chico); line-height: 1.6; }

.pie__nav {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}
.pie__titulo {
  font-size: var(--t-etiqueta); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45); margin-bottom: 1rem;
}
.pie__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.pie__nav a {
  text-decoration: none; font-size: var(--t-chico);
  color: rgba(255, 255, 255, 0.78); transition: color var(--transicion);
}
.pie__nav a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 3px; }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.pie__legal {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-chico);
}
.pie__legal p { margin: 0; }

/* Pese al nombre, esta clase la usan todos los enlaces de la franja
   legal del pie en las páginas interiores (404, portafolio, protección
   de datos, libro de reclamaciones), no solo el del libro. */
.pie__libro {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: rgba(255,255,255,0.78); text-decoration: none;
}
.pie__libro:hover { color: var(--blanco); text-decoration: underline; }
.icono-libro { flex: 0 0 auto; }

/* ---------------------------------------------------------------
   8.b Aviso de cookies

   Se apoya abajo del todo, sin tapar el contenido ni oscurecer la
   página: no es un muro, es una pregunta. Las dos respuestas tienen el
   mismo peso visual — destacar «Aceptar» y apagar «Rechazar» es
   exactamente lo que invalida un consentimiento.
   --------------------------------------------------------------- */
.aviso-cookies {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 300;
  max-width: 680px;
  margin-inline: auto;
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.aviso-cookies__texto {
  margin: 0; flex: 1 1 300px;
  font-size: var(--t-chico); line-height: 1.55;
}
.aviso-cookies__texto a {
  color: var(--blanco);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}

.aviso-cookies__acciones {
  display: flex; gap: 0.6rem; flex: 0 0 auto;
}

.aviso-cookies__boton {
  font: 500 var(--t-chico)/1 var(--texto);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radio);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transicion), border-color var(--transicion);
}
.aviso-cookies__boton--no {
  background: transparent;
  color: var(--blanco);
  border-color: rgba(255, 255, 255, 0.38);
}
.aviso-cookies__boton--no:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--blanco);
}
.aviso-cookies__boton--si {
  background: var(--blanco);
  color: var(--tinta);
  border-color: var(--blanco);
}
.aviso-cookies__boton--si:hover { background: #E6E7EA; border-color: #E6E7EA; }

.aviso-cookies :focus-visible { outline-color: var(--blanco); }

@media (max-width: 700px) {
  .aviso-cookies { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
  .aviso-cookies__acciones { width: 100%; }
  .aviso-cookies__boton { flex: 1 1 0; }
}

/* ---------------------------------------------------------------
   9. Revelado al scroll — micro-interacción discreta
   --------------------------------------------------------------- */
[data-revelar] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-revelar][data-visible] { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   10. Adaptación a pantallas — cortes 940px y 700px
   --------------------------------------------------------------- */
@media (max-width: 940px) {
  html { scroll-padding-top: 80px; }

  .cabecera__hamburguesa { display: block; }

  .cabecera__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--tinta);
    padding: 1rem clamp(1.25rem, 4vw, 3rem) 1.75rem;
    display: none;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .cabecera__nav[data-abierto] { display: block; }
  .cabecera__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .cabecera__lista > li { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .cabecera__lista > li:last-child { border-bottom: 0; padding-top: 1rem; }
  .cabecera__lista > li > a,
  .cabecera:not([data-desplazada]) .cabecera__lista > li > a {
    display: block; padding: 0.9rem 0; font-size: 1rem; color: rgba(255,255,255,0.85);
  }
  .cabecera__lista .boton--compacto,
  .cabecera:not([data-desplazada]) .cabecera__lista .boton--compacto {
    justify-content: center; background: var(--azul); color: var(--blanco);
    border-color: var(--azul); padding: 0.85rem 1.1rem; font-size: 1rem;
  }


  /* El canal de etiqueta pasa a ser un encabezado horizontal */
  .seccion { grid-template-columns: 1fr; gap: 1.75rem; }
  .seccion__canal { position: static; }

  /* Cuatro pasos no caben en una fila legible por debajo de 940 px:
     pasan a dos columnas antes de apilarse del todo. */
  .pasos { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .rejilla-servicios { grid-template-columns: 1fr; }
  /* Se salta el paso de 3 columnas a propósito: con 7 logos más la celda
     de relleno son 8, que reparten exacto en 4 y en 2 pero dejan hueco
     en 3. */
  .logos { grid-template-columns: repeat(2, 1fr); }
  .resenas__lista { grid-template-columns: 1fr; }
  .resenas__cabecera { gap: 0.75rem; }
  .resenas__accion { order: 3; width: 100%; text-align: center; }
  .fundador { grid-template-columns: 1fr; }
  .fundador__retrato { max-width: 280px; }

  .pie__interior { grid-template-columns: 1fr; }
  .pie__nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  :root { --t-cuerpo: 1rem; }

  .hero { margin-top: -76px; padding-top: 8.5rem; }
  .hero__h1 { max-width: 100%; }
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .hero__acciones .boton { justify-content: center; }

  .titulo-seccion { max-width: 100%; }
  .parrafo-guia { margin-bottom: 2rem; }

  .pasos { grid-template-columns: 1fr; }

  .logos { grid-template-columns: repeat(2, 1fr); }
  .logos__item { min-height: 96px; }

  .campo-fila { grid-template-columns: 1fr; gap: 0; }
  .formulario__acciones { flex-direction: column; align-items: stretch; }
  .formulario__acciones .boton { justify-content: center; }

  .pie__nav { grid-template-columns: 1fr; }
  .pie__legal { flex-direction: column; }
}

/* ---------------------------------------------------------------
   11. Preferencias del sistema
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-revelar] { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .hero__lienzo, .hero__red, .formulario, .salto-contenido { display: none !important; }
  body { background: #fff; }
  .hero { background: #fff; color: #000; padding: 2rem 0; }
  .hero::after { display: none; }
  /* Si se imprime a media animación, el titular debe salir igual */
  .hero__titular[data-activo] .hero__h1 { opacity: 1 !important; }
}