/* Origin Web — estilos compartidos de todas las páginas.
   Tokens arriba; luego base, layout, componentes y páginas. Sin dependencias. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("/assets/fonts/sofia-sans-extra-condensed-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --cream: #F3F0EA;
  --cream-2: #E9E4DA;
  --ink: #0B0B0A;
  --ink-2: #191816;
  --ink-soft: #4A4741;          /* 7.9:1 sobre crema */
  --accent: #D25C25;            /* superficies y texto grande; 5:1 sobre casi negro */
  --accent-ink: #A8441A;        /* texto naranja sobre crema: 5.3:1 */
  --on-dark: #F3F0EA;
  --on-dark-soft: #B8B2A7;      /* 9:1 sobre casi negro */
  --line: rgba(11, 11, 10, 0.14);
  --line-strong: rgba(11, 11, 10, 0.34);
  --line-dark: rgba(243, 240, 234, 0.16);
  --danger: #A3261B;

  /* Tipografía */
  --font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Sofia Sans Extra Condensed", "Arial Narrow", ui-sans-serif, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1.04rem + 0.42vw, 1.3125rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-h2: clamp(2.5rem, 1.8rem + 2.8vw, 4.25rem);
  --fs-display: clamp(3.6rem, 2.1rem + 6vw, 6rem);

  /* Espacio y layout */
  --gutter: clamp(1rem, 4vw, 3rem);
  --col-gap: clamp(1rem, 2.2vw, 2rem);
  --max: 1360px;
  --section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --header-h: 4.25rem;

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-edit: cubic-bezier(0.22, 1, 0.36, 1); /* entradas editoriales: desaceleración larga */

  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
strong { font-weight: 650; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 2px; }
.band--dark :focus-visible, .site-footer :focus-visible, .cart-panel :focus-visible { outline-color: var(--accent); }
html { scrollbar-color: var(--ink-soft) var(--cream-2); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 0.75rem 1rem; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Tipografía ---------- */

.display, .h-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.9;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); }
.h-display { font-size: var(--fs-h2); }
.h-display--sm { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem); }
.h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 38ch; color: var(--ink); text-wrap: pretty; }
.prose { max-width: 62ch; text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.muted { color: var(--ink-soft); }
.band--dark .muted { color: var(--on-dark-soft); }
.small { font-size: var(--fs-sm); line-height: 1.55; }
.meta {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.num { font-variant-numeric: tabular-nums; }
.tag-demo {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 0.2em 0.55em; line-height: 1.3;
}

/* Línea de texto con máscara (titulares seleccionados). Visible por defecto; solo se oculta
   cuando hay JS, se permite movimiento y el titular aún no entró en pantalla. */
.mask { display: block; overflow: clip; padding-block: 0.24em 0.06em; margin-block: -0.24em -0.06em; }
.mask > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) [data-mask]:not(.is-in) .mask > span { transform: translateY(115%); }
  .js [data-mask] .mask > span { transition: transform 580ms var(--ease-edit); }
  .js [data-mask] .mask:nth-child(2) > span { transition-delay: 75ms; }
  .js [data-mask] .mask:nth-child(3) > span { transition-delay: 150ms; }
  .js [data-mask] .mask:nth-child(4) > span { transition-delay: 225ms; }
}

/* ---------- Layout ---------- */

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.band { padding-block: var(--section); }
.band--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.band--dark { background: var(--ink); color: var(--on-dark); }
.band--paper { background: var(--cream-2); }
.rule-top { border-top: 1px solid var(--line); }
.band--dark .rule-top, .band--dark.rule-top { border-color: var(--line-dark); }
.stack > * + * { margin-top: var(--stack, 1.25rem); }

.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.25rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.section-head > .h-display { grid-column: 1 / span 8; }
.section-head > .section-aside { grid-column: 9 / -1; justify-self: start; }
@media (max-width: 860px) {
  .section-head > .h-display, .section-head > .section-aside { grid-column: 1 / -1; }
}

/* ---------- Botones y enlaces ---------- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  --btn-bd: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3rem; padding: 0.75rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
  border-radius: 0;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.plan--featured .btn--ghost { --btn-fg: var(--on-dark); --btn-bd: var(--line-dark); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: var(--ink); }
.band--dark .btn--ghost, .site-footer .btn--ghost { --btn-fg: var(--on-dark); --btn-bd: var(--line-dark); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: var(--ink); }
  .btn--ink:hover { --btn-bg: var(--accent); --btn-fg: var(--ink); --btn-bd: var(--accent); }
  .band--dark .btn:hover, .site-footer .btn:hover { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 0.95rem; font-size: var(--fs-sm); }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 650; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.1em;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--accent-ink); }
  .band--dark .link-arrow:hover { color: var(--accent); }
  .link-arrow:hover svg { transform: translateX(4px); }
  .link-arrow[data-external]:hover svg { transform: translate(3px, -3px); }
}

/* ---------- Encabezado ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; padding-block: 0.5rem; }
.brand img { width: 150px; height: auto; }
.nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.no-js [data-cart-toggle], .no-js .add-btn { display: none !important; }
.js .noscript-only { display: none; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.35em;
  min-height: 2.75rem; padding: 0 0.8rem; font-weight: 550; font-size: 0.975rem;
  text-decoration: none; background: none; border: 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.55rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out);
}
.nav-link[aria-current="page"]::after, .nav-link[data-current]::after { transform: scaleX(1); height: 2px; background: var(--accent); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::after { transform: scaleX(1); } }
.nav-link svg { width: 0.8em; height: 0.8em; transition: transform 200ms var(--ease-out); }
.nav-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-item { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 17rem;
  background: var(--cream); border: 1px solid var(--line-strong); padding: 0.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transform-origin: top left;
  transition: opacity 160ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.nav-item.is-open .nav-panel, .no-js .nav-item:focus-within .nav-panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity 160ms ease, transform 200ms var(--ease-out);
}
.nav-panel a { display: block; padding: 0.7rem 0.8rem; text-decoration: none; border-top: 1px solid var(--line); }
.nav-panel li:first-child a { border-top: 0; }
.nav-panel a strong { display: block; font-weight: 650; }
.nav-panel a span { display: block; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.4; }
.nav-panel a[aria-current="page"] strong { color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .nav-panel a:hover { background: var(--cream-2); } }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
/* Carrito del encabezado: solo el ícono, sin fondo ni borde, con área clicable de 44×44 px. */
.cart-toggle {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; border: 0; color: var(--ink);
  transition: color 200ms ease, transform 140ms var(--ease-out);
}
.cart-toggle:active { transform: scale(0.94); }
.cart-toggle svg { width: 1.4rem; height: 1.4rem; }
@media (hover: hover) and (pointer: fine) { .cart-toggle:hover { color: var(--accent-ink); } }
.cart-count {
  min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem; display: inline-grid; place-items: center;
  background: var(--ink); color: var(--cream); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cart-count[data-count="0"] { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
@keyframes count-bump { 50% { transform: scale(1.25); } }
.cart-count.is-bumped { animation: count-bump 260ms var(--ease-out); background: var(--accent); color: var(--ink); }
.menu-toggle { display: none; }

@media (max-width: 960px) {
  :root { --header-h: 3.75rem; }
  .brand img { width: 128px; }
  .nav { display: none; }
  .header-cta { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.85rem;
    background: var(--ink); color: var(--cream); border: 0; font-weight: 600; font-size: 0.95rem; text-decoration: none;
  }
  .menu-toggle svg { width: 1rem; height: 1rem; }
}

/* Menú móvil */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--ink); color: var(--on-dark);
  display: flex; flex-direction: column; padding: 0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity 220ms ease; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); border-bottom: 1px solid var(--line-dark); }
.mobile-menu-top img { width: 128px; }
.mobile-menu-close { min-height: 2.75rem; padding: 0 0.85rem; background: var(--cream); color: var(--ink); border: 0; font-weight: 600; }
.mobile-menu nav { padding-top: 1rem; }
.mobile-menu nav a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line-dark); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.25rem, 9vw, 3rem); line-height: 1;
}
.mobile-menu nav a.is-sub { font-family: var(--font-body); text-transform: none; font-weight: 550; font-size: 1.0625rem; padding: 0.7rem 0 0.7rem 1rem; color: var(--on-dark-soft); }
.mobile-menu nav a[aria-current="page"] { color: var(--accent); }
.mobile-menu .menu-foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu nav a { transform: translateY(8px); opacity: 0; transition: transform 380ms var(--ease-out), opacity 240ms ease; }
  .mobile-menu.is-open nav a { transform: none; opacity: 1; }
  .mobile-menu.is-open nav li:nth-child(2) a { transition-delay: 30ms; }
  .mobile-menu.is-open nav li:nth-child(3) a { transition-delay: 60ms; }
  .mobile-menu.is-open nav li:nth-child(4) a { transition-delay: 90ms; }
  .mobile-menu.is-open nav li:nth-child(5) a { transition-delay: 120ms; }
  .mobile-menu.is-open nav li:nth-child(6) a { transition-delay: 150ms; }
  .mobile-menu.is-open nav li:nth-child(7) a { transition-delay: 180ms; }
}
body.is-locked { overflow: hidden; }

/* ---------- Hero (inicio) ---------- */

.hero { padding-top: clamp(1.75rem, 1rem + 2.6vw, 3.5rem); padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* ORIGIN WEB a todo el ancho de la grilla: el tamaño sale del ancho útil (la palabra mide 3,62 em
   en Sofia Sans Extra Condensed 800; 3,66 deja un margen para el redondeo de cada navegador). */
.brand-display {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; white-space: nowrap;
  font-size: calc(min(100vw - 2 * var(--gutter), var(--max)) / 3.66); line-height: 0.8; letter-spacing: -0.01em;
}
.brand-display em { font-style: normal; color: var(--accent); }
.brand-display .mask { display: inline-block; vertical-align: top; padding-block: 0.12em 0.02em; margin-block: -0.12em -0.02em; }
.hero-rule { position: relative; height: 12px; margin-top: clamp(0.35rem, 0.1rem + 0.6vw, 0.75rem); }
.hero-rule .sig-dot { top: 0; left: -6px; }
.hero-line { position: absolute; left: 0; right: 0; top: 5.5px; height: 1px; background: var(--accent); transform-origin: left center; }
.hero-intro { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); row-gap: 1.75rem; align-items: end; }
.hero-title { grid-column: 1 / span 7; font-size: clamp(2rem, 1.3rem + 2.7vw, 3.75rem); font-weight: 650; line-height: 1.06; letter-spacing: -0.028em; }
.hero-title .mask > span { text-wrap: balance; }
.hero-side { grid-column: 8 / -1; }
.hero-side .lead { max-width: 38ch; }
.hero-side .actions { margin-top: 1.5rem; }
@media (max-width: 960px) { .hero-title, .hero-side { grid-column: 1 / -1; } }

.sig-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); z-index: 2; pointer-events: none; }

