/* DigitAll+ · capa visual (colores de marca, selección, transiciones)
   Solo anima opacity/transform/clip-path (GPU) para no sobrecargar. */
:root{
  --da-blue:#0f65a2;--da-navy:#0a2e46;--da-sky:#e8f1f8;--da-ring:rgba(15,101,162,.35);
  --navy:#0a2e46;
  --ease-out:cubic-bezier(.22,.8,.24,1);--ease-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- Logo SVG de marca ---------- */
.logo.dp-logo{display:flex;align-items:center}
.logo.dp-logo svg{height:34px;width:auto;display:block}
.dp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Acentos de marca ---------- */
nav a{transition:color .25s var(--ease-out)}
nav a:hover{color:var(--da-blue)}
nav a.hide-m{position:relative}
nav a.hide-m::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--da-blue);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
nav a.hide-m:hover::after,nav a.hide-m[aria-current]::after{transform:scaleX(1)}
nav a[aria-current]{color:var(--da-navy)}
.tag i{background:var(--da-blue);box-shadow:0 0 0 4px rgba(15,101,162,.18);animation:dpPulse 2.4s var(--ease-io) infinite}
@keyframes dpPulse{50%{box-shadow:0 0 0 7px rgba(15,101,162,0)}}
.hero h1 span{color:var(--da-blue)}
.btn{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background-color .25s,color .25s,border-color .25s}
.btn:active{transform:translateY(0) scale(.97)}
.btn-line{border-color:var(--da-navy);color:var(--da-navy)}
.btn-line:hover{background:var(--da-navy);color:#fff}
.chip{transition:background-color .3s var(--ease-out),color .3s,border-color .3s,transform .25s var(--ease-out),box-shadow .3s}
.chip:hover{border-color:var(--da-blue);color:var(--da-blue)}
.chip.on{background:linear-gradient(135deg,var(--da-navy),var(--da-blue));border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px var(--da-blue)}
.chip:active{transform:scale(.96)}
.search input:focus,.filters select:focus,.filters input:focus{border-color:var(--da-blue);box-shadow:0 0 0 4px rgba(15,101,162,.14)}
:focus-visible{outline:2px solid var(--da-blue);outline-offset:3px}

/* ---------- Tarjetas de equipos: sombreado al seleccionar ---------- */
.card{position:relative;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s;will-change:transform}
.card img{transition:transform .6s var(--ease-out)}
@media (hover:hover){
  .card:hover{transform:translateY(-6px);
    box-shadow:0 1px 0 rgba(10,46,70,.04),0 22px 44px -20px rgba(10,46,70,.38),0 0 0 1px rgba(15,101,162,.16)}
  .card:hover img{transform:scale(1.035)}
}
.card:active{transform:translateY(-2px) scale(.985);transition-duration:.15s}
.card.dp-picked{transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--da-blue),0 0 0 7px var(--da-ring),0 26px 50px -22px rgba(10,46,70,.5)}
.card:focus-within{box-shadow:0 0 0 2px var(--da-blue),0 18px 40px -22px rgba(10,46,70,.4)}
/* brillo que recorre la tarjeta al seleccionarla */
.card.dp-picked::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(15,101,162,.12) 50%,transparent 65%);
  background-size:250% 100%;animation:dpSweep .9s var(--ease-out) forwards}
@keyframes dpSweep{from{background-position:120% 0}to{background-position:-40% 0}}

/* entrada escalonada al hacer scroll / al filtrar */
.dp-rv{opacity:0;transform:translateY(18px)}
.dp-rv.dp-in{opacity:1;transform:none;transition:opacity .6s var(--ease-out) var(--dl,0s),transform .6s var(--ease-out) var(--dl,0s)}

