/* =========================================================
   Tomel — componentes.css
   Formas de la T, botones, tarjetas, planes, tablas, listas, formularios,
   maquetas, el sitio de ejemplo de Sitios web y el movimiento (motion.js).
   Colores y tamaños salen de base.css.
   ========================================================= */

/* =========================================================
   Forma T
   Corte (arriba-izq) · curva chica (arriba-der) · curva grande (abajo-der) · recta (abajo-izq).
   Sin clip-path en el elemento: el corte se pinta con el propio fondo (degradado a 45°)
   y las curvas con border-radius. Así el foco (:focus-visible), los bordes y los
   pseudo-elementos que usan los componentes no se recortan.
   Cada componente define --t-corte, --t-chica, --t-grande, --t-relleno y, si lleva
   borde, --t-b (grosor) y --t-borde (color). :where() = especificidad 0, así cada
   componente pone sus --t-* encima; !important porque la forma ES el fondo (los estados
   cambian las variables, no el fondo).
   Para usarla en un componente nuevo: agrégalo a esta lista y define sus --t-*.
   ========================================================= */
:where(.btn, .plan, .card, .comparativa, .badge, .chip, .subnav__pill, .bloque-fuerte, .bloque, .wa-float, .notice, .nav__menu,
  .tema-toggle:not(.tema-toggle--movil), .field input, .field select, .field textarea, .checks label,
  .demo__bar, .demo__url, .demo__img, .demo__prod, .demo__agregar, .demo__contador, .demo__fin, .demo__pista, .demo__burbuja,
  .work__thumb--ilustrada, .work__marca,
  .tel, .muestra, .muestra__bar, .cal__dia--pub, .redes__vista, .marca__lamina, .marca__color, .hojas__hoja, .hojas__btn,
  .ficha, .cat-pag__boton, .diapo__lineas li, .flujo__paso, .flujo__burbuja, .flujo__archivo, .flujo__aviso,
  .trato, .trato__ganar, .chat__me, .chat__bot, .chat__file, .servicio__ilus, .filtros__indicador, .retrato, .seguridad,
  .selector, .selector__indicador, .linea__nota, .tabla-caja) {
  --t-b: 0px;
  --t-relleno: transparent;
  --t-d: calc(var(--t-corte) * .7071);
  --t-d-in: calc((var(--t-corte) - var(--t-b) * .586) * .7071);
  border: var(--t-b) solid transparent !important;
  border-radius: 0 var(--t-chica) var(--t-grande) 0 !important;
  background:
    linear-gradient(135deg, transparent calc(var(--t-d-in) - .5px), var(--t-relleno) calc(var(--t-d-in) + .5px)) padding-box,
    linear-gradient(135deg, transparent calc(var(--t-d) - .5px), var(--t-borde, var(--t-relleno)) calc(var(--t-d) + .5px)) border-box !important;
  box-shadow: none;
}

/* Sobre navy (momentos fuertes, tarjetas destacadas): marcas y viñetas en el acento claro */
:is(.bloque-fuerte, .plan--featured, .card--dark, .bloque--oscuro, .renovacion) { --marca: var(--accent-on-dark); }

/* ---------- Botones: 11 / 4 / 16 ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-6); }
.actions--left { justify-content: flex-start; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-6);
  font: 600 15px/1 var(--font-label); letter-spacing: .01em;
  cursor: pointer; transition: color .15s cubic-bezier(.2, .8, .2, 1);
  --t-corte: var(--t-boton-corte); --t-chica: var(--t-boton-chica); --t-grande: var(--t-boton-grande);
}
.btn--primary { --t-relleno: var(--fill-primary); color: var(--on-accent); }
.btn--primary:hover { --t-relleno: var(--fill-primary-hover); color: var(--on-accent); }
.btn--secondary { --t-relleno: var(--line); color: var(--ink); }
.btn--secondary:hover { --t-relleno: var(--ink); color: var(--page); }
.btn--sm { min-height: 34px; padding: 0 var(--space-4); font-size: 13px; }
.btn--lg { min-height: 50px; padding: 0 var(--space-8); }
/* Sobre navy. En el hero de Sitios web solo el texto (el navegador de ejemplo es claro). */
:is(.escena-hero__texto, .bloque-fuerte:not(.escena-hero), .plan--featured, .card--dark, .bloque--oscuro .bloque__texto, .demo__fin, .renovacion) .btn--primary { --t-relleno: var(--accent-on-dark); color: var(--on-accent-dark); }
:is(.escena-hero__texto, .bloque-fuerte:not(.escena-hero), .plan--featured, .card--dark, .bloque--oscuro .bloque__texto, .demo__fin, .renovacion) .btn--primary:hover { --t-relleno: var(--accent-on-dark-hover); color: var(--on-accent-dark); }
:is(.escena-hero__texto, .bloque-fuerte:not(.escena-hero), .plan--featured, .card--dark, .bloque--oscuro .bloque__texto) .btn--secondary { --t-relleno: var(--line-dark); color: var(--ink-on-dark); }
:is(.escena-hero__texto, .bloque-fuerte:not(.escena-hero), .plan--featured, .card--dark, .bloque--oscuro .bloque__texto) .btn--secondary:hover { --t-relleno: var(--ink-on-dark); color: var(--surface-strong); }

/* Links secundarios: subrayado grueso en el acento, sin flecha */
.link-more { font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); text-decoration: underline 2px var(--fill-primary); text-underline-offset: 6px; }
.link-more:hover { color: var(--ink); text-decoration-color: var(--ink); }
:is(.escena-hero__texto, .bloque-fuerte:not(.escena-hero), .card--dark, .plan--featured, .bloque--oscuro .bloque__texto) .link-more { color: var(--ink-on-dark); text-decoration-color: var(--accent-on-dark); }
:is(.escena-hero__texto, .bloque-fuerte:not(.escena-hero), .card--dark, .plan--featured, .bloque--oscuro .bloque__texto) .link-more:hover { color: var(--ink-on-dark); text-decoration-color: var(--ink-on-dark); }

/* ---------- Badge: 6 / 0 / 8 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 5px var(--space-3);
  font: 600 11px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
  --t-corte: var(--t-badge-corte); --t-chica: var(--t-badge-chica); --t-grande: var(--t-badge-grande);
  --t-relleno: var(--accent-soft); color: var(--accent-strong);
}
.badge--neutral { --t-relleno: var(--line); color: var(--ink-muted); }
.badge--on-dark { --t-relleno: var(--sand); color: var(--on-sand); }

/* ---------- Tarjetas: 18 / 6 / 28 ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-8); color: var(--ink);
  --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line);
}
.card--alt { --t-relleno: var(--surface-alt); --t-borde: var(--surface-alt); }
.card--dark { --t-relleno: var(--surface-dark); --t-borde: var(--surface-dark); color: var(--ink-on-dark); }
.card.card--dark p { color: var(--ink-muted-on-dark); } /* .card.card--dark: le gana a .card p, que viene después */
.card h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.card p { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.card .link-more { margin-top: auto; padding-top: var(--space-3); font-size: 16px; }
a.card { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
a.card:hover { transform: translateY(-3px); color: var(--ink); }

.card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.card--dark .card__icon { background: var(--surface-dark-raised); color: var(--accent-on-dark-hover); }

/* Tarjeta grande de servicio */
.service-card { padding: var(--space-12); gap: var(--space-4); }
.service-card h3 { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -.02em; }
.service-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-2); }
.service-card li { display: flex; gap: 10px; font-size: 15px; color: var(--ink); }
.card--dark.service-card li { color: var(--ink-on-dark); }
@media (max-width: 640px) { .service-card { padding: var(--space-8); } }

/* Beneficios con línea superior */
.feature { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.feature svg { color: var(--accent); }
.feature h3 { font-size: 21px; letter-spacing: -.01em; }
.feature p { font-size: 16px; color: var(--ink-muted); }

/* Pasos (proceso real, por eso van numerados): el número va en una pieza T */
.steps { counter-reset: paso; }
/* Procesos que no son de 4 pasos (--pasos lo pone pasos() en generar.py): una columna por paso en escritorio */
@media (min-width: 961px) { .steps--n { grid-template-columns: repeat(var(--pasos), minmax(0, 1fr)); gap: var(--space-6); } }
.step { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 2px solid var(--ink); }
.step::before {
  counter-increment: paso; content: "0" counter(paso);
  align-self: flex-start; display: inline-block; padding: 5px 12px 5px 14px; font: 500 13px/1 var(--font-mono); color: var(--on-accent);
  border-radius: 0 3px 10px 0; background: linear-gradient(135deg, transparent 4.5px, var(--fill-primary) 5.5px);
}
.step h3 { font-size: 21px; letter-spacing: -.01em; }
.step p { font-size: 16px; color: var(--ink-muted); }

/* ---------- Trabajos ---------- */
.work { display: flex; flex-direction: column; gap: var(--space-4); }
.work__thumb {
  aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center; padding: var(--space-8);
  font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-align: center;
  overflow: hidden;
}
.work__thumb--dark { background: var(--surface-dark); color: var(--ink-on-dark); }
.section--alt .work__thumb:not(.work__thumb--dark) { background: var(--surface); }
.work__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.work h3 { font-size: 22px; letter-spacing: -.015em; }
.work p { font-size: 16px; color: var(--ink-muted); }
.work__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.work__marca { display: block; }

/* Miniaturas con piezas de la T (pieza() en generar.py). Colores por clase:
   p-a texto · p-b acento · p-c detalle (arena sobre navy, línea en claros) · p-d superficie */
.work__thumb--ilustrada { position: relative; display: block; padding: 0;
  --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande); --t-relleno: var(--surface);
  --p-a: var(--ink); --p-b: var(--fill-primary); --p-c: var(--line); --p-d: var(--surface-alt); }
.work__thumb--ilustrada.work__thumb--dark { --t-relleno: var(--surface-dark);
  --p-a: var(--ink-on-dark); --p-b: var(--accent-on-dark); --p-c: var(--sand); --p-d: var(--surface-dark-raised); }
.t-ilus { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Colores de las piezas en cualquier ilustración (pieza() en generar.py); cada contenedor fija sus --p-* */
.p-a { fill: var(--p-a, var(--ink)); }
.p-b { fill: var(--p-b, var(--fill-primary)); }
.p-c { fill: var(--p-c, var(--sand)); }
.p-d { fill: var(--p-d, var(--surface-alt)); }
.work__thumb--ilustrada .work__marca { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 7px 12px;
  --t-corte: 6px; --t-chica: 0px; --t-grande: 10px; --t-relleno: var(--surface); color: var(--ink);
  font: 800 15px/1.2 var(--font-display); letter-spacing: -.01em; }

.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6) var(--space-16); font: 800 22px/1 var(--font-display); letter-spacing: -.01em; color: var(--ink-muted); }

/* ---------- Listas ----------
   Viñetas de todas las listas: cuadrito de 9 px con forma T (3 / 0 / 4) */
.bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bullets li { display: flex; gap: 10px; }
.checklist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); }
.checklist li { display: flex; gap: 12px; font-size: 16px; }
@media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } }
:is(.bullets, .checklist, .service-card ul) li::before {
  content: ""; flex-shrink: 0; width: 9px; height: 9px; margin: .5em 0 0; border-radius: 0 0 var(--t-vineta-grande) 0;
  background: linear-gradient(135deg, transparent calc(var(--t-vineta-corte) * .7071 - .5px), var(--marca, var(--fill-primary)) calc(var(--t-vineta-corte) * .7071 + .5px));
}
.incluye-box { gap: var(--space-4); margin-bottom: var(--space-6); }

