/* ==========================================================================
   Fedomu Services Catalog — Linear Dense Theme
   ========================================================================== */

/* ── Grain — capa de textura cinematográfica sobre todo el fondo ── */
body::before{
  content:'';
  position:fixed;inset:0;
  z-index:100;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.032;
  mix-blend-mode:overlay;
}

/* ─── Design Tokens (Fedomu — 9 colores cerrados) ───── */
.fedomu-svc-catalog-v2{
  --blue:     var(--wp--preset--color--boulevard-blue);
  --gold:     var(--wp--preset--color--fedomu-gold);
  --red:      var(--wp--preset--color--fedomu-red);
  --teal:     var(--wp--preset--color--fedomu-teal);
  --ink:      var(--wp--preset--color--boulevard-dark);
  --white:    var(--wp--preset--color--white);
  --off:      var(--wp--preset--color--off-white);

  --blue-light:  #6691d4;
  --red-light:   #e06070;
  --teal-light:  #3db8a0;

  --gold-dim:    rgba(212,175,55,.30);
  --gold-mid:    rgba(212,175,55,.65);
  --gold-glow:   rgba(212,175,55,.45);
  --gold-full:   rgba(212,175,55,.85);

  --r:        12px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-snappy: cubic-bezier(0.22,1,0.36,1);
  --font:     'Inter', system-ui, sans-serif;
  --section-bg: #0a0a0a;
  --card-bg:    rgba(4,8,24,.70);
}

/* ─── Section header ─────────────────────────────────── */
.srv-ml{
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:.625rem;
}
.srv-ml-gold{color:var(--gold)}
.srv-sh{margin-bottom:1.75rem;}
.srv-sh-title{
  font-size:clamp(24px,4vw,42px);
  font-weight:700;letter-spacing:-.045em;line-height:1.0;
  color:#fff;
  margin: 0;
}
.srv-sh-row{
  display:flex;align-items:flex-end;
  justify-content:space-between;gap:1rem;flex-wrap:wrap
}
.srv-aw{color:#fff}
.srv-ag{color:var(--gold)}

/* ─── Reveal: default visible ────────────────────────── */
.r{opacity:1;transform:none;filter:none}

@media(prefers-reduced-motion:no-preference){
  .r{
    opacity:0;transform:translateY(14px);
    transition:opacity .65s var(--ease-out),transform .65s var(--ease-out);
  }
  .r.on{opacity:1;transform:none}
}

/* ════════════════════════════════════════════════════════════
   CAPA 0 ──── FONDO DE SECCIÓN
   ════════════════════════════════════════════════════════════ */

.fedomu-svc-catalog-v2{
  position:relative;
  overflow:hidden;
  background: var(--section-bg);
  padding: 4rem 0;
}
.fedomu-svc-catalog-v2 .srv-container{ position:relative; z-index:2; max-width: 1440px; margin: 0 auto; padding: 0 1.25rem; }
@media(min-width:1280px){.fedomu-svc-catalog-v2 .srv-container{padding:0 3rem}}

.srv-section-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.srv-topo-canvas{
  position:absolute; inset:0; width:100%;height:100%;
  opacity:.45; mix-blend-mode:screen;
}

.srv-aurora-1, .srv-aurora-2, .srv-aurora-3, .srv-aurora-4{
  position:absolute; border-radius:50%; pointer-events:none;
  will-change:transform; contain:layout style paint;
}
.srv-aurora-1{
  width:90%; height:75%; top:-25%; left:-20%;
  background:radial-gradient(ellipse at center, rgba(0,51,160,.80) 0%, rgba(0,40,130,.45) 35%, transparent 70%);
  filter:blur(88px);
}
.srv-aurora-2{
  width:70%; height:65%; bottom:-20%; right:-15%;
  background:radial-gradient(ellipse at center, rgba(10,60,180,.70) 0%, rgba(0,51,160,.35) 40%, transparent 70%);
  filter:blur(72px);
}
.srv-aurora-3{
  width:45%; height:50%; top:20%; left:35%;
  background:radial-gradient(ellipse at center, rgba(212,175,55,.22) 0%, rgba(200,160,40,.08) 45%, transparent 70%);
  filter:blur(64px);
}
.srv-aurora-4{
  width:40%; height:45%; bottom:-10%; left:5%;
  background:radial-gradient(ellipse at center, rgba(0,128,128,.20) 0%, rgba(0,100,100,.07) 45%, transparent 70%);
  filter:blur(60px);
}

@keyframes auroraA{
  0%,100%{ transform:translate(0%, 0%) scale(1) }
  33%    { transform:translate(18%, 12%) scale(1.08) }
  66%    { transform:translate(-8%, 18%) scale(0.94) }
}
@keyframes auroraB{
  0%,100%{ transform:translate(0%, 0%) scale(1) }
  40%    { transform:translate(-14%,-10%) scale(1.10) }
  72%    { transform:translate(10%, -14%) scale(0.96) }
}
@keyframes auroraC{
  0%,100%{ transform:translate(0%, 0%) scale(1) }
  50%    { transform:translate(-22%, 18%) scale(1.25) }
}
@keyframes auroraD{
  0%,100%{ transform:translate(0%, 0%) scale(1) }
  38%    { transform:translate(18%, -12%) scale(1.12) }
  75%    { transform:translate(-10%, -6%) scale(0.92) }
}
@media(prefers-reduced-motion:no-preference){
  .srv-aurora-1{ animation:auroraA 30s ease-in-out infinite }
  .srv-aurora-2{ animation:auroraB 22s ease-in-out infinite; animation-delay:-9s }
  .srv-aurora-3{ animation:auroraC 18s ease-in-out infinite; animation-delay:-5s }
  .srv-aurora-4{ animation:auroraD 26s ease-in-out infinite; animation-delay:-13s }
}
@media(max-width:768px){
  .srv-aurora-1{ filter:blur(32px) }
  .srv-aurora-2{ filter:blur(24px) }
  .srv-aurora-3, .srv-aurora-4{ display:none }
  .srv-topo-canvas{ display:none }
}
.srv-section-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, var(--section-bg) 0%, transparent 18%, transparent 82%, var(--section-bg) 100%),
    linear-gradient(to right,  var(--section-bg) 0%, transparent 10%, transparent 90%, var(--section-bg) 100%);
}

