/* Biblioteca de componentes */
/* Biblioteca de componentes (docs/component-library.md). Va delante de la hoja de cada skin.
   1. Contrato de tokens: valores por defecto que cada skin pisa con los suyos.
   2. Base de las páginas de la biblioteca (body.lib): solo dentro de .lib, para no tocar los sitios
      con página propia, y con :where(), sin especificidad, para que la clase de un componente gane
      siempre a la base.
   3. Componentes: clases lib-*. Pensados primero para el móvil y sin desbordes con la letra del
      sistema grande (rejillas con minmax(0, …) y palabras largas que se parten). */
:root {
  --color-bg: #ffffff; --color-surface: #ffffff; --color-text: #1f2937; --color-muted: #5b6472; --color-border: #e5e7eb;
  --color-primary: #2563eb; --color-on-primary: #ffffff; --color-accent: #f59e0b;
  --color-dark: #111827; --color-on-dark: #f9fafb;
  --color-soft: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg));
  --color-whatsapp: #198644;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: var(--font-body);
  --radius: 0.75rem; --radius-lg: 1.25rem; --shadow: 0 8px 24px rgb(17 24 39 / 0.08);
  --container: 72rem;
}

:where(.lib), :where(.lib) *, :where(.lib) *::before, :where(.lib) *::after { box-sizing: border-box; }
body.lib { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; -webkit-text-size-adjust: 100%; }
:where(.lib) img { max-width: 100%; height: auto; display: block; }
:where(.lib) a { color: var(--color-primary); }
:where(.lib) :is(h1, h2, h3) { font-family: var(--font-heading); line-height: 1.15; margin: 0 0 0.75rem; }
:where(.lib) h1 { font-size: clamp(2rem, 6vw + 0.5rem, 3.4rem); }
:where(.lib) h2 { font-size: clamp(1.5rem, 2.5vw + 0.8rem, 2.2rem); }
:where(.lib) :is(h1, h2, h3, h4, p, li, a, dt, dd, label, summary, span, button) { overflow-wrap: anywhere; }
/* Guiones solo en lo estrecho (etiquetas, datos y botones): en el texto corrido estorban. */
:where(.lib) :is(label, dt, dd, button, summary, .lib-btn) { hyphens: auto; }
:where(.lib) :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.lib-skip { position: absolute; left: -9999px; }
.lib-skip:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--color-surface); padding: 0.5rem 1rem; border-radius: 0.5rem; }
/* El margen lateral no crece sin tope con la letra grande: como mucho, un 5 % de la pantalla por lado. */
.lib-wrap { width: min(var(--container), 100% - min(2.5rem, 10vw)); margin-inline: auto; }
.lib-page-title { padding-block: 2rem 0; }
.lib-eyebrow { margin: 0 0 0.4rem; color: var(--color-primary); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .lib * { transition: none !important; animation: none !important; } }

/* Botones. */
.lib-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; max-width: 100%; min-height: 3rem; padding: 0.7rem 1.4rem; border-radius: 999px; border: 2px solid var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.15; cursor: pointer; }
.lib-btn:hover { filter: brightness(0.95); }
.lib-btn-light { background: #fff; border-color: #fff; color: var(--color-dark); }
.lib-btn-ghost { background: transparent; color: var(--color-primary); }
.lib-btn .lib-ic { width: 1.25rem; height: 1.25rem; }
.lib-btn.lib-btn-wa { background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: #fff; }
.lib-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }
.lib-actions .lib-btn { flex: 1 1 12rem; }
@media (min-width: 640px) { .lib-actions .lib-btn { flex: 0 0 auto; } }

/* Portada: foto a sangre con degradado (alto grande, medio o pequeño). */
.lib-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 70vh; background: var(--color-dark); color: var(--color-on-dark); }
.lib-hero-medium { min-height: 45vh; }
.lib-hero-small { min-height: 15rem; }
.lib-hero picture, .lib-hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.lib-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / 0.1) 0%, rgb(0 0 0 / 0.65) 100%); }
.lib-hero-body { padding-block: 2.5rem 2.25rem; }
.lib-hero .lib-eyebrow { color: var(--color-accent); }
.lib-hero .lib-back a { color: inherit; }
.lib-hero h1 { color: inherit; max-width: 20ch; text-shadow: 0 2px 12px rgb(0 0 0 / 0.25); }
.lib-hero-text { font-size: 1.15rem; max-width: 38rem; margin: 0; }
@media (min-width: 900px) { .lib-hero-large { min-height: 78vh; } .lib-hero-medium { min-height: 55vh; } .lib-hero-small { min-height: 20rem; } }

