/* GuardaTutti UI kit styles */
@import url("colors_and_type.css");
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg-page);
color: var(--fg-1);
font-family: var(--font-sans);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
/* ─────────────────────────────────────────────────────────────
Polish base — reset + a11y + mobile UX
(Sprint post-auditoría — mayo 2026. Ver
uploads/27_auditoria_polish_fixes_unificado.md)
───────────────────────────────────────────────────────────── */
/* A2 · Sin flash gris al tap en mobile. Aplicado global para que cualquier
elemento interactivo se sienta premium tier. */
* { -webkit-tap-highlight-color: transparent; }
/* B2 · Anti tap-delay 300ms en mobile. `manipulation` deshabilita
double-tap-to-zoom sobre estos targets — gain: respuesta instantánea. */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.js-lightbox {
touch-action: manipulation;
}
/* C1 · Focus visible — outline solo cuando se navega con teclado.
Mouse/touch users no ven outline molesto. */
*:focus { outline: none; }
*:focus-visible {
outline: 2px solid var(--gt-green);
outline-offset: 3px;
border-radius: 2px;
}
/* Sobre fondos verdes (CTAs primary), el outline blanco se nota más. */
.btn-primary:focus-visible,
.gt-btn--primary:focus-visible,
button.primary:focus-visible {
outline-color: var(--gt-ink);
outline-offset: 4px;
}
/* C3 · Helpers de tamaño de texto cuando hace falta achicar. La base de
ya está en 16px (colors_and_type.css). Mobile mantiene 16px para
evitar el auto-zoom de iOS Safari sobre cercanos. */
.text-sm { font-size: 14px; line-height: 1.5; }
.text-xs { font-size: 12px; line-height: 1.45; }
/* C2/C4 · sr-only — label visualmente oculto pero leído por screen readers.
Patrón estándar WCAG (label inline + input sin label visible). */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* C4 · Skip link — primer elemento focuseable de la página para teclado /
screen readers. Invisible hasta que recibe focus. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 9999;
font-family: var(--font-sans);
font-weight: 600;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
padding: 12px 20px;
background: var(--gt-green);
color: #fff;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* B1 · Touch targets ≥ 44×44 px en mobile. Aplicado a interactivos
chicos que la auditoría detectó por debajo del threshold:
- carrito del header (40×40)
- swatches/chips de color del Product Picker (.gt-chip ≈ 41 alto)
- chips de tamaño S/M/L (.gt-sizechip ≈ 43 alto)
- link a WhatsApp (CTA flotante / inline)
`:where()` con specificity 0 — no compite con reglas del componente
que pongan padding propio. `min-height` actúa como piso. */
@media (max-width: 768px) {
:where(
.gt-header__cart,
.gt-cart-trigger,
[aria-label*="carrito" i],
.gt-finish__btn,
.gt-finish-picker__swatch,
.gt-color-swatch,
.gt-size__btn,
.gt-qty button,
.gt-product-picker button,
a[href*="wa.me"],
.gt-chip,
.gt-sizechip
) {
min-width: 44px;
min-height: 44px;
}
/* BrandMenu del header: el visual sigue siendo 36px (logo 28 + 8 padding)
para no engordar la barra. Expandimos el área táctil a 44×44 con un
::before invisible — WCAG 2.5.5 mide hit area, no visible size.
Sólo en mobile (en desktop el target ya es opcional). */
.gt-brandmenu__trigger { position: relative; }
.gt-brandmenu__trigger::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
min-width: 44px;
height: 44px;
transform: translate(-50%, -50%);
/* sin background — sólo extiende el hit area. */
}
}
/* D2 · Section paddings consistentes. Baseline aplicado con :where() para
especificidad cero — cualquier regla específica del componente gana,
así no rompemos paddings ya elegidos a propósito (ej: bandas tight). */
:where(section.gt-section, .gt-section) {
padding-block: 64px;
}
@media (max-width: 768px) {
:where(section.gt-section, .gt-section) {
padding-block: 48px;
}
}
/* D1 · Hover lift premium para cards interactivas. Las cards ya usan
var(--shadow-1) (multicapa post-auditoría); este bloque añade el lift
en hover sin tocar cada componente. */
a.gt-card:hover,
.gt-card.is-interactive:hover,
.gt-sobre__card.is-link:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2);
}
:where(.gt-card, .gt-sobre__card, .gt-trustband__card, .gt-testi__card) {
transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out);
}
/* Reduced motion — desactivamos el lift y transitions polish. */
@media (prefers-reduced-motion: reduce) {
:where(.gt-card, .gt-sobre__card, .gt-trustband__card, .gt-testi__card) {
transition: none !important;
}
a.gt-card:hover,
.gt-card.is-interactive:hover,
.gt-sobre__card.is-link:hover {
transform: none !important;
}
}
.gt-app {
max-width: 1120px;
margin: 0 auto;
padding-bottom: 110px; /* sticky bar */
}
/* ── Header ─────────────────────────────────────────────── */
.gt-header {
position: sticky; top: 0; z-index: 30;
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--gt-line);
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; height: 56px;
}
.gt-header__brand img { height: 26px; }
.gt-header__nav { display: none; gap: 24px; }
.gt-header__nav a { font-weight: 500; font-size: 14px; color: var(--fg-2); }
.gt-header__nav a:hover { color: var(--gt-ink); }
.gt-header__cart {
position: relative; width: 40px; height: 40px; border-radius: 999px;
border: 0; background: var(--gt-green-50); color: var(--gt-green-700);
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.gt-header__cart i { width: 18px; height: 18px; }
.gt-badge {
position: absolute; top: -2px; right: -2px;
background: var(--gt-green); color: #fff; font-size: 10px; font-weight: 700;
border-radius: 999px; padding: 2px 6px;
}
@media (min-width: 900px) {
.gt-header { height: 80px; padding: 14px 32px; }
.gt-header__brand img { height: 32px; }
.gt-header__nav { display: flex; }
}
/* ── Hero ───────────────────────────────────────────────── */
.gt-hero {
background: var(--bg-wash);
display: flex; flex-direction: column;
}
.gt-hero__photo {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.gt-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.gt-hero__tag {
position: absolute; top: 14px; left: 14px;
background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
padding: 6px 12px; border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--gt-green-700);
}
.gt-hero__copy { padding: 24px 16px 32px; }
.gt-hero__title {
font-size: 36px; line-height: 1.05; letter-spacing: -.02em;
margin: 8px 0 12px; font-weight: 700;}
.gt-hero .lead { margin: 0 0 20px; }
.gt-cta-lg { padding: 16px 24px; font-size: 17px; width: 100%; justify-content: center; }
.gt-cta-lg i { width: 18px; height: 18px; }
.gt-hero__note { margin-top: 12px; text-align: center; }
/* Sprint 33.20 · QW-C Hormozi Perceived Likelihood — testimonio inline
al fold entre TrustRow y BonosStack. Carolina F. (Nordelta · Familia+pileta)
matchea avatar premium AMBA target. Mini card clickeable que linkea
a la sección completa de testimonios. */
.gt-inline-testi {
display: block;
margin: 28px 16px;
padding: 20px 22px;
background: #fff;
border: 1px solid var(--gt-line, #e8e8e8);
border-radius: 16px;
text-decoration: none;
color: inherit;
box-shadow: 0 2px 12px rgba(16, 24, 30, 0.04);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
.gt-inline-testi:hover {
border-color: var(--gt-green-200, #A8DCC4);
transform: translateY(-1px);
box-shadow: 0 4px 18px rgba(16, 24, 30, 0.06);
}
.gt-inline-testi__quote {
display: flex; gap: 12px; align-items: flex-start;
margin-bottom: 14px;
}
.gt-inline-testi__quote :where(i, svg) {
width: 20px; height: 20px;
color: var(--gt-green-700, #2A7A4B);
flex-shrink: 0;
margin-top: 2px;
}
.gt-inline-testi__quote p {
margin: 0;
font-size: 16px;
font-style: italic;
color: var(--gt-ink, #10181E);
line-height: 1.45;
font-weight: 500;
}
.gt-inline-testi__quote strong {
color: var(--gt-green-800, #1F5D39);
font-style: normal;
font-weight: 700;
}
.gt-inline-testi__author {
display: flex; align-items: center; gap: 12px;
padding-top: 12px;
border-top: 1px solid var(--gt-line-2, #f0f0f0);
}
.gt-inline-testi__author img {
width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
flex-shrink: 0;
}
.gt-inline-testi__meta { flex: 1; min-width: 0; }
.gt-inline-testi__name {
display: flex; align-items: center; gap: 6px;
font-weight: 700; font-size: 14px; color: var(--gt-ink);
line-height: 1.2;
}
.gt-inline-testi__verified :where(i, svg) {
width: 14px; height: 14px;
color: var(--gt-green-700, #2A7A4B);
}
.gt-inline-testi__where {
font-size: 12px; color: var(--fg-3, #6b6b6b);
margin-top: 2px;
}
.gt-inline-testi__stars {
display: flex; gap: 1px;
flex-shrink: 0;
}
.gt-inline-testi__stars :where(i, svg) {
width: 14px; height: 14px;
color: #F5A623;
fill: #F5A623;
}
@media (max-width: 559px) {
.gt-inline-testi { padding: 16px 18px; }
.gt-inline-testi__quote p { font-size: 15px; }
}
/* Sprint 33.19B · QW Voss accusation audit — labeling pre-emptivo arriba
del PriceBlock. Estilo "aside" quote para que no compita con el precio
ni con el CTA, pero esté visible cuando el cliente evalúa el costo. */
.gt-hero__voss-frame {
margin: 14px 0 4px;
padding-left: 12px;
border-left: 2px solid var(--gt-green-200, #A8DCC4);
font-size: 13.5px;
line-height: 1.55;
color: rgba(16, 24, 30, 0.72);
}
.gt-hero__voss-frame em {
font-style: italic;
color: var(--gt-ink, #10181E);
font-weight: 500;
}
/* Sprint 33.15.2 · QW-A2 Hormozi Risk Reversal — banda fina al nivel del
precio, entre PriceBlock y CTA. Premium subtle, no compite con el CTA
pero está visible cuando el cliente evalúa el precio (momento de dudar). */
.gt-hero__guarantee-band {
display: flex; align-items: center; gap: 10px;
width: 100%;
margin: 14px 0 10px;
padding: 12px 16px;
background: var(--gt-green-soft, #F4FBF7);
border: 1px solid var(--gt-green-100, #D2ECDF);
border-radius: 12px;
color: var(--gt-ink, #10181E);
font-size: 13.5px;
text-decoration: none;
transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.gt-hero__guarantee-band:hover {
background: #EDF8F2;
border-color: var(--gt-green-200, #A8DCC4);
transform: translateY(-1px);
}
.gt-hero__guarantee-icon {
width: 20px; height: 20px;
color: var(--gt-green-700, #2A7A4B);
flex-shrink: 0;
}
.gt-hero__guarantee-text {
flex: 1;
line-height: 1.4;
}
.gt-hero__guarantee-text strong {
color: var(--gt-green-800, #1F5D39);
font-weight: 700;
}
.gt-hero__guarantee-arrow {
width: 16px; height: 16px;
color: var(--gt-green-700, #2A7A4B);
flex-shrink: 0;
transition: transform .2s ease;
}
.gt-hero__guarantee-band:hover .gt-hero__guarantee-arrow {
transform: translateX(2px);
}
/* Lucide SVG fallback (sobrescribe los attrs width/height de los SVGs
que reemplaza MutationObserver). */
.gt-hero__guarantee-band :where(i, svg) {
width: 20px; height: 20px;
}
.gt-hero__guarantee-band .gt-hero__guarantee-arrow:is(i, svg) {
width: 16px; height: 16px;
}
/* Prueba social pre-precio: estrellas + reseñas + ventas del último mes.
Vive entre el eyebrow (categoría) y el H1. Tipografía pequeña, sin gradientes,
sin emoji de fuego (lee a producto barato). El punto verde con pulse es el único
acento visual: dice "negocio activo" sin gritar. */
.gt-hero__social {
display: flex; flex-wrap: wrap; align-items: center;
gap: 8px 10px;
margin: 6px 0 14px;
font-size: 13px; color: var(--fg-2);
line-height: 1.2;
}
.gt-hero__stars { display: inline-flex; gap: 1px; }
.gt-hero__star { width: 14px; height: 14px; color: #d97706; fill: #d97706; }
.gt-hero__star.is-on { color: #f59e0b; }
.gt-hero__rating { font-size: 13px; color: var(--gt-ink); }
.gt-hero__rating strong { font-weight: 700; }
.gt-hero__sep { color: var(--gt-mute); }
/* Sprint 33.2 · Quick Win Hormozi #3 — info inline del cohort en la línea
de delivery del Hero. Patrón premium artesanal made-to-order (estilo
Made.com / Floyd / Crate&Barrel custom): info real del producto que
genera urgencia sin parecer venta. Ícono Lucide calendar + nombre del
lote + days_left. Auto-actualizado por src/lib/cohort.js. */
.gt-hero__cohort-info {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--gt-ink, #10181E);
font-weight: 600;
}
.gt-hero__cohort-icon {
width: 13px;
height: 13px;
flex-shrink: 0;
/* Pequeño lift visual para alinear con el baseline del texto */
transform: translateY(-0.5px);
}
/* Sprint 33.1 · Reemplazo de .gt-hero__live (era "18 vendidos el último mes")
por .gt-hero__scarcity ("🔥 Producción artesanal limitada · 16 galpones por mes").
Razón: scarcity defensible (cap real de producción artesanal) > momentum.
Color coral coherente con el anchor del Sprint 33 y el sombreado del CTA. */
.gt-hero__scarcity {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--fg-2);
font-weight: 500;
}
/* Sprint 33.2 · Lucide sparkles icon premium (reemplaza emoji 🔥).
Color verde brand oscuro coherente con el anchor del Sprint 33.
Pequeño "lift" visual para alinear con el baseline del texto.
Secondary (la copia en la 2da clause) solo se muestra en mobile cuando
el badge wrappea — sin el sparkles, la 2da línea quedaría suelta sin
prefijo visual. */
.gt-hero__scarcity-licon {
width: 13px; height: 13px;
flex-shrink: 0;
color: #1E5C3E;
transform: translateY(-0.5px);
}
.gt-hero__scarcity-licon--secondary {
display: none;
}
@media (max-width: 768px) {
.gt-hero__scarcity-licon--secondary {
display: inline-block;
margin-right: 6px;
}
}
.gt-hero__scarcity-icon {
font-size: 14px;
line-height: 1;
/* Pequeño "lift" visual del emoji para que se alinee bien con el texto */
transform: translateY(-1px);
}
/* Sprint 33.1 · Las clauses NO se pueden romper internamente (wrap como
unidad). En desktop entran inline separadas por `·`. En mobile, donde
la línea es angosta y el texto se parte fea, escondemos el `·` y forzamos
que la segunda clause caiga en línea propia debajo de la primera. */
.gt-hero__scarcity-clause {
white-space: nowrap;
}
/* Sprint 33.1 · 🔥 secundario para la 2da línea — solo aparece en mobile.
Desktop usa el separador `·` y el 🔥 secundario queda oculto. */
.gt-hero__scarcity-icon-secondary {
display: none;
}
@media (max-width: 768px) {
.gt-hero__scarcity-sep { display: none; }
.gt-hero__scarcity-clause:last-of-type {
display: block;
width: 100%;
/* Sin padding-left — el 🔥 secundario hace de prefijo visual de la línea. */
}
.gt-hero__scarcity-icon-secondary {
display: inline-block;
font-size: 14px;
line-height: 1;
transform: translateY(-1px);
margin-right: 6px;
}
/* La social proof line ya es flex-wrap, así que la 2da clause como
block fuerza un nuevo "row" dentro del flex. */
.gt-hero__scarcity { flex-wrap: wrap; }
}
/* Legacy classes mantenidas por compat con eventuales referencias en otras
secciones (Header dot, FAB pulse, etc.). El Hero ya no las usa. */
.gt-hero__live {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--fg-2);
}
.gt-hero__dot {
width: 7px; height: 7px; border-radius: 999px;
background: var(--gt-green-700);
box-shadow: 0 0 0 0 rgba(34, 139, 89, .55);
animation: gt-hero-dot-pulse 2.4s ease-out infinite;
}
@keyframes gt-hero-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 139, 89, .55); }
70% { box-shadow: 0 0 0 8px rgba(34, 139, 89, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 139, 89, 0); }
}
@media (prefers-reduced-motion: reduce) {
.gt-hero__dot { animation: none; }
}
/* Lead del Hero: más chico que `.lead` global para no robarle peso al título. */
.gt-hero__lead {
font-size: 14.5px; line-height: 1.5;
color: var(--fg-2);
margin: 0 0 16px;
max-width: 36ch;
}
/* Sprint 33.3 · Quick Win Hormozi #7 — MAGIC naming "Sistema Patio Premium".
Va ARRIBA del eyebrow técnico del Hero como sub-eyebrow categórico.
Estilo: small caps + letter-spacing premium + color verde brand oscuro
con barrita izquierda como acento (estilo Apple "Pro" / Linear). */
.gt-hero__system-naming {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1E5C3E;
margin: 0 0 6px;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
}
.gt-hero__system-naming::before {
content: "";
display: inline-block;
width: 18px;
height: 1.5px;
background: #1E5C3E;
border-radius: 1px;
}
/* Sprint 33 · TÍTULO Opción B — 3 beats punchy.
Ritmo periodístico premium (Apple / Linear). Period en cada línea
crea pause natural. Tamaño levemente más chico que el "Ordená tu
patio" original porque ahora hay 3 líneas, no 2 — necesitamos espacio.
Sprint 33.1 · margin-bottom reducido 24 → 18 (–6px) como parte del
ajuste de spacing del col derecho para compensar el badge scarcity que
wrappea a 2 líneas y empuja el CTA hacia abajo. */
.gt-hero__title--beats {
font-size: clamp(28px, 5vw, 44px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 4px 0 18px;
}
/* ─────────────────────────────────────────────────────────────
Sprint 33 · Anchor Hormozi del problema — Patrón "Inline italic"
Estilo Stripe / Linear / Vercel. Sin caja, sin border, sin bg
coral. Números en italic + verde brand oscuro + leve aumento
de peso → lee como editorial premium, no como banner de venta.
Las cifras destacadas ($5K / $15K / 4 veces) son los puntos
que el ojo escanea aunque no lea todo el párrafo. */
.gt-hero__anchor--v1 {
/* Sprint 33.1 · margin-bottom reducido 22 → 8 (–14px) para acercar el
anchor a las tabs Tarjeta/Transferencia y absorber el shift del
badge scarcity en 2 líneas. Junto con el title (–6px), suman –20px. */
margin: 4px 0 8px;
padding: 0;
background: none;
border: none;
font-size: 15px;
line-height: 1.6;
color: var(--fg-2, #4A5862);
max-width: 44ch;
font-weight: 400;
}
.gt-hero__anchor--v1 em {
font-style: italic;
font-weight: 600;
color: #1E5C3E; /* Verde brand oscuro, premium */
font-size: 1.02em;
}
@media (max-width: 768px) {
.gt-hero__anchor--v1 {
font-size: 14px;
margin: 4px 0 18px;
}
}
/* Sprint 33 · COLOR + TAMAÑO ambos en la columna izquierda — el TAMAÑO
ya no vive en la columna derecha, ya no necesitamos el "--desktop" slot. */
@media (min-width: 900px) {
.gt-hero { flex-direction: row; align-items: flex-start; gap: 48px; padding: 32px; }
.gt-hero__left { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.gt-hero__photo { aspect-ratio: 4/5; border-radius: 22px; }
/* Nota de entrega: visible solo en desktop, debajo de la imagen.
Antes llenaba un hueco gracias a margin-top:auto en los pickers.
Ahora los pickers van directo abajo de la nota — sin huecos. */
.gt-hero__delivery-note {
display: block;
margin: 4px 0 0;
font-size: 13.5px; color: var(--fg-2);
text-align: center;
line-height: 1.5;
}
/* Sprint 33 · Unified picker card en desktop — COLOR + TAMAÑO en
UNA sola card blanca con divider sutil entre ambos (no dos cards
separadas como antes). Razón:
a) Más premium visualmente (Linear / Stripe usan cards unificadas)
b) Permite que el bottom de la card del LEFT termine alineado
con el bottom del CTA del RIGHT — sin huecos verticales.
Paddings internos ajustados para match al pixel del CTA bottom. */
.gt-hero__pickers {
background: #fff;
border-radius: 16px;
overflow: hidden;
/* Sprint 33 · Shadow sutil para emparejar peso visual con el CTA del
RIGHT (que tiene box-shadow verde). Sin shadow, la card de pickers
parecía "flotar menos" que el CTA y se percibía desalineada aunque
los bounding boxes coincidieran. */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}
.gt-hero__size-slot {
margin-top: 0;
background: transparent;
border-radius: 0;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* Override desktop-only de paddings internos de los pickers, para
que el card unificado termine alineado con el CTA del RIGHT (2px
más de padding-bottom para cerrar el gap exacto de 2.06px medido). */
.gt-hero__pickers .gt-finish {
padding: 18px 18px 10px; /* mobile original: 24 16 8 */
}
.gt-hero__pickers .gt-sizepick {
/* Sprint 33.3 · padding-bottom 19 → 41 (+22px) para compensar la altura
del nuevo sub-eyebrow "Sistema Patio Premium" agregado en el right col
por QW#7. Mantiene alignment CTA = picker bottom (sin esto, CTA queda
22px abajo del picker). Heavy padding pero único punto de ajuste sin
romper rítmica del right col. */
padding: 12px 18px 18px; /* Sprint 34.6.1 v7: 41 → 18 — picker card simétrico (12 top / 18 bottom). Ya no necesitamos los 41 de Sprint 33.3 porque el alignment ahora lo maneja flex stretch + CTA margin-top: auto en .gt-hero. */
}
.gt-hero__copy { flex: 1; padding: 0; display: flex; flex-direction: column; }
.gt-hero__title { font-size: 56px; }
.gt-cta-lg { width: auto; }
/* En desktop ocultamos la nota bajo el CTA — ya está arriba a la izquierda. */
.gt-hero__note { display: none; }
}
/* Mobile: la nota arriba se oculta (ya aparece bajo el CTA). */
@media (max-width: 899px) {
.gt-hero__delivery-note { display: none; }
}
/* ── Price ──────────────────────────────────────────────── */
.gt-price { margin: 14px 0 18px; }
.gt-price__tabs {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin-bottom: 18px;
}
.gt-price__tab {
display: flex; flex-direction: column; align-items: flex-start;
gap: 2px; padding: 12px 14px;
background: #fff; border: 1.5px solid var(--gt-line);
border-radius: 12px; cursor: pointer;
font-family: inherit; text-align: left;
transition: border-color .15s, background .15s;
position: relative; min-width: 0;
}
.gt-price__tab:hover { border-color: var(--gt-green-100); }
.gt-price__tab.is-active {
border-color: var(--gt-green); background: var(--gt-green-50);
}
/* N1: icon a la izquierda del label en flujo grid.
El botón pasa a 2 cols (icon | label+sub) en lugar de absoluto. */
.gt-price__tab {
display: grid;
grid-template-columns: 18px 1fr;
align-items: center;
gap: 4px 10px;
}
.gt-price__tab i {
width: 18px; height: 18px; color: var(--gt-ink-3);
position: static;
grid-row: 1 / span 2; align-self: center;
}
.gt-price__tab.is-active i { color: var(--gt-green-700); }
.gt-price__tab > span:nth-child(2) {
font-size: 14px; font-weight: 700; color: var(--gt-ink);
white-space: nowrap;
}
.gt-price__tab-sub {
font-size: 11.5px; color: var(--fg-3); font-weight: 500;
line-height: 1.25;
/* En anchos chicos el sub salta a una fila propia que ocupa todo el botón
(de col 1 a -1) — así "12 cuotas sin interés" fluye horizontal y wrappea
palabras enteras solo si no entra, en lugar de romper letra por letra. */
grid-column: 1 / -1;
margin-top: 2px;
}
.gt-price__tab-badge {
display: inline-block; padding: 2px 8px; border-radius: 999px;
background: var(--gt-green); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: .02em;
white-space: nowrap;
justify-self: start;
width: fit-content;
}
@media (max-width: 380px) {
.gt-price__tab > span:nth-child(2) { font-size: 13px; }
.gt-price__tab-sub { font-size: 11px; }
}
.gt-price__main {
display: flex; align-items: baseline; gap: 8px;
/* Sprint 33.1 · Lock min-height para que tarjeta ("12 × $X" con 2 font-sizes
mezclados → line-box 64px) y transferencia ("$X" font único → line-box 61px)
produzcan la MISMA altura visible. Sin este lock, alternar tabs movía
todos los elementos siguientes 3px (incluso el CTA), rompiendo el alignment
pickers-CTA del Sprint 33. Mide igual en desktop y mobile. */
min-height: 64px;
}
.gt-price__num {
font-weight: 700; font-size: 52px; color: var(--gt-green-700);
letter-spacing: -.02em; line-height: .95;
font-variant-numeric: tabular-nums;
}
.gt-price__per { font-weight: 600; font-size: 20px; color: var(--fg-2); }
/* A1: prefijo "12 ×" antes del monto — elimina la ambigüedad con "/mes" */
.gt-price__per--lead {
font-weight: 700; font-size: 28px; color: var(--gt-ink-3);
letter-spacing: -.01em;
}
.gt-price__terms { font-size: 15px; color: var(--fg-2); margin-top: 6px; }
.gt-price__terms strong { color: var(--gt-ink); font-weight: 700; }
.gt-price__total { font-size: 13px; color: var(--fg-3); margin-top: 4px; }
.gt-price__total--strike {
text-decoration: line-through; text-decoration-color: var(--gt-mute);
}
.gt-price__note {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 12px; padding: 10px 12px; border-radius: 10px;
background: #F1F5F3; color: var(--gt-ink); font-size: 13px; line-height: 1.45;
border: 1px solid rgba(16, 24, 30, .06);
}
.gt-price__note i { width: 14px; height: 14px; color: var(--gt-green-700); flex-shrink: 0; margin-top: 2px; }
/* Pista cruzada hacia el otro método de pago — clickable, hace switch */
/* A2: bajamos peso visual para que NO compita con el CTA principal.
Pasa de bloque verde a info clickeable: fondo blanco, borde delgado,
sin flecha animada. */
.gt-price__hint {
display: flex; align-items: center; gap: 10px;
width: 100%; margin-top: 12px;
padding: 10px 12px; border-radius: 10px;
background: #fff; border: 1px solid var(--gt-line);
color: var(--fg-2); font-size: 13px; line-height: 1.4;
font-family: inherit; text-align: left;
cursor: pointer; transition: border-color .15s;
}
.gt-price__hint:hover {
border-color: var(--gt-green-100);
}
.gt-price__hint > i:first-child,
.gt-price__hint > svg:first-child {
width: 16px; height: 16px; color: var(--gt-ink-3); flex-shrink: 0;
}
/* Solo el span del texto debe crecer. El span del arrow (.gt-price__hint-arrow)
tiene flex-shrink:0 + tamaño propio — si le damos flex:1 también, los dos
spans dividen el ancho 50/50 y la flecha queda flotando lejos del borde. */
.gt-price__hint > span:not(.gt-price__hint-arrow) { flex: 1; min-width: 0; }
.gt-price__hint strong { color: var(--gt-ink); font-weight: 700; }
.gt-price__hint-arrow {
width: 14px; height: 14px; color: var(--gt-ink-3);
flex-shrink: 0;
}
/* legacy (kept for preview cards that still use it) */
.gt-price__transfer {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 12px; padding: 8px 12px; border-radius: 12px;
background: var(--gt-green-50);
font-size: 14px; color: var(--gt-green-800); font-weight: 600;
}
.gt-price__transfer i { width: 16px; height: 16px; color: var(--gt-green-700); }
.gt-price__transfer-amt { color: var(--gt-green-800); font-weight: 700; }
.gt-price__badge {
display: inline-block; padding: 3px 9px; border-radius: 999px;
background: var(--gt-green); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
@media (min-width: 900px) {
.gt-price__num { font-size: 64px; }
}
.gt-price--compact .gt-price__num { font-size: 22px; }
.gt-price--compact .gt-price__transfer { display: none; }
.gt-price--compact .gt-price__tabs { display: none; }
.gt-price--compact .gt-price__note { display: none; }
/* ── Urgency bar ────────────────────────────────────────── */
.gt-urgency {
margin: 0 0 16px;
padding: 12px 14px; border-radius: 12px;
background: #FFF6E5; border: 1px solid #F4D9A0;
color: #6B4A0F; font-size: 13.5px; line-height: 1.35;
}
.gt-urgency__row {
display: flex; align-items: center; gap: 10px;
}
.gt-urgency__icon { width: 18px; height: 18px; flex-shrink: 0; color: #B47B12; }
.gt-urgency__text { flex: 1; min-width: 0; }
.gt-urgency__text strong { color: #4A3208; font-weight: 700; }
.gt-urgency__num {
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 12px; letter-spacing: .04em;
color: #4A3208;
background: rgba(180,123,18,.12);
padding: 3px 8px; border-radius: 999px;
}
/* A5 + N2: barra más alta (6px) para que la escasez sea más tangible */
.gt-urgency__bar {
height: 6px; border-radius: 999px;
background: rgba(180,123,18,.18);
overflow: hidden; margin-top: 8px;
}
.gt-urgency__bar-fill {
height: 100%; background: #B47B12;
transition: width .4s ease;
border-radius: 999px;
}
.gt-urgency__legend {
font-size: 11.5px; color: #6B4A0F; margin-top: 6px;
letter-spacing: .02em;
}
.gt-urgency__legend strong { color: #4A3208; }
/* hot variant: ≤ 1 lugar restante */
.gt-urgency--hot {
background: #FFEDED; border-color: #F4B0B0; color: #6B1414;
}
.gt-urgency--hot .gt-urgency__icon { color: var(--gt-danger); }
.gt-urgency--hot .gt-urgency__text strong { color: #4A0808; }
.gt-urgency--hot .gt-urgency__num {
color: #fff; background: var(--gt-danger);
}
.gt-urgency--hot .gt-urgency__bar { background: rgba(184,28,28,.18); }
.gt-urgency--hot .gt-urgency__bar-fill { background: var(--gt-danger); }
.gt-urgency--hot .gt-urgency__legend { color: #6B1414; }
.gt-urgency--hot .gt-urgency__legend strong { color: #4A0808; }
.gt-urgency--out {
background: #F4F4F5; border-color: var(--gt-line);
color: var(--fg-2);
}
.gt-urgency--out .gt-urgency__icon { color: var(--gt-mute); }
.gt-urgency--out .gt-urgency__text strong { color: var(--gt-ink); }
/* ── Armado upsell (desplegable) ────────────────────────── */
.gt-armado {
margin: 28px 16px;
border-radius: 18px;
border: 1px solid var(--gt-line);
background: #fff;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
.gt-armado.is-open {
border-color: rgba(47, 138, 111,.35);
box-shadow: 0 6px 22px rgba(47, 138, 111,.08);
}
.gt-armado__toggle {
width: 100%;
display: flex; align-items: center; gap: 12px;
padding: 18px 20px;
background: transparent; border: 0;
font-family: inherit; text-align: left; cursor: pointer;
transition: background .15s;
}
.gt-armado__toggle:hover { background: rgba(0,0,0,.02); }
.gt-armado__toggle-icon {
flex-shrink: 0;
width: 38px; height: 38px; border-radius: 10px;
background: var(--bg-wash); color: var(--gt-green-700);
display: grid; place-items: center;
}
.gt-armado__toggle-icon i { width: 20px; height: 20px; }
.gt-armado__toggle-body { flex: 1; min-width: 0; }
.gt-armado__toggle-eyebrow {
font-size: 11px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--gt-green-700);
margin-bottom: 2px;
}
.gt-armado__toggle-title {
font-size: 15px; font-weight: 700; color: var(--gt-ink);
line-height: 1.3;
}
.gt-armado__toggle-chev {
width: 18px; height: 18px; color: var(--fg-3); flex-shrink: 0;
transition: color .2s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.gt-armado.is-open .gt-armado__toggle-chev {
color: var(--gt-green); transform: rotate(180deg);
}
.gt-armado__panel {
padding: 4px 22px 22px;
border-top: 1px dashed var(--gt-line);
}
.gt-armado__panel-inner { padding-top: 18px; }
/* legacy box-style (sin colapso) — fallback si se reusa la versión vieja */
.gt-armado--card {
padding: 22px;
background: #fff;
border: 1.5px solid var(--gt-green-100);
border-radius: 18px;
box-shadow: var(--shadow-1);
}
.gt-armado__head { margin-bottom: 10px; }
.gt-armado__title {
font-size: 22px; font-weight: 700; color: var(--gt-ink);
margin: 4px 0 0; line-height: 1.2; letter-spacing: -.01em;
}
.gt-armado__desc {
margin: 0 0 16px; font-size: 14.5px; color: var(--fg-2); line-height: 1.5;
}
.gt-armado__option {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px; border-radius: 14px;
border: 1.5px solid var(--gt-line); background: var(--bg-soft);
cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s;
}
.gt-armado__option input { position: absolute; opacity: 0; pointer-events: none; }
.gt-armado__option:hover { border-color: var(--gt-green); }
.gt-armado__option.is-on {
border-color: var(--gt-green); background: var(--bg-wash);
box-shadow: 0 0 0 3px rgba(47, 138, 111,.15);
}
.gt-armado__option.is-disabled { opacity: .55; cursor: not-allowed; }
.gt-armado__check {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
border: 1.5px solid var(--gt-line); background: #fff;
display: flex; align-items: center; justify-content: center;
color: transparent; transition: all .15s;
margin-top: 2px;
}
.gt-armado__check i { width: 14px; height: 14px; }
.gt-armado__option.is-on .gt-armado__check {
background: var(--gt-green); border-color: var(--gt-green); color: #fff;
}
.gt-armado__option-body { flex: 1; min-width: 0; }
.gt-armado__option-row {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.gt-armado__option-name {
font-weight: 700; font-size: 15.5px; color: var(--gt-ink);
}
.gt-armado__price-stack {
display: flex; align-items: baseline; gap: 8px;
font-variant-numeric: tabular-nums;
}
.gt-armado__price-mkt {
font-size: 13px; color: var(--gt-mute);
text-decoration: line-through; text-decoration-color: var(--gt-danger);
text-decoration-thickness: 1.5px;
}
.gt-armado__price-ours {
font-size: 18px; font-weight: 700; color: var(--gt-green-700);
}
.gt-armado__savings {
display: block; font-size: 13px; color: var(--gt-green-800); font-weight: 600;
}
/* M3: nota de fuente debajo del ahorro — hace defendible la cifra */
.gt-armado__source {
display: block; font-size: 11.5px; color: var(--fg-3);
margin-top: 2px; line-height: 1.4;
font-style: italic;
}
.gt-armado__bullets {
list-style: none; padding: 0; margin: 14px 0 0;
display: flex; flex-wrap: wrap; gap: 16px;
}
.gt-armado__bullets li {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: var(--fg-2); font-weight: 600;
}
.gt-armado__bullets i { width: 14px; height: 14px; color: var(--gt-green-700); }
/* ── Bonos stack (desplegable) ──────────────────────────── */
.gt-bonos {
margin: 32px 16px;
padding: 0;
overflow: hidden;
}
.gt-bonos__inner { padding: 0; }
.gt-bonos__toggle {
display: flex; align-items: center; gap: 14px;
width: 100%; text-align: left;
/* Sprint 33.10.1 (rev2) · match con --gt-green brand primary (#38A183)
— mismo color que usa la card de Calculadora (consistencia visual). */
background: var(--gt-green, #38A183); color: #fff;
border: 0; border-radius: 22px;
padding: 24px 22px;
cursor: pointer;
/* Sprint 33.10.1 · border-radius transition para acompañar el collapse.
Sprint 33.12.6 · subió a 1.2s para matchear el collapse expandido del wrap. */
transition: border-radius 1.2s cubic-bezier(.16, 1, .3, 1), background .15s ease;
font: inherit;
}
.gt-bonos__toggle:hover { background: #45B194; }
.gt-bonos__toggle.is-open {
border-radius: 22px 22px 0 0;
}
.gt-bonos__toggle-text { flex: 1; min-width: 0; }
.gt-bonos__toggle-title {
color: #fff;
font-size: 22px; line-height: 1.18; letter-spacing: -.015em; font-weight: 700;
margin-top: 6px;
}
.gt-bonos__toggle-teaser {
margin-top: 10px;
font-size: 13.5px; line-height: 1.45;
color: rgba(255,255,255,.78);
}
.gt-bonos__toggle-teaser strong {
color: var(--gt-green-200); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.gt-bonos__chev {
width: 22px; height: 22px; flex-shrink: 0;
color: rgba(255,255,255,.55);
/* Sprint 33.12.6 · subió de .65s a 1.2s. El outer toggle tiene MUCHO
más contenido a revelar que las accordions internas (.65s sigue OK
para esas porque su contenido es chico). A misma duración, más
contenido = más velocidad px/s = feel "snap". 1.2s balancea. */
transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), color .15s ease;
}
.gt-bonos__toggle.is-open .gt-bonos__chev {
transform: rotate(180deg); color: var(--gt-green-200);
}
.gt-bonos__panel {
background: var(--gt-green-900, #14241B);
color: #fff;
border-radius: 0 0 22px 22px;
padding: 4px 22px 24px;
}
.gt-bonos__panel { max-width: 720px; margin: 0 auto; }
.gt-bonos .eyebrow { color: var(--gt-green-200); }
/* Sprint 33.10.1 · letter-spacing tight + tamaño un click menor para que
"SISTEMA PATIO PREMIUM · ¿QUÉ INCLUYE?" entre en 1 línea en mobile
(390px viewport). Default .eyebrow tiene .12em letter-spacing y 12px. */
.gt-bonos__toggle .eyebrow {
letter-spacing: 0;
font-size: 11px;
}
.gt-bonos__list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 1px;
background: rgba(255,255,255,.08);
border-radius: 14px; overflow: hidden;
}
.gt-bonos__item {
display: grid;
grid-template-columns: 36px 1fr;
grid-template-areas:
"icon body"
". val";
gap: 6px 14px;
padding: 16px 14px;
/* Sprint 33.10.1 (rev2) · match con --gt-green brand primary (#38A183)
— mismo color que la card de Calculadora (consistencia visual). */
background: var(--gt-green, #38A183);
align-items: flex-start;
/* Sprint 33.10 · QW#8 — Apple-style scroll reveal.
Sprint 33.10.1 · timings 2x más lentos + easing cubic-bezier expo-out
para feel cinematográfico premium ("luxury reveal" vs "snappy").
Total: ~2.2s de despliegue completo (5 items × 220ms stagger). */
opacity: 0;
transform: translateY(16px);
transition:
opacity .9s cubic-bezier(.16, 1, .3, 1),
transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.gt-bonos.is-revealed .gt-bonos__item {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--idx, 0) * 220ms);
}
/* Sprint 33.13 · QW-S6 Hormozi Regla 6 — bono killer al final, destacado.
"Línea directa con el equipo" es el único bono que ningún competidor
puede replicar (Status real, SPCL). Tratamiento: glow border interno
+ badge "Exclusivo" arriba derecha. NO cambia el bg para mantener
continuidad visual con el resto del stack — solo enmarca. */
.gt-bonos__item--killer {
position: relative;
box-shadow:
inset 0 0 0 1.5px rgba(255, 255, 255, 0.45),
0 4px 18px rgba(0, 0, 0, 0.12);
}
.gt-bonos__killer-badge {
position: absolute;
top: -10px;
right: 14px;
background: var(--gt-ink, #10181E);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
z-index: 1;
}
/* Respeta el preference de los usuarios que reducen movimiento (a11y) */
@media (prefers-reduced-motion: reduce) {
.gt-bonos__item {
opacity: 1;
transform: none;
transition: none;
}
.gt-bonos.is-revealed .gt-bonos__item {
transition-delay: 0ms;
}
}
.gt-bonos__icon { grid-area: icon; }
.gt-bonos__body { grid-area: body; }
.gt-bonos__val { grid-area: val; }
.gt-bonos__icon {
width: 36px; height: 36px; border-radius: 10px;
/* Sprint 33.11 · frosted glass (Apple-style) sobre el fondo verde-brand.
Antes: var(--gt-green-800) que sobre var(--gt-green) generaba feel
"verde pantano". Aprobado Damián. */
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.10);
color: #fff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
}
.gt-bonos__icon i { width: 18px; height: 18px; }
.gt-bonos__body { min-width: 0; }
.gt-bonos__t { font-weight: 700; font-size: 15px; color: #fff; }
.gt-bonos__s { font-size: 13.5px; color: rgba(255,255,255,.72); margin-top: 4px; line-height: 1.55; }
/* Sprint 33.12 · QW-S4 Hormozi Regla 5 — "razón por la que existe" cada bono.
Tratamiento "aside" (quote-style) con border-left subtle + italic + opacity
reducida, para que NO compita con título/subtítulo pero sume autoridad.
Sprint 33.12.1 · ahora va colapsado por default, con trigger "¿Por qué te
lo regalamos?" + chevron. Click expande con grid-rows transition smooth. */
.gt-bonos__why {
padding-left: 10px;
border-left: 2px solid rgba(255, 255, 255, 0.20);
font-size: 12.5px;
font-style: italic;
color: rgba(255, 255, 255, 0.62);
line-height: 1.5;
padding-top: 6px;
}
/* Trigger inline tipo link — intriga ("¿Por qué?") sin revelar la respuesta */
.gt-bonos__why-trigger {
appearance: none;
background: transparent;
border: 0;
/* Sprint 33.19A · hit-area expandida 24px → 40px+ (WCAG/Apple HIG mínimo).
Antes padding:0 daba ~14px tap target, dificultaba el tap mobile. */
padding: 12px 8px 12px 0;
margin: 4px 0 0 -8px;
border-radius: 4px;
cursor: pointer;
font: inherit;
font-size: 12.5px;
font-style: italic;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color .15s ease;
}
.gt-bonos__why-trigger:hover { color: rgba(255, 255, 255, 0.95); }
.gt-bonos__why-trigger i {
width: 14px;
height: 14px;
/* Sprint 33.12.2 · chevron más suave (.35s → .55s + expo-out) */
transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.gt-bonos__why-trigger.is-open i { transform: rotate(180deg); }
/* Wrap colapsable usando grid-template-rows 0fr → 1fr (smooth height anim).
Sprint 33.12.2 · timing más suave (.4s → .65s + expo-out) y fade-in del
contenido para que aparezca/desaparezca con elegancia, no con brusquedad. */
.gt-bonos__why-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .65s cubic-bezier(.16, 1, .3, 1);
}
.gt-bonos__why-wrap.is-open { grid-template-rows: 1fr; }
.gt-bonos__why-wrap > .gt-bonos__why {
overflow: hidden;
min-height: 0;
opacity: 0;
transform: translateY(-4px);
/* Sprint 33.12.4 · duración del contenido = duración del wrap (.65s)
para que abrir y cerrar se sientan SIMÉTRICOS. Antes el opacity era
.45s vs height .65s → al cerrar el contenido desaparecía antes que
el wrap terminara de colapsar → feel brusco. */
transition: opacity .65s cubic-bezier(.16, 1, .3, 1),
transform .65s cubic-bezier(.16, 1, .3, 1);
}
.gt-bonos__why-wrap.is-open > .gt-bonos__why {
opacity: 1;
transform: translateY(0);
/* Sin transition-delay para mantener simetría perfecta abrir↔cerrar. */
}
.gt-bonos__foot { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 6px; font-style: italic; }
.gt-bonos__val {
text-align: left; display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.gt-bonos__val-num {
/* Sprint 33.11 · blanco puro vs var(--gt-green-200) (mint washed).
Más legible y más premium sobre el fondo verde-brand. */
font-weight: 700; font-size: 17px; color: #fff;
font-variant-numeric: tabular-nums;
}
.gt-bonos__val-tag {
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
/* Sprint 33.11 · subido de .55 a .65 para mejor jerarquía secundaria. */
color: rgba(255,255,255,.65); font-weight: 600;
}
.gt-bonos__val-tag--lg { font-size: 11px; }
.gt-bonos__total {
display: flex; align-items: baseline; justify-content: space-between;
margin-top: 16px; padding: 16px 14px;
background: var(--gt-green); color: #fff; border-radius: 14px;
}
.gt-bonos__total-label { font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.gt-bonos__total-num { font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
/* Cierre Hormozi: total recibido / tu inversión / ahorrás */
.gt-bonos__cierre {
margin-top: 22px;
padding: 22px;
background: #fff;
border-radius: 16px;
display: flex; flex-direction: column; gap: 4px;
box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 30px rgba(0,0,0,.18);
}
.gt-bonos__cierre-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px;
padding: 10px 0;
border-bottom: 1px dashed var(--gt-line);
}
.gt-bonos__cierre-row:nth-child(2) { border-bottom-color: var(--gt-line-2); }
.gt-bonos__cierre-row--ahorro {
border-bottom: 0;
margin-top: 6px;
padding: 14px 16px;
background: var(--gt-green-soft);
border-radius: 12px;
border: 1.5px solid var(--gt-green-100);
}
.gt-bonos__cierre-label {
font-weight: 600; font-size: 14px; color: var(--fg-2);
display: flex; align-items: center; gap: 8px;
}
/* Sprint 33.12.3 · BUG FIX: Lucide reemplaza el con
un