/* ============================================================================
   CERCO INGENIERÍA — Sistema de diseño
   ----------------------------------------------------------------------------
   Reglas de oro de este archivo:
   1. Ningún valor suelto. Todo espacio sale de la escala --e-*.
   2. Ningún style="" en el HTML. Si hace falta algo, se crea una clase aquí.
   3. Toda tarjeta de una misma fila mide lo mismo, sin importar el texto.
   4. Todo elemento interactivo responde: hover, focus y active.
   ============================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Color */
  --primario:#123B63;
  --primario-osc:#0B2340;
  --primario-cl:#1D6FA5;
  --acento:#F5A623;
  --acento-osc:#C97F09;
  --exito:#1B7A4B;
  --exito-osc:#14603A;

  --fondo:#FFFFFF;
  --fondo-alt:#F5F8FC;
  --fondo-hondo:#ECF2F8;
  --texto:#16202B;
  --texto-suave:#5A6875;
  --texto-inv:#EAF1F8;
  --texto-inv-suave:#A9BED4;
  --borde:#DDE5EE;
  --borde-fuerte:#C3D1E0;

  /* Escala de espacio — base 4. Único origen de márgenes y paddings */
  --e-1:.25rem; --e-2:.5rem;  --e-3:.75rem; --e-4:1rem;
  --e-5:1.5rem; --e-6:2rem;   --e-7:3rem;   --e-8:4rem;
  --e-9:6rem;   --e-10:8rem;

  /* Ritmo vertical de sección: una sola fuente */
  --ritmo:clamp(3.5rem,8vw,6.5rem);
  --ritmo-corto:clamp(2.5rem,5vw,4rem);

  /* Tipografía fluida */
  --t-xs:.78rem;
  --t-sm:.875rem;
  --t-base:1.0625rem;
  --t-md:clamp(1.08rem,.5vw + .95rem,1.2rem);
  --t-lg:clamp(1.2rem,1vw + 1rem,1.4rem);
  --t-h3:clamp(1.15rem,.6vw + 1rem,1.3rem);
  --t-h2:clamp(1.65rem,2.4vw + 1rem,2.4rem);
  --t-h1:clamp(2.05rem,4vw + 1.1rem,3.4rem);

  --fuente-t:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-c:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Formas */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-full:999px;
  --ancho:1180px;
  --ancho-texto:64ch;

  /* Elevación */
  --s-1:0 1px 2px rgba(11,35,64,.05), 0 2px 6px rgba(11,35,64,.05);
  --s-2:0 2px 4px rgba(11,35,64,.05), 0 12px 28px rgba(11,35,64,.09);
  --s-3:0 8px 16px rgba(11,35,64,.08), 0 24px 56px rgba(11,35,64,.16);
  --s-color:0 8px 24px rgba(18,59,99,.28);
  --s-verde:0 8px 24px rgba(27,122,75,.3);

  /* Movimiento */
  --mov:.22s cubic-bezier(.4,0,.2,1);
  --mov-lento:.5s cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--fuente-c);font-size:var(--t-base);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--fuente-t);color:var(--primario-osc);
  line-height:1.14;letter-spacing:-.022em;margin:0 0 var(--e-4);
  text-wrap:balance;
}
h1{font-size:var(--t-h1);font-weight:800}
h2{font-size:var(--t-h2);font-weight:700}
h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.012em}
p{margin:0 0 var(--e-4)}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--primario-osc)}

a{color:var(--primario-cl);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--primario)}

:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--primario);color:#fff}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--acento);color:var(--primario-osc);
  padding:var(--e-3) var(--e-5);font-weight:700;border-radius:0 0 var(--r-sm) 0;
}
.saltar:focus{left:0}

/* ---------- 3. ESTRUCTURA ---------- */
.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--e-5)}
.seccion{padding-block:var(--ritmo)}
.seccion--corta{padding-block:var(--ritmo-corto)}
.seccion--alt{background:var(--fondo-alt)}
.seccion--hondo{background:var(--fondo-hondo)}

/* Fondo oscuro con textura sutil de rejilla */
.seccion--oscura{
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(29,111,165,.4), transparent 60%),
    linear-gradient(165deg, var(--primario-osc), #0E2E51 70%, #103963);
  color:var(--texto-inv);position:relative;overflow:hidden;
}
.seccion--oscura::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent);
}
.seccion--oscura>*{position:relative;z-index:1}
.seccion--oscura h2,.seccion--oscura h3{color:#fff}
.seccion--oscura p{color:var(--texto-inv-suave)}
.seccion--oscura .eyebrow{color:var(--acento)}

/* Encabezado de sección — un solo componente, mismo ritmo siempre */
.encabezado{max-width:var(--ancho-texto);margin-bottom:var(--e-7)}
.encabezado--centro{margin-inline:auto;text-align:center}
.encabezado p{color:var(--texto-suave);font-size:var(--t-md);margin-bottom:0}
.seccion--oscura .encabezado p{color:var(--texto-inv-suave)}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--e-2);
  font-family:var(--fuente-t);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primario-cl);
  margin-bottom:var(--e-3);
}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.encabezado--centro .eyebrow::before{display:none}

.medida{max-width:var(--ancho-texto)}
.centro{text-align:center}

/* ---------- 4. REJILLAS ---------- */
/* auto-rows:1fr => todas las tarjetas de la fila miden lo mismo. Adiós columnas dispares. */
.rejilla{display:grid;gap:var(--e-5);grid-auto-rows:1fr}
.rejilla--2{grid-template-columns:1fr}
.rejilla--3{grid-template-columns:1fr}
.rejilla--4{grid-template-columns:1fr}
.rejilla--suelta{gap:var(--e-6)}

/* Dos columnas de contenido (texto + imagen): altura natural, centradas */
.duo{display:grid;gap:var(--e-7);align-items:center;grid-auto-rows:auto}
.duo--arriba{align-items:start}
.duo--invertido>:first-child{order:2}

/* ---------- 5. BOTONES ---------- */
.btn{
  --btn-fondo:var(--primario);
  --btn-texto:#fff;
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  font-family:var(--fuente-t);font-weight:700;font-size:.97rem;line-height:1;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  padding:var(--e-4) var(--e-6);border:2px solid transparent;border-radius:var(--r-full);
  background:var(--btn-fondo);color:var(--btn-texto);cursor:pointer;
  transition:transform var(--mov),box-shadow var(--mov),background var(--mov),color var(--mov);
}
/* Destello que barre el botón al pasar el cursor */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px);transition-duration:.06s}
/* La flecha avanza */
.btn .flecha{transition:transform var(--mov)}
.btn:hover .flecha{transform:translateX(4px)}

