/* ==========================================================================
   Landing Showcase IA + Builderall
   Sistema visual: reporte Fase 0 (Docs/fase-0-reporte-extraccion.md)
   Paleta: #161316 / #2C2324 / #453027 / #EFECE3 / #FFFFFF
   Acento: #FF6D29 (sobre oscuro) · #EB5E28 (sobre claro)
   ========================================================================== */

:root {
  --bg-dark: #161316;
  --surface-dark: #2c2324;
  --brown: #453027;
  --bg-light: #efece3;
  --surface-light: #ffffff;
  --text-dark-primary: #ffffff;
  --text-dark-secondary: #bababa;
  --text-light-primary: #2c2324;
  --text-light-secondary: #766754;
  --accent: #ff6d29;
  --accent-on-light: #eb5e28;
  /* Variante oscura del acento para TEXTO pequeño sobre fondos claros:
     #eb5e28 solo alcanza 2.9:1 ahí y no cumple WCAG AA. Esta da 4.7:1. */
  --accent-text-light: #b54512;
  /* Verde de confirmación para marcar lo que sí se conserva (5.4:1 sobre blanco) */
  --ok-green: #0f7a38;
  --border-dark: rgba(255, 255, 255, 0.1);
  --border-light: rgba(44, 35, 36, 0.08);
  --radius-card: 20px;
  --radius-input: 12px;
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1140px;
  --shadow-soft: 0 8px 30px rgba(44, 35, 36, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-light-primary);
  background: var(--bg-dark);
  -webkit-font-smoothing: antialiased;
}

/* height:auto es imprescindible: los atributos width/height del HTML (que sí
   conservamos para reservar espacio y evitar saltos de layout) fijarían la
   altura en píxeles y anularían aspect-ratio, recortando la imagen. */
img { max-width: 100%; display: block; height: auto; }

a { color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Accesibilidad ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--bg-dark);
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.75rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.5rem); font-weight: 650; }
h3 { font-size: 1.25rem; font-weight: 600; }

.section-label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text-light);
  margin-bottom: 16px;
}

.on-dark .section-label { color: var(--accent); }

.section-intro {
  max-width: 640px;
  margin-top: 16px;
  color: var(--text-light-secondary);
  font-size: 1.0625rem;
}

.on-dark .section-intro { color: var(--text-dark-secondary); }

/* Secciones -------------------------------------------------------------- */

section { padding: 72px 0; }

@media (min-width: 768px) {
  section { padding: 104px 0; }
}

.on-dark { background: var(--bg-dark); color: var(--text-dark-primary); }
.on-light { background: var(--bg-light); color: var(--text-light-primary); }

/* Badge / chip ----------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dark-secondary);
}

.badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* Botones ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 32px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-dark);
}

.btn-primary:hover { background: #ff8248; box-shadow: 0 6px 24px rgba(255, 109, 41, 0.35); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary[disabled] { opacity: 0.6; cursor: wait; }

.on-light .btn-primary { background: var(--accent-on-light); }
.on-light .btn-primary:hover { background: #f06f35; }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--border-dark);
  color: var(--text-dark-primary);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   1. HERO
   ========================================================================== */

.hero {
  position: relative;
  padding: 56px 0 0;
  overflow: hidden;
}

/* glow radial sutil, patrón de las referencias */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 70%;
  height: 90%;
  background: radial-gradient(ellipse at center, rgba(255, 109, 41, 0.13), transparent 65%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  gap: 40px;
}

@media (min-width: 980px) {
  .hero { padding-top: 80px; }
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; gap: 56px; }

  /* Baja la caja para que su borde superior quede a la altura del titular,
     saltando el alto del chip "EN VIVO" (~39px) más el margen del h1 (24px). */
  .hero .form-card { margin-top: 63px; }
}

.hero h1 { margin: 24px 0 16px; }

.hero .subtitle {
  font-size: 1.125rem;
  color: var(--text-dark-secondary);
  max-width: 560px;
}