/* Portada partida: texto e imagen; en el móvil, la imagen arriba. */
.lib-hero-split { padding-block: 1.5rem 2rem; }
.lib-hero-split-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.lib-hero-split-media { order: -1; }
.lib-hero-split-media img { width: 100%; border-radius: var(--radius-lg); }
.lib-hero-split .lib-hero-text { color: var(--color-muted); }
@media (min-width: 900px) {
  .lib-hero-split { padding-block: 4rem 3rem; }
  .lib-hero-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .lib-hero-split-media { order: 0; }
}

/* Utilidades. */
.lib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lib-ic { width: 1.4rem; height: 1.4rem; fill: currentColor; flex: none; }
.lib-ic-stroke { fill: none; stroke: currentColor; stroke-width: 2; }

/* Cabecera: fija arriba. En el móvil, el menú se abre con el botón (cmse.js, [data-cmse-menu]); sin
   el script, el menú se ve desplegado. Los desplegables son <details>. */
.lib-header { position: sticky; top: 0; z-index: 40; background: var(--color-surface); color: var(--color-text); border-bottom: 1px solid var(--color-border); }
.lib-header-dark { background: var(--color-dark); color: var(--color-on-dark); border-bottom-color: transparent; }
.lib-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 4rem; }
.lib-header-row > * { min-width: 0; }
.lib-brand { flex: 1 1 0; display: inline-flex; align-items: center; min-height: 3rem; color: inherit; text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; line-height: 1.1; }
.lib-brand img { height: 2.75rem; width: auto; }
.lib-menu-button { flex: none; display: inline-grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; }
.lib-menu-icon, .lib-menu-icon::before, .lib-menu-icon::after { display: block; position: relative; width: 1.5rem; height: 2px; background: currentColor; transition: transform 0.2s ease; }
.lib-menu-icon::before, .lib-menu-icon::after { content: ""; position: absolute; left: 0; }
.lib-menu-icon::before { top: -0.45rem; }
.lib-menu-icon::after { top: 0.45rem; }
.lib-header.is-open .lib-menu-icon { background: transparent; }
.lib-header.is-open .lib-menu-icon::before { transform: translateY(0.45rem) rotate(45deg); }
.lib-header.is-open .lib-menu-icon::after { transform: translateY(-0.45rem) rotate(-45deg); }
.lib-nav { flex-basis: 100%; min-width: 0; padding-bottom: 1rem; }
.lib-header.is-collapsible .lib-nav { display: none; }
.lib-header.is-collapsible.is-open .lib-nav { display: block; }
.lib-nav ul { list-style: none; margin: 0; padding: 0; }
.lib-nav a:not(.lib-btn), .lib-nav summary { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.8rem 0.25rem; color: inherit; text-decoration: none; font-weight: 700; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); cursor: pointer; }
.lib-nav summary { list-style: none; }
.lib-nav summary::-webkit-details-marker { display: none; }
.lib-nav summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin: -0.2rem 0.3rem 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
.lib-nav details[open] > summary::after { transform: rotate(-135deg); margin-top: 0.3rem; }
.lib-nav [aria-current="page"], .lib-nav .is-current { color: var(--color-primary); }
.lib-header-dark .lib-nav [aria-current="page"], .lib-header-dark .lib-nav .is-current { color: var(--color-accent); }
.lib-nav-sub ul { padding: 0 0 0.5rem 0.75rem; }
.lib-nav-sub ul a:not(.lib-btn) { display: block; border: 0; padding: 0.6rem 0.25rem; font-weight: 600; }
.lib-nav-sub ul a span { display: block; font-weight: 400; font-size: 0.9rem; opacity: 0.75; }
.lib-nav-all a:not(.lib-btn) { color: var(--color-primary); font-weight: 800; }
/* En el menú del móvil de una cabecera oscura, «Ver todos» y la página actual van en el acento (el
   principal no contrasta con el fondo oscuro); la descripción de la página actual, sin transparencia. */