/* Contraste verificado sobre el texto del botón. Ningún par baja de 4.5:1.
   El gradiente arranca en el tono MÁS OSCURO que aún se ve vivo: si arranca
   claro, el borde superior del botón reprueba AA aunque el centro lo pase. */

/* Azul — blanco sobre #17588C = 6.6:1 ✔ (antes #1D6FA5 = 5.4:1, justo) */
.btn--primario{
  --btn-fondo:linear-gradient(135deg,#1C6899 0%,var(--primario) 52%,var(--primario-osc) 100%);
  box-shadow:var(--s-1);
}
.btn--primario:hover{box-shadow:var(--s-color)}

/* Verde — blanco sobre #147A4B = 5.4:1 ✔ (antes #229160 = 3.97:1 ✖ REPROBABA) */
.btn--wa{
  --btn-fondo:linear-gradient(135deg,#1A8355 0%,var(--exito) 45%,var(--exito-osc) 100%);
  box-shadow:var(--s-1);
}
.btn--wa:hover{box-shadow:var(--s-verde)}

/* Ámbar — texto café muy oscuro sobre ámbar = 8.9:1 ✔. Es el CTA de mayor
   impacto visual del sitio: úsese como acción principal sobre fondo oscuro. */
.btn--acento{
  --btn-fondo:linear-gradient(135deg,#FFCE7A 0%,var(--acento) 55%,#E0900F 100%);
  --btn-texto:#331F00;box-shadow:0 2px 4px rgba(90,61,8,.2);
}
.btn--acento:hover{box-shadow:0 10px 28px rgba(245,166,35,.5)}

/* Blanco — azul primario sobre blanco = 9.7:1 ✔. Borde para que no se
   difumine contra fondos claros o imágenes. */
.btn--claro{
  --btn-fondo:#fff;--btn-texto:var(--primario-osc);
  border-color:rgba(11,35,64,.1);box-shadow:var(--s-2);
}
.btn--claro:hover{box-shadow:var(--s-3);--btn-texto:var(--primario)}

/* Contorno — sobre claro */
.btn--linea{--btn-fondo:transparent;--btn-texto:var(--primario-osc);border-color:var(--borde-fuerte)}
.btn--linea:hover{border-color:var(--primario);background:var(--primario);--btn-texto:#fff}
/* Contorno — sobre oscuro: se le da un velo para que el texto no flote sin base */
.seccion--oscura .btn--linea,.cta-franja .btn--linea,.hero .btn--linea{
  --btn-fondo:rgba(255,255,255,.1);--btn-texto:#fff;border-color:rgba(255,255,255,.55);
}
.seccion--oscura .btn--linea:hover,.cta-franja .btn--linea:hover,.hero .btn--linea:hover{
  --btn-fondo:#fff;--btn-texto:var(--primario-osc);border-color:#fff;
}

.btn--bloque{width:100%}
.btn--grande{padding:var(--e-5) var(--e-7);font-size:1.05rem}

.acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}
.encabezado--centro+.acciones,.centro .acciones{justify-content:center}

/* Enlace de texto con subrayado que crece */
.enlace-vivo{
  display:inline-flex;align-items:center;gap:var(--e-2);
  font-family:var(--fuente-t);font-weight:700;font-size:.93rem;
  color:var(--primario-cl);text-decoration:none;
}
.enlace-vivo .flecha{transition:transform var(--mov)}
.enlace-vivo:hover .flecha{transform:translateX(4px)}

/* Latido suave del CTA de WhatsApp, una sola vez cada tanto */
@keyframes latido{
  0%,88%,100%{box-shadow:var(--s-1)}
  94%{box-shadow:0 0 0 10px rgba(27,122,75,0)}
}
.btn--wa.pulso{animation:latido 5s ease-out infinite}
.btn--wa.pulso:hover{animation:none}

/* ---------- 6. CABECERA ---------- */
.barra-superior{background:var(--primario-osc);color:var(--texto-inv-suave);font-size:var(--t-sm)}
.barra-superior .contenedor{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--e-2) var(--e-6);padding-block:var(--e-2);
}
.barra-superior a{color:#fff;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--e-2)}
.barra-superior a:hover{color:var(--acento)}
.barra-superior .oculta-movil{display:none}

.cabecera{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde);transition:box-shadow var(--mov),background var(--mov);
}
.cabecera.fija{box-shadow:var(--s-2);background:rgba(255,255,255,.97)}
.cabecera .contenedor{display:flex;align-items:center;gap:var(--e-4);padding-block:var(--e-3)}

.logo{display:flex;align-items:center;gap:var(--e-3);text-decoration:none;flex-shrink:0}
.logo img{width:46px;height:46px;border-radius:var(--r-sm);transition:transform var(--mov)}
.logo:hover img{transform:rotate(-4deg) scale(1.05)}
.logo b{font-family:var(--fuente-t);font-weight:800;font-size:1.08rem;
  color:var(--primario-osc);line-height:1.05;display:block;letter-spacing:-.02em}
.logo small{display:block;font-size:.66rem;font-weight:600;color:var(--texto-suave);
  letter-spacing:.16em;text-transform:uppercase}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;font-size:.9rem;font-weight:600;color:var(--texto);
  text-decoration:none;padding:var(--e-2);border-radius:var(--r-sm);
  transition:color var(--mov);white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:var(--e-2);right:var(--e-2);bottom:2px;height:2px;
  background:var(--primario-cl);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform var(--mov);
}
.nav a:hover{color:var(--primario)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--primario)}
.nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--acento)}
.nav .btn::after{display:none}
.nav .btn{margin-left:var(--e-3);padding:var(--e-3) var(--e-5);font-size:.9rem}

/* Bloque de teléfono en la cabecera: el dato de contacto siempre a la vista */
/* Teléfono de cabecera: solo el icono. El número completo vive en la barra superior,
   en el pie y en los botones flotantes, así que repetirlo aquí solo apretaba el menú. */
.cabecera-tel{
  display:none;align-items:center;text-decoration:none;flex-shrink:0;
  padding:0;border-radius:50%;border:1px solid transparent;
  transition:transform var(--mov),filter var(--mov);
}
.cabecera-tel:hover{transform:translateY(-2px)}
.cabecera-tel:hover .redondo{filter:brightness(1.08);box-shadow:0 6px 16px rgba(18,59,99,.34)}
.cabecera-tel small,.cabecera-tel b{display:none}

