/* =====================================================================
   MURALLA LEGAL · Hoja de estilo del sitio público
   Estructura:  1 Variables · 2 Base · 3 Encabezado · 4 Portada
                5 Componentes · 6 Secciones · 7 Formularios · 8 Pie
                9 Animaciones · 10 Adaptación a pantallas pequeñas
   ===================================================================== */

/* ------------------------------------------------------ 1 · VARIABLES */
:root{
  --tinta:#0C1826;
  --tinta-2:#132840;
  --azul:#1E5A98;
  --azul-c:#4A8FCB;
  --azul-t:#EAF2FA;
  --oro:#C4A053;
  --oro-claro:#E3CB8C;
  --crema:#F7F5F0;
  --papel:#FFFFFF;
  --gris:#6C7683;
  --gris-c:#98A0AB;
  --linea:#E5E2DB;
  --linea-o:rgba(196,160,83,.35);

  --serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ancho:1180px;
  --r:14px;
  --r-g:22px;
  --sombra:0 1px 2px rgba(12,24,38,.04),0 8px 24px rgba(12,24,38,.06);
  --sombra-f:0 2px 4px rgba(12,24,38,.05),0 24px 60px rgba(12,24,38,.13);
  --curva:cubic-bezier(.22,.68,.28,1);
  --cabeza:78px;
}

/* ----------------------------------------------------------- 2 · BASE */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--cabeza) + 16px);-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.72;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.35rem,5.4vw,4.05rem);line-height:1.06;letter-spacing:-.035em}
h2{font-size:clamp(1.85rem,3.5vw,2.85rem);letter-spacing:-.028em}
h3{font-size:clamp(1.18rem,1.8vw,1.42rem);letter-spacing:-.02em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

::selection{background:var(--oro);color:#fff}

:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:6px}

.env{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.env-a{max-width:1360px}
.env-n{max-width:880px}

.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

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

/* ------------------------------------------------------ 3 · ENCABEZADO */
.barra-progreso{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--azul),var(--oro));transition:width .1s linear}

.cabeza{
  position:fixed;top:0;left:0;right:0;z-index:110;
  height:var(--cabeza);
  display:flex;align-items:center;
  transition:height .38s var(--curva),background .38s ease,box-shadow .38s ease,
             border-color .38s ease,backdrop-filter .38s ease;
  border-bottom:1px solid transparent;
}
.cabeza.claro{color:#fff}
.cabeza.fija{
  height:66px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--linea);
  box-shadow:0 6px 24px rgba(12,24,38,.06);
  color:var(--tinta);
}
.cabeza .env{display:flex;align-items:center;gap:26px;width:100%;max-width:1360px}

.marca-sitio{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.marca-sitio img{height:34px;width:auto;transition:height .38s var(--curva),opacity .3s ease}
.cabeza.fija .marca-sitio img{height:28px}
.marca-sitio .m-blanco{display:none}
.cabeza.claro:not(.fija) .marca-sitio .m-color{display:none}
.cabeza.claro:not(.fija) .marca-sitio .m-blanco{display:block}
.marca-sitio .ms-texto{font-family:var(--serif);font-weight:600;font-size:19px;
  letter-spacing:-.015em;color:currentColor;white-space:nowrap;transition:font-size .38s var(--curva)}
.cabeza.fija .marca-sitio .ms-texto{font-size:17px}
.marca-txt{display:flex;flex-direction:column;line-height:1.15}
.marca-txt b{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.02em}
.marca-txt span{font-size:10.5px;text-transform:uppercase;letter-spacing:.19em;opacity:.62;font-weight:500}

.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{
  position:relative;padding:9px 14px;font-size:14.5px;font-weight:500;border-radius:9px;
  transition:color .22s ease,background .22s ease;
}
.menu a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;
  background:var(--oro);transform:scaleX(0);transform-origin:right;
  transition:transform .34s var(--curva);
}
.menu a:hover::after,.menu a.activo::after{transform:scaleX(1);transform-origin:left}
.menu a.activo{color:var(--oro)}