/* Entrada del hero: una vez por página, ~1 s en total. html.hero-go la pone el script del <head>
   cuando las fuentes están listas (o a los 600 ms). ORIGIN y WEB suben cada uno en su máscara; la
   línea se dibuja desde el punto. Los CTA no se animan: se pueden usar desde el primer cuadro.
   Sin JS o con movimiento reducido no hay estado oculto: el texto está siempre legible. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.hero-go):not(.motion-off) .hero .mask > span { transform: translateY(110%); }
  .js:not(.hero-go):not(.motion-off) .hero-line { transform: scaleX(0); }
  .js:not(.hero-go):not(.motion-off) .hero-rule .sig-dot { opacity: 0; transform: scale(0.4); }
  .js:not(.hero-go):not(.motion-off) .hero-side .lead { opacity: 0; transform: translateY(10px); }
  .js.hero-go .brand-display .mask:nth-child(1) > span { animation: mask-up 600ms var(--ease-out) both; }
  .js.hero-go .brand-display .mask:nth-child(2) > span { animation: mask-up 600ms var(--ease-out) 80ms both; }
  .js.hero-go .hero-rule .sig-dot { animation: sig-dot 260ms var(--ease-out) 120ms both; }
  .js.hero-go .hero-line { animation: line-draw 600ms var(--ease-out) 220ms both; }
  .js.hero-go .hero-title .mask:nth-child(1) > span { animation: mask-up 600ms var(--ease-out) 300ms both; }
  .js.hero-go .hero-title .mask:nth-child(2) > span { animation: mask-up 600ms var(--ease-out) 380ms both; }
  .js.hero-go .hero-side .lead { animation: lead-in 400ms var(--ease-out) 420ms both; }
}
@keyframes mask-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sig-dot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes lead-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Cinta de campaña (inicio): naranja, texto negro, levemente diagonal ---------- */
/* Va al pie del hero, en el flujo (no tapa título ni botones). El contenedor recorta lo que la
   rotación saca del ancho, así no hay scroll horizontal. El texto corre solo con JS y sin
   preferencia de movimiento reducido; si no, queda quieto. */
.hero:has(.promo-ribbon) { padding-bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
.promo-ribbon { overflow: clip; padding-block: clamp(1.25rem, 0.75rem + 2vw, 2.5rem); margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.ribbon-band {
  display: flex; align-items: stretch; width: calc(100% + 4rem); margin-inline: -2rem;
  background: var(--accent); color: var(--ink); transform: rotate(-1.6deg);
}
.ribbon-marquee { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ribbon-track { display: flex; width: max-content; }
.ribbon-group { display: flex; align-items: center; flex: none; }
.ribbon-group > span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height: 1; letter-spacing: 0.01em; padding: 0.7em 0 0.62em;
}
.ribbon-dot { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ink); margin-inline: 1.1rem; }
.ribbon-tools { flex: none; display: flex; align-items: center; gap: 0.25rem; padding-inline: 0.75rem 2.75rem; border-left: 1.5px solid var(--ink); }
.ribbon-cta {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 0.5rem; min-height: 44px;
  color: var(--ink); font-weight: 650; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap;
}
.ribbon-cta svg { width: 1rem; height: 1rem; transition: transform 160ms var(--ease-out); }
.ribbon-toggle {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer;
}
.ribbon-toggle[hidden] { display: none; }
.ribbon-toggle svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ribbon-toggle .i-play { display: none; fill: currentColor; stroke-width: 1.5; }
.ribbon-toggle[aria-pressed="true"] .i-pause { display: none; }
.ribbon-toggle[aria-pressed="true"] .i-play { display: block; }
.promo-ribbon :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ribbon-cta:hover svg { transform: translateX(3px); }
  .ribbon-toggle:hover { background: var(--ink); color: var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .ribbon-track { animation: ribbon-run 60s linear infinite; }
  .js .promo-ribbon.is-paused .ribbon-track,
  .js .ribbon-band:hover .ribbon-track,
  .js .ribbon-band:focus-within .ribbon-track { animation-play-state: paused; }
}
@keyframes ribbon-run { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .ribbon-band { transform: rotate(-0.6deg); }
  .ribbon-tools { padding-inline: 0.5rem 2.5rem; }
  .ribbon-cta { font-size: var(--fs-xs); }
  .ribbon-cta svg { display: none; }
}

/* ---------- Proyectos ---------- */

.projects { display: grid; gap: clamp(4rem, 3rem + 5vw, 8rem); }
.project { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.75rem; align-items: end; }
.project-media { grid-column: 1 / span 8; position: relative; }
.project-body { grid-column: 9 / -1; padding-bottom: 0.5rem; }
.project:nth-child(even) .project-media { grid-column: 5 / -1; grid-row: 1; }
.project:nth-child(even) .project-body { grid-column: 1 / span 4; grid-row: 1; }
.project-index { display: flex; justify-content: flex-end; gap: 1rem; border-top: 1px solid var(--line-dark); padding-top: 0.85rem; margin-bottom: 1.5rem; }
.project-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(3rem, 2rem + 4vw, 5.5rem); line-height: 0.88; letter-spacing: -0.005em; }
.project-name a { text-decoration: none; }
.project-body .prose { margin-top: 1.25rem; color: var(--on-dark-soft); }
.project-body .prose strong { color: var(--on-dark); font-weight: 600; }
.project-body .actions { margin-top: 1.75rem; gap: 1.25rem; }
.project-frame { position: relative; display: block; overflow: hidden; background: var(--ink-2); aspect-ratio: 16 / 10; }
.project-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 200ms var(--ease-out), opacity 220ms ease, filter 220ms ease; }
.project-phone {
  position: absolute; right: clamp(-1rem, -2vw, 0rem); bottom: -8%; width: 24%;
  background: var(--ink); padding: 0.35rem; border-radius: 1rem; border: 1px solid rgba(243, 240, 234, 0.18);
}
.project-phone img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 0.7rem; }
@media (hover: hover) and (pointer: fine) {
  .project-frame:hover img, .project-frame:focus-visible img, { transform: scale(1.025); }
  .project:hover .link-arrow svg { transform: translateX(4px); }
  .project:hover .link-arrow[data-external] svg { transform: translate(3px, -3px); }
}
@media (max-width: 860px) {
  .project-media, .project-body, .project:nth-child(even) .project-media, .project:nth-child(even) .project-body { grid-column: 1 / -1; grid-row: auto; }
  .project-phone { width: 30%; right: 0.5rem; }
}

/* Selector de versión (Starter / Pro / Elite) */
.version-switch { display: inline-flex; border: 1px solid var(--line-dark); margin-top: 1.5rem; }
.band:not(.band--dark) .version-switch { border-color: var(--line-strong); }
.version-switch button {
  min-height: 2.75rem; padding: 0 1rem; background: transparent; border: 0; font-weight: 600; font-size: var(--fs-sm);
  border-left: 1px solid var(--line-dark); transition: background-color 160ms ease, color 160ms ease;
}
.band:not(.band--dark) .version-switch button { border-left-color: var(--line-strong); }
.version-switch button:first-child { border-left: 0; }
.version-switch button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .version-switch button[aria-pressed="false"]:hover { background: rgba(243, 240, 234, 0.08); } .band:not(.band--dark) .version-switch button[aria-pressed="false"]:hover { background: var(--cream-2); } }
.version-scope { margin-top: 0.75rem; font-size: var(--fs-sm); min-height: 1.6em; }
/* Fundido cruzado entre versiones: la nueva captura entra encima, en el mismo marco (sin saltos). */
[data-version-media] { position: relative; display: block; height: 100%; }
.project-frame .version-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms ease, transform 200ms var(--ease-out); }
.project-frame .version-layer.is-in { opacity: 1; }
.version-note { margin-top: 0.35rem; font-size: var(--fs-sm); color: var(--on-dark-soft); max-width: 46ch; }
.version-note[hidden] { display: none; }
.no-js .version-note { display: none; }
/* /proyectos/: acceso rápido a cada marca. */
.brand-nav { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.brand-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.brand-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-dark);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.01em;
  text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.brand-nav a:focus-visible { border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .brand-nav a:hover { border-color: var(--accent); color: var(--accent); } }
.project--switch { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
/* "Explorar proyecto" sobre la imagen: aparece con hover o foco; en pantallas táctiles, siempre. */
.project-cta {
  position: absolute; left: 0.75rem; bottom: 0.75rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.8rem; background: var(--ink); color: var(--on-dark); font-size: var(--fs-sm); font-weight: 650;
  border-left: 2px solid var(--accent); opacity: 0; transform: translateY(4px); transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.project-cta svg { width: 0.9em; height: 0.9em; }
.project-frame:focus-visible .project-cta { opacity: 1; transform: none; }
.project-frame:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .project-frame:hover .project-cta { opacity: 1; transform: none; } }
@media (hover: none) { .project-cta { opacity: 1; transform: none; } }
.version-links { margin-top: 1rem; display: grid; gap: 0.35rem; }
.js .version-links--fallback { display: none; }
.no-js .version-switch, .no-js .version-scope, .no-js .version-open { display: none; }

/* ---------- Listas editoriales (servicios, pasos) ---------- */

.rows { border-top: 1px solid var(--line); }
.band--dark .rows { border-color: var(--line-dark); }
.row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0.75rem;
  padding-block: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); border-bottom: 1px solid var(--line); align-items: baseline;
}
.band--dark .row { border-color: var(--line-dark); }
.row-title { grid-column: 1 / span 5; }
.row-body { grid-column: 6 / span 5; }
.row-link { grid-column: 11 / -1; justify-self: end; }
.row-title .h-display { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); }
@media (max-width: 860px) { .row-title, .row-body, .row-link { grid-column: 1 / -1; justify-self: start; } }
.row--link { position: relative; text-decoration: none; transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .row--link:hover .h-display { color: var(--accent-ink); } }

/* Pasos del proceso: la línea se dibuja con el scroll y activa cada marcador (site.js). Sin JS o
   con movimiento reducido, la línea está completa y todos los marcadores encendidos. */
.steps-wrap { position: relative; }
.steps-track { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); }
.steps-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; }
.step { position: relative; padding: 1.75rem 1rem 0; border-right: 1px solid var(--line); }
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; }
.step::before {
  content: ""; position: absolute; top: -5px; left: -5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line-strong);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
}
.step-n { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--ink-soft); font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.step.is-on::before, .steps-wrap:not([data-tracking]) .step::before { background: var(--accent); border-color: var(--accent); }
.step.is-on .step-n, .steps-wrap:not([data-tracking]) .step-n { color: var(--accent-ink); }
.step h3 { margin-top: 0.75rem; font-size: 1.0625rem; font-weight: 650; }
.step p { margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 1024px) {
  .steps-track { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .steps-fill { transform-origin: center top; }
  .steps { grid-template-columns: 1fr; }
  .step, .step:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.25rem 0 1.25rem 2.25rem; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 0.75rem; }
  .step::before { top: 1.6rem; left: 0; }
  .step h3 { margin-top: 0.2rem; }
  .step p { grid-column: 2; }
  .step-n { grid-row: span 2; }
}