.cabecera-tel .redondo{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#1C6899,var(--primario));color:#fff;
  box-shadow:0 3px 10px rgba(18,59,99,.24);
  transition:filter var(--mov),box-shadow var(--mov);
}
.cabecera-tel .redondo svg{width:19px;height:19px;fill:currentColor}
.cabecera-tel small{display:block;font-size:.68rem;font-weight:600;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:.1em;line-height:1.4}
.cabecera-tel b{display:block;font-family:var(--fuente-t);font-size:1rem;
  color:var(--primario-osc);line-height:1.2;letter-spacing:-.01em}

/* Barra de progreso de lectura */
.progreso{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--primario-cl),var(--acento));
}

.nav-toggle{
  display:none;margin-left:auto;background:#fff;border:1px solid var(--borde);
  border-radius:var(--r-sm);padding:var(--e-3) var(--e-4);font:inherit;font-weight:700;
  font-size:.9rem;color:var(--primario);cursor:pointer;
}

/* Bloque de contacto dentro del menú móvil */
.nav-contacto{display:none}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  padding-block:clamp(3rem,6vw,5.5rem) clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(900px 460px at 88% 8%, rgba(29,111,165,.55), transparent 62%),
    radial-gradient(700px 420px at 8% 100%, rgba(245,166,35,.14), transparent 60%),
    linear-gradient(158deg,var(--primario-osc) 0%,#123E68 55%,#16537F 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(70% 70% at 40% 30%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 40% 30%,#000,transparent);
}
.hero .contenedor{position:relative;z-index:1}
.hero h1{color:#fff;margin-bottom:var(--e-5)}
.hero .entrada{font-size:var(--t-lg);color:#CFDFEE;max-width:54ch;line-height:1.6}
.hero-duo{display:grid;gap:var(--e-7);align-items:center}

.sello{
  display:inline-flex;align-items:center;gap:var(--e-2);
  background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.42);
  color:#FFD79A;font-size:var(--t-sm);font-weight:600;
  padding:var(--e-2) var(--e-4);border-radius:var(--r-full);margin-bottom:var(--e-5);
}
.sello .punto{width:7px;height:7px;border-radius:50%;background:var(--acento);
  box-shadow:0 0 0 0 rgba(245,166,35,.7);animation:radar 2.4s ease-out infinite}
@keyframes radar{
  70%{box-shadow:0 0 0 9px rgba(245,166,35,0)}
  100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}
}

.hero-figura{position:relative}
.hero-figura img{border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(0,0,0,.42)}
.hero-figura::after{
  content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:62%;
  border:2px solid rgba(245,166,35,.4);border-radius:var(--r-lg);z-index:-1;
}

/* Cifras del hero — mismo alto, separadores iguales */
.cifras{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-4);
  margin-top:var(--e-7);padding-top:var(--e-5);
  border-top:1px solid rgba(255,255,255,.18);
}
.cifras div{min-width:0}
.cifras b{display:block;font-family:var(--fuente-t);font-weight:800;
  font-size:clamp(1.4rem,2.4vw,1.85rem);color:#fff;line-height:1.1;letter-spacing:-.02em}
.cifras span{font-size:var(--t-sm);color:#B7CBDE;display:block;margin-top:var(--e-1)}

/* ---------- 8. TARJETAS ---------- */
.tarjeta{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--borde);border-radius:var(--r);
  padding:var(--e-6);box-shadow:var(--s-1);
  transition:transform var(--mov),box-shadow var(--mov),border-color var(--mov);
}
.tarjeta h3{margin-bottom:var(--e-3)}
.tarjeta p{color:var(--texto-suave);font-size:.97rem}
/* Empuja el enlace al fondo: todas las tarjetas terminan alineadas */
.tarjeta .pie-tarjeta{margin-top:auto;padding-top:var(--e-5)}

.tarjeta--enlace{text-decoration:none;color:inherit;position:relative;overflow:hidden}
.tarjeta--enlace::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--primario-cl),var(--acento));
  transform:scaleX(0);transform-origin:left;transition:transform var(--mov-lento);
}
.tarjeta--enlace:hover{transform:translateY(-6px);box-shadow:var(--s-3);border-color:var(--borde-fuerte)}
.tarjeta--enlace:hover::before{transform:scaleX(1)}
.tarjeta--enlace:hover .icono{background:var(--primario);color:#fff;transform:scale(1.06) rotate(-4deg)}

.icono{
  width:52px;height:52px;flex-shrink:0;border-radius:var(--r-sm);
  background:var(--fondo-hondo);color:var(--primario);
  display:grid;place-items:center;font-size:1.45rem;margin-bottom:var(--e-5);
  transition:background var(--mov),color var(--mov),transform var(--mov);
}

/* Dato/cifra suelta */
.dato{
  display:flex;flex-direction:column;justify-content:center;height:100%;
  background:#fff;border:1px solid var(--borde);border-radius:var(--r);
  padding:var(--e-5);text-align:center;
}
.dato b{font-family:var(--fuente-t);font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--primario);line-height:1.1;letter-spacing:-.02em}
.dato span{font-size:var(--t-sm);color:var(--texto-suave);margin-top:var(--e-1)}

/* ---------- 9. RESPUESTA DIRECTA (AEO/GEO) ---------- */
.respuesta{
  position:relative;background:#fff;border:1px solid var(--borde);
  border-radius:var(--r);padding:var(--e-6) var(--e-6) var(--e-6) var(--e-7);
  box-shadow:var(--s-2);margin-bottom:var(--e-7);
}
.respuesta::before{
  content:"";position:absolute;left:0;top:var(--e-5);bottom:var(--e-5);width:4px;
  background:linear-gradient(180deg,var(--acento),var(--primario-cl));border-radius:0 4px 4px 0;
}
.respuesta p{font-size:var(--t-md);color:var(--texto)}