/* ════════════════════════════════════════════════════════════
   CAPA 1 ──── GRID DE SERVICIOS
   ════════════════════════════════════════════════════════════ */

.srv-layout{ display:grid; grid-template-columns:1fr; gap:0; }
@media(min-width:900px){ .srv-layout{ grid-template-columns:280px 1fr; align-items:stretch; } }
@media(min-width:1200px){ .srv-layout{ grid-template-columns:320px 1fr; } }

/* ── Panel manifesto ── */
.srv-panel{
  background:var(--blue); border-radius:var(--r) 0 0 var(--r);
  padding:2.25rem 1.875rem; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden; min-height:280px;
}
@media(max-width:899px){ .srv-panel{ border-radius:var(--r) var(--r) 0 0; min-height:auto; } }
.srv-panel::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
}
.srv-panel::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent); z-index:1;
  transform-origin:left center; transform:scaleX(0);
}
@media(prefers-reduced-motion:no-preference){
  .srv-panel.on::after{ animation:goldDraw 1.3s var(--ease-out) forwards; }
  @keyframes goldDraw{
    0%  { transform:scaleX(0); box-shadow:none }
    50% { transform:scaleX(1); box-shadow:none }
    72% { transform:scaleX(1); box-shadow:0 0 20px 7px var(--gold-glow) }
    100%{ transform:scaleX(1); box-shadow:none }
  }
}
@media(prefers-reduced-motion:reduce){ .srv-panel::after{ transform:scaleX(1); } }
.srv-panel > *{ position:relative; z-index:1; }

.srv-panel-orb{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(75% 65% at 15% 90%, rgba(255,255,255,.10) 0%, transparent 70%),
    radial-gradient(45% 40% at 85% 15%, rgba(212,175,55,.07) 0%, transparent 60%);
}
@keyframes orbBreathe{
  0%,100%{ opacity:.6; transform:scale(1) }
  40%    { opacity:1; transform:scale(1.08) }
  70%    { opacity:.75; transform:scale(.97) }
}
@media(prefers-reduced-motion:no-preference){ .srv-panel-orb{ animation:orbBreathe 28s ease-in-out infinite; } }

