/*
 * single-tramite.css — v8.0
 * ══════════════════════════════════════════════════════
 * BASE: v7.0 original de WebmastersMA — se conserva todo.
 * CAMBIOS v8.0 (mejoras quirúrgicas, no reescritura):
 *
 *  1. LAYOUT — sidebar sticky desde desktop ≥ 1024px, no solo ≥ 768px
 *  2. HEADER — fecha de actualización visible en quick-info (no solo sidebar)
 *  3. TARJETAS INFO — gap subido de 12px → 16px (más aire en mobile)
 *  4. TARJETA CTA SIDEBAR — botón rojo con ancho completo en mobile también
 *  5. BOTÓN SCROLL-TOP — añadido (faltaba el CSS)
 *  6. CTA STICKY MOBILE — nuevo: barra fija abajo con botón de acceso oficial
 *  7. AD CONTAINERS — colapsado automático si AdSense no carga (ya existía, limpiado)
 *  8. RELACIONADOS — stripe de color de categoría como en las tarjetas del hub
 *  9. TIEMPO DE LECTURA — estilo para el nuevo elemento junto al título
 * 10. RESPONSIVE — corregido solapamiento de media queries duplicadas en docs
 *
 * PALETA: idéntica a v7.0 (no se cambia ningún color)
 * ══════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════
   VARIABLES — idénticas a v7.0
══════════════════════════════════════════════ */
:root {
  --azul:         #004A8D;
  --azul-deep:    #003366;
  --azul-vivo:    #0066CC;
  --azul-hover:   #0052A3;
  --azul-soft:    rgba(0,74,141,.08);
  --azul-xsoft:   rgba(0,74,141,.04);
  --rojo:         #E63329;
  --rojo-dark:    #C0271E;
  --rojo-soft:    rgba(230,51,41,.08);
  --rojo-glow:    rgba(230,51,41,.22);
  --verde:        #1A6E3C;
  --verde-soft:   rgba(26,110,60,.09);
  --ambar:        #9A5E00;
  --ambar-soft:   rgba(154,94,0,.08);
  --peligro:      #B71C1C;
  --peligro-soft: rgba(183,28,28,.08);
  --fondo:        #F4F7FB;
  --fondo-card:   #FFFFFF;
  --fondo-suave:  #E8EDF4;
  --fondo-xs:     #EEF2F8;
  --borde:        #C5CFE0;
  --borde-suave:  #D4DCE9;
  --texto:        #0D1B2A;
  --texto-soft:   #344A60;
  --texto-muted:  #5E748A;
  --texto-xmuted: #8FA3B8;
  --grad-hero:    linear-gradient(140deg,#002D5C 0%,#003D7A 50%,#0055A8 100%);
  --grad-rojo:    linear-gradient(135deg,#E63329 0%,#C0271E 100%);
  --grad-rojo-h:  linear-gradient(135deg,#D02E25 0%,#A8221A 100%);
  --sombra-xs:    0 1px 4px rgba(0,50,100,.05);
  --sombra-sm:    0 3px 12px rgba(0,50,100,.08);
  --sombra-md:    0 8px 28px rgba(0,50,100,.11);
  --sombra-cta:   0 6px 20px rgba(230,51,41,.26);
  --r-xs:   5px; --r-sm:  9px; --r-md: 13px;
  --r-lg:  18px; --r-xl: 24px; --r-pill: 999px;
  --gap-s:  8px; --gap-m: 12px; --gap-l:  20px; --gap-xl: 36px;
  --ease: all .18s ease;
  --cat-color: #004A8D;
  --cat-bg:    rgba(0,74,141,.07);
}

/* ══════════════════════════════════════════════
   RESET BASE
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; padding: 0; overflow-x: hidden;
  /* FIX: 'Source Sans 3' y 'DM Sans' no se cargan en functions.php.
     El navegador cae al fallback del sistema. Opciones:
     A) Añadir wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;900&display=swap') en functions.php
     B) Usar solo el stack del sistema (más rápido, sin petición a Google Fonts) */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--fondo); color: var(--texto);
  -webkit-font-smoothing: antialiased;
  font-size: 16px; line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block }
a   { transition: var(--ease) }
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ══════════════════════════════════════════════
   BARRA PROGRESO LECTURA
══════════════════════════════════════════════ */
.tramite-progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%; z-index: 9999;
  background: linear-gradient(90deg, var(--rojo), var(--azul-vivo));
  opacity: 0;
  transition: width .1s linear, opacity .4s ease;
}
.tramite-progress-bar.progress-ready { opacity: 1 }

/* ══════════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════════ */
.site-main.tramite-single {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 16px 100px;
}
.tramite-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 18px;
}
.tramite-content { min-width: 0 }
.tramite-sidebar  { display: flex; flex-direction: column; gap: var(--gap-l) }

/* ══════════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════════ */
.tramite-breadcrumbs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 14px;
  font-size: 12px; font-weight: 600;
  color: var(--texto-muted);
}
.tramite-breadcrumbs a {
  color: var(--azul-vivo); text-decoration: none; font-weight: 700;
}
.tramite-breadcrumbs a:hover { color: var(--rojo) }