/* ---------- 10. LISTA DE COMPROBACIÓN ---------- */
.lista-check{list-style:none;padding:0;margin:var(--e-5) 0 0;display:grid;gap:var(--e-3)}
.lista-check li{position:relative;padding-left:var(--e-8);line-height:1.55}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.18em;width:24px;height:24px;border-radius:50%;
  background:rgba(27,122,75,.12);border:1px solid rgba(27,122,75,.3);
}
.lista-check li::after{
  content:"";position:absolute;left:9px;top:.5em;width:5px;height:10px;
  border:solid var(--exito);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.seccion--oscura .lista-check li{color:var(--texto-inv)}
.seccion--oscura .lista-check li::before{background:rgba(245,166,35,.16);border-color:rgba(245,166,35,.42)}
.seccion--oscura .lista-check li::after{border-color:var(--acento)}

/* ---------- 11. PROCESO ---------- */
.pasos{list-style:none;padding:0;margin:0;counter-reset:paso;display:grid;gap:var(--e-6)}
.pasos li{counter-increment:paso;position:relative;padding-left:var(--e-9)}
.pasos li::before{
  content:counter(paso,decimal-leading-zero);position:absolute;left:0;top:0;
  width:52px;height:52px;border-radius:50%;
  background:#fff;border:2px solid var(--borde-fuerte);color:var(--primario);
  display:grid;place-items:center;font-family:var(--fuente-t);font-weight:800;font-size:.95rem;
  transition:background var(--mov),color var(--mov),border-color var(--mov);z-index:1;
}
/* Línea que une los pasos */
.pasos li:not(:last-child)::after{
  content:"";position:absolute;left:25px;top:52px;bottom:calc(var(--e-6) * -1);
  width:2px;background:linear-gradient(180deg,var(--borde-fuerte),var(--borde));
}
.pasos li:hover::before{background:var(--primario);color:#fff;border-color:var(--primario)}
.pasos h3{margin-bottom:var(--e-2);font-size:1.08rem}
.pasos p{color:var(--texto-suave);font-size:.96rem}

/* ---------- 12. TABLA ---------- */
.tabla-envoltura{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--borde);border-radius:var(--r);background:#fff;box-shadow:var(--s-1);
}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:.95rem}
caption{text-align:left;padding:var(--e-5) var(--e-5) 0;font-size:var(--t-sm);color:var(--texto-suave)}
th,td{padding:var(--e-4) var(--e-5);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--borde)}
thead th{
  background:var(--fondo-alt);font-family:var(--fuente-t);font-size:var(--t-xs);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primario-osc);
  position:sticky;top:0;
}
tbody th{font-family:var(--fuente-t);font-weight:700;color:var(--primario-osc);white-space:nowrap}
tbody tr{transition:background var(--mov)}
tbody tr:hover{background:var(--fondo-alt)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}

/* ---------- 13. FAQ ---------- */
.faq-zona{display:grid;gap:var(--e-7);align-items:start}

.faq{display:grid;gap:var(--e-3);counter-reset:pregunta}
.faq details{
  position:relative;background:#fff;border:1px solid var(--borde);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--mov),box-shadow var(--mov),transform var(--mov);
}
/* Barra de acento que se despliega al abrir */
.faq details::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--acento),var(--primario-cl));
  transform:scaleY(0);transform-origin:top;transition:transform var(--mov-lento);
}
.faq details:hover{border-color:var(--borde-fuerte);transform:translateX(3px)}
.faq details[open]{border-color:var(--primario-cl);box-shadow:var(--s-2)}
.faq details[open]::before{transform:scaleY(1)}

.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;
  gap:var(--e-4);padding:var(--e-5) var(--e-6);
  font-family:var(--fuente-t);font-weight:600;font-size:1.02rem;color:var(--primario-osc);
  transition:color var(--mov);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--primario-cl)}

/* Número de pregunta */
.faq summary .num{
  counter-increment:pregunta;flex-shrink:0;
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--fondo-hondo);color:var(--primario-cl);
  font-size:.82rem;font-weight:800;letter-spacing:0;
  transition:background var(--mov),color var(--mov),transform var(--mov);
}
.faq summary .num::before{content:counter(pregunta,decimal-leading-zero)}
.faq details[open] summary .num{background:var(--primario);color:#fff;transform:scale(1.08)}

.faq summary .txt{flex:1;min-width:0}

/* Signo +/− que rota */
.faq summary .mas-menos{
  position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--borde-fuerte);transition:border-color var(--mov),background var(--mov),transform var(--mov);
}
.faq summary .mas-menos::before,
.faq summary .mas-menos::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--primario-cl);
  border-radius:2px;transform:translate(-50%,-50%);transition:transform var(--mov),background var(--mov);
}
.faq summary .mas-menos::before{width:11px;height:2px}
.faq summary .mas-menos::after{width:2px;height:11px}
.faq details[open] summary .mas-menos{border-color:var(--primario);background:var(--primario);transform:rotate(180deg)}
.faq details[open] summary .mas-menos::before{background:#fff}
.faq details[open] summary .mas-menos::after{transform:translate(-50%,-50%) scaleY(0)}

.faq .cuerpo{padding:0 var(--e-6) var(--e-5) calc(var(--e-6) + 32px + var(--e-4));color:var(--texto-suave)}
.faq .cuerpo p{font-size:.98rem}
.faq details[open] .cuerpo{animation:desplegar .32s cubic-bezier(.16,1,.3,1)}
@keyframes desplegar{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Tarjeta lateral de ayuda */
.faq-ayuda{
  display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--primario) 0%,var(--primario-osc) 100%);
  color:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--s-3);
}
.faq-ayuda img{width:100%;aspect-ratio:1/1;object-fit:cover}
.faq-ayuda .cuerpo{padding:var(--e-6)}
.faq-ayuda h3{color:#fff;font-size:1.15rem}
.faq-ayuda p{color:#C6D8E8;font-size:.95rem}
.faq-ayuda .acciones{margin-top:var(--e-5)}
.faq-ayuda .btn{width:100%}

/* ---------- 13c. BLOQUE DE VISITA ---------- */
.visita-figura{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--s-3)}
.visita-figura img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.visita-figura::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,35,64,.78) 0%,rgba(11,35,64,.12) 42%,transparent 68%);
}
.visita-precio{
  position:absolute;left:var(--e-5);right:var(--e-5);bottom:var(--e-5);z-index:2;
  display:flex;align-items:center;gap:var(--e-4);
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-radius:var(--r);padding:var(--e-4) var(--e-5);box-shadow:var(--s-2);
}
.visita-precio .cifra{
  font-family:var(--fuente-t);font-weight:800;font-size:clamp(1.5rem,4vw,1.9rem);
  color:var(--primario);line-height:1;letter-spacing:-.03em;
}
.visita-precio .detalle{font-size:var(--t-sm);color:var(--texto-suave);line-height:1.4}
.visita-precio .detalle b{display:block;color:var(--primario-osc);font-family:var(--fuente-t)}

