/* Landing: one idea per band, at most four attention points per screen. */
.small-btn { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
.hero { padding: clamp(48px, 10vh, 120px) 0 clamp(40px, 8vh, 88px); max-width: 980px; }
.hero h1 { font-size: clamp(2.3rem, 6.2vw, 4.4rem); line-height: 1.03; letter-spacing: -0.028em; max-width: 17ch; margin-bottom: 0.45em; }
.hero h1 .red { display: block; }
.hero .lead { font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.5; color: #cfcfcf; max-width: 46ch; margin-bottom: 1.6rem; }
.cta-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 1.2rem; }
.text-link { color: var(--text); font-weight: 500; text-decoration: none; border-bottom: 1px solid #555; padding-bottom: 2px; }
@media (hover: hover) { .text-link:hover { border-color: var(--text); } }

.band { padding: clamp(40px, 7vh, 72px) 0; border-top: 1px solid var(--line); }
.band h2 { margin-bottom: 1.4rem; }

.plain { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.plain li { padding: 7px 0 7px 22px; position: relative; }
.plain li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
footer a { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .more summary::after { transition: none; } }

/* "Conoce cómo funciona": dark pill with a red gradient ring that lights up on hover. */
.btn-glow { position: relative; display: inline-block; padding: 1.5px; border-radius: 12px; background: #262626; color: #fff; font-weight: 600; line-height: 1.5; text-decoration: none; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8); transition: transform 0.3s ease-in-out, box-shadow 0.5s ease; }
.btn-glow::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #ff7a59, #ed1e24 50%, #8f0f14); opacity: 0; transition: opacity 0.5s ease; }
.btn-glow-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 18px; border-radius: 11px; background: #0b0b0b; font-size: 0.92rem; }
.btn-glow-inner > * { transition: transform 0.5s ease; }
.btn-glow:active { transform: scale(0.95); }
.btn-glow:focus-visible { outline: 2px solid #ed1e24; outline-offset: 3px; }
.btn-glow:focus-visible::before { opacity: 1; }
@media (hover: hover) {
  .btn-glow:hover { transform: scale(1.05); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8), 0 0 22px -6px rgba(237, 30, 36, 0.55); }
  .btn-glow:hover::before { opacity: 1; }
  .btn-glow:hover .btn-glow-inner > * { transform: translateX(4px); }
}
/* Touch screens never hover: the ring stays softly lit. */
@media (hover: none) { .btn-glow::before { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) {
  .btn-glow, .btn-glow::before, .btn-glow-inner > * { transition: none; }
  .btn-glow:hover, .btn-glow:active { transform: none; }
  .btn-glow:hover .btn-glow-inner > * { transform: none; }
}

/* Hero photo: desktop, tablet and landscape only (phones in portrait never download it).
   Layers: the photo with a slow camera push, a red glow breathing on the monitors,
   static scanlines and dot screen on the monitor side, and the shade that keeps the
   text readable and fades the photo into the page. Only transform and opacity animate. */
.hb-photo, .hb-glow, .hb-texture, .hb-shade { display: none; }
@media (min-width: 768px) and (orientation: landscape), (min-width: 1024px) {
  .hero-bg { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); }
  .hb-photo, .hb-glow, .hb-texture, .hb-shade { display: block; position: absolute; inset: 0; pointer-events: none; }
  .hb-photo {
    inset: -3%; z-index: -4;
    background: image-set(url("/assets/hero-1800.webp") type("image/webp"), url("/assets/hero-1800.jpg") type("image/jpeg")) right center / cover no-repeat;
    transform: scale(1.03);
    animation: hb-push 26s ease-in-out infinite alternate;
    will-change: transform;
  }
  .hb-glow {
    z-index: -3; mix-blend-mode: screen;
    background: radial-gradient(ellipse 22% 38% at 74% 46%, rgba(237, 30, 36, 0.26), transparent 70%);
    animation: hb-breathe 7s ease-in-out infinite alternate;
  }
  .hb-texture {
    z-index: -2; opacity: 0.5;
    background:
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0 1px, rgba(255, 255, 255, 0.05) 1px 2px, transparent 2px 4px),
      radial-gradient(circle, rgba(255, 255, 255, 0.16) 0.55px, transparent 0.9px) 0 0 / 4px 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.6) 62%, #000 78%);
    mask-image: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.6) 62%, #000 78%);
  }
  .hb-shade {
    z-index: -1;
    background:
      linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 70%, var(--bg) 100%),
      linear-gradient(90deg, var(--bg) 0%, rgba(17, 17, 17, 0.85) 30%, rgba(17, 17, 17, 0.2) 60%, transparent 80%),
      radial-gradient(ellipse 80% 90% at 60% 48%, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
  }
  .hero-bg .hero { min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape), (min-width: 1024px) and (max-width: 1280px) {
  .hb-photo { background-image: image-set(url("/assets/hero-1200.webp") type("image/webp"), url("/assets/hero-1200.jpg") type("image/jpeg")); }
}
@keyframes hb-push { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-0.8%, 0.3%, 0); } }
@keyframes hb-breathe { from { opacity: 0.55; } to { opacity: 1; } }