.lib-header-dark .lib-nav-all a:not(.lib-btn) { color: var(--color-accent); }
.lib-nav-sub ul :is([aria-current="page"], .is-current) span { opacity: 1; }
.lib-languages { display: flex; gap: 0.25rem; padding-top: 0.75rem !important; }
.lib-languages a:not(.lib-btn) { border: 0; padding: 0.4rem 0.6rem; font-size: 0.9rem; }
.lib-header-cta { width: 100%; margin-top: 1rem; }
@media (min-width: 900px) {
  .lib-menu-button { display: none; }
  .lib-brand { flex: 0 1 auto; }
  .lib-header .lib-nav, .lib-header.is-collapsible .lib-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; flex: 1 1 0; padding: 0; }
  .lib-nav > ul { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .lib-nav > ul > li > a:not(.lib-btn), .lib-nav summary { border: 0; padding: 0.5rem 0.75rem; border-radius: 999px; font-weight: 600; }
  .lib-nav > ul > li > a:not(.lib-btn):hover, .lib-nav summary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
  .lib-nav-sub { position: relative; }
  .lib-nav-sub ul { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 41; width: max-content; min-width: 14rem; max-width: min(24rem, 90vw); padding: 0.5rem; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); }
  .lib-nav-sub:last-child ul { left: auto; right: 0; }
  .lib-nav-sub ul a:not(.lib-btn) { padding: 0.6rem 0.75rem; border-radius: calc(var(--radius) * 0.7); }
  .lib-nav-sub ul a:not(.lib-btn):hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
  /* El desplegable del escritorio es claro también en una cabecera oscura: «Ver todos» y la página
     actual, en el principal; las descripciones, en el color apagado. */
  .lib-header-dark .lib-nav-sub ul :is([aria-current="page"], .is-current), .lib-header-dark .lib-nav-all a:not(.lib-btn) { color: var(--color-primary); }
  .lib-nav-sub ul a span { color: var(--color-muted); opacity: 1; }
  .lib-languages { padding-top: 0 !important; }
  .lib-header-cta { width: auto; margin: 0; min-height: 2.5rem; padding: 0.45rem 1.1rem; }
}

/* Pie. */
.lib-footer { margin-top: 3rem; padding-top: 3rem; background: var(--color-dark); color: var(--color-on-dark); }
.lib-footer-light { background: var(--color-bg); color: var(--color-text); border-top: 1px solid var(--color-border); }
.lib-footer a { color: inherit; }
.lib-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 2rem; }
.lib-footer-grid > * { min-width: 0; }
.lib-footer h2 { margin: 0 0 0.75rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.lib-footer ul { list-style: none; margin: 0; padding: 0; }
.lib-footer li { margin: 0.4rem 0; }
.lib-footer-about p, .lib-footer-text { margin: 0 0 0.75rem; opacity: 0.85; }
.lib-footer-logo { height: 3rem; width: auto; margin-bottom: 1rem; }
.lib-social { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.lib-footer .lib-social li { margin: 0; }
.lib-social-link { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }
.lib-footer-bottom { margin-top: 2.5rem; padding-block: 1.25rem; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: 0.9rem; }
.lib-footer-bottom p { margin: 0; opacity: 0.85; }
.lib-footer-bottom button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Aviso de cookies (cmse.js). */
:where(.lib) .cmse-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 40rem; margin-inline: auto; padding: 1rem 1.25rem; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius); box-shadow: 0 8px 30px rgb(0 0 0 / 0.25); font-size: 0.9rem; }
:where(.lib) .cmse-consent p { margin: 0 0 0.75rem; }
:where(.lib) .cmse-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
:where(.lib) .cmse-consent-actions button { min-height: 2.75rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 2px solid var(--color-primary); background: transparent; color: var(--color-primary); font: inherit; font-weight: 700; cursor: pointer; }
:where(.lib) .cmse-consent-actions .cmse-consent-granted { background: var(--color-primary); color: var(--color-on-primary); }

