/* =====================================================================
   Vela & Ríos Asesores — hoja de estilos
   Mobile first: lo que hay arriba es el móvil; las media queries de
   abajo van ampliando. Los colores están todos en :root, así que para
   recolorear la web solo hay que tocar ese bloque.
   ===================================================================== */

/* ------------------------------ Fuentes ----------------------------- */
/* Poppins servida desde tu propio servidor: ni Google Fonts ni CDN.
   Son subconjuntos latinos (~8 KB cada uno), con los acentos, la ñ,
   el euro y las comillas españolas dentro. */
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fuentes/Poppins-400.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:500;
  font-display:swap; src:url("fuentes/Poppins-500.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:600;
  font-display:swap; src:url("fuentes/Poppins-600.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:700;
  font-display:swap; src:url("fuentes/Poppins-700.woff2") format("woff2");
}

/* ------------------------------ Variables --------------------------- */
:root{
  /* Marca */
  --azul:#274584;
  --azul-oscuro:#1b3163;
  --azul-claro:#e8edf7;
  --gris:#6f6f6e;
  --gris-suave:#9a9a99;

  /* Fondos */
  --blanco:#ffffff;
  --gris-claro:#f8f9fa;
  --borde:#e6e8ec;

  /* Texto */
  --texto:#2b2b2b;
  --texto-suave:#5d6068;

  /* Medidas */
  --ancho:1200px;
  --radio:14px;
  --radio-boton:999px;
  --cabecera:72px;

  /* Sombras suaves, nada de cajas duras */
  --sombra:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --sombra-alta:0 2px 4px rgba(16,24,40,.05), 0 18px 40px rgba(39,69,132,.14);

  --transicion:.25s ease;
}

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

html{
  scroll-behavior:smooth;
  /* El ancla no se mete debajo de la cabecera fija. */
  scroll-padding-top:calc(var(--cabecera) + 12px);
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

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

h1,h2,h3{
  margin:0 0 .6em;
  line-height:1.2;
  color:var(--azul);
  font-weight:600;
  letter-spacing:-.015em;
}
h1{ font-size:2rem; font-weight:700; }
h2{ font-size:1.7rem; }
h3{ font-size:1.15rem; }
h1 em{ font-style:normal; font-weight:400; }

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

a{ color:var(--azul); text-decoration:none; transition:color var(--transicion); }
a:hover{ color:var(--azul-oscuro); text-decoration:underline; }

/* Foco visible siempre: quien navegue con teclado tiene que saber dónde está. */
:focus-visible{
  outline:3px solid var(--azul);
  outline-offset:3px;
  border-radius:4px;
}

.salta{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--azul); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--radio) 0;
}
.salta:focus{ left:0; }

.inner{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 20px;
}

/* ------------------------------ Botones ----------------------------- */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:48px;
  padding:12px 28px;
  border:2px solid transparent;
  border-radius:var(--radio-boton);
  font-family:inherit; font-size:.95rem; font-weight:600;
  line-height:1.2; text-align:center; text-decoration:none;
  cursor:pointer;
  transition:background var(--transicion), color var(--transicion),
             border-color var(--transicion), transform var(--transicion),
             box-shadow var(--transicion);
}
.button:hover{ text-decoration:none; }

.button--primario{ background:var(--azul); border-color:var(--azul); color:#fff; }
.button--primario:hover{
  background:var(--azul-oscuro); border-color:var(--azul-oscuro); color:#fff;
  transform:translateY(-2px); box-shadow:var(--sombra-alta);
}
.button--primario:active{ transform:translateY(0); }

.button--fantasma{ background:transparent; border-color:rgba(255,255,255,.65); color:#fff; }
.button--fantasma:hover{
  background:rgba(255,255,255,.12); border-color:#fff; color:#fff;
  transform:translateY(-2px);
}

.button--grande{ min-height:54px; padding:14px 34px; font-size:1rem; }
.button--ancho{ width:100%; }

.actions{
  display:flex; flex-wrap:wrap; gap:12px;
  list-style:none; margin:2rem 0 0; padding:0;
}
.actions li{ flex:1 1 auto; }
.actions .button{ width:100%; }
@media (min-width:520px){
  .actions li{ flex:0 0 auto; }
  .actions .button{ width:auto; }
}

/* ------------------------------ Cabecera ---------------------------- */
.cabecera{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--transicion), border-color var(--transicion);
}
.cabecera[data-desplazada]{
  border-bottom-color:var(--borde);
  box-shadow:0 4px 20px rgba(16,24,40,.06);
}
.cabecera__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:var(--cabecera);
}