@media (min-width:961px){
  .faq-zona{grid-template-columns:1.55fr .95fr;gap:var(--e-8)}
  .faq-ayuda{position:sticky;top:96px}
}

/* ---------- 13b. OFERTA / PRECIO ---------- */
.oferta{
  display:grid;gap:var(--e-6);align-items:center;
  background:linear-gradient(135deg,#fff 0%,var(--fondo-alt) 100%);
  border:1px solid var(--borde);border-left:5px solid var(--acento);
  border-radius:var(--r-lg);padding:var(--e-6);box-shadow:var(--s-2);
}
.oferta-precio{text-align:center}
.oferta-precio .cifra{
  display:block;font-family:var(--fuente-t);font-weight:800;
  font-size:clamp(2.1rem,5vw,3rem);line-height:1;letter-spacing:-.03em;
  color:var(--primario);
}
.oferta-precio .moneda{display:block;font-size:var(--t-sm);color:var(--texto-suave);
  margin-top:var(--e-2)}
.oferta-precio .etiqueta{
  display:inline-block;margin-top:var(--e-3);
  background:var(--acento);color:#331F00;font-family:var(--fuente-t);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  padding:var(--e-2) var(--e-4);border-radius:var(--r-full);
}
.oferta h3{margin-bottom:var(--e-3)}
.oferta p{color:var(--texto-suave)}

/* Sello de norma / respaldo */
.sellos{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-5);padding:0;list-style:none}
.sellos li{
  display:inline-flex;align-items:center;gap:var(--e-2);
  background:#fff;border:1px solid var(--borde);border-radius:var(--r-sm);
  padding:var(--e-2) var(--e-4);font-size:var(--t-sm);font-weight:600;color:var(--primario-osc);
}
.sellos li::before{content:"✓";color:var(--exito);font-weight:800}
.seccion--oscura .sellos li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}

@media (min-width:700px){
  .oferta{grid-template-columns:auto 1fr;gap:var(--e-7)}
  .oferta-precio{border-right:1px solid var(--borde);padding-right:var(--e-7);min-width:220px}
}

/* ---------- 14. AVISO (placeholder visible, se borra al publicar) ---------- */
.aviso{
  background:#FFF8E9;border:1px dashed #D89A28;border-left-width:4px;border-left-style:solid;
  border-radius:var(--r-sm);padding:var(--e-4) var(--e-5);
  font-size:.9rem;line-height:1.6;color:#6B4A0B;margin-block:var(--e-5);
}
.aviso strong{color:#5A3D08}
.aviso:last-child{margin-bottom:0}

/* ---------- 15. FICHAS / CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--e-2);padding:0;margin:var(--e-5) 0 0;list-style:none}
.chips li{
  background:#fff;border:1px solid var(--borde);border-radius:var(--r-full);
  padding:var(--e-2) var(--e-4);font-size:.88rem;color:var(--texto-suave);
  transition:border-color var(--mov),color var(--mov),transform var(--mov);
}
.chips li:hover{border-color:var(--primario-cl);color:var(--primario);transform:translateY(-2px)}
.seccion--oscura .chips li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);
  color:var(--texto-inv)}
.seccion--oscura .chips li:hover{background:rgba(255,255,255,.14);border-color:var(--acento);color:#fff}

/* Ficha de sede */
.sede{
  height:100%;display:flex;flex-direction:column;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:var(--e-6);
  transition:border-color var(--mov),background var(--mov),transform var(--mov);
}
.sede:hover{border-color:rgba(245,166,35,.5);background:rgba(255,255,255,.09);transform:translateY(-4px)}
.sede .direccion{font-family:var(--fuente-t);font-weight:600;color:#fff;font-size:1.02rem}

/* ---------- 15b. FIGURAS ---------- */
.figura-redonda{border-radius:var(--r-lg);box-shadow:var(--s-2);width:100%}
.figura-marco{position:relative}
.figura-marco .figura-redonda{position:relative;z-index:1}
.figura-marco::after{
  content:"";position:absolute;left:-14px;bottom:-14px;width:58%;height:58%;
  border:2px solid var(--acento);border-radius:var(--r-lg);opacity:.55;
}

/* ---------- 16. MIGAS ---------- */
.migas{padding-block:var(--e-4) 0;font-size:var(--t-sm)}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--e-2);padding:0;margin:0;color:var(--texto-suave)}
.migas li:not(:last-child)::after{content:"/";margin-left:var(--e-2);color:var(--borde-fuerte)}
.migas a{color:var(--texto-suave);text-decoration:none}
.migas a:hover{color:var(--primario)}

/* ---------- 17. FORMULARIO ---------- */
.formulario{
  background:#fff;border:1px solid var(--borde);border-radius:var(--r-lg);
  padding:var(--e-6);box-shadow:var(--s-2);
}
.formulario .titulo{font-family:var(--fuente-t);font-weight:700;font-size:1.15rem;
  color:var(--primario-osc);margin-bottom:var(--e-5)}
.campos{display:grid;gap:var(--e-4)}
.campos--2{grid-template-columns:1fr}
.campo label{display:block;font-weight:600;font-size:var(--t-sm);
  color:var(--primario-osc);margin-bottom:var(--e-2)}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--texto);
  padding:var(--e-3) var(--e-4);background:var(--fondo-alt);
  border:1.5px solid var(--borde);border-radius:var(--r-sm);
  transition:border-color var(--mov),background var(--mov),box-shadow var(--mov);
}
.campo input::placeholder,.campo textarea::placeholder{color:#9AA8B6}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--borde-fuerte)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;background:#fff;border-color:var(--primario-cl);
  box-shadow:0 0 0 4px rgba(29,111,165,.13);
}
.campo textarea{min-height:112px;resize:vertical}
.campo .ayuda{font-size:var(--t-xs);color:var(--texto-suave);margin-top:var(--e-2)}
.formulario .btn{margin-top:var(--e-5)}
.legal{font-size:var(--t-xs);color:var(--texto-suave);margin-top:var(--e-4);text-align:center}
.trampa{position:absolute;left:-9999px;width:0;height:0;overflow:hidden}

