a 100vh): si colgara del div, pasar el ratón por
cualquier punto vacío de la pantalla abriría el abanico de arcos. */
.ctaband__link:hover .ctaband__arc,
.ctaband__link:focus-visible .ctaband__arc {
transform: translateX(calc((3 - var(--pi)) * -90%));
opacity: calc(1 - var(--pi) * 0.2);
}
/* ─── 13b. CTA «Arrancamos» — mecánica real de hobro (dos óvalos + relleno
de intersección), decodificada de su .callBtn de producción, con tres
ideas propias encima de lo suyo:
1) Giro continuo. Hobro deja sus óvalos fijos a -17deg; aquí giran sin
parar (idea del dueño del proyecto, no está en hobro). Para que el
giro no descuadre el truco del relleno — que depende de que la
posición relativa entre ambos óvalos sea SIEMPRE la misma — la
rotación continua vive en un contenedor propio (.ellcta__group,
animation:ellcta-spin, 48s/vuelta) que envuelve a los DOS óvalos Y
al enlace. Cada óvalo, dentro del grupo, solo lleva su tilt estático
(-17deg, igual que hobro) + el translateY del hover — nunca la
rotación de grupo. Capas separadas: la rotación vive en el padre,
el desplazamiento de hover en cada hijo, así nunca compiten dos
transforms por el mismo elemento.
2) 10 destellos de 4 puntas repartidos alrededor del anillo de los
óvalos (antes 6, y esos 6 quedaban lejos/diminutos) — mismo path
que el grande de hobro (viewBox 40×39), con tamaños muy dispares
(de ~2.7rem a ~0.3rem, como los 40px/5px de hobro) para que un par
se lean claramente como destellos grandes y el resto como chispas
menores. Parpadeo yoyo escalonado, igual que antes.
3) El enlace («Arrancamos») vive DENTRO del grupo giratorio a
propósito — así su área de click nunca se despega del óvalo — pero
el texto (.ellcta__label) lleva su propia animación de giro en
sentido contrario y misma duración (ellcta-spin-reverse, 48s
linear), así que el giro del grupo y el contragiro del texto se
cancelan exactamente y el texto queda siempre horizontal. Solo el
texto se contrarrota: el
(su caja de click, invisible) sigue
girando con el grupo sin que importe, porque no tiene borde/relleno
propio visible.
El truco del relleno (::before de .ellcta__shape--bottom) es el mismo
de hobro: un óvalo idéntico relleno de tinta, oculto por el
overflow:hidden del padre salvo en la franja que comparte con el óvalo
de arriba (border-radius + overflow:hidden recortan al hijo a la forma
ovalada, no al rectángulo). La posición de ese óvalo relleno se deriva
así: top y bottom comparten el mismo tilt estático -17deg como PROPIO
transform (no heredado), así que ese -17deg es también, literalmente,
el transform que ve cualquier hijo de bottom — incluido su ::before.
El pseudo-elemento no necesita deshacer ni repetir el tilt: al ser
descendiente de bottom ya gira con él gratis. Solo necesita el mismo
translateY que separaría "top" de "bottom" en el sistema SIN tiltar
(el que usan top_hover/bottom_hover más abajo): Δ = top_hover −
bottom_hover = -30% − 30% = -60% (de la propia altura del óvalo). Por
eso el ::before lleva solo `translateY(-60%)`, sin rotate propio — un
rotate(17deg) adicional ahí sería redundante/incorrecto: el -17deg de
bottom ya se propaga a sus hijos sin que el pseudo tenga que repetirlo.
Usar % en vez de los px fijos que trae hobro (16px/-56px, con un ajuste
aparte por debajo de 1440px) es lo que permite saltarnos su breakpoint:
los % se reescalan solos con el ancho fluido de .ellcta — al reducir el
ancho máximo de 70rem a 34rem (tarea 3, más pequeño para compartir fila
con las 4 palabras) el -60% sigue siendo válido sin recalcular: es un
porcentaje de la propia altura del óvalo, no del ancho del bloque.
4) Núcleo y órbitas (arreglo de bug, capturas del dueño): al girar el
grupo, los óvalos cruzaban por encima de «Arrancamos» hacia 60-110°
y la palabra se leía tachada — hobro no lo sufre porque sus óvalos
no giran. Arreglo: .ellcta__link deja de ser el óvalo pequeño y pasa
a ser una moneda circular opaca (--coin, aspect-ratio 1) en el
centro, por encima de los óvalos (z-index); estos bajan a
opacity:.85 en reposo y pasan a leerse como órbitas alrededor del
núcleo. Como la moneda es un círculo, su propio giro es invisible:
nada vuelve a cruzar el texto. */
.ellcta-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(2rem, 6vw, 4.5rem);
padding-block: var(--section);
padding-inline: var(--gutter);
max-width: 1800px;
margin-inline: auto;
}
/* Las 4 fases del proceso, movidas aquí desde el statement (tarea 3): se
conserva la clase .statement__words (mismo aria-label) pero en columna
propia a la izquierda del CTA, con tamaño de titular kicker — recupera
presencia ahora que ya no comparte fila con los óvalos. La regla
genérica .statement__words (§7) sigue aportando el color de .t-cursive;
aquí se sobreescribe el layout (columna en vez de fila) y el tamaño. */
.ellcta-wrap .statement__words {
margin-top: 0;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
text-align: left;
font-size: clamp(2.1rem, 4.4vw, 3.6rem);
row-gap: clamp(0.3rem, 1.2vw, 0.75rem);
column-gap: 0;
}
.ellcta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
/* Reducido de clamp(20rem,90vw,70rem) — el CTA compartía fila con las
palabras y se comía la pantalla (1120×611px de máximo real). Medido
tras el cambio: a 1280px de viewport, 42vw ≈ 538px (dentro del
clamp) → alto ≈ 538/1.833 ≈ 293px; el conjunto con la columna de
palabras a la izquierda no supera ~630px de alto total, cómodo en
una pantalla de 800px. */
width: clamp(16rem, 42vw, 34rem);
aspect-ratio: 220 / 120;
isolation: isolate;
/* Diámetro de la moneda-núcleo (idea 4 arriba): % de la propia altura
del bloque, no del ancho — así es circular real vía aspect-ratio:1 +
height:var(--coin) en .ellcta__link, sin depender del ratio 220/120.
58%, no el 46% de partida: medido con Chrome headless + la fuente
real, «ARRANCAMOS» (uppercase por .t-mono) a font-size 20.8px/
letter-spacing .09em mide 143.5px de ancho — un 46% de los 293px de
alto a 1280px solo da 134.9px de diámetro, MENOS que el propio label
(se saldría del círculo). Con 58% el diámetro sube a 170px, ~13.3px
de aire a cada lado a 1280px. */
--coin: 58%;
}
/* ≤900px: la fila de dos columnas pasa a una sola (palabras arriba,
CTA debajo — mismo orden que en el HTML) y las palabras vuelven a
centrarse, a juego con el CTA centrado debajo. */
@media (max-width: 900px) {
.ellcta-wrap {
grid-template-columns: 1fr;
justify-items: center;
}
.ellcta-wrap .statement__words {
align-items: center;
text-align: center;
}
}
/* Destellos decorativos: mismo path (4 puntas, viewBox 40×39) que el
grande de hobro, repartidos en 10 tamaños/posiciones muy dispares
(de ~2.7rem a ~0.3rem — como los 40px/5px de hobro, dos-tres grandes
de verdad y el resto claramente menores) ciñendo el anillo que
dibujan los dos óvalos: pegados al trazo (top/bottom del óvalo
superior e inferior), alguno rozando por dentro (7/8, cerca del
centro donde se solapan ambos óvalos) y alguno justo fuera del borde
lateral (5/6, donde casi se tocan las puntas de ambos óvalos) — ya no
en las esquinas del bloque. Parpadeo yoyo (0→1 opacidad+escala, ida y
vuelta por animation-direction:alternate) con duraciones y delays
negativos escalonados para que nunca coincidan en fase — mismo patrón
que hobro (0.5/0.5/0.4/0.3s con arranques distintos). */
.ellcta__spark-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ellcta__spark {
position: absolute;
fill: var(--muted);
opacity: 0;
transform: scale(0);
transform-origin: 50% 50%;
animation: ellcta-spark-blink var(--spark-dur, 0.5s) ease-in-out infinite alternate;
animation-delay: var(--spark-delay, 0s);
pointer-events: none;
}
.ellcta__spark--1 { width: clamp(1.7rem, 3.2vw, 2.7rem); top: 6%; left: 20%; --spark-dur: 0.5s; --spark-delay: -0.1s; }
.ellcta__spark--2 { width: clamp(1.3rem, 2.5vw, 2.1rem); bottom: 8%; right: 18%; --spark-dur: 0.5s; --spark-delay: -0.35s; }
.ellcta__spark--3 { width: clamp(0.7rem, 1.3vw, 1.15rem); top: 18%; right: 9%; --spark-dur: 0.4s; --spark-delay: -0.2s; }
.ellcta__spark--4 { width: clamp(0.65rem, 1.2vw, 1.05rem); bottom: 16%; left: 7%; --spark-dur: 0.3s; --spark-delay: -0.05s; }
.ellcta__spark--5 { width: clamp(0.55rem, 1vw, 0.8rem); top: 46%; left: -2%; --spark-dur: 0.45s; --spark-delay: -0.28s; }
.ellcta__spark--6 { width: clamp(0.55rem, 1vw, 0.8rem); top: 52%; right: -2%; --spark-dur: 0.55s; --spark-delay: -0.15s; }
.ellcta__spark--7 { width: clamp(0.3rem, 0.55vw, 0.4rem); top: 38%; left: 33%; --spark-dur: 0.35s; --spark-delay: -0.22s; }
.ellcta__spark--8 { width: clamp(0.3rem, 0.55vw, 0.4rem); top: 58%; right: 31%; --spark-dur: 0.4s; --spark-delay: -0.08s; }
.ellcta__spark--9 { width: clamp(0.4rem, 0.75vw, 0.6rem); top: 3%; right: 40%; --spark-dur: 0.45s; --spark-delay: -0.32s; }
.ellcta__spark--10 { width: clamp(0.4rem, 0.75vw, 0.6rem); bottom: 4%; left: 44%; --spark-dur: 0.3s; --spark-delay: -0.18s; }
@keyframes ellcta-spark-blink {
from { opacity: 0; transform: scale(0); }
to { opacity: 1; transform: scale(1); }
}
/* Grupo giratorio: envuelve los dos óvalos y el enlace clicable — gira
como bloque único para que la geometría relativa entre ambos óvalos
(de la que depende el relleno) no cambie nunca. El enlace va DENTRO a
propósito: si se quedara fuera (fijo), al cabo de unos segundos de giro
su hit-box dejaría de coincidir con lo que se ve. */
.ellcta__group {
position: absolute;
inset: 0;
animation: ellcta-spin 48s linear infinite;
}
@keyframes ellcta-spin { to { transform: rotate(360deg); } }
.ellcta__shape {
position: absolute;
top: 50%; left: 50%;
width: 96%; height: 42%;
border: 1px solid var(--ink);
border-radius: var(--r-round);
pointer-events: none;
/* Órbitas (idea 4, cabecera): algo atenuadas en reposo para que el
núcleo domine la lectura; a plena opacidad en hover/focus. */
opacity: 0.85;
}
.ellcta__shape--top {
transform: translate(-50%, -50%) rotate(-17deg) translateY(-14%);
transition: transform 0.4s var(--ease-hobro) 0.3s, opacity 0.4s var(--ease-hobro) 0.3s;
}
.ellcta__shape--bottom {
overflow: hidden;
transform: translate(-50%, -50%) rotate(-17deg) translateY(9%);
transition: transform 0.4s var(--ease-hobro) 0.3s, opacity 0.4s var(--ease-hobro) 0.3s;
}
/* El relleno: ver fórmula completa en el comentario de cabecera. */
.ellcta__shape--bottom::before {
content: "";
position: absolute;
inset: 0;
border-radius: var(--r-round);
background: var(--ink);
opacity: 0;
transform: translateY(-60%);
transition: opacity 0.2s ease-in-out;
}
/* Coreografía de entrada: los óvalos se separan en 0.4s (sin retardo);
a los 300ms de esa separación arranca el relleno de la intersección
(delay .3s, entra en .3s) — por eso primero se ven separarse y solo
entonces aparece la tinta. */
.ellcta:has(.ellcta__link:hover) .ellcta__shape--top,
.ellcta:focus-within .ellcta__shape--top {
transform: translate(-50%, -50%) rotate(-17deg) translateY(-30%);
opacity: 1;
transition: transform 0.4s var(--ease-hobro), opacity 0.4s var(--ease-hobro);
}
.ellcta:has(.ellcta__link:hover) .ellcta__shape--bottom,
.ellcta:focus-within .ellcta__shape--bottom {
transform: translate(-50%, -50%) rotate(-17deg) translateY(30%);
opacity: 1;
transition: transform 0.4s var(--ease-hobro), opacity 0.4s var(--ease-hobro);
}
.ellcta:has(.ellcta__link:hover) .ellcta__shape--bottom::before,
.ellcta:focus-within .ellcta__shape--bottom::before {
opacity: 1;
transition: opacity 0.3s ease-in-out 0.3s;
}
/* Moneda-núcleo (idea 4, cabecera): círculo real vía aspect-ratio:1 +
height:var(--coin) (width:auto la deriva) — % de la propia altura del
bloque, no del ancho, así el círculo no se deforma al variar 220/120.
Sigue siendo la única área clicable (los dos .ellcta__shape llevan
pointer-events:none) y ahora también pinta por encima de ambos óvalos
(z-index:1) para taparlos donde cruzan por el centro. */
.ellcta__link {
position: absolute;
top: 50%; left: 50%;
height: var(--coin);
aspect-ratio: 1;
width: auto;
transform: translate(-50%, -50%);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: var(--canvas);
border: 1px solid var(--ink);
border-radius: var(--r-round);
transition: background-color 0.3s ease-in-out 0.3s, transform 0.4s var(--ease-hobro), border-color 0.3s ease-in-out 0.3s;
}
/* Contragiro del texto (tarea 1): .ellcta__link vive dentro de
.ellcta__group a propósito y gira con él (su hit-box de click nunca se
despega del óvalo), pero .ellcta__label es quien realmente se ve, y
lleva su propia animación en sentido contrario, misma duración y sin
delay (ellcta-spin-reverse, 48s linear — idénticos a ellcta-spin) para
que ambos giros arranquen en fase y se cancelen exactamente en todo
momento: +360deg del grupo en 48s + -360deg del texto en 48s = 0deg
netos, el texto queda siempre horizontal. */
.ellcta__label {
display: inline-block;
color: var(--ink);
font-size: clamp(0.85rem, 1.8vw, 1.3rem);
letter-spacing: 0.09em;
transition: color 0.4s ease-in-out 0.3s;
animation: ellcta-spin-reverse 48s linear infinite;
}
@keyframes ellcta-spin-reverse { to { transform: rotate(-360deg); } }
.ellcta:has(.ellcta__link:hover) .ellcta__label,
.ellcta:focus-within .ellcta__label {
color: var(--on-ink);
transition: color 0.3s ease-in-out;
}
/* La moneda invierte igual que el relleno de los óvalos: fondo e-ink,
borde a juego, y crece un pelín (scale 1.08) para reforzar el foco —
mismos selectores :has(hover)/:focus-within que ya usa el resto del
componente. */
.ellcta:has(.ellcta__link:hover) .ellcta__link,
.ellcta:focus-within .ellcta__link {
background: var(--ink);
border-color: var(--ink);
transform: translate(-50%, -50%) scale(1.08);
}
/* Táctil: no hay hover, así que el relleno se deja visible por defecto —
se lee como botón sin necesidad de pasar el dedo por encima. La moneda
nace ya invertida por el mismo motivo. */
@media (hover: none) {
.ellcta__shape--top { transform: translate(-50%, -50%) rotate(-17deg) translateY(-30%); opacity: 1; }
.ellcta__shape--bottom { transform: translate(-50%, -50%) rotate(-17deg) translateY(30%); opacity: 1; }
.ellcta__shape--bottom::before { opacity: 1; }
.ellcta__label { color: var(--on-ink); }
.ellcta__link { background: var(--ink); border-color: var(--ink); }
}
/* Ambos CTA siguen siendo enlaces claros y pulsables: con
prefers-reduced-motion se para TODO el movimiento continuo (giro de
.ellcta__group + parpadeo de destellos, regla dura no negociable) y el
hover pasa a ser un cambio directo, sin coreografía de transition-delay. */
@media (prefers-reduced-motion: reduce) {
.ctaband__arc { transition: none; transition-delay: 0s; }
/* Sin caída/entrada letra a letra: initCtaParens ya no arranca el
intervalo con reduced-motion (queda "Hablamos" fija), esto es
cinturón-y-tirantes por si algo más llegara a tocar las clases. */
.ctaband__ch { transition: none; }
.ellcta__group { animation: none; }
.ellcta__label { animation: none; }
.ellcta__spark { animation: none; opacity: 0.55; transform: scale(1); }
.ellcta__shape,
.ellcta__shape--bottom::before,
.ellcta__label,
.ellcta__link { transition: none !important; }
}
/* Moneda-núcleo en el rango móvil (≤900px, colocado aquí a propósito: DEBE
ir después de la definición base de .ellcta__label más arriba — misma
especificidad de clase simple, así que si esta regla fuera anterior en
el archivo la base la pisaría igualmente dentro de la media query).
El bloque entero se achica más rápido de lo que puede achicarse el
label (su clamp tiene suelo — 0.85rem, o 0.62rem bajo el override de
≤640px del bloque móvil — mientras .ellcta ya toca su ancho mínimo de
16rem). Medido con Chrome headless: en la banda 523-640px de ancho de
viewport (label a su techo de 13.6px, .ellcta ya en su suelo de
256×139.6px) el label mide 89.8px con letter-spacing .06em — el 58% de
escritorio se quedaría en 81px de diámetro, MENOS que el propio label.
68% da 95px, ~14px de aire a cada lado ahí; a 390px (font-size aún más
reducido por el override de ≤640px, 10.15px) el label mide 70px y el
aire sube a ~12.5px. */
@media (max-width: 900px) {
.ellcta { --coin: 68%; }
.ellcta__label { letter-spacing: 0.06em; }
}
/* ─── 14. Casos — destacado + pila ───────────────────────────────────────── */
.fresh { padding-block: var(--section) 0; }
.stack { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section); }
.stack__filters { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; color: var(--muted); }
.stack__filters b { color: var(--ink); font-weight: 500; }
.stack__list { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 3rem); }
.case-card {
position: sticky;
top: calc(var(--nav-h) + 1rem);
border-radius: var(--r-card);
overflow: clip;
background: var(--ink); color: var(--on-ink);
aspect-ratio: 16 / 8.5;
min-height: 24rem;
display: flex; flex-direction: column; justify-content: space-between;
isolation: isolate;
box-shadow: var(--shadow-pop);
}
.case-card__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: -1; transition: transform 1.2s var(--ease-out); }
.case-card:hover .case-card__media { transform: scale(1.04); }
.case-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent 35%, transparent 60%, rgba(0, 0, 0, 0.55)); z-index: -1; }
.case-card__top { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; }
.case-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 1.5rem; }
.case-card__name { font-size: clamp(2rem, 4.6vw, 4.4rem); }
.case-card__desc { max-width: 34ch; color: var(--hairline); font-size: var(--fs-mono); }
.case-card__visit {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase;
border: 1px solid var(--on-ink); border-radius: var(--r-chip); padding: 0.7em 1.4em;
transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.case-card__visit:hover { background: var(--neon); color: var(--ink); border-color: var(--neon); }
@media (max-width: 800px) {
.case-card { aspect-ratio: auto; min-height: 70svh; position: relative; top: 0; }
.case-card__bottom { flex-direction: column; align-items: flex-start; }
}
/* ─── 15. Sección negra (aims): por qué IA + proceso ─────────────────────── */
/* Padding inferior recortado a propósito: la .ctaband va justo detrás, mismo
--ink sin borde/sombra entre medias — un solo tramo oscuro continuo.
(Actualización: desde que .ctaband pasó a 100vh con el contenido
centrado, ya no hace falta que este padding-bottom "cuadre" con el
padding-top de .ctaband — ese ya no existe como tal, el aire de encima
del CTA es simplemente el resto del viewport. La continuidad de tramo
oscuro la da solo compartir --ink y no tener borde/margen entre medias;
este recorte se mantiene para no duplicar respiro entre la nota del
proceso y el borde superior de la banda.) */
.aims { padding-block: var(--section) clamp(3rem, 7vw, 5.5rem); }
.aims__statement { font-size: var(--fs-title); max-width: 20ch; color: var(--on-ink); }
.aims__statement .t-cursive { color: var(--neon); }
.aims__grid {
margin-top: clamp(3rem, 7vw, 5.5rem);
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
border-top: 1px solid var(--hairline-dark);
padding-top: 2.5rem;
}
.aims__cell-label { color: var(--hairline); margin-bottom: 0.8rem; }
.aims__cell-old { color: var(--muted); text-decoration: line-through; }
.aims__cell-new { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1; margin-top: 0.4rem; }
.aims__cell-new em { font-style: normal; color: var(--neon); }
.aims__note { margin-top: 2rem; color: var(--muted); }
.aims__note a { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) {
.aims__grid { grid-template-columns: 1fr; }
}
/* ─── 16. Planes ─────────────────────────────────────────────────────────── */
.tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.tier {
border: 1px solid var(--hairline);
border-radius: var(--r-card);
padding: clamp(1.5rem, 2.5vw, 2.25rem);
display: flex; flex-direction: column; gap: 1.1rem;
position: relative;
transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); }
.tier--featured { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tier__badge {
position: absolute; top: -0.9rem; left: 1.5rem;
background: var(--neon); color: var(--ink);
font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 500; text-transform: uppercase;
border-radius: var(--r-chip); padding: 0.4em 1em;
}
.tier__name { color: var(--muted); }
.tier--featured .tier__name { color: var(--hairline); }
.tier__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 4.5vw, 4.2rem); line-height: 0.9; text-transform: uppercase; letter-spacing: -0.01em; }
.tier__cycle { color: var(--muted); margin-top: -0.4rem; }
.tier__desc { font-size: 0.95rem; color: var(--muted); }
.tier--featured .tier__desc { color: var(--hairline); }
.tier__list { display: flex; flex-direction: column; flex: 1; font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; letter-spacing: 0.01em; }
.tier__list li { display: flex; gap: 0.6rem; align-items: flex-start; padding-block: 0.45rem; border-bottom: 1px solid var(--hairline); }
.tier--featured .tier__list li { border-color: var(--hairline-dark); }
.tier__list li::before { content: "→"; color: var(--neon); }
.tier--featured .tier__list li::before { color: var(--neon); }
.tiers__note { margin-top: 2.5rem; color: var(--muted); max-width: 62ch; }
.tiers__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .tiers__grid { grid-template-columns: 1fr; } }
/* Comparativa */
.compare__wrap { margin-top: clamp(2.5rem, 5vw, 4rem); overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-media); }
.compare__table { min-width: 40rem; font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; }
.compare__table th, .compare__table td { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--hairline); text-align: left; }
.compare__table thead th { background: var(--ink); color: var(--on-ink); font-weight: 500; }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__table tbody th { font-weight: 500; }
.compare__yes { color: var(--ink); background: var(--neon); border-radius: var(--r-round); width: 1.3rem; height: 1.3rem; display: inline-grid; place-items: center; font-size: 0.7rem; }
.compare__no { color: var(--hairline); }
.choose { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; }
.choose__line { font-size: var(--fs-list); text-transform: uppercase; font-weight: 500; letter-spacing: -0.015em; color: var(--muted); padding-block: 0.9rem; border-top: 1px solid var(--hairline); }
.choose__line:last-child { border-bottom: 1px solid var(--hairline); }
.choose__line strong { color: var(--ink); font-weight: 500; background: var(--sage); padding: 0.05em 0.3em; border-radius: var(--r-sm); }
/* ─── 17. Mantenimiento ──────────────────────────────────────────────────── */
.maint__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; align-items: stretch; }
.maint__card { border: 1px solid var(--hairline); border-radius: var(--r-card); padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; gap: 1.1rem; position: relative; }
.maint__card--pro { background: var(--sage); border-color: var(--sage); }
.maint__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 4.5vw, 4.2rem); line-height: 0.9; letter-spacing: -0.01em; }
.maint__price span { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; color: var(--muted); }
.maint__iva { color: var(--muted); margin-top: -0.5rem; }
.maint__card ul { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; }
.maint__card li { display: flex; gap: 0.6rem; padding-block: 0.45rem; border-bottom: 1px solid var(--hairline); }
.maint__card--pro li { border-color: rgba(0, 0, 0, 0.15); }
.maint__card li::before { content: "→"; color: var(--ink); }
.maint__argument { margin-top: 2.5rem; font-size: var(--fs-list); text-transform: uppercase; font-weight: 500; letter-spacing: -0.015em; max-width: 52ch; }
@media (max-width: 800px) { .maint__grid { grid-template-columns: 1fr; } }
/* ─── 18. Partners (sectores + integraciones) ────────────────────────────── */
.partners__cats { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; color: var(--muted); }
.partners__cats b { color: var(--ink); font-weight: 500; }
.partners__list { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.partners__item { transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.partners__item:hover { color: var(--muted); transform: translateX(0.25rem); }
.partners__sub { margin-top: 0; } /* (2026-09-08) ya no hay sección Sectores encima: sin margen extra */
.integr__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.integr__chip {
display: inline-flex; align-items: center; gap: 0.6rem;
font-family: var(--font-mono); font-size: var(--fs-mono-sm); font-weight: 500; text-transform: uppercase;
border: 1px solid var(--hairline); border-radius: var(--r-chip);
padding: 0.6em 1.2em;
transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.integr__chip:hover { border-color: var(--ink); transform: translateY(-2px); }
.integr__chip svg { width: 1.25em; height: 1.25em; }
.integr__badge {
width: 1.35em; height: 1.35em;
display: inline-grid; place-items: center; border-radius: var(--r-sm);
font-weight: 700; font-size: 0.72em;
background: var(--badge-bg, var(--sage)); color: var(--badge-ink, var(--ink));
}
/* ─── 19. Voces (patrón team) ────────────────────────────────────────────── */
.voices__index { display: flex; gap: 0.75rem; flex-wrap: wrap; color: var(--muted); margin-bottom: 2.5rem; }
.voices__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.voice {
border: 1px solid var(--hairline); border-radius: var(--r-card);
padding: clamp(1.5rem, 2.5vw, 2.25rem);
display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
transition: background var(--dur-1) var(--ease-out);
}
.voice:hover { background: var(--sage); border-color: var(--sage); }
.voice:nth-child(2):hover { background: var(--pink); border-color: var(--pink); }
.voice:nth-child(3):hover { background: var(--neon); border-color: var(--neon); }
.voice__quote { font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.45; }
.voice__quote::before { content: "“ "; font-family: var(--font-cursive); font-style: italic; }
.voice__author { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.voice__who { display: flex; flex-direction: column; }
.voice__who strong { font-weight: 500; font-size: 1.1rem; }
.voice__who span { color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; }
.voice__num { color: var(--muted); }
@media (max-width: 800px) { .voices__grid { grid-template-columns: 1fr; } }
/* ─── 20. FAQ ────────────────────────────────────────────────────────────── */
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
width: 100%; display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.25rem; align-items: center;
padding-block: 1.4rem; text-align: left;
transition: color var(--dur-1) var(--ease-out);
}
.faq__q:hover { color: var(--muted); }
.faq__q-num { color: var(--muted); }
.faq__q-text { font-size: var(--fs-list); text-transform: uppercase; font-weight: 500; letter-spacing: -0.015em; }
.faq__plus { width: 2.2rem; height: 2.2rem; border: 1px solid var(--hairline); border-radius: var(--r-round); display: grid; place-items: center; }
.faq__plus svg { width: 0.85rem; height: 0.85rem; transition: transform var(--dur-1) var(--ease-out); }
.faq__q[aria-expanded="true"] .faq__plus { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.faq__q[aria-expanded="true"] .faq__plus svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
.faq__a[aria-hidden="false"] { grid-template-rows: 1fr; }
.faq__a-in { overflow: hidden; min-height: 0; }
.faq__a p { padding: 0 0 1.5rem 5.25rem; max-width: 62ch; color: var(--muted); }
@media (max-width: 800px) {
.faq__q { grid-template-columns: 1fr auto; }
.faq__q-num { display: none; }
.faq__a p { padding-left: 0; }
}
/* ─── 21. Contacto — bento de tarjetas (patrón hobro/contact) ────────────── */
/* Layout: columna estrecha de atención directa + columna ancha que contiene
eyebrow, título Y formulario. El título va DENTRO de la columna derecha
(alineado con las tarjetas, no con la dirección) — por eso baja de
--fs-display: ya no dispone del ancho de página. */
.contact__layout {
display: grid; grid-template-columns: minmax(13rem, 0.42fr) 2fr;
gap: clamp(2.5rem, 6vw, 6rem);
align-items: start;
}
.contact__main { min-width: 0; }
.contact__title { font-size: clamp(2.4rem, 4.6vw, 5.2rem); }
.contact__title .t-cursive { color: var(--muted); }
.contact__direct { display: flex; flex-direction: column; gap: 1.5rem; }
.contact__dot { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--ink); }
.contact__block { display: flex; flex-direction: column; gap: 0.4rem; }
.contact__block-label { color: var(--muted); }
.contact__link { font-weight: 500; transition: color var(--dur-1) var(--ease-out); }
.contact__link:hover { color: var(--muted); }
/* Bento: tres columnas en flex vertical, NO grid-row: span — los spans se
rompen en cuanto se añade o se quita un campo. La tarjeta de la columna
central lleva flex:1 y estira hasta igualar la columna más alta: eso es lo
que da el ritmo del bento en la referencia. */
.cform { margin-top: clamp(2rem, 4vw, 3.5rem); }
.cform__bento {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(0.75rem, 1.2vw, 1rem);
align-items: stretch;
}
.cform__col { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.2vw, 1rem); min-width: 0; }
.cbox {
display: flex; flex-direction: column; gap: 0.5rem;
border: 1px solid var(--hairline); border-radius: var(--r-card);
padding: clamp(1.1rem, 1.8vw, 1.5rem);
transition: border-color var(--dur-1) var(--ease-out);
}
.cbox:focus-within { border-color: var(--ink); }
.cbox--grow { flex: 1; }
.cbox .cform__label:not(:first-child) { margin-top: 0.9rem; }
.cform__label { color: var(--muted); }
.cform__label b { color: var(--ink); font-weight: 500; }
.cform .input, .cform .select, .cform .textarea {
width: 100%; background: transparent; color: var(--ink);
border: 0; border-radius: 0; padding: 0;
font-family: var(--font-body); font-weight: 500;
font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.35;
}
.cform .input::placeholder, .cform .textarea::placeholder { color: var(--hairline); opacity: 1; }
.cform .input:focus, .cform .select:focus, .cform .textarea:focus { outline: none; }
.cform .textarea { flex: 1; resize: none; min-height: 9rem; }
.cform .select { appearance: none; cursor: pointer; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Adjunto de brief */
.cfile {
display: flex; align-items: center; gap: 0.6rem;
margin-top: 0.35rem; cursor: pointer; color: var(--muted);
transition: color var(--dur-1) var(--ease-out);
}
.cfile:hover, .cfile.is-set { color: var(--ink); }
.cfile:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }
.cfile__icon { width: 1.35rem; height: 1.35rem; flex: none; }
.cfile__text { font-size: var(--fs-mono-sm); text-transform: uppercase; line-height: 1.4; }
.cfile__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cfile__clear {
align-self: flex-start; margin-top: 0.5rem;
font-size: var(--fs-mono-sm); color: var(--muted); text-decoration: underline;
}
.cfile__clear:hover { color: var(--ink); }
.cfile__clear[hidden] { display: none; }
/* Consentimiento de privacidad */
.ccheck { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; padding: 0.25rem; }
.ccheck__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ccheck__box {
flex: none; width: 22px; height: 22px;
border: 1px solid var(--hairline); border-radius: var(--r-sm);
display: grid; place-items: center; color: transparent;
transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.ccheck__box svg { width: 13px; height: 13px; }
.ccheck:hover .ccheck__box { border-color: var(--ink); }
.ccheck__input:checked + .ccheck__box { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ccheck__input:focus-visible + .ccheck__box { outline: 2px solid var(--ink); outline-offset: 3px; }
.ccheck__text { color: var(--muted); font-size: var(--fs-mono-sm); line-height: 1.5; }
.ccheck__text a { color: var(--ink); text-decoration: underline; }
/* Banda de envío a sangre — vive FUERA de .container, así no hacen falta ni
width:100vw ni márgenes negativos. El botón está fuera del