/* 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; }
.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); }
  .lib-header-dark .lib-nav-sub ul [aria-current="page"] { color: var(--color-primary); }
  .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{--font: Raleway, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;--orange: #f28c00;--orange-light: #f7a33a;--red: #ad1817;--teal: #14807f;--teal-dark: #0f6665;--text: #333333;}

/* Skin «Flores Funza»: reproduce el sitio anterior (Vuetify) con sus colores: franja naranja, botones
   turquesa y pie granate. Sin fuentes externas (la CSP de los sitios solo permite las propias). */

/* Raleway (SIL Open Font License 1.1), servida desde el propio sitio: fuentes del skin. */
@font-face { font-family: Raleway; src: url("/_media/fonts/raleway.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Raleway; src: url("/_media/fonts/raleway-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.container { width: min(80rem, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.5rem; z-index: 10; }

/* Franja superior y cabecera */
.ff-topbar { background: var(--orange); color: #fff; font-size: 0.95rem; }
.ff-topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; flex-wrap: wrap; }
.ff-topbar a { color: #fff; text-decoration: none; }
.ff-contact { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.ff-contact a { display: inline-flex; align-items: center; gap: 0.6rem; }
.ff-contact svg { width: 1.35em; height: 1.35em; flex: none; fill: currentColor; }
.ff-social { display: flex; gap: 0.9rem; align-items: center; }
.ff-social svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.ff-social svg.ff-stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.ff-social svg.ff-stroke .ff-dot { fill: currentColor; stroke: none; }
.ff-header { background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.15); position: relative; z-index: 2; }
.ff-header .container { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 8rem; flex-wrap: wrap; padding-block: 0.75rem; }
.ff-logo img { width: 15rem; }
.ff-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.ff-nav a { display: inline-block; padding: 0.4rem 0.8rem; border-radius: 4px; color: #444; text-decoration: none; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82rem; }
.ff-nav a:hover { background: #f2f2f2; }
.ff-nav a[aria-current='page'] { background: #dcdcdc; }
/* Menú del móvil sin JavaScript: una casilla oculta abre y cierra el menú (la hamburguesa es su
   etiqueta). En escritorio no se ven ni la casilla ni la hamburguesa. */
.ff-menu-toggle, .ff-menu-button { display: none; }
@media (max-width: 760px) {
  .ff-topbar { display: none; }
  .ff-header .container { justify-content: space-between; align-items: center; min-height: 0; flex-wrap: wrap; padding-block: 0.6rem; }
  .ff-logo img { width: 10rem; }
  .ff-menu-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .ff-menu-button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
  .ff-menu-button span, .ff-menu-button span::before, .ff-menu-button span::after { display: block; width: 1.4rem; height: 2px; background: #444; position: relative; transition: transform 0.2s ease, opacity 0.2s ease; }
  .ff-menu-button span::before, .ff-menu-button span::after { content: ""; position: absolute; left: 0; }
  .ff-menu-button span::before { top: -0.45rem; }
  .ff-menu-button span::after { top: 0.45rem; }
  .ff-menu-toggle:checked + .ff-menu-button span { background: transparent; }
  .ff-menu-toggle:checked + .ff-menu-button span::before { transform: translateY(0.45rem) rotate(45deg); }
  .ff-menu-toggle:checked + .ff-menu-button span::after { transform: translateY(-0.45rem) rotate(-45deg); }
  .ff-menu-toggle:focus-visible + .ff-menu-button { outline: 3px solid var(--orange); outline-offset: 2px; }
  .ff-nav { display: none; flex-basis: 100%; }
  .ff-menu-toggle:checked ~ .ff-nav { display: block; }
  .ff-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 0; border-top: 1px solid #eee; }
  .ff-nav a { display: block; padding: 0.85rem 0.5rem; border-radius: 0; }
}

/* Banner de la portada */
.ff-banner { position: relative; }
.ff-banner img { width: 100%; height: clamp(14rem, 25vw, 22rem); object-fit: cover; }
.ff-banner .ff-button-solid { position: absolute; left: 18%; top: 42%; }

/* Botones */
.ff-button { display: inline-block; padding: 0.4rem 1rem; border-radius: 999px; background: var(--teal); color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; box-shadow: 0 2px 4px rgb(0 0 0 / 0.25); }
.ff-button:hover { background: var(--teal-dark); color: #fff; }
.ff-button-solid { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 999px; background: var(--orange-light); color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; box-shadow: 0 3px 6px rgb(0 0 0 / 0.25); }
.ff-back { display: inline-block; padding: 0.4rem 1rem; border: 1px solid #333; border-radius: 999px; color: #333; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }

/* Cabecera de sección: título a la izquierda e imagen a la derecha */
.ff-intro { display: grid; grid-template-columns: 1fr; background: #fafafa; }
.ff-intro-text { padding: 2.5rem 1.25rem; align-self: center; }
.ff-intro h1 { font-size: clamp(2.25rem, 3vw + 1rem, 3rem); line-height: 1.1; margin: 0; color: #222; }
.ff-intro p { font-size: clamp(1.4rem, 1.5vw + 1rem, 2.4rem); line-height: 1.2; color: #777; font-weight: 700; margin: 0.4rem 0 0; }
.ff-intro .ff-back { margin-top: 1.25rem; }
.ff-intro img { width: 100%; height: 100%; max-height: 19rem; object-fit: cover; }
@media (min-width: 900px) { .ff-intro { grid-template-columns: 1fr 1fr; } .ff-intro-text { padding-left: max(3.5rem, calc((100vw - 80rem) / 2)); } }

/* Tarjetas: circulares (portada), de producto y de noticia */
.ff-cards { padding-block: 2.5rem 3rem; }
.ff-cards ul { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); justify-items: center; }
.ff-card { width: 100%; max-width: 15rem; text-align: center; }
.ff-cards-circle .ff-card img { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; }
.ff-cards-circle .ff-card h2 { color: var(--orange); font-size: 1.1rem; margin: 0 0 0.75rem; }
.ff-cards-box .ff-card, .ff-cards-news .ff-card { border: 1px solid #ddd; padding: 0.5rem 0.5rem 1rem; background: #fff; }
.ff-cards-box .ff-card img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.ff-cards-box .ff-card h2 { font-weight: 400; color: #555; font-size: 1rem; margin: 1.25rem 0 1rem; }
.ff-cards-news ul { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }
.ff-cards-news .ff-card { max-width: none; box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); }
.ff-cards-news .ff-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ff-cards-news .ff-card .ff-meta { font-size: 0.7rem; color: #999; margin: 0.75rem 0 0; }
.ff-cards-news .ff-card h2 { font-size: 0.95rem; color: #444; margin: 0.25rem 0 0.75rem; }
.ff-cards-news .ff-button { background: #1976d2; font-size: 0.7rem; }

/* Bloques de texto con imagen o color, a izquierda y derecha */
.ff-split { display: grid; grid-template-columns: 1fr; }
.ff-split-text { padding: 2rem 1.25rem; }
.ff-split h2 { font-size: clamp(2rem, 2vw + 1rem, 2.75rem); line-height: 1.1; margin: 0 0 0.75rem; color: #222; }
.ff-split-media { min-height: 14rem; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ff-split-media img { width: 100%; height: 100%; object-fit: cover; }
.ff-split-media.ff-photo { padding: 0; }
.ff-video { position: relative; display: block; width: min(100%, 34rem); }
.ff-video::after { content: '▶'; position: absolute; inset: 0; margin: auto; width: 4rem; height: 2.8rem; border-radius: 0.75rem; background: #e00; color: #fff; display: grid; place-items: center; font-size: 1.4rem; }
.ff-bg-yellow { background: #ebb700; } .ff-bg-teal { background: var(--teal); } .ff-bg-orange { background: var(--orange); } .ff-bg-white { background: #fff; }
@media (min-width: 900px) {
  .ff-split { grid-template-columns: 1fr 1fr; }
  .ff-split-text { padding: 2.5rem 3.5rem; }
  .ff-split-right .ff-split-text { order: 2; }
}

/* Artículo (noticias) y textos */
.ff-article { padding-block: 2rem 3rem; max-width: 52rem; }
.ff-article h1 { font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem); margin: 1rem 0; }
.ff-article .ff-gallery { display: grid; gap: 1rem; margin: 1.5rem 0; }
.ff-article .ff-gallery img { border-radius: 4px; width: 100%; }
.prose { max-width: 52rem; }
.container.prose { padding-block: 1.5rem; }

/* Catálogo: listado con filtro de color y ficha */
.catalog { padding-block: 1.5rem 3rem; }
.catalog-layout { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .catalog-layout { grid-template-columns: 16rem 1fr; gap: 2.5rem; align-items: start; } }
.filters { border: 1px solid #ddd; padding: 1rem; background: #fff; }
.filters-label { display: block; color: #777; font-size: 0.85rem; margin-bottom: 0.5rem; }
.filters ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filters a { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid #ddd; color: #444; text-decoration: none; font-size: 0.8rem; }
.filters a[aria-current='page'] { background: var(--teal); border-color: var(--teal); color: #fff; }
.product-cards { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
/* Como el sitio original: 2 productos por fila en el móvil, 3 en pantallas medianas y 4 como máximo. */
@media (min-width: 700px) { .product-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1200px) { .product-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.product-card { border: 1px solid #ddd; background: #fff; padding: 1rem 1rem 1.5rem; text-align: center; }
.product-card img { aspect-ratio: 1; object-fit: contain; width: 100%; }
.product-card-name { display: block; color: #777; font-size: 0.85rem; margin: 0.75rem 0; }
.product { padding-block: 1.5rem 3rem; }
@media (min-width: 900px) { .product { padding-block-start: 0.4rem; } }
.product-grid { display: grid; gap: 1.5rem; grid-template-areas: "photo" "thumbs" "info"; }
.product-photo { grid-area: photo; }
.product-thumbs { grid-area: thumbs; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.product-info { grid-area: info; }
@media (min-width: 900px) {
  .product-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". photo" "thumbs photo" "info photo" ". photo"; column-gap: 2rem; row-gap: 2rem; }
  .product-thumbs { justify-content: flex-start; }
  /* Como el sitio original: la foto de 510 px (más el marco), centrada en su columna. */
  .product-photo { justify-self: center; width: 100%; max-width: calc(510px + 1rem + 2px); box-sizing: border-box; }
}
.product-thumbs img { width: 6.5rem; height: 6.5rem; object-fit: cover; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }
.product h1 { font-size: clamp(2.25rem, 3vw + 1rem, 3rem); margin: 0; }
.product-color { color: #777; font-weight: 700; font-size: 1.2rem; margin: 0.25rem 0 1.5rem; }
.product-unavailable { display: inline-block; margin: 0 0 1.25rem; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.product-photo { border: 1px solid #ddd; padding: 0.5rem; }
/* Galería: la foto grande es una tira que se desliza con el dedo (scroll snap, también sin
   JavaScript); las miniaturas llevan a su foto y el script de la plataforma ([data-cmse-gallery])
   desliza la tira sin mover la página. La miniatura de la foto a la vista (aria-current) se cubre
   con un velo gris que se abre en círculo. */
.product-photo { overflow: hidden; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { flex: 0 0 100%; width: 100%; scroll-snap-align: start; scroll-snap-stop: always; object-fit: contain; }
.product-thumbs a { position: relative; display: block; overflow: hidden; }
.product-thumbs a::after { content: ""; position: absolute; inset: 0; background: rgb(110 110 110 / 0.45); clip-path: circle(0% at 50% 50%); transition: clip-path 0.45s ease; pointer-events: none; }
.product-thumbs a:hover::after { clip-path: circle(18% at 50% 50%); }
.product-thumbs a[aria-current="true"]::after { clip-path: circle(75% at 50% 50%); }
@media (prefers-reduced-motion: reduce) { .product-thumbs a::after { transition: none; } }

/* Pie */
.ff-footer { background: var(--red); color: #fff; padding: 2.5rem 0 1.5rem; }
.ff-footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.ff-footer h2 { font-weight: 400; font-size: 1.6rem; margin: 0 0 1.25rem; }
.ff-footer ul { margin: 0; padding: 0 0 0 1rem; list-style: none; }
.ff-footer li { margin-bottom: 1.15rem; }
.ff-footer a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82rem; }
.ff-footer dl { margin: 0 0 0 1rem; font-size: 0.85rem; }
.ff-footer dd { margin: 0 0 1rem; color: #ffd6d6; }
.ff-footer .ff-social { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding-left: 1.5rem; }
.ff-copyright { text-align: center; font-size: 0.8rem; margin-top: 2rem; }
.not-found { width: min(46rem, 100% - 2.5rem); margin: 4rem auto; }

/* Slider: una tira que se desliza con el dedo (scroll snap), también sin JavaScript. El script de
   la plataforma añade el paso automático, las flechas (al pasar el ratón) y los puntos. */
.slider { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides > img { flex: 0 0 100%; width: 100%; height: clamp(14rem, 32vw, 30rem); object-fit: cover; scroll-snap-align: start; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 0.9rem; display: flex; justify-content: center; gap: 0.5rem; }
.slider-dots button { width: 0.8rem; height: 0.8rem; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.6); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); cursor: pointer; }
.slider-dots button[aria-current] { background: #fff; transform: scale(1.2); }
.slider-arrow { position: absolute; top: 50%; translate: 0 -50%; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.35); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; }
.slider-arrow::before { content: "‹"; }
.slider-next::before { content: "›"; }
.slider-prev { left: 1rem; }
.slider-next { right: 1rem; }
.slider-arrow:focus-visible { opacity: 1; outline: 2px solid #fff; }
/* Las flechas, solo con ratón (al pasar por encima); en el móvil se desliza con el dedo. */
@media (hover: hover) { .slider:hover .slider-arrow { opacity: 1; } }

/* Aviso de cookies (lo pone el script de la plataforma). */
.cmse-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 40rem; margin-inline: auto; padding: 1rem 1.25rem; background: #fff; color: #222; border-radius: 0.5rem; box-shadow: 0 8px 30px rgb(0 0 0 / 0.25); font-size: 0.9rem; }
.cmse-consent p { margin: 0 0 0.75rem; }
.cmse-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.cmse-consent-actions button { padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid #222; background: #fff; color: #222; font: inherit; cursor: pointer; }
.cmse-consent-actions .cmse-consent-granted { background: #222; color: #fff; }
.cookie-settings { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }


/* El slider de la portada: como el banner, con el botón encima. */
.ff-slider .slides > img { height: clamp(14rem, 25vw, 22rem); }
.ff-slider .ff-button-solid { z-index: 1; }
/* El aviso de cookies y el enlace del pie, con los colores del sitio. */
.cmse-consent { font-family: var(--font); }
.cmse-consent a { color: var(--teal); }
.cmse-consent-actions button { border-color: var(--teal); color: var(--teal); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; }
.cmse-consent-actions .cmse-consent-granted { background: var(--teal); color: #fff; }
.ff-cookie-settings { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* En el móvil, el botón del banner va centrado y abajo (sobre los puntos) y algo más pequeño: deja la
   foto libre para deslizar con el dedo. Al final de la hoja, para que gane a la regla general. */
@media (max-width: 760px) {
  .ff-banner .ff-button-solid { left: 50%; top: auto; bottom: 2.4rem; translate: -50% 0; padding: 0.55rem 1.25rem; font-size: 0.9rem; white-space: nowrap; }
}

/* Filtros del catálogo: en escritorio, la lista a la izquierda; en el móvil, plegada tras un botón
   («Color: All ▾») que la despliega sin JavaScript (casilla oculta), y con el filtro activo como
   etiqueta que lo borra. Los enlaces llevan a #products: la página nueva abre en los productos. */
#products { scroll-margin-top: 0.5rem; }
.filters-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.filters-bar { display: none; }
@media (max-width: 760px) {
  .filters { border: 0; padding: 0; background: none; }
  .filters-label { display: none; }
  .filters-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  .filters-button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1rem; border: 1px solid #ccc; border-radius: 999px; background: #fff; color: #444; font-size: 0.9rem; cursor: pointer; }
  .filters-button::after { content: "▾"; font-size: 0.75rem; }
  .filters-toggle:checked ~ .filters-bar .filters-button::after { content: "▴"; }
  .filters-toggle:focus-visible ~ .filters-bar .filters-button { outline: 3px solid var(--orange); outline-offset: 2px; }
  .filters .filters-clear { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border: 1px solid var(--teal); border-radius: 999px; background: var(--teal); color: #fff; font-size: 0.9rem; text-decoration: none; }
  .filters ul { display: none; margin-top: 0.75rem; }
  .filters-toggle:checked ~ ul { display: flex; }
}

/* Formulario de contacto (estructura contact-form): como el del sitio anterior, botón «SEND» verde. */
.contact-form { padding-block: 1rem 3rem; max-width: 40rem; }
.contact-form h2 { color: #222; margin: 0 0 0.5rem; }
.contact-form form { display: grid; gap: 1rem; margin-top: 1rem; }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.3rem; color: #555; }
.form-field input:not([type="checkbox"]), .form-field textarea, .form-field select { width: 100%; box-sizing: border-box; padding: 0.7rem 0.85rem; border: 1px solid #c8c8c8; border-radius: 0.35rem; font: inherit; color: var(--text); background: #fff; }
.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.form-field [aria-invalid="true"] { border-color: var(--red); }
.form-check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.form-check input { margin-top: 0.3rem; }
.form-error { color: var(--red); font-size: 0.875rem; margin: 0.3rem 0 0; }
.form-status { margin: 0; font-weight: 600; color: var(--red); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form button[type="submit"] { justify-self: center; border: 0; cursor: pointer; padding: 0.7rem 2.5rem; border-radius: 999px; background: var(--teal); color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font: inherit; font-weight: 600; box-shadow: 0 2px 4px rgb(0 0 0 / 0.25); }
.contact-form button[type="submit"]:hover { background: var(--teal-dark); }
.contact-form button[disabled] { opacity: 0.6; cursor: progress; }
.form-sent { padding: 1rem 1.25rem; border-radius: 0.5rem; background: #eef7f6; color: var(--teal-dark); font-weight: 600; }


/* Con la letra del sistema grande (Android la aplica a la web), las palabras largas se parten en lugar
   de ensanchar la página; a tamaño normal no cambia nada. */
h1, h2, h3, h4, p, li, a, dt, dd, label, summary, span, button { overflow-wrap: anywhere; }