/* SetFile — components.css (heredado del sitio de SetGantt)
   Buttons, nav controls, cards, placeholders, forms, FAQ accordion.
   NOTA: los bloques de microdemo/demo-modal (líneas de vídeo de producto)
   se mantienen sin usar en esta primera entrega — setfile.org no tiene ese
   componente. Se pueden retirar en una pasada de limpieza posterior. */

/* ---- Eyebrow / fine print / highlight text ---- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.fine-print {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.subsection-heading {
  text-align: center;
  margin-top: var(--space-10);
}

.subsection-lead {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-2) auto;
}

.highlight-statement {
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  max-width: 720px;
  margin: var(--space-8) auto;
}

.asset-caption {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* ---- Buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-body);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.button:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.button--primary {
  background-color: var(--color-cta-bg);
  color: var(--color-text-on-accent);
}

.button--primary:hover {
  background-color: var(--color-cta-bg-hover);
  color: var(--color-text-on-accent);
}

.button--secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent-border);
}

.button--secondary:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-hover);
}

.button--ghost {
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-small);
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.button--ghost:hover {
  background-color: var(--color-surface-alt);
}

/* ---- Nav toggle (mobile menu button) ----
   Visible by default (mobile-first); hidden again at >=960px in
   responsive.css once .primary-nav is always shown as a static bar.
   Wired up by nav.js (Paso 4). Works as a real disclosure control: the
   full nav list is real markup in the DOM either way, so it stays
   reachable even if JavaScript fails to load (#10 §64, §92). */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.nav-toggle__bar {
  display: block;
  height: 2px;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Turn the three bars into a close (×) icon while the menu is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Language switch ---- */
.lang-switch a {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.lang-switch a:hover {
  text-decoration: none;
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.lang-switch a[aria-current="page"] {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

/* ---- Theme toggle ---- */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  position: relative;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-text-primary);
  transition: background-color var(--transition-theme);
}

[data-theme="dark"] .theme-toggle::before {
  background-color: var(--color-theme-toggle-active-dot);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ---- Asset placeholders ----
   Structural placeholders for A0x assets. Must read clearly as a real layout
   component (not a broken image) and reserve real dimensions (aspect-ratio
   set inline per instance) to avoid layout shift (#10 §55, §17). */
.asset-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: var(--placeholder-bg);
  border: 1.5px dashed var(--placeholder-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + 32px);
  text-align: center;
  overflow: hidden;
}

/* Lightweight "browser window" chrome so placeholders read as real software
   waiting for a screenshot, not as generic broken-image boxes (#06 §9:
   "SetGantt debe parecer software, no una imagen promocional"). Pure CSS,
   no extra markup needed per instance. */
.asset-placeholder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--placeholder-border);
}

.asset-placeholder::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--placeholder-border);
  box-shadow: 16px 0 0 var(--placeholder-border), 32px 0 0 var(--placeholder-border);
}

/* Same border on all 4 sides as the base .asset-placeholder — deliberately
   NOT a thicker/different-colored border-top like a previous version had.
   Mixing a 3px solid top border with the 1.5px dashed sides on a rounded
   box made the corner curve look visually offset right where the two
   border styles met (confirmed via devtools inspection). A stronger
   box-shadow is enough to read as "featured" without touching the border. */
.asset-placeholder--feature {
  box-shadow: var(--shadow-lg);
}

/* Real product screenshots/videos once captured (replaces .asset-placeholder
   for that instance). Same radius/shadow language so the swap doesn't jar
   visually against sections still showing a placeholder. */
.asset-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.asset-placeholder__label {
  color: var(--placeholder-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
}

.asset-placeholder__label span {
  display: block;
  font-weight: 400;
  margin-top: var(--space-1);
}

/* ---- Callouts ---- */
.callout {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-block: var(--space-6);
}

.callout--emphasis {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-border);
  text-align: center;
  border-radius: var(--radius-lg);
}

.callout--emphasis p {
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.callout--emphasis p:last-child {
  margin-bottom: 0;
}

/* Smaller footprint for secondary-audience or reassurance content, so it
   doesn't compete visually with primary sections (Nico Paso 2 review). */
.callout--compact {
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-4);
}

.callout--compact h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-2);
}

.callout--compact p:last-child {
  margin-bottom: 0;
}