/* Secciones: márgenes, cabecera de sección y texto con formato. */
.lib-section { padding-block: 2.5rem; }
.lib-tone-soft { background: var(--color-soft); }
.lib-tone-soft .lib-card { box-shadow: none; }
@media (min-width: 900px) { .lib-section { padding-block: 4rem; } }
.lib-narrow { max-width: min(46rem, 100% - min(2.5rem, 10vw)); }
.lib-center { justify-content: center; text-align: center; }
.lib-lead { font-size: 1.15rem; color: var(--color-muted); }
.lib-section-head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.lib-section-head p:last-child { margin-bottom: 0; color: var(--color-muted); }
.lib-prose > :first-child { margin-top: 0; }
.lib-prose :is(h2, h3) { margin-top: 2rem; }
.lib-prose :is(ul, ol) { padding-left: 1.25rem; }
.lib-prose li { margin: 0.3rem 0; }
.lib-prose img { border-radius: var(--radius); margin-block: 1rem; }
.lib-prose blockquote { margin: 1.5rem 0; padding: 0.5rem 0 0.5rem 1rem; border-left: 4px solid var(--color-primary); color: var(--color-muted); }
.lib-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.lib-prose :is(th, td) { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); text-align: left; }

/* Tarjetas: toda la tarjeta es el enlace del título. Redondas: foto circular, sin caja. */
.lib-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: 1.25rem; }
.lib-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.lib-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lib-card-body { display: flex; flex-direction: column; flex: 1; padding: min(1.1rem, 5vw) min(1.25rem, 5vw) min(1.25rem, 5vw); }
.lib-card h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.lib-card h3 a { color: var(--color-text); text-decoration: none; }
.lib-card h3 a::after { content: ""; position: absolute; inset: 0; }
.lib-card h3 a:focus-visible { outline: none; }
.lib-card:has(a:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.lib-card:has(a):hover { transform: translateY(-2px); }
.lib-card { transition: transform 0.15s ease; }
.lib-card p { margin: 0 0 0.5rem; color: var(--color-muted); }
.lib-card .lib-card-label { margin: auto 0 0; padding-top: 0.5rem; color: var(--color-text); font-weight: 700; }
.lib-cards-round .lib-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
.lib-cards-round .lib-card { align-items: center; text-align: center; background: none; border: 0; box-shadow: none; overflow: visible; }
.lib-cards-round .lib-card > img { width: min(10rem, 100%); aspect-ratio: 1; border-radius: 50%; }
.lib-cards-round .lib-card-body { padding: 0.75rem 0 0; }

/* Llamada a la acción: franja de color. Los botones van en el color contrario a la franja. */
.lib-cta { padding-block: 3rem; text-align: center; }
.lib-cta h2 { margin-inline: auto; max-width: 40rem; }
.lib-cta-text { max-width: 40rem; margin: 0 auto; font-size: 1.1rem; }
.lib-cta-primary { background: var(--color-primary); color: var(--color-on-primary); }
.lib-cta-dark { background: var(--color-dark); color: var(--color-on-dark); }
.lib-cta-light { background: var(--color-bg); color: var(--color-text); border-block: 1px solid var(--color-border); }
.lib-cta-primary .lib-btn-on { background: var(--color-on-primary); border-color: var(--color-on-primary); color: var(--color-primary); }
.lib-cta-dark .lib-btn-on { background: var(--color-on-dark); border-color: var(--color-on-dark); color: var(--color-dark); }
.lib-cta :is(.lib-btn-outline-on) { background: transparent; border-color: currentColor; color: inherit; }
.lib-cta-light .lib-btn-outline-on { color: var(--color-primary); border-color: var(--color-primary); }

/* Contacto: datos y formulario (lado a lado en el escritorio). */
.lib-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) { .lib-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 3rem; } }
.lib-contact-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.lib-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.lib-contact-item .lib-ic { margin-top: 0.15rem; color: var(--color-primary); }
.lib-contact-item > :last-child { min-width: 0; }