.srv-panel-module{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--gold); margin-bottom:1.125rem; }
.srv-panel-title{ font-size:clamp(22px,2.8vw,34px); font-weight:700; letter-spacing:-.04em; line-height:1.05; color:#fff; margin:0 0 1rem; }
.srv-panel-title .w{ display:inline-block; }
.w-hero{ color:#ffffff; }
.srv-panel-static{ display:inline; }
.srv-panel-sub{ font-size:12px; color:rgba(255,255,255,.65); line-height:1.7; font-weight:400; margin: 0; }

@media(prefers-reduced-motion:no-preference){
  .srv-panel-title .w{
    clip-path:inset(0 0 100% 0); transform:translateY(7px);
    transition: clip-path 480ms calc(180ms + var(--wi,0)*55ms) var(--ease-snappy), transform 480ms calc(180ms + var(--wi,0)*55ms) var(--ease-snappy);
  }
  .srv-panel.on .srv-panel-title .w{ clip-path:inset(0 0 0% 0); transform:translateY(0); }
  .srv-panel-title .w-hero, .srv-panel-title .w-secondary{ clip-path:none !important; transform:none !important; transition:none !important; }
  .srv-panel-static{ opacity:0; transition:opacity 480ms 180ms var(--ease-snappy); }
  .srv-panel.on .srv-panel-static{ opacity:1; }
}

.srv-steps{ list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-direction:column; gap:10px; }
.srv-step{ display:flex; align-items:center; gap:10px; }
.srv-step-ring{ position:relative; flex-shrink:0; width:28px; height:28px; }
.srv-step-ring svg{ display:block; transform:rotate(-90deg); }
.srv-ring-track{ fill:none; stroke:var(--gold-dim); stroke-width:1.5; }
.srv-ring-fill{ fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:75.4; stroke-dashoffset:75.4; }
@media(prefers-reduced-motion:no-preference){
  .srv-panel.on .srv-ring-fill{ stroke-dashoffset:0; transition:stroke-dashoffset 600ms calc(1200ms + var(--si,0) * 220ms) var(--ease-out); }
}
@media(prefers-reduced-motion:reduce){ .srv-ring-fill{ stroke-dashoffset:0; } }
.srv-step-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gold); line-height:1; }
.srv-step-text{ font-size:13px; font-weight:500; color:rgba(255,255,255,.80); letter-spacing:.03em; line-height:1.3; margin: 0; }
@media(prefers-reduced-motion:no-preference){
  .srv-step-text{ clip-path:inset(0 100% 0 0); transition:clip-path 450ms calc(1350ms + var(--si,0) * 220ms) var(--ease-out); }
  .srv-panel.on .srv-step-text{ clip-path:inset(0 0% 0 0); }
}
.srv-panel-foot{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:.75rem;
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--gold);
}
.srv-panel-foot::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0; }

.srv-grid{
  display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.06);
  position:relative; overflow:hidden;
}
.srv-scan{ position:absolute; inset:0; pointer-events:none; z-index:10; overflow:hidden; }
.srv-scan-beam{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-mid) 25%, rgba(255,255,255,.5) 50%, var(--gold-mid) 75%, transparent);
  box-shadow:0 0 28px 12px rgba(212,175,55,.07); transform:translateY(-3px);
}
@media(prefers-reduced-motion:no-preference){
  .srv-scan.active .srv-scan-beam{ animation:scanSweep 1100ms cubic-bezier(0.16,1,0.3,1) forwards; }
}
@keyframes scanSweep{ from{ transform:translateY(-3px) } to{ transform:translateY(100%) } }
@media(min-width:480px){.srv-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.srv-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.srv-grid{grid-template-columns:repeat(4,1fr)}}