/* Contador --------------------------------------------------------------- */

.countdown-wrap { margin-top: 32px; }

.countdown-date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-dark-primary);
  margin-bottom: 12px;
}

.countdown {
  display: flex;
  gap: 12px;
}

/* display:flex gana sobre el atributo hidden, hay que declararlo explícito */
.countdown[hidden] { display: none; }

.countdown .unit {
  min-width: 76px;
  padding: 12px 8px;
  text-align: center;
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
  border-radius: 14px;
}

.countdown .num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-dark-primary);
}

.countdown .lbl {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-secondary);
}

.local-time {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--text-dark-secondary);
}

.local-time strong { color: var(--accent); font-weight: 600; }

/* Formulario ------------------------------------------------------------- */

.form-card {
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

/* glow rasante estilo FAQ de referencia */
.form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(255, 109, 41, 0.12), transparent 55%);
  pointer-events: none;
}

.form-card h2 {
  font-size: 1.375rem;
  margin-bottom: 6px;
  position: relative;
}

.form-card .form-note {
  font-size: 0.9375rem;
  color: var(--text-dark-secondary);
  margin-bottom: 22px;
  position: relative;
}

.field { margin-bottom: 16px; position: relative; }

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text-dark-primary);
}

.field input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-dark-primary);
  background: rgba(22, 19, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-input);
  transition: border-color 0.2s ease;
}

.field input::placeholder { color: rgba(186, 186, 186, 0.55); }

.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 109, 41, 0.18);
}

.field .error {
  display: none;
  margin-top: 6px;
  font-size: 0.8438rem;
  color: #ff9d76;
}

.field.invalid input { border-color: #e05b3a; }
.field.invalid .error { display: block; }

.form-card .btn { width: 100%; position: relative; }

.microcopy {
  margin-top: 14px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-dark-secondary);
  position: relative;
}

/* Imagen hero ------------------------------------------------------------ */

.hero-visual {
  margin-top: 56px;
  position: relative;
}

.hero-visual .frame {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  border-bottom: none;
  box-shadow: 0 -10px 60px rgba(255, 109, 41, 0.08);
}

/* La imagen del proceso se muestra COMPLETA: los logos de las IAs a la
   izquierda y los módulos de Builderall a la derecha llegan casi al borde,
   así que nada de recortes ni zoom sobre ella. */
.hero-visual img {
  width: 100%;
  height: auto;
}

/* El latido va en el glow del marco, no en la imagen, para no cortar nada. */
.hero-visual .frame { animation: heroGlow 9s ease-in-out infinite; }

@keyframes heroGlow {
  0%, 100% { box-shadow: 0 -10px 60px rgba(255, 109, 41, 0.08); }
  50% { box-shadow: 0 -10px 80px rgba(255, 109, 41, 0.16); }
}

/* ==========================================================================
   2. FRANJA DE CREDIBILIDAD
   ========================================================================== */

.cred { padding: 32px 0; border-top: 1px solid var(--border-dark); }

.cred-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
}

.cred-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  background: var(--surface-dark);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dark-secondary);
  white-space: nowrap;
}

