/* ============================================================
   594.ª · PORTADA — tarjetas «Potencia tu operación completa», títulos con textura, h1 del hero que se nota.
   Se carga solo en la portada (index.php) y DESPUÉS de sobrio587.css y tarjetas591.css: por eso gana con más
   especificidad (html.p594 …) y, donde 587 usa !important, también con !important.
   Las propiedades que 587 anula con «transform:none!important» se animan aquí con `translate`/`scale`
   (propiedades independientes), que esa regla no toca.
   Ver includes/portada594.php · _banco/594/INFORME.md
   ============================================================ */
html.p594{
  --p594-r:8px;
  --p594-papel:var(--panel,#fff);
  --p594-linea:var(--line,#e3e8f0);
  --p594-linea-on:rgba(56,189,248,.95);
  --p594-ico:#0b5cc8; --p594-ico-fondo:#e6f1ff; --p594-ico-borde:rgba(47,127,240,.45);
  --p594-dobla1:#d9e3f1; --p594-dobla2:#f4f7fc; --p594-dobla-sombra:rgba(11,40,99,.22);
  --p594-sombra0:rgba(11,40,99,.07);
  --p594-sombra1:rgba(14,58,122,.36);
  --p594-brillo:rgba(56,189,248,.48);
  --p594-reflejo:rgba(90,170,255,.30);
  --p594-d:22px; --p594-d-on:38px;
}
html.p594[data-theme="dark"]{
  --p594-dobla1:#2a3c57; --p594-dobla2:#3b5170; --p594-dobla-sombra:rgba(0,0,0,.55);
  --p594-sombra0:rgba(0,0,0,.25); --p594-sombra1:rgba(0,0,0,.55);
  --p594-brillo:rgba(96,176,255,.34); --p594-reflejo:rgba(170,215,255,.22);
  --p594-linea-on:rgba(110,200,255,.9);
  --p594-ico:#8cc4ff; --p594-ico-fondo:rgba(60,130,230,.18); --p594-ico-borde:rgba(120,185,255,.5);
}

/* ---------- 1 · TARJETAS ---------- */
html.p594 body .grid-feats > .feature-card.feat-fancy{
  text-align:center;
  background:transparent!important; border-color:transparent!important; box-shadow:none!important;
  border-radius:var(--p594-r)!important; overflow:visible; isolation:isolate;
  /* la sombra es un filtro: sigue la forma con la esquina cortada (box-shadow sería un rectángulo) */
  filter:drop-shadow(0 1px 2px var(--p594-sombra0)) drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent)!important; /* !important: 587 pone .reveal{filter:none!important} */
  transition:filter .45s cubic-bezier(.2,.7,.3,1),translate .45s cubic-bezier(.2,.7,.3,1),opacity .6s ease,scale .6s cubic-bezier(.2,.7,.3,1)!important;
}
/* .reveal de style.css desenfoca hasta entrar: mientras tanto, sin sombra (no pisa su blur) */
html.p594 body .grid-feats > .feature-card.feat-fancy.reveal:not(.in){filter:none!important}
/* el «papel»: fondo + borde con la esquina recortada */
html.p594 body .grid-feats > .feature-card.feat-fancy::before{
  content:""!important; display:block!important; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--p594-papel); border:1px solid var(--p594-linea); border-radius:inherit;
  clip-path:polygon(0 0,calc(100% - var(--p594-d)) 0,100% var(--p594-d),100% 100%,0 100%);
  transition:clip-path .45s cubic-bezier(.2,.7,.3,1),border-color .45s;
  opacity:1!important; animation:none!important; transform:none!important; -webkit-mask:none; mask:none; padding:0;
}
/* la solapa doblada: triángulo con degradado del revés del papel y sombra del pliegue */
html.p594 body .grid-feats > .feature-card.feat-fancy::after{
  content:""!important; display:block!important; position:absolute; top:0; right:0; left:auto; bottom:auto; inset-inline-start:auto;
  width:var(--p594-d); height:var(--p594-d); z-index:2; pointer-events:none;
  border:0!important; clip-path:none!important; animation:none!important;
  background:linear-gradient(45deg,var(--p594-dobla1) 0%,var(--p594-dobla2) 44%,var(--p594-papel) 48.6%,rgba(11,40,99,.28) 49.4%,transparent 50%);
  border-bottom-left-radius:4px;
  filter:drop-shadow(-2px 2px 2px var(--p594-dobla-sombra));
  transition:width .45s cubic-bezier(.2,.7,.3,1),height .45s cubic-bezier(.2,.7,.3,1),filter .45s;
}
/* el aro de antes (SVG) se va; su <span> pasa a ser el reflejo diagonal */
html.p594 body .grid-feats > .feature-card.feat-fancy .feat-corner-bg{
  display:block!important; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:1;
  border-radius:inherit; overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--p594-d)) 0,100% var(--p594-d),100% 100%,0 100%);
  background:linear-gradient(115deg,transparent 38%,var(--p594-reflejo) 50%,transparent 62%) no-repeat;
  background-size:260% 100%; background-position:130% 0;
  transition:clip-path .45s cubic-bezier(.2,.7,.3,1);
}
html.p594 body .grid-feats > .feature-card.feat-fancy .feat-corner-bg svg{display:none!important}
html.p594 body .grid-feats > .feature-card.feat-fancy .fc-ico-lg{margin:0 auto 18px!important}
html.p594 body .grid-feats > .feature-card.feat-fancy :is(h3,p){position:relative;z-index:1;text-align:center}