/* ━━ TARJETA HORIZONTAL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.svc{
  background:var(--card-bg); padding:1.625rem 1.375rem; position:relative; overflow:hidden;
  display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto 1fr auto; column-gap:14px;
  cursor:pointer; outline:none; text-decoration:none;
  box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.04) inset, inset 2px 0 0 rgba(var(--svc-rgb,0,51,160),.30);
  transition: background 300ms cubic-bezier(0.23,1,0.32,1), box-shadow 400ms cubic-bezier(0.23,1,0.32,1), transform 400ms cubic-bezier(0.23,1,0.32,1);
}
.svc:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; z-index:2; }
.svc:hover,.svc:focus-visible{
  will-change:transform; background:rgba(0,33,160,.12);
  box-shadow: 0 2px 4px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.45), 0 32px 64px rgba(0,0,0,.30), 0 0 0 1px rgba(var(--svc-rgb,0,51,160),.18) inset, inset 3px 0 0 rgba(var(--svc-rgb,0,51,160),.70);
}
.svc:active{
  transform:scale(0.965) translateY(2px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--svc-rgb,0,51,160),.12) inset !important;
  transition: transform 100ms cubic-bezier(0.23,1,0.32,1), box-shadow 100ms cubic-bezier(0.23,1,0.32,1) !important;
}
@media(prefers-reduced-motion:no-preference){
  .svc.r{
    opacity:0; transform:translateY(14px); filter:blur(3px);
    transition: opacity 580ms cubic-bezier(0.32,0.72,0,1), transform 580ms cubic-bezier(0.32,0.72,0,1), filter 580ms cubic-bezier(0.32,0.72,0,1), background 300ms cubic-bezier(0.23,1,0.32,1), box-shadow 400ms cubic-bezier(0.23,1,0.32,1);
  }
  .svc.r.on{opacity:1;transform:translateY(0);filter:blur(0)}
}
.svc::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 60%,transparent); pointer-events:none; z-index:1;
}
.svc::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,-300px) var(--my,-300px), rgba(var(--svc-rgb,0,51,160),.08), transparent 60%);
  opacity:0; transition:opacity .3s;
}
.svc:hover::after,.svc:focus-visible::after{opacity:1}
.svc > *{position:relative;z-index:1}
.svc-blue{--svc-accent:var(--blue-light);--svc-rgb:0,51,160}
.svc-gold{--svc-accent:var(--gold);--svc-rgb:212,175,55}
.svc-red {--svc-accent:var(--red-light);--svc-rgb:196,30,58}
.svc-teal{--svc-accent:var(--teal-light);--svc-rgb:0,128,128}

.svc-icon{
  width:36px; height:36px; border-radius:9px; border:1px solid rgba(var(--svc-rgb,0,51,160),.3);
  background:rgba(var(--svc-rgb,0,51,160),.12); display:flex; align-items:center; justify-content:center;
  color:var(--svc-accent,#6691d4); flex-shrink:0; grid-column:1; grid-row:1; align-self:center;
}
.svc-icon svg{width:18px; height:18px}
@keyframes iconPop{ 0%{transform:scale(1) rotate(0deg)} 40%{transform:scale(1.35) rotate(-10deg)} 70%{transform:scale(1.12) rotate(-4deg)} 100%{transform:scale(1) rotate(0deg)} }
@media(prefers-reduced-motion:no-preference){ .svc:hover .svc-icon, .svc:focus-visible .svc-icon{ animation: iconPop 380ms var(--ease-snappy) both; } }

.svc-body{display:contents}
.svc-title{ text-wrap:balance; font-size:12px; font-weight:700; letter-spacing:.05em; line-height:1.2; color:#fff; text-transform:uppercase; grid-column:2; grid-row:1; align-self:center; margin: 0; }
.svc-desc{ font-size:11px; color:rgba(255,255,255,.68); line-height:1.65; padding-top:.875rem; grid-column:1 / span 2; grid-row:2; margin: 0; }

.svc-cta{ display:flex; flex-direction:row; align-items:center; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); grid-column:1 / span 2; grid-row:3; }
.svc-cta-row{ display:inline-flex; align-items:center; justify-content:space-between; gap:6px; padding:5px 11px 5px 13px; border-radius:100px; border:1px solid rgba(var(--svc-rgb,0,51,160),.38); background:rgba(var(--svc-rgb,0,51,160),.10); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.10em; color:var(--svc-accent,var(--blue-light)); overflow:visible; }
.svc-cta-row svg{flex-shrink:0; width:11px; height:11px}
.svc-cta-free{ margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; padding:5px 10px; border-radius:100px; border:1px solid rgba(var(--svc-rgb,0,51,160),.28); color:var(--svc-accent,var(--blue-light)); opacity:.85; transition:opacity 200ms, border-color 200ms; }

@media(prefers-reduced-motion:no-preference){
  .svc-cta-row{ transition: gap 280ms var(--ease-out), color 220ms, background 220ms var(--ease-out), border-color 220ms var(--ease-out); }
  .svc:hover .svc-cta-row, .svc:focus-visible .svc-cta-row{ gap:9px; background:rgba(var(--svc-rgb,0,51,160),.22); border-color:rgba(var(--svc-rgb,0,51,160),.68); color:#fff; }
  .svc:hover .svc-cta-free, .svc:focus-visible .svc-cta-free{ opacity:.95; border-color:rgba(var(--svc-rgb,0,51,160),.55); }
  .svc-cta-row svg{ transition:transform 320ms var(--ease-out) }
}
@keyframes arrowMag{ 0%{transform:translateX(0) scale(1) rotate(0deg)} 28%{transform:translateX(8px) scale(1.35) rotate(-22deg)} 62%{transform:translateX(6px) scale(1.25) rotate(-8deg)} 100%{transform:translateX(6px) scale(1.2) rotate(0deg)} }

.svc-contact{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; background:rgba(255,255,255,.015); grid-template-columns:unset; grid-template-rows:unset; }
.svc-contact-eye{ font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:rgba(255,255,255,.55); line-height:1; }
.svc-contact-rule{ width:28px; height:1px; background:rgba(255,255,255,.18); margin:.75rem 0; flex-shrink:0; }
.svc-contact-headline{ font-family:var(--wp--preset--font-family--sans); font-size:clamp(15px,1.5vw,19px); font-weight:600; line-height:1.30; letter-spacing:-.01em; color:#fff; text-align:center; flex:1; display:flex; align-items:center; justify-content:center; margin: 0; }
.svc-contact .svc-cta{ display:flex; align-items:center; gap:8px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); width:100%; }
.svc-contact .svc-cta-row{ --svc-rgb:255,255,255; color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }

/* ════════════════════════════════════════════════════════════
   MODAL / SIDEBAR DRAWER (SPA) - COLOR FIXED & EXPANDED
   ════════════════════════════════════════════════════════════ */