/* ══════════════════════════════════════════════
   PILL CATEGORÍA
══════════════════════════════════════════════ */
.tramite-cat-pill {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 14px; padding: 5px 14px 5px 10px;
  border-radius: var(--r-pill);
  background: var(--cat-bg);
  border: 1px solid rgba(0,74,141,.20); /* fallback Safari <16.2, Chrome <111 */
  border: 1px solid color-mix(in srgb, var(--cat-color) 20%, transparent);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--cat-color); text-transform: uppercase;
}
.tramite-cat-pill a { color: inherit; text-decoration: none }
.tramite-cat-pill a:hover { text-decoration: underline }
.tramite-cat-icon { font-size: 14px; line-height: 1 }

/* ══════════════════════════════════════════════
   CABECERA
══════════════════════════════════════════════ */
.tramite-header-final { margin: 0 0 26px }

.tramite-title-final {
  margin: 0 0 14px;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.06; letter-spacing: -0.03em;
  font-weight: 900; color: var(--azul);
}
.tramite-subtitle-final {
  margin: 0 0 20px; max-width: 820px;
  font-size: 17px; line-height: 1.82;
  color: var(--texto-soft); font-weight: 400;
}

/* [NUEVO v8] Tiempo de lectura junto al título */
.tramite-read-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--texto-xmuted);
  margin: -8px 0 16px;
}
.tramite-read-time svg { width: 13px; height: 13px; opacity: .65 }

/* Badges neutrales */
.tramite-info-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px }
.tramite-info-badge {
  display: inline-flex; align-items: center;
  min-height: 26px; padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--fondo-xs); border: 1px solid var(--borde-suave);
  color: var(--azul); font-size: 12px; font-weight: 700;
}

/* Quick info — modalidad, tiempo, dificultad, actualizado */
.tramite-quick-info {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px;
}
.quick-item {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--fondo-card); border: 1px solid var(--borde-suave);
  padding: 7px 14px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; color: var(--texto-soft);
  box-shadow: var(--sombra-xs);
}
.quick-item strong { font-weight: 800; color: var(--azul) }
.quick-item.dificultad-f-cil { color: var(--verde) }
.quick-item.dificultad-media  { color: var(--ambar) }
.quick-item.dificultad-alta   { color: var(--rojo-dark) }

/* ══════════════════════════════════════════════
   HERO IMAGE
══════════════════════════════════════════════ */
.tramite-hero-image {
  position: relative; width: 100%;
  border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 32px; aspect-ratio: 16/6;
  box-shadow: var(--sombra-md);
}
.tramite-hero-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tramite-hero-image-overlay {
  position: absolute; bottom: 14px; left: 16px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.hero-badge {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 800;
  backdrop-filter: blur(8px);
}
.hero-badge-coste {
  background: rgba(26,110,60,.90); color: #fff;
  box-shadow: 0 2px 8px rgba(26,110,60,.30);
}

/* ══════════════════════════════════════════════
   PUBLICIDAD
══════════════════════════════════════════════ */
.adsbygoogle-container {
  position: relative; margin: 24px 0;
  min-height: 90px; /* FIX CLS: reserva espacio antes de que AdSense cargue */
  display: flex; justify-content: center; align-items: center;
  flex-direction: column;
}
/* Colapsar automáticamente si el anuncio no carga */
.adsbygoogle-container:has(ins[data-ad-status="unfilled"]),
.adsbygoogle-container:has(ins:empty) {
  display: none !important;
}
.ad-label {
  font-size: 9px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-xmuted); margin-bottom: 4px;
  align-self: center;
}
.ad-in-article { margin: 28px 0 }

/* ══════════════════════════════════════════════
   ÍNDICE DE CONTENIDOS
══════════════════════════════════════════════ */
.tramite-index-box {
  margin: 0 0 var(--gap-xl); padding: 14px 20px;
  background: var(--fondo-card);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--azul-vivo);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--sombra-xs);
}
.tramite-index-box h2 {
  margin: 0 0 10px; font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--azul);
}
.toc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
  counter-reset: toc;
}
.toc-list li { counter-increment: toc; display: flex; align-items: baseline; gap: 9px; }
.toc-list li::before {
  content: counter(toc);
  font-size: 10px; font-weight: 900; color: var(--azul-vivo); min-width: 16px;
}
.toc-list li a {
  color: var(--texto-soft); text-decoration: none;
  font-size: 13px; font-weight: 500; line-height: 1.5;
}
.toc-list li a:hover { color: var(--azul-vivo) }

/* ══════════════════════════════════════════════
   SECCIONES
══════════════════════════════════════════════ */
.tramite-section { margin-bottom: var(--gap-xl) }