.acciones-cabeza{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.hamburguesa{
  display:none;width:44px;height:44px;border:1px solid currentColor;border-radius:11px;
  background:transparent;color:inherit;cursor:pointer;position:relative;opacity:.55;
  transition:opacity .2s ease;
}
.hamburguesa:hover{opacity:1}
.hamburguesa i{
  position:absolute;left:12px;right:12px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .34s var(--curva),opacity .2s ease;
}
.hamburguesa i:nth-child(1){top:15px}
.hamburguesa i:nth-child(2){top:21px}
.hamburguesa i:nth-child(3){top:27px}
.abierto .hamburguesa i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.abierto .hamburguesa i:nth-child(2){opacity:0}
.abierto .hamburguesa i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Menú desplegable móvil */
.menu-movil{
  position:fixed;inset:0;z-index:105;background:var(--tinta);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:100px 30px 40px;
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s ease;
}
.abierto .menu-movil{opacity:1;visibility:visible}
.menu-movil a{
  font-family:var(--serif);font-size:clamp(1.6rem,7vw,2.2rem);padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  opacity:0;transform:translateY(16px);
}
.abierto .menu-movil a{animation:entraMenu .5s var(--curva) forwards}
.abierto .menu-movil a:nth-child(1){animation-delay:.06s}
.abierto .menu-movil a:nth-child(2){animation-delay:.11s}
.abierto .menu-movil a:nth-child(3){animation-delay:.16s}
.abierto .menu-movil a:nth-child(4){animation-delay:.21s}
.abierto .menu-movil a:nth-child(5){animation-delay:.26s}
.abierto .menu-movil a:nth-child(6){animation-delay:.31s}
.abierto .menu-movil a:nth-child(7){animation-delay:.36s}
.abierto .menu-movil a:nth-child(8){animation-delay:.41s}
@keyframes entraMenu{to{opacity:1;transform:none}}
.menu-movil .bot{margin-top:28px;align-self:flex-start}

/* --------------------------------------------------------- 4 · PORTADA */
.portada{
  position:relative;min-height:min(100svh,880px);
  display:flex;align-items:center;
  padding:calc(var(--cabeza) + 60px) 0 90px;
  /* Mismo azul del portal de Gestión Humana: de la tinta profunda al azul
     de la marca, en diagonal. Al ser una franja mucho más ancha que el panel
     del portal, la parte honda ocupa más recorrido para que arriba conserve
     la profundidad y el menú siga leyéndose. */
  background:linear-gradient(146deg,#08203A 0%,#0B2440 24%,#154572 66%,#1E5A98 100%);
  color:#fff;overflow:hidden;isolation:isolate;
}
/* Viñeta que oscurece los bordes y sostiene la lectura del texto. */
.portada::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,20,36,.55) 0%,rgba(6,20,36,0) 26%),
    radial-gradient(ellipse 92% 74% at 50% 50%,transparent 34%,rgba(6,20,36,.58) 100%);
}
.portada-int{min-height:auto;padding:calc(var(--cabeza) + 78px) 0 74px}

/* Malla de color animada */
/* Auroras: mismas tintas y misma difuminación que el login del portal. */
.mancha{position:absolute;border-radius:50%;filter:blur(72px);opacity:.55;z-index:-2;
  will-change:transform;pointer-events:none}