/* ---------- 18. LLAMADO FINAL ---------- */
.cta-franja{
  background:linear-gradient(135deg,var(--primario) 0%,var(--primario-osc) 100%);
  border-radius:var(--r-lg);padding:var(--e-8) var(--e-6);text-align:center;
  color:#fff;position:relative;overflow:hidden;
}
.cta-franja::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 80% 0%,rgba(245,166,35,.2),transparent 60%);
}
.cta-franja>*{position:relative}
.cta-franja h2{color:#fff}
.cta-franja p{color:#C6D8E8;max-width:52ch;margin-inline:auto}

/* ---------- 18b. PÁGINA DE GRACIAS ---------- */
.gracias{text-align:center;max-width:1000px;margin-inline:auto}
.gracias h1{margin-bottom:var(--e-4)}
.gracias .entrada-gracias{
  font-size:var(--t-lg);color:var(--texto-suave);max-width:56ch;
  margin-inline:auto;margin-bottom:var(--e-8);
}
.gracias .rejilla{text-align:left;margin-bottom:var(--e-8)}
.gracias .cta-franja{margin-bottom:var(--e-8)}
.gracias-marca{
  display:grid;place-items:center;width:84px;height:84px;margin:0 auto var(--e-6);
  border-radius:50%;background:linear-gradient(135deg,#229160,var(--exito));
  color:#fff;font-size:2.4rem;font-weight:700;line-height:1;
  box-shadow:0 0 0 10px rgba(27,122,75,.12);
  animation:aparecer-marca .55s cubic-bezier(.16,1,.3,1);
}
@keyframes aparecer-marca{
  0%{transform:scale(.4);opacity:0}
  60%{transform:scale(1.12)}
  100%{transform:scale(1);opacity:1}
}

/* ---------- 18c. DOCUMENTOS LEGALES ---------- */
.legal-doc{max-width:78ch;margin-inline:auto}
.legal-doc h2{
  font-size:clamp(1.15rem,1.4vw + 1rem,1.4rem);
  margin-top:var(--e-8);padding-top:var(--e-5);
  border-top:1px solid var(--borde);
}
.legal-doc .encabezado h2:first-of-type{border-top:none;margin-top:0;padding-top:0}
.legal-doc .lista-check{margin-bottom:var(--e-5)}
.legal-doc .cta-franja{margin-top:var(--e-9)}

/* ============================================================================
   18d. BLOG
   Regla de arquitectura: el artículo es contenido informativo y SIEMPRE enlaza
   hacia arriba a su página de servicio. Nunca compite con ella.
   ============================================================================ */

/* ---- Índice del blog ---- */
.entrada-tarjeta{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:#fff;border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--s-1);text-decoration:none;color:inherit;
  transition:transform var(--mov),box-shadow var(--mov),border-color var(--mov);
}
.entrada-tarjeta:hover{transform:translateY(-6px);box-shadow:var(--s-3);border-color:var(--borde-fuerte)}
.entrada-tarjeta .portada{position:relative;overflow:hidden;background:var(--fondo-hondo)}
.entrada-tarjeta .portada img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform var(--mov-lento);
}
.entrada-tarjeta:hover .portada img{transform:scale(1.05)}
.entrada-tarjeta .cuerpo{display:flex;flex-direction:column;flex:1;padding:var(--e-5) var(--e-5) var(--e-6)}
.entrada-tarjeta h3{font-size:1.1rem;margin-bottom:var(--e-3);line-height:1.3}
.entrada-tarjeta p{color:var(--texto-suave);font-size:.95rem}
.entrada-tarjeta .pie-tarjeta{margin-top:auto;padding-top:var(--e-4)}

/* Etiqueta de silo sobre la portada */
.etiqueta-silo{
  position:absolute;left:var(--e-4);top:var(--e-4);z-index:2;
  background:rgba(11,35,64,.88);color:#fff;backdrop-filter:blur(6px);
  font-family:var(--fuente-t);font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  padding:var(--e-2) var(--e-3);border-radius:var(--r-sm);
}
.meta-entrada{
  display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);
  font-size:var(--t-xs);color:var(--texto-suave);margin-bottom:var(--e-3);
}
.meta-entrada span{display:inline-flex;align-items:center;gap:var(--e-1)}

/* ---- Cabecera del artículo ---- */
.articulo-portada{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--s-2);margin-bottom:var(--e-7);
}
.articulo-cabecera{max-width:76ch;margin-inline:auto}
.articulo-cabecera h1{font-size:clamp(1.8rem,3.4vw + 1rem,2.9rem);margin-bottom:var(--e-4)}
.articulo-cabecera .bajada{
  font-size:var(--t-lg);color:var(--texto-suave);line-height:1.6;margin-bottom:var(--e-5);
}

/* ---- Disposición: artículo + barra lateral fija ---- */
.articulo-zona{display:grid;gap:var(--e-7);align-items:start}

.articulo{max-width:72ch;font-size:1.06rem;line-height:1.75}
.articulo h2{
  font-size:clamp(1.35rem,1.6vw + 1rem,1.75rem);
  margin-top:var(--e-8);margin-bottom:var(--e-4);
  padding-top:var(--e-5);border-top:1px solid var(--borde);
}
.articulo h3{font-size:1.15rem;margin-top:var(--e-6);margin-bottom:var(--e-3)}
.articulo p{margin-bottom:var(--e-5)}
.articulo ul,.articulo ol{margin:0 0 var(--e-5);padding-left:var(--e-6)}
.articulo li{margin-bottom:var(--e-3)}
.articulo a{font-weight:600;text-decoration-thickness:2px}
.articulo img{border-radius:var(--r);box-shadow:var(--s-1);margin-block:var(--e-6)}
.articulo figure{margin:var(--e-6) 0}
.articulo figcaption{font-size:var(--t-sm);color:var(--texto-suave);margin-top:var(--e-3);text-align:center}
.articulo .tabla-envoltura{margin-block:var(--e-6)}