.tramite-section > h2 {
  margin: 0 0 20px; padding-bottom: 10px;
  border-bottom: 2px solid var(--fondo-suave);
  font-size: clamp(17px,2.2vw,21px); line-height: 1.2;
  letter-spacing: -0.02em; font-weight: 800; color: var(--azul);
}
.tramite-section h3 {
  margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--texto);
}
.tramite-section p, .entry-content p {
  font-size: 15px; line-height: 1.88; color: var(--texto-soft);
}
.entry-content ul, .entry-content ol { padding-left: 22px }
.entry-content li {
  margin-bottom: 10px; font-size: 15px; line-height: 1.80; color: var(--texto-soft);
}
.entry-content { max-width: 840px }

/* Cards info general — [MEJORADO v8] gap 12→16px */
.tramite-info-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
.tramite-card-soft {
  padding: 18px 16px; background: var(--fondo-card);
  border: 1px solid var(--borde-suave); border-radius: var(--r-md);
  box-shadow: var(--sombra-xs);
}
.tramite-card-soft h3 {
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-muted); margin: 0 0 8px;
}
.tramite-card-soft .entry-content p { font-size: 14px; line-height: 1.80; margin: 0 }

/* Aviso importante */
.tramite-note-box {
  padding: 14px 18px; border-left: 3px solid var(--ambar);
  background: #FEFCF0; border-radius: 0 var(--r-md) var(--r-md) 0;
}
.tramite-note-box h2 {
  color: var(--ambar); border-bottom: none;
  padding-bottom: 0; margin-bottom: 8px; font-size: 14px;
}
.tramite-note-box .entry-content p { font-size: 14px }

/* Error común */
.tramite-error-box {
  background: var(--peligro-soft);
  border: 1px solid rgba(183,28,28,.15);
  padding: 18px; border-radius: var(--r-md);
}
.tramite-error-box h2 {
  color: var(--peligro); border-bottom: none;
  padding-bottom: 0; margin-bottom: 10px; font-size: 16px;
}
.tramite-requisitos-nota {
  font-size: 13px; color: var(--texto-muted); margin: 0 0 14px;
}