.mancha.m1{width:640px;height:640px;top:-190px;left:-140px;
  background:radial-gradient(circle,#3C86D8 0%,rgba(60,134,216,0) 70%);
  animation:deriva1 26s ease-in-out infinite}
.mancha.m2{width:560px;height:560px;bottom:-200px;right:-100px;
  background:radial-gradient(circle,#F68B0B 0%,rgba(246,139,11,0) 70%);opacity:.42;
  animation:deriva2 32s ease-in-out infinite}
.mancha.m3{width:480px;height:480px;top:32%;right:22%;
  background:radial-gradient(circle,#C69638 0%,rgba(198,150,56,0) 70%);opacity:.38;
  animation:deriva3 38s ease-in-out infinite}
@keyframes deriva1{0%,100%{transform:translate3d(0,0,0) scale(1)}
                   50%{transform:translate3d(90px,60px,0) scale(1.12)}}
@keyframes deriva2{0%,100%{transform:translate3d(0,0,0) scale(1)}
                   50%{transform:translate3d(-80px,-50px,0) scale(1.16)}}
@keyframes deriva3{0%,100%{transform:translate3d(0,0,0) scale(1)}
                   33%{transform:translate3d(-60px,40px,0) scale(1.1)}
                   66%{transform:translate3d(50px,-30px,0) scale(.94)}}

/* Retícula fina y grano */
/* Cuadrícula fina, con el mismo paso y la misma presencia del portal. */
.reticula{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 84% 68% at 34% 42%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 84% 68% at 34% 42%,#000 20%,transparent 78%)}
.grano{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}

.portada-rejilla{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:64px;align-items:center;width:100%;max-width:1360px}

.antetitulo{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  color:var(--oro-claro);margin-bottom:22px;
}
.antetitulo::before{content:"";width:34px;height:1px;background:var(--oro);display:block;
  transform-origin:left;animation:trazo 1s var(--curva) .2s both}
@keyframes trazo{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.portada h1{color:#fff;max-width:14ch}
.portada h1 .res{
  position:relative;color:var(--oro-claro);font-style:italic;white-space:nowrap;
}
.portada h1 .res::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.075em;border-radius:2px;
  background:linear-gradient(90deg,var(--oro),rgba(196,160,83,.15));
  transform:scaleX(0);transform-origin:left;
  animation:trazo 1.1s var(--curva) .9s forwards;
}
.portada-texto{font-size:clamp(1.02rem,1.35vw,1.16rem);color:rgba(255,255,255,.78);
  max-width:52ch;margin-top:24px}

.portada-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

.confianza{display:flex;flex-wrap:wrap;gap:22px 30px;margin-top:44px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.confianza div{display:flex;align-items:center;gap:9px;font-size:13.5px;color:rgba(255,255,255,.68)}
.confianza svg{width:17px;height:17px;color:var(--oro);flex:0 0 auto}

/* Tarjeta lateral de la portada */
.tarjeta-portada{
  position:relative;border-radius:var(--r-g);padding:34px 32px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}
.tarjeta-portada::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(196,160,83,.55),transparent 42%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
/* Sobre el azul del banner, los campos necesitan algo más de presencia. */
.tarjeta-portada ::placeholder{color:rgba(255,255,255,.66);opacity:1}
.tarjeta-portada input:focus,.tarjeta-portada select:focus{
  background:rgba(255,255,255,.18) !important;
  border-color:rgba(255,255,255,.52) !important;
  box-shadow:0 0 0 3px rgba(196,160,83,.22);
}
.tarjeta-portada h3{color:#fff;font-size:1.28rem;margin-bottom:6px}
.tarjeta-portada .pie-nota{font-size:12.5px;color:rgba(255,255,255,.52);margin-top:16px;line-height:1.55}

/* Cifras */
.cifras{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-g);
  overflow:hidden;margin-top:-58px;position:relative;z-index:5;box-shadow:var(--sombra-f)}
.cifras div{background:var(--papel);padding:30px 22px;text-align:center}
.cifras b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.2vw,2.7rem);
  font-weight:600;color:var(--azul);letter-spacing:-.03em;line-height:1}
.cifras span{display:block;margin-top:8px;font-size:12.5px;color:var(--gris);
  text-transform:uppercase;letter-spacing:.11em;font-weight:500}

/* ---------------------------------------------------- 5 · COMPONENTES */
.bot{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:11px;border:1px solid transparent;
  font-size:14.5px;font-weight:600;letter-spacing:.005em;cursor:pointer;
  transition:transform .26s var(--curva),box-shadow .26s ease,background .26s ease,
             color .26s ease,border-color .26s ease;
  position:relative;overflow:hidden;
}
.bot svg{width:17px;height:17px}
.bot:hover{transform:translateY(-2px)}
.bot:active{transform:translateY(0)}

.bot-oro{background:var(--oro);color:#1b1405;box-shadow:0 10px 26px rgba(196,160,83,.34)}
.bot-oro:hover{background:var(--oro-claro);box-shadow:0 16px 34px rgba(196,160,83,.42)}

.bot-tinta{background:var(--tinta);color:#fff;box-shadow:0 10px 26px rgba(12,24,38,.22)}
.bot-tinta:hover{background:var(--tinta-2);box-shadow:0 16px 34px rgba(12,24,38,.28)}

.bot-linea{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.04)}
.bot-linea:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.5)}

.bot-borde{border-color:var(--linea);color:var(--tinta);background:var(--papel)}
.bot-borde:hover{border-color:var(--oro);color:var(--azul);box-shadow:var(--sombra)}

.bot-peq{padding:10px 18px;font-size:13.5px}

/* Brillo que recorre el botón */
.bot-oro::after,.bot-tinta::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
}
.bot-oro:hover::after,.bot-tinta:hover::after{animation:brillo .95s var(--curva)}
@keyframes brillo{to{left:150%}}

/* Enlace con flecha */
.enlace-f{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;
  color:var(--azul);transition:gap .26s var(--curva),color .2s ease}
.enlace-f svg{width:16px;height:16px;transition:transform .3s var(--curva)}
.enlace-f:hover{gap:12px;color:var(--oro)}
.enlace-f:hover svg{transform:translateX(2px)}

/* Encabezado de sección */
.encab{max-width:660px;margin-bottom:52px}
.encab.centro{margin-left:auto;margin-right:auto;text-align:center}
.etiq{
  display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--oro);margin-bottom:16px;
}
.etiq::before{content:"";width:26px;height:1px;background:currentColor}
.encab.centro .etiq::after{content:"";width:26px;height:1px;background:currentColor}
.encab p{color:var(--gris);font-size:1.04rem;margin-top:16px}

/* Tarjetas */
.rejilla{display:grid;gap:22px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}

.tarjeta{
  position:relative;background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--r-g);padding:32px 30px;overflow:hidden;
  transition:transform .42s var(--curva),box-shadow .42s ease,border-color .42s ease;
}
.tarjeta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--azul),var(--oro));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--curva);
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:var(--sombra-f);border-color:transparent}
.tarjeta:hover::before{transform:scaleX(1)}