/* ---------- Paquetes y planes: 18 / 6 / 28 ---------- */
.plan {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); min-width: 0;
  --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line);
}
.plan--featured { --t-relleno: var(--surface-dark); --t-borde: var(--surface-dark); color: var(--ink-on-dark); }
.plan--featured p, .plan--featured .plan__price { color: var(--ink-muted-on-dark); }
.plan__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.plan h3 { font-size: 24px; }
.plan p { font-size: 16px; color: var(--ink-muted); }
.plan--featured p { color: var(--ink-muted-on-dark); }
.plan__price { font-family: var(--font-mono); font-size: 15px; }
.plan__antes { margin-left: 6px; color: var(--ink-muted); font-size: 13px; }
.plan__nota { margin-top: 4px; font: 500 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.plan--featured .plan__antes, .plan--featured .plan__nota { color: var(--ink-muted-on-dark); }
.plan hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 0; }
.plan--featured hr { border-color: var(--line-dark); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.plan__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font: 500 12px/1.4 var(--font-mono); }
.plan__meta div { display: flex; gap: 6px; }
.plan__meta dt { color: var(--ink-muted); }
.plan__meta dd { margin: 0; }
.plan--featured .plan__meta dt { color: var(--ink-muted-on-dark); }
.plan__foot { margin-top: auto; padding-top: var(--space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.plan .btn { align-self: flex-start; }
.planes--2 { max-width: 880px; }
.plan--wide { grid-column: span 2; }
.plan.is-resaltada { box-shadow: 0 0 0 2px var(--fill-primary); }
@media (max-width: 640px) { .plan--wide { grid-column: auto; } .plan { padding: var(--space-6); } }

.oferta { scroll-margin-top: var(--header-h); }
.oferta__notas { margin-top: var(--space-8); max-width: 820px; display: flex; flex-direction: column; gap: var(--space-4); font-size: 15px; color: var(--ink-muted); }
.planes--2 + .oferta__notas { max-width: 880px; }

/* ---------- Comparativa completa de planes: 26 / 10 / 40 ---------- */
.comparativa {
  margin-top: var(--space-8); overflow: hidden;
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line);
}
.comparativa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-8); font: 600 15px/1.3 var(--font-label); }
.comparativa summary::-webkit-details-marker { display: none; }
.comparativa summary::after { content: "+"; font: 400 26px/1 var(--font-sans); color: var(--ink-muted); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.comparativa[open] summary::after { transform: rotate(45deg); }
/* relative: los .sr-only de las celdas son absolutos y, sin esto, ensanchan la página */
.comparativa__scroll { position: relative; overflow-x: auto; border-top: 1px solid var(--line); }
.comparativa__scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.comparativa table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.4; }
.comparativa th, .comparativa td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.comparativa tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.comparativa thead th { vertical-align: bottom; font-size: 17px; font-weight: 700; }
.comparativa thead small { display: block; margin-top: 2px; font: 500 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.comparativa thead .is-destacado { color: var(--accent); }
.comparativa th[scope="row"], .comparativa thead td { position: sticky; left: 0; z-index: 1; width: 38%; min-width: 150px; text-align: left; font-weight: 500; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
.comparativa__bloque th { text-align: left; background: var(--surface-alt); font: 600 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.comparativa .si { color: var(--fill-primary); font-weight: 700; font-size: 17px; }
.comparativa .no { color: var(--ink-muted); }
@media (max-width: 640px) { .comparativa summary { padding: var(--space-4) var(--space-6); } .comparativa table { font-size: 14px; } }
.palomita { display: inline-block; width: 18px; height: 18px; vertical-align: middle; fill: none; stroke: var(--fill-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.palomita path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.comparativa tfoot td { padding-block: var(--space-4) var(--space-6); border-top: 1px solid var(--line); border-bottom: 0; }
.comparativa tfoot td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.comparativa tfoot .btn { white-space: nowrap; }

/* --- Con JS (sitios-web.js): controles, columna resaltada, encabezado fijo --- */
.comparativa__controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-8); border-top: 1px solid var(--line); }
.comparativa__controles .comparativa__planes, .comparativa__controles .comparativa__comparar { display: none; } /* solo en celular */
.interruptor { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; font: 600 14px/1 var(--font-label); color: var(--ink); cursor: pointer; }
.interruptor__riel { position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--control); transition: background-color .25s cubic-bezier(.2, .8, .2, 1); }
.interruptor__riel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(11, 22, 40, .25); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.interruptor[aria-checked="true"] .interruptor__riel { background: var(--fill-primary); }
.interruptor[aria-checked="true"] .interruptor__riel::after { transform: translateX(16px); }

/* La columna del plan que señalas (en la tabla o en su tarjeta) */
.comparativa [data-col="2"] :is(td, th):nth-child(2),
.comparativa [data-col="3"] :is(td, th):nth-child(3),
.comparativa [data-col="4"] :is(td, th):nth-child(4) { background-color: var(--accent-soft); }

/* Encabezado fijo: sin scroll horizontal propio, la fila de planes se pega bajo el header */
.comparativa--js { overflow: clip; }
.comparativa--js .comparativa__scroll { overflow: visible; }
.comparativa--js thead :is(th, td) { position: sticky; top: var(--header-h); z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.comparativa--js thead td { z-index: 3; box-shadow: inset -1px -1px 0 var(--line); }
.subnav--vidrio ~ .oferta .comparativa--js thead :is(th, td) { top: calc(var(--header-h) + 65px); }

/* Celular: un plan a la vez (o dos para comparar); la columna de características siempre */
.comparativa--movil .comparativa__controles { padding: var(--space-3) var(--space-4); }
.comparativa--movil .comparativa__controles .comparativa__planes { display: flex; gap: 6px; width: 100%; }
.comparativa--movil .comparativa__planes .chip { flex: 1; justify-content: center; min-height: 44px; padding: 0 8px; }
.comparativa__planes .chip[aria-pressed="true"] { --t-relleno: var(--ink); color: var(--page); }
.comparativa--movil .comparativa__controles .comparativa__comparar { display: inline-flex; }
.comparativa--movil table { min-width: 0; table-layout: fixed; }
.comparativa--movil .col-oculta { display: none; }
/* Un plan: la característica se lleva 55 % para no partirse en 5–6 líneas; con dos, 46 % */
.comparativa--movil th[scope="row"], .comparativa--movil thead td, .comparativa--movil tfoot td:first-child { width: 55%; min-width: 0; }
.comparativa--dos th[scope="row"], .comparativa--dos thead td, .comparativa--dos tfoot td:first-child { width: 46%; }
/* Un plan: su nombre ya está en la pastilla de arriba; la fila de encabezado (con su celda
   vacía) se colapsa sin cambiar el ancho de las columnas */
.comparativa--movil:not(.comparativa--dos) thead tr { visibility: collapse; }
.comparativa--movil tfoot .btn { white-space: normal; padding-inline: 10px; }

/* Movimiento: apertura con altura, filas en cascada, palomitas que se dibujan */
@keyframes fila-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes traza { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .comparativa--js { interpolate-size: allow-keywords; }
    .comparativa--js::details-content { height: 0; overflow: clip; transition: height .45s cubic-bezier(.2, .8, .2, 1), content-visibility .45s allow-discrete; }
    .comparativa--js[open]::details-content { height: auto; }
  }
  .comparativa.is-animando :is(tbody, tfoot) tr { animation: fila-entra .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--f, 0) * 22ms + 60ms); }
  .comparativa.is-animando tfoot tr { --f: 19; }
  .comparativa.is-animando .palomita path { stroke-dashoffset: 1; animation: traza .45s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--f, 0) * 22ms + 240ms); }
  .comparativa--js tbody, .comparativa--js tbody tr { transition: opacity .2s cubic-bezier(.2, .8, .2, 1); }
}
.comparativa--js .is-saliendo, .comparativa--js .is-entrando { opacity: 0; }

/* ---------- Renovación anual: bloque navy a la izquierda, precio grande a la derecha ----------
   El fondo va en pseudo-elementos para que la escena de motion.js lo encienda con --n. */
.card.renovacion {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; justify-items: stretch; gap: var(--space-12);
  position: relative; isolation: isolate; padding: clamp(32px, 5vw, 64px); text-align: left; color: var(--ink-on-dark);
  --t-relleno: transparent; --t-borde: transparent;
}
.renovacion::before,
.renovacion::after { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: var(--n, 1); }
.renovacion::before { inset: 0; background: var(--line-strong); border-radius: 0 10px 40px 0; clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px); }
.renovacion::after { inset: 1px; background: var(--surface-strong); border-radius: 0 9px 39px 0; clip-path: polygon(25.4px 0, 100% 0, 100% 100%, 0 100%, 0 25.4px); }
.renovacion__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); text-align: left; }
.renovacion__precio { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); text-align: right; transform-origin: 100% 50%; }
.renovacion__precio b { font: 500 clamp(36px, 4.6vw, 64px)/1.1 var(--font-mono); letter-spacing: -.02em; white-space: nowrap; }
.renovacion :is(.eyebrow, .lead, .small, .renovacion__precio > span) { color: var(--ink-muted-on-dark); }
.renovacion__precio > span { font: 500 14px/1.4 var(--font-mono); }
.renovacion__precio .small { margin-top: var(--space-2); }
@media (max-width: 800px) {
  .card.renovacion { grid-template-columns: 1fr; gap: var(--space-8); }
  .renovacion__precio { align-items: flex-start; text-align: left; transform-origin: 0 50%; }
}

/* ---------- "Qué podemos automatizar": el badge chico junto al nombre (como en los planes);
   con 3 tarjetas, en tablet la última va a todo lo ancho para que no quede sola ---------- */
.capacidad__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.capacidad__btn { align-self: flex-start; margin-top: auto; }
.capacidad p { margin-bottom: var(--space-2); }
.capacidades__cobro { max-width: var(--text-max); color: var(--ink); font-weight: 600; }

/* ---------- Automatización: "Cómo funciona" ---------- */
.canales { margin: 0; border-top: 1px solid var(--line); }
.canal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.canal dt { font-weight: 700; }
.canal dd { margin: 0; color: var(--ink-muted); }
@media (max-width: 640px) { .canal { grid-template-columns: minmax(0, 1fr); } }
.seguridad { margin-top: var(--space-8); padding: 18px 24px 18px 28px; font-weight: 600; color: var(--ink);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--accent-soft); }
.integracion__sub { margin: var(--space-16) 0 var(--space-6); }
.resultado__item h4 { margin: 0; font: 800 19px/1.25 var(--font-display); letter-spacing: -.01em; }
.resultado__item p { font-size: 15px; }
.checklist--una { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .integracion__sub { margin-top: var(--space-12); } }

/* ---------- Combo (Marketing) junto a lo que viene "Próximamente" ---------- */
.combo-fila { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
@media (max-width: 900px) { .combo-fila { grid-template-columns: minmax(0, 1fr); } }
.card.renovacion--apilada { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-8); }
.renovacion--apilada .renovacion__precio { align-items: flex-start; text-align: left; transform-origin: 0 50%; }
.renovacion__precio .btn { margin-top: var(--space-3); } /* combo y bloques "A cotizar" */
.proxima { justify-content: center; gap: var(--space-4); padding: var(--space-12); }
.proxima .badge { align-self: flex-start; }
.proxima__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
@media (max-width: 640px) { .proxima { padding: var(--space-8); } }

/* ---------- Sitios web: selector de líneas (lineas.js) ----------
   Landing · Página web · E-commerce en una sola sección. Sin JS no hay selector
   y las tres líneas se ven una debajo de otra, con su lista completa. */
.selector[hidden] { display: none; }
.selector {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); max-width: 640px;
  padding: 4px; margin-bottom: var(--space-12); scroll-margin-top: calc(var(--header-h) + 80px);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande);
  --t-relleno: color-mix(in srgb, var(--line) 60%, transparent);
}
/* El indicador mide lo mismo que una pestaña y se mueve con --k (índice de la elegida) */
.selector__indicador { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); pointer-events: none;
  transform: translateX(calc(var(--k, 0) * 100%)); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--ink); }
.selector__tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; padding: 6px 8px; border: 0; background: none; color: var(--ink); text-align: center; cursor: pointer;
  transition: color .3s cubic-bezier(.2, .8, .2, 1); }
.selector__tab:focus-visible { outline-offset: -2px; }
.selector__nombre { font: 600 15px/1.2 var(--font-label); }
.selector__desc { font: 500 12px/1.3 var(--font-sans); color: var(--ink-muted); transition: color .3s cubic-bezier(.2, .8, .2, 1); }
.selector__tab[aria-selected="true"] { color: var(--page); }
.selector__tab[aria-selected="true"] .selector__desc { color: color-mix(in srgb, var(--page) 78%, var(--ink)); }

.linea { scroll-margin-top: calc(var(--header-h) + 80px); }
.linea[hidden] { display: none; }
.linea + .linea { margin-top: var(--space-24); } /* sin JS */
.linea__head { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--text-max); margin-bottom: var(--space-8); }
.linea__head p { color: var(--ink-muted); }
/* Con selector, el nombre de la línea ya está en su pestaña: se queda para lectores de pantalla */
.linea--js .linea__head h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linea__nota { max-width: 820px; margin-top: var(--space-8); padding: 18px 24px 18px 28px; font-weight: 600; color: var(--ink);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--accent-soft); }
.linea__nota span { font-weight: 500; color: var(--ink-muted); }
.linea__nota-tabla { margin-top: var(--space-3); }