/* hover / foco: se levanta, la esquina se dobla más, sombra profunda + borde celeste suave, reflejo que cruza */
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within){
  --p594-d:var(--p594-d-on);
  translate:0 -5px; transform:none!important; box-shadow:none!important;
  filter:drop-shadow(0 16px 20px var(--p594-sombra1)) drop-shadow(0 0 1px var(--p594-linea-on)) drop-shadow(0 0 16px var(--p594-brillo))!important;
}
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within)::before{border-color:var(--p594-linea-on)}
/* icono con el color corporativo al pasar (en reposo sigue sobrio) */
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within) .fc-ico-lg{
  color:var(--p594-ico)!important; background:var(--p594-ico-fondo)!important; border-color:var(--p594-ico-borde)!important;
  filter:none!important; opacity:1!important; transition:color .3s,background-color .3s,filter .3s,opacity .3s}
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within) .fc-ico-lg svg{stroke:currentColor!important;color:var(--p594-ico)!important}
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within)::after{filter:drop-shadow(-4px 4px 4px var(--p594-dobla-sombra))}
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within) .feat-corner-bg{
  background-position:-30% 0; transition:background-position 1.1s cubic-bezier(.3,.6,.3,1),clip-path .45s cubic-bezier(.2,.7,.3,1)}
/* icono: saltito (translate, que 587 no anula) + trazo que se dibuja (lo prepara portada594.js) */
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within) .fc-ico-lg{animation:p594salto .7s cubic-bezier(.3,.7,.3,1.3)}
html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within) .fc-ico-lg svg .p594-traza{animation:p594traza 1s cubic-bezier(.4,.1,.2,1) both}
@keyframes p594salto{0%{translate:0 0}35%{translate:0 -6px}65%{translate:0 1px}100%{translate:0 0}}
@keyframes p594traza{from{stroke-dashoffset:var(--p594-len,120)}to{stroke-dashoffset:0}}

/* entrada escalonada (solo si el guion está: sin JS todo queda visible) */
html.p594.p594-js body .grid-feats > .feature-card.feat-fancy.p594-pre{opacity:0!important;translate:0 26px;scale:.97}
html.p594.p594-js body .grid-feats > .feature-card.feat-fancy.p594-pre.p594-in{opacity:1!important;translate:0 0;scale:1;transition-delay:var(--p594-del,0ms)!important}
html.p594.p594-js body .grid-feats > .feature-card.feat-fancy.p594-in:is(:hover,:focus-within){translate:0 -5px;transition-delay:0ms!important}

@media (prefers-reduced-motion:reduce){
  html.p594 body .grid-feats > .feature-card.feat-fancy,
  html.p594 body .grid-feats > .feature-card.feat-fancy::before,
  html.p594 body .grid-feats > .feature-card.feat-fancy::after,
  html.p594 body .grid-feats > .feature-card.feat-fancy .feat-corner-bg{transition:none!important}
  html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within){translate:none}
  html.p594 body .grid-feats > .feature-card.feat-fancy:is(:hover,:focus-within) .feat-corner-bg{background-position:130% 0}
  html.p594 body .grid-feats > .feature-card.feat-fancy .fc-ico-lg,
  html.p594 body .grid-feats > .feature-card.feat-fancy .fc-ico-lg svg *{animation:none!important}
  html.p594.p594-js body .grid-feats > .feature-card.feat-fancy.p594-pre{opacity:1!important;translate:none;scale:none}
}
@media (max-width:560px){ html.p594{--p594-d:18px;--p594-d-on:30px} }