/* Logo (marca provisional: cámbiala por tu SVG) */
.logo{ display:inline-flex; align-items:center; gap:10px; color:var(--azul); }
.logo:hover{ text-decoration:none; }
.logo__marca{ width:36px; height:36px; flex:0 0 auto; }
.logo__marca rect{ fill:none; stroke:currentColor; stroke-width:2.5; }
.logo__marca path{
  fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
}
.logo__texto{ display:flex; flex-direction:column; line-height:1.1; }
.logo__texto strong{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.logo__texto span{
  font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}

/* Hamburguesa */
.hamburguesa{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; padding:12px;
  background:none; border:0; cursor:pointer;
}
.hamburguesa span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--azul);
  transition:transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Menú en móvil: panel desplegable bajo la cabecera */
.menu{
  position:absolute; top:100%; left:0; right:0;
  display:none; flex-direction:column; gap:6px;
  padding:14px 20px 22px;
  background:var(--blanco);
  border-bottom:1px solid var(--borde);
  box-shadow:0 18px 30px rgba(16,24,40,.10);
}
.menu[data-abierto]{ display:flex; }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu ul a{
  display:block; padding:13px 4px;
  font-weight:500; color:var(--texto);
  border-bottom:1px solid var(--borde);
}
.menu ul a:hover{ color:var(--azul); text-decoration:none; }
.menu__cta{ margin-top:14px; }

/* --------------------------------- Hero ----------------------------- */
.hero{
  position:relative;
  display:flex; align-items:center;
  min-height:min(78vh,620px);
  padding:80px 0;
  background:var(--azul-oscuro) url("img/hero-1100.jpg") center/cover no-repeat;
  color:#fff;
  text-align:center;
}
@media (min-width:1101px){
  .hero{ background-image:url("img/hero-1920.jpg"); }
}
/* Velo azul: sin él el texto blanco no se lee sobre la foto. */
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(27,49,99,.82) 0%, rgba(39,69,132,.74) 55%, rgba(27,49,99,.88) 100%);
}
.hero__inner{ position:relative; }
.hero h1{ color:#fff; max-width:18ch; margin-inline:auto; }
.hero__texto{
  max-width:56ch; margin:0 auto;
  font-size:1.05rem; color:rgba(255,255,255,.9);
}
.hero .actions{ justify-content:center; }

/* ------------------------------ Secciones --------------------------- */
.seccion{ padding:64px 0; }
.seccion--gris{ background:var(--gris-claro); }

.antetitulo{
  margin:0 0 .8em;
  font-size:.76rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--azul);
}
.antetitulo--gris{ color:var(--gris); }
.antetitulo--claro{ color:rgba(255,255,255,.82); }

.entradilla{
  font-size:1.06rem; color:var(--texto-suave);
}

.seccion__cabeza{
  max-width:660px; margin:0 auto 44px; text-align:center;
}
.seccion__cabeza .entradilla{ margin-bottom:0; }

/* Nosotros: texto + foto */
.dosColumnas{ display:grid; gap:36px; }
.dosColumnas__foto{ margin:0; }
.dosColumnas__foto img{
  width:100%; border-radius:var(--radio); box-shadow:var(--sombra-alta);
}

.cifras{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  list-style:none; margin:32px 0 0; padding:26px 0 0;
  border-top:1px solid var(--borde);
}
.cifras li{ display:flex; flex-direction:column; }
.cifras strong{
  font-size:1.6rem; font-weight:700; line-height:1.1; color:var(--azul);
}
.cifras span{ font-size:.8rem; line-height:1.35; color:var(--gris); }

/* ------------------------------ Tarjetas ---------------------------- */
.tarjetas{ display:grid; gap:24px; }

.tarjeta{
  display:flex; flex-direction:column;
  padding:32px 26px;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  transition:transform var(--transicion), box-shadow var(--transicion),
             border-color var(--transicion);
}
.tarjeta:hover{
  transform:translateY(-6px);
  box-shadow:var(--sombra-alta);
  border-color:var(--azul-claro);
}
.tarjeta h3{ color:var(--azul); }