/* Bloque destacado dentro del artículo */
.destacado{
  background:var(--fondo-alt);border-left:4px solid var(--primario-cl);
  border-radius:0 var(--r) var(--r) 0;padding:var(--e-5) var(--e-6);
  margin-block:var(--e-6);
}
.destacado p:last-child{margin-bottom:0}
.destacado--aviso{background:#FFF8E9;border-left-color:var(--acento-osc)}
.destacado--clave{background:#EAF6F0;border-left-color:var(--exito)}
.destacado .titulo-destacado{
  display:block;font-family:var(--fuente-t);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--primario);
  margin-bottom:var(--e-3);
}
.destacado--aviso .titulo-destacado{color:#8A6209}
.destacado--clave .titulo-destacado{color:var(--exito-osc)}

/* Enlace de ascenso al pilar: el mecanismo antipérdida de autoridad */
.subir-al-pilar{
  display:flex;flex-direction:column;gap:var(--e-4);
  background:linear-gradient(135deg,var(--primario) 0%,var(--primario-osc) 100%);
  color:#fff;border-radius:var(--r-lg);padding:var(--e-6);margin-block:var(--e-7);
}
.subir-al-pilar .titulo-destacado{color:var(--acento)}
.subir-al-pilar p{color:#C6D8E8;margin-bottom:0}
.subir-al-pilar .btn{align-self:flex-start}

/* Índice de contenidos */
.indice-articulo{
  background:#fff;border:1px solid var(--borde);border-radius:var(--r);
  padding:var(--e-5) var(--e-6);margin-bottom:var(--e-7);
}
.indice-articulo .titulo-destacado{color:var(--primario)}
.indice-articulo ol{list-style:none;padding:0;margin:0;counter-reset:idx;display:grid;gap:var(--e-2)}
.indice-articulo li{counter-increment:idx;margin:0}
.indice-articulo a{
  display:flex;gap:var(--e-3);align-items:baseline;
  font-weight:500;font-size:.97rem;color:var(--texto);text-decoration:none;
  padding:var(--e-2) 0;transition:color var(--mov),padding var(--mov);
}
.indice-articulo a::before{
  content:counter(idx,decimal-leading-zero);flex-shrink:0;
  font-family:var(--fuente-t);font-size:.78rem;font-weight:700;color:var(--primario-cl);
}
.indice-articulo a:hover{color:var(--primario-cl);padding-left:var(--e-2)}

/* ---- Barra lateral ---- */
.lateral{display:grid;gap:var(--e-5)}
.lateral-bloque{
  background:#fff;border:1px solid var(--borde);border-radius:var(--r);
  padding:var(--e-5);box-shadow:var(--s-1);
}
.lateral-bloque h3{
  font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--primario-osc);margin-bottom:var(--e-4);
}
.lateral-bloque p{font-size:.94rem;color:var(--texto-suave)}
.lateral-bloque .btn{width:100%;margin-top:var(--e-3)}
.lateral-bloque .lista-check{margin-top:var(--e-3)}
.lateral-bloque .lista-check li{font-size:.92rem;padding-left:var(--e-7)}
.lateral-bloque .lista-check li::before{width:20px;height:20px}
.lateral-bloque .lista-check li::after{left:7px;top:.45em;width:4px;height:8px}

/* Bloque de oferta en la lateral */
.lateral-oferta{
  background:linear-gradient(150deg,var(--primario) 0%,var(--primario-osc) 100%);
  border-color:transparent;color:#fff;text-align:center;
}
.lateral-oferta h3{color:#fff}
.lateral-oferta .cifra{
  display:block;font-family:var(--fuente-t);font-weight:800;
  font-size:clamp(1.9rem,4vw,2.4rem);line-height:1;letter-spacing:-.03em;color:#fff;
}
.lateral-oferta .etiqueta{
  display:inline-block;margin-top:var(--e-3);
  background:var(--acento);color:#331F00;font-family:var(--fuente-t);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  padding:var(--e-2) var(--e-4);border-radius:var(--r-full);
}
.lateral-oferta p{color:#C6D8E8;margin-top:var(--e-4)}

/* Datos de contacto en la lateral */
.lateral-contacto ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--e-3)}
.lateral-contacto li{display:flex;gap:var(--e-3);align-items:flex-start;font-size:.94rem}
.lateral-contacto a{color:var(--primario);font-weight:600;text-decoration:none}
.lateral-contacto a:hover{text-decoration:underline}
.lateral-contacto .rotulo{color:var(--texto-suave);font-size:var(--t-xs);display:block}

/* Artículos relacionados en la lateral */
.mini-entrada{
  display:flex;gap:var(--e-3);align-items:flex-start;
  text-decoration:none;color:inherit;padding:var(--e-3) 0;
  border-bottom:1px solid var(--borde);transition:padding var(--mov);
}
.mini-entrada:last-child{border-bottom:none}
.mini-entrada:hover{padding-left:var(--e-2)}
.mini-entrada img{width:64px;height:48px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0}
.mini-entrada span{font-size:.9rem;font-weight:600;line-height:1.35;color:var(--primario-osc)}

/* Autoría — señal E-E-A-T */
.autoria{
  display:flex;gap:var(--e-4);align-items:center;
  background:var(--fondo-alt);border:1px solid var(--borde);border-radius:var(--r);
  padding:var(--e-5);margin-top:var(--e-8);
}
.autoria img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.autoria b{display:block;font-family:var(--fuente-t);color:var(--primario-osc)}
.autoria span{font-size:var(--t-sm);color:var(--texto-suave)}

@media (min-width:961px){
  .articulo-zona{grid-template-columns:minmax(0,1fr) 330px;gap:var(--e-8)}
  .lateral{position:sticky;top:96px}
}

/* ---------- 19. PIE ---------- */
.pie{background:var(--primario-osc);color:var(--texto-inv-suave);
  padding-top:var(--ritmo-corto);font-size:.94rem}
.pie h3{color:#fff;font-size:.92rem;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:var(--e-5)}
.pie p{color:var(--texto-inv-suave)}
.pie a{color:var(--texto-inv);text-decoration:none;transition:color var(--mov),padding var(--mov)}
.pie a:hover{color:var(--acento)}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--e-3)}
.pie-grid{display:grid;gap:var(--e-7);grid-template-columns:1fr}
/* Los 10 servicios en el pie: 2 subcolumnas desde tablet para no estirar la columna */
.pie-servicios{gap:var(--e-3) var(--e-5)}
.pie .logo b{color:#fff}
.pie .logo small{color:var(--texto-inv-suave)}
.pie-marca{margin-top:var(--e-5)}
.pie-marca img{background:#fff;padding:var(--e-2);border-radius:var(--r-sm);width:110px}
.pie-legal{
  border-top:1px solid rgba(255,255,255,.12);margin-top:var(--e-8);
  padding-block:var(--e-5);font-size:var(--t-sm);
  display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);justify-content:space-between;
}

/* Créditos de autoría del sitio */
.pie-creditos{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--e-2) var(--e-3);text-align:center;
  border-top:1px solid rgba(255,255,255,.10);
  padding-block:var(--e-5);font-size:.82rem;
  color:var(--texto-inv-suave);letter-spacing:.01em;
}
.pie-creditos span[aria-hidden]{opacity:.35}
.pie-creditos a{color:var(--texto-inv);font-weight:600;
  border-bottom:1px solid rgba(245,166,35,.45);padding-bottom:1px}
.pie-creditos a:hover{color:var(--acento);border-bottom-color:var(--acento)}
/* ---------- 20. BARRA MÓVIL ---------- */
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--borde);box-shadow:0 -4px 20px rgba(11,35,64,.14);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra-movil a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--e-2);
  padding:var(--e-4) var(--e-2);font-family:var(--fuente-t);font-weight:700;
  font-size:.94rem;text-decoration:none;color:var(--primario);
}
.barra-movil a+a{border-left:1px solid var(--borde);color:var(--exito)}
.barra-movil a:active{background:var(--fondo-alt)}