/* Formularios. */
.lib-form-card { padding: min(1.25rem, 5vw); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); scroll-margin-top: 5rem; }
@media (min-width: 640px) { .lib-form-card { padding: 1.75rem; } }
.lib-form-card h2 { font-size: 1.4rem; }
.lib-form { display: grid; gap: 1rem; }
.lib-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lib-field { display: grid; gap: 0.35rem; min-width: 0; }
.lib-field > label { font-weight: 600; }
.lib-form :is(input:not([type="checkbox"]), select, textarea) { width: 100%; min-height: 3rem; padding: 0.65rem 0.8rem; border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent); border-radius: calc(var(--radius) * 0.7); background: var(--color-surface); color: var(--color-text); font: inherit; }
.lib-form textarea { min-height: 8rem; resize: vertical; }
.lib-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-primary); }
.lib-form [aria-invalid="true"] { border-color: #b91c1c; }
.lib-check { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 400; }
.lib-check input { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; flex: none; accent-color: var(--color-primary); }
.lib-form .form-error { margin: 0; color: #b91c1c; font-size: 0.9rem; }
.lib-form .form-status { margin: 0; color: #b91c1c; font-weight: 600; }
.lib-form .lib-btn { justify-self: start; width: 100%; }
@media (min-width: 640px) { .lib-form .lib-btn { width: auto; } }
:where(.lib) .form-sent { padding: 1rem 1.25rem; border-radius: var(--radius); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); color: var(--color-text); font-weight: 600; }

/* Ficha: portada, datos, texto y galería; el formulario, al lado en el escritorio. */
.lib-detail-cover img { width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; object-fit: cover; }
.lib-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 1.75rem 3rem; }
@media (min-width: 1000px) { .lib-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; gap: 3rem; } .lib-detail-grid > .lib-form-card { position: sticky; top: 5.5rem; } }
.lib-back { margin: 0 0 1rem; font-size: 0.95rem; }
.lib-facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0; }
.lib-fact { flex: 0 1 auto; max-width: 100%; min-width: 0; padding: min(0.6rem, 3vw) min(0.9rem, 4vw); background: var(--color-soft); border: 1px solid var(--color-border); border-radius: var(--radius); }
.lib-fact dt { font-size: 0.8rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.lib-fact dd { margin: 0.15rem 0 0; font-weight: 700; }
.lib-detail .lib-prose { margin-top: 1.5rem; }
.lib-note { margin: 1rem 0 0; padding: 0.75rem 1rem; border-left: 4px solid var(--color-accent); background: var(--color-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.lib-card[id] { scroll-margin-top: 5rem; }

/* Galería con miniaturas (cmse.js, [data-cmse-gallery]): se desliza con el dedo también sin JS. */
.lib-gallery { margin-top: 2rem; }
.lib-gallery-title { font-size: 1.4rem; }
.lib-gallery .gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--radius-lg); }
.lib-gallery .gallery-track::-webkit-scrollbar { display: none; }
.lib-gallery .gallery-track img { flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
.lib-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; overflow-x: auto; padding-bottom: 0.25rem; }
.lib-thumbs a { flex: 0 0 4.5rem; overflow: hidden; border: 3px solid transparent; border-radius: calc(var(--radius) * 0.7); }
.lib-thumbs a[aria-current="true"] { border-color: var(--color-primary); }
.lib-thumbs img { aspect-ratio: 1; object-fit: cover; }

/* Datos de contacto del sitio en el pie. */
.lib-footer-contact { display: grid; gap: 0.6rem; }
.lib-wa-float { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 45; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-whatsapp); color: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
.lib-wa-float .lib-ic { width: 1.9rem; height: 1.9rem; }
/* El pie deja sitio al botón flotante. */
.lib-footer:has(.lib-wa-float) .lib-footer-bottom { padding-bottom: 5.5rem; }
@media (min-width: 900px) { .lib-footer:has(.lib-wa-float) .lib-footer-bottom { padding-bottom: 1.25rem; } }
.lib-footer .lib-footer-contact li { margin: 0; }
.lib-footer .lib-contact-item .lib-ic { color: inherit; opacity: 0.85; }

/* Catálogo: tarjetas de producto, páginas de categoría y de producto. */
.lib-product-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); gap: 1.25rem; }
@media (max-width: 520px) { .lib-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }
.lib-product { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.lib-product-media { display: block; }
.lib-product-media img, .lib-noimg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-soft); }
.lib-noimg { background: repeating-linear-gradient(135deg, var(--color-soft) 0 12px, var(--color-surface) 12px 24px); }
.lib-noimg-lg { border-radius: var(--radius-lg); }
.lib-product-body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; padding: 0.8rem 0.9rem 0.9rem; }
.lib-product h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.lib-product h3 a { color: var(--color-text); text-decoration: none; }
.lib-product h3 a:hover { text-decoration: underline; }
.lib-price { margin: 0; font-weight: 800; color: var(--color-text); }
.lib-price-lg { font-size: 1.6rem; margin: 0.5rem 0 0; }
.lib-out { margin: 0; color: #b91c1c; font-weight: 700; font-size: 0.9rem; }
.lib-product-body .lib-btn { margin-top: auto; align-self: flex-start; }
.lib-btn-sm { min-height: 2.5rem; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.lib-muted { color: var(--color-muted); font-weight: 400; }
.lib-crumbs { margin: 0 0 1rem; font-size: 0.95rem; color: var(--color-muted); }
.lib-chips { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lib-chips a { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.5rem; padding: 0.35rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.lib-chips a[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.lib-count { font-size: 0.8rem; color: var(--color-muted); }
.lib-chips a[aria-current="page"] .lib-count { color: inherit; }
.lib-filters-label { display: block; margin-bottom: 0.4rem; font-weight: 700; font-size: 0.9rem; }
.lib-catalog-banner img { width: 100%; max-height: 40vh; object-fit: cover; }
.lib-product-grid-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 900px) { .lib-product-grid-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.lib-product-photos .lib-gallery { margin-top: 0; }
.lib-product-photos .gallery-track img { aspect-ratio: 1; }
.lib-product-info h1 { font-size: clamp(1.6rem, 3vw + 0.8rem, 2.4rem); }
.lib-product-desc { margin-top: 1.25rem; }

/* Blog: listados, tarjetas de entrada, paginación y la página de una entrada. */
.lib-blog-head { margin-bottom: 1.5rem; }
.lib-post-meta { margin: 0 0 0.4rem; color: var(--color-muted); font-size: 0.9rem; }
.lib-post-card .lib-post-meta { order: -1; }
.lib-post-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: auto 0 0 !important; padding-top: 0.5rem; }
.lib-post-tags span { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--color-soft); color: var(--color-text); font-size: 0.8rem; }
.lib-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin-top: 2rem; }
.lib-feed { margin: 1.5rem 0 0; text-align: center; font-size: 0.9rem; }
.lib-post-body { padding-block: 1.75rem 3rem; }
.lib-post-body .lib-prose { margin-top: 1.5rem; }
.lib-post-tagnav { margin-top: 2rem; }
.lib-post-video { margin-top: 2rem; min-height: 12rem; background: var(--color-dark); }
.lib-post-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.lib-post-nav a { display: grid; gap: 0.2rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); text-decoration: none; font-weight: 700; }
.lib-post-nav a span { color: var(--color-muted); font-weight: 400; font-size: 0.85rem; }
.lib-post-nav a[rel="prev"] { text-align: right; }

/* Banner o slider: una imagen a todo el ancho o un slider (cmse.js) con un botón encima. */
.lib-banner { position: relative; background: var(--color-dark); }
.lib-banner img, .lib-banner picture { display: block; width: 100%; max-height: 80vh; object-fit: cover; }
.lib-slider .slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lib-slider .slides::-webkit-scrollbar { display: none; }
.lib-slider .slides img { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .lib-slider .slides img { aspect-ratio: 4 / 3; } }
.lib-banner-action { position: absolute; left: 0; right: 0; bottom: 1.5rem; display: flex; justify-content: center; margin: 0; padding-inline: 1rem; }
.lib-slider .slider-dots { position: absolute; left: 0; right: 0; bottom: 0.4rem; display: flex; justify-content: center; gap: 0.4rem; }
.lib-slider .slider-dots button { width: 0.7rem; height: 0.7rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: transparent; cursor: pointer; }
.lib-slider .slider-dots button[aria-current="true"] { background: #fff; }
.lib-slider .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.45); color: #fff; font-size: 1.4rem; cursor: pointer; }
.lib-slider .slider-prev { left: 0.75rem; }
.lib-slider .slider-next { right: 0.75rem; }
.lib-slider .slider-prev::before { content: "‹"; }
.lib-slider .slider-next::before { content: "›"; }

/* Texto con imagen o vídeo. */
.lib-split-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .lib-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } .lib-split-left .lib-split-media { order: -1; } }
.lib-split-solo .lib-split-grid { grid-template-columns: minmax(0, 1fr); max-width: 50rem; }
.lib-split-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); }
.lib-split-media img { width: 100%; }
.lib-tone-dark { background: var(--color-dark); color: var(--color-on-dark); }
.lib-tone-dark a { color: inherit; }
.lib-video .lib-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgb(0 0 0 / 0.6); }
.lib-video .lib-play svg { width: 2.25rem; height: 2.25rem; fill: #fff; }
.lib-video:hover .lib-play, .lib-video:focus-visible .lib-play { background: var(--color-primary); }

/* Barra superior de la cabecera. */
.lib-topbar { background: var(--color-dark); color: var(--color-on-dark); font-size: 0.9rem; }
.lib-topbar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; padding-block: 0.3rem; }
.lib-topbar-contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; min-width: 0; }
.lib-topbar a { color: inherit; }
.lib-topbar .lib-contact-item .lib-ic { color: inherit; width: 1.1rem; height: 1.1rem; }
.lib-topbar-social { gap: 0.4rem; }
.lib-topbar .lib-social-link { width: 2rem; height: 2rem; background: transparent; }
.lib-topbar .lib-social-link .lib-ic { width: 1.1rem; height: 1.1rem; }