.cred-item svg { width: 16px; height: 16px; stroke: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   3. EL PROBLEMA  (transición a claro)
   ========================================================================== */

.problema {
  background: linear-gradient(180deg, var(--bg-dark) 0%, #3a2f28 35%, var(--bg-light) 100%);
  color: var(--text-light-primary);
  padding-top: 120px;
}

.problema .section-head { color: var(--text-dark-primary); }
.problema .section-head .section-intro { color: var(--text-dark-secondary); }

.cards-3 {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .cards-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.card {
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(44, 35, 36, 0.12); }

.card .icon {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(235, 94, 40, 0.1);
  margin-bottom: 20px;
}

.card .icon svg { width: 26px; height: 26px; stroke: var(--accent-on-light); }

.card h3 { margin-bottom: 10px; }

.card p { color: var(--text-light-secondary); font-size: 0.9688rem; }

/* ==========================================================================
   4. LAS TRES IAs
   ========================================================================== */

.ias-grid {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .ias-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.ia-card {
  position: relative;
  text-align: center;
  padding: 40px 28px 32px;
}

.ia-card .logo {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ia-card .logo svg { width: 52px; height: 52px; }

/* Marcador "IA de la semana": mover la clase .is-current a la tarjeta activa */
.ia-card.is-current {
  border: 1.5px solid var(--accent-on-light);
  box-shadow: 0 10px 40px rgba(235, 94, 40, 0.18);
}

.ia-card .current-badge {
  display: none;
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--accent-text-light);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ia-card.is-current .current-badge { display: block; }

/* ==========================================================================
   5. EL PROCESO
   ========================================================================== */

.steps { margin-top: 56px; display: grid; gap: 48px; }

.step {
  position: relative;
  display: grid;
  gap: 24px;
  padding-left: 52px;
}

/* línea conectora vertical en móvil */
.step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 48px;
  bottom: -48px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent-on-light), rgba(235, 94, 40, 0.15));
}

.step:last-child::before { display: none; }

.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-text-light);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
}

.step h3 { font-size: 1.375rem; margin-bottom: 10px; }

.step p { color: var(--text-light-secondary); max-width: 480px; }

.step .step-img {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
}

.step .step-img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (min-width: 900px) {
  .steps { gap: 72px; }
  .step {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding-left: 0;
  }
  .step::before { display: none; }
  .step-num { position: static; margin-bottom: 18px; }
  /* alternancia imagen/texto */
  .step:nth-child(even) .step-body { order: 2; }
  .step:nth-child(even) .step-img { order: 1; }
}

/* ==========================================================================
   6. LA CARGA POR ZIP  (bloque destacado oscuro incrustado)
   ========================================================================== */

.zip-block {
  background: var(--brown);
  color: var(--text-dark-primary);
  border-radius: 28px;
  padding: 48px 28px;
  position: relative;
  overflow: hidden;
}

.zip-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at bottom right, rgba(255, 109, 41, 0.16), transparent 60%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .zip-block {
    padding: 64px 56px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
  }
}

.zip-block .section-label { color: var(--accent); }

.zip-facts { list-style: none; margin-top: 24px; display: grid; gap: 14px; position: relative; }

.zip-facts li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-dark-secondary);
  font-size: 1rem;
}

.zip-facts svg { width: 20px; height: 20px; stroke: var(--accent); flex-shrink: 0; margin-top: 3px; }

.zip-facts strong { color: var(--text-dark-primary); }

/* Diagrama de carpetas dibujado en CSS */
.file-tree {
  position: relative;
  background: var(--bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9063rem;
  line-height: 2.1;
  color: var(--text-dark-secondary);
  margin-top: 32px;
}

@media (min-width: 900px) { .file-tree { margin-top: 0; } }

.file-tree .tree-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dark-secondary);
  margin-bottom: 12px;
}

.file-tree ul { list-style: none; }

.file-tree ul ul { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, 0.12); margin-left: 7px; }

.file-tree li { display: flex; align-items: center; gap: 9px; }

.file-tree svg { width: 17px; height: 17px; stroke: var(--accent); flex-shrink: 0; }

.file-tree .hl { color: var(--accent); font-weight: 600; }

/* ==========================================================================
   7. INTEGRACIONES
   ========================================================================== */

.integr-close {
  margin-top: 40px;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--text-light-secondary);
}

.integr-close code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(44, 35, 36, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
}

/* ==========================================================================
   8. AGENDA
   ========================================================================== */

.agenda-grid {
  margin-top: 48px;
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .agenda-grid { grid-template-columns: 1fr 0.9fr; align-items: center; gap: 64px; }
}

.agenda-list { list-style: none; display: grid; gap: 0; }