/* ---------- Ventana de detalle (dialog) ---------- */
dialog#dlg[open]{animation:dpDlgIn .42s var(--ease-out)}
dialog#dlg[open]::backdrop{animation:dpFade .35s ease forwards;background:rgba(10,46,70,.42);backdrop-filter:blur(4px)}
dialog#dlg.dp-closing{animation:dpDlgOut .26s var(--ease-io) forwards}
dialog#dlg.dp-closing::backdrop{animation:dpFade .26s ease reverse forwards}
@keyframes dpDlgIn{from{opacity:0;transform:translateY(24px) scale(.965)}to{opacity:1;transform:none}}
@keyframes dpDlgOut{to{opacity:0;transform:translateY(14px) scale(.975)}}
@keyframes dpFade{from{opacity:0}to{opacity:1}}
#dlg .mprice{color:var(--da-navy)}
#dlg .mmedia img{animation:dpImg .6s var(--ease-out) .08s both}
@keyframes dpImg{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ---------- Transición entre páginas (motion graphics) ---------- */
.dp-veil{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--da-navy) 0%,#0c3a5a 55%,var(--da-blue) 140%);
  clip-path:inset(100% 0 0 0);visibility:hidden}
.dp-veil svg{width:74px;height:auto;overflow:visible}
.dp-veil .dp-d{fill:transparent;stroke:#fff;stroke-width:14;stroke-dasharray:2400;stroke-dashoffset:2400}
.dp-veil .dp-bar{fill:#fff;transform:scaleY(0);transform-origin:50% 100%;transform-box:fill-box}
.dp-veil .dp-ring{position:absolute;width:150px;height:150px;border-radius:50%;border:2px solid rgba(255,255,255,.18);transform:scale(.4);opacity:0}
/* salida (al hacer click) */
html.dp-leave .dp-veil{visibility:visible;pointer-events:all;animation:dpWipeIn .42s var(--ease-io) forwards}
html.dp-leave .dp-veil .dp-d{animation:dpDraw .5s var(--ease-out) .12s forwards}
html.dp-leave .dp-veil .dp-bar{animation:dpBar .32s var(--ease-out) .26s forwards}
html.dp-leave .dp-veil .dp-ring{animation:dpRing 1s var(--ease-out) .2s infinite}
/* llegada: el velo ya cubre en el primer pintado (sin flash) y se retira */
html.dp-enter .dp-veil{visibility:visible;clip-path:inset(0 0 0 0)}
html.dp-enter .dp-veil .dp-d{fill:#fff;stroke-dashoffset:0}
html.dp-enter .dp-veil .dp-bar{transform:none}
html.dp-reveal .dp-veil{visibility:visible;animation:dpWipeOut .55s var(--ease-io) .05s both}
html.dp-reveal .dp-veil .dp-d{fill:#fff;stroke-dashoffset:0}
html.dp-reveal .dp-veil .dp-bar{transform:none}
html.dp-reveal .dp-veil svg{animation:dpLogoOut .4s var(--ease-io) both}
@keyframes dpWipeIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes dpWipeOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes dpDraw{70%{fill:transparent}to{stroke-dashoffset:0;fill:#fff}}
@keyframes dpBar{to{transform:none}}
@keyframes dpRing{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes dpLogoOut{to{transform:translateY(-18px) scale(.9);opacity:0}}
/* el contenido nuevo entra suave detrás del velo */
html.dp-reveal main{animation:dpRise .7s var(--ease-out) .12s both}
@keyframes dpRise{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}

/* barra de progreso fina bajo el header mientras carga */
.dp-bar-top{position:fixed;left:0;top:0;height:3px;width:100%;z-index:10000;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--da-navy),var(--da-blue),#5aa9e0);pointer-events:none}
html.dp-leave .dp-bar-top{animation:dpProg 2.4s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes dpProg{to{transform:scaleX(.85)}}

/* ---------- Bloque SEO (texto + preguntas frecuentes) ---------- */
.dp-seo{padding:64px 0;background:linear-gradient(180deg,#fff,var(--da-sky))}
.dp-seo h2{font-size:clamp(24px,3vw,34px);color:var(--da-navy);margin-bottom:14px}
.dp-seo .dp-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.dp-seo p{color:#374151;line-height:1.7;margin-bottom:12px;max-width:62ch}
.dp-seo .dp-brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dp-seo .dp-brands a{height:42px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:#fff;border:1px solid rgba(15,101,162,.25);color:var(--da-navy);font-weight:700;font-size:14px;transition:transform .3s var(--ease-out),box-shadow .3s,background-color .3s,color .3s}
.dp-seo .dp-brands a:hover{background:var(--da-navy);color:#fff;transform:translateY(-2px);box-shadow:0 10px 20px -12px var(--da-navy)}
.dp-faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.dp-faq details[open]{border-color:rgba(15,101,162,.35);box-shadow:0 12px 30px -20px rgba(10,46,70,.45)}
.dp-faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:700;color:var(--da-navy);position:relative}
.dp-faq summary::-webkit-details-marker{display:none}
.dp-faq summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;border-right:2px solid var(--da-blue);border-bottom:2px solid var(--da-blue);transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease-out)}
.dp-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.dp-faq details p{padding:0 18px 16px;margin:0;animation:dpFade .4s ease}
@media (max-width:860px){.dp-seo .dp-cols{grid-template-columns:1fr;gap:24px}.logo.dp-logo svg{height:28px}}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .dp-veil,.dp-bar-top{display:none!important}
  .dp-rv{opacity:1;transform:none}
}

/* ---------- Llegada sin flash: cubre desde el primer pintado ---------- */
html.dp-enter::after{content:"";position:fixed;inset:0;z-index:9998;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 706 772'%3E%3Cpath fill='%23fff' d='M6.05,0h319.85c85.48,0,169.45,26.1,237.97,77.2,73.33,54.69,141.76,146.19,141.76,297.22C705.63,909.45,6.05,748.84,6.05,748.84v-203.59l150.68-1.4v75.97s385.08,63.73,385.08-230.47S316.42,142.91,6.05,142.91V0Z'/%3E%3Crect fill='%23fff' y='219.78' width='162.56' height='223.77'/%3E%3C/svg%3E") center/74px auto no-repeat,linear-gradient(160deg,#0a2e46 0%,#0c3a5a 55%,#0f65a2 140%)}
/* la intro del logo solo la primera vez por visita */
html.dp-nointro #intro{display:none!important}

/* ---------- Franja de confianza (debajo de la portada) ---------- */
.dp-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.dp-trust ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0}
.dp-trust li{display:flex;flex-direction:column;gap:2px;padding:18px 18px 18px 30px;position:relative}
.dp-trust li::before{content:"";position:absolute;left:12px;top:24px;width:8px;height:8px;border-radius:50%;background:var(--da-blue);box-shadow:0 0 0 4px rgba(15,101,162,.14)}
.dp-trust b{font-family:Manrope,Inter,sans-serif;font-size:14.5px;color:var(--da-navy)}
.dp-trust span{font-size:13px;color:var(--muted)}
.dp-review{margin-top:18px;font-size:14px;color:var(--muted)}
.dp-review a{color:var(--da-blue);font-weight:700;border-bottom:1px solid rgba(15,101,162,.35)}
/* Garantía */
.dp-warranty{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 4px;padding:8px 14px 8px 12px;border-radius:12px;background:var(--da-sky);border:1px solid rgba(15,101,162,.22);color:#374151;font-size:13.5px;line-height:1.35}
.dp-warranty b{color:var(--da-navy);font-weight:800;display:inline-flex;align-items:center;gap:6px}
.dp-warranty b::before{content:"";width:14px;height:14px;background:var(--da-blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3zm-1.2 14.2-3.5-3.5 1.4-1.4 2.1 2.1 4.9-4.9 1.4 1.4-6.3 6.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.dp-trust li:first-child b{color:var(--da-blue)}