.tarjeta__icono{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; margin-bottom:20px;
  background:var(--azul-claro); border-radius:16px; color:var(--azul);
}
.tarjeta__icono svg{
  width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.tarjeta--gris .tarjeta__icono{ background:#efefee; color:var(--gris); }
.tarjeta--gris h3{ color:var(--azul); }

.lista{ list-style:none; margin:0; padding:0; }
.lista li{
  position:relative;
  margin-bottom:14px; padding-left:26px;
  font-size:.94rem; line-height:1.6; color:var(--texto-suave);
}
.lista li:last-child{ margin-bottom:0; }
/* La palomita se dibuja en CSS: un SVG menos que cargar. */
.lista li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:14px; height:8px;
  border-left:2px solid var(--azul); border-bottom:2px solid var(--azul);
  transform:rotate(-45deg);
}
.tarjeta--gris .lista li::before{ border-color:var(--gris); }
.lista strong{ color:var(--texto); font-weight:600; }

/* ------------------------------ Contacto ---------------------------- */
.contacto{ display:grid; gap:36px; }

.contacto__formulario{
  padding:28px 22px;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
}

.campo{ margin-bottom:18px; }
.campo label{
  display:block; margin-bottom:6px;
  font-size:.88rem; font-weight:500; color:var(--texto);
}
.campo label span{ color:var(--azul); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select,
.campo textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  font-family:inherit; font-size:1rem; color:var(--texto);
  background:var(--blanco);
  border:1px solid var(--borde); border-radius:10px;
  transition:border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea{ min-height:auto; resize:vertical; }
.campo select{
  /* La flecha va dibujada aquí para que sea igual en todos los navegadores. */
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-size:18px; padding-right:44px;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--azul);
  box-shadow:0 0 0 4px rgba(39,69,132,.14);
}
.campo [aria-invalid="true"]{ border-color:#c0392b; }
.campo [aria-invalid="true"]:focus{ box-shadow:0 0 0 4px rgba(192,57,43,.14); }

.campo--mitades{ display:grid; gap:18px; }

.campo--casilla{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start;
}
.campo--casilla input{ width:22px; height:22px; margin-top:2px; accent-color:var(--azul); }
.campo--casilla label{ margin:0; font-size:.85rem; color:var(--texto-suave); }
.campo--casilla .campo__error{ grid-column:1 / -1; }

.campo__error{
  margin:6px 0 0; font-size:.82rem; color:#c0392b;
}

/* El tarro de miel: fuera de la vista, pero no con display:none, que
   algunos robots lo detectan. */
.tarro{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.formulario__aviso{
  margin:16px 0 0; padding:14px 16px;
  font-size:.9rem; border-radius:10px;
}
.formulario__aviso[data-tipo="ok"]{ background:#e8f5ec; color:#1e6b3a; }
.formulario__aviso[data-tipo="error"]{ background:#fdecea; color:#a5271b; }

/* Datos de contacto */
.datos{ list-style:none; margin:0 0 28px; padding:0; }
.datos li{ display:flex; gap:16px; margin-bottom:22px; }
.datos li:last-child{ margin-bottom:0; }
.datos h3{ margin:0 0 2px; font-size:.95rem; }
.datos p{ margin:0; font-size:.92rem; color:var(--texto-suave); }
.datos a{ color:var(--texto-suave); }
.datos a:hover{ color:var(--azul); }
.datos__icono{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:44px; height:44px;
  background:var(--azul-claro); border-radius:12px; color:var(--azul);
}
.datos__icono svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Mapa */
.mapa{
  position:relative;
  aspect-ratio:16 / 10;
  background:var(--azul-claro);
  border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden;
}
.mapa iframe{ width:100%; height:100%; border:0; display:block; }
.mapa__boton{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  width:100%; height:100%; padding:24px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:600; color:var(--azul);
  transition:background var(--transicion);
}
.mapa__boton:hover{ background:rgba(39,69,132,.06); }
.mapa__boton small{
  max-width:34ch;
  /* Gris más oscuro que el de marca: sobre el azul claro del recuadro,
     el --gris se queda en 4,3:1 y la letra es pequeña. */
  font-size:.76rem; font-weight:400; line-height:1.4; color:var(--texto-suave);
}
.mapa__icono svg{
  width:30px; height:30px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --------------------------------- Pie ------------------------------ */
.pie{
  padding:56px 0 26px;
  background:var(--azul-oscuro);
  color:rgba(255,255,255,.72);
  font-size:.9rem;
}
.pie__columnas{ display:grid; gap:32px; }
.pie h2{
  margin:0 0 14px;
  font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
}
.pie .logo{ color:#fff; margin-bottom:14px; }
.pie .logo__texto span{ color:rgba(255,255,255,.6); }
.pie__marca p{ max-width:36ch; }
.pie__enlaces ul{ list-style:none; margin:0; padding:0; }
.pie__enlaces li{ margin-bottom:9px; line-height:1.5; }
.pie a{ color:rgba(255,255,255,.72); }
.pie a:hover{ color:#fff; }
.pie__copy{
  margin:40px 0 0; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem; color:rgba(255,255,255,.55);
  text-align:center;
}

/* ----------------------------- Volver arriba ------------------------ */
.arriba{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  background:var(--azul); color:#fff;
  border-radius:50%; box-shadow:var(--sombra-alta);
  transition:background var(--transicion), transform var(--transicion);
}
.arriba:hover{ background:var(--azul-oscuro); transform:translateY(-3px); }
.arriba[hidden]{ display:none; }
.arriba svg{
  width:22px; height:22px;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}


/* ------------------------- Aparecer al desplazar --------------------
   Sin librerías: una animación de CSS que dispara IntersectionObserver,
   una función que ya trae el navegador. Coste añadido: 0 KB.

   Todo cuelga de la clase .anima, que script.js pone en <html> solo si
   el visitante no ha pedido menos movimiento. Sin esa clase, estas
   reglas no existen y la web se ve entera desde el primer momento.
   -------------------------------------------------------------------- */
.anima [data-aparece]{ opacity:0; }

/* La clave está aquí: la opacidad la pone esta regla, NO la animación.
   Si el navegador por lo que sea no ejecuta la animación, el bloque se
   ve igual. La animación solo aporta el movimiento, nunca la visibilidad. */
.anima [data-aparece][data-visible]{
  opacity:1;
  /* "backwards" y no "both": mantiene el fotograma inicial durante la
     espera del escalonado, pero al terminar suelta el control. Con "both"
     el último fotograma se quedaría clavado y las tarjetas dejarían de
     moverse al pasar el ratón por encima. */
  animation:aparece .7s cubic-bezier(.22,.61,.36,1) var(--retraso,0ms) backwards;
}

@keyframes aparece{
  from{ opacity:0; transform:translateY(24px); }
  to{ opacity:1; transform:none; }
}

/* Cinturón y tirantes: si el ajuste de accesibilidad se activa después
   de cargar la página, esto lo desactiva igualmente. */
@media (prefers-reduced-motion:reduce){
  .anima [data-aparece]{ opacity:1; animation:none; }
}
}


/* =====================================================================
   Páginas legales
   El texto viene de las plantillas comunes de la Fábrica; aquí solo se
   viste con los colores de esta web. Las clases (.legal-hero, .legal-wrap,
   .legal-datos…) son las que ya trae ese texto: no cambiarlas o habría
   que reescribir las tres páginas.
   ===================================================================== */

.cabecera--legal{ position:static; border-bottom:1px solid var(--borde); }

/* Cinta que deja claro que el negocio no existe. Va arriba del todo y no
   se puede confundir con el contenido de la página. */
.cinta-muestra{
  padding:14px 20px;
  background:#fff8e6; border-bottom:1px solid #f0dfae;
  font-size:.88rem; line-height:1.5; color:#6b5310; text-align:center;
}
.cinta-muestra strong{ color:#4a3a08; }

.legal-hero{
  padding:56px 0 44px;
  background:linear-gradient(120deg,var(--azul) 0%,var(--azul-oscuro) 100%);
  color:rgba(255,255,255,.82);
}
.legal-hero h1{ color:#fff; margin-bottom:.3em; }
.legal-hero p{ margin:0; font-size:1.02rem; }
.breadcrumb{ margin:0 0 1.4em; font-size:.88rem; color:rgba(255,255,255,.62); }
.breadcrumb a{ color:rgba(255,255,255,.82); }
.breadcrumb a:hover{ color:#fff; }

.legal-body{ padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px); }

/* El texto legal se lee de arriba abajo: columna estrecha y aire. */
.legal-wrap{ max-width:70ch; margin:0 auto; }
.legal-wrap h2{
  margin-top:2.2em; padding-top:1.4em;
  border-top:1px solid var(--borde);
  font-size:1.35rem;
}
.legal-wrap h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal-wrap h3{ margin-top:1.8em; font-size:1.05rem; }
/* Ojo: .legal-wrap se usa también dentro del encabezado azul. El gris del
   cuerpo solo debe aplicarse aquí abajo, o el subtítulo y la miga de pan
   quedan en gris oscuro sobre azul oscuro (1,5:1, ilegible). */
.legal-body .legal-wrap p,
.legal-body .legal-wrap li{ font-size:.97rem; color:var(--texto-suave); }
.legal-wrap ul,
.legal-wrap ol{ padding-left:1.3em; margin:0 0 1.1em; }
.legal-wrap li{ margin-bottom:.5em; }
.legal-wrap table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.legal-wrap th,
.legal-wrap td{ padding:10px 12px; border:1px solid var(--borde); text-align:left; }
.legal-wrap th{ background:var(--gris-claro); font-weight:600; color:var(--texto); }

/* Las tablas de cookies son anchas: que se desplacen ellas, no la página. */
.legal-wrap .tabla,
.legal-wrap table{ display:block; overflow-x:auto; }

.legal-datos{
  margin:0 0 2em; padding:24px 26px;
  background:var(--gris-claro);
  border:1px solid var(--borde);
  border-radius:var(--radio);
}
.legal-datos dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:0; }
.legal-datos dt{ font-weight:600; font-size:.92rem; color:var(--texto); }
.legal-datos dd{ margin:0; font-size:.95rem; color:var(--texto-suave); }

.legal-nota{
  margin-top:2.4em; padding:18px 22px;
  background:var(--azul-claro); border-radius:var(--radio);
  font-size:.92rem;
}
.legal-otras{ margin-top:2em; font-size:.92rem; }

@media (max-width:520px){
  .legal-datos dl{ grid-template-columns:1fr; gap:2px 0; }
  .legal-datos dt{ margin-top:10px; }
}

/* =====================================================================
   A partir de aquí, las ampliaciones para pantallas grandes
   ===================================================================== */

@media (min-width:600px){
  .campo--mitades{ grid-template-columns:1fr 1fr; }
  .contacto__formulario{ padding:34px 30px; }
  h1{ font-size:2.6rem; }
  h2{ font-size:2rem; }
}

@media (min-width:768px){
  .seccion{ padding:88px 0; }
  .inner{ padding:0 32px; }
  .tarjetas--dos{ grid-template-columns:repeat(2,1fr); }
  .cifras strong{ font-size:1.9rem; }
  .pie__columnas{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}

@media (min-width:992px){
  h1{ font-size:3.1rem; }
  h2{ font-size:2.2rem; }
  .seccion{ padding:104px 0; }
  .hero{ text-align:left; }
  /* A partir de aquí cabe entero en dos líneas: el límite de ancho que
     ordena el titular en móvil aquí solo dejaría un «laboral» suelto. */
  .hero h1{ margin-inline:0; max-width:none; }
  .hero__texto{ margin-inline:0; }
  .hero .actions{ justify-content:flex-start; }

  .tarjetas--tres{ grid-template-columns:repeat(3,1fr); }

  .dosColumnas{ grid-template-columns:1fr 1fr; gap:64px; align-items:center; }

  .contacto{ grid-template-columns:1.05fr .95fr; gap:48px; align-items:start; }

  /* El menú deja de ser panel y se pone en línea */
  .hamburguesa{ display:none; }
  .menu{
    position:static; display:flex; flex-direction:row; align-items:center;
    gap:8px; padding:0; background:none; border:0; box-shadow:none;
  }
  .menu ul{ display:flex; align-items:center; gap:4px; }
  .menu ul a{
    position:relative;
    padding:8px 14px; border:0;
    font-size:.93rem;
  }
  /* Subrayado que crece desde el centro al pasar por encima */
  .menu ul a::after{
    content:""; position:absolute; left:50%; right:50%; bottom:2px;
    height:2px; background:var(--azul);
    transition:left var(--transicion), right var(--transicion);
  }
  .menu ul a:hover::after,
  .menu ul a[aria-current="true"]::after{ left:14px; right:14px; }
  .menu ul a[aria-current="true"]{ color:var(--azul); font-weight:600; }
  .menu__cta{ margin:0 0 0 12px; min-height:44px; padding:10px 24px; }
}

@media (min-width:1200px){
  .arriba{ right:28px; bottom:28px; }
}