/* =====================================================================
   DigiAcción · Showroom de prediseños web
   Estilos del menú "Diseños web" (compartido por todas las homes).
   Cada diseño puede ajustar el acento con --sr-accent y la tipografía
   con --sr-font en su propio :root.
   ===================================================================== */

/* ---------- Disparador en la cabecera ---------- */
.sr-trigger{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:inline-flex; align-items:center; gap:.5em;
  font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit;
  padding:.55em .95em .55em .8em; border-radius:999px;
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  background:color-mix(in srgb, currentColor 6%, transparent);
  transition:background .3s, border-color .3s, color .3s;
  white-space:nowrap; position:relative; flex-shrink:0;
}
.sr-trigger:hover,.sr-trigger.is-active{
  background:color-mix(in srgb, currentColor 12%, transparent);
  border-color:color-mix(in srgb, currentColor 40%, transparent);
}
.sr-trigger:focus-visible{outline:2px solid var(--sr-accent,#6EE287); outline-offset:3px}
.sr-trigger .sr-ico{width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.8; opacity:.9}
.sr-trigger .sr-chev{width:.95em; height:.95em; fill:none; stroke:currentColor; stroke-width:2; transition:transform .3s}
.sr-trigger.is-active .sr-chev{transform:rotate(180deg)}
.sr-dot{
  position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--sr-accent,#6EE287); box-shadow:0 0 0 2px var(--sr-dot-ring, rgba(0,0,0,.25));
}
.sr-dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:inherit;
  animation:srPulse 2.2s ease-out infinite;
}
@keyframes srPulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}}