.agenda-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-light);
}

.agenda-list li:last-child { border-bottom: none; }

.agenda-time {
  flex-shrink: 0;
  min-width: 64px;
  padding: 4px 12px;
  text-align: center;
  border-radius: 999px;
  background: rgba(181, 69, 18, 0.1);
  color: var(--accent-text-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.agenda-list h3 { font-size: 1.0625rem; margin-bottom: 2px; }

.agenda-list p { font-size: 0.9063rem; color: var(--text-light-secondary); }

.agenda-visual {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
}

.agenda-visual img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ==========================================================================
   9. FAQ  (acordeón oscuro, patrón de la referencia)
   ========================================================================== */

.faq { padding-bottom: 40px; }

.faq-list { margin-top: 48px; display: grid; gap: 14px; max-width: 860px; }

.faq-item {
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.faq-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center left, rgba(255, 109, 41, 0.1), transparent 55%);
  pointer-events: none;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark-primary);
  position: relative;
}

.faq-q .faq-icon {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
}

.faq-q .faq-icon::before,
.faq-q .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.faq-q .faq-icon::before { top: 10px; left: 3px; width: 16px; height: 2px; }
.faq-q .faq-icon::after { top: 3px; left: 10px; width: 2px; height: 16px; }

.faq-q[aria-expanded="true"] .faq-icon::after { transform: scaleY(0); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-a > div { overflow: hidden; }

.faq-item.open .faq-a { grid-template-rows: 1fr; }

.faq-a p {
  padding: 0 24px 22px;
  color: var(--text-dark-secondary);
  font-size: 0.9688rem;
  position: relative;
}

/* ==========================================================================
   10. CTA FINAL
   ========================================================================== */

.cta-final { position: relative; overflow: hidden; }

.cta-final::before {
  content: "";
  position: absolute;
  bottom: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(255, 109, 41, 0.14), transparent 65%);
  pointer-events: none;
}

.cta-grid {
  position: relative;
  display: grid;
  gap: 40px;
}

@media (min-width: 980px) {
  .cta-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
}

.cta-final h2 { margin: 16px 0 14px; }

.cta-final .youtube-note {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--text-dark-secondary);
}

.cta-final .youtube-note a { color: var(--accent); font-weight: 500; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.footer {
  padding: 32px 0;
  border-top: 1px solid var(--border-dark);
  font-size: 0.875rem;
  color: var(--text-dark-secondary);
}

.footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   PÁGINA GRACIAS
   ========================================================================== */

.gracias-main {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.gracias-main::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 109, 41, 0.12), transparent 65%);
  pointer-events: none;
}

.gracias-card {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.gracias-card .check {
  width: 72px; height: 72px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 109, 41, 0.12);
  border: 1.5px solid var(--accent);
}

.gracias-card .check svg { width: 34px; height: 34px; stroke: var(--accent); }

.gracias-card h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); margin-bottom: 14px; }

.gracias-card .gracias-sub { color: var(--text-dark-secondary); font-size: 1.0625rem; }

.gracias-card .session-info {
  margin: 28px auto;
  padding: 20px 28px;
  border-radius: var(--radius-card);
  background: var(--surface-dark);
  border: 1px solid var(--border-dark);
  display: inline-block;
}

.gracias-card .session-info .when {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 650;
}

.gracias-card .session-info .tz { margin-top: 4px; font-size: 0.9375rem; color: var(--text-dark-secondary); }

.gracias-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

@media (min-width: 600px) {
  .gracias-actions { flex-direction: row; justify-content: center; }
}

.btn-whatsapp {
  background: #25d366;
  color: #10331c;
}