.icono{
  width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,var(--azul-t),#fff);border:1px solid var(--linea);
  color:var(--azul);transition:transform .42s var(--curva),background .42s ease,color .42s ease;
}
.icono svg{width:26px;height:26px;stroke-width:1.5}
.tarjeta:hover .icono{transform:scale(1.07) rotate(-4deg);
  background:linear-gradient(140deg,var(--tinta),var(--tinta-2));color:var(--oro-claro)}

.tarjeta h3{margin-bottom:10px}
.tarjeta p{color:var(--gris);font-size:15px;margin-bottom:18px}
.tarjeta .enlace-f{font-size:14px}

.lista-check{list-style:none;padding:0;margin:0 0 20px}
.lista-check li{position:relative;padding-left:26px;font-size:14.6px;color:var(--gris);
  margin-bottom:9px;line-height:1.55}
.lista-check li::before{
  content:"";position:absolute;left:0;top:.55em;width:13px;height:7px;
  border-left:1.8px solid var(--oro);border-bottom:1.8px solid var(--oro);
  transform:rotate(-45deg)}

/* Cinta deslizante */
.cinta{overflow:hidden;padding:20px 0;border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);background:var(--crema);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta-pista{display:flex;gap:0;width:max-content;animation:corre 42s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta span{display:inline-flex;align-items:center;font-family:var(--serif);font-size:1.35rem;
  color:var(--tinta);opacity:.5;padding:0 30px;white-space:nowrap}
.cinta span::after{content:"◆";font-size:.5em;color:var(--oro);margin-left:30px;opacity:.9}
@keyframes corre{to{transform:translateX(-50%)}}

/* Área destacada */
.destacada{position:relative;display:grid;grid-template-columns:1.35fr 1fr;
  border-radius:calc(var(--r-g) + 6px);overflow:hidden;
  background:linear-gradient(150deg,var(--tinta) 0%,var(--tinta-2) 58%,#1a3350 100%);
  box-shadow:0 30px 80px rgba(12,24,38,.24);transition:transform .1s linear}
.destacada-cont{position:relative;z-index:2;padding:60px 56px}
.destacada-cont h2{color:#fff;font-size:clamp(1.6rem,2.5vw,2.15rem);max-width:17ch;margin-bottom:18px}
.destacada-texto{color:rgba(255,255,255,.8);font-size:1.02rem;max-width:54ch;margin:0}
.destacada-desc{color:rgba(255,255,255,.58);font-size:14.7px;line-height:1.75;margin-top:16px;max-width:56ch}
.destacada-desc p{margin:0}
.destacada-lista{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px}
.destacada-lista li{display:flex;align-items:center;gap:10px;font-size:14.4px;color:rgba(255,255,255,.86)}
.destacada-lista svg{color:var(--oro);flex:0 0 auto}
.destacada-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.destacada-panel{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;padding:40px 34px;text-align:center;
  background:rgba(255,255,255,.045);border-left:1px solid rgba(255,255,255,.1)}
.destacada-anillo{position:absolute;width:220px;height:220px;border-radius:50%;
  border:1px solid rgba(196,160,83,.3);animation:respirarAro 6s ease-in-out infinite}
.destacada-anillo::before{content:"";position:absolute;inset:22px;border-radius:50%;
  border:1px solid rgba(196,160,83,.16)}
@keyframes respirarAro{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.08);opacity:1}}
.destacada-icono{position:relative;width:88px;height:88px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(196,160,83,.28),rgba(255,255,255,.06));
  border:1px solid rgba(196,160,83,.4);color:var(--oro-claro);
  box-shadow:0 18px 40px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.16)}