/* Tarjeta de plan de Sitios web: "Precio del proyecto", WhatsApp y "Ver detalles" */
.plan__head h4 { font-size: 24px; }
.plan__precio { display: flex; flex-direction: column; gap: 2px; }
.plan__etiqueta { font: 600 11px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.plan__monto { font: 500 30px/1.15 var(--font-mono); letter-spacing: -.02em; color: var(--ink); }
.plan__monto small { font-size: 14px; letter-spacing: 0; }
.plan__iva { font: 500 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.plan--featured .plan__monto { color: var(--ink-on-dark); }
.plan--featured :is(.plan__etiqueta, .plan__iva) { color: var(--ink-muted-on-dark); }
.plan__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.plan .plan__botones .btn { align-self: auto; }
.plan__ver { padding: 0; border: 0; background: none; font-family: var(--font-sans); font-size: 16px; cursor: pointer; }
.plan__ver[hidden] { display: none; }
.plan__detalles { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.plan__detalles[hidden] { display: none; }
.plan--featured .plan__detalles { border-color: var(--line-dark); }
.plan__detalles-titulo { font: 600 13px/1.3 var(--font-label); color: var(--ink); }
.plan--featured .plan__detalles-titulo { color: var(--ink-on-dark); }
.detalles__bloque h5 { margin: 0 0 var(--space-2); font: 600 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.plan--featured .detalles__bloque h5 { color: var(--ink-muted-on-dark); }
.plan .detalles__bloque ul { font-size: 14px; }

/* La plataforma de tu tienda (solo en E-commerce) */
.plataformas { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-16); }
.plataformas .lead { max-width: var(--text-max); }
.plataformas .grid-2 { max-width: 880px; margin-top: var(--space-2); }
.plataforma h5 { margin: 0; font: 800 22px/1.25 var(--font-display); letter-spacing: -.015em; }

/* Comparativa de Sitios web: en celular la tabla completa se desliza de lado (y la
   columna de características se queda fija a la izquierda) */
@media (max-width: 640px) {
  .comparativa--scroll.comparativa--js .comparativa__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .oferta .comparativa--scroll.comparativa--js thead :is(th, td) { top: auto; } /* le gana a la de .subnav--vidrio */
  .comparativa--scroll :is(th[scope="row"], thead td, tfoot td:first-child) { width: 168px; min-width: 168px; }
  .comparativa--scroll table { min-width: 560px; }
  /* El título de cada bloque abarca toda la fila: su texto se queda a la vista al deslizar */
  .comparativa--scroll .comparativa__bloque span { position: sticky; left: var(--space-4); display: inline-block; }
}

/* "Después de entregar" (tabla) y "Agrega a tu sitio" (lista con precio): 26 / 10 / 40 */
.tabla-caja { padding: var(--space-2) var(--space-8);
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.section--alt .tabla-caja { --t-borde: var(--surface); }
.tabla { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.tabla :is(th, td) { padding: var(--space-6) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabla :is(th, td):first-child { padding-left: 0; }
.tabla :is(th, td):last-child { padding-right: 0; }
.tabla tbody tr:last-child > * { border-bottom: 0; }
.tabla thead th { padding-block: var(--space-4); font: 600 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.tabla tbody th { width: 26%; font-weight: 700; }
.tabla tbody th small { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.tabla__precio { width: 30%; font: 500 15px/1.5 var(--font-mono); }
.tabla__precio span { display: block; }
.tabla td:last-child { color: var(--ink-muted); }
.tabla-iva { margin-top: var(--space-4); }
.extras { list-style: none; max-width: 820px; }
.extras li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.extras li:last-child { border-bottom: 0; }
.extras b { flex-shrink: 0; font: 500 16px/1.4 var(--font-mono); white-space: nowrap; }
@media (max-width: 640px) {
  .tabla-caja { padding: var(--space-2) var(--space-6); }
  /* Cada fila es un bloque con la etiqueta de su columna arriba: sin scroll de lado */
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla, .tabla :is(tbody, tr, th, td) { display: block; width: auto; }
  .tabla tr { padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla :is(th, td) { padding: 0; border: 0; }
  .tabla tbody th, .tabla__precio { width: auto; }
  .tabla td { margin-top: var(--space-3); }
  .tabla td::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 600 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .extras li { gap: var(--space-4); }
}

/* ---------- Sub-navegación y píldoras: 8 / 4 / 12 ---------- */
.subnav { padding-block: var(--space-6); border-bottom: 1px solid var(--line); }
.subnav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px var(--space-4); font: 600 14px/1.3 var(--font-label); color: var(--ink);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande);
  --t-relleno: color-mix(in srgb, var(--line) 60%, transparent);
}
.chip:hover { --t-relleno: var(--line); color: var(--ink); }

.aclaracion { margin-top: var(--space-8); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--ink-muted); }

/* El siguiente paso */
.next-step { padding: var(--space-12); gap: var(--space-4); }
.next-step h3 { font-size: clamp(28px, 3.4vw, 36px); line-height: 1.17; letter-spacing: -.02em; }
.next-step p { max-width: var(--text-max); font-size: 17px; }
.next-step .actions { margin-top: var(--space-2); }
.next-step__otros { margin-top: var(--space-6); }
@media (max-width: 640px) { .next-step { padding: var(--space-8); } }

/* Cómo se contrata (servicios/index) */
.service-card--wide { grid-column: 1 / -1; }
.contrato { padding: var(--space-12); gap: var(--space-4); }
.contrato .bullets { font-size: 17px; font-weight: 600; }
.card--dark.contrato .eyebrow { color: var(--ink-muted-on-dark); }
.card--dark.contrato a { color: var(--ink-on-dark); }
.contrato a { color: var(--ink); }
.contrato a:hover { color: var(--accent); }
.condiciones__titulo { margin: var(--space-16) 0 var(--space-6); }
@media (max-width: 640px) { .contrato { padding: var(--space-8); } }

/* Funciones del CRM: tablero de ajedrez; Tomel IA a todo lo ancho */
.funcion { padding: var(--space-12); gap: 14px; }
.funcion p { font-size: 17px; }
.crm-ia { grid-column: 1 / -1; }
@media (max-width: 640px) { .funcion { padding: var(--space-8); } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--space-6) 0; display: flex; justify-content: space-between; gap: var(--space-4); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; font-weight: 400; line-height: 1; color: var(--ink-muted); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-6); max-width: var(--text-max); color: var(--ink-muted); }

/* ---------- CTA (en un momento fuerte, centrado) ---------- */
.cta { text-align: center; }
.cta .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.cta__symbol { width: 56px; opacity: .9; margin-bottom: var(--space-2); }

/* ---------- Formulario: inputs y casillas 8 / 4 / 12 ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; }
.field input, .field select, .field textarea {
  font: 400 16px/1.4 var(--font-sans); color: var(--ink); padding: 12px 14px;
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--control);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; --t-borde: var(--focus); }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--control);
}
.checks label:has(input:checked) { --t-borde: var(--fill-primary); --t-relleno: var(--accent-soft); }
.checks input { accent-color: var(--fill-primary); width: 18px; height: 18px; margin: 0; }
.form__note { font-size: 13px; color: var(--ink-muted); }
.hp { position: absolute; left: -9999px; }

.contact-list { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-list div { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.contact-list b { font-size: 14px; }
.contact-list span, .contact-list a { font-size: 18px; font-weight: 600; }
.contact-list .btn { align-self: flex-start; font-size: 15px; }
.contact-list .canal-contacto { gap: 4px; padding: var(--space-6); border-top: 0; }
.contact-list .contact-list__soporte a { font-size: inherit; text-decoration: underline 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* WhatsApp y correo de Tomel: el dato con su ícono chico antes (footer, Contacto) */
.wa-dato, .correo-dato { display: inline-flex; align-items: center; gap: 6px; }
.wa-dato .icono-wa, .correo-dato svg, .link-more--wa .icono-wa { flex-shrink: 0; }
.link-more--wa { gap: 8px; }
.wa-urge a { font-weight: 700; text-decoration: underline 2px; text-underline-offset: 4px; }
.bloque-fuerte .wa-urge a { color: var(--ink-on-dark); text-decoration-color: var(--accent-on-dark); }
.bloque-fuerte .wa-urge a:hover { text-decoration-color: var(--ink-on-dark); }

/* ---------- Texto legal ---------- */
.prose { max-width: calc(var(--text-max) + 2 * var(--space-6)); margin-inline: auto; padding-inline: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 640px) { .prose { padding-inline: var(--space-4); } }
.prose h2 { font-size: 24px; margin-top: var(--space-8); letter-spacing: -.015em; }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Blog (solo existe si BLOG en datos.py tiene artículos) ---------- */
.blog-card { gap: var(--space-3); }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 13px/1.4 var(--font-mono); color: var(--ink-muted); }
.articulo__meta { margin-top: var(--space-4); font: 500 14px/1.4 var(--font-mono); color: var(--ink-muted-on-dark); }
.articulo h3 { font-size: 20px; margin-top: var(--space-4); }
.articulo ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.articulo :is(h2, h3) { scroll-margin-top: calc(var(--header-h) + 16px); }
.indice { padding: var(--space-6); border-left: 3px solid var(--fill-primary); background: var(--surface-alt); }
.indice__titulo { font: 600 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.prose .indice ol { margin-top: var(--space-3); }
.articulo__wa { margin-top: var(--space-12); }
.articulo__wa h2 { margin-top: 0; }
.notice { padding: var(--space-4) var(--space-6); font-size: 15px; color: var(--on-sand);
  --t-corte: var(--t-control-corte); --t-chica: 0px; --t-grande: var(--t-control-grande); --t-relleno: var(--sand); }

/* =========================================================
   Chat, bloques del home, pipeline del CRM y mini visuales
   ========================================================= */
/* ---------- Chat de Tomel IA (home y CRM) ---------- */
.chat { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; text-align: left; }
.chat__me { align-self: flex-end; max-width: 82%; padding: 13px 17px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--on-accent);
  --t-corte: 10px; --t-chica: 4px; --t-grande: 14px; --t-relleno: var(--fill-primary); }
.chat__bot { position: relative; align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 10px; padding: 15px 17px;
  font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink);
  --t-corte: 10px; --t-chica: 4px; --t-grande: 14px; --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line);
  transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1); }
.chat__file { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--surface-alt); }
.chat__file i { flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; min-width: 30px; height: 38px; padding: 0 5px 6px; font: normal 600 8px/1 var(--font-label); color: var(--page);
  border-radius: 0 3px 9px 0; background: linear-gradient(135deg, transparent 5px, var(--ink) 6px); }
.chat__file div { flex-grow: 1; }
.chat__file b { display: block; font-size: 13px; }
.chat__file small { font: 500 11px/1.4 var(--font-mono); color: var(--ink-muted); }
.chat__file span { font-size: 13px; font-weight: 700; color: var(--accent); }
/* Se escribe sola una vez (inicio.js): lo que falta ocupa su lugar sin verse */
.chat__falta { color: transparent; }
.chat.is-esperando .chat__bot { opacity: 0; transform: translateY(8px); }
.chat.is-pensando .chat__bot > * { visibility: hidden; }
.chat.is-pensando .chat__bot::after { content: ""; position: absolute; left: 18px; top: 20px; width: 34px; height: 8px;
  background: radial-gradient(circle 4px at 4px 4px, var(--ink-muted) 98%, transparent) 0 0 / 13px 8px repeat-x; animation: pensando .9s steps(3) infinite; }
@keyframes pensando { from { width: 8px; } to { width: 34px; } }
.chat.is-listo .chat__texto, .chat.is-listo .chat__file { animation: sube .4s cubic-bezier(.2, .8, .2, 1) both; }
.chat.is-listo .chat__file { animation-delay: .25s; }

/* ---------- Home: bloques con forma T (texto a la izquierda y su demo compacta) ---------- */
.bloques { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.bloques__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bloques__fila--una { grid-template-columns: minmax(0, 1fr); }
.bloque { display: flex; flex-direction: column; gap: 32px; min-width: 0; min-height: 560px; padding: 56px 48px 0; overflow: hidden;
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande); --t-relleno: var(--surface-alt); }
.bloque--blanco { --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.bloque--oscuro { --t-relleno: var(--surface-dark); }
.bloque--oscuro .bloque__texto { color: var(--ink-on-dark); }
.bloque--oscuro .bloque__texto :is(.eyebrow, .lead) { color: var(--ink-muted-on-dark); }
.bloque__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.bloque__texto .lead { max-width: 520px; }
.bloque__texto .actions { margin-top: 4px; }
.bloque__visual { margin-top: auto; display: flex; justify-content: center; }
.bloque:not(.bloque--tel):not(.bloque--ancho) .bloque__visual { padding-bottom: 48px; }
.bloque--tel .bloque__visual { margin-bottom: -48px; } /* el teléfono se corta con el borde del bloque */
.bloque--ancho { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 48px; min-height: 0; padding: 64px 48px; }
.bloque--ancho .bloque__visual { margin: 0; }
@media (max-width: 960px) { .bloque--ancho { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .bloques__fila { grid-template-columns: minmax(0, 1fr); } .bloque { min-height: 0; } }
@media (max-width: 640px) {
  .bloques { padding: 8px; gap: 8px; }
  .bloque { padding: 40px 20px 0; }
  .bloque--ancho { padding: 40px 20px; gap: 32px; }
  .bloque:not(.bloque--tel):not(.bloque--ancho) .bloque__visual { padding-bottom: 20px; }
}

/* Demos compactas (sin interacción) */
.demo--compacta { max-width: 560px; border-radius: 0 10px 40px 0; }
.demo--compacta .demo__body { min-height: 0; }
.demo--compacta .demo__dot { display: inline-block; width: 18px; height: 36px; }
.tel--compacta { width: min(340px, 100%); height: auto; }
.tel--compacta .tel__panel { padding-bottom: 64px; }

/* Hero de la portada: el sitio de ejemplo y, encimado abajo a la derecha, el teléfono con el
   calendario de redes. En celular y tablet chica, solo el sitio. */
.collage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 30%, 290px); align-items: start; width: min(960px, 100%); }
.collage .demo--compacta { grid-area: 1 / 1; max-width: none; }
.collage .tel--compacta { grid-area: 1 / 2; position: relative; z-index: 1; width: auto; margin: 72px 0 0 -56px; }
@media (max-width: 760px) { .collage { grid-template-columns: minmax(0, 1fr); } .collage .tel { display: none; } }
/* Hero de Servicios: una pieza chica de cada demo. Izquierda: marca y flujo; centro: el sitio;
   derecha: el teléfono encimado. Tablet: sin teléfono. Celular: sitio y marca. */