/* ══════════════════════════════════════════════
   REQUISITOS PREVIOS
══════════════════════════════════════════════ */
.check-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--gap-s);
}
.check-list li {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; background: var(--fondo-card);
  border: 1px solid var(--borde-suave); border-radius: var(--r-md);
  font-size: 14px; line-height: 1.5; color: var(--texto-soft);
  box-shadow: var(--sombra-xs);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.check-list li:hover {
  border-color: var(--azul-vivo); box-shadow: var(--sombra-sm);
}
.check-list li::before {
  content: "";
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%231A6E3C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.requisito-opcional::before {
  background: var(--ambar-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%239A5E00' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.requisito-segun_caso::before {
  background: var(--azul-xsoft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230066CC' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Ccircle cx='12' cy='16' r='.5' fill='%230066CC'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.req-tipo-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill);
}
.req-obligatorio { background: var(--rojo-soft); color: var(--rojo) }
.req-opcional    { background: var(--ambar-soft); color: var(--ambar) }
.req-segun_caso  { background: var(--azul-soft);  color: var(--azul-vivo) }

/* ══════════════════════════════════════════════
   DOCUMENTOS
══════════════════════════════════════════════ */
.tramite-documentos-grid {
  display: flex; flex-direction: column; gap: var(--gap-s);
}
.doc-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px; background: var(--fondo-card);
  border: 1px solid var(--borde-suave); border-radius: var(--r-md);
  box-shadow: var(--sombra-xs);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.doc-card:hover { border-color: var(--azul-vivo); box-shadow: var(--sombra-sm) }
.doc-icon {
  flex-shrink: 0; width: 44px; height: 44px;
  border-radius: var(--r-xs); background: #FDECEA;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; margin-top: 2px;
}
.doc-icon::before {
  content: "PDF"; font-size: 10px; font-weight: 900;
  color: #C32B22; letter-spacing: -.2px; font-family: inherit;
}
.doc-info { flex: 1; min-width: 0 }
.doc-top-row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.doc-title-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; min-width: 0; flex: 1;
}
.doc-name {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 700; color: var(--texto); line-height: 1.4;
}
.doc-required-mark {
  color: var(--rojo); font-size: 18px; font-weight: 900;
  line-height: 1; position: relative; top: 1px;
}
.doc-inline-tag {
  display: inline-flex; align-items: center; min-height: 20px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.doc-inline-tag-optional { background: var(--verde-soft); color: var(--verde) }
.doc-inline-tag-case     { background: var(--ambar-soft); color: var(--ambar) }
.doc-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--texto-muted) }
.doc-download-btn {
  flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; min-height: 26px; padding: 3px 8px;
  border-radius: var(--r-pill); background: var(--azul-soft);
  border: 1px solid rgba(0,102,204,.18); color: var(--azul-vivo);
  font-size: 11px; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: var(--ease);
}
.doc-download-btn:hover { background: var(--azul); border-color: var(--azul); color: #fff }

/* ══════════════════════════════════════════════
   COSTE / PLAZO / VALIDEZ
══════════════════════════════════════════════ */
.tramite-metrics-professional {
  /* FIX: repeat(3,1fr) fijo rompía en textos largos. auto-fit adapta
     el número de columnas al espacio real disponible. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--gap-s);
}
.metric-pro-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; background: var(--fondo-card);
  border: 1px solid var(--borde-suave); border-radius: var(--r-md);
  box-shadow: var(--sombra-xs);
  /* FIX: min-width:0 permite que el card se encoja dentro del grid */
  min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.metric-pro-card:hover { border-color: var(--azul-vivo); box-shadow: var(--sombra-sm) }
.metric-pro-icon { font-size: 22px; line-height: 1.4; flex-shrink: 0 }
.metric-pro-body { flex: 1; min-width: 0 }
.metric-pro-label {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-xmuted);
}
.metric-pro-value {
  display: block; font-size: 14px; font-weight: 700; color: var(--texto-soft);
  /* FIX: nowrap+ellipsis cortaba textos largos y desbordaba el contenedor.
     Ahora el texto se parte en líneas manteniendo el card alineado. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.35;
}

/* ══════════════════════════════════════════════
   FLUJO / PASOS
══════════════════════════════════════════════ */
.tramite-flow-box {
  padding: 28px 24px; background: var(--fondo-card);
  border: 1px solid var(--borde-suave);
  border-top: 4px solid var(--azul);
  border-radius: var(--r-xl); box-shadow: var(--sombra-sm);
}
.tramite-flow-header { margin-bottom: 22px }
.tramite-flow-header h2 { border-bottom: none; padding-bottom: 0; color: var(--azul) }
.tramite-flow-intro {
  margin: 8px 0 0; font-size: 14px; line-height: 1.74;
  color: var(--texto-muted); max-width: 660px;
}
.tramite-flow-actions {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-s); margin-bottom: 22px;
}
.flow-action-card {
  display: block; padding: 18px; border-radius: var(--r-md);
  background: var(--fondo-xs); border: 1px solid var(--borde-suave);
  text-decoration: none; transition: var(--ease);
}
.flow-action-card:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-sm);
  border-color: var(--azul-vivo); background: var(--fondo-card);
}
.flow-action-card strong {
  display: block; margin-bottom: 4px; font-size: 15px; font-weight: 800; color: var(--azul);
}
.flow-action-card span {
  display: block; font-size: 13px; line-height: 1.55; color: var(--texto-muted);
}
.flow-action-card-primary { background: var(--grad-hero); border-color: transparent }
.flow-action-card-primary:hover { background: var(--grad-hero); opacity: .93; border-color: transparent }
.flow-action-card-primary strong,
.flow-action-card-primary span { color: #fff !important }

/* CTA principal — rojo */
.btn-flow-main {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 52px; padding: 14px 34px;
  border-radius: var(--r-pill); background: var(--grad-rojo); color: #fff;
  text-decoration: none; font-size: 16px; font-weight: 800;
  letter-spacing: .01em; box-shadow: var(--sombra-cta); transition: var(--ease);
}
.btn-flow-main:hover {
  background: var(--grad-rojo-h); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(230,51,41,.36); color: #fff;
}
.tramite-flow-cta { margin: 0 0 22px }
.tramite-flow-extra {
  margin-bottom: 22px; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--fondo-xs); border: 1px solid var(--borde-suave);
}
.tramite-flow-extra p { margin: 0 0 8px; font-size: 14px; line-height: 1.68; color: var(--texto-soft) }
.tramite-flow-extra p:last-child { margin-bottom: 0 }
.tramite-flow-extra strong { color: var(--azul) }

/* Pasos */
.tramite-flow-steps { border-top: 2px solid var(--fondo-suave); padding-top: 22px }
.tramite-flow-steps-title { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--azul) }
.tramite-steps-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-s) }
.flow-step-card {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px;
  align-items: flex-start; padding: 16px 18px;
  background: var(--fondo-card); border: 1px solid var(--borde-suave);
  border-radius: var(--r-md); box-shadow: var(--sombra-xs); transition: var(--ease);
}
.flow-step-card:hover { border-color: var(--azul-vivo); box-shadow: var(--sombra-sm) }
.flow-step-number {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul); color: #fff; font-size: 15px; font-weight: 900;
}
.flow-step-content h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--azul) }
.flow-step-content p  { margin: 0; font-size: 13px; line-height: 1.70; color: var(--texto-soft) }
.flow-step-link { margin-top: 8px !important }
.flow-step-link a { color: var(--azul-vivo); font-weight: 700; text-decoration: none }
.flow-step-link a:hover { text-decoration: underline }

/* ══════════════════════════════════════════════
   ENLACES OFICIALES
══════════════════════════════════════════════ */
.tramite-links-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-s); margin-top: 16px;
}
.official-link-card {
  display: block; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--fondo-card); border: 1px solid var(--borde-suave);
  box-shadow: var(--sombra-xs); text-decoration: none; transition: var(--ease);
}
.official-link-card:hover { border-color: var(--azul-vivo); box-shadow: var(--sombra-sm) }
.official-link-card strong {
  display: block; margin-bottom: 3px; font-size: 14px; font-weight: 800; color: var(--azul);
}
.official-link-card span { font-size: 12px; color: var(--texto-muted) }