/* Etapas detalladas (/proceso/) */
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); border-bottom: 1px solid var(--line); }
.stage:first-child { border-top: 1px solid var(--line); }
.stage-n { grid-column: 1 / span 2; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 0.85; color: var(--accent-ink); }
.stage-title { grid-column: 3 / span 4; }
.stage-body { grid-column: 7 / -1; }
@media (max-width: 860px) { .stage-n { grid-column: 1 / span 3; } .stage-title { grid-column: 4 / -1; } .stage-body { grid-column: 4 / -1; margin-top: 0.75rem; } }
/* Proceso: cada etapa abre con una línea naranja que se dibuja desde el punto (site.js). */
.stage { position: relative; }
.stage-line { position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none; }
.stage-line::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left center; }
.stage-line .sig-dot { top: -5.5px; }
.stages.is-armed .stage:not(.is-on) .stage-line::before { transform: scaleX(0); }
.stages.is-armed .stage:not(.is-on) .stage-line .sig-dot { opacity: 0; transform: scale(0.4); }
.stages.is-armed .stage-line::before { transition: transform 600ms var(--ease-out) 80ms; }
.stages.is-armed .stage-line .sig-dot { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }

/* ---------- Planes ---------- */

.plan-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.plan-sum { padding: 1.5rem 1.5rem 1.75rem 0; border-right: 1px solid var(--line); display: grid; gap: 0.5rem; align-content: start; }
.plan-sum + .plan-sum { padding-left: 1.5rem; }
.plan-sum > .muted { min-height: 3.1em; }
@media (max-width: 900px) { .plan-sum > .muted { min-height: 0; } }
.plan-sum:last-child { border-right: 0; }
.plan-sum-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); line-height: 0.9; }
.plan-sum-price { font-size: 1.375rem; font-weight: 650; }
.plan-sum-price small, .plan-price small { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); margin-left: 0.25em; }
.plan-sum dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: var(--fs-sm); }
.plan-sum dt { color: var(--ink-soft); }
.plan-sum dd { font-weight: 600; }
.plan-sum-actions { margin-top: 1rem; }
@media (max-width: 900px) {
  .plan-summary { grid-template-columns: 1fr !important; }
  .plan-sum, .plan-sum + .plan-sum { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Comparación completa */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.plan { display: flex; flex-direction: column; padding: 1.75rem 1.75rem 2rem; border-right: 1px solid var(--line); }
.plan:first-child { padding-left: 0; }
.plan:last-child { border-right: 0; padding-right: 0; }
.plan--featured { background: var(--ink); color: var(--on-dark); padding-left: 1.75rem !important; padding-right: 1.75rem !important; border-right: 0; }
.plan--featured .muted, .plan--featured .plan-price small, .plan--featured .plan-facts dt { color: var(--on-dark-soft); }
.plan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.plan-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); line-height: 0.88; }
.plan-flag { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.plan-for { margin-top: 0.75rem; min-height: 3.2em; }
.plan-price { margin-top: 1.25rem; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.plan-price-old { text-decoration: line-through; font-size: 0.55em; color: var(--ink-soft); font-weight: 500; margin-right: 0.35em; }
.plan-promo { margin-top: 0.5rem; font-size: var(--fs-sm); color: var(--accent-ink); }
.plan-facts { display: grid; grid-template-columns: 1fr auto; margin-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.plan--featured .plan-facts, .plan--featured .plan-facts > * { border-color: var(--line-dark); }
.plan-facts dt, .plan-facts dd { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.plan-facts dt { color: var(--ink-soft); }
.plan-facts dd { font-weight: 650; text-align: right; }
.plan-list { margin-top: 1.5rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; font-size: var(--fs-sm); }
.plan-list li { position: relative; padding-left: 1.25rem; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 1px; background: currentColor; }
.plan-actions { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.6rem; }
/* Detalle secundario del plan: plegado, pero siempre en el HTML (y en la búsqueda del navegador). */
.plan-more { margin-top: 1rem; font-size: var(--fs-sm); }
.plan-more summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem;
  cursor: pointer; font-weight: 650; list-style: none; border-bottom: 1px solid var(--line);
}
.plan--featured .plan-more summary { border-color: var(--line-dark); }
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform 200ms var(--ease-out); }
.plan-more[open] summary::after { transform: rotate(45deg); }
.plan-facts--more { margin-top: 0; border-top: 0; }
.plan-more .plan-list { margin-top: 1rem; }
@media (max-width: 960px) {
  .plans { grid-template-columns: 1fr; border-top: 0; }
  .plan, .plan:first-child, .plan:last-child { padding: 2rem 0; border-right: 0; border-top: 2px solid var(--ink); }
  .plan--featured { padding: 2rem 1.25rem !important; margin-inline: calc(-1 * min(var(--gutter), 1.25rem)); }
  .plan-for { min-height: 0; }
}

/* Botón agregar al carrito */
/* Agregar: acción principal (naranja). En listas de add-ons, contorno para no saturar.
   Agregado: tinta con su etiqueta "Agregado" (en fondo oscuro, crema). */
.add-btn.btn--sm { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.add-btn.is-added { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: var(--ink); }
.plan--featured .add-btn.is-added, .band--dark .add-btn.is-added { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.add-btn .add-icon { transition: transform 220ms var(--ease-out); }
.add-btn.is-added .add-icon { transform: rotate(45deg); }

/* Tabla comparativa */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--ink); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--fs-sm); }
.compare th, .compare td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; padding-top: 1.25rem; }
.compare tbody th { font-weight: 600; color: var(--ink-soft); width: 28%; }


/* Add-ons agrupados */
/* Acceso rápido a las cuatro categorías de add-ons. */
.addon-nav { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.addon-nav ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.addon-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: background-color 180ms ease, border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) { .addon-nav a:hover { background: var(--cream-2); border-color: var(--ink); } }
.addon-group { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.addon-groups { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.addon-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1rem; }
.addon-group-head { grid-column: 1 / span 4; }
.addon-group-head p { margin-top: 0.6rem; }
.addon-list { grid-column: 5 / -1; border-top: 1px solid var(--line-strong); list-style: none; padding: 0; margin: 0; }
.addon { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.addon h3 { font-size: 1.0625rem; font-weight: 650; }
.addon p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 0.25rem; max-width: 56ch; }
.addon-price { font-weight: 650; white-space: nowrap; text-align: right; }
.addon-price .small { font-weight: 500; }
.add-btn[hidden], .addon-included[hidden] { display: none; }
.addon .addon-included {
  justify-self: end; margin: 0; padding: 0.45rem 0.75rem; border: 1px solid var(--ink);
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap;
}
@media (max-width: 860px) {
  .addon-group-head, .addon-list { grid-column: 1 / -1; }
  .addon { grid-template-columns: 1fr auto; }
  .addon > div:first-child { grid-column: 1 / -1; }
  .addon-price { text-align: left; white-space: normal; }
  .addon .addon-included { justify-self: start; }
}

/* Resumen compacto de la selección (/planes/): se pega al borde inferior mientras eliges plan y
   add-ons y se queda al final de la zona de compra. Una sola línea, también en móvil. */
.shop-summary { position: sticky; bottom: 0; z-index: 20; background: var(--ink); color: var(--on-dark); border-top: 2px solid var(--accent); }
.no-js .shop-summary { display: none; }
.shop-summary-inner { display: flex; align-items: center; gap: 0.25rem 1rem; padding-block: 0.6rem calc(0.6rem + env(safe-area-inset-bottom)); }
.shop-summary-sel { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-summary-sel span:first-child { font-weight: 650; }
.shop-summary-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-summary .btn { --btn-bg: var(--accent); --btn-fg: var(--ink); --btn-bd: var(--accent); }
.shop-summary :focus-visible { outline-color: var(--accent); }
/* El aviso ocupa por un momento el lugar de la selección: la barra no cambia de alto. Una línea
   como máximo; el detalle completo queda en el carrito y en el anuncio accesible. */
.shop-summary-note { flex: 1; min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-summary-inner:has(.shop-summary-note:not([hidden])) .shop-summary-sel { display: none; }
.shop-summary-note[hidden], .cart-note[hidden] { display: none; }
/* El botón de WhatsApp sube para no tapar el resumen. */
body:has(.shop-summary) .whatsapp-fab { bottom: calc(var(--float-bottom) + 3.75rem); }
@media (max-width: 480px) {
  .shop-summary-inner { gap: 0.25rem 0.75rem; }
  .shop-summary .btn { padding-inline: 0.85rem; }
}

/* Recorrido de compra */
.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: j; border-top: 1px solid var(--line-dark); }
.journey li { list-style: none; padding: 1.5rem 1.5rem 0 0; border-right: 1px solid var(--line-dark); }
.journey li + li { padding-left: 1.5rem; }
.journey li:last-child { border-right: 0; }
.journey li::before { counter-increment: j; content: counter(j, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--accent); margin-bottom: 0.75rem; }
.journey h3 { font-size: 1.0625rem; font-weight: 650; }
.journey p { margin-top: 0.4rem; font-size: var(--fs-sm); color: var(--on-dark-soft); }
@media (max-width: 860px) { .journey { grid-template-columns: 1fr 1fr; } .journey li { padding: 1.25rem 1rem 1.25rem 0 !important; border-bottom: 1px solid var(--line-dark); } .journey li:nth-child(2n) { border-right: 0; padding-left: 1rem !important; } }
@media (max-width: 520px) { .journey { grid-template-columns: 1fr; } .journey li, .journey li:nth-child(2n) { border-right: 0; padding-left: 0 !important; } }

/* Notas y condiciones */
.note { border-top: 1px solid var(--line-strong); padding-top: 1rem; font-size: var(--fs-sm); color: var(--ink-soft); max-width: 70ch; }
.note strong { color: var(--ink); }
/* ---------- Origin Commerce (/ecommerce/, entrada en el inicio y en /planes/) ---------- */
.commerce-eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.band--dark .commerce-eyebrow { color: var(--accent); }
.commerce-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2rem; align-items: center; }
.commerce-hero-main { grid-column: 1 / span 5; }
.commerce-hero-grid > .cv { grid-column: 6 / -1; }
.commerce-title { margin-top: 1rem; font-size: clamp(2.75rem, 1.7rem + 3.6vw, 5rem); text-wrap: balance; }
.commerce-hero-main .lead { margin-top: 1.25rem; max-width: 36ch; }
.commerce-hero-main .actions { margin-top: 1.75rem; }
.commerce-from { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); max-width: 30rem; }
.commerce-from-price { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1; }
.commerce-from-price small { font-size: 0.4em; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); margin-left: 0.15em; }
.commerce-from-term { margin-top: 0.5rem; font-weight: 600; }
.commerce-from-incorp { margin-top: 0.25rem; }
.commerce-from-note { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); max-width: 44ch; }
.commerce-hero-main .commerce-from + .actions { margin-top: 1.5rem; }
.commerce-example { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-left: 1.25rem; border-left: 3px solid var(--accent); max-width: 60ch; }
.commerce-example figcaption { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.commerce-example p { margin-top: 0.4rem; font-size: var(--fs-lead); line-height: 1.45; }
.commerce-teaser-inner { display: grid; gap: 1rem; max-width: 52rem; }
.commerce-teaser-text { color: var(--on-dark-soft); font-size: var(--fs-lead); line-height: 1.45; max-width: 46ch; }
.commerce-teaser .btn { margin-top: 0.5rem; }
@media (max-width: 960px) {
  .commerce-hero-main, .commerce-hero-grid > .cv { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
}
@media (max-width: 620px) {
}

/* Origin Commerce · pasos, planes con selector de modalidad, incorporación y autogestión */
.ec-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--col-gap); padding: 0; margin: 0; }
.ec-steps li { list-style: none; border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.ec-step-n { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2vw, 4.5rem); line-height: 0.9; color: var(--accent); }
.ec-steps h3 { margin-top: 0.85rem; font-size: var(--fs-h3); font-weight: 650; display: flex; align-items: center; gap: 0.5rem; }
.ec-step-icon { width: 1.35rem; height: 1.35rem; flex: none; color: var(--accent); }
.ec-steps p { margin-top: 0.5rem; color: var(--on-dark-soft); font-size: var(--fs-sm); max-width: 38ch; }
.band--dark .commerce-example { border-color: var(--accent); }
.band--dark .commerce-example figcaption { color: var(--on-dark-soft); }
/* Selector de modalidad: radios nativos (teclado con flechas, sin JS). La píldora naranja se
   desplaza con :has(); con movimiento reducido salta sin transición. */