.collage--servicios { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr) clamp(210px, 24%, 250px); grid-template-rows: auto 1fr; gap: 16px; width: min(1080px, 100%); }
.collage--servicios > .muestra--compacta:first-child { grid-area: 1 / 1; }
.collage--servicios > .muestra--compacta:nth-child(2) { grid-area: 2 / 1; }
.collage--servicios .demo--compacta { grid-area: 1 / 2 / 3; }
.collage--servicios .tel--compacta { grid-area: 1 / 3 / 3; margin: 40px 0 0 -40px; }
.collage--servicios .muestra--compacta { width: 100%; }
/* Piezas chicas: de cada demo solo lo que se lee a ese tamaño */
.collage--servicios :is(.marca__versiones, .flujo__paso:nth-child(n+3), .redes__vista, .cal__leyenda) { display: none; }
.collage--servicios .tel--compacta .tel__panel { padding-bottom: var(--space-6); }
@media (max-width: 960px) { .collage--servicios { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); } .collage--servicios .tel { display: none; } }
@media (max-width: 760px) {
  .collage--servicios { grid-template-columns: minmax(0, 1fr); }
  .collage--servicios .demo--compacta { grid-area: 1 / 1; }
  .collage--servicios > .muestra--compacta:first-child { grid-area: 2 / 1; }
  .collage--servicios > .muestra--compacta:nth-child(2) { display: none; }
}

/* Bloque de Sitios web en la portada: la ilustración de piezas (el sitio de ejemplo ya está en el hero) */
.bloque--oscuro .servicio__ilus { width: min(560px, 100%); aspect-ratio: 16 / 10; margin: 0; --t-relleno: var(--surface-dark-raised);
  --p-a: var(--ink-on-dark); --p-b: var(--accent-on-dark); --p-c: var(--sand); --p-d: var(--surface-dark); }