.destacada-icono svg{width:42px;height:42px;stroke-width:1.4}
.destacada-marco{position:relative;font-size:12.5px;line-height:1.62;color:rgba(255,255,255,.58);max-width:23ch}
.destacada-marco b{display:block;font-family:var(--sans);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.17em;color:var(--oro-claro);margin-bottom:8px;font-weight:600}

/* Protección patrimonial / confianza */
.confianza-banda{position:relative;overflow:hidden;border-radius:var(--r-g);isolation:isolate;
  background:linear-gradient(155deg,var(--tinta) 0%,#173154 100%);color:#fff;padding-top:64px}
.confianza-cont{position:relative;z-index:2;max-width:640px;margin:0 auto;text-align:center;padding:0 40px}
.confianza-cont h2{color:#fff;margin:14px 0 16px}
.confianza-cont p{color:rgba(255,255,255,.72);font-size:1rem;margin:0}
.confianza-cinta{position:relative;z-index:2;overflow:hidden;margin-top:48px;padding:22px 0;
  border-top:1px solid rgba(255,255,255,.12);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.confianza-cinta .cinta-pista{animation-duration:34s}
.confianza-cinta:hover .cinta-pista{animation-play-state:paused}
.confianza-cinta span{display:inline-flex;align-items:center;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.6);padding:0 26px;white-space:nowrap}
.confianza-cinta span::after{content:"◆";font-size:.55em;color:var(--oro);opacity:.85;margin-left:26px}

/* Acordeón */
.acordeon{border-top:1px solid var(--linea)}
.acordeon details{border-bottom:1px solid var(--linea)}
.acordeon summary{
  list-style:none;cursor:pointer;padding:22px 52px 22px 0;position:relative;
  font-family:var(--serif);font-size:1.13rem;font-weight:600;letter-spacing:-.015em;
  transition:color .24s ease;
}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:hover{color:var(--azul)}
.acordeon summary::after,.acordeon summary::before{
  content:"";position:absolute;right:14px;top:50%;background:var(--oro);border-radius:2px;
  transition:transform .34s var(--curva),opacity .24s ease}
.acordeon summary::before{width:15px;height:1.8px;transform:translateY(-50%)}
.acordeon summary::after{width:1.8px;height:15px;right:20.6px;transform:translateY(-50%)}
.acordeon details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.acordeon details[open] summary{color:var(--azul)}
.acordeon .cuerpo{overflow:hidden}
.acordeon .cuerpo>div{padding:0 52px 24px 0;color:var(--gris);font-size:15.4px}

/* Equipo */
.persona{position:relative;border-radius:var(--r-g);overflow:hidden;background:var(--crema);
  border:1px solid var(--linea);transition:transform .42s var(--curva),box-shadow .42s ease}
.persona:hover{transform:translateY(-6px);box-shadow:var(--sombra-f)}
.persona .foto{aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--tinta),var(--azul));
  display:grid;place-items:center}
.persona .foto img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) contrast(1.04);transition:transform .8s var(--curva),filter .5s ease}
.persona:hover .foto img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.persona .ini{font-family:var(--serif);font-size:3.4rem;color:rgba(255,255,255,.28);letter-spacing:.02em}
.persona .datos{padding:22px 22px 24px;background:var(--papel)}
.persona h3{font-size:1.16rem;margin-bottom:3px}
.persona .cargo{font-size:13px;color:var(--oro);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em}
.persona .tp{font-size:12.5px;color:var(--gris-c);margin-top:8px}

/* Artículos */
.nota-blog{display:flex;flex-direction:column;height:100%;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--r-g);overflow:hidden;
  transition:transform .42s var(--curva),box-shadow .42s ease}
.nota-blog:hover{transform:translateY(-6px);box-shadow:var(--sombra-f)}
.nota-blog .img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(140deg,var(--tinta),var(--azul));
  position:relative;display:grid;place-items:center}
.nota-blog .img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--curva)}
.nota-blog:hover .img img{transform:scale(1.06)}
.nota-blog .img .marca-agua{font-family:var(--serif);font-size:2.6rem;color:rgba(255,255,255,.2)}
.nota-blog .txt{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.nota-blog .meta{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--oro);
  font-weight:600;margin-bottom:12px}