.seg { border: 0; padding: 0; margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); min-width: 0; }
.seg-legend { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 0.75rem; padding: 0; }
.seg-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-dark); border-radius: 999px; padding: 4px; max-width: 46rem; isolation: isolate; }
.seg-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg-option { position: relative; z-index: 1; display: grid; place-items: center; min-height: 48px; padding: 0.4rem 0.75rem; border-radius: 999px; text-align: center; font-weight: 650; font-size: var(--fs-sm); line-height: 1.2; color: var(--on-dark); cursor: pointer; transition: color 200ms ease; }
.seg-input:checked + .seg-option { color: var(--ink); }
.seg-input:focus-visible + .seg-option { outline: 2px solid var(--accent); outline-offset: 3px; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--accent); transition: transform 260ms var(--ease-out); }
.seg-track:has(#ec-term-semestral:checked) .seg-thumb { transform: translateX(100%); }
.seg-track:has(#ec-term-anual:checked) .seg-thumb { transform: translateX(200%); }
@media (hover: hover) and (pointer: fine) { .seg-input:not(:checked) + .seg-option:hover { color: var(--accent); } }
@supports not selector(:has(*)) { .seg-thumb { display: none; } .seg-input:checked + .seg-option { background: var(--accent); } }
.ec-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--on-dark); }
.ec-tier { display: flex; flex-direction: column; padding: 1.75rem 1.75rem 2rem 0; }
.ec-tier + .ec-tier { padding-left: 1.75rem; border-left: 1px solid var(--line-dark); }
.ec-tier-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); line-height: 0.9; }
.ec-tier-prices { margin-top: 1.5rem; }
.ec-price { display: grid; gap: 0.4rem; }
.ec-price + .ec-price { margin-top: 1rem; }
.ec-price-amount { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1; }
.ec-price-amount small { font-size: 0.42em; font-weight: 500; letter-spacing: 0; color: var(--on-dark-soft); margin-left: 0.2em; }
.ec-price-term { font-size: var(--fs-sm); font-weight: 650; color: var(--accent); }
.ec-price-equiv-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
/* Carrito de Origin Commerce: datos del negocio y código de oferta privada. */
.cart-commerce { display: grid; gap: 0.75rem; }
.cart-commerce .cart-offer-row { display: flex; gap: 0.5rem; align-items: end; }
.cart-commerce .cart-offer-row .field { flex: 1; }
.cart-row-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted, inherit); }
/* Con :has(), cada tarjeta muestra solo la modalidad elegida. */
.ec-pricing:has(#ec-term-mensual:checked) .ec-price:not([data-term="mensual"]),
.ec-pricing:has(#ec-term-semestral:checked) .ec-price:not([data-term="semestral"]),
.ec-pricing:has(#ec-term-anual:checked) .ec-price:not([data-term="anual"]) { display: none; }
.ec-pricing:has(.seg-input:checked) .ec-price + .ec-price { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ec-pricing .ec-price { animation: ec-price-in 260ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .seg-thumb, .seg-option { transition: none; } }
@keyframes ec-price-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ec-pricing-note { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark); max-width: 72ch; color: var(--on-dark-soft); font-size: var(--fs-sm); }
.ec-pricing-note strong { color: var(--on-dark); font-weight: 650; display: block; font-size: var(--fs-body); margin-bottom: 0.35rem; }
.ec-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--col-gap); }
.ec-split > div { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.ec-split-h { font-size: var(--fs-h3); font-weight: 650; }
.ec-list { margin-top: 1rem; display: grid; gap: 0.7rem; }
.ec-list li { position: relative; padding-left: 1.1rem; color: var(--on-dark-soft); }
.ec-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.ec-split-note { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--on-dark); }
.ec-split-note a { color: var(--on-dark); }
.ec-custom-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--col-gap); align-items: end; }
.ec-custom-text { color: var(--on-dark-soft); font-size: var(--fs-lead); line-height: 1.45; max-width: 40ch; }
@media (max-width: 960px) {
  .ec-tiers { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .ec-tier, .ec-tier + .ec-tier { padding: 1.5rem 0 1.75rem; border-left: 0; border-top: 2px solid var(--on-dark); }
  .ec-custom-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ec-steps, .ec-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .seg-option { font-size: var(--fs-xs); padding-inline: 0.4rem; min-height: 52px; } }

/* ---------- Plan Pyme (/planes/): bloque de campaña, aparte de los tres planes ---------- */
.anchor-alias { position: absolute; scroll-margin-top: 6rem; }
.promo-plan {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); row-gap: 2rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  position: relative; border: 2px solid var(--accent); background: var(--cream); scroll-margin-top: 6rem;
}
.promo-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: var(--fs-sm); font-weight: 600; }
.promo-tag { background: var(--accent); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25em 0.6em; }
.promo-name { margin-top: 1rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 0.9; }
.promo-lead { margin-top: 0.75rem; font-size: var(--fs-lead); line-height: 1.35; max-width: 30ch; }
.promo-price { margin-top: 1.5rem; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 650; letter-spacing: -0.02em; }
.promo-iva { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--ink-soft); }
.promo-gift { margin-top: 0.35rem; font-weight: 600; color: var(--accent-ink); }
.promo-compare { margin-top: 0.5rem; color: var(--ink-soft); }
.promo-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.promo-plan-scope { align-self: start; border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.promo-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.promo-h + .promo-list { margin-top: 0.6rem; }
.promo-list + .promo-h { margin-top: 1.5rem; }
.promo-list { display: grid; gap: 0.6rem; font-size: var(--fs-sm); }
.promo-list li { padding-left: 1rem; position: relative; }
.promo-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
@media (max-width: 860px) { .promo-plan { grid-template-columns: minmax(0, 1fr); } }

.terms { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.5rem; }
.terms > h2, .terms > .terms-head { grid-column: 1 / span 4; }
.terms > ul { grid-column: 6 / -1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.terms > ul li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); max-width: 64ch; }
.band--dark .terms > ul, .band--dark .terms > ul li { border-color: var(--line-dark); }
@media (max-width: 860px) { .terms > h2, .terms > .terms-head, .terms > ul { grid-column: 1 / -1; } }

/* ---------- Encabezado de página interior ---------- */

.page-head { position: relative; padding-top: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-head .grid { row-gap: 1.5rem; align-items: end; }
.page-head .display { grid-column: 1 / span 8; }
.page-head .lead { grid-column: 9 / -1; max-width: 36ch; }
.page-head::after {
  content: ""; position: absolute; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent);
  left: calc((100% - min(100% - 2 * var(--gutter), var(--max))) / 2 - 6px);
}
.crumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: 0.5rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li { list-style: none; display: inline-flex; gap: 0.4rem; }
.crumbs li + li::before { content: "/"; color: var(--line-strong); }
.crumbs ol { display: contents; }
@media (max-width: 960px) { .page-head .display, .page-head .lead { grid-column: 1 / -1; } }

/* ---------- Servicio ---------- */

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2rem; }
.split > :first-child { grid-column: 1 / span 5; }
.split > :last-child { grid-column: 7 / -1; }
@media (max-width: 860px) { .split > :first-child, .split > :last-child { grid-column: 1 / -1; } }
.uses { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.uses li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.uses li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 0.55em; }
.uses h3 { font-size: 1.0625rem; font-weight: 650; }
.uses p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 0.2rem; }
.figure-pair { display: grid; grid-template-columns: 2.4fr 1fr; gap: var(--col-gap); align-items: end; }
.figure-pair figure img, .shot { width: 100%; border: 1px solid var(--line); }
.figure-pair figcaption, .shot-caption { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 600px) { .figure-pair { grid-template-columns: 1.6fr 1fr; gap: 0.75rem; } }

/* ---------- Caso ---------- */