/* ---- Banner de consentimiento de cookies ----
   Fijo abajo, por encima de todo (incluida la cabecera sticky, z-index
   100) — real, no decorativo: gatea la carga de reCAPTCHA en form.js
   (ver cookie-consent.js). Oculto por defecto vía [hidden]; JS lo muestra
   solo si no hay decisión guardada. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--container-padding);
}

.cookie-banner__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.cookie-banner__inner p {
  flex: 1 1 420px;
  margin-bottom: 0;
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cookie-preferences-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: underline;
}

.cookie-preferences-link:hover {
  color: var(--color-accent-hover);
}

/* ---- Agentes IA (sección propia, no una card de Servicios) ---- */
.ai-agents__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.ai-agents__inner p {
  color: var(--color-text-primary);
}

.ai-agents__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent);
  font-size: 1.75rem;
  margin-bottom: var(--space-5);
}

/* ---- Capability cards ---- */
.capability-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.capability-card h4 {
  margin-bottom: var(--space-2);
}

.capability-card p {
  margin-bottom: 0;
  font-size: var(--fs-small);
}

/* ---- Benefit list ---- */
.benefit-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.benefit-list li {
  color: var(--color-text-secondary);
}

/* Short facts as inline chips instead of stacked explanatory bullets. */
.benefit-list--compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.benefit-list--compact li {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ---- Process steps ----
   Markup is a <ul> (not <ol>) precisely so the visual number below is the
   only number that exists, in the DOM and in the accessibility tree — see
   #10 review notes in en/index.html. Explicit list-style reset kept here too
   (on top of the global ul/ol reset in base.css) so this never regresses if
   the component is copied elsewhere. */
.process-steps {
  list-style: none;
}

.process-steps li::marker {
  content: "";
}

/* Reutiliza el estilo .eyebrow (azul, versalitas, pequeño) en vez de la
   antigua insignia circular — mismo lenguaje visual que "Claris Partner
   Platinum · Reseller · Developer" sobre el h1 del hero, discreta y sin
   competir con el título de cada paso. */
.process-steps__index.eyebrow {
  margin-bottom: 0;
}

.process-steps__index {
  flex-shrink: 0;
}

.process-steps p {
  margin-bottom: 0;
}

/* ---- Sequence list ----
   A compact visual strip, not a dominant text list (Nico Paso 2 review,
   second pass): small, uniformly muted, contained in a single bounded
   "track" rather than free-flowing full-width text. It reads as a small
   technical footnote next to the argument, not as 11 things to individually
   read. The argument itself lives in the paragraphs around it. */
.sequence-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: 640px;
  margin: var(--space-5) auto;
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.sequence-list li {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

.sequence-list li:not(:last-child)::after {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--color-border-strong);
}

/* ---- Pricing card ---- */
.pricing-card {
  max-width: 420px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  text-align: center;
}

.pricing-card__product {
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-small);
  margin-bottom: var(--space-3);
}

/* Deliberately understated: this is an internal placeholder, not a real
   price, and must not visually dominate the card the way a final price
   would (Nico Paso 2 review). Styled like the other "pending" markers. */
