/* ============================================================
   591.ª (05/10/2026) · tarjetas de las páginas públicas (precios, rubro, rubro por país, «¿Qué mueves…?»)
   y botones de llamada a la acción del portal.
   - Icono GRANDE centrado (SVG de trazo) que CRECE de pequeño a grande mientras se dibuja + marca de agua tenue.
   - Bordes solo ARRIBA y ABAJO, en degradado que se funde hacia los lados.
   - PC (hover fino): el AZUL OSCURO SUBE DESDE ABAJO como agua (ola en el borde, ~0,4 s) y queda con brillo
     central que sigue al cursor y letras blancas; texto corto (2 líneas) en reposo y completo al pasar;
     botones ocultos que aparecen al pasar (rebote + neón celeste en el hover del botón).
     Sin giro (el dueño lo cambió por el agua el 05/10).
   - Celular/táctil: tarjetas claras, texto completo y botones siempre visibles.
   - Botones del portal (no header): luz celeste en el borde SUPERIOR y «linterna» que sigue al ratón.
   - Brillo, neón y linterna: EXCEPCIONES pedidas por el dueño (05/10) a la regla sobria 587.
   Sin JS: todo visible; al pasar, fondo azul directo (sin ola).
   ============================================================ */
:root{--t591-az1:#0b2a5b;--t591-az2:#0e3a7a;--t591-brillo:rgba(122,170,255,.34);--t591-ico:#1747a6;--t591-marca:.055;--t591-cel:#7dd3fc;--t591-cel2:#38bdf8}
:root[data-theme="dark"]{--t591-ico:#9dbcf5;--t591-marca:.08}

/* ---------- tarjeta base (también sin JS) ---------- */
.t591-c{position:relative;isolation:isolate;overflow:hidden;text-align:center}
:root .t591-c{--t591-linea:var(--line,#dbe3ee);border:0!important;border-radius:0!important;box-shadow:none!important;
  background:linear-gradient(90deg,transparent,var(--t591-linea) 18%,var(--t591-linea) 82%,transparent) top/100% 1px no-repeat,
             linear-gradient(90deg,transparent,var(--t591-linea) 18%,var(--t591-linea) 82%,transparent) bottom/100% 1px no-repeat,
             var(--panel,#fff)}
:root .t591-c.tt-actual,:root .t591-c.tm-actual{--t591-linea:var(--acc,#0bb6c4)}
:root[data-theme="dark"] .t591-c{--t591-linea:#2a3c55}
.t591-c.tt-card,.t591-c.tm-card{align-items:center}
.t591-c .tm-badge{align-self:center}
.t591-c .feat-corner-bg{display:none!important}
.t591-ico{display:grid;place-items:center;color:var(--t591-ico);transition:color .25s ease,width .2s ease,height .2s ease,margin .2s ease}
.t591-ico svg{transition:width .2s ease,height .2s ease}
.t591-ico svg{stroke-width:1.45;overflow:visible}
.t591-marca{position:absolute;left:50%;top:50%;width:min(230px,82%);aspect-ratio:1;translate:-50% -46%;color:var(--t591-ico);
  opacity:var(--t591-marca);pointer-events:none;z-index:-1;transition:opacity .3s ease,color .3s ease}
.t591-marca svg{width:100%;height:100%;stroke-width:.9}
.t591-acc{justify-content:center}
.t591-c .tt-acc,.t591-c .tm-acc{width:100%}
/* más ajustado (05/10): padding 16–18 px, separaciones 6–8 px, rejilla 14 px */
:root .t591-c{padding:18px 16px!important;gap:6px}
:is(.grid-3,.tt-grid):has(> .t591-c,> .tt-wrapmedio){gap:14px!important}
.t591-c h3,.t591-c h4{margin:0 0 6px!important}
.t591-ico{width:68px;height:68px;margin:0 auto 8px}
.t591-ico svg{width:54px;height:54px}

/* ---------- icono: crece de pequeño a grande mientras se dibuja (solo con JS: html.t591-js) ---------- */
.t591-js .t591-c:not(.t591-vis) :is(.t591-ico,.t591-marca) :is(path,circle,rect,ellipse,line,polyline,polygon){stroke-dasharray:1;stroke-dashoffset:1}
.t591-js .t591-c:not(.t591-vis) .t591-ico svg{scale:.3}
.t591-c.t591-vis:not(.t591-hecho) .t591-ico :is(path,circle,rect,ellipse,line,polyline,polygon){stroke-dasharray:1;animation:t591-trazo 1.15s cubic-bezier(.45,.1,.25,1) both}
.t591-c.t591-vis:not(.t591-hecho) .t591-marca :is(path,circle,rect,ellipse,line,polyline,polygon){stroke-dasharray:1;animation:t591-trazo 1.8s cubic-bezier(.45,.1,.25,1) .15s both}
.t591-c.t591-vis:not(.t591-hecho) .t591-ico svg{animation:t591-crece 1.05s cubic-bezier(.2,.8,.25,1.15) both}
.t591-c.t591-on .t591-ico :is(path,circle,rect,ellipse,line,polyline,polygon){stroke-dasharray:1;animation:t591-trazo2 .9s cubic-bezier(.45,.1,.25,1) .08s both}
.t591-c.t591-on .t591-ico svg{animation:t591-crece2 .75s cubic-bezier(.2,.8,.25,1.15) .05s both}
@keyframes t591-crece{from{scale:.3;opacity:.2}to{scale:1;opacity:1}}
@keyframes t591-crece2{from{scale:.3;opacity:.2}to{scale:1;opacity:1}}
@keyframes t591-trazo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes t591-trazo2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- el agua (la mete el JS: .t591-agua con dos olas) ---------- */
.t591-agua{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at var(--t591-x,50%) var(--t591-y,42%),var(--t591-brillo),rgba(122,170,255,0) 58%),linear-gradient(180deg,var(--t591-az1),var(--t591-az2));
  translate:0 calc(100% + 24px);transition:translate .42s cubic-bezier(.22,.8,.3,1)}
.t591-ola{position:absolute;left:0;bottom:100%;margin-bottom:-1px;width:200%;max-width:none;height:16px;fill:var(--t591-az1);animation:t591-ola .8s linear infinite;transition:opacity .15s ease}
.t591-ola.t591-ola2{height:24px;opacity:.45;animation-duration:1.25s;animation-direction:reverse}
@keyframes t591-ola{from{translate:0 0}to{translate:-50% 0}}

/* ---------- PC: el agua sube, letras blancas, texto completo, botones al pasar ---------- */
@media (hover:hover) and (pointer:fine){
  /* sin JS: fondo azul directo */
  :root:not(.t591-js) .t591-c:is(:hover,:focus-within){
    background:radial-gradient(circle at 50% 42%,var(--t591-brillo),rgba(122,170,255,0) 58%),linear-gradient(180deg,var(--t591-az1),var(--t591-az2))!important}
  .t591-c:is(:hover,.t591-on,:focus-within) > .t591-agua{translate:0 0}
  .t591-c:is(:hover,.t591-on,:focus-within) > .t591-agua .t591-ola{opacity:0;transition-delay:.38s}

  .t591-c :is(h3,h4,p){transition:color .18s ease}
  :root .t591-c:is(:hover,.t591-on,:focus-within) :is(h3,h4,p,.tt-emo,.tm-emo){color:#fff!important;transition-delay:.14s}
  :root .t591-c:is(:hover,.t591-on,:focus-within) p{color:rgba(255,255,255,.9)!important}
  :root .t591-c:is(:hover,.t591-on,:focus-within) .t591-ico{color:#fff;transition-delay:.1s}
  :root .t591-c:is(:hover,.t591-on,:focus-within) .t591-marca{color:#cfe0ff;opacity:.12}
  :root .t591-c:is(:hover,.t591-on,:focus-within) .tm-badge{background:rgba(255,255,255,.14)!important;color:#fff!important}
  :root .t591-c:is(:hover,.t591-on,:focus-within) .btn-primary{background:#fff!important;color:var(--t591-az1)!important;border-color:#fff!important;box-shadow:none!important}
  :root .t591-c:is(:hover,.t591-on,:focus-within) .btn-ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.6)!important}
  :root .t591-c .btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

  /* MISMA ALTURA al pasar (05/10): el JS fija el alto de reposo (--t591-h); el icono se encoge a 30 px y sube
     a la izquierda del título; el texto completo usa el sitio liberado y, si no cabe, scroll interno discreto */
  .t591-js .t591-c[style*="--t591-h"]{height:var(--t591-h);display:flex;flex-direction:column}
  .t591-c:is(:hover,.t591-on,:focus-within){text-align:left;align-items:stretch!important}
  .t591-c:is(:hover,.t591-on,:focus-within) .t591-ico{position:absolute;left:16px;top:16px;width:30px;height:30px;margin:0}
  .t591-c:is(:hover,.t591-on,:focus-within) .t591-ico svg{width:28px;height:28px;stroke-width:1.7}
  .t591-c:is(:hover,.t591-on,:focus-within) :is(h3,h4){padding-left:40px;min-height:30px;display:flex;align-items:center}
  .t591-c:is(:hover,.t591-on,:focus-within) .tm-badge{align-self:flex-start}
  .t591-js .t591-c[style*="--t591-h"]:is(:hover,.t591-on,:focus-within) p{flex:1 1 auto!important;min-height:0;overflow:auto;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent);padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
  .t591-c:is(:hover,.t591-on,:focus-within) .t591-acc{flex:none;justify-content:flex-start}
  /* poco texto en reposo, completo al pasar */
  .t591-c p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;flex:0 0 auto!important;max-height:3.15em}
  .t591-c:is(:hover,.t591-on,:focus-within) p{-webkit-line-clamp:unset;line-clamp:none;display:block;max-height:none}
  /* botones ocultos en reposo */
  .t591-acc{opacity:0;translate:0 10px;max-height:0;margin-top:0!important;overflow:hidden;transition:opacity .3s ease .05s,translate .3s ease .05s,max-height .35s ease}
  .t591-c:is(:hover,.t591-on,:focus-within) .t591-acc{opacity:1;translate:0 0;max-height:140px;margin-top:8px!important;overflow:visible;padding:4px 0}
  /* botón de la tarjeta: rebote + neón celeste SOLO durante su hover */
  :root .t591-c .t591-acc .btn:is(:hover,:focus-visible){animation:t591-bote .42s ease-out 1;color:#fff!important;background:rgba(56,189,248,.16)!important;border:1px solid var(--t591-cel)!important;
    box-shadow:0 0 0 1px var(--t591-cel2),0 0 8px rgba(56,189,248,.85),0 0 18px rgba(56,189,248,.55),0 0 32px rgba(125,211,252,.35)!important}

  /* planes de /precios (590): el agua también sube; la cabecera azul del destacado se funde al terminar */
  :root.t591-js .p590 .plan{isolation:isolate;overflow:hidden}
  :root:not(.t591-js) .p590 .plan:is(:hover,:focus-within){
    background:radial-gradient(circle at 50% 30%,var(--t591-brillo),rgba(122,170,255,0) 55%),linear-gradient(180deg,var(--t591-az1),var(--t591-az2))!important}
  .p590 .plan:is(:hover,.t591-on,:focus-within) > .t591-agua{translate:0 0}
  .p590 .plan:is(:hover,.t591-on,:focus-within) > .t591-agua .t591-ola{opacity:0;transition-delay:.38s}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within){border-color:var(--t591-az2)!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .p590-cab{background:transparent!important;transition:background 0s .3s;transition-behavior:allow-discrete}
  :root .p590 .plan :is(.p-name,.p-desc,.p-cycle,.p-features li){transition:color .18s ease}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) :is(.p-name,.p-desc,.p-cycle,.p-ref,.p-actual,.p-actual a,.p-bloqueado,.p-features li,.p-features li b,.feat-opt){color:#fff!important;transition-delay:.15s}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) :is(.p-desc,.p-cycle,.p-features li.off){color:rgba(255,255,255,.78)!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .p-price :is(.sym,.now,.per){color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .p-features li .ck{background:rgba(255,255,255,.16)!important;color:#fff!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .p590-ico{background:rgba(255,255,255,.14)!important;color:#fff!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .p-rubro-tag{background:rgba(255,255,255,.12)!important;color:#fff!important;border-color:rgba(255,255,255,.25)!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .btn:not([disabled]){background:#fff!important;color:var(--t591-az1)!important;border-color:#fff!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .btn[disabled]{background:transparent!important;color:rgba(255,255,255,.75)!important;border-color:rgba(255,255,255,.4)!important}
  :root .p590 .plan:is(:hover,.t591-on,:focus-within) .plan-badge:not(.plan-badge-soon){background:#fff!important;color:var(--t591-az1)!important}
}

/* ---------- botones del portal (fuera del header): luz celeste arriba + linterna ---------- */
:root .btn:not(header .btn,[disabled]){position:relative;isolation:isolate;overflow:hidden}
:root .btn:not(header .btn,[disabled])::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    linear-gradient(90deg,rgba(125,211,252,0) calc(var(--t591-lx,50%) - 40%),var(--t591-cel) var(--t591-lx,50%),rgba(125,211,252,0) calc(var(--t591-lx,50%) + 40%)) top/100% 1.5px no-repeat,
    radial-gradient(45% 9px at var(--t591-lx,50%) 0,rgba(125,211,252,.42),rgba(125,211,252,0)) top/100% 12px no-repeat}
.cta-final{isolation:isolate}
.t591-luzcta{position:absolute;inset:0;pointer-events:none;z-index:-1;border-radius:inherit;
  background:
    linear-gradient(90deg,rgba(125,211,252,0) calc(var(--t591-lx,50%) - 35%),var(--t591-cel) var(--t591-lx,50%),rgba(125,211,252,0) calc(var(--t591-lx,50%) + 35%)) top/100% 2px no-repeat,
    radial-gradient(40% 40px at var(--t591-lx,50%) 0,rgba(125,211,252,.30),rgba(125,211,252,0)) top/100% 60px no-repeat}
@media (hover:hover) and (pointer:fine){
  :root .btn:not(header .btn,[disabled]):hover{animation:t591-bote .42s ease-out 1}
}
@keyframes t591-bote{0%{translate:0 0}30%{translate:0 -4px}55%{translate:0 0}75%{translate:0 -2px}100%{translate:0 0}}

/* ---------- celular / táctil: claro, texto completo y botones siempre ---------- */
@media (hover:none),(pointer:coarse){
  .t591-acc{opacity:1;translate:none}
  .t591-c p{display:block;-webkit-line-clamp:unset}
  .t591-agua{display:none}
}

/* ---------- menos movimiento: sin ola, sin crecer ni dibujar, sin rebote; solo color ---------- */
@media (prefers-reduced-motion:reduce){
  .t591-agua{transition:none!important}
  .t591-ola{display:none}
  .t591-c :is(.t591-ico,.t591-marca) :is(path,circle,rect,ellipse,line,polyline,polygon){animation:none!important;stroke-dashoffset:0!important}
  .t591-c .t591-ico svg{animation:none!important;scale:1!important}
  .t591-acc{transition:opacity .2s linear}
  :root .btn:hover,:root .t591-c .t591-acc .btn:is(:hover,:focus-visible){animation:none!important}
}

/* ============================================================
   591 · RONDA 2 (05/10): resaltados corporativos sobre azul, sombras en letras, estrella del cursor,
   planes que suben con fondo negro brillante detrás, vía láctea en la banda «¿Listo para digitalizar…?»
   ============================================================ */
/* 1) resaltados sobre fondo oscuro: color corporativo (celeste), nunca amarillo/ámbar */
:root{--t591-res-bg:rgba(56,189,248,.18);--t591-res-tx:#bfe6ff;--t591-res-bd:rgba(125,211,252,.55)}
:is(.t591-c.t591-on,.t591-c:hover,.t591-c:focus-within,.p590 .plan:is(:hover,.t591-on,:focus-within),.p590 .plan.featured .p590-cab,.cta-final) :is(.pu-tip-oferta .pu-tip-btn),
:root[data-theme="dark"] :is(.p590 .plan,.t591-c) .pu-tip-oferta .pu-tip-btn{
  background:var(--t591-res-bg)!important;border:1px solid var(--t591-res-bd)!important;box-shadow:none!important;animation:none!important}
:is(.t591-c.t591-on,.t591-c:hover,.t591-c:focus-within,.p590 .plan:is(:hover,.t591-on,:focus-within)) .pu-regalo,
:root[data-theme="dark"] :is(.p590 .plan,.t591-c) .pu-regalo{filter:grayscale(1) brightness(1.9) drop-shadow(0 0 2px rgba(125,211,252,.9))}
:is(.t591-c.t591-on,.t591-c:hover,.t591-c:focus-within,.p590 .plan:is(:hover,.t591-on,:focus-within),.cta-final) :is(.feat-opt,mark,.tm-cot,.plan-badge-soon,.p-rubro-tag b),
:root[data-theme="dark"] :is(.p590 .plan,.t591-c) :is(.feat-opt,mark,.plan-badge-soon){
  background:var(--t591-res-bg)!important;color:var(--t591-res-tx)!important;border-color:var(--t591-res-bd)!important;-webkit-text-fill-color:currentColor}
:is(.t591-c.t591-on,.t591-c:hover,.t591-c:focus-within,.p590 .plan:is(:hover,.t591-on,:focus-within)) .feat-opt{background:none!important;padding:0}
:is(.t591-c.t591-on,.t591-c:hover,.p590 .plan:is(:hover,.t591-on)) mark{border-radius:3px;padding:0 3px}

/* 2) sombra en letras sobre azul; sombra interna (degradado recortado al texto) en las grandes */
:is(.t591-c.t591-on,.t591-c:hover,.t591-c:focus-within) :is(h3,h4,p,.tm-badge),
.p590 .plan:is(:hover,.t591-on,:focus-within) :is(.p-desc,.p-cycle,.p-features li,.p-rubro-tag,.p-price .sym,.p-price .per),
.p590 .plan.featured .p590-cab :is(.p-desc,.p-cycle,.p-rubro-tag,.p-price .sym,.p-price .per),
.cta-final :is(p,.btn){text-shadow:0 1px 2px rgba(0,0,0,.45)}
:root :is(.t591-c.t591-on,.t591-c:hover) :is(h3,h4),
:root .p590 .plan:is(:hover,.t591-on,:focus-within) :is(.p-name,.p-price .now),
:root .p590 .plan.featured .p590-cab :is(.p-name,.p-price .now),
:root .cta-final h2{
  background:linear-gradient(180deg,rgba(9,24,58,.7) 0,#ffffff 22%,#ffffff 70%,#dbe9ff 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:#fff;
  text-shadow:none!important;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
:root .cta-final h2 *{-webkit-text-fill-color:transparent}

/* 3) estrella del cursor (elemento único que mete el JS) */
.t591-estrella{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;pointer-events:none;z-index:2147483000;opacity:0;
  transition:opacity .18s ease;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff 0 2.2px,rgba(224,244,255,.95) 3px,rgba(125,211,252,.55) 6px,rgba(56,189,248,.18) 11px,rgba(56,189,248,0) 19px)}
.t591-estrella::before,.t591-estrella::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:1.2px;margin:-.6px 0 0 -19px;border-radius:1px;
  background:linear-gradient(90deg,rgba(186,230,253,0),#e0f4ff 50%,rgba(186,230,253,0))}
.t591-estrella::after{rotate:90deg}
.t591-estrella.on{opacity:1}
.t591-estrella.on::before,.t591-estrella.on::after{animation:t591-destello 1.6s ease-in-out infinite}
@keyframes t591-destello{0%,100%{scale:1 1;opacity:.9}50%{scale:.7 1;opacity:.6}}

/* 4) planes: suben y se acercan; detrás, fondo negro con brillo que sigue al ratón; sombra hacia el ratón */
.p590 .plans{position:relative;z-index:1}
.t591-fondo{position:absolute;inset:-18px -14px;border-radius:10px;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(520px circle at var(--t591-fx,50%) var(--t591-fy,40%),rgba(70,140,255,.38),rgba(30,70,160,.12) 45%,rgba(4,10,24,0) 70%),#050b18}
@media (hover:hover) and (pointer:fine){
  .p590-zona:has(.plan:is(:hover,.t591-on)) > .t591-fondo{opacity:1}
  :root .p590 .plan{transition:translate .25s ease,scale .25s ease,box-shadow .25s ease,background-color .35s ease,border-color .35s ease}
  :root .p590 .plan:is(:hover,.t591-on){translate:0 -6px;scale:1.03;z-index:3;
    box-shadow:var(--t591-sx,0px) var(--t591-sy,14px) 38px rgba(0,0,0,.55),calc(var(--t591-sx,0px) * .4) calc(var(--t591-sy,14px) * .4) 12px rgba(56,189,248,.18)!important}
  .p590-zona:has(.plan:is(:hover,.t591-on)) .plan:not(:hover):not(.t591-on){border-color:rgba(255,255,255,.08)}
}

/* 5) banda «¿Listo para digitalizar…?»: vía láctea (canvas del JS), siempre detrás del texto */
.t591-via{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;border-radius:inherit}
.cta-final > :not(.t591-via):not(.t591-luzcta){position:relative}

@media (hover:none),(pointer:coarse){.t591-estrella,.t591-fondo{display:none}}
@media (prefers-reduced-motion:reduce){
  .t591-estrella{display:none}
  :root .p590 .plan:is(:hover,.t591-on){translate:none;scale:none}
}

/* 597P (rendimiento): las olas solo se mueven con el agua arriba (tarjeta con el ratón encima); antes, 2 olas por tarjeta
   animaban sin parar aunque el agua estuviera escondida. La estrella del cursor solo destella mientras se ve. */
.t591-ola{animation-play-state:paused}
:is(:hover,.t591-on,:focus-within) > .t591-agua .t591-ola{animation-play-state:running}