/* Headline enters line by line, quickly: everything is in place in about half a second. */
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .ln > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .ln > span { animation: hb-lift 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hero h1 .ln + .ln > span { animation-delay: 0.08s; }
  .hero .lead, .hero .cta-row, .hero > .small { animation: hb-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
}
@keyframes hb-lift { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hb-photo, .hb-glow { animation: none; } }

/* "Cómo funciona": steps on a red-lit track, two panels (what we do / what you do) and
   the full catalog. Brand palette only; a static red ambient light, nothing animated. */
.process { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 9vh, 104px) 0; border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 40% 45% at 92% 0%, rgba(237, 30, 36, 0.16), transparent 70%), radial-gradient(ellipse 35% 40% at 0% 60%, rgba(237, 30, 36, 0.07), transparent 70%), var(--bg); }
.process-head { display: flex; align-items: center; gap: 28px; margin-bottom: clamp(32px, 5vh, 48px); flex-wrap: wrap; }
.process-head h2 { margin: 0; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -0.03em; }
.process-head p { margin: 0; max-width: 30ch; color: var(--muted); line-height: 1.5; padding-left: 24px; border-left: 1px solid var(--line); }
.steps { list-style: none; padding: 0; margin: 0 0 clamp(36px, 6vh, 56px); display: grid; gap: 32px; }
.steps li { position: relative; }
.step-n { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--red); background: #1a0d0d; color: #fff; font-size: 1.25rem; font-weight: 500; box-shadow: 0 0 22px rgba(237, 30, 36, 0.25); position: relative; z-index: 1; }
.steps h3 { margin: 20px 0 10px; font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.015em; line-height: 1.2; }
.steps p { color: var(--muted); margin: 0; line-height: 1.6; max-width: 38ch; }
@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
  /* The track: a red line from each number toward the next step. */
  .steps li::before { content: ""; position: absolute; top: 24px; left: 60px; right: -12px; height: 1px; background: linear-gradient(90deg, rgba(237, 30, 36, 0.45), rgba(237, 30, 36, 0.08)); }
  .steps li:last-child::before { right: 30%; background: linear-gradient(90deg, rgba(237, 30, 36, 0.45), transparent); }
}
.panels { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 820px) { .panels { grid-template-columns: 1fr 1fr; } }
.panel { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 3vw, 40px);
  background: radial-gradient(ellipse 70% 60% at 85% 65%, rgba(217, 26, 33, 0.16), transparent 70%), linear-gradient(135deg, var(--surface), #141010 55%, #121212); }
.panel.alt { background: radial-gradient(ellipse 70% 60% at 85% 35%, rgba(237, 30, 36, 0.2), transparent 70%), linear-gradient(135deg, var(--surface), #141010 55%, #121212); }
/* Dot screen on the lit side, static. */
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background: radial-gradient(circle, rgba(237, 30, 36, 0.45) 0.6px, transparent 1px) 0 0 / 4px 4px;
  -webkit-mask-image: linear-gradient(105deg, transparent 45%, #000 100%); mask-image: linear-gradient(105deg, transparent 45%, #000 100%); }
.panel-label { margin: 0 0 12px; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.panel h3 { margin: 0 0 24px; font-size: clamp(1.7rem, 2.7vw, 2.4rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.12; }
.panel h3 .red { display: block; font-weight: 600; }
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.items li { display: flex; align-items: center; gap: 14px; color: #e2e2e2; line-height: 1.4; }
.after-note { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); max-width: 46ch; }
.more { border: 1px solid rgba(237, 30, 36, 0.28); border-radius: 14px; padding: 0 22px; background: linear-gradient(110deg, rgba(237, 30, 36, 0.08), transparent 50%), var(--bg); }
.more summary { cursor: pointer; min-height: 60px; padding: 16px 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; color: var(--muted); font-size: 1.5rem; font-weight: 300; line-height: 1; transition: transform 200ms ease; }
.more[open] summary::after { transform: rotate(45deg); }
.more summary:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 6px; }
.more-body { display: grid; gap: 4px 28px; padding: 4px 0 22px; border-top: 1px solid var(--line); }
@media (min-width: 820px) { .more-body { grid-template-columns: repeat(3, 1fr); } }
.more-body h4 { margin: 18px 0 6px; font-size: 0.95rem; }
.more-body p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 0.95rem; }
@media (max-width: 700px) { .process-head p { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Inversión: the price as the headline, three facts, the fine print, one primary button,
   and a summary card of the 90-day plan. Brand palette, static light. */
.invest { position: relative; padding: clamp(56px, 9vh, 104px) 0; border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 45% 55% at 82% 45%, rgba(237, 30, 36, 0.12), transparent 70%), var(--bg); }
.invest-grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
/* Phones: text, plan card, then the button last, where the reading ends. */
.invest-grid { grid-template-areas: "text" "card" "cta"; }
.invest-text { grid-area: text; } .invest-card { grid-area: card; } .invest-cta { grid-area: cta; margin: 0; }
@media (min-width: 900px) { .invest-grid { grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "text card" "cta card"; row-gap: 0; } .invest-cta { align-self: start; } }
.price-hero { margin: 0; font-size: clamp(3.2rem, 7vw, 5.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.price-tax { margin: 12px 0 22px; color: #cfcfcf; font-size: clamp(1.1rem, 1.8vw, 1.45rem); }
.invest-intro { margin: 0 0 28px; color: #cfcfcf; line-height: 1.55; max-width: 46ch; }
.facts { list-style: none; margin: 0 0 24px; padding: 24px 0 0; border-top: 1px solid var(--line); display: grid; gap: 18px; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts b { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-weight: 600; }
.facts b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.facts span { display: block; color: var(--muted); font-size: 0.93rem; line-height: 1.5; padding-left: 18px; }
.legal { margin: 0 0 28px; color: #8f8f8f; font-size: 0.85rem; line-height: 1.6; max-width: 70ch; }
.invest-card { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(237, 30, 36, 0.3); border-radius: 20px; padding: clamp(28px, 3.5vw, 48px);
  background: radial-gradient(ellipse 80% 60% at 100% 30%, rgba(237, 30, 36, 0.18), transparent 70%), linear-gradient(145deg, var(--surface), #141010 60%, #121212);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); }
.invest-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background: radial-gradient(circle, rgba(237, 30, 36, 0.45) 0.6px, transparent 1px) 0 0 / 5px 5px;
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000); mask-image: linear-gradient(90deg, transparent 45%, #000); }
.invest-card p { margin: 0; }
.ic-label, .ic-sub, .ic-help { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.ic-big { margin: 10px 0 8px !important; font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.invest-card hr { border: 0; border-top: 1px solid var(--line); width: 70%; margin: 26px 0; }
.ic-discount { color: var(--red); font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ic-sub.strong { color: #e2e2e2; font-size: 0.9rem; margin-top: 8px !important; }
.ic-help { margin-top: 6px !important; font-size: 0.7rem; letter-spacing: 0.1em; }
.ic-note { display: flex; align-items: center; gap: 14px; color: #cfcfcf; line-height: 1.5; max-width: 32ch; }
.bars { display: flex; gap: 4px; align-items: flex-end; height: 22px; flex: none; }
.bars i { width: 3px; background: var(--red); }
.bars i:nth-child(1) { height: 8px; } .bars i:nth-child(2) { height: 18px; } .bars i:nth-child(3) { height: 12px; }
/* Phones: the top bar keeps the logo and the language switch; "Conoce cómo funciona" is
   right below in the hero, so the header button steps aside instead of wrapping. */
@media (max-width: 480px) { .topbar .btn-glow { display: none; } }