/* guia-nueva.css — La Guía de servicios convertida en la página SERVICIOS de la web (07-11-2026).
   Va la ÚLTIMA: misma línea que la portada (negro #151515, Inter Tight, blanco + RGB del logo solo como acento).
   La barra de arriba y el pie son los de la web (prueba-comun.php). */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --bg:#151515 !important;--bg-soft:#181818 !important;--bg-card:#1b1b1b !important;--line:#2a2a2a !important;--line-strong:#3a3a3a !important;
  --ink:#f2f2f2 !important;--ink-2:#cfcfcf !important;--ink-3:#9b9b9b !important;--teal:#ffffff !important;--teal-deep:#e6e6e6 !important;
  --logoR:#f72d00;--logoG:#3fa73f;--logoB:#1a75bb;color-scheme:dark}
html,body{background:#151515 !important;color:#f2f2f2}
body,button,input,select,textarea,h1,h2,h3,h4{font-family:"Inter Tight",system-ui,sans-serif !important;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:-.02em}

/* barra de arriba: idéntica a la de la portada */
.barra{position:fixed;inset:14px 14px auto;z-index:50;display:flex;align-items:center;gap:22px;padding:10px 12px 10px 20px;border-radius:999px;
  background:rgba(30,30,30,.55);backdrop-filter:saturate(1.2) blur(18px);-webkit-backdrop-filter:saturate(1.2) blur(18px);
  border:1px solid rgba(255,255,255,.07);max-width:1080px;margin:0 auto}
.barra a{color:inherit;text-decoration:none}
.marca{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;color:#fff}
.marca .logo{height:26px;width:auto}
.marca span{display:flex;flex-direction:column;line-height:1.05}
.marca small{font-size:11px;font-weight:400;color:#fff;letter-spacing:.02em}
.menu{display:flex;gap:22px;margin-left:auto;font-size:14px;color:#cfcfcf}
.menu a:hover,.menu a[aria-current]{color:#fff}
.menu a[aria-current]{position:relative}
.menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--logoR),var(--logoG),var(--logoB))}
.idioma{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18)}
.idioma a{display:grid;place-items:center;width:38px;height:28px;border-radius:999px;opacity:.45;transition:opacity .25s,background .25s}
.idioma a:hover{opacity:.8}.idioma a[aria-pressed="true"]{opacity:1;background:rgba(255,255,255,.16)}
.idioma img{width:24px;height:17px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 20px;font-size:15px;font-weight:500;transition:background .3s}
.boton.rojo{background:#ff0000;color:#fff}
@media (max-width:980px){.menu{display:none}}

/* cabecera de la guía, como las páginas nuevas */
.g-hero{padding:140px 0 34px !important;border-bottom:1px solid #222 !important}
.g-hero__badge{color:#cfcfcf !important;border-color:#333 !important;letter-spacing:.02em !important;text-transform:none !important;font-size:12.5px !important}
.g-hero h1{font-weight:500 !important;letter-spacing:-.04em !important;font-size:clamp(34px,5vw,64px) !important}
.g-hero__bajada{color:#9b9b9b !important}
.g-layout{padding-top:36px !important}
.g-side{top:100px !important}
.g-side__t,.g-aside__t{letter-spacing:0 !important;text-transform:none !important;font-size:12px !important;color:#8a8a8a !important}
.g-side a.is-active{background:rgba(255,255,255,.06) !important;box-shadow:inset 2px 0 0 #fff !important;color:#fff !important}
.g-card{background:#1b1b1b !important;border-color:#2a2a2a !important;border-radius:18px !important;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s !important}
.g-card:hover{border-color:#353535 !important;background:#1b1b1b !important;box-shadow:-12px 0 34px -22px #ff0000,12px 0 34px -22px #0000ff,0 16px 34px -22px #00ff00}
.g-card__n,.g-main__n{color:#9b9b9b !important;letter-spacing:.06em !important}
.g-main__head{border-color:#222 !important}
.g-aside__card{background:#1b1b1b !important;border-color:#2a2a2a !important;border-radius:16px !important}
.g-aside__card a{background:transparent !important;border:1px solid rgba(255,255,255,.22) !important;color:#fff !important;border-radius:999px !important}
.g-aside__card a:hover{box-shadow:-6px 0 16px -6px #ff0000,6px 0 16px -6px #0000ff,0 6px 16px -6px #00ff00}
.g-nav a{background:#1b1b1b !important;border-color:#2a2a2a !important;border-radius:16px !important}
.g-nav a:hover{border-color:#3a3a3a !important}
a{text-underline-offset:3px}