.case-hero { padding-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.case-hero-media { position: relative; }
.case-hero-media .project-frame { aspect-ratio: 16 / 9; }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-top: 2rem; }
.case-facts > div { padding: 1rem 1rem 0 0; }
.case-facts dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.case-facts dd { margin-top: 0.35rem; font-weight: 600; }
@media (max-width: 760px) { .case-facts { grid-template-columns: 1fr 1fr; row-gap: 1rem; } }
.decisions { counter-reset: d; }
.versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.version figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--line-dark); }
.version--wide figure img { aspect-ratio: 16 / 10; }
.version h3 { margin-top: 1rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.version p { margin-top: 0.35rem; color: var(--on-dark-soft); font-size: var(--fs-sm); }
.version .link-arrow { margin-top: 0.85rem; }
.version-shot { display: block; overflow: hidden; }
.version-shot img { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .version:hover .version-shot img { transform: scale(1.025); } }
/* Caso: páginas interiores de la versión Elite. */
.interiors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.interior figcaption { margin-top: 0.85rem; font-weight: 650; display: flex; align-items: center; gap: 0.6rem; }
.interior-plan { font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.5rem; background: var(--accent); color: var(--ink); }
@media (max-width: 760px) { .interiors { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 760px) { .versions { grid-template-columns: 1fr; gap: 2.5rem; } .version figure img { aspect-ratio: 4 / 3; } }
.next-project { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; text-decoration: none; padding-block: 2.5rem; border-top: 1px solid var(--line); }
.next-project-text { display: grid; gap: 0.5rem; flex: 1; min-width: 0; }
.next-project-label { font-size: var(--fs-sm); color: var(--ink-soft); }
.next-project-label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 0.5rem; vertical-align: middle; }
.next-project-thumb { flex: none; width: clamp(7rem, 4rem + 14vw, 17rem); aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.next-project-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .next-project:hover .next-project-thumb img { transform: scale(1.04); } }
@media (max-width: 520px) { .next-project { flex-wrap: wrap; } .next-project-thumb { order: 3; width: 100%; } .next-project svg { order: 2; } }
.next-project .h-display { transition: color 200ms ease; }
.next-project svg { width: clamp(2rem, 1.5rem + 2vw, 3.25rem); height: auto; flex: none; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .next-project:hover svg { transform: translateX(6px); } }
@media (hover: hover) and (pointer: fine) { .next-project:hover .h-display { color: var(--accent-ink); } }

/* ---------- Origin Care ---------- */

.care-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.care-tier { padding: 1.75rem 1.75rem 2rem; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.care-tier:first-child { padding-left: 0; }
.care-tier:last-child { border-right: 0; padding-right: 0; }
.care-tier .plan-name { font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); }
.care-fixed { margin-top: 0.5rem; }
/* Origin Care: qué entra y qué no en una solicitud menor. */
.care-scope { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.care-scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); margin-block: 1.5rem; }
.care-scope-col { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.care-scope-col--yes { border-top: 2px solid var(--accent); }
.care-scope-head { font-weight: 650; margin-bottom: 0.75rem; }
.care-scope-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.care-scope-col li { position: relative; padding-left: 1.25rem; color: var(--ink-soft); }
.care-scope-col li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 1px; background: currentColor; }
.care-scope-col--yes li { color: var(--ink); }
.care-scope-col--yes li::before { background: var(--accent); height: 2px; }
@media (max-width: 760px) { .care-scope-grid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .care-tiers { grid-template-columns: 1fr; border-top: 0; } .care-tier, .care-tier:first-child, .care-tier:last-child { padding: 2rem 0; border-right: 0; border-top: 2px solid var(--ink); } }
.maint-sub-note { font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.maint-sub-btn.is-pending { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: var(--ink); }

/* ---------- Preguntas ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-weight: 650; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.75rem; height: 0.75rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding-bottom: 1.4rem; max-width: 64ch; color: var(--ink-soft); }
.faq summary { min-height: 3.25rem; transition: color 160ms ease; }
.faq details[open] summary { color: var(--accent-ink); }
.faq summary:focus-visible { outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent-ink); } }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { transition: content-visibility 260ms allow-discrete, height 260ms var(--ease-out); height: 0; overflow: clip; }
  .faq details[open]::details-content { height: auto; }
}
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---------- Formularios ---------- */

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-soft); }
.input, .field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: 0.75rem 0.9rem; background: #FBFAF7; border: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-right: 2.5rem; color: var(--ink); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 4px rgba(210, 92, 37, 0.35); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { font-size: var(--fs-sm); color: var(--danger); font-weight: 550; }
.field-error:empty { display: none; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--fs-sm); min-height: 1.5em; }
/* Estados del envío: el mensaje se vuelve un aviso con borde a la izquierda (enviando/éxito/error). */
.form-status:not(:empty) { padding: 0.75rem 0.9rem; border-left: 3px solid var(--line-strong); background: #FBFAF7; }
.form-status:focus { outline: none; }
.form-status:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.form-status.is-sending { color: var(--ink-soft); }
.form-status.is-success { color: #24613A; font-weight: 600; border-left-color: #24613A; }
.form-status.is-error { color: var(--danger); font-weight: 600; border-left-color: var(--danger); }
.form-status a { color: inherit; }
.form[aria-busy="true"] input, .form[aria-busy="true"] textarea { opacity: 0.7; }
.field [aria-invalid="true"] { background: #FDF6F4; }
.btn.is-loading { pointer-events: none; }
.btn .spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Cierre y pie ---------- */

.closing { padding-block: var(--section); background: var(--accent); color: var(--ink); }
.closing .grid { row-gap: 2rem; align-items: end; }
.closing .display { grid-column: 1 / span 8; max-width: 12ch; }
.closing .closing-side { grid-column: 9 / -1; }
.closing .lead { max-width: 30ch; }
.closing .actions { margin-top: 1.5rem; }
.closing .btn { --btn-bg: var(--ink); --btn-fg: var(--cream); --btn-bd: var(--ink); }
.closing .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.closing :focus-visible { outline-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .closing .btn:hover { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
}
@media (max-width: 960px) { .closing .display, .closing .closing-side { grid-column: 1 / -1; } }

.site-footer { background: var(--ink); color: var(--on-dark); padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2.5rem; }
.footer-brand { grid-column: 1 / span 4; }
.footer-symbol { display: inline-block; }
.footer-symbol img { width: 7.5rem; height: auto; }
.footer-brand p { margin-top: 1.25rem; color: var(--on-dark-soft); max-width: 36ch; font-size: var(--fs-sm); }
.footer-social { display: flex; gap: 0.5rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.footer-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-dark); border-radius: 50%;
  color: var(--on-dark); transition: color 180ms ease-out, border-color 180ms ease-out, background-color 180ms ease-out;
}
.footer-icon svg { width: 1.15rem; height: 1.15rem; }
.footer-icon:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .footer-icon:hover { border-color: var(--accent); color: var(--accent); } }
.footer-col { grid-column: span 2; }
.footer-col:first-of-type { grid-column: 7 / span 2; }
.footer-col:last-of-type { grid-column: span 3; }
.footer-col h2 { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-soft); margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.footer-col a { display: inline-block; padding: 0.3rem 0; text-decoration: none; font-size: var(--fs-sm); }
.footer-col a:hover { text-decoration: underline; }
.footer-col a[aria-current="page"] { color: var(--accent); }
.footer-base { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1.25rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; font-size: var(--fs-xs); color: var(--on-dark-soft); }
@media (max-width: 960px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-col, .footer-col:first-of-type, .footer-col:last-of-type { grid-column: span 6; }
}

/* ---------- Capas flotantes: WhatsApp, cookies, carrito ---------- */

:root { --float-bottom: calc(1rem + env(safe-area-inset-bottom)); --banner-h: 0px; }
.whatsapp-fab {
  position: fixed; right: calc(1rem + env(safe-area-inset-right)); bottom: var(--float-bottom); z-index: 30;
  transform: translateY(calc(-1 * var(--banner-h)));
  width: 3.25rem; height: 3.25rem; display: grid; place-items: center;
  background: var(--ink); color: var(--cream); border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(243, 240, 234, 0.3), 0 8px 18px -8px rgba(11, 11, 10, 0.55);
  transition: transform 260ms var(--ease-out), background-color 160ms ease;
}
.whatsapp-fab svg { width: 1.45rem; height: 1.45rem; }
.whatsapp-fab:active { transform: translateY(calc(-1 * var(--banner-h))) scale(0.94); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) { .whatsapp-fab:hover { background: var(--accent); color: var(--ink); } }
body.is-locked .whatsapp-fab { visibility: hidden; }
@media (max-width: 480px) {
  .has-hero:not(.past-hero) .whatsapp-fab { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .has-hero.past-hero .whatsapp-fab { transition: opacity 240ms ease, transform 260ms var(--ease-out); }
}

.cookie-banner {
  position: fixed; left: calc(1rem + env(safe-area-inset-left)); bottom: var(--float-bottom); z-index: 31;
  width: min(26rem, calc(100% - 2rem - 4rem)); padding: 1rem 1.1rem;
  background: var(--cream); color: var(--ink); border: 1px solid var(--ink);
  display: none; gap: 0.85rem; align-items: center; font-size: var(--fs-sm); line-height: 1.5;
}
.cookie-banner.is-shown { display: grid; grid-template-columns: 1fr auto; }
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner.is-shown { animation: rise 320ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .cookie-banner { left: 0; right: 0; bottom: 0; width: 100%; border-width: 1px 0 0; padding: 0.9rem var(--gutter) calc(0.9rem + env(safe-area-inset-bottom)); }
}

.cart-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(11, 11, 10, 0.45); opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.cart-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 260ms ease; }
.cart-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(28rem, 100%);
  background: var(--cream); color: var(--ink); display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 320ms;
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-panel.is-open { transform: none; visibility: visible; transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) { .cart-panel, .cart-panel.is-open { transition: visibility 0s, opacity 200ms ease; transform: none; opacity: 0; } .cart-panel.is-open { opacity: 1; } }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.cart-close { min-width: 2.75rem; min-height: 2.75rem; display: grid; place-items: center; background: transparent; border: 1px solid var(--line-strong); }
.cart-close svg { width: 1.1rem; height: 1.1rem; }
.cart-body { flex: 1; min-height: 6rem; overflow-y: auto; padding: 0 1.25rem; overscroll-behavior: contain; }
.cart-consult { margin: 1rem 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.cart-consult a { color: var(--ink); font-weight: 600; }
.cart-row { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.cart-row-name { font-weight: 650; }
.cart-row-was { margin-left: 0.3em; }
.cart-row-detail { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 0.2rem; }
.cart-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-note { margin: 0 0 1rem; padding: 0.75rem 0.85rem; border-left: 2px solid var(--accent); background: var(--cream-2); font-size: var(--fs-sm); }
.cart-row-price { font-weight: 650; }
.cart-row-tools { display: flex; align-items: center; gap: 0.75rem; grid-column: 1 / -1; }
.cart-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); }
.cart-qty button { width: 2.5rem; height: 2.5rem; background: transparent; border: 0; font-size: 1.1rem; }
.cart-qty span { min-width: 1.75rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.cart-row-remove { background: none; border: 0; padding: 0.5rem 0; text-decoration: underline; text-underline-offset: 0.2em; font-size: var(--fs-sm); color: var(--ink-soft); min-height: 2.5rem; }
.cart-empty { padding: 1.5rem 0; color: var(--ink-soft); border-top: 1px solid var(--line); }
.cart-empty a { color: var(--ink); font-weight: 600; }
.cart-foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--ink); display: grid; gap: 0.75rem; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* con datos de compra el pie se desplaza: el botón de pago nunca queda fuera de pantalla */
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 1.25rem; }
.cart-iva-note { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: -0.5rem; }
.cart-customer { display: grid; gap: 0.75rem; }
.cart-customer[hidden] { display: none; }
.cart-customer-note { font-size: var(--fs-xs); color: var(--ink-soft); }
.cart-status { font-size: var(--fs-sm); min-height: 1.2em; }
.cart-status.is-error { color: var(--danger); font-weight: 600; }
.cart-clear { justify-self: start; background: none; border: 0; padding: 0.5rem 0; text-decoration: underline; text-underline-offset: 0.2em; font-size: var(--fs-sm); color: var(--ink-soft); min-height: 2.5rem; }
.cart-clear[hidden] { display: none; }

/* ---------- Entradas sobrias de proyectos ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) [data-enter]:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .js [data-enter] { transition: opacity 500ms var(--ease-out), transform 520ms var(--ease-edit); }
}

/* ---------- Transiciones entre páginas (mejora progresiva) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* Corta y sin superposición larga: la página anterior se va en 90 ms y la nueva entra justo
     después; total ~220 ms. */
  ::view-transition-group(*) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(root) { animation: 90ms ease-out both vt-out; }
  ::view-transition-new(root) { animation: 150ms ease-out 70ms both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
.site-header { view-transition-name: site-header; }

/* ---------- Páginas legales ---------- */
.legal { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem); }
.legal .grid { row-gap: 2rem; }
.legal-toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); font-size: var(--fs-sm); }
.legal-toc ol { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.legal-toc a { display: block; padding: 0.45rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-soft); }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a[aria-current="true"] { color: var(--ink); font-weight: 650; box-shadow: inset 2px 0 0 var(--accent); padding-left: 0.75rem; transition: padding-left 160ms ease; }
.legal-content { grid-column: 5 / -1; max-width: 70ch; }
.legal-content .legal-title { display: none; }
.legal-section { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.legal-section:first-of-type { border-top: 0; padding-top: 0; }
.legal-section-head { display: flex; gap: 0.75rem; align-items: baseline; }
.legal-icon { display: none; }
.legal-section h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.25; margin-bottom: 0.75rem; }
.legal-section h4 { font-size: 1.0625rem; font-weight: 650; margin: 1.25rem 0 0.5rem; }
.legal-section p + p, .legal-section p + ul, .legal-section ul + p { margin-top: 0.85rem; }
.legal-section ul { padding-left: 1.2rem; display: grid; gap: 0.4rem; margin-top: 0.6rem; }
.legal-section a { color: var(--accent-ink); }
.legal-updated { margin-top: 2rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 960px) { .legal-toc { position: static; grid-column: 1 / -1; } .legal-content { grid-column: 1 / -1; } }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; align-content: center; }