.pricing-card__price {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background-color: var(--placeholder-bg);
  border: 1px dashed var(--placeholder-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}

.pricing-card__terms {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.pricing-card__terms li {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
}

.pricing-card__includes {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Extra breathing room for the Tenant definition that immediately follows
   the pricing card — scoped to that one instance via the adjacent-sibling
   selector so the other three .fine-print usages elsewhere (already fine
   in their own context) are untouched. */
.pricing-card + .fine-print {
  margin-top: var(--space-6);
}

/* ---- FAQ accordion ---- */
.faq-item {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--color-accent);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* ---- Forms ---- */
/* Groups two short fields (Name + Phone) onto one line once there's room,
   instead of every field taking a full stacked row — shortens the form so
   it's more likely to fit on screen without scrolling. See responsive.css
   for the >=480px two-column version. */
.form-row-group {
  display: grid;
  gap: var(--space-4);
}

.form-row {
  display: grid;
  gap: var(--space-2);
  text-align: left;
}

.form-row label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.form-row input:focus-visible,
.form-row textarea:focus-visible {
  border-color: var(--color-accent);
}

.form-row.has-error input,
.form-row.has-error textarea {
  border-color: #d92d20;
}

.form-row__error {
  font-size: var(--fs-small);
  color: #d92d20;
}

.recaptcha-container {
  min-height: 78px;
  border: 1px dashed var(--placeholder-border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  color: var(--placeholder-text);
  background-color: var(--placeholder-bg);
}

/* Texto por idioma vía data-pending-label en el HTML (antes hardcodeado
   en inglés — visible tal cual en las páginas es/ca, incoherente con el
   resto de la página traducida). */
.recaptcha-container::before {
  content: attr(data-pending-label);
}

/* Applied by form.js once a real data-sitekey is configured and Google's
   widget has actually been rendered inside the container — the CSS
   placeholder box/copy is only meant for the pending state. */
.recaptcha-container.is-live {
  min-height: 0;
  border: none;
  background: none;
  padding: 0;
  justify-content: flex-start;
}

.recaptcha-container.is-live::before {
  content: none;
}

/* El recaptcha real de Google necesita ~300px de ancho — no cabe al lado
   del botón en una columna estrecha (formulario de contacto en 3
   columnas) sin partirse mal. Se apilan, pero el botón ocupa el mismo
   ancho que el recaptcha/los campos en vez de quedar más corto y suelto. */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.form-actions .button {
  width: 100%;
}

.form-status {
  font-size: var(--fs-small);
  font-weight: 600;
}

/* Sin mensaje que mostrar (estado inicial): no reserva línea en blanco. */
.form-status:empty {
  display: none;
}

.form-status[data-state="success"] {
  color: #067647;
}

.form-status[data-state="error"] {
  color: #d92d20;
}

/* ---- Footer legal (pending pages) ---- */
.legal-pending {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  cursor: help;
  border-bottom: 1px dashed var(--color-text-muted);
}

/* ---- Translation pending (ES/CA content without approved copy yet) ----
   Per #10 §59: no runtime translation, no silently-invented translation.
   Shows a clear marker plus the approved EN source so rhythm/length can
   still be reviewed while nobody mistakes it for final copy. */
.i18n-pending {
  display: inline-block;
}

.i18n-pending__badge {
  display: inline-block;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  border: 1px dashed var(--color-accent-border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.6rem;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.i18n-pending__source {
  display: block;
  margin-top: var(--space-2);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.button .i18n-pending__badge {
  border-color: currentColor;
}

/* ---- Legal pages (privacy.html / terms.html / cookies.html) ----
   One physical document per topic with EN/ES/CA hardcoded and toggled via
   the `hidden` attribute (legal.js) — see PENDING.md. */

/* Logo (→ setfile.org, external corporate identity) and "SetGantt / by
   SetFile" wordmark grouped visually but no longer a single click target
   with two different destinations — the explicit "Back" link below is the
   only way back to the SetGantt site (Nico review). */
.legal-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
}

.legal-back-link {
  white-space: nowrap;
}

/* Legal header has fewer, shorter controls than the commercial site's, but
   still lets them wrap onto a second row on very narrow screens rather
   than risk the same overflow the commercial header had before its own
   dedicated breakpoint fix — simplest safe option for a page with no
   mobile-menu system of its own. */
.legal-header .site-header__inner {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.legal-lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.legal-lang-switch button {
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
}

.legal-lang-switch button:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text-primary);
}

.legal-lang-switch button[aria-current="true"] {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
}

.legal-content {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--space-12);
}

.legal-content h1 {
  margin-bottom: var(--space-5);
}

.legal-placeholder {
  background-color: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.legal-placeholder p:last-child {
  margin-bottom: 0;
}

/* ---- 404 / error page (V0.2 PASO 7) ----
   Reuses .legal-content for the same centered/max-width column as the
   legal pages (#26 — "no sobrediseñar": no new layout primitive for a
   single page). */
.notfound-content {
  text-align: center;
}

.notfound-code {
  font-size: clamp(3rem, 2.2rem + 3vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.notfound-content .button {
  margin-top: var(--space-5);
}

/* ---- Microdemo + Full Demo (V0.2 PASO 5) ----
   Microdemo: <video class="asset-image microdemo"> reuses the same
   sizing/radius/shadow as .asset-image (#10 §55) — no separate visual
   language for "placeholder vs real asset vs microdemo". No CSS needed to
   hide native controls: the markup simply never sets the "controls"
   attribute (#08/#10 §17). Actual autoplay/reduced-motion behaviour lives
   in microdemo.js, not here — CSS alone cannot query
   prefers-reduced-motion at the JS/attribute level reliably enough per the
   assets procedure (§7/§44: "no confiar unicamente en CSS"). */
.microdemo-block {
  position: relative;
}

/* Watermark-style badge over the video corner (feedback de Nico tras ver
   la nota de texto estática en staging: no debe leerse como si tuviera
   que "avanzar" con la reproducción, sino como una marca fija — mismo
   patrón que un watermark de "preview"). Reutilizado igual dentro del
   modal Full Demo (.demo-modal__video-wrap .demo-badge). Texto real, no
   decorativo — se mantiene expuesto a lectores de pantalla. */
.demo-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  background-color: rgba(8, 12, 20, 0.72);
  color: #ffffff;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* Custom play/pause control for the autoplaying, looping microdemo — a
   real <button>, not the browser's native <video controls> bar, so the
   "preview watermark" look is kept while still giving WCAG 2.2.2 a way
   to pause the loop. Bottom-right corner so it never collides with the
   top-left .demo-badge. The icon (pause bars vs. play triangle) is
   driven purely by aria-pressed, which microdemo.js keeps in sync with
   the video's real paused/playing state — never a separate flag. */
.microdemo-pause {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  background-color: rgba(8, 12, 20, 0.72);
  cursor: pointer;
}

.microdemo-pause:hover,
.microdemo-pause:focus-visible {
  background-color: rgba(8, 12, 20, 0.88);
}

/* Default state (aria-pressed="false" = currently playing): show a
   pause icon, since that is the action the button will perform. */
.microdemo-pause::before,
.microdemo-pause::after {
  content: "";
  width: 3px;
  height: 12px;
  background-color: #ffffff;
  margin: 0 2px;
}

/* Paused state (aria-pressed="true"): swap to a play triangle. */
.microdemo-pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin: 0 0 0 2px;
  background-color: transparent;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #ffffff;
}

.microdemo-pause[aria-pressed="true"]::after {
  content: none;
}

/* Discreet secondary link under the microdemo — must not compete with
   primary CTAs (prompt V0.2 §19/§45). */
.microdemo-link {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.microdemo-link:hover,
.microdemo-link:focus-visible {
  color: var(--color-accent-hover);
}

/* ---- Full Demo modal ----
   Plain <dialog>-like overlay built with a native "hidden" attribute
   (same accessible-hiding pattern already used for the legal-language
   blocks in legal.js) instead of a class, so there is no risk of CSS/JS
   getting out of sync on which one wins. No third-party modal library —
   HTML/CSS/JS already solves it (#10 §32 / prompt V0.2 §46). */
.demo-modal[hidden] {
  display: none;
}

.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background-color: rgba(8, 12, 20, 0.72);
}

/* max-width en vw, no un ancho fijo en px: a petición de Nico, el Full
   Demo debe mostrar el vídeo a su tamaño real siempre que quepa en la
   ventana, en vez de reducirlo a un ancho arbitrario — un 960px fijo
   perdía detalle real de la interfaz de SetGantt (fechas, etiquetas
   finas) en pantallas grandes donde sobraba espacio de sitio. */
.demo-modal__dialog {
  position: relative;
  width: auto;
  max-width: 95vw;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}

.demo-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.demo-modal__close:hover {
  background-color: var(--color-surface-alt);
}

/* Envoltorio solo para poder anclar el badge .demo-badge sobre la esquina
   del vídeo (position: relative); el propio <video> sigue siendo el que
   define el tamaño. */
.demo-modal__video-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Tamaño real por defecto: el <video> no lleva width/height fijos en el
   HTML del modal, así que el navegador lo dibuja a su resolución
   intrínseca (la del archivo) en cuanto carga los metadatos, reducido
   solo lo justo para caber en la ventana — nunca ampliado por encima de
   su resolución nativa (evita vídeo pixelado en pantallas grandes). */
.demo-modal__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  background-color: #000;
}

/* Background scroll lock while the modal is open (microdemo.js toggles
   this on <html>). */
html.has-modal-open {
  overflow: hidden;
}

/* ==========================================================================
   SetFile.org — additions (secciones sin equivalente en el sitio SetGantt)
   Mismo lenguaje visual: tokens, radios, sombras y patrón de tarjeta que el
   resto del sistema. Nada de color en crudo.
   ========================================================================== */

/* ---- Service cards (con icono/captura) ---- */
.service-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.service-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Se mantiene la imagen (Nico: son recursos reales del sitio original,
   no stock nuevo inventado por nosotros), pero el título es lo que
   queremos transmitir — se le sube tamaño y peso para que gane a la
   imagen en importancia visual en vez de quedar como una etiqueta
   pequeña debajo de la foto. */
.service-card h4 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  font-weight: 800;
  margin-bottom: 0;
}

.service-card p {
  margin-bottom: 0;
  font-size: var(--fs-small);
}

.service-card__link {
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ---- Sector cards (grid simple, sin icono real disponible) ---- */
.sector-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.sector-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.sector-card h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}

.sector-card p {
  margin-bottom: 0;
  font-size: var(--fs-small);
}

/* ---- Team cards ---- */
.team-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.team-card {
  text-align: center;
}

.team-card__photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-4) auto;
  box-shadow: var(--shadow-sm);
}

.team-card__name {
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.team-card p {
  font-size: var(--fs-small);
}

.team-card__linkedin {
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ---- Testimonials ---- */
.testimonial-grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-card blockquote {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
}

.testimonial-card figcaption {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.testimonial-card figcaption cite {
  color: var(--color-text-primary);
  font-weight: 700;
  font-style: normal;
  display: block;
}

/* ---- Integrations: 5 bloques de capacidad (reformulado 2026-09-07,
   decision Nico — antes era una parrilla plana de 20 tecnologias sin
   jerarquia). Reutiliza el grid ya existente en esta clase (3 columnas
   desde tablet, sin cambios de breakpoint, ver responsive.css linea 68)
   con tarjetas en vez de listas de pildoras: capacidad primero (h4 +
   frase corta), tecnologias como texto secundario, no como logos. Sin
   caja/padding de .capability-card a proposito — la idea es que ocupe
   poco mas que la lista antigua (moderar el espacio, decision Nico). */
.integration-columns {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.integration-columns article h4 {
  margin-bottom: var(--space-2);
}

.integration-columns article p {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.integration-columns .integration-tech {
  color: var(--color-text-muted);
  margin-bottom: 0;
}


/* ---- Certification cards. Una única grid a 2 columnas para las 6
   certificaciones, todas tratadas igual: sello del nivel más alto a la
   izquierda (con los niveles inferiores, reales o "fantasma", en una fila
   pequeña debajo) + título/texto a la derecha, dentro de la misma
   tarjeta. Cada <img> de nivel inferior apunta a un nombre de fichero
   fijo (ver es/index.html): si el sello real todavía no existe, se sirve
   una imagen "fantasma" con ESE MISMO NOMBRE — el día que Nico consiga el
   sello real solo tiene que sustituir el fichero, sin tocar HTML/CSS.
   Developer Essentials (sin niveles inferiores) usa la misma tarjeta,
   simplemente sin la fila de sellos pequeños. */
.cert-cards {
  display: grid;
  gap: var(--space-8); /* más aire entre certificaciones (Nico) */
  margin-top: var(--space-8);
}

.cert-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6); /* más aire entre el sello y el título+texto (Nico) */
}

.cert-card__badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.cert-card__badge-primary {
  width: 180px; /* x2 (Nico) */
  height: auto;
}

.cert-card__badge-secondary-row {
  display: flex;
  gap: var(--space-2);
}

.cert-card__badge-secondary {
  width: 72px; /* x2 (Nico) */
  height: auto;
}

.cert-card__info h4 {
  margin-bottom: var(--space-2);
}

.cert-card__info p {
  font-size: var(--fs-small);
  margin-bottom: 0;
}

/* ---- Contacto en columnas (intro | datos | formulario), en vez de todo
   apilado y centrado — la altura del bloque la marca la columna del
   formulario (Nombre* → botón Enviar), las otras dos no la superan. ---- */
.contact-layout {
  display: grid;
  gap: var(--space-8);
}

.contact-layout__intro h2 {
  margin-bottom: var(--space-3);
}

/* Antes era su propia columna (3 columnas); ahora va debajo de la intro,
   dentro de la misma columna izquierda (Nico) — separación propia en vez
   de heredar el gap del grid, que solo aplica entre columnas. */
.contact-layout__info {
  margin-top: var(--space-6);
}

.contact-info-item {
  margin-bottom: var(--space-3);
}

.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-item h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-1);
}

.contact-info-item p {
  margin-bottom: 0;
}

.contact-layout__form .contact-form {
  max-width: none;
  margin: 0;
}

/* ---- Intercambio de imagen según tema claro/oscuro (logos con versión
   oscura pendiente: se sirve un "fantasma" con el mismo nombre + "-dark"
   hasta que Nico suba la versión real). ---- */
.theme-logo--dark {
  display: none;
}

[data-theme="dark"] .theme-logo--light {
  display: none;
}

[data-theme="dark"] .theme-logo--dark {
  display: block;
}

/* ---- Certification / partner badges row ---- */
.cert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.cert-row img {
  height: 32px;
  width: auto;
}

/* ---- "Why choose us" grid ---- */
.reason-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.reason-grid h4 {
  margin-bottom: var(--space-1);
}

.reason-grid p {
  font-size: var(--fs-small);
  margin-bottom: 0;
}