.cal__dia--sel { --t-relleno: var(--fill-primary); color: var(--on-accent); }
.cal__dia--sel::after { background: var(--on-accent); }
.muestra--compacta { width: min(520px, 100%); }
.muestra--compacta .marca__panel { min-height: 0; padding: 28px 24px; }
.muestra--compacta .marca__logo { gap: 28px; }
.muestra--compacta .marca__nombre--grande { font-size: 44px; }
.muestra--compacta .marca__simbolo--grande { width: 64px; height: 64px; }
.muestra--compacta .flujo { padding: 20px; }
.muestra--compacta .flujo__pasos { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.muestra--compacta .flujo__paso { min-height: 0; padding: 12px 14px; }
.muestra--compacta .flujo__paso::after { top: auto; right: auto; left: 29px; bottom: -15px; width: 2px; height: 14px; }
@media (max-width: 640px) { .muestra--compacta .marca__versiones { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tomel CRM: pipeline de ejemplo (TomelDemo.pipeline) ---------- */
.crm { display: flex; min-height: 420px; }
.crm__lado { flex-shrink: 0; width: 168px; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--surface-dark); --p-b: var(--accent-on-dark); }
.crm__simbolo { width: 28px; height: 28px; margin: 0 0 16px 8px; }
.crm__lado span { padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--ink-muted-on-dark); }
.crm__lado span.is-on { color: var(--ink-on-dark); font-weight: 700; border-radius: 0 3px 9px 0; background: linear-gradient(135deg, transparent 4px, var(--surface-dark-raised) 5px); }
.crm__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.crm__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.crm__titulo { font: 800 18px/1.2 var(--font-display); letter-spacing: -.01em; }
.crm__total { font-size: 13px; color: var(--ink-muted); }
.crm__total b { margin-left: 6px; font: 500 18px/1 var(--font-mono); color: var(--ink); }
.tablero { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tablero__col { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 0 4px 14px 0; background: var(--surface-alt); }
.tablero__titulo { display: flex; justify-content: space-between; gap: 6px; font: 600 11px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.tablero__titulo span { font-family: var(--font-mono); letter-spacing: 0; }
.tablero__lista { list-style: none; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.trato { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 10px 10px 12px;
  --t-corte: 8px; --t-chica: 3px; --t-grande: 12px; --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.trato b { font-size: 13px; line-height: 1.25; }
.trato__monto { font: 500 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.trato__nota { font-style: normal; font-size: 11px; font-weight: 700; color: var(--warning-text); }
.trato__nota--ok { color: var(--success-text); }
.trato--caliente { --t-borde: var(--fill-primary); }
.trato__ganar { margin-top: 6px; min-height: 32px; padding: 0 10px; font: 600 12px/1 var(--font-label); color: var(--on-accent); cursor: pointer;
  --t-corte: 7px; --t-chica: 3px; --t-grande: 10px; --t-relleno: var(--fill-primary); }
.trato__ganar:hover:not(:disabled) { --t-relleno: var(--fill-primary-hover); }
.trato__ganar:disabled { cursor: default; }
.crm__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.crm__pista { font-size: 13px; color: var(--ink-muted); }
.crm__reiniciar { padding: 0; border: 0; background: none; font: 700 15px/1.2 var(--font-sans); cursor: pointer; }
@media (max-width: 760px) {
  .crm { min-height: 0; }
  .crm__lado { display: none; }
  .crm__main { padding: 16px; }
  .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero__col--prospecto, .tablero__col--negociacion { display: none; }
}

/* ---------- Tomel CRM completo (hero de crm.html): pestañas, cotización y WhatsApp ---------- */
.muestra--crm .crm { min-height: 440px; }
.crm__panel { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.crm__panel:focus-visible { outline-offset: 4px; }
.cot { display: flex; flex-direction: column; gap: 14px; }
.cot__tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.cot__tabla thead th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font: 600 10px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.cot__tabla tbody th, .cot__tabla td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-weight: 500; }
.cot__tabla tbody th b { display: block; font-size: 13px; }
.cot__tabla tbody th span { font: 500 11px/1.4 var(--font-mono); color: var(--ink-muted); }
.cot__tabla tr.is-cero .cot__importe { color: var(--ink-muted); }
.cot__cant { white-space: nowrap; }
.cot__cant button { width: 32px; height: 32px; padding: 0; font: 400 18px/1 var(--font-sans); color: var(--ink); cursor: pointer; vertical-align: middle;
  border: 0; border-radius: 0 3px 10px 0; background: linear-gradient(135deg, transparent 4.5px, var(--line) 5.5px); }
.cot__cant button:hover:not(:disabled) { color: var(--page); background: linear-gradient(135deg, transparent 4.5px, var(--ink) 5.5px); }
.cot__cant button:disabled { cursor: default; opacity: .45; }
.cot__cant output { display: inline-block; min-width: 34px; text-align: center; font: 500 13px/1 var(--font-mono); }
.cot__importe, .cot__tabla tfoot td { font-family: var(--font-mono); text-align: right !important; white-space: nowrap; }
.cot__tabla tfoot th { padding: 6px 8px; text-align: right; font-weight: 500; color: var(--ink-muted); }
.cot__tabla tfoot td { padding: 6px 8px; }
.cot__total th, .cot__total td { font-weight: 700 !important; color: var(--ink) !important; font-size: 16px; }
.cot__pdf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); animation: sube .35s cubic-bezier(.2, .8, .2, 1); }
.cot__pdf i { padding: 3px 5px; font: normal 600 9px/1 var(--font-label); color: var(--page); background: var(--ink); border-radius: 0 2px 5px 0; }

.wa { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }
.wa__ficha { display: flex; flex-direction: column; gap: 6px; padding: 14px; font-size: 13px; color: var(--ink-muted); border-radius: 0 4px 14px 0; background: var(--surface-alt); }
.wa__ficha .crm__titulo { color: var(--ink); font-size: 16px; }
.wa__ficha dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.wa__ficha dt { font: 600 10px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.wa__ficha dd { margin: 2px 0 0; color: var(--ink); font-weight: 600; }
.wa__chat { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.wa__mensajes { flex: 1; display: flex; flex-direction: column; gap: 8px; max-height: 250px; overflow-y: auto; }
.wa__msg { position: relative; max-width: 86%; padding: 9px 12px 20px; font-size: 13px; line-height: 1.4; border-radius: 0 4px 14px 0; }
.wa__msg span { position: absolute; right: 10px; bottom: 5px; font: 500 10px/1 var(--font-mono); color: var(--ink-muted); }
.wa__msg--cliente { align-self: flex-start; background: linear-gradient(135deg, transparent 6.5px, var(--surface-alt) 7.5px); }
.wa__msg--yo { align-self: flex-end; background: linear-gradient(135deg, transparent 6.5px, var(--accent-soft) 7.5px); }
.wa__msg.is-nuevo { animation: sube .35s cubic-bezier(.2, .8, .2, 1); }
.wa__respuestas { display: flex; flex-wrap: wrap; gap: 8px; }
/* --t-borde propio: si no, hereda el borde navy del hero y se asoma bajo el relleno translúcido */
.wa__respuestas .chip { min-height: 36px; font-size: 13px; --t-borde: var(--t-relleno); }
.wa__respuestas .chip:disabled { cursor: default; opacity: .6; }
@media (max-width: 760px) {
  .muestra--crm .crm { min-height: 0; }
  .wa { grid-template-columns: minmax(0, 1fr); }
  .cot__tabla tbody th span { display: none; }
}

/* ---------- Tomel IA (crm.html): peticiones sugeridas ---------- */
.ia { display: flex; flex-direction: column; gap: 20px; }
.ia__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ia__chips .chip { min-height: 44px; padding-block: 8px; line-height: 1.3; text-align: left; }
.ia__chips .chip[aria-pressed="true"] { --t-relleno: var(--ink); color: var(--page); }
.ia__chips .chip:disabled { cursor: default; }
.ia__texto { display: flex; flex-direction: column; gap: 16px; }
.chat--ia { width: 100%; }

/* ---------- Servicios: mini visual de cada tarjeta ---------- */
.servicio__ilus { position: relative; display: block; aspect-ratio: 16 / 7; margin-bottom: var(--space-2);
  --t-corte: 12px; --t-chica: 4px; --t-grande: 18px; --t-relleno: var(--surface);
  --p-a: var(--ink); --p-b: var(--fill-primary); --p-c: var(--line); --p-d: var(--surface-alt); }
.service-card--wide .servicio__ilus { aspect-ratio: 32 / 7; }
@media (max-width: 640px) { .service-card--wide .servicio__ilus { aspect-ratio: 16 / 7; } }
.card--dark .servicio__ilus { --t-relleno: var(--surface-dark-raised); --p-a: var(--ink-on-dark); --p-b: var(--accent-on-dark); --p-c: var(--sand); --p-d: var(--surface-dark); }

/* ---------- Trabajos: filtros con indicador que se desliza (trabajos.js) ---------- */
.filtros { position: relative; display: flex; gap: 8px; margin-bottom: var(--space-8); overflow-x: auto; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros[hidden] { display: none; } /* sin JS no hay filtros */
/* Barras con scroll (filtros y pestañas de servicio): degradado en la orilla que tiene más
   opciones; main.js pone data-borde según el scroll */
:is(.filtros, .subnav__list)[data-borde="fin"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
:is(.filtros, .subnav__list)[data-borde="inicio"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
:is(.filtros, .subnav__list)[data-borde="ambos"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.filtros .chip { position: relative; z-index: 1; flex-shrink: 0; min-height: 44px; transition: color .3s cubic-bezier(.2, .8, .2, 1); }
.filtros--js .chip[aria-pressed="true"] { --t-relleno: transparent; color: var(--page); }
.filtros__indicador { position: absolute; left: 0; top: 0; width: 100px; height: 44px; pointer-events: none; transform-origin: 0 50%;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--ink); }
.trabajos > [hidden] { display: none; }

/* ---------- Nosotros: quiénes somos, la T de áreas en su marco y las áreas ---------- */
.nos-quienes, .nos-quienes__texto { display: flex; flex-direction: column; gap: var(--space-4); }
.nos-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-4); }
.nos-datos > div { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.nos-datos b { font: 800 26px/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.nos-datos span { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
@media (max-width: 640px) { .nos-datos { grid-template-columns: 1fr; gap: var(--space-4); } }
.nos-area .nos-area__tag { align-self: flex-start; font: 700 12px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.nos-area.card--dark .nos-area__tag { color: var(--accent-on-dark); }
a.nos-area__tag { text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
a.nos-area__tag:hover { color: var(--accent); text-decoration-color: currentColor; }
.nos-area h3 { font-size: 24px; }
.retrato { position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande); --t-relleno: var(--surface-dark);
  --p-a: var(--ink-on-dark); --p-b: var(--accent-on-dark); --p-c: var(--sand); --p-d: var(--surface-dark-raised); }
.retrato__ilus, .retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Hero de Nosotros: la T de áreas que se arma pieza por pieza (--j orden; --dx, --dy y --r de dónde llega) */
.retrato--hero { width: min(340px, 78vw); --t-relleno: transparent; --p-d: var(--ink-muted-on-dark); } /* sobre el navy del hero, la pieza oscura se aclara */
.t-armando path { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes pieza-llega { from { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
/* Escritorio: ligada al scroll del hero (--q); la última pieza llega al 90% del recorrido */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 700px) {
  .motion .escena-hero .t-armando path {
    --k: clamp(0, calc(var(--q, 0) * 2 - var(--j) * .16), 1);
    transform: translate(calc((1 - var(--k)) * var(--dx)), calc((1 - var(--k)) * var(--dy))) rotate(calc((1 - var(--k)) * var(--r)));
    opacity: calc(.2 + .8 * var(--k));
  }
}
/* Celular y pantallas bajas (sin escena fija): se arma sola una vez al cargar */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px), (prefers-reduced-motion: no-preference) and (max-height: 699px) {
  .motion .t-armando path { animation: pieza-llega .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.6s + var(--j) * .12s); }
}
.nos-quienes { max-width: 860px; }
.nos-quienes__head { display: flex; flex-direction: column; gap: var(--space-4); }
.section-head--sola { margin-bottom: 0; }

/* ---------- Migas de pan (servicios, Nosotros, Trabajos, Contacto): discretas, arriba del hero ---------- */
.migas { padding-block: var(--space-3); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font: 500 13px/1.4 var(--font-label); color: var(--ink-muted); }
.migas li + li::before { content: "›"; margin-right: 8px; color: var(--control); }
.migas a { color: var(--ink-muted); }
.migas a:hover { color: var(--ink); }
.migas [aria-current] { color: var(--ink); }
@media (max-width: 960px) { .migas a { display: inline-block; padding-block: 12px; margin-block: -12px; } } /* 44 px para el dedo */

/* ---------- Contacto ---------- */
.split--arriba { align-items: start; }
.form--contacto { padding: 40px; }
.field--grupo { margin: 0; padding: 0; border: 0; }
.field--grupo legend { margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.form__enviar { align-self: flex-start; }
@media (max-width: 640px) { .form--contacto { padding: 28px 22px; } }
/* La casilla que llega marcada desde ?servicio= se resalta un momento */
@keyframes llega { 0% { outline-color: var(--fill-primary); outline-offset: 6px; } 100% { outline-color: transparent; outline-offset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .checks label.is-llega { outline: 2px solid transparent; animation: llega 1.4s cubic-bezier(.2, .8, .2, 1) .3s 2 both; }
}

/* ---------- La T en dos piezas: se arma sola (gracias) o al tocarla (404) ---------- */
.page-hero--alto { padding-block: 160px; }
@media (max-width: 640px) { .page-hero--alto { padding-block: 96px; } }
.armar { display: block; width: 72px; height: 72px; --p-b: var(--accent-on-dark); }
.armar path { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes brazo-llega { from { opacity: 0; transform: translate(-28px, -12px) rotate(-12deg); } }
@keyframes tallo-llega { from { opacity: 0; transform: translate(14px, 30px) rotate(10deg); } }
@media (prefers-reduced-motion: no-preference) {
  .armar--solo .armar__brazo { animation: brazo-llega .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .armar--solo .armar__tallo { animation: tallo-llega .7s cubic-bezier(.2, .8, .2, 1) .4s both; }
  .gracias .wrap > :not(svg) { animation: sube .6s cubic-bezier(.2, .8, .2, 1) both; }
  .gracias .wrap > .eyebrow { animation-delay: .8s; }
  .gracias .wrap > h1 { animation-delay: .9s; }
  .gracias .wrap > .lead { animation-delay: 1s; }
  .gracias .wrap > .actions { animation-delay: 1.1s; }
  .gracias .wrap > .wa-urge { animation-delay: 1.2s; }
}
.armable { padding: 8px; border: 0; background: none; cursor: pointer; }
.armable path { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.armable .armar__brazo { transform: translate(-10px, 9px) rotate(-16deg); }
.armable .armar__tallo { transform: translate(11px, 5px) rotate(14deg); }
.armable[aria-pressed="true"] path { transform: none; }
@media (hover: hover) and (pointer: fine) { .armable:hover path { transform: none; } }

/* Clientes del home */
.clientes-home { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); }
.clientes-home .clients { justify-content: flex-start; }
.clientes-home--aparte { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--line); }

/* =========================================================
   Sitio de ejemplo (hero de Sitios web) — lo anima sitios-web.js
   Marco con forma T; sin JS la portada se ve completa y quieta.
   ========================================================= */
.demo { width: min(960px, 100%); border-radius: 0 10px 40px 0; background: transparent; overflow: hidden; text-align: left; color: var(--ink); }
.demo [hidden] { display: none !important; } /* que ningún display: flex le gane a hidden */
.demo__hueco { width: min(960px, 100%); }

/* Barra del navegador */
.demo__bar { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-3) 0 var(--space-2);
  --t-corte: 26px; --t-chica: 10px; --t-grande: 0px; --t-relleno: var(--line); }
.demo__dots { display: flex; flex-shrink: 0; }
.demo__dot { position: relative; width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.demo__dot:disabled { cursor: default; }
.demo__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--control); }
.demo--js .demo__dot--cerrar::before { background: var(--danger); }
.demo--js .demo__dot--min::before { background: var(--warning); }
.demo--js .demo__dot--max::before { background: var(--success); }
.demo__dot::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font: 800 10px/1 var(--font-sans); color: var(--surface); opacity: 0; transition: opacity .15s cubic-bezier(.2, .8, .2, 1); }
.demo__dot--cerrar::after { content: "×"; font-size: 12px; }
.demo__dot--min::after { content: "–"; }
.demo__dot--max::after { content: "↗"; }
.demo--js .demo__dots:hover .demo__dot::after, .demo--js .demo__dot:focus-visible::after { opacity: 1; }
.demo__dot:focus-visible { outline: none; }
.demo__dot:focus-visible::before { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
@media (pointer: coarse) { .demo__dot { width: 44px; } }
@media (hover: none) { .demo--js .demo__dot::after { opacity: 1; } }

.demo__url { flex: 1; min-width: 0; max-width: 360px; height: 26px; margin-inline: auto; display: flex; align-items: center; gap: 7px; padding: 0 10px; font: 500 12px/1 var(--font-mono); color: var(--ink-muted); white-space: nowrap; overflow: hidden;
  --t-corte: var(--t-control-corte); --t-chica: 3px; --t-grande: 10px; --t-relleno: var(--surface); }
.demo__candado { position: relative; flex-shrink: 0; width: 8px; height: 6px; margin-top: 4px; border-radius: 1.5px; background: var(--ink-muted); }
.demo__candado::before { content: ""; position: absolute; left: 1px; bottom: 5px; width: 6px; height: 5px; border: 1.5px solid var(--ink-muted); border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.demo__url-txt { overflow: hidden; text-overflow: ellipsis; }
/* El cursor que escribe la URL es el tallo de la T */
.demo__url-txt.is-escribiendo::after { content: ""; display: inline-block; width: 4px; height: 13px; margin-left: 2px; vertical-align: -2px; background: var(--fill-primary); border-radius: 0 0 3px 0; animation: demo-parpadeo .8s steps(1) infinite; }
@keyframes demo-parpadeo { 50% { opacity: 0; } }
.demo__tag { flex-shrink: 0; font: 600 10px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 640px) { .demo__tag { display: none; } }

/* Cuerpo: portada y catálogo encimados; la altura fija evita saltos al cambiar */
.demo__body { position: relative; min-height: 460px; overflow: hidden; overflow: clip; background: var(--surface); transform-origin: top; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s cubic-bezier(.2, .8, .2, 1); }
.demo--js .demo__body { height: 460px; }
.demo.is-min .demo__body { transform: scaleY(0); opacity: 0; }
@media (max-width: 640px) { .demo__body { min-height: 440px; } .demo--js .demo__body { height: 440px; } }
.demo--js .demo__vista { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.demo--js[data-vista="catalogo"] .demo__portada,
.demo--js[data-vista="portada"] .demo__catalogo { opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.demo--js[data-vista="catalogo"] .demo__portada { transform: translateX(-24px); }
.demo--js[data-vista="portada"] .demo__catalogo { transform: translateX(24px); }

/* Portada del mini sitio */
.demo__header { display: flex; align-items: center; gap: var(--space-6); padding: 14px 24px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.demo__header img { width: auto; height: 17px; margin-right: auto; }
.demo__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 32px 24px; }
.demo__eyebrow { font: 600 11px/1.2 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.demo__titulo { font: 800 clamp(24px, 3.2vw, 36px)/1.1 var(--font-display); letter-spacing: -.02em; }
.demo__texto { max-width: 440px; font-size: 15px; color: var(--ink-muted); }
.demo__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.demo__btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
.demo__destacados { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 32px 28px; }
.demo__mini { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.demo__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10;
  --t-corte: 10px; --t-chica: 0px; --t-grande: 16px; --t-relleno: var(--surface-alt); }
.demo__svg { width: 46%; height: auto; }
.demo__svg .i-n { fill: var(--ink); }
.demo__svg .i-a { fill: var(--fill-primary); }
.demo__svg .i-s { fill: var(--accent-soft); }
.demo__svg .i-w { fill: var(--surface); }
.demo__svg .i-t { fill: none; stroke: var(--ink); stroke-width: 1.5; }
@media (max-width: 640px) {
  .demo__header { padding: 12px 16px; }
  .demo__header span { display: none; }
  .demo__hero { padding: 20px 16px 16px; }
  .demo__destacados { gap: 8px; padding: 0 16px 20px; }
  .demo__mini b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .demo__destacados .demo__img { aspect-ratio: 1; }
  .demo__destacados .demo__svg { width: 64%; }
}

/* Catálogo */
.demo__catalogo { padding: 12px 24px 0; }
.demo__cat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.demo__volver { min-height: 44px; padding: 0 6px 0 0; border: 0; background: none; font: 600 13px/1 var(--font-label); color: var(--accent); cursor: pointer; }
.demo__cat-titulo { margin-right: auto; font: 800 20px/1.2 var(--font-display); letter-spacing: -.01em; }
.demo__tabs { position: relative; display: flex; margin-top: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.demo__tabs::-webkit-scrollbar { display: none; }
.demo__tab { flex-shrink: 0; min-height: 44px; padding: 0 14px; border: 0; background: none; font: 600 13px/1 var(--font-label); color: var(--ink-muted); cursor: pointer; transition: color .15s cubic-bezier(.2, .8, .2, 1); }
.demo__tab:hover, .demo__tab[aria-selected="true"] { color: var(--ink); }
.demo__tab:focus-visible { outline-offset: -4px; }
.demo__indicador { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--fill-primary); transform-origin: 0 0; transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.demo__pista { margin-top: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--accent-strong);
  --t-corte: var(--t-control-corte); --t-chica: 0px; --t-grande: var(--t-control-grande); --t-relleno: var(--accent-soft); }
.demo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding-block: 16px; }
.demo__grid .demo__img { aspect-ratio: 16 / 9; }
.demo__prod { display: flex; flex-direction: column; gap: 3px; padding: 10px; animation: demo-entra .3s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms);
  --t-corte: 12px; --t-chica: 4px; --t-grande: 18px; --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
@keyframes demo-entra { from { opacity: 0; transform: translateY(8px); } }
.demo__prod .demo__img { margin-bottom: 6px; }
.demo__nombre { font-size: 14px; line-height: 1.3; }
.demo__clave { font: 500 11px/1.4 var(--font-mono); color: var(--ink-muted); }
.demo__spec { margin-bottom: 8px; font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.demo__agregar { margin-top: auto; min-height: 44px; padding: 6px 10px; font: 600 12px/1.2 var(--font-label); color: var(--ink); cursor: pointer; transition: color .15s cubic-bezier(.2, .8, .2, 1);
  --t-corte: var(--t-boton-corte); --t-chica: var(--t-boton-chica); --t-grande: var(--t-boton-grande); --t-relleno: var(--line); }
.demo__agregar:hover { --t-relleno: var(--ink); color: var(--page); }
.demo__agregar.is-ok { --t-relleno: var(--fill-primary); color: var(--on-accent); }
.demo__fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 12px; padding: 20px;
  --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande); --t-relleno: var(--surface-dark); }
.demo__fin p { flex: 1 1 220px; font-size: 14px; color: var(--ink-muted-on-dark); }
.demo__fin b { display: block; margin-bottom: 2px; font-size: 16px; color: var(--ink-on-dark); }
.demo__contador { position: sticky; bottom: 12px; z-index: 2; display: flex; align-items: center; min-height: 44px; margin: 0 0 12px auto; padding: 0 18px; color: var(--page); font: 600 14px/1 var(--font-label); cursor: pointer;
  --t-corte: var(--t-boton-corte); --t-chica: var(--t-boton-chica); --t-grande: var(--t-boton-grande); --t-relleno: var(--ink); }
.demo__contador.is-pop { animation: demo-pop .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes demo-pop { 50% { transform: scale(1.08); } }
@media (max-width: 640px) {
  .demo__catalogo { padding: 8px 12px 0; }
  .demo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .demo__prod { padding: 8px; }
}

/* Panel de cotización: lateral en escritorio, desde abajo en celular */
.demo__velo { position: absolute; inset: 0; z-index: 3; background: rgba(11, 22, 40, .35); opacity: 0; transition: opacity .25s cubic-bezier(.2, .8, .2, 1); }
.demo.panel-abierto .demo__velo { opacity: 1; }
.demo__panel { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: min(360px, 100%); display: flex; flex-direction: column; background: var(--surface); box-shadow: -12px 0 32px rgba(11, 22, 40, .16); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.demo.panel-abierto .demo__panel { transform: none; }
@media (max-width: 640px) {
  .demo__panel { top: auto; left: 0; width: auto; max-height: 85%; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px rgba(11, 22, 40, .16); transform: translateY(100%); }
}
.demo__panel-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 20px; border-bottom: 1px solid var(--line); }
.demo__panel-titulo { font: 800 18px/1.2 var(--font-display); }
.demo__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; color: var(--ink-muted); cursor: pointer; }
.demo__x:hover { background: var(--surface-alt); color: var(--ink); }
.demo__panel-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 20px; overflow-y: auto; }
.demo__lista { list-style: none; display: flex; flex-direction: column; }
.demo__lista li { display: flex; align-items: center; gap: 10px; padding-block: 8px; border-bottom: 1px solid var(--line); }
.demo__img--chica { flex-shrink: 0; width: 44px; aspect-ratio: 1; }
.demo__img--chica .demo__svg { width: 70%; }
.demo__item { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.demo__cant { display: flex; align-items: center; }
.demo__cant button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; font-size: 18px; color: var(--ink); cursor: pointer; }
.demo__cant button:hover { background: var(--surface-alt); }
.demo__cant output { min-width: 18px; text-align: center; font: 500 14px/1 var(--font-mono); }
.demo__enviar { align-self: stretch; margin-top: 4px; }
.demo__etiqueta { font: 600 11px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.demo__chat { padding: 14px; border-radius: var(--radius-md); background: var(--surface-alt); }
.demo__burbuja { position: relative; max-width: 92%; padding: 12px 14px 22px; font-size: 14px; line-height: 1.5;
  --t-corte: 10px; --t-chica: 4px; --t-grande: 14px; --t-relleno: var(--surface); }
.demo__hora { position: absolute; right: 10px; bottom: 6px; font: 500 10px/1 var(--font-mono); color: var(--ink-muted); }
.demo__nota, .demo__vacio { font-size: 13px; color: var(--ink-muted); }

/* Pantalla completa (botón verde) */
.demo-modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--space-6); border: 0; background: transparent; }
.demo-modal::backdrop { background: rgba(11, 22, 40, .72); }
.demo-modal .demo { width: min(1200px, 100%); height: 100%; margin-inline: auto; display: flex; flex-direction: column; animation: demo-crece .3s cubic-bezier(.2, .8, .2, 1); }
.demo-modal .demo__body { flex: 1; height: auto; min-height: 0; }
@keyframes demo-crece { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 640px) { .demo-modal { padding: 0; } }
html:has(.demo-modal[open]) { overflow: hidden; }

/* =========================================================
   Movimiento ligado al scroll (motion.js)
   Los estados de movimiento solo aplican con .motion (JS) y sin
   prefers-reduced-motion. Sin eso, todo se ve completo y en su lugar.
   ========================================================= */

/* Barra de avance de la página */
.progreso { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 2px; background: var(--fill-primary); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
html:not(.motion) .progreso { display: none; }

@keyframes palabra-sube { from { transform: translateY(110%); } }
@keyframes sube { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: no-preference) {
  .motion [data-reveal] { transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
  .motion [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(24px); }
  .motion [data-reveal="zoom"]:not(.is-visible) { transform: scale(.9); }
  .motion [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); }
  .motion [data-parallax].is-activa { will-change: transform; }
  .motion [data-highlight] > * { opacity: .28; transition: opacity .4s cubic-bezier(.2, .8, .2, 1); }
  .motion [data-highlight] > .is-on { opacity: 1; }
}

/* ---------- Hero como escena (Sitios web) ---------- */
.escena-hero__fijo { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-24) var(--space-6) 0; text-align: center; overflow: hidden; }
.escena-hero__texto { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.escena-hero__texto .lead { max-width: 640px; }
.escena-hero__texto .actions { margin-top: var(--space-3); }
.escena-hero__visual { width: 100%; display: flex; justify-content: center; }
.escena-hero__marco { width: min(960px, 100%); display: flex; justify-content: center; }
@media (max-width: 640px) { .escena-hero__fijo { padding-top: var(--space-12); } }
/* Hero corto (Contacto, Trabajos): sin visual, con el aire de abajo del page-hero */
.escena-hero--corta .escena-hero__fijo { padding-bottom: var(--space-16); }
@media (max-width: 640px) { .escena-hero--corta .escena-hero__fijo { padding-bottom: var(--space-12); } }

/* Titular palabra por palabra: cada palabra sube detrás de una máscara */
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .06em .12em; margin-block: -.06em -.12em; }
.palabra > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .motion :is(.escena-hero, .page-hero--entrada) .palabra > span { animation: palabra-sube .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.1s + var(--i) * 60ms); }
  .motion .page-hero--entrada .wrap > :is(.eyebrow, .lead, .actions, .wa-urge) { animation: sube .7s cubic-bezier(.2, .8, .2, 1) .45s both; }
  .motion .page-hero--entrada .btn--brillo::after { animation: brillo 1.1s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
  .motion .escena-hero__texto > :not(.display-xl) { animation: sube .7s cubic-bezier(.2, .8, .2, 1) both; } /* el titular grande sube por palabras */
  .motion .escena-hero__texto > .eyebrow { animation-delay: .45s; }
  .motion .escena-hero__texto > .lead { animation-delay: .55s; }
  .motion .escena-hero__texto > .actions { animation-delay: .65s; }
}

/* Escritorio: la sección se queda fija ~220vh. --q llega a 1 al 80% del
   recorrido; el último 20% el navegador ya quedó quieto y listo para usarse. */
/* (.escena-hero--corta no entra aquí: solo tiene la entrada del titular, sin escena fija) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 700px) {
  .motion .escena-hero:not(.escena-hero--corta) { --q: min(1, calc(var(--p, 0) * 1.25)); height: 220vh; }
  .motion .escena-hero:not(.escena-hero--corta) .escena-hero__fijo { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); justify-content: center; padding: 0 var(--space-6); }
  .motion .escena-hero:not(.escena-hero--corta) .escena-hero__texto {
    position: absolute; top: var(--space-16); left: var(--space-6); right: var(--space-6);
    opacity: calc(1 - var(--q) * 1.5);
    transform: translateY(calc(var(--q) * -10vh)) scale(calc(1 - var(--q) * .3));
    transform-origin: 50% 0;
  }
  .motion .escena-hero:not(.escena-hero--corta) .escena-hero__visual { position: relative; z-index: 1; perspective: 1600px; }
  .motion .escena-hero:not(.escena-hero--corta) .escena-hero__marco {
    transform: translateY(calc((1 - var(--q)) * 32vh)) scale(calc(.72 + .28 * var(--q))) rotateX(calc((1 - var(--q)) * 24deg));
  }
  .motion .escena-hero.is-activa .escena-hero__texto,
  .motion .escena-hero.is-activa .escena-hero__marco { will-change: transform, opacity; }
}

/* ---------- Sub-navegación de vidrio ---------- */
.subnav--vidrio { position: sticky; top: var(--header-h); z-index: 40; padding-block: 10px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.subnav--vidrio .subnav__list { position: relative; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
.subnav--vidrio .subnav__list::-webkit-scrollbar { display: none; }
.subnav--vidrio .chip { position: relative; z-index: 1; flex-shrink: 0; min-height: 44px; transition: color .3s cubic-bezier(.2, .8, .2, 1); }
.subnav--vidrio .chip:first-of-type { margin-left: auto; }
.subnav--vidrio .chip:last-child { margin-right: auto; }
.subnav--vidrio .chip[aria-current] { --t-relleno: transparent; color: var(--on-accent); }
.subnav__pill { position: absolute; left: 0; top: 50%; width: 100px; height: 44px; margin-top: -22px; opacity: 0; transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .25s cubic-bezier(.2, .8, .2, 1);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--ink); }
.subnav__pill.sin-transicion { transition: opacity .25s cubic-bezier(.2, .8, .2, 1); }
.subnav--vidrio ~ .oferta { scroll-margin-top: calc(var(--header-h) + 64px); }

/* ---------- Ofertas con movimiento ---------- */

/* Fondo que cambia entre secciones: capa fija detrás de todo (la crea motion.js) */
.fondo-vivo { position: fixed; inset: 0; z-index: -1; background: var(--surface-alt); opacity: 0; pointer-events: none; }
.motion-fondo [data-fondo] { background: transparent; }

@media (prefers-reduced-motion: no-preference) {
  /* Titular con zoom: llega a su tamaño cuando la cabecera va a media pantalla.
     clip (no hidden): lo que crece no ensancha la página y sticky sigue funcionando */
  .motion .oferta { overflow-x: clip; }
  .motion .section-head--zoom { --z: min(1, calc(var(--p, 0) * 2.6)); }
  .motion .section-head--zoom .display-l { transform: scale(calc(1.18 - .18 * var(--z))); opacity: calc(.15 + .85 * var(--z)); transform-origin: 0 100%; }
  .motion .section-head--zoom .eyebrow { transform: translateY(calc((1 - var(--z)) * 24px)); opacity: var(--z); }
  .motion .section-head--zoom.is-activa .display-l { will-change: transform, opacity; }

  .motion .section--clip { overflow-x: clip; }

  /* Tarjetas que entran desde abajo y desde atrás, una tras otra (--i = orden).
     .planes--motion: tarjetas de plan · .entra--motion: cualquier grupo de tarjetas */
  .motion :is(.planes--motion, .entra--motion) { --q: min(1, calc(var(--p, 0) * 3)); }
  .motion :is(.planes--motion > .plan, .entra--motion > *) {
    --t: clamp(0, calc((var(--q) - var(--i) * var(--paso, .16)) / .6), 1); /* --paso: más chico en grupos grandes (generar.py) */
    --s: calc(.9 + .1 * var(--t));
    opacity: var(--t);
    transform: perspective(1000px) translateY(calc((1 - var(--t)) * 60px)) scale(var(--s)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  .motion :is(.planes--motion > .plan--featured, .entra--motion > .tarjeta--destacada) { --s: calc(.9 + .13 * var(--t)); }
  /* Las tarjetas que son liga suben 3 px al pasar el mouse sin perder la entrada ni la inclinación */
  .motion .entra--motion > a.card:hover { transform: perspective(1000px) translateY(calc((1 - var(--t)) * 60px - 3px)) scale(var(--s)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .motion :is(.planes--motion, .entra--motion).is-activa > * { will-change: transform, opacity; }

  /* Precio tachado (Kit comercial): aparece cuando el precio terminó de contar */
  .motion .planes--motion .plan__antes { opacity: 0; transition: opacity .5s cubic-bezier(.2, .8, .2, 1); }
  .motion .planes--motion .plan__price:has([data-contado]) .plan__antes { opacity: 1; }
}

/* Inclinación ligera al pasar el mouse (motion.js escribe --rx / --ry). En grupos que entran
   (.planes--motion, .entra--motion) va dentro de su transform; suelta, con su propia regla.
   Solo con mouse: en celular motion.js ni siquiera la conecta. */
:is(.planes--motion > .plan, .tarjeta--destacada) { position: relative; isolation: isolate; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion :is(.planes--motion > .plan, .entra--motion > [data-tilt], [data-tilt]) { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
  .motion [data-tilt]:not(:is(.planes--motion, .entra--motion) > *) { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}

/* Tarjeta destacada (plan de Sitios web, Automatización…): borde con un degradado que gira
   despacio, con el mismo corte. .plan--featured en planes, .tarjeta--destacada en cualquier tarjeta */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes giro { to { --giro: 360deg; } }
:is(.planes--motion > .plan--featured, .tarjeta--destacada)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px);
  background: conic-gradient(from var(--giro), transparent 0 50%, var(--accent-on-dark) 72%, var(--sand) 84%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) {
  :is(.planes--motion > .plan--featured, .tarjeta--destacada)::after { animation: giro 6s linear infinite; }
  /* Girar repinta el borde en cada cuadro: solo mientras las tarjetas están cerca de la pantalla */
  .motion :is(.planes--motion, .entra--motion):not(.is-activa) > :is(.plan--featured, .tarjeta--destacada)::after { animation-play-state: paused; }
}
@media (max-width: 640px) { .motion .entra--motion > .tarjeta--destacada { --s: 1; } }

/* Celular: carrusel horizontal con snap; vive en su propio contenedor */
.carrusel__puntos { display: none; }
@media (max-width: 640px) {
  .planes--carrusel { position: relative; display: flex; gap: var(--space-3); margin-inline: calc(-1 * var(--space-4)); padding: var(--space-2) var(--space-4) var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .planes--carrusel::-webkit-scrollbar { display: none; }
  /* Se asoman ~24 px de las tarjetas de al lado para que se entienda que se desliza */
  .planes--carrusel > * { flex: 0 0 calc(100% - 40px); scroll-snap-align: center; }
  /* Mismo alto, pero el espacio que sobra se reparte entre los bloques de la tarjeta
     en lugar de abrir un solo hueco grande antes del precio */
  .planes--carrusel > .plan { justify-content: space-between; }
  .planes--carrusel > .plan .plan__foot { margin-top: 0; }
  .carrusel__puntos { display: flex; justify-content: center; }
  /* Área tocable de 44 × 44; el margen negativo deja los puntos a 32 px, como se ven */
  .carrusel__puntos button { position: relative; width: 44px; height: 44px; margin-inline: -6px; padding: 0; border: 0; background: none; cursor: pointer; }
  .carrusel__puntos button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--line); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s cubic-bezier(.2, .8, .2, 1); }
  .carrusel__puntos button[aria-current]::before { background: var(--ink); transform: scale(1.25); }
  /* En el carrusel no hay entrada ligada al scroll: las tarjetas ya están ahí */
  .motion .planes--carrusel > * { --t: 1; --s: 1; }
  .motion .planes--motion > .plan--featured { --s: 1; }
}

/* ---------- Renovación: el bloque "se apaga" a navy y el precio llega con zoom out ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .renovacion--motion {
    --n: clamp(0, calc((var(--p, 0) - .04) / .2), 1);   /* fondo a navy */
    --z: clamp(0, calc((var(--p, 0) - .1) / .24), 1);    /* precio: de enorme a normal */
    --tx: clamp(0, calc((var(--p, 0) - .3) / .14), 1);   /* texto */
    position: relative; isolation: isolate; overflow: clip;
  }
  .motion .renovacion--motion .card.renovacion { gap: var(--space-8); }
  .motion .renovacion--motion .renovacion__precio { opacity: calc(var(--n) * 2 - 1); transform: scale(calc(1 + (1 - var(--z)) * 2.6)); }
  .motion .renovacion--motion .renovacion__texto { opacity: var(--tx); transform: translateY(calc((1 - var(--tx)) * 24px)); }
  .motion .renovacion--motion.is-activa .renovacion__precio { will-change: transform, opacity; }
}

/* ---------- "Así lo hacemos": una línea enciende cada paso ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 700px) {
  .motion .pasos-escena { --l: clamp(0, calc((var(--p, 0) - .1) / .7), 1); height: 180vh; padding: 0; }
  .motion .pasos-escena > .wrap { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; }
  .motion .pasos-escena .steps { position: relative; grid-template-columns: repeat(var(--pasos, 4), minmax(0, 1fr)); }
  .motion .pasos-escena .steps::before,
  .motion .pasos-escena .steps::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
  .motion .pasos-escena .steps::after { background: var(--fill-primary); transform: scaleX(var(--l)); transform-origin: 0 50%; }
  .motion .pasos-escena .step[data-reveal] {
    --on: clamp(0, calc((var(--l) - var(--i) / var(--pasos, 4)) * 10), 1); /* con 4 pasos: i × .25 */
    border-top-color: transparent; transition: none;
    opacity: calc(.2 + .8 * var(--on)); transform: translateY(calc((1 - var(--on)) * 12px));
  }
  .motion .pasos-escena.is-activa .steps::after { will-change: transform; }
}
/* Celular: línea vertical y pasos que aparecen uno por uno */
@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .motion .pasos-escena .steps { position: relative; padding-left: var(--space-6); }
  .motion .pasos-escena .steps::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 2px; background: linear-gradient(var(--fill-primary), var(--line)); }
  .motion .pasos-escena .step { border-top: 0; padding-top: 0; }
}

/* ---------- "Lo que hemos hecho": galería que avanza de lado ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); max-width: calc(var(--content-max) + 2 * var(--space-6)); margin-inline: auto; padding-inline: var(--space-6); }
@media (max-width: 899px) {
  .galeria { display: flex; gap: var(--space-4); padding: 0 var(--space-6) var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-6); scrollbar-width: none; }
  .galeria::-webkit-scrollbar { display: none; }
  .galeria > .work { flex: 0 0 min(80%, 420px); scroll-snap-align: start; }
}
@media (max-width: 640px) { .galeria { padding-inline: var(--space-4); scroll-padding-inline: var(--space-4); } }
.galeria:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 700px) {
  .motion .galeria-escena {
    --q: clamp(0, calc((var(--p, 0) - .08) / .84), 1);
    --card: min(40vw, 520px, calc((100vh - 400px) * 1.4));
    --pad: max(var(--space-6), calc((100vw - var(--content-max)) / 2));
    height: 220vh; padding: 0;
  }
  .motion .galeria-escena__fijo { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .motion .galeria { display: flex; width: max-content; max-width: none; margin: 0; padding-inline: var(--pad);
    transform: translateX(calc(var(--q) * -1 * (var(--n) * var(--card) + (var(--n) - 1) * var(--space-6) + 2 * var(--pad) - 100vw))); }
  .motion .galeria > .work { flex: 0 0 var(--card); }
  /* Parallax ligero: la ilustración se mueve distinto que la tarjeta (el nombre queda quieto) */
  .motion .galeria .t-ilus { transform: translateX(calc((var(--q, .5) - .5) * 36px)); }
  .motion .galeria-escena.is-activa .galeria { will-change: transform; }
}

/* ---------- Preguntas frecuentes: altura animada ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) and selector(::details-content) {
    .motion details[data-abre] { interpolate-size: allow-keywords; }
    .motion details[data-abre]::details-content { height: 0; opacity: 0; overflow: clip; transition: height .4s cubic-bezier(.2, .8, .2, 1), opacity .3s cubic-bezier(.2, .8, .2, 1), content-visibility .4s allow-discrete; }
    .motion details[data-abre][open]::details-content { height: auto; opacity: 1; }
  }
  .motion .faq summary::after { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
}

/* ---------- CTA final: símbolo con zoom, titular palabra por palabra y un brillo ---------- */
.btn--brillo { position: relative; overflow: hidden; isolation: isolate; }
.btn--brillo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%); transform: translateX(-120%); pointer-events: none;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px); }
@keyframes brillo { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: no-preference) {
  .motion .cta--motion .cta__symbol[data-reveal] { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .8s cubic-bezier(.2, .8, .2, 1); }
  .motion .cta--motion .cta__symbol[data-reveal]:not(.is-visible) { opacity: 0; transform: scale(4); }
  .motion .cta--motion h2[data-reveal] { opacity: 1; transform: none; }
  .motion .cta--motion h2[data-reveal] .palabra > span { transition: transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.35s + var(--i) * 60ms); }
  .motion .cta--motion h2[data-reveal]:not(.is-visible) .palabra > span { transform: translateY(110%); }
  .motion .cta--motion .actions.is-visible .btn--brillo::after { animation: brillo 1.1s cubic-bezier(.2, .8, .2, 1) 1.2s both; }
}

/* =========================================================
   Demos de los heroes de servicio (demos.js + el JS de cada página)
   .tel = teléfono (Marketing) · .muestra = ventana ancha (Diseño, Automatización)
   Todas dicen "Ejemplo". Sin JS se ve la primera vista completa.
   ========================================================= */
.tel, .muestra { --p-a: var(--ink); --p-b: var(--fill-primary); --p-c: var(--sand); --p-d: var(--surface-alt); color: var(--ink); text-align: left; }
:is(.tel, .muestra) [hidden] { display: none !important; } /* que ningún display: flex le gane a hidden */
.muestra__tag { flex-shrink: 0; font: 600 10px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }

/* Pestañas con indicador que se desliza */
.pestanas { position: relative; display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas__tab { flex-shrink: 0; min-height: 44px; padding: 0 12px; border: 0; background: none; font: 600 13px/1 var(--font-label); color: var(--ink-muted); cursor: pointer; transition: color .15s cubic-bezier(.2, .8, .2, 1); }
.pestanas__tab:disabled { cursor: default; }
.pestanas__tab[aria-selected="true"], .pestanas__tab:not(:disabled):hover { color: var(--ink); }
.pestanas__tab:focus-visible { outline-offset: -4px; }
.pestanas__indicador { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--fill-primary); transform-origin: 0 0; transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
@media (max-width: 420px) { .pestanas__tab { padding: 0 8px; font-size: 12px; } .tel .pestanas { padding: 0 4px; } }
.pestanas:not(.pestanas--js) .pestanas__tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--fill-primary); }

/* Ventana ancha: barra con el título, las pestañas y "Ejemplo" */
.muestra { width: min(960px, 100%); display: flex; flex-direction: column; overflow: hidden;
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande); --t-relleno: var(--surface); }
.muestra__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 52px; padding: 4px 16px 4px 34px;
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: 0px; --t-relleno: var(--line); }
.muestra__titulo { font: 700 14px/1.2 var(--font-display); letter-spacing: -.01em; }
.muestra__bar .pestanas { margin-right: auto; }
.muestra__bar .muestra__tag:first-child, .muestra__bar .pestanas + .muestra__tag { margin-left: auto; }
@media (max-width: 640px) { .muestra__bar { padding: 4px 8px 4px 26px; } .muestra__bar .pestanas { order: 3; width: 100%; margin-inline: -18px 0; } }
@media (max-width: 420px) { .muestra__bar .pestanas__tab { padding: 0 6px; } }

/* ---------- Marketing: "Tu mes en redes" (teléfono) ---------- */
.tel { width: min(360px, 100%); height: 560px; display: flex; flex-direction: column; overflow: hidden;
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande); --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.tel__cabeza { display: flex; align-items: center; gap: 10px; padding: 18px 18px 8px 30px; }
.tel__cabeza b { display: block; font-size: 14px; line-height: 1.2; }
.tel__cabeza span:not(.redes__avatar):not(.muestra__tag) { display: block; font-size: 12px; color: var(--ink-muted); }
.tel__cabeza .muestra__tag { margin-left: auto; }
.redes__avatar { flex-shrink: 0; width: 34px; height: 34px; border-radius: 0 4px 12px 0; background: linear-gradient(135deg, transparent 4.5px, var(--fill-primary) 5.5px); }
.tel .pestanas { padding: 0 10px; border-bottom: 1px solid var(--line); }
.tel .pestanas__tab { flex: 1; }
.tel__panel { flex: 1; min-height: 0; padding: 14px 18px 18px; overflow: hidden; }
.tel__panel--feed { padding: 0; }
.tel__panel:focus-visible { outline-offset: -3px; }

.cal__mes { margin-bottom: 10px; font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; }
.cal__semana, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__semana span { padding-bottom: 4px; text-align: center; font: 600 10px/1 var(--font-label); color: var(--ink-muted); }
.cal__dia { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.cal__dia--pub { padding: 0; font-weight: 500; color: var(--ink); cursor: pointer;
  --t-corte: 6px; --t-chica: 0px; --t-grande: 9px; --t-relleno: var(--accent-soft); }
.cal__dia--pub::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 10px; height: 3px; margin-left: -5px; border-radius: 0 0 2px 0; background: var(--fill-primary); }
.cal__dia--reel::after, .cal__marca--reel { background: var(--ink); }
.cal__dia--carrusel::after, .cal__marca--carrusel { width: 14px; margin-left: -7px; background: linear-gradient(90deg, var(--fill-primary) 0 4px, transparent 4px 5px, var(--fill-primary) 5px 9px, transparent 9px 10px, var(--fill-primary) 10px); }
.cal__leyenda { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--ink-muted); }
.cal__marca { display: inline-block; width: 10px; height: 3px; border-radius: 0 0 2px 0; background: var(--fill-primary); }
.cal__marca:not(:first-child) { margin-left: 8px; }
.cal__marca--carrusel { width: 14px; margin-left: 8px; }
.cal__dia--pub[aria-pressed="true"] { --t-relleno: var(--fill-primary); color: var(--on-accent); }
.cal__dia--pub[aria-pressed="true"]::after { background: var(--on-accent); }
.cal__dia--pub:disabled { cursor: default; }
.cal__dia--pub:focus-visible { outline-offset: 1px; }

.redes__vista { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 12px;
  --t-corte: 10px; --t-chica: 4px; --t-grande: 14px; --t-relleno: var(--surface-alt); }
.redes__vista.is-nueva { animation: sube .35s cubic-bezier(.2, .8, .2, 1); }
.redes__mini { flex-shrink: 0; width: 76px; }
.redes__arte { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0 4px 14px 0; }
.redes__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; font: 500 11px/1.3 var(--font-mono); color: var(--ink-muted); }
.redes__meta .badge { min-height: 22px; padding: 3px 8px; font-size: 10px; }
.redes__texto { font-size: 14px; line-height: 1.4; }