/* ---------- Inicio: Plan Pyme y Origin Commerce (composiciones complementarias) ---------- */
.feature { padding-block: clamp(4rem, 2.75rem + 5vw, 7.5rem); }
.feature--pyme { background: var(--ink); color: var(--on-dark); }
.feature--commerce { background: var(--cream); border-bottom: 1px solid var(--line); }
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2.5rem; align-items: center; }
.feature-copy { grid-column: 1 / span 6; }
.feature-grid > :last-child { grid-column: 8 / -1; }
.feature-grid--flip .feature-copy { grid-column: 8 / -1; grid-row: 1; }
.feature-grid--flip > .cv { grid-column: 1 / span 6; grid-row: 1; }
.feature-grid > .cv { grid-column: 1 / span 6; }
.feature-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; font-size: var(--fs-sm); font-weight: 650; }
.sub-tag { border: 1px solid currentColor; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2em 0.6em; color: var(--accent-ink); }
.band--dark .sub-tag { color: var(--accent); }
.feature-title { margin-top: 1.25rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.005em; font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem); }
.feature-title--commerce { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.9rem); }
.feature-gift { margin-top: 1.25rem; font-size: var(--fs-lead); font-weight: 600; color: var(--accent); }
.feature-price { margin-top: 0.5rem; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 650; letter-spacing: -0.02em; }
.feature-price > span:last-child { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; color: var(--on-dark-soft); }
.feature-copy .actions { margin-top: 1.75rem; }
.feature--pyme :focus-visible { outline-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .feature--pyme .btn:hover { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); } }
.feature-points { display: grid; margin-top: 1.75rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.feature-points li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding-block: 0.8rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.feature-points strong { font-weight: 650; }
.feature-points span { color: var(--ink-soft); }
@media (max-width: 960px) {
  .feature-copy, .feature-grid > :last-child, .feature-grid--flip .feature-copy, .feature-grid--flip > .cv { grid-column: 1 / -1; grid-row: auto; }
  .feature-points li { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* Suma del Plan Pyme: tres líneas tipográficas, la última (regalo) en naranja. */
.pyme-sum { position: relative; overflow: hidden; border: 1px solid var(--line-dark); padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem); }
.pyme-list { display: grid; padding: 0; margin: 0; list-style: none; }
.pyme-list li { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 0.9rem 1rem; border-bottom: 1px solid var(--line-dark); position: relative; }
.pyme-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pyme-list li + li::before { content: "+"; position: absolute; right: 0; top: 0.6rem; font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--accent); }
.pyme-k { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.pyme-v { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); line-height: 0.95; }
.pyme-gift .pyme-v { color: var(--accent); }

/* Ilustración tienda ↔ panel: superficies planas, bordes rectos, productos dibujados y datos
   ficticios. Escritorio: panel | conexión | tienda. Móvil: tienda, conexión vertical y panel. */
.cv { margin: 0; }
.cv-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(1.75rem, 1rem + 2vw, 3.25rem) minmax(0, 1.08fr); align-items: center; font-family: var(--font-body); }
.cv-panel, .cv-store { display: block; border: 1.5px solid var(--ink); }
.cv-store { background: #FBFAF7; }
.cv-panel { background: var(--ink); color: var(--on-dark); }
.cv-bar { display: flex; align-items: center; gap: 0.5rem; height: 1.9rem; padding-inline: 0.65rem; border-bottom: 1.5px solid var(--ink); }
.cv-panel .cv-bar { border-color: var(--line-dark); }
.cv-bar-label { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.cv-dots { display: flex; gap: 0.3rem; }
.cv-dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--line-strong); }
.cv-tabs { display: flex; gap: 0.9rem; padding: 0.55rem 0.75rem 0; border-bottom: 1px solid var(--line-dark); font-size: 0.6875rem; color: var(--on-dark-soft); }
.cv-tabs span { padding-bottom: 0.45rem; }
.cv-tabs .is-on { color: var(--on-dark); box-shadow: inset 0 -2px 0 var(--accent); }
.cv-editor { display: grid; gap: 0.6rem; padding: 0.8rem 0.75rem 0.85rem; }
.cv-editor-head { display: flex; align-items: center; gap: 0.6rem; }
.cv-mini { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--cream-2); color: var(--ink); flex: none; }
.cv-mini svg { width: 1.6rem; height: 1.6rem; }
.cv-editor-title { font-size: 0.8125rem; font-weight: 650; }
.cv-field { display: grid; gap: 0.2rem; }
.cv-label { font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark-soft); }
.cv-input { display: block; padding: 0.3rem 0.45rem; border: 1px solid var(--line-dark); font-size: 0.75rem; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cv-chips { display: flex; gap: 0.3rem; }
.cv-chips span { display: grid; place-items: center; width: 1.6rem; height: 1.5rem; border: 1px solid var(--line-dark); font-size: 0.6875rem; }
.cv-chips .is-on { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.cv-save { justify-self: start; padding: 0.35rem 0.8rem; background: var(--accent); color: var(--ink); font-size: 0.6875rem; font-weight: 700; }
.cv-link { position: relative; height: 1.5px; }
.cv-link-line { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; }
.cv-link .sig-dot { left: auto; right: -6px; top: -5.25px; }
.cv-store-body { display: grid; gap: 0.7rem; padding: 0.75rem; }
.cv-banner { display: block; aspect-ratio: 16 / 4; background: var(--ink); position: relative; }
.cv-banner::after { content: ""; position: absolute; left: 7%; bottom: 26%; width: 28%; height: 16%; background: var(--accent); }
.cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.cv-product { display: grid; gap: 0.3rem; padding: 0.3rem; border: 1px solid transparent; }
.cv-product.is-edited { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cv-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--cream-2); color: var(--ink); }
.cv-product:nth-child(2) .cv-thumb { background: #E3D2C2; }
.cv-product:nth-child(3) .cv-thumb { background: #DCD6CA; }
.cv-product:nth-child(4) .cv-thumb { background: #E6DFD2; }
.cv-thumb svg { width: 46%; height: auto; }
.cv svg .pf { fill: var(--accent); }
.cv svg .pa { stroke: var(--accent); }
.cv-name { font-size: 0.6875rem; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-text { display: block; width: 45%; height: 0.35rem; background: var(--line-strong); }
.cv-caption { margin-top: 0.9rem; font-size: var(--fs-xs); color: var(--ink-soft); }
@media (max-width: 640px) {
  .cv-stage { grid-template-columns: minmax(0, 1fr); }
  .cv-store { order: 1; }
  .cv-link { order: 2; width: 1.5px; height: 1.75rem; margin-left: 2.5rem; }
  .cv-link-line { transform-origin: center top; }
  .cv-link .sig-dot { right: auto; left: -5.25px; top: auto; bottom: -6px; }
  .cv-panel { order: 3; }
}

/* ---------- Inicio: "Qué hacemos" en filas numeradas ---------- */
.families { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.family {
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0.75rem;
  align-items: baseline; padding-block: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem); border-bottom: 1px solid var(--line-strong);
}
.family::before {
  content: ""; position: absolute; inset: 0 calc(-0.5 * var(--gutter)); z-index: -1; background: var(--accent);
  opacity: 0; transition: opacity 200ms ease-out;
}
.family-n { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.family-title { grid-column: 2 / span 4; grid-row: 1; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); line-height: 0.92; }
.family-body { grid-column: 6 / span 4; grid-row: 1; color: var(--ink-soft); max-width: 42ch; }
.family-links { grid-column: 6 / span 4; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.family-glyph { grid-column: 10 / -1; grid-row: 1 / span 2; justify-self: end; align-self: center; width: clamp(6rem, 4rem + 4vw, 8.5rem); height: auto; color: var(--ink); transition: transform 220ms ease-out; }
.family-glyph .g-accent { stroke: var(--accent); }
.family-glyph .g-dot { fill: var(--accent); stroke: none; }
.family:focus-within::before { opacity: 0.09; }
.family:focus-within .family-glyph { transform: translateX(-6px); }
.family .link-arrow svg { transition: transform 180ms ease-out; }
.family .link-arrow:focus-visible svg { transform: translateX(5px); }
@media (hover: hover) and (pointer: fine) {
  .family:hover::before { opacity: 0.09; }
  .family:hover .family-glyph { transform: translateX(-6px); }
  .family .link-arrow:hover svg { transform: translateX(5px); }
}
@media (max-width: 860px) {
  .family { grid-template-columns: 2.25rem minmax(0, 1fr) auto; row-gap: 0.6rem; }
  .family-n { grid-column: 1; }
  .family-title { grid-column: 2; }
  .family-glyph { grid-column: 3; grid-row: 1; width: 4.5rem; align-self: start; }
  .family-body, .family-links { grid-column: 2 / -1; grid-row: auto; }
}

/* ---------- Inicio: demos en mosaico parejo ---------- */
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 2rem + 2vw, 3.5rem) var(--col-gap); margin: 0; padding: 0; list-style: none; }
.demo-frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-dark); }
.demo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 250ms ease-out; }
.demo-tile:focus-within .demo-frame img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) { .demo-tile:hover .demo-frame img { transform: scale(1.03); } }
.demo-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; row-gap: 0.25rem; margin-top: 1.1rem; }
.demo-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem); line-height: 0.95; }
.demo-name a { text-decoration: none; }
.demo-name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.demo-sector { grid-column: 1; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.demo-meta .link-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .demo-meta { grid-template-columns: minmax(0, 1fr); } .demo-meta .link-arrow { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.25rem; } }