.btn-whatsapp:hover { background: #3fe07c; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.3); }

.gracias-card .yt-link {
  display: inline-block;
  margin-top: 28px;
  color: var(--text-dark-secondary);
  font-size: 0.9375rem;
}

.gracias-card .yt-link a { color: var(--accent); }

/* ==========================================================================
   Animaciones de revelado (sutiles, respetan reduced-motion)
   ========================================================================== */

/* El contenido es visible por defecto. Solo se oculta para animarlo cuando
   JavaScript está disponible (la clase .js la pone un script inline en el head),
   así el sitio nunca queda en blanco si el JS falla o tarda. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-visual .frame { animation: none; }
  .badge .dot { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   VERSIÓN 2 — componentes de layout adicionales
   ========================================================================== */

/* --- Encabezado de sección centrado ------------------------------------- */

.head-center { text-align: center; max-width: 780px; margin: 0 auto; }
.head-center .section-intro { margin-left: auto; margin-right: auto; }

h2 .soft { color: var(--text-light-secondary); font-weight: 500; }
.on-dark h2 .soft { color: var(--text-dark-secondary); }

/* --- Dos tarjetas asimétricas (clara + oscura) --------------------------- */

.split-cards { display: grid; gap: 24px; margin-top: 56px; }

@media (min-width: 940px) {
  .split-cards { grid-template-columns: 1.15fr 0.85fr; align-items: stretch; }
}

.big-card {
  border-radius: 28px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.big-card.light {
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
}

.big-card.dark {
  background: var(--bg-dark);
  color: var(--text-dark-primary);
  border: 1px solid var(--border-dark);
}

.big-card.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(255,109,41,0.16), transparent 60%);
  pointer-events: none;
}

.big-card h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 14px;
  position: relative;
}

.big-card > p {
  color: var(--text-light-secondary);
  position: relative;
  max-width: 46ch;
}

.big-card.dark > p { color: var(--text-dark-secondary); }

.big-card .card-foot { margin-top: auto; padding-top: 32px; position: relative; }

/* Panel de métricas (mockup, no captura) */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.metric {
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
}

.big-card.dark .metric { background: var(--surface-dark); border-color: var(--border-dark); }

.metric .m-label {
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light-secondary);
  display: block;
  margin-bottom: 6px;
}

.big-card.dark .metric .m-label { color: var(--text-dark-secondary); }

.metric .m-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-bottom: 4px;
}

.metric .m-value.accent { color: var(--accent-text-light); }
.big-card.dark .metric .m-value.accent { color: var(--accent); }

.metric .m-note { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--text-light-secondary); }
.big-card.dark .metric .m-note { color: var(--text-dark-secondary); }

/* Fila de estado tipo panel */
.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  position: relative;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  background: var(--surface-dark);
  font-size: 0.8125rem;
  color: var(--text-dark-secondary);
}

.status-chip .dot-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,109,41,0.2);
}

.status-chip strong { color: var(--text-dark-primary); font-weight: 600; }

/* Pila del stack reemplazado */
.stack-swap { position: relative; margin-top: 26px; display: grid; gap: 10px; }

.stack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  font-size: 0.9375rem;
}