#srv-drawer {
    --d-rgb: 0, 51, 160;
    --d-accent: var(--blue); /* Darker blue for light BG */
    
    width: 100%;
    max-width: 580px; /* Ancho mayor para evitar scroll */
    height: 100vh;
    height: 100dvh;
    background: rgba(255, 255, 255, 0.98); /* Fondo blanco casi sólido */
    border-left: 1px solid rgba(0,0,0, 0.08); /* Borde sutil */
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    outline: none;
    position: relative;
    /* Remove backdrop blur for drawer content, we only want it strictly on the backdrop overlay */
}

#srv-drawer[data-theme="blue"] { --d-rgb: 0, 51, 160; --d-accent: var(--blue-light); }
#srv-drawer[data-theme="gold"] { --d-rgb: 212, 175, 55; --d-accent: var(--gold); }
#srv-drawer[data-theme="red"] { --d-rgb: 196, 30, 58; --d-accent: var(--red-light); }
#srv-drawer[data-theme="teal"] { --d-rgb: 0, 128, 128; --d-accent: var(--teal-light); }

#srv-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 4, 8, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s ease;
}

#srv-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: all;
}

#srv-drawer-backdrop.is-open #srv-drawer {
    transform: translateX(0);
}

.srv-drawer-header {
    padding: 3.5rem 2.5rem 2.5rem;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0, 0.06);
    background: #01329C; /* Solicitado por el usuario */
    transition: background 0.4s;
}

.srv-drawer-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15); /* Ajustado para contraste sobre azul oscuro */
    color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.srv-drawer-close:hover {
    background: rgba(255,255,255, 0.25); 
    border-color: rgba(255,255,255, 0.4);
    color: #fff;
    transform: rotate(90deg) scale(1.1);
}

