/* ==========================================================================
   CMS Q·RA — colecciones.css  (T-25 / T-26)
   Sistema único de página de colección (.col-*): Revista, Publicaciones,
   Lo Nuevo y Alianzas salen de UNA plantilla con UNA tarjeta (.col-card).
   NO toca styles.css (regla 3 del canal).
   Se carga en las páginas generadas: ../web/styles.css + ../web/colecciones.css.
   Namespace: body.colecciones-page.
   ========================================================================== */

body.colecciones-page {
  --primary:#1D4F91; --secondary:#00A5DF; --tertiary:#E31C79;
  --text:#0F172A; --text-2:#475569; --outline:#E2E8F0; --bg-light:#F8FAFC;
  font-family:Roboto, system-ui, -apple-system, Arial, sans-serif;
  color:var(--text); margin:0; background:#fff; line-height:1.6;
}

/* ==========================================================================
   T-26/27 · Sistema único "página de colección" (.col-*)
   Esqueleto: header del sitio real → hero blanco (migaja+eyebrow+h1+bajada) →
   fila contador/filtros → .col-grid → footer del sitio real.
   Referencia: templates/coleccion-qra/ColeccionQra.dc.html del zip de diseño.
   ========================================================================== */

/* Hero de sección — blanco, hairline inferior (referencia Figma) */
.col-hero{background:#fff;color:var(--text);padding:clamp(40px,6vw,72px) 0 clamp(32px,4vw,48px);box-shadow:inset 0 -1px 0 #E2E8F0}
.col-hero .shell{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;gap:14px}
/* Migaja: Inicio / colección */
.col-crumb{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px;color:#475569}
.col-crumb a{color:#475569;text-decoration:none}
.col-crumb a:hover{text-decoration:underline}
.col-crumb .crumb-sep{color:#CBD5E1;margin:0 6px}
.col-crumb .crumb-actual{color:var(--primary)}
/* Eyebrow — turquesa mayúscula, sin badge */
.col-eyebrow{display:block;font-family:Roboto,sans-serif;font-weight:500;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
/* Título — fino (400), 36/44 desktop · 28/36 móvil */
.col-title{margin:0;font-weight:400;font-size:clamp(28px,2.5vw,36px);line-height:clamp(36px,3vw,44px);max-width:20ch;text-wrap:pretty}
/* Bajada */
.col-sub{margin:0;font-size:16px;line-height:24px;letter-spacing:.5px;color:#475569;max-width:60ch;text-wrap:pretty}

/* Fila de control: buscador + contador + chips en carril horizontal.
   Fuera del grid (entre hero y rejilla). Patrón del directorio de especialistas. */
.col-control-shell{background:var(--surface,#fff);box-shadow:inset 0 -1px 0 var(--outline-variant,#E2E8F0)}
.col-control-shell .shell{max-width:1180px;margin:0 auto;padding:20px 24px}
.col-control{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.col-buscar{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--outline,#CBD5E1);background:var(--surface,#fff);flex:1 1 260px;max-width:360px;
  transition:box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
.col-buscar:focus-within{box-shadow:inset 0 0 0 2px var(--secondary)}
/* Iconos Material como ligaduras (UI Kit: .qra-icon) */
.qra-icon{font-family:'Material Icons';font-weight:normal;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
  word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
.col-buscar .qra-icon{font-size:20px;color:var(--text-secondary,#475569);flex-shrink:0}
.col-buscar-input{border:none;outline:none;background:transparent;font:400 14px/1.2 Roboto,sans-serif;color:var(--text);width:100%}
.col-buscar-input::placeholder{color:var(--text-secondary,#475569)}
.col-conteo{font-size:12px;line-height:16px;letter-spacing:.4px;color:#475569;white-space:nowrap}
.col-filtros{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:2px 0;flex:1}
.col-filtros::-webkit-scrollbar{height:4px}
.col-filtros::-webkit-scrollbar-thumb{background:var(--outline-variant,#E2E8F0);border-radius:999px}
.col-chip{
  flex:none;white-space:nowrap;font-family:Roboto,sans-serif;font-weight:500;font-size:12px;letter-spacing:.1px;
  height:32px;padding:0 16px;border-radius:999px;cursor:pointer;border:none;line-height:1;
  box-shadow:inset 0 0 0 1px #CBD5E1;color:var(--primary);background:transparent;
  transition:background 150ms cubic-bezier(0.2,0,0,1), box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
.col-chip:hover{box-shadow:inset 0 0 0 1px var(--secondary)}
.col-chip[aria-pressed="true"]{background:#BFEAFB;color:#00374B;box-shadow:none}
@media (max-width:640px){
  .col-control{flex-direction:column;align-items:stretch;gap:12px;padding:16px 20px}
  .col-buscar{max-width:none;flex:1 1 auto}
  .col-filtros{width:100%}
}

/* Rejilla responsive — auto-fill minmax 268 (referencia). Espacio vertical
   arriba (tras el buscador) y abajo (antes del footer). */
.col-grid{max-width:1180px;margin:0 auto;padding:clamp(28px,3.5vw,44px) 24px clamp(40px,5vw,64px);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:24px}
.col-empty{color:var(--text-2);font-size:16px;padding:40px 0;text-align:center}

/* Estado vacío — panel centrado (referencia) */
.col-vacio{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px #E2E8F0;padding:80px 40px;
  display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.col-vacio-icono{width:80px;height:80px;border-radius:999px;background:#E8EEF6;display:flex;align-items:center;justify-content:center;color:var(--primary)}
.col-vacio-icono .qra-mi,.col-vacio-icono svg{font-size:34px;width:34px;height:34px}
.col-vacio h2{margin:0;font-size:22px;line-height:28px;font-weight:500}
.col-vacio p{margin:0;font-size:14px;line-height:20px;letter-spacing:.25px;color:#475569;max-width:44ch;text-wrap:pretty}
.col-vacio .btn{margin-top:8px}

/* "Ver más" */
.col-mas{display:flex;justify-content:center;padding:40px 0 8px}
.col-mas button{
  font-family:Roboto,sans-serif;font-weight:500;font-size:14px;letter-spacing:.1px;
  height:40px;padding:0 24px;border-radius:999px;cursor:pointer;border:none;background:transparent;
  box-shadow:inset 0 0 0 1px #CBD5E1;color:var(--primary);
  transition:background 150ms cubic-bezier(0.2,0,0,1);
}
.col-mas button:hover{background:#E8EEF6}

/* Tarjeta única (.col-card) — hairline, sin sombra; hover línea turquesa top
   (referencia) y la FLECHA MAGENTA se desplaza (patrón Q·RA: flecha = navega). */
.col-card{
  background:#fff;box-shadow:inset 0 0 0 1px #E2E8F0;border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;
  transition:box-shadow 150ms cubic-bezier(0.2,0,0,1);
}
.col-card:hover{box-shadow:inset 0 0 0 1px #E2E8F0, inset 0 3px 0 var(--secondary)}
/* Variante artículo: imagen 16:9 */
.col-card--articulo .col-card-media{aspect-ratio:16/9;background:#F1F5F9;overflow:hidden;display:flex;align-items:center;justify-content:center}
.col-card--articulo .col-card-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Variante alianza: slot logo 140x48 gris (referencia) */
.col-card--alianza .col-card-media{height:104px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -1px 0 #E2E8F0}
.col-card--alianza .col-card-media img{width:140px;height:48px;object-fit:contain;filter:grayscale(1);opacity:.7}
.col-card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.col-card-body .eyebrow{display:block;font-family:Roboto,sans-serif;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)}
.col-card-body h3{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px;margin:0;color:var(--text);text-wrap:pretty}
.col-card-body p{font-size:12px;line-height:18px;letter-spacing:.4px;color:#475569;margin:0;text-wrap:pretty}
.col-card-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.col-card-meta .col-card-meta-info{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:16px;letter-spacing:.5px;color:#475569}
.col-card-meta .col-card-meta-info strong{font-weight:500;color:var(--text)}
/* Flecha: simple, sin círculo (decisión de Wladimir — NO el botón 40px del Figma).
   Se desplaza a la derecha en hover (patrón Q·RA: flecha magenta = navega). */
.col-card-meta .flecha-mov{flex-shrink:0;color:var(--tertiary);font-size:20px;line-height:1;
  transition:transform 180ms var(--ease, cubic-bezier(0.2,0,0,1))}
.col-card:hover .col-card-meta .flecha-mov{transform:translateX(6px)}

/* Footer */
.col-foot{background:var(--bg-light);border-top:1px solid var(--outline);padding:28px 0;margin-top:56px}
.col-foot .shell{max-width:1200px;margin:0 auto;padding:0 24px}
.col-foot a{color:var(--primary);text-decoration:none;font-weight:600}

/* T-26 fixes: la rejilla la pisaba `.home-v3 .shell` (display:flow-root);
   subo especificidad. Flecha doble: el markup trae → literal y styles.css
   añade otro con ::after — anulo el ::after dentro de la tarjeta. Las tarjetas
   nacían invisibles (.reveal sin el JS del sitio): las hago visibles. */
body.colecciones-page main.col-grid{display:grid}
body.colecciones-page .reveal{opacity:1;transform:none}
.col-card-meta .flecha-mov::after{content:none}

/* Línea turquesa (accionable) — responde al cursor, sin navegar (A7) */
.accionable{position:relative;padding-bottom:2px}
.accionable::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--secondary);transform:scaleX(0);transform-origin:left;transition:transform 180ms ease}
.col-card:hover .accionable::after,
.accionable:hover::after{transform:scaleX(1)}

/* ==========================================================================
   LEGACY (T-25) — retirar cuando los 4 builds usen .col-*
   Mantenidos para las páginas de detalle/ficha y para no romper nada a medio
   camino. No se usan en los hubs de Revista/Publicaciones/Lo Nuevo/Alianzas.
   ========================================================================== */

.colecciones-head {
  background:#1D4F91; color:#fff; padding:28px 0 40px;
}
.colecciones-head .shell{max-width:1200px;margin:0 auto;padding:0 24px}
.colecciones-head h1{font-size:clamp(28px,3.4vw,44px);font-weight:700;margin:14px 0 8px;letter-spacing:-.02em;max-width:22ch}
.colecciones-head .eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.08em;font-size:12px;
  background:rgba(255,255,255,.18);padding:4px 12px;border-radius:999px;
}
.colecciones-sub{font-size:17px;color:rgba(255,255,255,.85);margin:0;max-width:60ch}
.colecciones-crumb{font-size:13px;color:rgba(255,255,255,.75);margin:0}
.colecciones-crumb a{color:#fff;text-decoration:none}
.colecciones-crumb a:hover{text-decoration:underline}
.brand{font-weight:900;font-size:18px;color:#fff;text-decoration:none}

.colecciones-foot{background:var(--bg-light);border-top:1px solid var(--outline);padding:28px 0;margin-top:56px}
.colecciones-foot .shell{max-width:1200px;margin:0 auto;padding:0 24px}
.colecciones-foot a{color:var(--primary);text-decoration:none;font-weight:600}
.colecciones-empty{color:var(--text-2);font-size:16px;padding:24px 0}

/* Hub Lo Nuevo horizontal (retirar: Lo Nuevo es rejilla desde T-26) */
.lo-nuevo-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:28px 4px 16px;scrollbar-width:thin;
}
.lo-nuevo-card{
  flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--outline);
  border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;transition:transform 200ms ease, box-shadow 200ms ease;
}
.lo-nuevo-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.12)}
.lo-nuevo-card-media img{width:100%;height:180px;object-fit:cover;display:block}
.lo-nuevo-card-body{padding:18px;display:flex;flex-direction:column;gap:8px}
.lo-nuevo-card-body h3{font-size:18px;font-weight:600;margin:0;color:var(--text)}
.lo-nuevo-card-body time{font-size:12px;color:var(--text-2)}
.lo-nuevo-card-body .flecha-mov{align-self:flex-end;color:var(--tertiary);font-size:18px}
.lo-nuevo-hint{font-size:13px;color:var(--text-2);margin-top:6px}

/* Alianzas (retirar: usa .col-card desde T-26) */
.alianzas-grid{
  max-width:1200px;margin:0 auto;padding:32px 24px 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;
}
.alianza-card{
  background:#fff;border:1px solid var(--outline);border-radius:14px;overflow:hidden;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;
  transition:transform 200ms ease, box-shadow 200ms ease;
}
.alianza-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(15,23,42,.12)}
.alianza-card-media{background:var(--bg-light);display:flex;align-items:center;justify-content:center;min-height:120px;padding:20px}
.alianza-card-media img{max-height:60px;max-width:70%;object-fit:contain;filter:grayscale(1);opacity:.7}
.alianza-card-body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.alianza-card-body h3{font-size:20px;font-weight:600;margin:0;color:var(--primary)}
.alianza-card-body p{font-size:14px;color:var(--text-2);margin:0}
.alianza-card-body .flecha-mov{align-self:flex-end;color:var(--tertiary);margin-top:auto}

/* ---------- Ficha de alianza ---------- */
.ficha-shell{max-width:900px;margin:0 auto;padding:32px 24px 0}
.ficha{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start}
@media (max-width:760px){.ficha{grid-template-columns:1fr}}
.ficha-media{background:var(--bg-light);border:1px solid var(--outline);border-radius:14px;
  padding:32px;display:flex;align-items:center;justify-content:center}
.ficha-media img{max-height:80px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.75}
.ficha-body h1{font-size:clamp(26px,3vw,36px);font-weight:700;margin:8px 0 20px;letter-spacing:-.02em}
.ficha-seccion{margin:20px 0}
.ficha-seccion h2{font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary);margin:0 0 10px}
.ficha-seccion p{margin:0;font-size:16px;color:var(--text)}
.ficha-acceso{border-left:3px solid var(--tertiary);padding-left:18px}
.ficha-nota{font-size:13px;color:var(--text-2);background:var(--bg-light);
  border:1px dashed var(--outline);border-radius:10px;padding:12px 14px;margin:20px 0}
/* Volver — flecha magenta (patrón Q·RA: flecha = navega). Sin subrayado.
   Texto en el color del sitio; la flecha (::after de .flecha-mov) es magenta
   y se desplaza al acercarse. */
.detalle-volver{margin-top:clamp(40px,5vw,56px)}
.detalle-volver a{display:inline-flex;align-items:center;gap:8px;color:var(--text,#0F172A);text-decoration:none;font-weight:500;font-size:14px}
.detalle-volver a:hover,.detalle-volver a:focus-visible{text-decoration:none}

/* ==========================================================================
   Detalle editorial (novedad + artículo) — Q·RA
   Cabecera limpia → imagen lead → columna de lectura → volver.
   Tokens del UI Kit (colores semánticos, display-small, radius-xl).
   ========================================================================== */
.detalle-shell{max-width:860px;margin:0 auto;padding:clamp(32px,5vw,56px) 24px clamp(56px,7vw,88px)}
.detalle-articulo{display:flex;flex-direction:column}

/* Breadcrumb hereda .col-crumb (Inicio / Lo nuevo / …) */
.detalle-articulo .col-crumb{margin-bottom:clamp(28px,3.5vw,40px)}

/* Identificación editorial: eyebrow turquesa + fecha + tiempo separados por punto */
.detalle-meta{display:flex;gap:0;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--text-secondary,#475569);letter-spacing:.4px}
.detalle-meta .eyebrow{display:block;font-weight:600;font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.detalle-meta time,.detalle-meta .detalle-tiempo{font-size:12px;color:var(--text-secondary,#475569)}
.detalle-meta > * + *{margin-left:12px;padding-left:12px;position:relative}
.detalle-meta > * + *::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:999px;background:#CBD5E1}

/* Título — display fino, con aire */
.detalle-titulo{margin:clamp(16px,2vw,24px) 0 0;font-weight:400;font-size:clamp(30px,4.5vw,44px);line-height:1.15;letter-spacing:-.02em;max-width:24ch;text-wrap:pretty;color:var(--text,#0F172A)}

/* Autor / especialista — discreto bajo el título */
.detalle-autor{display:flex;align-items:center;gap:10px;margin-top:clamp(20px,2.5vw,28px)}
.detalle-autor-avatar{width:36px;height:36px;border-radius:999px;background:var(--primary-100,#C8D6EA);color:var(--primary-700,#133662);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.detalle-autor-info{display:flex;flex-direction:column;gap:2px}
.detalle-autor-linea{font-size:13px;line-height:16px;letter-spacing:.5px}
.detalle-autor-nombre{display:inline;font-weight:500;font-size:13px;color:var(--text,#0F172A)}
.detalle-autor-sep{color:#CBD5E1;margin:0 2px}
.detalle-autor-rol{display:inline;font-size:12px;color:var(--text-secondary,#475569)}
.detalle-autor-meta{display:block;font-size:12px;line-height:16px;letter-spacing:.5px;color:var(--text-secondary,#475569)}
.detalle-meta-solo{font-size:12px;letter-spacing:.5px;color:var(--text-secondary,#475569);margin:0}

/* Imagen lead — editorial, full-bleed dentro del contenedor, radius-xl */
.detalle-imagen{margin:clamp(28px,4vw,40px) 0 0}
.detalle-imagen img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xl,16px)}
.detalle-imagen figcaption{margin-top:10px;font-size:12px;color:var(--text-secondary,#475569)}

/* Cuerpo — columna de lectura cómoda (medida ~68ch) */
.detalle-cuerpo{margin-top:clamp(28px,4vw,40px);max-width:68ch;font-size:17px;line-height:1.75;color:var(--text-primary,#0F172A)}
.detalle-cuerpo p{margin:0 0 1.3em}
.detalle-cuerpo p:last-child{margin-bottom:0}

/* Fuente — callout con barra turquesa (T-34) */
.detalle-fuente{margin-top:32px;padding:20px 24px;background:#F1F5F9;border-radius:12px;box-shadow:inset 3px 0 0 var(--secondary);font-size:13px;line-height:20px;letter-spacing:.3px;color:#475569}
.detalle-fuente-label{display:block;font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:11px;line-height:16px;color:#00374B;margin-bottom:6px}

/* Contenido relacionado */
.detalle-relacionadas{margin-top:clamp(56px,7vw,80px);border-top:1px solid var(--outline-variant,#E2E8F0);padding-top:clamp(32px,4vw,48px)}
.detalle-relacionadas h2{font-size:var(--headline-medium,28px);line-height:var(--lh-headline,1.25);font-weight:500;margin:0 0 clamp(24px,3vw,32px)}
.detalle-relacionadas .col-grid{padding:0}
@media (max-width:640px){
  .detalle-titulo{max-width:100%}
  .detalle-cuerpo{font-size:16px}
}

/* ==========================================================================
   T-34 · Delta del detalle (diseño claude-design) — bajada, H2, checklist,
   callout de fuente, compartir + CTA. Solo colecciones.css + biblioteca_lib.php.
   ========================================================================== */

/* Bajada / subtítulo bajo el H1 */
.detalle-bajada{margin:0;font-size:18px;line-height:1.55;letter-spacing:.2px;color:var(--text-secondary,#475569);text-wrap:pretty;max-width:60ch}

/* H2 del cuerpo (markdown-lite `## `) */
.detalle-h2{margin:8px 0 0;font-weight:500;font-size:22px;line-height:28px;color:var(--text,#0F172A)}

/* Tarjeta checklist (markdown-lite `- `) */
.detalle-checklist{margin:24px 0;background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px #E2E8F0;padding:28px 32px}
.detalle-checklist-eyebrow{display:block;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);margin-bottom:16px}
.detalle-checklist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.detalle-checklist-item{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:22px;letter-spacing:.3px;color:#334155}
.detalle-checklist-item .qra-icon{font-size:22px;color:var(--primary);flex-shrink:0}

/* Cierre: compartir + CTA magenta */
.detalle-cierre{margin-top:40px;padding-top:28px;box-shadow:inset 0 1px 0 #E2E8F0;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.detalle-cierre-label{font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#475569}
.detalle-share{display:flex;gap:8px}
.detalle-share-btn{width:40px;height:40px;border-radius:999px;box-shadow:inset 0 0 0 1px #CBD5E1;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--primary);cursor:pointer;background:#fff;border:none;transition:box-shadow 150ms cubic-bezier(0.2,0,0,1)}
.detalle-share-btn:hover,.detalle-share-btn:focus-visible{box-shadow:inset 0 0 0 1px var(--secondary)}
.detalle-cta{margin-left:auto;font-weight:500;font-size:14px;letter-spacing:.1px;background:var(--tertiary);color:#fff;height:44px;display:inline-flex;align-items:center;padding:0 28px;border-radius:999px;text-decoration:none;transition:background 150ms cubic-bezier(0.2,0,0,1)}
.detalle-cta:hover,.detalle-cta:focus-visible{background:#C41567;color:#fff}
@media (max-width:640px){
  .detalle-cierre{gap:12px}
  .detalle-cta{margin-left:0}
}

/* ==========================================================================
   ALIANZAS · CÓMO ACCEDER
   Página de acción, no de exploración: son los pasos que el paciente tiene que
   dar. Por eso los números pesan y no hay nada más compitiendo por atención.

   Carril propio y no .shell: la clase global solo pone max-width, sin padding
   lateral, así que el texto se pegaba al borde de la ventana mientras el hero
   —que sí trae su propio carril— quedaba centrado 100 px más adentro. Se veía
   como si la página estuviera rota.
   ========================================================================== */
.acceso{background:var(--surface,#F8FAFC);padding:clamp(40px,5vw,72px) 0 clamp(64px,8vw,110px)}
.acceso-shell{max-width:1180px;margin:0 auto;padding:0 24px}

.acceso-intro{
  font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--text);
  max-width:64ch;margin:0 0 clamp(36px,4vw,56px);
}
.acceso-intro strong{font-weight:500;color:var(--primary)}

/* Los cuatro pasos en rejilla: en una sola columna, cuatro bloques de texto
   corrido se leen como un documento; en dos, se leen como un procedimiento. */
/* Dos columnas fijas y no auto-fit: son cuatro pasos, y en tres columnas el
   cuarto se queda solo en una fila con dos huecos al lado. En 2x2 la rejilla
   siempre cierra, y además el orden de lectura queda en Z, que es como se
   sigue un procedimiento. */
.acceso-pasos{
  list-style:none;margin:0;padding:0;display:grid;align-items:stretch;
  gap:clamp(16px,2vw,22px);grid-template-columns:1fr;
}
@media (min-width:820px){
  .acceso-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.paso{
  display:flex;gap:clamp(16px,1.8vw,22px);padding:clamp(22px,2.4vw,30px);
  background:#fff;border:1px solid var(--outline);border-radius:16px;
}
/* El número es la guía: si el paciente solo mira los números ya sabe cuántos
   pasos son y en cuál va. */
.paso-n{
  flex:none;font-size:clamp(28px,2.8vw,38px);font-weight:300;
  color:var(--secondary);line-height:1;letter-spacing:-.02em;
}
.paso-texto{min-width:0}
.paso h2{
  margin:0 0 8px;font-size:clamp(18px,1.6vw,21px);font-weight:500;
  color:var(--primary);line-height:1.3;
}
.paso p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}

.acceso-nota{
  margin:clamp(30px,3.4vw,44px) 0 0;padding:clamp(20px,2.2vw,26px);
  border-left:3px solid var(--tertiary);background:rgba(227,28,121,.05);
  border-radius:0 12px 12px 0;max-width:74ch;
}
.acceso-nota h2{
  margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tertiary);
}
.acceso-nota p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-2)}

.acceso-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,26px);
  margin-top:clamp(36px,4vw,56px);
}
/* Turquesa, como el resto de las acciones del sitio: el magenta se reserva
   para el punto de la marca. */
.acceso-btn{background:var(--secondary);color:#fff;padding:14px 30px;font-size:15px}
.acceso-btn:hover{background:#0090c4}
.acceso-link{color:var(--secondary);text-decoration:none;font-weight:500;font-size:15px}
.acceso-link:hover{text-decoration:underline}

@media (max-width:520px){
  .paso{flex-direction:column;gap:10px}
}

.btn-outline{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}