/* ---------- 2 · TÍTULOS DE SECCIÓN: sombra interna con textura ----------
   Rayado fino diagonal (por defecto) o fibra (clase p594-textura en <html>, en un contenedor o en el h2).
   El relleno es transparente y la textura se recorta al texto; el relieve («sombra interna») sale de un degradado
   más oscuro arriba + una línea de luz debajo con drop-shadow (text-shadow taparía el relleno). */
html.p594 body :is(.sec-head h2,.p594-titulo):not(.cta-final h2):not(.hslide h2){
  --p594-tx:repeating-linear-gradient(-45deg,rgba(255,255,255,0) 0 2px,rgba(255,255,255,.24) 2px 3.2px);
  --p594-base:linear-gradient(180deg,#071a3f 0%,#002863 48%,#0b4596 100%);
  background-image:var(--p594-tx),var(--p594-base);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#002863;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -.5px 0 rgba(0,20,60,.22));
  text-shadow:none;
}
html.p594[data-theme="dark"] body :is(.sec-head h2,.p594-titulo):not(.cta-final h2):not(.hslide h2){
  --p594-tx:repeating-linear-gradient(-45deg,rgba(6,16,34,0) 0 2px,rgba(6,16,34,.26) 2px 3.2px);
  --p594-base:linear-gradient(180deg,#5d97f2 0%,#8ab8ff 50%,#c4dcff 100%);
  color:#8ab8ff;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)) drop-shadow(0 -.5px 0 rgba(255,255,255,.12));
}
/* variante fibra: ruido fractal estirado (metal cepillado / fibra de papel) hecho con SVG, sin fotos */
html.p594 body :is(.p594-textura .sec-head h2,.p594-textura .p594-titulo,.sec-head h2.p594-textura,.p594-titulo.p594-textura):not(.cta-final h2):not(.hslide h2),
html.p594.p594-textura body :is(.sec-head h2,.p594-titulo):not(.cta-final h2):not(.hslide h2){
  --p594-tx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
html.p594[data-theme="dark"] body :is(.p594-textura .sec-head h2,.sec-head h2.p594-textura):not(.cta-final h2),
html.p594.p594-textura[data-theme="dark"] body :is(.sec-head h2,.p594-titulo):not(.cta-final h2):not(.hslide h2){
  --p594-tx:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .06 0 0 0 0 .14 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* el título que se «escribe» (data-typing) conserva la textura; su cursor sigue visible */
html.p594 body .sec-head h2.is-typing{min-width:1ch}

/* ---------- 3 · HERO: la parte en degradado se nota ----------
   Antes: la sombra oscura heredada de .hero-text (0 3px 24px) se pintaba ENCIMA del degradado recortado y lo
   apagaba. Ahora: sin text-shadow, contorno azul fino (-webkit-text-stroke) + sombra/brillo con drop-shadow. */
html.p594 body .hero .hslide :is(h1,h2) em{
  background:linear-gradient(110deg,#7fe8f2 0%,#9fd0ff 50%,#c8dcff 100%)!important; background-size:100% auto!important;
  -webkit-background-clip:text!important; background-clip:text!important;
  -webkit-text-fill-color:transparent!important; color:#a9d6ff!important;
  text-shadow:none!important;
  -webkit-text-stroke:1px rgba(64,150,255,.95);
  paint-order:stroke fill;
  filter:drop-shadow(0 2px 10px rgba(0,8,30,.55)) drop-shadow(0 0 7px rgba(90,175,255,.38));
  animation:none!important;
}
@media (max-width:600px){ html.p594 body .hero .hslide :is(h1,h2) em{-webkit-text-stroke-width:.7px} }
/* «5 continentes, 2 mil millones…»: turquesa sobre gris claro se perdía → contorno azul marino fino */
html.p594 body .impacto-title span{
  -webkit-text-stroke:.6px rgba(0,50,130,.7); paint-order:stroke fill;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9));
}
html.p594[data-theme="dark"] body .impacto-title span{-webkit-text-stroke-color:rgba(120,190,255,.75);filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}