.nota-blog h3{font-size:1.18rem;margin-bottom:10px}
.nota-blog p{color:var(--gris);font-size:14.8px;flex:1;margin-bottom:16px}

/* Casos */
.caso{position:relative;padding:32px 30px;border-radius:var(--r-g);
  background:linear-gradient(160deg,var(--tinta),var(--tinta-2));color:#fff;overflow:hidden;
  transition:transform .42s var(--curva),box-shadow .42s ease}
.caso::after{content:"";position:absolute;width:220px;height:220px;right:-80px;top:-80px;border-radius:50%;
  background:radial-gradient(circle,rgba(196,160,83,.34),transparent 70%);
  transition:transform .6s var(--curva)}
.caso:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(12,24,38,.28)}
.caso:hover::after{transform:scale(1.35)}
.caso .area-c{font-size:11.5px;text-transform:uppercase;letter-spacing:.17em;color:var(--oro-claro);
  font-weight:600;margin-bottom:12px;display:block;position:relative}
.caso h3{color:#fff;margin-bottom:12px;position:relative}
.caso p{color:rgba(255,255,255,.72);font-size:15px;position:relative}
.caso .resultado{display:inline-flex;align-items:center;gap:9px;margin-top:18px;padding:9px 16px;
  border-radius:999px;background:rgba(196,160,83,.16);border:1px solid rgba(196,160,83,.34);
  font-size:13.5px;font-weight:600;color:var(--oro-claro);position:relative}

/* Franja destacada */
.franja{position:relative;background:var(--tinta);color:#fff;overflow:hidden;isolation:isolate;
  border-radius:var(--r-g)}
.franja .env{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.franja h2{color:#fff}
.franja p{color:rgba(255,255,255,.74);max-width:56ch}

/* Cita destacada */
.cita{position:relative;padding:40px 44px;background:var(--crema);border-radius:var(--r-g);
  border-left:3px solid var(--oro)}
.cita::before{content:"“";position:absolute;top:-6px;left:22px;font-family:var(--serif);
  font-size:6rem;color:var(--oro);opacity:.22;line-height:1}
.cita p{font-family:var(--serif);font-size:1.32rem;line-height:1.55;font-style:italic;
  letter-spacing:-.015em;position:relative}

/* Migas */
.migas{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:18px}
.migas a:hover{color:var(--oro-claro)}
.migas span{opacity:.45;margin:0 8px}

/* Secciones */
.seccion{padding:96px 0}
.seccion-c{padding:96px 0;background:var(--crema)}
.seccion-p{padding:70px 0}

/* Separador ornamental */
.orna{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--oro);
  padding:8px 0}
.orna::before,.orna::after{content:"";height:1px;width:70px;background:currentColor;opacity:.4}
.orna i{font-style:normal;font-size:10px}

/* ------------------------------------------------------ 7 · FORMULARIOS */
.formulario{display:grid;gap:16px}
.campo{position:relative}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--tinta)}
.campo .req{color:#c0392b}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border:1px solid var(--linea);border-radius:11px;
  font:inherit;font-size:15px;background:var(--papel);color:var(--tinta);
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.campo textarea{min-height:130px;resize:vertical;line-height:1.6}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236C7683' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(30,90,152,.14)}
.campo .ayuda{font-size:12.5px;color:var(--gris-c);margin-top:6px}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fila-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

.acepta{display:flex;gap:11px;align-items:flex-start;font-size:13.4px;color:var(--gris);
  line-height:1.55}
.acepta input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--azul)}
.acepta a{color:var(--azul);text-decoration:underline;text-underline-offset:2px}

.aviso{padding:14px 17px;border-radius:12px;font-size:14.4px;display:flex;gap:11px;
  align-items:flex-start;line-height:1.55}
.aviso svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px}
.aviso-ok{background:#eaf6ee;border:1px solid #c6e4d1;color:#1d5c34}
.aviso-error{background:#fdecec;border:1px solid #f3c9c9;color:#8c2020}
.aviso-info{background:var(--azul-t);border:1px solid #c9dcef;color:#1a4c7f}

/* Panel de contacto */
.contacto-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;
  align-items:start}
.datos-contacto{list-style:none;padding:0;margin:26px 0 0}
.datos-contacto li{display:flex;gap:15px;padding:15px 0;border-bottom:1px solid var(--linea)}
.datos-contacto li:last-child{border-bottom:0}
.datos-contacto .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--azul-t);color:var(--azul);flex:0 0 auto}
.datos-contacto svg{width:18px;height:18px}
.datos-contacto b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--gris-c);font-weight:600;margin-bottom:2px}
.datos-contacto span{font-size:15px}
.datos-contacto a:hover{color:var(--azul)}