.redes__feed { height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.redes__feed:focus-visible { outline-offset: -3px; }
.redes__post { display: flex; flex-direction: column; gap: 8px; }
.redes__autor { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.redes__autor .redes__avatar { width: 26px; height: 26px; }
.redes__autor span:last-child { margin-left: auto; font-size: 12px; color: var(--ink-muted); }
.redes__likes { font: 600 13px/1 var(--font-label); }

.redes__reporte { list-style: none; display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
.redes__metrica { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 12px; }
.redes__nombre { font-size: 14px; color: var(--ink-muted); }
.redes__metrica b { font: 500 22px/1 var(--font-mono); text-align: right; }
.redes__barra { grid-column: 1 / -1; display: block; height: 14px; overflow: hidden; border-radius: 0 4px 8px 0; background: var(--surface-alt); }
.redes__barra i { display: block; height: 100%; border-radius: 0 4px 8px 0; background: var(--fill-primary); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tel--js .redes__barra i { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.tel--js .redes__barra.is-llena i { transform: scaleX(var(--v)); }
.redes__nota { margin-top: 22px; font-size: 12px; line-height: 1.45; color: var(--ink-muted); }

/* ---------- Diseño y marca: "Tu marca en todos lados" ---------- */
.muestra__cuerpo { position: relative; }
.marca__panel { min-height: 480px; display: flex; align-items: center; justify-content: center; padding: 32px; perspective: 1200px; }
.marca__panel:focus-visible { outline-offset: -4px; }
.marca__panel.is-nueva > * { animation: marca-entra .4s cubic-bezier(.2, .8, .2, 1); }
@keyframes marca-entra { from { opacity: 0; transform: scale(.96); } }
.marca__simbolo { flex-shrink: 0; width: 40px; height: 40px; }
.marca__simbolo--grande { width: 96px; height: 96px; }
.marca__nombre { font: 800 26px/1 var(--font-display); letter-spacing: -.03em; }
.marca__nombre--grande { font-size: clamp(44px, 7vw, 72px); }
.marca__giro { margin-top: 8px; font: 600 12px/1.2 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }

.marca__logo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.marca__principal { display: flex; align-items: center; gap: 20px; }
.marca__versiones { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.marca__versiones li { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-muted); }
.marca__lamina { display: flex; align-items: center; justify-content: center; height: 96px; color: var(--ink);
  --t-corte: 12px; --t-chica: 4px; --t-grande: 18px; --t-relleno: var(--surface-alt); }
.marca__lamina--oscura { --t-relleno: var(--surface-strong); color: var(--ink-on-dark); --p-a: var(--ink-on-dark); --p-b: var(--accent-on-dark); }
.marca__lamina--tinta { --p-a: var(--ink); --p-b: var(--ink); }
.marca__lockup { display: flex; align-items: center; gap: 10px; }
.marca__lockup .marca__simbolo { width: 32px; height: 32px; }
.marca__lockup .marca__nombre { font-size: 21px; }

.marca__paleta { width: 100%; display: flex; flex-direction: column; gap: 32px; }
.marca__colores { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.marca__colores li { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.marca__color { display: block; height: 150px; --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande); }
.marca__color--p-a { --t-relleno: var(--p-a); }
.marca__color--p-b { --t-relleno: var(--p-b); }
.marca__color--p-c { --t-relleno: var(--p-c); }
.marca__color--p-d { --t-b: 1px; --t-relleno: var(--p-d); --t-borde: var(--line); }
.marca__tipo { display: flex; align-items: center; gap: 20px; }
.marca__aa { font: 800 72px/1 var(--font-display); letter-spacing: -.04em; }
.marca__tipo b { display: block; font-size: 18px; }
.marca__tipo div span { font-size: 14px; color: var(--ink-muted); }

/* Páginas que se pasan (catálogo y presentación) */
.hojas { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hojas__visor { width: 100%; display: flex; justify-content: center; perspective: 1200px; }
.hojas__hoja { width: min(270px, 100%); aspect-ratio: 3 / 4; overflow: hidden;
  --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande); --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.hojas__hoja--diapo { width: min(560px, 100%); aspect-ratio: 16 / 9; }
.hojas__hoja:has(> .cat-pag--portada), .hojas__hoja:has(> .diapo--oscura) { --t-relleno: var(--surface-strong); --t-borde: var(--surface-strong); color: var(--ink-on-dark); --p-a: var(--ink-on-dark); --p-b: var(--accent-on-dark); }
.hojas__hoja.is-entra-der { animation: hoja-der .45s cubic-bezier(.2, .8, .2, 1); }
.hojas__hoja.is-entra-izq { animation: hoja-izq .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes hoja-der { from { opacity: 0; transform: translateX(40px) rotateY(-14deg); } }
@keyframes hoja-izq { from { opacity: 0; transform: translateX(-40px) rotateY(14deg); } }
.hojas__control { display: flex; align-items: center; gap: 8px; }
.hojas__btn { width: 44px; height: 44px; padding: 0; font: 400 22px/1 var(--font-sans); color: var(--ink); cursor: pointer;
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--line); }
.hojas__btn:hover:not(:disabled) { --t-relleno: var(--ink); color: var(--page); }
.hojas__btn:disabled { opacity: .45; cursor: default; }
.hojas__num { min-width: 52px; text-align: center; font: 500 13px/1 var(--font-mono); color: var(--ink-muted); }

.cat-pag { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; font-size: 12px; }
.cat-pag__titulo { font: 800 20px/1.1 var(--font-display); letter-spacing: -.02em; }
.cat-pag--portada, .cat-pag--contacto { align-items: center; justify-content: center; text-align: center; }
.cat-pag--portada .marca__simbolo { width: 72px; height: 72px; }
.cat-pag--portada .marca__nombre { font-size: 34px; }
.cat-pag--portada p:last-child { font: 600 11px/1.3 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted-on-dark); }
.cat-pag__indice { list-style: none; display: flex; flex-direction: column; }
.cat-pag__indice li { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.cat-pag__indice span { font: 500 11px/1 var(--font-mono); color: var(--ink-muted); }
.cat-pag__indice i { flex: 1; }
.cat-pag__fichas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ficha { display: flex; flex-direction: column; gap: 3px; padding: 8px; --t-corte: 8px; --t-chica: 2px; --t-grande: 12px; --t-relleno: var(--surface-alt); }
.ficha__arte { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.ficha b { font-size: 11px; line-height: 1.25; }
.ficha span { font: 500 10px/1.2 var(--font-mono); color: var(--ink-muted); }
.cat-pag__boton { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; height: 34px; padding: 0 14px; font: 600 12px/1 var(--font-label);
  --t-corte: var(--t-boton-corte); --t-chica: var(--t-boton-chica); --t-grande: var(--t-boton-grande); --t-relleno: var(--fill-primary); color: var(--on-accent); }
.cat-pag__boton--linea { --t-relleno: var(--line); color: var(--ink); }

.diapo { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; font-size: 13px; }
.diapo__eyebrow { font: 600 10px/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-strong); }
.diapo__titulo { margin: 8px 0; font: 800 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.diapo__texto { max-width: 260px; color: var(--ink-muted); }
.diapo--columnas, .diapo--oscura { flex-direction: column; align-items: flex-start; justify-content: center; }
.diapo__lineas { list-style: none; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.diapo__lineas li { display: flex; flex-direction: column; gap: 6px; padding: 10px; font-size: 12px;
  --t-corte: 8px; --t-chica: 2px; --t-grande: 12px; --t-relleno: var(--surface-alt); }
.diapo__pasos { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.diapo__pasos li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 700; }
.diapo__pasos span { padding: 4px 10px 4px 12px; font: 500 12px/1 var(--font-mono); color: var(--on-accent-dark); border-radius: 0 3px 9px 0;
  background: linear-gradient(135deg, transparent 4px, var(--accent-on-dark) 5px); }
@media (max-width: 640px) {
  .marca__panel { min-height: 440px; padding: 24px 16px; }
  .marca__versiones { grid-template-columns: 1fr; }
  .marca__lamina { height: 64px; }
  .marca__principal { gap: 14px; }
  .marca__simbolo--grande { width: 64px; height: 64px; }
  .marca__colores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marca__color { height: 88px; }
  .marca__aa { font-size: 56px; }
  .diapo { padding: 16px 18px; gap: 12px; font-size: 11px; }
  .diapo__titulo { margin: 4px 0; font-size: 18px; }
  .diapo .marca__simbolo--grande { width: 56px; height: 56px; }
  .diapo__lineas li { padding: 6px; font-size: 10px; }
  .diapo__pasos li { font-size: 13px; }
}

/* ---------- Automatización: "Simula un mensaje" ---------- */
.flujo { display: flex; flex-direction: column; gap: 20px; padding: 24px; }
.flujo__pasos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.flujo__paso { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 250px; padding: 16px;
  --t-corte: var(--t-tarjeta-corte); --t-chica: var(--t-tarjeta-chica); --t-grande: var(--t-tarjeta-grande); --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.flujo__paso::after { content: ""; position: absolute; top: 34px; right: -25px; width: 24px; height: 2px; background: var(--line); transform-origin: 0 50%; transition: background-color .35s cubic-bezier(.2, .8, .2, 1); }
.flujo__paso:last-child::after { display: none; }
.flujo__paso.is-on::after { background: var(--fill-primary); }
.flujo__paso.is-actual { --t-borde: var(--fill-primary); }
.flujo__cabeza { display: flex; align-items: center; gap: 10px; }
.flujo__icono { flex-shrink: 0; width: 32px; height: 32px; transition: opacity .35s cubic-bezier(.2, .8, .2, 1); }
.flujo__cabeza b { display: block; font-size: 14px; line-height: 1.25; }
.flujo__cabeza span { display: block; font-size: 12px; color: var(--ink-muted); }
.flujo__detalle { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.muestra--js .flujo__paso:not(.is-on) .flujo__icono { opacity: .35; }
.flujo__espera { display: none; }
.muestra--js .flujo__paso:not(.is-on) .flujo__espera { display: block; position: absolute; left: 16px; bottom: 16px; font: 500 12px/1 var(--font-mono); color: var(--ink-muted); }
.muestra--js .flujo__paso:not(.is-on) .flujo__detalle { visibility: hidden; opacity: 0; transform: translateY(10px); transition-delay: 0s, 0s, .35s; }
.flujo__burbuja { position: relative; max-width: 100%; padding: 10px 12px 20px; font-size: 13px; line-height: 1.4;
  --t-corte: 10px; --t-chica: 4px; --t-grande: 14px; --t-relleno: var(--surface-alt); }
.flujo__burbuja span { position: absolute; right: 10px; bottom: 5px; font: 500 10px/1 var(--font-mono); color: var(--ink-muted); }
.flujo__burbuja--bot { padding-bottom: 10px; --t-relleno: var(--accent-soft); }
.flujo__archivo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; font: 600 12px/1.2 var(--font-label);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line); }
.flujo__archivo i { padding: 3px 5px; font: normal 600 9px/1 var(--font-label); color: var(--page); background: var(--ink); border-radius: 0 2px 5px 0; }
.flujo__hoja { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.3; }
.flujo__hoja th { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; font: 600 10px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.flujo__hoja td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.flujo__nueva td { background: var(--accent-soft); font-weight: 700; }
.flujo__hoja small { display: block; font: 500 10px/1.3 var(--font-mono); color: var(--ink-muted); }
.muestra--js .flujo__paso.is-on .flujo__nueva { animation: fila-entra .5s cubic-bezier(.2, .8, .2, 1) .25s both; }
.flujo__aviso { padding: 10px 12px; font-size: 13px; line-height: 1.4; color: var(--page);
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande); --t-relleno: var(--ink); }
.flujo__control { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.flujo__estado { font-size: 14px; color: var(--ink-muted); }
/* Tablet: 2 × 2 (en 4 columnas las tarjetas quedan demasiado angostas); la línea de la 2.ª no apunta a nada */
@media (min-width: 761px) and (max-width: 1000px) {
  .muestra:not(.muestra--compacta) .flujo__pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .muestra:not(.muestra--compacta) .flujo__paso:nth-child(2n)::after { display: none; }
}
@media (max-width: 760px) {
  .flujo { padding: 16px; }
  .flujo__pasos { grid-template-columns: 1fr; gap: 20px; }
  .flujo__paso { min-height: 0; }
  .flujo__paso::after { top: auto; right: auto; left: 31px; bottom: -21px; width: 2px; height: 20px; }
  .muestra--js .flujo__paso:not(.is-on) .flujo__detalle { display: none; }
  .muestra--js .flujo__paso:not(.is-on) .flujo__espera { position: static; }
}

/* ---------- Celular: tamaños para dedo y textos de al menos 12 px ----------
   Lo tocable mide 44 px de alto sin agrandar la letra; el escritorio no cambia. */
/* "Conoce más", "Ver planes"…: el área tocable crece con un pseudo-elemento, así el
   subrayado y el acomodo se quedan donde estaban */
.link-more { position: relative; }
.link-more::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
@media (max-width: 960px) {
  .trato__ganar { min-height: 40px; padding-inline: 12px; }
  .comparativa .btn--sm { min-height: 44px; }
  /* Links que son todo el renglón (listas de viñetas, datos de contacto): 44 px de alto con
     padding que se compensa con margen, así el texto no se mueve */
  .contact-list :is(.wa-dato, .correo-dato) { min-height: 44px; margin-block: -9px; }
  .wa-urge a { display: inline-block; padding-block: 13px; margin-block: -13px; }
  :is(.bullets li, .contact-list div) > a:only-of-type:not(.wa-dato, .correo-dato) { display: inline-block; padding-block: 9px; margin-block: -9px; }
  .checks label { min-height: 44px; }
  /* Días con publicación del calendario de ejemplo: se ven de 36 px, se tocan en 44 */
  .cal__dia--pub::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
}
@media (max-width: 640px) {
  .subnav--vidrio .chip, .filtros .chip { min-height: 44px; }
  .chat__file i { min-width: 34px; padding-inline: 4px; font-size: 12px; }

  .badge { font-size: 12px; letter-spacing: .1em; }
  .redes__meta .badge { font-size: 12px; }
  :is(.muestra__tag, .demo__tag) { font-size: 12px; letter-spacing: .08em; }
  :is(.cal__leyenda, .redes__meta, .tablero__titulo, .trato__nota, .chat__file small, .demo__clave, .demo__hora,
    .wa__msg span, .flujo__burbuja span, .flujo__hoja small, .cot__tabla tbody th span) { font-size: 12px; }
  :is(.demo__eyebrow, .demo__etiqueta, .cot__tabla thead th, .wa__ficha dt, .flujo__hoja th) { font-size: 12px; letter-spacing: .06em; }
  .cal__semana span { font-size: 12px; }

  /* Eyebrows: la mitad de espaciado para que quepan en una línea o corten bonito */
  .eyebrow { letter-spacing: .14em; }
  .marca__giro { letter-spacing: .1em; }
}

/* ---------- Cambio de modo (tema.js) ---------- */
/* Con View Transitions: el modo nuevo se revela en un círculo desde el botón */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* Sin View Transitions: cambio suave de color (250 ms) */
.tema-cambiando, .tema-cambiando * {
  transition: background-color .25s cubic-bezier(.2, .8, .2, 1), color .25s cubic-bezier(.2, .8, .2, 1),
    border-color .25s cubic-bezier(.2, .8, .2, 1), fill .25s cubic-bezier(.2, .8, .2, 1) !important;
}