/* Preguntas frecuentes. */
.lib-faq { display: grid; gap: 0.6rem; margin-top: 1rem; }
.lib-faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.lib-faq-item summary { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; font-weight: 700; cursor: pointer; list-style: none; }
.lib-faq-item summary::-webkit-details-marker { display: none; }
.lib-faq-item summary::after { content: "+"; flex: none; font-size: 1.3rem; line-height: 1; color: var(--color-primary); }
.lib-faq-item[open] summary::after { content: "−"; }
.lib-faq-item .lib-prose { padding: 0 1rem 1rem; }

/* Ventajas: con icono o numeradas. */
.lib-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.25rem; }
.lib-feature { min-width: 0; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.lib-feature h3 { font-size: 1.1rem; margin: 0.25rem 0 0.4rem; }
.lib-feature p { margin: 0; color: var(--color-muted); }
.lib-feature-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--color-soft); font-size: 1.4rem; }
.lib-features-numbered .lib-feature-icon { background: var(--color-primary); color: var(--color-on-primary); font-weight: 800; font-size: 1.1rem; }

/* Tokens del skin */
:root{--color-accent: #ffcf4a;--color-bg: #ffffff;--color-border: #ece3d3;--color-dark: #0f1d3a;--color-muted: #5b6472;--color-on-dark: #ffffff;--color-on-primary: #ffffff;--color-primary: #c4483c;--color-soft: #fff8ec;--color-surface: #ffffff;--color-text: #1f2937;--font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;--font-heading: "Nunito", ui-sans-serif, system-ui, sans-serif;--mar: #0b4a6e;--radius: 1rem;--radius-lg: 1.25rem;--wa: #198644;}

/* Camina Colombia sobre la biblioteca de componentes: fuentes, peso de los títulos y los colores
   propios de la cabecera y la llamada a la acción. Lo demás son los tokens. */
@font-face { font-family: "Nunito"; src: url("/_media/fonts/nunito.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/_media/fonts/nunito-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
:where(.lib) :is(h1, h2, h3) { font-weight: 800; letter-spacing: -0.01em; }
.lib-header-dark, .lib-cta-dark { background: var(--mar); }
.lib-header-dark .lib-nav .is-current, .lib-header-dark .lib-nav [aria-current="page"] { color: var(--color-accent); }
.lib-brand img { height: 3.25rem; }
/* Las introducciones de las secciones son largas: a la izquierda, como el texto. */
.lib-section-head { text-align: left; margin-inline: 0; }
.lib-form-card { background: var(--color-soft); }
.lib-card-label { color: var(--color-primary) !important; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.04em; order: -1; margin: 0 0 0.3rem !important; padding: 0 !important; }