/* ---------- Panel desplegable ---------- */
.sr-panel{
  --_bg:var(--sr-bg, rgba(9,13,26,.96));
  --_fg:var(--sr-fg, #F4F6FB);
  --_muted:var(--sr-muted, rgba(244,246,251,.62));
  --_line:var(--sr-line, rgba(255,255,255,.1));
  --_accent:var(--sr-accent, #6EE287);
  position:fixed; left:12px; top:90px; z-index:9999;
  width:min(1080px, calc(100vw - 24px));
  max-height:calc(100vh - 110px); overflow:visible;
  transform:translateY(-10px) scale(.985); transform-origin:50% 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s;
  background:var(--_bg); color:var(--_fg);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--_line); border-radius:var(--sr-radius, 20px);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08);
  font-family:var(--sr-font, inherit); text-transform:none; letter-spacing:normal;
  padding:20px 20px 14px;
}
.sr-panel.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:none;
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s;
}
.sr-bridge{position:absolute; display:block; background:transparent}
.sr-head{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 4px 16px; border-bottom:1px solid var(--_line); margin-bottom:16px}
.sr-title strong{display:block; font-size:1.12rem; font-weight:600; line-height:1.25; margin-top:6px; letter-spacing:-.01em}
.sr-kicker{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; letter-spacing:.01em; color:var(--_accent)}
.sr-kicker i{width:7px; height:7px; border-radius:50%; background:var(--_accent); box-shadow:0 0 12px var(--_accent)}
.sr-home{
  display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; color:#070B1A; text-decoration:none;
  font-size:.86rem; font-weight:600; padding:9px 16px 9px 10px; border-radius:999px;
  background:#6EE287; transition:transform .25s, box-shadow .25s;
}
.sr-home .sr-logo{width:22px; height:22px; padding:3px; border-radius:50%; background:#070B1A; box-sizing:content-box}
.sr-home:hover{transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(110,226,135,.7)}
.sr-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
.sr-card{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:8px 8px 10px; border-radius:14px;
  color:var(--_fg); text-decoration:none; border:1px solid transparent;
  transition:background .25s, border-color .25s;
}
.sr-panel.is-open .sr-card{animation:srIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 26ms)}
@keyframes srIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.sr-card:hover{background:rgba(255,255,255,.06); border-color:var(--_line)}
.sr-card.is-current{background:color-mix(in srgb, var(--_accent) 12%, transparent); border-color:color-mix(in srgb, var(--_accent) 50%, transparent)}
.sr-thumb{position:relative; display:block; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:#1b2233}
.sr-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sr-card:hover .sr-thumb img{transform:scale(1.07)}
.sr-here{position:absolute; left:8px; top:8px; font-size:.64rem; font-weight:700; padding:4px 8px; border-radius:999px; background:var(--_accent); color:#070B1A; white-space:nowrap}
.sr-txt{display:flex; flex-direction:column; min-width:0; gap:2px; padding:0 2px}
.sr-txt b{font-size:.9rem; font-weight:600; line-height:1.25}
.sr-txt small{font-size:.74rem; color:var(--_muted); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sr-foot{margin-top:12px; padding:13px 4px 3px; border-top:1px solid var(--_line); font-size:.88rem; line-height:1.4; color:var(--_muted); text-align:center}
.sr-foot b{color:var(--_fg); font-weight:600}
.sr-foot .sr-cta{margin-left:8px; font-size:1.06rem; color:var(--_fg); font-weight:700; text-decoration:underline; text-decoration-color:#6EE287; text-decoration-thickness:2.5px; text-underline-offset:4px}
.sr-foot .sr-cta:hover{color:#6EE287}
@media (max-height:760px){ .sr-thumb{aspect-ratio:16/8} .sr-foot{display:none} }
@media (max-width:980px){
  .sr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sr-card{flex-direction:row; align-items:center}
  .sr-thumb{flex:0 0 84px; aspect-ratio:auto; height:56px}
  .sr-here{display:none}
  .sr-panel{max-height:calc(100vh - 100px); overflow:auto}
}
@media (max-width:620px){ .sr-grid{grid-template-columns:1fr} .sr-head{flex-direction:column; align-items:flex-start} }

/* ---------- Desplegable "Diseños web por sectores" tras el pie de cada diseño ----------
   Hereda el fondo, el color y la tipografía del pie (las variables las pone showroom.js) */
.srf{
  --srf-bg:#ffffff; --srf-fg:#0B1020; --srf-acc:#6EE287;
  position:relative; margin:0; padding:0; border:0; background:var(--srf-bg); color:var(--srf-fg);
  text-transform:none; letter-spacing:normal; font-size:16px; line-height:1.5;
}
.srf-in{max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,56px)}
.srf-bar{display:flex; align-items:center; gap:clamp(14px,2vw,26px); padding:26px 0}
.srf-bar::before,.srf-bar::after{content:""; flex:1 1 0; height:1px; background:currentColor; opacity:.16}
.srf-bar::before{background:linear-gradient(90deg, transparent, currentColor 40%)}
.srf-bar::after{background:linear-gradient(90deg, currentColor 60%, transparent)}
.srf-toggle{
  flex:0 0 auto; display:inline-flex; align-items:center; margin:0; cursor:pointer;
  font:inherit; font-size:18px; font-weight:600; line-height:1; letter-spacing:.005em; text-transform:none; color:inherit;
  padding:16px 18px 16px 22px; gap:12px; border-radius:999px; background:color-mix(in srgb, currentColor 4%, transparent);
  border:1.5px solid color-mix(in srgb, currentColor 30%, transparent);
  transition:border-color .3s, background-color .3s;
}
.srf-toggle:hover,.srf.is-open .srf-toggle{border-color:color-mix(in srgb, currentColor 45%, transparent); background:color-mix(in srgb, currentColor 6%, transparent)}
.srf-dot{position:relative; width:9px; height:9px; border-radius:50%; background:var(--srf-acc)}
.srf-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--srf-acc); opacity:0; animation:srfPulse 2.4s ease-out infinite}
@keyframes srfPulse{0%{transform:scale(.5); opacity:.8}100%{transform:scale(1.6); opacity:0}}
.srf-n{display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 8px; border-radius:999px; font-size:13.5px; font-weight:700; background:color-mix(in srgb, currentColor 12%, transparent)}
.srf-chev{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.srf.is-open .srf-chev{transform:rotate(180deg)}
.srf-toggle:focus-visible,.srf a:focus-visible{outline:2px solid var(--srf-acc); outline-offset:3px}

.srf-panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .7s cubic-bezier(.2,.8,.2,1)}
.srf.is-open .srf-panel{grid-template-rows:1fr}
.srf-clip{min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s .7s}
.srf.is-open .srf-clip{visibility:visible; transition-delay:0s}
.srf-body{padding:4px 0 clamp(40px,5vw,64px)}
.srf-head{display:flex; align-items:center; justify-content:space-between; gap:20px 30px; margin-bottom:clamp(22px,2.6vw,32px)}
.srf-head p{margin:0; font-size:16.5px; line-height:1.55; opacity:.75; max-width:600px}
.srf-head p b{font-weight:600}
.srf-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px}
.srf-cta{font-size:17px; font-weight:700; line-height:1.1; color:inherit; text-decoration:underline; text-decoration-color:var(--srf-acc); text-decoration-thickness:2px; text-underline-offset:4px; transition:opacity .25s}
.srf-cta:hover{opacity:.75}
.srf-home{
  display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; text-decoration:none; color:#070B1A;
  background:var(--srf-acc); font-size:14px; font-weight:600; line-height:1; padding:9px 16px 9px 9px; border-radius:999px;
  transition:transform .25s, box-shadow .25s;
}
.srf-home .sr-logo{width:22px; height:22px; padding:4px; border-radius:50%; background:#070B1A; box-sizing:content-box}
.srf-home > svg:last-child{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2}
.srf-home:hover{transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(110,226,135,.75)}
.srf-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(18px,1.8vw,24px) clamp(12px,1.4vw,18px)}
.srf-card{display:flex; flex-direction:column; gap:10px; min-width:0; text-decoration:none; color:inherit; opacity:0; transform:translateY(14px); transition:opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1)}
.srf.is-open .srf-card{opacity:1; transform:none; transition-delay:calc(.12s + var(--i,0) * .035s)}
.srf-thumb{position:relative; display:block; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:color-mix(in srgb, currentColor 8%, transparent); border:1px solid color-mix(in srgb, currentColor 12%, transparent); transition:border-color .3s, transform .5s cubic-bezier(.2,.8,.2,1)}
.srf-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.srf-card:hover .srf-thumb{border-color:var(--srf-acc); transform:translateY(-3px)}
.srf-card:hover .srf-thumb img{transform:scale(1.06)}
.srf-card.is-current .srf-thumb{border-color:var(--srf-acc)}
.srf-thumb em{position:absolute; left:8px; top:8px; font-style:normal; font-size:11.5px; font-weight:700; line-height:1; padding:5px 9px; border-radius:999px; background:var(--srf-acc); color:#070B1A}
.srf-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.srf-txt b{font-size:14.5px; font-weight:600; line-height:1.3}
.srf-txt small{font-size:13px; line-height:1.35; opacity:.62}
@media (max-width:1100px){ .srf-grid{grid-template-columns:repeat(4,minmax(0,1fr))} .srf-you{grid-column:span 3} .srf-you .srf-thumb{aspect-ratio:5/1} }
@media (max-width:760px){ .srf-you{grid-column:auto} .srf-you .srf-thumb{aspect-ratio:16/10} }
@media (max-width:760px){
  .srf-head{flex-direction:column; align-items:flex-start}
  .srf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){ .srf-bar{gap:14px; padding:28px 0} .srf-toggle{font-size:16px; gap:10px; padding:14px 16px 14px 18px} .srf-chev{width:22px; height:22px} .srf-head p{font-size:16px} .srf-cta{font-size:16.5px} }
@media (max-width:420px){ .srf-bar{gap:10px} .srf-toggle{font-size:15px; padding:13px 14px 13px 16px} .srf-bar::before,.srf-bar::after{min-width:12px} }
@media (prefers-reduced-motion: reduce){
  .srf-panel,.srf-card,.srf-chev{transition:none}
  .srf-dot::after{animation:none}
}

/* ---------- Versión móvil (dentro del menú hamburguesa) ---------- */
.srm{
  --_accent:var(--sr-accent, #6EE287);
  --_line:var(--srm-line, color-mix(in srgb, currentColor 14%, transparent));
  margin-top:28px; padding-top:22px; border-top:1px solid var(--_line);
  font-family:var(--sr-font, inherit); text-transform:none; letter-spacing:normal;
}
.srm-head{margin-bottom:14px}
.srm-head strong{display:block; font-size:1.15rem; font-weight:600; margin-top:6px}
.srm-list{display:grid; gap:6px}
.srm-item{
  display:flex; align-items:center; gap:12px; padding:7px; border-radius:12px; text-decoration:none; color:inherit;
  border:1px solid transparent; transition:background .2s;
}
.srm-item:hover{background:color-mix(in srgb, currentColor 6%, transparent)}
.srm-item.is-current{border-color:color-mix(in srgb, var(--_accent) 55%, transparent); background:color-mix(in srgb, var(--_accent) 10%, transparent)}
.srm-item img{width:64px; height:44px; object-fit:cover; border-radius:8px; flex:0 0 auto}
.srm-item span{display:flex; flex-direction:column; min-width:0}
.srm-item b{font-size:.92rem; font-weight:600; line-height:1.25}
.srm-item small{font-size:.75rem; opacity:.65}
.srm-item em{margin-left:auto; font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--_accent)}
.srm-home{display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:.85rem; color:inherit; opacity:.8; text-decoration:none}
.srm-home svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2}