.stack-row.crossed { color: var(--text-light-secondary); }
.stack-row.crossed .name { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* Verde de confirmación: #0F7A38 da 5.4:1 sobre blanco (AA). */
.stack-row.keep {
  background: rgba(15, 122, 56, 0.08);
  border-color: rgba(15, 122, 56, 0.28);
  font-weight: 600;
  color: var(--ok-green);
}

.stack-row svg { width: 17px; height: 17px; flex-shrink: 0; }
.stack-row.crossed svg { stroke: var(--text-light-secondary); }
.stack-row.keep svg { stroke: var(--ok-green); }

/* --- Galería de plantillas (mockups en CSS, sin imágenes) ---------------- */

.mockups {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}

@media (min-width: 700px) { .mockups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mockups { grid-template-columns: repeat(3, 1fr); } }

/* Marco oscuro alrededor de la captura: la contiene por los cuatro lados,
   así no se confunde con el fondo claro de la sección (ambos son claros). */
.mockup {
  border-radius: 20px;
  overflow: hidden;
  border: none;
  background: var(--surface-dark);
  padding: 9px;
  box-shadow: 0 14px 38px rgba(44, 35, 36, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mockup:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(44, 35, 36, 0.3); }

/* Captura recortada al hero de cada ejemplo; el resto se ve al ampliar */
.mockup-shot {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  position: relative;
  line-height: 0;
}

.mockup-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}

/* Pista de "ver completa": aparece al pasar el cursor o al enfocar */
.zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(22, 19, 22, 0.82);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.zoom-hint svg { width: 15px; height: 15px; stroke: currentColor; }

.mockup:hover .zoom-hint,
.mockup-shot:focus-visible .zoom-hint { opacity: 1; transform: none; }

/* En pantallas táctiles no hay hover: la pista queda siempre visible */
@media (hover: none) {
  .zoom-hint { opacity: 1; transform: none; }
}

.mockup .caption {
  padding: 14px 8px 6px;
  background: transparent;
}

.mockup .caption strong { display: block; font-size: 0.9688rem; color: var(--text-dark-primary); }
.mockup .caption span { font-size: 0.8438rem; color: var(--text-dark-secondary); }

.mockup-note {
  margin-top: 20px;
  text-align: center;
  font-size: 0.8438rem;
  color: var(--text-light-secondary);
  font-style: italic;
}

/* --- Comparativa de tres caminos ---------------------------------------- */

.comp-grid { display: grid; gap: 20px; margin-top: 56px; align-items: start; }

@media (min-width: 900px) { .comp-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.comp-card {
  border-radius: 24px;
  padding: 32px 26px;
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  position: relative;
  height: 100%;
}

.comp-card .comp-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light-secondary);
  display: block;
  margin-bottom: 10px;
}

.comp-card h3 { font-size: 1.25rem; margin-bottom: 4px; }

.comp-card .comp-sub {
  font-size: 0.9063rem;
  color: var(--text-light-secondary);
  margin-bottom: 22px;
}

.comp-cost {
  padding: 16px 0 20px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 22px;
}

.comp-cost .big {
  display: block;
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.comp-cost .sub { font-size: 0.8438rem; color: var(--text-light-secondary); }

.comp-list { list-style: none; display: grid; gap: 12px; }

.comp-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9063rem;
  color: var(--text-light-secondary);
  line-height: 1.5;
}

.comp-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.comp-list li.no svg { stroke: #a8836f; }
.comp-list li.yes svg { stroke: var(--accent); }

/* Tarjeta ganadora, oscura y elevada */
.comp-card.winner {
  background: var(--bg-dark);
  color: var(--text-dark-primary);
  border-color: rgba(255,109,41,0.4);
  box-shadow: 0 18px 50px rgba(44,35,36,0.28);
  /* sin overflow:hidden — la etiqueta "La del viernes" debe sobresalir arriba */
}

.comp-card.winner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit; /* mantiene el glow dentro de las esquinas redondeadas */
  background: radial-gradient(ellipse at top left, rgba(255,109,41,0.16), transparent 58%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .comp-card.winner { transform: translateY(-14px); padding-top: 40px; padding-bottom: 40px; }
}

/* Eleva el contenido sobre el glow, sin tocar la etiqueta flotante */
.comp-card.winner > *:not(.winner-tag) { position: relative; }
.comp-card.winner .comp-kicker { color: var(--accent); }
.comp-card.winner .comp-sub,
.comp-card.winner .comp-cost .sub,
.comp-card.winner .comp-list li { color: var(--text-dark-secondary); }
.comp-card.winner .comp-cost { border-color: var(--border-dark); }

.winner-tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

.comp-card.winner .btn { width: 100%; margin-top: 26px; }

/* --- Cuatro pasos ------------------------------------------------------- */

.steps-grid { display: grid; gap: 20px; margin-top: 56px; }

@media (min-width: 700px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.step-card {
  border-radius: 22px;
  padding: 30px 24px;
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.step-card .step-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text-light);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
  font-weight: 600;
}

.step-card h3 { font-size: 1.1875rem; margin-bottom: 10px; }

.step-card p { font-size: 0.9375rem; color: var(--text-light-secondary); }

.step-card .time-pill {
  margin-top: auto;
  padding-top: 22px;
}

.step-card .time-pill span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(181,69,18,0.09);
  color: var(--accent-text-light);
  font-size: 0.8125rem;
  font-weight: 600;
}