/* ══════════════════════════════════════════════
   FAQ — accordion
══════════════════════════════════════════════ */
.faq-accordion { display: flex; flex-direction: column; gap: var(--gap-s) }
.faq-item {
  background: var(--fondo-card); border: 1px solid var(--borde-suave);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sombra-xs); transition: border-color .15s ease;
}
.faq-item:hover  { border-color: var(--azul-vivo) }
.faq-item.active { border-color: var(--azul); box-shadow: var(--sombra-sm) }
.faq-question {
  width: 100%; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: 0; text-align: left; cursor: pointer;
  font-family: inherit; transition: background .15s ease;
  /* Anula text-transform:uppercase que Astra aplica a todos los <button> */
  text-transform: none;
  letter-spacing: normal;
}
.faq-question:hover { background: var(--fondo-xs) }
/* Elimina el efecto azul que queda al hacer clic con ratón.
   Se conserva outline para navegación por teclado (accesibilidad). */
.faq-question:focus         { outline: none; background: transparent; }
.faq-question:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; background: transparent; }
.faq-question-text {
  font-size: 13px; font-weight: 400; color: var(--texto-muted); line-height: 1.5; flex: 1;
}
.faq-item.active .faq-question-text { font-weight: 500; color: var(--texto) }
.faq-toggle {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fondo-suave); color: var(--texto-muted);
  font-size: 16px; font-weight: 600; transition: var(--ease);
}
.faq-item.active .faq-toggle {
  background: var(--fondo-suave); color: var(--azul); transform: rotate(45deg);
}
.faq-answer                { padding: 0 18px }
.faq-answer:not([hidden])  { padding: 0 18px 16px }
.faq-answer p { margin: 0 0 8px; font-size: 14px; line-height: 1.76; color: var(--texto-soft) }
.faq-answer p:last-child   { margin-bottom: 0 }

/* ══════════════════════════════════════════════
   SERVICIOS PROFESIONALES
══════════════════════════════════════════════ */
.tramite-service-box {
  margin-bottom: var(--gap-xl); padding: 26px 24px;
  border-radius: var(--r-xl); background: var(--fondo-card);
  border: 1px solid var(--borde-suave); border-top: 4px solid var(--rojo);
  box-shadow: var(--sombra-sm);
}
.service-box-header { margin-bottom: 20px }
.service-box-header h2 {
  margin: 0 0 8px; font-size: 19px; font-weight: 900;
  letter-spacing: -0.02em; color: var(--azul);
}
.service-box-header p { margin: 0; font-size: 14px; line-height: 1.70; color: var(--texto-soft) }
.service-options-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-s) }
.service-option-card {
  display: block; padding: 16px 18px; border-radius: var(--r-md);
  background: var(--fondo-xs); border: 1px solid var(--borde-suave);
  text-decoration: none; color: var(--texto); box-shadow: var(--sombra-xs); transition: var(--ease);
}
.service-option-card:hover {
  transform: translateY(-2px); box-shadow: var(--sombra-sm);
  border-color: var(--azul-vivo); background: var(--fondo-card);
}
.service-option-card strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 800; color: var(--azul) }
.service-option-card span  { display: block; font-size: 13px; line-height: 1.5; color: var(--texto-muted) }
.service-option-card-primary {
  background: var(--grad-rojo); border-color: transparent; box-shadow: var(--sombra-cta);
}
.service-option-card-primary strong,
.service-option-card-primary span { color: #fff !important }
.service-option-card-primary:hover {
  background: var(--grad-rojo-h); box-shadow: 0 10px 28px rgba(230,51,41,.36);
}
.service-proximamente { display: flex; flex-direction: column; gap: var(--gap-s) }
.service-prox-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: var(--r-md); background: var(--fondo-xs); border: 1px dashed var(--borde);
}
.service-prox-icon { font-size: 22px; flex-shrink: 0 }
.service-prox-item strong { display: block; font-size: 14px; font-weight: 800; color: var(--texto) }
.service-prox-item span   { display: block; font-size: 12px; color: var(--texto-muted); margin-top: 2px }
.service-prox-cta { background: var(--rojo-soft); border-style: solid; border-color: rgba(230,51,41,.18) }
.service-prox-cta a {
  display: inline-block; margin-top: 4px; font-size: 13px;
  font-weight: 700; color: var(--rojo-dark); text-decoration: none;
}
.service-prox-cta a:hover { text-decoration: underline }