/* ---------- 22. BOTONES FLOTANTES DE CONTACTO ---------- */
/* Llamada abajo a la izquierda, WhatsApp abajo a la derecha, en las 58 paginas.
   El contenedor no intercepta clics: solo los botones son interactivos. */
.flotantes{
  position:fixed;left:0;right:0;bottom:0;z-index:130;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 clamp(14px,3vw,28px) calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom));
}
.flotante{
  pointer-events:auto;position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-3);
  height:58px;min-width:58px;padding:0 var(--e-3);border-radius:var(--r-full);
  color:#fff;text-decoration:none;font-family:var(--fuente-t);font-weight:700;
  font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:0 6px 15px rgba(11,35,64,.20),0 16px 38px rgba(11,35,64,.22);
  transition:transform var(--mov),box-shadow var(--mov),filter var(--mov);
  animation:flotanteEntra .55s cubic-bezier(.2,.85,.3,1) both;
}
.flotante--tel{background:linear-gradient(135deg,#1C6899 0%,var(--primario) 52%,var(--primario-osc) 100%);animation-delay:.35s}
.flotante--wa{background:linear-gradient(135deg,#1A8355 0%,var(--exito) 45%,var(--exito-osc) 100%);animation-delay:.5s}

.flotante-icono{display:grid;place-items:center;width:24px;height:24px;flex-shrink:0}
.flotante-icono svg{width:100%;height:100%;fill:currentColor;display:block}
.flotante-txt{display:none}

/* Halo que late: queda por detras y no altera el area de clic */
.flotante::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:inherit;opacity:.55;
  animation:flotantePulso 3.2s ease-out infinite;
}
.flotante--wa::before{animation-delay:1.6s}

.flotante:hover{
  transform:translateY(-4px) scale(1.03);filter:brightness(1.07);
  box-shadow:0 10px 22px rgba(11,35,64,.24),0 22px 50px rgba(11,35,64,.28);
}
.flotante:active{transform:translateY(-1px) scale(.98)}
.flotante:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

@keyframes flotanteEntra{
  from{opacity:0;transform:translateY(26px) scale(.86)}
  to{opacity:1;transform:none}
}
@keyframes flotantePulso{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

/* Desde tablet los botones muestran su etiqueta */
@media (min-width:700px){
  .flotante{padding:0 var(--e-5);gap:var(--e-3)}
  .flotante-txt{display:inline}
}

/* Aire para que no tapen el pie legal ni la ultima linea de contenido */
body{padding-bottom:calc(58px + clamp(28px,6vw,48px))}

/* ---------- 21. APARICIÓN AL DESPLAZAR ---------- */
.revelar{opacity:0;transform:translateY(22px);
  transition:opacity var(--mov-lento),transform var(--mov-lento)}
.revelar.visible{opacity:1;transform:none}
.revelar.d1{transition-delay:.07s}
.revelar.d2{transition-delay:.14s}
.revelar.d3{transition-delay:.21s}

/* ============================================================================
   PUNTOS DE QUIEBRE
   ============================================================================ */
/* El menú pasa a hamburguesa a 1099px, no a 960: entre 960 y 1100 los cinco
   enlaces + el CTA + el teléfono se amontonaban contra el logo. */
@media (max-width:1099px){
  .nav{
    position:fixed;inset:0;background:rgba(255,255,255,.99);
    flex-direction:column;justify-content:center;gap:var(--e-2);
    transform:translateX(100%);transition:transform var(--mov-lento);z-index:150;
  }
  .nav[data-abierto="true"]{transform:none}
  .nav a{font-size:1.2rem;padding:var(--e-4) var(--e-6)}
  .nav a::after{display:none}
  .nav .btn{margin-top:var(--e-4)}
  .nav-toggle{display:block;position:relative;z-index:160}
  .nav-contacto{
    display:flex;flex-direction:column;align-items:center;gap:var(--e-2);
    margin-top:var(--e-7);padding-top:var(--e-5);width:min(320px,80%);
    border-top:1px solid var(--borde);font-size:var(--t-sm);color:var(--texto-suave);
  }
  .nav-contacto a{font-size:1rem;padding:var(--e-2)}
  .barra-superior .contenedor{justify-content:space-between}
}

@media (min-width:600px){
  .rejilla--2,.rejilla--3{grid-template-columns:repeat(2,1fr)}
  .rejilla--4{grid-template-columns:repeat(2,1fr)}
  .campos--2{grid-template-columns:1fr 1fr}
  .pie-grid{grid-template-columns:repeat(2,1fr)}
  .barra-superior .oculta-movil{display:inline}
}

@media (min-width:961px){
  .rejilla--3{grid-template-columns:repeat(3,1fr)}
  .rejilla--4{grid-template-columns:repeat(4,1fr)}
  .hero-duo{grid-template-columns:1.08fr .92fr;gap:var(--e-8)}
  .duo{grid-template-columns:1fr 1fr;gap:var(--e-8)}
  .duo--desigual{grid-template-columns:1.15fr .85fr}
  .pie-grid{grid-template-columns:1.25fr 1.7fr .85fr 1.1fr}
  .pie-servicios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-franja{padding:var(--e-9) var(--e-8)}
}

/* El bloque de teléfono de la cabecera solo aparece cuando hay sitio real:
   con menos de 1280px competía con el menú y el CTA. */
@media (min-width:1280px){
  .nav a{font-size:.94rem;padding:var(--e-2) var(--e-3)}
}

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

@media print{
  .cabecera,.barra-superior,.barra-movil,.flotantes,.nav,.aviso,.formulario{display:none}
  body{padding:0;font-size:11pt}
  .seccion{padding-block:var(--e-5)}
}