.step-card .time-pill svg { width: 14px; height: 14px; stroke: currentColor; }

/* El paso final (integraciones) se destaca en oscuro */
.step-card.final {
  background: var(--bg-dark);
  color: var(--text-dark-primary);
  border-color: rgba(255,109,41,0.35);
  overflow: hidden;
}

.step-card.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at bottom right, rgba(255,109,41,0.16), transparent 60%);
  pointer-events: none;
}

.step-card.final > * { position: relative; }
.step-card.final .step-kicker { color: var(--accent); }
.step-card.final p { color: var(--text-dark-secondary); }
.step-card.final .time-pill span { background: rgba(255,109,41,0.14); color: var(--accent); }

.step-tools { list-style: none; display: grid; gap: 9px; margin-top: 16px; }

.step-tools li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--text-dark-secondary);
}

.step-tools svg { width: 16px; height: 16px; stroke: var(--accent); flex-shrink: 0; }
.step-tools strong { color: var(--text-dark-primary); font-weight: 600; }

/* --- Banda de CTA final ------------------------------------------------- */

.cta-band { text-align: center; max-width: 820px; margin: 0 auto 48px; position: relative; }
.cta-band h2 { margin: 18px 0 16px; }
.cta-band .subtitle { margin: 0 auto; }

.cta-meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--text-dark-secondary);
}

.cta-meta span { display: inline-flex; align-items: center; gap: 7px; }
.cta-meta svg { width: 15px; height: 15px; stroke: var(--accent); }

.cta-form-wrap { max-width: 480px; margin: 0 auto; position: relative; }

/* --- Etiqueta de inversión en las tarjetas comparativas ------------------ */

.comp-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 4px;
}

.comp-title-row h3 { margin-bottom: 0; }

.comp-invest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.comp-invest svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }

/* Lo que te cuesta: rojo puro (matiz 0°), bien separado del naranja de la
   marca para que no se confundan. Da 6.8:1 sobre blanco. */
.comp-invest.spend {
  background: rgba(176, 32, 32, 0.09);
  color: #b02020;
}

/* Lo que ganas: verde sobre la tarjeta oscura (9.3:1) */
.comp-invest.save {
  background: rgba(37, 211, 102, 0.14);
  color: #25d366;
}

/* --- Ilustración dentro de cada tarjeta de paso -------------------------- */

/* Ocupa el hueco entre el texto y la píldora de tiempo. El fondo blanco de
   la imagen se funde con el de la tarjeta, así que no lleva borde ni marco. */
.step-card .step-visual {
  margin: 20px -8px 0;
  border-radius: 12px;
  overflow: hidden;
}

.step-card .step-visual img {
  width: 100%;
  height: auto;
}

/* --- Aviso de sesión en curso (sustituye al contador entre 11:00 y 12:00 ET) --- */

.en-vivo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 109, 41, 0.12);
  border: 1px solid rgba(255, 109, 41, 0.4);
  font-size: 0.9688rem;
  color: var(--text-dark-primary);
  line-height: 1.45;
}

.en-vivo[hidden] { display: none; }

.en-vivo .dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 109, 41, 0.22);
  animation: pulse 2s ease-in-out infinite;
}