/* ---------- Apariciones compartidas ---------- */
html.js [data-reveal]{opacity:0; transform:translate3d(0,28px,0); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--reveal-delay,0ms)}
html.js [data-reveal="fade"]{transform:none}
html.js [data-reveal="left"]{transform:translate3d(-36px,0,0)}
html.js [data-reveal="right"]{transform:translate3d(36px,0,0)}
html.js [data-reveal="zoom"]{transform:scale(.96)}
html.js [data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{opacity:1; transform:none; transition:none}
  .sr-dot::after{animation:none}
}

/* ---------- Nota de prediseño (pie de página) ---------- */
.sr-credit{display:inline}
.sr-credit a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* =====================================================================
   Efectos premium compartidos
   ===================================================================== */

/* ---------- Cursor personalizado (html[data-cursor]) ----------
   Variables para personalizarlo en cada diseño:
   --cur-dot (tamaño punto)  --cur-dot-bg   --cur-ring (tamaño aro)  --cur-ring-border
   --cur-ring-bg  --cur-link-scale  --cur-label-size  --cur-label-bg  --cur-label-fg
   --cur-blend (mix-blend-mode)  --cur-lerp (suavidad, 0.1 a 0.3) */
html.has-cur, html.has-cur *{cursor:none !important}
html.has-cur input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
html.has-cur textarea, html.has-cur select{cursor:auto !important}
.cur{position:fixed; inset:0; pointer-events:none; z-index:10050}
.cur-dot,.cur-ring{position:fixed; left:0; top:0; pointer-events:none; opacity:0; will-change:transform; transition:opacity .25s}
html.cur-on .cur-dot, html.cur-on .cur-ring{opacity:1}
html.cur-hide .cur-dot, html.cur-hide .cur-ring{opacity:0}
.cur-dot::before{
  content:""; position:absolute; left:0; top:0;
  width:var(--cur-dot,8px); height:var(--cur-dot,8px); margin:calc(var(--cur-dot,8px) / -2) 0 0 calc(var(--cur-dot,8px) / -2);
  border-radius:var(--cur-dot-radius,50%); background:var(--cur-dot-bg,#fff);
  mix-blend-mode:var(--cur-blend,normal);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s, background .3s;
}
.cur-ring::before{
  content:""; position:absolute; left:0; top:0;
  width:var(--cur-ring,38px); height:var(--cur-ring,38px); margin:calc(var(--cur-ring,38px) / -2) 0 0 calc(var(--cur-ring,38px) / -2);
  border-radius:var(--cur-ring-radius,50%); border:var(--cur-ring-border,1px solid rgba(255,255,255,.6)); background:var(--cur-ring-bg,transparent);
  mix-blend-mode:var(--cur-blend,normal); box-sizing:border-box;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s, opacity .3s;
}
html.cur-link .cur-ring::before{transform:scale(var(--cur-link-scale,1.6)); background:var(--cur-link-bg,rgba(255,255,255,.08))}
html.cur-link .cur-dot::before{transform:scale(var(--cur-link-dot,.5))}
html.cur-down .cur-ring::before{transform:scale(.8)}
.cur-label{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%) scale(.3); opacity:0; white-space:nowrap;
  display:grid; place-items:center; width:var(--cur-label-size,92px); height:var(--cur-label-size,92px); border-radius:50%;
  background:var(--cur-label-bg,#fff); color:var(--cur-label-fg,#111);
  font:600 13px/1.1 var(--cur-label-font, var(--sr-font, system-ui, sans-serif)); letter-spacing:.01em; text-align:center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
/* Etiquetas largas (p. ej. en otros idiomas): pasan a dos líneas dentro del círculo */
.cur-label.cur-wrap{white-space:normal; box-sizing:border-box; padding:0 12px; line-height:1.15}
html.cur-text .cur-label{transform:translate(-50%,-50%) scale(1); opacity:1}
html.cur-text .cur-ring::before{opacity:0}
html.cur-text .cur-dot::before{opacity:0}
html.has-cur.cur-dark{--cur-dot-bg:var(--cur-dark-dot,#111); --cur-ring-border:var(--cur-dark-ring,1px solid rgba(0,0,0,.45))}
html.has-cur.cur-light{--cur-dot-bg:var(--cur-light-dot,#fff); --cur-ring-border:var(--cur-light-ring,1px solid rgba(255,255,255,.6))}

/* ---------- Titulares palabra a palabra (data-split) ---------- */
.is-split .sw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.is-split .swi{display:inline-block; transform:translateY(105%); transition:transform .9s cubic-bezier(.2,.75,.15,1); transition-delay:calc(var(--split-delay,0ms) + var(--wi,0) * 55ms)}
.is-split.is-in .swi{transform:none}
@media (prefers-reduced-motion: reduce){ .is-split .swi{transform:none; transition:none} }

/* ---------- Revelado de imágenes ---------- */
html.js [data-reveal="clip"]{opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.2s cubic-bezier(.77,0,.18,1); transition-delay:var(--reveal-delay,0ms)}
html.js [data-reveal="clip-left"]{opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1.2s cubic-bezier(.77,0,.18,1); transition-delay:var(--reveal-delay,0ms)}
html.js [data-reveal="clip"].is-in, html.js [data-reveal="clip-left"].is-in{clip-path:inset(0 0 0 0)}
html.js [data-reveal="clip"] img, html.js [data-reveal="clip-left"] img{transform:scale(1.18); transition:transform 1.8s cubic-bezier(.2,.75,.15,1); transition-delay:var(--reveal-delay,0ms)}
html.js [data-reveal="clip"].is-in img, html.js [data-reveal="clip-left"].is-in img{transform:scale(1)}
html.js [data-reveal="blur"]{transform:scale(1.02); filter:blur(14px); transition:opacity 1s, transform 1.2s cubic-bezier(.2,.75,.15,1), filter 1.1s; transition-delay:var(--reveal-delay,0ms)}
html.js [data-reveal="blur"].is-in{filter:none}
@media (prefers-reduced-motion: reduce){
  html.js [data-reveal="clip"], html.js [data-reveal="clip-left"]{clip-path:none}
  html.js [data-reveal="clip"] img, html.js [data-reveal="clip-left"] img{transform:none}
  html.js [data-reveal="blur"]{filter:none}
}

/* ---------- Magnéticos e inclinación ---------- */
[data-magnetic]{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[data-tilt]{transition:transform .5s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; will-change:transform}



/* ---------- Tarjeta "¿Y tu sector?" ---------- */
.you-thumb{display:grid !important; place-items:center; background:linear-gradient(135deg,#0049FD,#3D74FF 55%,#6EE287) !important; border-color:transparent !important}
.you-plus{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font:300 28px/1 system-ui,sans-serif; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sr-you:hover .you-plus,.srf-you:hover .you-plus{transform:rotate(90deg) scale(1.08)}
@media (max-width:980px){ .sr-you .you-plus{width:32px; height:32px; font-size:22px} }

/* ---------- Barra superior de DigiAcción: prediseño web gratis ---------- */
.srb{position:relative; z-index:9000; background:#070B1A; color:#F4F6FB; border-bottom:1px solid rgba(110,226,135,.22);
  font-family:var(--sr-font, system-ui, -apple-system, "Segoe UI", sans-serif); text-transform:none; letter-spacing:normal; line-height:1.3}
.srb::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 140% at 50% 0%, rgba(0,73,253,.35), transparent 70%); pointer-events:none}
.srb-in{position:relative; display:flex; align-items:center; justify-content:center; gap:10px 16px; flex-wrap:wrap; max-width:1320px; margin:0 auto; padding:9px 20px}
.srb-logo{display:inline-flex; flex:0 0 auto}
.srb-logo .sr-logo{width:15px; height:auto}
.srb-txt{margin:0; font-size:14.5px; text-align:center}
.srb-txt b{font-weight:600; color:#fff}
.srb-txt em{font-style:italic; font-weight:400; color:rgba(244,246,251,.72)}
.srb-btn{display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:7px 14px; border-radius:999px; background:#6EE287; color:#070B1A; font-size:13.5px; font-weight:700; line-height:1; text-decoration:none; transition:transform .25s, box-shadow .25s}
.srb-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2}
.srb-btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(110,226,135,.8)}
.srb a:focus-visible{outline:2px solid #6EE287; outline-offset:3px}
@media (max-width:640px){
  .srb-in{flex-wrap:nowrap; justify-content:space-between; gap:12px; padding:8px 14px}
  .srb-logo{display:none}
  .srb-txt{font-size:min(13px, 3.3vw); text-align:left; line-height:1.25; min-width:0}
  .srb-txt b,.srb-txt em{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .srb-txt b,.srb-txt em{display:block}
  .srb-txt em{font-size:min(12px, 3.1vw); margin-top:1px}
  .srb-btn{padding:8px 12px; font-size:12.5px}
}
@media (max-width:400px){ .srb-btn svg{display:none} .srb-btn{padding:8px 11px} }

/* ---------- Oferta bajo el botón del pie ---------- */
.srf-offer{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 16px; margin:-6px 0 0; padding:0 0 30px; text-align:center; font-size:16px; line-height:1.4}
.srf-offer-txt b{font-weight:600}
.srf-offer-txt em{font-style:italic; opacity:.72}
.srf-offer-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; background:var(--srf-acc); color:#070B1A; font-size:15px; font-weight:700; line-height:1; text-decoration:none; transition:transform .25s, box-shadow .25s}
.srf-offer-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2}
.srf-offer-btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(110,226,135,.8)}
.srf.is-open .srf-offer{padding-bottom:22px}
@media (max-width:760px){ .srf-offer{font-size:15px; padding-bottom:26px} .srf-offer-txt{flex:1 1 100%} .srf-offer-txt b,.srf-offer-txt em{display:block} }

/* ---------- Selector de idioma (ES, CA, EN, FR) ---------- */
.srl{display:none}
@media (min-width:1000px){
  .srb-in{padding-left:128px; padding-right:128px}
  .srb .srl{display:block; position:absolute; right:20px; top:50%; transform:translateY(-50%)}
}
.srl-btn{display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 11px; border-radius:999px; border:1px solid rgba(244,246,251,.24); background:rgba(255,255,255,.04); color:#F4F6FB; font:600 14.5px/1 var(--sr-font, system-ui, sans-serif); letter-spacing:.04em; cursor:pointer; transition:border-color .25s, background .25s}
.srl-btn:hover,.srl.is-open .srl-btn{border-color:rgba(110,226,135,.7); background:rgba(110,226,135,.08)}
.srl-btn:focus-visible{outline:2px solid #6EE287; outline-offset:2px}
.srl-btn .srl-globe{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7}
.srl-btn .sr-chev{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; transition:transform .25s}
.srl.is-open .srl-btn .sr-chev{transform:rotate(180deg)}
.srl-menu{position:absolute; right:0; top:calc(100% + 9px); min-width:206px; padding:7px; border-radius:16px; background:#0B1124; border:1px solid rgba(255,255,255,.12); box-shadow:0 22px 50px -18px rgba(0,0,0,.75); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility 0s .2s; z-index:9001}
.srl.is-open .srl-menu{opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .2s}
.srl-opt{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:#F4F6FB; text-decoration:none; font:500 15px/1.2 var(--sr-font, system-ui, sans-serif)}
.srl-opt:hover,.srl-opt:focus-visible{background:rgba(255,255,255,.07); outline:none}
.srl-code{display:inline-grid; place-items:center; min-width:28px; padding:3px 5px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.06em; background:rgba(255,255,255,.09)}
.srl-opt .srl-code{min-width:30px; padding:4px 5px; font-size:11.5px}
.srl-opt.is-current .srl-code{background:#6EE287; color:#070B1A}
.srl-opt.is-current{font-weight:600}
.srl-row{display:flex; flex-wrap:wrap; gap:7px}
.srl-pill{display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border-radius:999px; border:1px solid rgba(128,128,128,.38); color:inherit; text-decoration:none; font-size:14px; line-height:1.2; opacity:.82; transition:opacity .2s, border-color .2s, background .2s}
.srl-pill .srl-code{background:rgba(128,128,128,.18)}
.srl-pill:hover{opacity:1; border-color:currentColor}
.srl-pill.is-current{opacity:1; border-color:currentColor; font-weight:600}
.srl-pill.is-current .srl-code{background:#6EE287; color:#070B1A}
.srl-pill:focus-visible{outline:2px solid #6EE287; outline-offset:2px}
.sr-head-acts{display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap}
.sr-langs .srl-name{display:none}
.sr-langs .srl-pill{padding:6px; gap:0}
.sr-langs .srl-pill .srl-code{min-width:28px}
.srm-langs{margin:2px 0 16px}
.srf-langs{justify-content:center; margin:-14px 0 30px}
.srf.is-open .srf-langs{margin-bottom:22px}
@media (max-width:760px){ .srf-langs{margin:-10px 0 26px} }
@media (max-width:540px){ .srm-langs .srl-code,.srf-langs .srl-code{display:none} .srm-langs .srl-pill,.srf-langs .srl-pill{padding:7px 13px} }
@media (max-width:400px){ .srf-bar::before,.srf-bar::after{display:none} .srf-bar{justify-content:center} .srf-toggle{font-size:14.5px; gap:8px; padding:12px 13px 12px 15px; max-width:100%} .srf-n{min-width:26px; height:26px; font-size:12.5px} }
@media (max-width:400px){
  .srl-row.srm-langs,.srl-row.srf-langs,.srl-row.ft-langs{gap:5px}
  .srl-row.srm-langs .srl-pill,.srl-row.srf-langs .srl-pill,.srl-row.ft-langs .srl-pill{padding:7px 10px; font-size:13px}
}
@media (max-width:340px){
  .srl-row.srm-langs,.srl-row.srf-langs,.srl-row.ft-langs{gap:4px}
  .srl-row.srm-langs .srl-pill,.srl-row.srf-langs .srl-pill,.srl-row.ft-langs .srl-pill{padding:7px 8px; font-size:12.5px}
}