.srv-drawer-headline {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.srv-drawer-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(255,255,255, 0.15); /* Ajustado para el fondo azul oscuro */
    border: 1px solid rgba(255,255,255, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    transition: background 0.4s, border-color 0.4s, color 0.4s;
}

.srv-drawer-icon svg {
    width: 28px;
    height: 28px;
}

.srv-drawer-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #ffffff; /* Blanco solicitado */
    margin-bottom: 0.35rem;
}

.srv-drawer-title {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #D3AC35; /* Dorado solicitado */
    margin: 0;
}

.srv-drawer-body {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.srv-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.srv-drawer-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(0,0,0,0.45);
    margin: 0;
}

.srv-drawer-text {
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(0,0,0,0.8);
    margin: 0;
}

/* Bento grid internal in drawer - Horizontal para evitar scroll vertical */
.srv-drawer-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.srv-bento-card {
    background: rgba(0,0,0, 0.02); /* Fondo neutral sobre blanco */
    border: 1px solid rgba(0,0,0, 0.04); /* Borde claro */
    border-radius: 12px;
    padding: 1.125rem 1.25rem;
    display: flex;
    flex-direction: row; /* Horizontal */
    align-items: center;
    gap: 0.875rem;
    transition: background 0.4s, border-color 0.4s;
}

.srv-bento-card:hover {
    background: rgba(var(--d-rgb), 0.03);
    border-color: rgba(var(--d-rgb), 0.15); /* Solo acentuar en hover */
}

.srv-bento-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(var(--d-rgb), 0.08); /* Acento principal */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-accent);
    transition: background 0.4s, color 0.4s;
}
.srv-bento-icon svg { width: 18px; height: 18px; }

.srv-bento-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.5); /* Oscuro sobre blanco */
    margin-bottom: 0.25rem;
}

.srv-bento-val {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink); /* Texto oscuro para visibilidad */
    line-height: 1.3;
}

.srv-drawer-footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.srv-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: rgba(var(--d-rgb), 1); /* Acento principal */
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    padding: 1.125rem;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(var(--d-rgb), 0.25);
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    text-decoration: none;
}

.srv-btn-primary:hover {
    background: var(--d-accent);
    box-shadow: 0 6px 20px rgba(var(--d-rgb), 0.4);
    color: #fff;
}
.srv-btn-primary:active {
    transform: scale(0.98);
}

.srv-drawer-disclaimer {
    font-size: 11px;
    color: rgba(0,0,0,0.4);
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 1.5;
    text-align: center;
    padding-top: 2rem;
}

/* ── Drawer Two-View Flip System ─────────────────────────── */
.srv-drawer-view {
    display: none;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    animation: viewIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.srv-drawer-view.active {
    display: flex;
}

@keyframes viewIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── In-Drawer Request Form ──────────────────────────────── */
.srv-drawer-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.srv-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.srv-form-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.5);
}

.srv-form-input,
.srv-form-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background: #f5f7fa;
    border: 1.5px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--wp--preset--font-family--sans);
    color: #0a0a0a;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.srv-form-input:focus,
.srv-form-textarea:focus {
    border-color: rgba(var(--d-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--d-rgb), 0.08);
    background: #fff;
}

.srv-form-input:invalid:not(:placeholder-shown),
.srv-form-textarea:invalid:not(:placeholder-shown) {
    border-color: rgba(196,30,58,0.5);
}

.srv-input-readonly {
    background: rgba(var(--d-rgb), 0.04);
    border-color: rgba(var(--d-rgb), 0.15);
    color: rgba(var(--d-rgb), 1);
    font-weight: 600;
    cursor: default;
}

.srv-form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Stagger Animations inside Drawer */
.drawer-r {
    opacity: 0;
    transform: translateY(12px);
}

@media(prefers-reduced-motion:no-preference){
    .drawer-r {
        transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
        transition-delay: var(--d, 0ms);
    }
    #srv-drawer-backdrop.is-open .drawer-r {
        opacity: 1;
        transform: translateY(0);
    }
}
@media(prefers-reduced-motion:reduce){
    #srv-drawer-backdrop.is-open .drawer-r {
        opacity: 1;
        transform: translateY(0);
    }
}