.caja-form{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-g);
  padding:34px 32px;box-shadow:var(--sombra)}

/* Pestañas */
.pestanas{display:flex;gap:6px;background:var(--crema);padding:6px;border-radius:13px;
  margin-bottom:26px;border:1px solid var(--linea)}
.pestanas button{flex:1;padding:11px 16px;border:0;border-radius:9px;background:transparent;
  font-size:14px;font-weight:600;color:var(--gris);cursor:pointer;
  transition:background .26s ease,color .26s ease,box-shadow .26s ease}
.pestanas button.activa{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}

/* ---------------------------------------------------------- 8 · PIE */
.pie{background:var(--tinta);color:rgba(255,255,255,.62);padding:72px 0 0;
  position:relative;overflow:hidden}
.pie::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--oro),transparent);opacity:.6}
.pie-rejilla{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;
  padding-bottom:52px}
.pie h4{color:#fff;font-family:var(--sans);font-size:12px;text-transform:uppercase;
  letter-spacing:.18em;font-weight:600;margin-bottom:20px}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:11px;font-size:14.5px}
.pie a{transition:color .22s ease,padding-left .26s var(--curva)}
.pie a:hover{color:var(--oro-claro)}
.pie .enlaces a:hover{padding-left:6px}
.pie-marca{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.pie-marca img{height:32px;width:auto;display:block}
.pie-marca span{font-family:var(--serif);font-weight:600;font-size:20px;
  letter-spacing:-.01em;color:#fff;white-space:nowrap}
.pie-logo p{font-size:14.5px;max-width:34ch;line-height:1.7}
.redes{display:flex;gap:10px;margin-top:22px}
.redes a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);
  transition:background .26s ease,color .26s ease,transform .26s var(--curva),border-color .26s ease}