/* ---------- Inicio: Somos Origin (composición tipográfica asimétrica) ---------- */
.about-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.75rem; align-items: start; }
.about-symbol { grid-column: 1 / span 2; width: 100%; max-width: 9rem; height: auto; margin-top: 0.4rem; }
.about-title { grid-column: 3 / span 6; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.75rem, 1.8rem + 3.8vw, 5.5rem); line-height: 0.9; }
.about-body { grid-column: 9 / -1; align-self: end; }
.about-rule { position: relative; display: block; height: 2px; background: var(--accent); transform-origin: left center; margin-bottom: 1.5rem; }
.about-rule .sig-dot { left: -6px; top: -5px; }
.about-text { font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; }
.about-notes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.about-notes li { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.45em 0.8em; border: 1px solid var(--line-strong); }
@media (max-width: 960px) {
  .about-symbol { grid-column: 1 / span 3; max-width: 7rem; }
  .about-title { grid-column: 1 / -1; }
  .about-body { grid-column: 1 / -1; }
}

/* Inicio: "Cómo trabajamos" más compacto, con salida discreta. */
.section-head--tight { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.steps-cta { margin-top: 2rem; }

/* ---------- Páginas de servicio: apertura con resultado, demo y CTA ---------- */
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.service-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2rem; align-items: center; }
.service-hero-copy { grid-column: 1 / span 5; }
.service-title { margin-top: 0.75rem; font-size: clamp(2.75rem, 1.7rem + 3.6vw, 5rem); text-wrap: balance; }
.service-hero-copy .lead { margin-top: 1.25rem; max-width: 38ch; }
.service-hero-copy .actions { margin-top: 1.75rem; }
.service-hero-media { grid-column: 7 / -1; margin: 0; }
.service-hero-frame { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); background: var(--cream-2); }
.service-hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.service-hero-media figcaption { margin-top: 0.75rem; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 960px) { .service-hero-copy, .service-hero-media { grid-column: 1 / -1; } }
.structure-note { margin-top: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.structure-note summary { cursor: pointer; padding-block: 0.9rem; font-weight: 650; min-height: 2.75rem; }
.structure-note-body { display: grid; gap: 0.75rem; padding-bottom: 1.1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.structure-note-body strong { color: var(--ink); }
.faq-more { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.faq-more li { padding-block: 0.9rem; border-bottom: 1px solid var(--line); }


/* /ecommerce/: lo que incluye, en tres grupos */
.ec-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem var(--col-gap); }
.ec-group { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.ec-group-glyph { width: 4rem; height: auto; color: var(--ink); }
.ec-group-glyph .g-accent { stroke: var(--accent); }
.ec-group-glyph .g-dot { fill: var(--accent); stroke: none; }
.ec-group h3 { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; }
.ec-group-list { display: grid; gap: 0.6rem; margin-top: 1rem; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-soft); }
.ec-group-list li { padding-left: 1rem; position: relative; }
.ec-group-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.ec-group-list strong { color: var(--ink); font-weight: 650; }
.ec-group-more { margin-top: 1rem; font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 960px) { .ec-groups { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* /ecommerce/: configurador (diseño → nivel → modalidad), Aurora y Origin Logistics. Radios
   nativos (flechas del teclado, sin JS); :has() marca la opción elegida. */
.commerce-sub { margin-top: 0.9rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1; color: var(--accent-ink); }
.feature-sub { margin-top: 0.9rem; font-weight: 650; color: var(--accent-ink); }
.ec-origin { min-width: 0; margin-inline: 0; border-inline: 0; padding: 1.25rem 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ec-origin-h { font-size: var(--fs-h3); font-weight: 650; }
.ec-origin-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ec-origin-h { padding: 0; margin-bottom: 0.9rem; }
.ec-web { display: block; height: 100%; padding: 0.85rem 1rem; border: 1px solid var(--line-dark); border-radius: 4px; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.ec-web strong { display: block; color: var(--on-dark); font-weight: 650; margin-bottom: 0.2rem; }
.ec-opt-input:checked + .ec-web { border-color: var(--accent); background: rgba(210, 92, 37, 0.12); box-shadow: inset 0 0 0 1px var(--accent); }
.ec-opt-input:focus-visible + .ec-web { outline: 2px solid var(--accent); outline-offset: 3px; }
.ec-sum-error { color: #F0A27C; font-weight: 600; font-size: var(--fs-sm); }
.ec-sum-cta [data-commerce-buy][hidden] { display: none; }
.cart-terms { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.cart-terms input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; flex: none; accent-color: var(--accent); }
.cart-commerce-sum { display: grid; gap: 0.2rem; margin: 0.75rem 0 0; font-size: var(--fs-sm); }
.cart-commerce-sum > div { display: flex; justify-content: space-between; gap: 1rem; }
.cart-commerce-sum dt { color: var(--ink-soft); }
.cart-commerce-sum dd { margin: 0; font-weight: 600; text-align: right; }
.ec-step { border: 0; padding: 0; margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); min-width: 0; }
.ec-step-legend { padding: 0; margin-bottom: 0.9rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.ec-step-legend span { color: var(--accent); margin-right: 0.4rem; }
.ec-step-note { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--on-dark-soft); max-width: 72ch; }
.ec-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ec-opt-input, .ec-pick-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ec-opt { display: grid; gap: 0.3rem; align-content: start; padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--line-dark); border-radius: 4px; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.ec-opt-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 0.95; }
.ec-opt-desc { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ec-opt-price { margin-top: 0.4rem; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 650; letter-spacing: -0.02em; }
.ec-opt-price small { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-soft); }
.ec-opt-input:checked + .ec-opt { border-color: var(--accent); background: rgba(210, 92, 37, 0.12); box-shadow: inset 0 0 0 1px var(--accent); }
.ec-opt-input:focus-visible + .ec-opt, .ec-pick-input:focus-visible + .ec-pick { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ec-opt:hover { border-color: var(--on-dark-soft); } }
.ec-tier-tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.ec-tier-actions { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ec-tier-actions strong { color: var(--on-dark); font-weight: 650; }
.ec-tier-from { margin-top: 1rem; font-size: var(--fs-sm); font-weight: 650; }
.ec-tier-feats { display: grid; gap: 0.5rem; margin: 0.75rem 0 1.5rem; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ec-tier-actions + .ec-tier-feats { margin-top: 1rem; }
.ec-tier-feats li { padding-left: 1rem; position: relative; }
.ec-tier-feats li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.ec-pick { margin-top: auto; align-self: start; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.6rem 1.25rem; border: 1px solid var(--on-dark); border-radius: 999px; font-weight: 650; font-size: var(--fs-sm); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.ec-pick::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.ec-pick-input:checked + .ec-pick { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.ec-pick-input:checked + .ec-pick::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--accent); }
@media (hover: hover) and (pointer: fine) { .ec-pick-input:not(:checked) + .ec-pick:hover { color: var(--accent); border-color: var(--accent); } }
.ec-tier:has(.ec-pick-input:checked) .ec-tier-name { color: var(--accent); }
.ec-summary { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--col-gap); padding: 1.5rem; border: 1px solid var(--accent); border-radius: 4px; }
.ec-sum-title { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.ec-sum-sel { font-size: var(--fs-h3); font-weight: 650; }
.ec-sum-lines { margin: 1rem 0 0; display: grid; }
.ec-sum-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line-dark); }
.ec-sum-lines dt { font-weight: 600; }
.ec-sum-lines dt > span { display: block; font-weight: 500; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ec-sum-lines dd { margin: 0; font-weight: 650; white-space: nowrap; }
.ec-sum-lines .ec-sum-total { border-bottom: 0; padding-top: 0.9rem; }
.ec-sum-total dt { font-size: var(--fs-h3); }
.ec-sum-total dd { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); letter-spacing: -0.02em; color: var(--accent); }
.ec-sum-after { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ec-sum-cta { align-self: end; display: grid; gap: 0.75rem; justify-items: start; }
.ec-sum-safe { font-size: var(--fs-sm); color: var(--on-dark-soft); max-width: 40ch; }
.ec-sum-help { margin-top: 0.5rem; display: grid; gap: 0.6rem; }
.ec-sum-help-q { font-weight: 600; }
.ec-sum-help .actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ec-aurora-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem var(--col-gap); }
.ec-aurora-rule { font-size: var(--fs-lead); line-height: 1.4; max-width: 40ch; padding-left: 1.25rem; border-left: 3px solid var(--accent); }
.ec-aurora-rule span { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5em; line-height: 1; }
.ec-aurora-list { margin-top: 1.5rem; }
.ec-topups { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.ec-topups-h { font-size: var(--fs-h3); font-weight: 650; }
.ec-topup-list { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ec-topup-list li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line); }
.ec-topup-p { font-weight: 650; }
.ec-topup-notice { margin-top: 1.25rem; padding-left: 1rem; border-left: 3px solid var(--accent); }
.ec-topup-note { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.ec-logistics { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem var(--col-gap); margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.ec-logistics-title { margin-top: 0.6rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1; }
.ec-logistics-intro { margin-top: 0.75rem; color: var(--ink-soft); max-width: 40ch; }
.ec-logistics-list { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ec-opt, .ec-pick { transition: none; } }
@media (max-width: 960px) {
  .ec-summary, .ec-aurora-grid, .ec-logistics { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ec-opts, .ec-origin-cases { grid-template-columns: minmax(0, 1fr); }
  .ec-summary { padding: 1.15rem; }
}

/* /ecommerce/: estados de entrega (diagrama explicativo, superficie oscura) */
.ds { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--ink); color: var(--on-dark); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.ds-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--col-gap); row-gap: 0.75rem; align-items: end; }
.ds-title { grid-column: 1; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 0.95; max-width: 18ch; }
.ds-intro { grid-column: 1; color: var(--on-dark-soft); max-width: 46ch; }
.ds-switch { grid-column: 2; grid-row: 1 / span 2; align-self: end; display: inline-flex; margin: 0; padding: 0; border: 1px solid var(--line-dark); }
.ds-switch[hidden] { display: none; }
.ds-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ds-option { display: grid; place-items: center; min-height: 2.75rem; min-width: 7.5rem; padding: 0 1.1rem; font-weight: 650; cursor: pointer; color: var(--on-dark); transition: background-color 180ms ease-out, color 180ms ease-out; }
.ds-option + .ds-input + .ds-option, .ds-input + .ds-option + .ds-input + .ds-option { border-left: 1px solid var(--line-dark); }
.ds-input:checked + .ds-option { background: var(--accent); color: var(--ink); }
.ds-input:focus-visible + .ds-option { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ds-input:not(:checked) + .ds-option:hover { background: rgba(243, 240, 234, 0.08); } }
.ds-flows { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); display: grid; gap: 2.5rem; }
.ds-flow-name { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.ds.is-switchable .ds-flow:not(.is-active) { display: none; }
.ds.is-switchable .ds-flow-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ds-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ds-stages li { position: relative; display: grid; align-content: start; gap: 0.35rem; padding: 1.5rem 1.25rem 0 0; }
.ds-stages li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.ds-stages li:last-child::before { right: auto; width: 12px; }
.ds-stages li::after { content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.ds-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.ds-label { margin-top: 0.35rem; font-size: 1.0625rem; font-weight: 650; }
.ds-desc { font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ds-notes { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 2rem 0 0; padding: 1.25rem 0 0; list-style: none; border-top: 1px solid var(--line-dark); font-size: var(--fs-sm); font-weight: 600; }
.ds-notes li { padding-left: 1rem; position: relative; }
.ds-notes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.ds .ds-more { margin-top: 1rem; border-color: var(--line-dark); }
.ds .ds-more p { padding-bottom: 1rem; font-size: var(--fs-sm); color: var(--on-dark-soft); max-width: 70ch; }
.ds :focus-visible { outline-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ds-flow.is-entering .ds-stages li { animation: ds-in 200ms var(--ease-out) both; }
  .ds-flow.is-entering .ds-stages li:nth-child(3), .ds-flow.is-entering .ds-stages li:nth-child(4) { animation-duration: 220ms; }
}
@keyframes ds-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 760px) {
  .ds-head { grid-template-columns: minmax(0, 1fr); }
  .ds-switch { grid-column: 1; grid-row: auto; justify-self: start; }
  .ds-stages { grid-template-columns: minmax(0, 1fr); }
  .ds-stages li { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0 0 1.4rem 1.75rem; }
  .ds-stages li::before { left: 5px; right: auto; top: 6px; bottom: 0; width: 2px; height: auto; }
  .ds-stages li:last-child::before { display: none; }
  .ds-stages li::after { top: 0.35rem; left: 0; }
  .ds-n { grid-row: span 2; font-size: 2rem; }
  .ds-label { margin-top: 0; }
  .ds-desc { grid-column: 2; }
}
.ec-example { margin-top: 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ec-example summary, .faq-rest > summary, .form-more > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: 0.4rem; font-weight: 650; }
.ec-example summary, .faq-rest > summary, .form-more > summary { list-style: none; }
.ec-example summary::-webkit-details-marker, .faq-rest > summary::-webkit-details-marker, .form-more > summary::-webkit-details-marker { display: none; }
.ec-example summary::before, .faq-rest > summary::before, .form-more > summary::before {
  content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg); transition: transform 180ms ease-out;
}
.ec-example[open] summary::before, .faq-rest[open] > summary::before, .form-more[open] > summary::before { transform: rotate(45deg); }

/* /ecommerce/: preguntas más compactas, el resto en "Ver más preguntas" */
.faq--compact summary { padding: 0.8rem 0; min-height: 2.75rem; }
.faq--compact .faq-a { padding-bottom: 1rem; }
.faq-rest { margin-top: 0.5rem; }
.faq-rest > summary { color: var(--accent-ink); }
.faq-rest[open] > summary { margin-bottom: 0.25rem; }

/* Formulario compacto (/ecommerce/): pares en escritorio, una columna en móvil */
.form--compact { gap: 1rem; }
.form--compact .field input, .form--compact .field select { min-height: 3rem; padding-block: 0.6rem; }
.form--compact .field textarea { min-height: 5rem; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 640px) { .field-pair { grid-template-columns: minmax(0, 1fr); } }
.form-more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.form-more-body { display: grid; gap: 1rem; padding: 0.25rem 0 1.25rem; }

/* ---------- Movimiento editorial (una vez, al entrar en pantalla; site.js pone .is-in) ---------- */
/* Bloque que cubre y se retira: sin JS, sin soporte o con movimiento reducido no existe. */
.block-wipe { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-off) .block-wipe { display: block; position: absolute; inset: 0; z-index: 3; background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
  .js:not(.motion-off) [data-reveal]:not(.is-in) > :not(.block-wipe) { opacity: 0; }
  .js [data-reveal] > :not(.block-wipe) { transition: opacity 1ms linear 330ms; }
  .js [data-reveal].is-in .block-wipe { animation: block-sweep 700ms var(--ease-in-out) both; }
  .js [data-reveal].is-in img { animation: settle 900ms var(--ease-edit) 300ms both; }

  /* Tienda → conexión → panel (~900 ms). */
  .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-store { opacity: 0; transform: translateY(24px); }
  .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-link-line { transform: scaleX(0); }
  .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-link .sig-dot { opacity: 0; transform: scale(0.3); }
  .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-panel { opacity: 0; transform: translateX(-24px); }
  .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-product.is-edited { box-shadow: inset 0 0 0 1px transparent; border-color: transparent; }
  .js [data-orchestrate] .cv-store { transition: opacity 360ms ease-out, transform 520ms var(--ease-edit); }
  .js [data-orchestrate] .cv-link-line { transition: transform 340ms var(--ease-edit) 260ms; transform-origin: right center; }
  .js [data-orchestrate] .cv-link .sig-dot { transition: opacity 160ms ease-out 240ms, transform 240ms var(--ease-edit) 240ms; }
  .js [data-orchestrate] .cv-panel { transition: opacity 340ms ease-out 400ms, transform 500ms var(--ease-edit) 400ms; }
  .js [data-orchestrate] .cv-product.is-edited { transition: border-color 200ms ease-out 700ms, box-shadow 200ms ease-out 700ms; }
  @media (max-width: 640px) {
    .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-link-line { transform: scaleY(0); }
    .js [data-orchestrate] .cv-link-line { transform-origin: center top; }
    .js:not(.motion-off) [data-orchestrate]:not(.is-in) .cv-panel { transform: translateY(20px); }
  }

  /* Demos: entran por fila; la segunda columna 90 ms después. */
  .js .demo-tile[data-enter] { transition-delay: calc(var(--c, 0) * 90ms); }
  @media (max-width: 860px) { .js .demo-tile[data-enter] { transition-delay: 0ms; } }

  /* Somos Origin: el símbolo sube, el titular se descubre por líneas y la regla se dibuja una vez. */
  .js:not(.motion-off) [data-draw]:not(.is-in) { transform: scaleX(0); }
  .js:not(.motion-off) [data-draw]:not(.is-in) .sig-dot { opacity: 0; }
  .js [data-draw] { transition: transform 800ms var(--ease-edit) 250ms; }
  .js [data-draw] .sig-dot { transition: opacity 200ms ease-out 250ms; }
  .js .about-title .mask > span { transition-duration: 650ms; }
}
@keyframes block-sweep {
  0% { transform: scaleX(0); transform-origin: left center; }
  45% { transform: scaleX(1); transform-origin: left center; }
  55% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes settle { from { transform: scale(1.06); } }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .cookie-banner.is-shown { animation: none; }
  .btn:active, .cart-toggle:active, .whatsapp-fab:active { transform: none; }
  .whatsapp-fab { transform: translateY(calc(-1 * var(--banner-h))) !important; }
  .project-frame img, .link-arrow svg, .next-project svg, .nav-panel, .add-btn .add-icon, .version-shot img, .next-project-thumb img { transform: none !important; }
  .project-cta { transition: none; transform: none; }
  .family::before, .family-glyph, .demo-frame img, .family .link-arrow svg { transition: none !important; }
  .family-glyph, .demo-frame img { transform: none !important; }
  .nav-link::after { transition: none; }
  .legal-toc a[aria-current="true"] { transition: none; }
}

/* Si site.js no llegó a cargar (aviso del script del <head>), nada queda oculto. */
.motion-off [data-mask] .mask > span, .motion-off [data-enter], .motion-off [data-draw] { transform: none !important; opacity: 1 !important; }
.maint-sub-btn[hidden] { display: none; }
/* /ecommerce/: «Si terminas Commerce» (sobre las preguntas frecuentes) */
.ec-exit { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.ec-exit-h { font-size: var(--fs-h3); font-weight: 650; }
.ec-exit-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--col-gap); margin-top: 1rem; }
.ec-exit-label { font-size: var(--fs-sm); font-weight: 650; }
@media (max-width: 960px) { .ec-exit-grid { grid-template-columns: minmax(0, 1fr); } }
/* Carrito: [hidden] siempre oculta, aunque la clase defina display (p. ej. .field o .cart-commerce). */
.cart-panel [hidden] { display: none !important; }
/* /ecommerce/: ejemplos de acciones de Aurora (tarea → costo), legibles en móvil */
.ec-aurora-examples { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ec-aurora-examples li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 0.65rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.ec-ax-cost { flex: none; font-weight: 650; color: var(--accent-ink); }
.ec-aurora-note { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--ink-soft); max-width: 60ch; }
/* /agenda/: día → hora → datos → confirmación (botones nativos, legibles en móvil) */
.agenda-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem var(--col-gap); align-items: start; }
.agenda-free { font-weight: 600; font-size: var(--fs-lead); line-height: 1.3; color: var(--accent-ink); margin-bottom: 1rem; }
.agenda-alt { display: grid; gap: 0.35rem; font-size: var(--fs-sm); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.agenda-alt-q { font-weight: 600; }
.agenda-aside .ec-group-list { margin-bottom: 1.25rem; }
.ag-title { font-size: var(--fs-h3); font-weight: 650; }
.ag-tz { margin-top: 0.25rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.ag-status { margin-top: 1rem; }
.ag-step { border: 0; padding: 0; margin: 1.5rem 0 0; min-width: 0; }
.ag-step[hidden], .ag-done[hidden], .ag-status[hidden] { display: none; }
.ag-days, .ag-times { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.ag-times { grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); }
.ag-day, .ag-time { min-height: 48px; padding: 0.6rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 6px; background: transparent; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.ag-day { display: grid; gap: 0.15rem; }
.ag-day-name { font-weight: 650; text-transform: capitalize; }
.ag-day-count { font-size: var(--fs-xs); color: var(--ink-soft); }
.ag-time { text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.ag-day[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(210, 92, 37, 0.08); }
.ag-day:focus-visible, .ag-time:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ag-day:hover, .ag-time:hover { border-color: var(--ink); } }
.ag-chosen { padding: 0.75rem 1rem; border-left: 3px solid var(--accent); background: var(--cream-2); }
.ag-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ag-done { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--accent); border-radius: 8px; }
.ag-done-title { margin: 0.5rem 0; font-size: var(--fs-h3); font-weight: 650; }
.ag-done .btn { margin-top: 0.5rem; }
@media (max-width: 860px) { .agenda-grid { grid-template-columns: minmax(0, 1fr); } }
.ag-contact { border: 0; padding: 0; margin: 0; min-width: 0; }
.ag-contact legend { font-weight: 650; font-size: var(--fs-sm); margin-bottom: 0.5rem; padding: 0; }
.ag-contact-opts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.ag-radio { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; }
.ag-radio input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.ag-wa[hidden], [data-ag-email-opt][hidden], [data-ag-phone-opt][hidden] { display: none; }
.ag-meet-url { word-break: break-all; font-weight: 650; }