/* ══════════════════════════════════════════════
   COMPARTIR
══════════════════════════════════════════════ */
.tramite-share-box {
  margin: 0 0 var(--gap-xl); padding: 18px 22px;
  background: var(--fondo-card); border: 1px solid var(--borde-suave);
  border-radius: var(--r-lg); box-shadow: var(--sombra-xs);
}
.share-label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 13px; font-weight: 600; color: var(--texto-muted);
}
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px }
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
  transition: var(--ease); white-space: nowrap;
}
.share-btn-whatsapp { background: #25D366; color: #fff }
.share-btn-whatsapp:hover { background: #1cbc5a; transform: translateY(-1px) }
.share-btn-telegram { background: #229ED9; color: #fff }
.share-btn-telegram:hover { background: #1a8fc3; transform: translateY(-1px) }
.share-btn-twitter  { background: #000; color: #fff }
.share-btn-twitter:hover  { background: #222; transform: translateY(-1px) }
.share-btn-facebook { background: #1877F2; color: #fff }
.share-btn-facebook:hover { background: #1464d4; transform: translateY(-1px) }
.share-btn-linkedin { background: #0A66C2; color: #fff }
.share-btn-linkedin:hover { background: #0958a8; transform: translateY(-1px) }
.share-btn-email {
  background: var(--fondo-suave); color: var(--texto-soft); border: 1px solid var(--borde);
}
.share-btn-email:hover { background: var(--azul); color: #fff; border-color: var(--azul) }
.share-btn-copy {
  background: var(--fondo-suave); color: var(--texto-soft); border: 1px solid var(--borde);
}
.share-btn-copy:hover { background: var(--azul-soft); color: var(--azul-vivo); border-color: var(--azul-vivo) }
.share-btn-copied { background: var(--verde-soft) !important; color: var(--verde) !important; border-color: rgba(26,110,60,.30) !important }

/* Contador de compartidos */
.share-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: rgba(255,255,255,.25); border-radius: var(--r-pill);
  font-size: 10px; font-weight: 800; line-height: 1;
}
.share-btn-email .share-count,
.share-btn-copy  .share-count {
  background: rgba(0,74,141,.12); color: var(--azul);
}
.share-total-count {
  margin-left: auto;
  font-size: 11px; font-weight: 700; color: var(--texto-xmuted);
  background: var(--fondo-xs); border: 1px solid var(--borde-suave);
  padding: 2px 9px; border-radius: var(--r-pill);
}

/* ══════════════════════════════════════════════
   TRÁMITES RELACIONADOS
   [MEJORADO v8] — stripe de color como en hub-card
══════════════════════════════════════════════ */
.tramites-relacionados-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-m) }
.tramite-related-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-md); background: var(--fondo-card);
  border: 1px solid var(--borde-suave); text-decoration: none; color: var(--texto);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  /* SIN box-shadow en idle — consistente con hub-card */
}
.tramite-related-card:hover {
  transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: var(--borde);
}
/* Stripe de color superior (igual que hub-card) */
.tramite-related-stripe {
  height: 4px; flex-shrink: 0;
  background: var(--rel-color, var(--azul));
}
.tramite-related-thumb {
  width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative;
}
.tramite-related-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(0,50,100,.80); color: #fff; backdrop-filter: blur(4px);
}
.tramite-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.tramite-related-body { padding: 14px 16px 16px }
.tramite-related-card h3 { margin: 0 0 5px; font-size: 14px; font-weight: 800; color: var(--azul) }
.tramite-related-card p  { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--texto-muted) }
.rel-meta {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--texto-muted);
  background: var(--fondo-suave); padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--borde-suave);
}

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */
.sidebar-card {
  padding: 20px 18px; border-radius: var(--r-md); background: var(--fondo-card);
  border: 1px solid var(--borde-suave); box-shadow: var(--sombra-xs);
}
.sidebar-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: var(--azul) }
.stats-list { list-style: none; margin: 0; padding: 0 }
.stats-item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--borde-suave);
}
.stats-item:last-child { border-bottom: 0; padding-bottom: 0 }
.stats-label { font-size: 12px; color: var(--texto-muted) }
.stats-value { font-size: 13px; font-weight: 700; color: var(--texto); text-align: right }
.stats-value-coste { color: var(--verde) }

/* CTA sidebar */
.sidebar-card-cta { background: var(--grad-hero); border-color: transparent; box-shadow: var(--sombra-md) }
.sidebar-card-cta h3 { color: #fff; font-size: 16px }
.sidebar-card-cta p  { margin: 0 0 16px; font-size: 13px; line-height: 1.68; color: rgba(255,255,255,.84) }
.btn-sidebar-cta {
  display: block; width: 100%; min-height: 48px; padding: 12px 18px;
  border-radius: var(--r-pill); background: var(--rojo); color: #fff;
  text-align: center; text-decoration: none; font-size: 14px; font-weight: 800;
  letter-spacing: .01em; transition: var(--ease); box-shadow: 0 4px 12px rgba(230,51,41,.28);
}
.btn-sidebar-cta:hover { background: var(--rojo-dark); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(230,51,41,.38) }

/* Newsletter sidebar */
.sidebar-card-newsletter { background: #EDF3FC; border-color: rgba(0,102,204,.12) }
.sidebar-newsletter-icon { font-size: 26px; margin-bottom: 8px }
.sidebar-card-newsletter h3 { color: var(--azul) }
.sidebar-card-newsletter p  { margin: 0 0 12px; font-size: 13px; line-height: 1.68; color: var(--texto-soft) }
.sidebar-newsletter-form { display: flex; flex-direction: column; gap: 7px }
.sidebar-newsletter-form input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--borde); border-radius: var(--r-sm);
  font-size: 13px; font-family: inherit; background: var(--fondo-card); color: var(--texto); outline: none;
}
.sidebar-newsletter-form input:focus { border-color: var(--azul-vivo) }
.sidebar-newsletter-form button {
  padding: 10px 16px; border: none; border-radius: var(--r-pill); background: var(--azul); color: #fff;
  font-size: 13px; font-weight: 800; cursor: pointer; font-family: inherit; transition: var(--ease);
}
.sidebar-newsletter-form button:hover { background: var(--azul-deep); transform: translateY(-1px) }