.redes a:hover{background:var(--oro);border-color:var(--oro);color:#1b1405;transform:translateY(-3px)}
.redes svg{width:18px;height:18px}
.pie-abajo{border-top:1px solid rgba(255,255,255,.1);padding:22px 0 28px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:13px}
.pie-abajo nav{display:flex;flex-wrap:wrap;gap:20px}
.pie-nota-legal{font-size:12.4px;line-height:1.65;color:rgba(255,255,255,.42);
  padding-bottom:26px;max-width:92ch}
.enlace-portal{font-size:12.6px;color:rgba(255,255,255,.38);display:inline-flex;align-items:center;gap:7px}
.enlace-portal:hover{color:var(--oro-claro)}
.enlace-portal svg{width:13px;height:13px}

/* Botones flotantes */
.flotante{position:fixed;right:20px;z-index:95;display:grid;place-items:center;
  border-radius:50%;box-shadow:0 10px 30px rgba(12,24,38,.24);
  transition:transform .3s var(--curva),opacity .3s ease,visibility .3s ease}
.wsp{bottom:20px;width:58px;height:58px;background:#25D366;color:#fff}
.wsp svg{width:29px;height:29px}
.wsp::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.wsp:hover{transform:scale(1.07)}
.arriba{bottom:90px;width:46px;height:46px;background:var(--papel);color:var(--tinta);
  border:1px solid var(--linea);opacity:0;visibility:hidden}
.arriba.ver{opacity:1;visibility:visible}
.arriba:hover{transform:translateY(-3px);color:var(--azul)}
.arriba svg{width:19px;height:19px}
.wsp .globo{position:absolute;right:70px;white-space:nowrap;background:var(--papel);
  color:var(--tinta);font-size:13px;font-weight:600;padding:9px 15px;border-radius:11px;
  box-shadow:var(--sombra-f);opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .28s ease,transform .28s var(--curva)}
.wsp:hover .globo{opacity:1;transform:none}

/* -------------------------------------------------- 9 · ANIMACIONES */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity .78s var(--curva),transform .78s var(--curva)}
.rev.ver{opacity:1;transform:none}
.rev-izq{transform:translateX(-30px)}
.rev-der{transform:translateX(30px)}
.rev-esc{transform:scale(.955)}
.rev-izq.ver,.rev-der.ver,.rev-esc.ver{transform:none}
[data-retraso="1"]{transition-delay:.08s}
[data-retraso="2"]{transition-delay:.16s}
[data-retraso="3"]{transition-delay:.24s}
[data-retraso="4"]{transition-delay:.32s}
[data-retraso="5"]{transition-delay:.40s}
[data-retraso="6"]{transition-delay:.48s}

/* Entrada de la portada */
.entra{opacity:0;transform:translateY(24px);animation:asciende .95s var(--curva) forwards}
.entra.d1{animation-delay:.10s}
.entra.d2{animation-delay:.22s}
.entra.d3{animation-delay:.34s}
.entra.d4{animation-delay:.46s}
.entra.d5{animation-delay:.58s}
@keyframes asciende{to{opacity:1;transform:none}}

/* Contenido de los artículos */
.articulo-cuerpo{font-size:17.2px;line-height:1.86;color:#243040}
.articulo-cuerpo p{margin-bottom:1.3em}
.articulo-cuerpo h2{font-size:1.6rem;margin:1.9em 0 .6em}
.articulo-cuerpo h3{font-size:1.28rem;margin:1.6em 0 .5em}
.articulo-cuerpo ul,.articulo-cuerpo ol{padding-left:22px;margin-bottom:1.3em}
.articulo-cuerpo li{margin-bottom:.5em}
.articulo-cuerpo strong{color:var(--tinta)}
.articulo-cuerpo blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:3px solid var(--oro);
  font-family:var(--serif);font-style:italic;font-size:1.16em;color:var(--tinta)}

/* Marcador pendiente de reemplazar (solo visible para el administrador) */
.pendiente{background:rgba(196,160,83,.14);border-bottom:1px dashed var(--oro);
  border-radius:3px;padding:0 3px}

/* ------------------------------------------- 10 · PANTALLAS PEQUEÑAS */
@media (max-width:1080px){
  .portada-rejilla{grid-template-columns:1fr;gap:44px}
  .tarjeta-portada{max-width:520px}
  .contacto-rejilla{grid-template-columns:1fr;gap:34px}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:36px}
  .r4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .destacada{grid-template-columns:1fr}
  .destacada-panel{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:34px 34px 44px}
  .destacada-anillo{width:180px;height:180px}
}

@media (max-width:900px){
  .menu{display:none}
  .hamburguesa{display:block;margin-left:auto}
  .acciones-cabeza .bot{display:none}
  .r3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifras{grid-template-columns:repeat(2,1fr);margin-top:-40px}
  .seccion,.seccion-c{padding:72px 0}
  .destacada-cont{padding:44px 32px}
}

@media (max-width:640px){
  :root{--cabeza:66px}
  body{font-size:16px}
  .env{padding:0 18px}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .fila-2,.fila-3{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr);border-radius:16px}
  .cifras div{padding:24px 14px}
  .portada{padding:calc(var(--cabeza) + 44px) 0 70px;min-height:auto}
  .portada h1{max-width:none}
  .tarjeta{padding:26px 22px}
  .caja-form{padding:26px 20px}
  .cita{padding:30px 26px}
  .seccion,.seccion-c{padding:60px 0}
  .pie-rejilla{grid-template-columns:1fr;gap:32px}
  .encab{margin-bottom:38px}
  .acordeon summary{font-size:1.04rem;padding-right:44px}
  .marca-txt span{display:none}
  .wsp{width:52px;height:52px}
  .wsp svg{width:26px;height:26px}
  .flotante{right:14px}
  .arriba{bottom:82px}
  .destacada-cont{padding:36px 22px}
  .destacada-cont h2{max-width:none}
  .destacada-panel{padding:30px 22px 38px}
  .confianza-cont{padding:0 22px}
  .confianza-cinta span{font-size:12px;padding:0 18px}
  .confianza-cinta span::after{margin-left:18px}
}

/* Respeto por quien prefiere menos movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rev{opacity:1;transform:none}
  .entra{opacity:1;transform:none}
  .mancha{animation:none}
}

/* Impresión */
@media print{
  .cabeza,.pie,.flotante,.barra-progreso,.menu-movil,.portada-botones{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .portada{background:#fff;color:#000;padding:0;min-height:auto}
  .portada h1{color:#000}
  .seccion,.seccion-c{padding:14px 0;background:#fff}
  .tarjeta,.caja-form{box-shadow:none;border:1px solid #ccc}
}