.en-vivo strong { color: var(--accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .en-vivo .dot { animation: none; }
}

/* --- Botones de la página de gracias ------------------------------------ */

/* Más compactos que el botón principal: aquí son acciones secundarias, no
   el CTA de una landing. nowrap evita que el texto se parta en dos líneas
   y duplique la altura del botón. */
.gracias-actions .btn {
  min-height: 46px;
  padding: 11px 22px;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.gracias-actions .btn svg { width: 18px; height: 18px; }

/* En móvil se apilan; que no ocupen todo el ancho de la pantalla */
@media (max-width: 599px) {
  .gracias-actions { align-items: center; }
  .gracias-actions .btn { width: auto; }
}


/* --- Vista ampliada de los ejemplos ------------------------------------- */

.visor {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 9, 11, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.visor.abierto { opacity: 1; visibility: visible; }

.visor-marco {
  position: relative;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: scale(0.97);
  transition: transform 0.25s ease;
}

.visor.abierto .visor-marco { transform: none; }

.visor img {
  max-width: 100%;
  max-height: calc(100dvh - 130px);
  width: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}

.visor-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-dark-secondary);
  font-size: 0.9375rem;
}

.visor-cerrar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.visor-cerrar:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent); }
.visor-cerrar svg { width: 15px; height: 15px; stroke: currentColor; }

/* Evita que el fondo se desplace mientras el visor está abierto */
body.visor-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .visor, .visor-marco { transition: none; }
}

/* ==========================================================================
   SECCIÓN "EL RESULTADO"  — texto y mockup lado a lado, tarjetas compactas
   ========================================================================== */

.res-grid {
  display: grid;
  gap: 18px;
  margin-top: 44px;
}

@media (min-width: 640px)  { .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .res-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Dos columnas dentro de la tarjeta: información a la izquierda, captura a
   la derecha. Así la tarjeta queda baja y las seis se ven de una vez. */
.res-card {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  border-radius: 18px;
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.res-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(44, 35, 36, 0.13); }

.res-info { position: relative; padding-left: 46px; }

.res-icon {
  position: absolute;
  left: 0;
  top: 1px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(235, 94, 40, 0.12);
}

.res-icon svg { width: 19px; height: 19px; stroke: var(--accent-on-light); }

.res-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent-text-light);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 5px;
}

.res-info h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 6px;
}

.res-info p {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-light-secondary);
}

/* La captura se ajusta al alto disponible sin estirar la tarjeta */
.res-shot { line-height: 0; }

.res-shot img {
  width: 100%;
  height: auto;
  max-height: 168px;
  object-fit: contain;
  object-position: center right;
}

/* Móvil: el texto arriba y la captura debajo, a lo ancho */
@media (max-width: 639px) {
  .res-card { grid-template-columns: 1fr; gap: 16px; }
  .res-shot img { max-height: 200px; object-position: center; }
}

/* --- Cierre de la sección ------------------------------------------------ */

.res-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 18px;
  /* Mismo color que el fondo de la ilustración del cohete: así la imagen se
     funde con el banner y no se recorta ningún borde. */
  background: #fffcf7;
  border: 1px solid rgba(235, 94, 40, 0.28);
  overflow: hidden;
}

.res-check {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-on-light);
}

.res-check svg { width: 22px; height: 22px; stroke: #fff; }

.res-banner p {
  flex: 1;
  font-size: 0.9688rem;
  line-height: 1.5;
  color: var(--text-light-primary);
}

.res-banner strong { color: var(--accent-text-light); font-weight: 600; }

.res-cohete {
  flex-shrink: 0;
  width: 120px;
  height: auto;
  margin: -12px -10px -20px 0;
  /* El fondo de la ilustración lleva un degradado propio, así que ningún
     color plano lo iguala del todo. Desvanecer los bordes disuelve el corte
     sin recortar el humo, que es lo llamativo del dibujo. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 14%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 639px) {
  .res-banner { flex-wrap: wrap; gap: 12px; padding: 18px 18px 0; }
  .res-banner p { flex: 1 1 100%; order: 3; }
  .res-cohete { width: 96px; margin: 0 -6px -8px auto; }
}