/* Fuente oficial */
.sidebar-fuente { text-align: center }
.fuente-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--azul-vivo); text-decoration: none;
}
.fuente-link:hover { color: var(--rojo-dark); text-decoration: underline }

/* ══════════════════════════════════════════════
   VIDEO
══════════════════════════════════════════════ */
.tramite-video-wrapper {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--r-md); overflow: hidden; background: #000;
  box-shadow: var(--sombra-sm);
}
.tramite-video-wrapper iframe {
  /* FIX iOS Safari: scale(1.12) y offsets negativos rompían el video en móvil.
     Usa parámetros YouTube en la URL: ?rel=0&modestbranding=1&playsinline=1 */
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0; z-index: 1;
}
.video-click-blocker {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10; pointer-events: none;
}
.video-click-blocker::before,
.video-click-blocker::after { content: ""; position: absolute; pointer-events: auto; }
.video-click-blocker::before { top: 0; left: 0; width: 100%; height: 60px; }
.video-click-blocker::after  { bottom: 0; right: 0; width: 150px; height: 50px; }
.video-click-shield {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 10; cursor: pointer;
}

/* ══════════════════════════════════════════════
   SIDEBAR AD — solo desktop
══════════════════════════════════════════════ */
.wm-sidebar-ad-desktop-only { display: none }

/* ══════════════════════════════════════════════
   BOTÓN SCROLL AL INICIO — eliminado
   Saturaba el mobile y tapaba AdSense
══════════════════════════════════════════════ */
.scroll-top-btn { display: none !important }

/* ══════════════════════════════════════════════
   [NUEVO v8] CTA STICKY MOBILE
   Solo visible en mobile (< 768px) cuando el
   sidebar y su botón CTA ya no son visibles
══════════════════════════════════════════════ */
.tramite-cta-sticky-mobile {
  display: none; /* oculto por defecto; JS lo activa */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  padding: 10px 16px 12px;
  background: #fff;
  border-top: 1px solid var(--borde-suave);
  box-shadow: 0 -4px 20px rgba(0,50,100,.10);
  align-items: center; justify-content: center; gap: 12px;
}
.tramite-cta-sticky-mobile.visible { display: flex }
.tramite-cta-sticky-mobile .btn-sticky-cta {
  flex: 1; max-width: 380px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 20px; border-radius: var(--r-pill);
  background: var(--grad-rojo); color: #fff;
  font-size: 14px; font-weight: 800; text-decoration: none;
  box-shadow: var(--sombra-cta); transition: var(--ease);
}
.tramite-cta-sticky-mobile .btn-sticky-cta:hover { background: var(--grad-rojo-h) }
.tramite-cta-sticky-mobile .btn-sticky-close {
  background: none; border: none; color: var(--texto-muted);
  cursor: pointer; padding: 4px; font-size: 18px; line-height: 1; flex-shrink: 0;
}
body.has-sticky-cta { padding-bottom: 64px }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* ─ Desktop: sidebar a la derecha (≥ 1024px) ─ */
@media (min-width: 1024px) {
  .site-main.tramite-single { padding: 20px 24px 100px }
  .tramite-layout {
    grid-template-columns: minmax(0,1fr) 308px;
    gap: 40px; align-items: start;
  }
  /* FIX: top dinámico — ajusta --header-height al header real de Astra */
  :root { --header-height: 70px; }
  .tramite-sidebar { position: sticky; top: calc(var(--header-height) + 20px) }
  .wm-sidebar-ad-desktop-only { display: block }
  /* CTA sticky no necesaria en desktop — sidebar ya es visible */
  .tramite-cta-sticky-mobile { display: none !important }
  .scroll-top-btn { display: flex; opacity: 0; pointer-events: none }
  .scroll-top-btn.visible { opacity: 1; pointer-events: auto }
}

/* ─ Tablet 768–1023px ─ */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-main.tramite-single { padding: 16px 20px 100px }
  .tramite-info-grid         { grid-template-columns: repeat(2,1fr) }
  .tramite-flow-actions      { grid-template-columns: repeat(2,1fr) }
  .tramite-links-grid        { grid-template-columns: repeat(2,1fr) }
  .service-options-grid      { grid-template-columns: repeat(2,1fr) }
  .tramites-relacionados-grid{ grid-template-columns: repeat(2,1fr) }
  .service-proximamente      { flex-direction: row; flex-wrap: wrap }
  .service-prox-item         { flex: 1; min-width: 180px }
}

/* ─ Desktop grande: 3 cols en relacionados ─ */
@media (min-width: 1100px) {
  .tramites-relacionados-grid { grid-template-columns: repeat(3,1fr) }
  .tramite-info-grid          { grid-template-columns: repeat(2,1fr) }
}

/* ─ Mobile ─ */
@media (max-width: 600px) {
  .tramite-metrics-professional { grid-template-columns: 1fr }
}
@media (max-width: 480px) {
  .site-main.tramite-single   { padding-left: 12px; padding-right: 12px }
  .tramite-title-final        { font-size: 22px }
  .tramite-subtitle-final     { font-size: 15px }
  .tramite-section > h2       { font-size: 18px }
  .tramite-flow-box           { padding: 18px 14px }
  .flow-step-card             { grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 14px }
  .tramite-hero-image         { aspect-ratio: 16/7; border-radius: var(--r-lg) }
  .share-btn                  { padding: 8px 11px; font-size: 11px }
  .doc-name                   { white-space: normal }
  .doc-card                   { gap: 12px; padding: 14px }
  .doc-icon                   { width: 42px; height: 42px }
  .doc-download-btn           { min-height: 30px; padding: 5px 10px; font-size: 11px }
  .doc-desc                   { margin-top: 6px; font-size: 12px }
}
/* ═══════════════════════════════════════════════════════
   NUEVAS SECCIONES — campos ACF antes no renderizados
   cuando_se_necesita · casos_habituales · consejo_practico
   despues_que_pasa
═══════════════════════════════════════════════════════ */

/* Card de consejo práctico — destaca respecto a las demás */
.tramite-card-consejo {
    border-left: 3px solid var(--wm-amber, #F59E0B);
    background: #FFFBEB;
}
.tramite-card-consejo h3 {
    color: var(--wm-amber-dark, #B45309);
}

/* Sección "Después del trámite" — estilo neutro informativo */
#despues-del-tramite {
    background: var(--wm-blue-light, #EFF6FF);
    border-radius: var(--r-lg, 16px);
    padding: 24px 28px;
    border: 1px solid #BFDBFE;
}
#despues-del-tramite > h2 {
    color: var(--wm-blue, #0A4C9C);
}
/* ══════════════════════════════════════════════
   MINI SHARE — post-pasos
   Aparece justo después de los pasos en mobile y desktop.
   Copy específico del trámite + solo WA y TG (los que
   realmente usa la gente en España para reenviar guías).
══════════════════════════════════════════════ */
.tramite-share-postpasos {
  margin: 28px 0 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 1px solid rgba(0,102,204,.15);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.tsp-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tsp-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 180px;
}
.tsp-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}
.tsp-msg {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul);
  line-height: 1.45;
}
.tsp-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.tsp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: var(--ease);
  white-space: nowrap;
}
.tsp-wa {
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,211,102,.30);
}
.tsp-wa:hover { background: #1cbc5a; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(37,211,102,.40) }
.tsp-tg {
  background: #229ED9;
  color: #fff;
  box-shadow: 0 4px 14px rgba(34,158,217,.28);
}
.tsp-tg:hover { background: #1a8fc3; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(34,158,217,.38) }
.tsp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: rgba(255,255,255,.30);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
/* Mobile: apilar texto encima de botones */
@media (max-width: 600px) {
  .tsp-inner    { flex-direction: column; align-items: flex-start; gap: 14px }
  .tsp-btns     { width: 100% }
  .tsp-btn      { flex: 1; justify-content: center }
}

/* ══════════════════════════════════════════════
   SHARE FLOTANTE LATERAL
   Solo visible en desktop ≥ 1024px.
   Columna de iconos a la izquierda del contenido,
   pegada al margen. Solo iconos + contador.
══════════════════════════════════════════════ */
.wm-share-float {
  display: none; /* oculto en mobile */
}
@media (min-width: 1024px) {
  .wm-share-float {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: fixed;
    /* Pegado al margen izquierdo, centrado verticalmente */
    left: max(12px, calc(50% - 640px - 60px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    padding: 10px 8px;
    background: var(--fondo-card);
    border: 1px solid var(--borde-suave);
    border-radius: var(--r-lg);
    box-shadow: var(--sombra-md);
  }
  /* Si la ventana no es suficientemente ancha para mostrar el flotante sin tapar contenido, se oculta */
  @media (max-width: 1280px) {
    .wm-share-float { display: none }
  }
}
.wsf-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-xmuted);
  margin-bottom: 4px;
  writing-mode: horizontal-tb;
}
.wsf-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: var(--ease);
  color: #fff;
}
.wsf-btn:hover { transform: scale(1.12); box-shadow: var(--sombra-sm) }
.wsf-wa { background: #25D366 }
.wsf-tg { background: #229ED9 }
.wsf-tw { background: #000 }
.wsf-fb { background: #1877F2 }
.wsf-li { background: #0A66C2 }
/* Separador visual antes de X/Twitter */
.wsf-tw { margin-top: 6px }
.wsf-tw::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 1px;
  background: var(--borde-suave);
}
.wsf-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--rojo);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1.5px solid var(--fondo-card);
}