/* ==========================================================================
   LU PEÑA · ARQ. STUDIO — v3 "más punch" (2026-10-04)
   Capa sobre styles.css + v2.css. Respaldo de v2 en _RESPALDO_SITE_v2_2026-10-04.
   · Terracota más intensa + degradados ámbar / petróleo (ref. identidad)
   · Modo oscuro por defecto (el claro sigue disponible)
   · Space Grotesk en negritas para la jerarquía; Fraunces itálica de acento
   · Brillo (glow) en todo lo naranja · un tono de fondo distinto por sección
   · Ilustraciones en volúmenes sólidos (ref. animaciones "estilo 02")
   ========================================================================== */

/* ---------------- TOKENS ---------------- */
:root {
  --cal: #F6F1E9;
  --carbon: #17120F;
  --carbon-suave: #5B5149;
  --piedra: #ECE4D8;
  --terracota: #E2511F;
  --terra-deep: #B23A14;
  --amber: #F2913F;
  --teal: #2C6E70;
  --teal-deep: #163C3E;
  --on-terra: #FFFFFF;
  --card: #FFFDF9;
  --line: color-mix(in srgb, var(--carbon) 12%, transparent);
  --glow: color-mix(in srgb, var(--terracota) 42%, transparent);
  --glow-soft: color-mix(in srgb, var(--terracota) 22%, transparent);
  --grad: linear-gradient(120deg, var(--terracota) 0%, var(--amber) 100%);

  --bg-hero: #EFE7DB;
  --bg-vistazo: #F6F1E9;
  --bg-studio: #E7EDEA;
  --bg-method: #F5E5DA;
  --bg-ways: #F3EDE4;
  --bg-cotiza: #E6ECE9;
  --bg-foot: #EDE4D7;

  /* volúmenes (ilustraciones) */
  --m-top: #EE5A28;
  --m-l: #C23F17;
  --m-r: #8A2810;
  --m-win: #5A1C0B;
  --m-g-t: #E4DACB;
  --m-g-l: #D2C5B4;
  --m-g-r: #BFB1A0;
  --m-o-t: #CFC6BA;
  --m-o-l: #B8AEA1;
  --m-o-r: #A39889;
  --m-person: #17120F;
  --m-shadow: rgba(23, 18, 15, 0.22);

  --iso-glow: var(--amber);
  --font-display: 'Space Grotesk', sans-serif;
}
html[data-theme="dark"] {
  --cal: #0E0C0B;
  --carbon: #F5EFE7;
  --carbon-suave: #B3A89C;
  --piedra: #1A1513;
  --barro-claro: #5A4636;
  --terracota: #F45D2A;
  --terra-deep: #C23A14;
  --amber: #FF9F55;
  --teal: #3A8C8E;
  --teal-deep: #0F2B2D;
  --card: #171311;
  --line: color-mix(in srgb, var(--carbon) 11%, transparent);
  --glow: color-mix(in srgb, var(--terracota) 60%, transparent);
  --glow-soft: color-mix(in srgb, var(--terracota) 30%, transparent);

  --bg-hero: #0B0908;
  --bg-vistazo: #110E0D;
  --bg-studio: #0B1819;
  --bg-method: #170D0A;
  --bg-ways: #0F0D0C;
  --bg-cotiza: #0A1516;
  --bg-foot: #070606;

  --m-win: #2A0D06;
  --m-g-t: #2B2420;
  --m-g-l: #1E1815;
  --m-g-r: #16120F;
  --m-o-t: #4A423C;
  --m-o-l: #3A332E;
  --m-o-r: #2C2622;
  --m-person: #F5EFE7;
  --m-shadow: rgba(0, 0, 0, 0.5);
}
html, body { background: var(--cal); }

/* ---------------- TIPOGRAFÍA: jerarquía en negritas ---------------- */
body { font-weight: 400; line-height: 1.75; }
html[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; }
.mono { font-family: var(--font-word); font-weight: 600; letter-spacing: 0.16em; font-size: 0.7rem; }
em { font-weight: 600; }
strong, b { font-weight: 700; }
.serif-accent, .lp-hero__title .accent, .studio__essence em, .site-foot__title em, .closing__quote em {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.02em;
  color: var(--terracota);
  text-shadow: 0 0 28px var(--glow);
}

/* etiquetas de sección: negrita + línea luminosa */
.section-label {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em;
  color: var(--terracota); text-shadow: 0 0 18px var(--glow);
}
.section-label::before {
  content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--grad);
  box-shadow: 0 0 12px var(--glow);
}
.sec-title { font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 4.9rem); line-height: 0.98; letter-spacing: -0.045em; }
.sec-lead { font-size: 1.08em; color: var(--carbon-suave); }

/* todo lo naranja brilla */
em, .lp-hero__kicker, .vz-week__badge, .world__lead strong, .way__unit, .way__cta, .pm__typo, .pj-card__typo,
.pj-intro__k, .pj-hero__stats strong, .qz__count, .method__proof, .studio__data dt, .site-foot__grid .mono,
.site-foot__hook, .pj-cta__k, .closing__steps, .qz-res__range, .qz-res__cols .mono, .qz-res__status,
.nav__links a span, .world__go, .cotiza__mail:hover, .pj-crumbs a:hover, .lp-hero__cap-typo {
  text-shadow: 0 0 18px var(--glow);
}

/* ---------------- BOTONES Y CTA (más presencia) ---------------- */
.btn { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.14em; padding: 0.95rem 1.8rem; }
.btn--solid, .btn-cta, .pm__act--cta {
  background: var(--grad); border-color: transparent; color: var(--on-terra) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 12px 34px -10px var(--glow), 0 0 44px -14px var(--terracota);
}
.btn--solid:hover, .btn-cta:hover, .pm__act--cta:hover {
  background: var(--grad); filter: brightness(1.08) saturate(1.1); transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 16px 40px -8px var(--glow), 0 0 70px -10px var(--terracota);
}
.btn-cta { font-weight: 700; }
.btn--ghost { border-color: color-mix(in srgb, var(--carbon) 30%, transparent); font-weight: 700; }
.btn--ghost:hover { border-color: var(--terracota); color: var(--terracota); box-shadow: 0 0 26px -6px var(--glow); }

.btn-glow, .btn-line {
  display: inline-flex; align-items: center; gap: 0.9rem; border-radius: 999px;
  font-family: var(--font-word); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, filter 0.4s, border-color 0.3s, color 0.3s;
}
.btn-glow {
  padding: 0.55rem 0.55rem 0.55rem 1.6rem; color: #fff; background: var(--grad);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 14px 40px -10px var(--glow), 0 0 70px -16px var(--terracota);
  animation: glowPulse 3.4s ease-in-out infinite;
}
.btn-glow i, .btn-line i {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 1rem;
  transition: transform 0.4s var(--ease-out), background 0.3s;
}
.btn-glow i { background: rgba(255,255,255,0.2); }
.btn-glow:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,0.24) inset, 0 20px 46px -8px var(--glow), 0 0 90px -10px var(--terracota); }
.btn-glow:hover i { transform: rotate(45deg); background: rgba(255,255,255,0.3); }
.btn-line { padding: 0.55rem 0.55rem 0.55rem 1.6rem; color: var(--carbon); border: 1px solid color-mix(in srgb, var(--carbon) 32%, transparent); background: color-mix(in srgb, var(--cal) 30%, transparent); background: color-mix(in srgb, var(--cal) 55%, transparent); }
.btn-line i { border: 1px solid color-mix(in srgb, var(--carbon) 25%, transparent); }
.btn-line:hover { border-color: var(--terracota); color: var(--terracota); box-shadow: 0 0 30px -8px var(--glow); }
.btn-line:hover i { transform: translateX(4px); border-color: var(--terracota); }
@keyframes glowPulse { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.16) inset, 0 14px 44px -8px var(--glow), 0 0 90px -10px var(--terracota); } }

/* ---------------- NAV: solo el símbolo ---------------- */
.nav, .nav.nav--dark {
  background: color-mix(in srgb, var(--cal) 55%, transparent); color: var(--carbon);
  border-bottom: 1px solid var(--line);
}
.nav:not(.nav--scrolled) { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav__brand, .nav--dark .nav__brand { color: var(--terracota); }
.nav__monogram { height: 46px; filter: drop-shadow(0 0 12px var(--glow)); transition: filter 0.4s, transform 0.4s var(--ease-out); }
.nav__brand:hover .nav__monogram { filter: drop-shadow(0 0 20px var(--terracota)); transform: rotate(-4deg) scale(1.06); }
.nav__links a { font-weight: 600; font-size: 0.68rem; letter-spacing: 0.14em; }
.nav__cta { border: 0 !important; background: var(--grad); color: #fff !important; font-weight: 700 !important; box-shadow: 0 0 30px -6px var(--glow); }
.nav__cta:hover { filter: brightness(1.1); box-shadow: 0 0 40px -4px var(--glow); }
.nav__toggle span { background: var(--carbon) !important; }
.mobile-menu { background: color-mix(in srgb, #0B0908 94%, transparent); }
.mobile-menu a { font-weight: 700; color: #F5EFE7; }
.site-foot__brand .mark { height: 54px; color: var(--terracota); filter: drop-shadow(0 0 16px var(--glow)); }

/* ---------------- FONDOS POR SECCIÓN (tono propio + manchas de color) ---------------- */
.vistazo, .studio, .method, .ways, .closing, .cotiza, .site-foot, .pj-hero, .pj-worlds, .pj-works, .pj-media, .pj-cta { position: relative; isolation: isolate; }
.vistazo::before, .studio::before, .method::before, .ways::before, .cotiza::before, .site-foot::before, .pj-media::before, .pj-cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--terracota) 30%, var(--amber) 55%, transparent);
  box-shadow: 0 0 18px var(--glow); opacity: 0.7;
}
.vistazo {
  background:
    radial-gradient(55% 45% at 100% 0%, color-mix(in srgb, var(--terracota) 20%, transparent), transparent 70%),
    radial-gradient(45% 40% at 0% 100%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%),
    var(--bg-vistazo);
}
.studio {
  background:
    radial-gradient(50% 40% at 90% 10%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%),
    radial-gradient(60% 50% at 0% 40%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 70%),
    var(--bg-studio);
}
.method {
  margin: clamp(5rem, 11vw, 8rem) calc(var(--pad) * -1) 0; padding: clamp(5rem, 11vw, 8rem) var(--pad);
  background:
    radial-gradient(55% 50% at 0% 100%, color-mix(in srgb, var(--terracota) 26%, transparent), transparent 70%),
    radial-gradient(40% 35% at 100% 0%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 70%),
    var(--bg-method);
}
.ways {
  margin: 0 calc(var(--pad) * -1) calc(clamp(6rem, 13vh, 10rem) * -1); padding: clamp(5rem, 11vw, 8rem) var(--pad) clamp(6rem, 13vh, 10rem);
  background:
    radial-gradient(50% 45% at 50% 0%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%),
    var(--bg-ways);
}
.method > :not(.section-topo), .ways > :not(.section-topo), .vistazo > :not(.section-topo) { position: relative; z-index: 1; }
.cotiza {
  background:
    radial-gradient(45% 45% at 85% 20%, color-mix(in srgb, var(--terracota) 24%, transparent), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--teal) 34%, transparent), transparent 70%),
    var(--bg-cotiza);
}
.site-foot {
  background:
    radial-gradient(70% 60% at 50% 120%, color-mix(in srgb, var(--terracota) 30%, transparent), transparent 70%),
    radial-gradient(40% 40% at 0% 0%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%),
    var(--bg-foot);
  border-top: 0;
}

/* ==========================================================================
   HERO — renders a pantalla completa
   ========================================================================== */
.lp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem;
  min-height: 100svh; padding: clamp(7rem, 15vh, 9rem) var(--pad) clamp(8rem, 16vh, 10rem);
  background: var(--bg-hero);
}
.lp-hero__window {
  position: absolute; inset: 0; z-index: 0; height: auto; min-height: 0; border-radius: 0; box-shadow: none; cursor: default;
  background: var(--bg-hero);
}
.lp-hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-hero__window.is-live .lp-hero__fallback { opacity: 0; }
.lp-hero__reveal { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg-hero) 94%, transparent) 0%, color-mix(in srgb, var(--bg-hero) 78%, transparent) 30%, color-mix(in srgb, var(--bg-hero) 28%, transparent) 58%, transparent 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg-hero) 88%, transparent) 0%, transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-hero) 70%, transparent) 0%, transparent 20%);
}
.lp-hero__copy { position: relative; z-index: 2; max-width: 700px; }
.lp-hero__kicker { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--carbon); font-weight: 700; margin-bottom: 1.4rem; padding: 0.55em 1em; border-radius: 999px; background: color-mix(in srgb, var(--cal) 62%, transparent); border: 1px solid var(--line); text-shadow: none; }
.lp-hero__kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 12px var(--terracota); animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--terracota) 20%, transparent), 0 0 18px var(--terracota); } }
.lp-hero__title { font-size: clamp(3.3rem, 8.4vw, 8.2rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.055em; }
.lp-hero__title .accent {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 0 26px var(--glow)); padding-right: 0.08em;
}
.lp-hero__sub { font-size: clamp(1.02rem, 1.25vw, 1.18rem); color: var(--carbon); opacity: 0.86; max-width: 33em; }
.lp-hero__sub em { color: var(--terracota); font-weight: 700; }
.lp-hero__actions { gap: 0.9rem; margin-top: 2.2rem; }
.lp-hero__metrics { border-top-color: var(--line); gap: clamp(1.4rem, 3.4vw, 3rem); }
.lp-hero__metrics strong {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3.2rem); letter-spacing: -0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px var(--glow));
}
.lp-hero__metrics span { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.62rem; color: var(--carbon-suave); }

/* retrato grande con anillo de texto giratorio */

.lp-hero__cap {
  position: absolute; right: var(--pad); bottom: 2rem; left: auto; z-index: 3; width: min(380px, calc(100% - 2 * var(--pad)));
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.2rem 1rem;
  padding: 1rem 1.2rem; border-radius: 18px;
  background: color-mix(in srgb, var(--cal) 62%, transparent); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.lp-hero__cap > * { transition: opacity 0.3s ease, transform 0.3s ease; }
.lp-hero.is-swapping .lp-hero__cap > *:not(.lp-hero__dots) { opacity: 0; transform: translateY(4px); }
.lp-hero__cap-title { font-weight: 700; }
.lp-hero__dots b { background: var(--grad); box-shadow: 0 0 8px var(--terracota); }
.lp-hero__dots i.is-on b { animation-duration: 8.2s; }
.lp-hero__scroll { z-index: 3; bottom: 2.4rem; }

/* ==========================================================================
   TARJETAS en modo oscuro (contraste con el fondo)
   ========================================================================== */
.vz-week, .world__tile, .way, .qz, .pj-tile, .pm__panel { background: var(--card); }
.vz-week { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0,0,0,0.6); }
.world__tile, .pj-tile { box-shadow: inset 0 0 0 1px var(--line); }
.world__tile:hover, .pj-tile:hover, .pj-tile.is-on { box-shadow: inset 0 0 0 1px var(--terracota), 0 0 40px -12px var(--glow); }
.world__name, .pj-tile__name { font-weight: 700; }
.vz-week__title, .world__title, .ways__title, .way h3, .studio__title, .qz__q, .pm__title, .pj-hero__title, .pj-worlds__title, .pj-cta__title { font-weight: 700; letter-spacing: -0.04em; }
.vz-week__stamp { background: var(--grad); box-shadow: 0 0 40px -4px var(--glow); font-weight: 700; }
.vz-slot__kind { background: var(--grad); box-shadow: 0 0 22px -2px var(--glow); font-weight: 700; }
.vz-slot { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0,0,0,0.7); }
.way { box-shadow: inset 0 0 0 1px var(--line); }
.way:hover { box-shadow: inset 0 0 0 1px var(--terracota), 0 0 50px -14px var(--glow); }
.way__cta { font-weight: 700; }
.chips li { font-weight: 600; }

/* ==========================================================================
   QUIÉN SOY — carrusel de fotos
   ========================================================================== */
@media (min-width: 901px) { .studio__grid { grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.5fr); } }
.studio__title { font-size: clamp(3rem, 7vw, 6rem); }
.studio__lead { font-weight: 500; }
.studio__data dt { font-weight: 700; }
.lu-reel { position: sticky; top: 110px; margin: 0; }
.lu-reel__frame {
  position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: #000; cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--terracota) 45%, transparent), 0 0 70px -20px var(--glow), 0 40px 80px -40px rgba(0,0,0,0.6);
}
.lu-reel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; }
.lu-reel__img.is-prev { opacity: 1; z-index: 1; }
.lu-reel__img.is-on {
  opacity: 1; z-index: 2; animation: reelIn 1.1s var(--ease-out) both, reelZoom var(--dur, 3600ms) linear both;
}
@keyframes reelIn { from { clip-path: circle(0% at 50% 82%); } to { clip-path: circle(150% at 50% 82%); } }
@keyframes reelZoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.lu-reel__frame::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 22%, transparent 70%, rgba(0,0,0,0.6)); }
.lu-reel__bar { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 4; display: flex; gap: 4px; }
.lu-reel__bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.28); overflow: hidden; position: relative; }
.lu-reel__bar i::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px var(--terracota); }
.lu-reel__bar i.is-past::after { transform: scaleX(1); }
.lu-reel__bar i.is-on::after { animation: reelTick var(--dur, 3600ms) linear forwards; }
@keyframes reelTick { to { transform: scaleX(1); } }
.lu-reel__count { position: absolute; top: 30px; left: 18px; z-index: 4; color: #fff; font-size: 0.7rem; letter-spacing: 0.12em; }
.lu-reel__count b { font-size: 2rem; letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 20px var(--terracota); vertical-align: -0.25em; margin-right: 0.15em; }
.lu-reel__cap { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 4; color: #fff !important; font-size: 0.72rem; letter-spacing: 0.1em; line-height: 1.5; margin: 0 !important; }

/* ==========================================================================
   MÉTODO — volúmenes + números que ruedan
   ========================================================================== */
.method .sec-title { font-size: clamp(2.6rem, 6vw, 5.2rem); }
@media (min-width: 901px) { .method__layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(1.5rem, 3vw, 3rem); } }
.method__stage-wrap { top: 10vh; height: 80vh; }
.method__stage { position: relative; flex: 1; min-height: 0; }
.mass { width: 100%; height: 100%; overflow: visible; }
.method__big { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; line-height: 1; }
.method__big .odo { font-size: clamp(4rem, 9vw, 7.4rem); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--terracota); filter: drop-shadow(0 0 16px var(--glow)); }
.method__big small { font-size: 1.1rem; font-weight: 700; color: var(--carbon-suave); letter-spacing: 0.05em; }

/* odómetro */
.odo { display: inline-flex; line-height: 1; height: 1em; overflow: hidden; vertical-align: baseline; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; }
.odo__s { display: flex; flex-direction: column; transition: transform 1s cubic-bezier(0.2, 0.9, 0.15, 1); }
.odo__s i { display: block; height: 1em; font-style: normal; text-align: center; }

.method__step { opacity: 0.25; padding: 18vh 0; }
.method__step.is-active { opacity: 1; }
.method__n { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.method__n .odo { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 4.4vw, 3.8rem); letter-spacing: -0.05em; color: var(--terracota); text-shadow: 0 0 26px var(--glow); }
.method__n b { font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; padding: 0.45em 0.9em; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--terracota) 50%, transparent); color: var(--terracota); text-shadow: 0 0 12px var(--glow); }
.method__step h3 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.04; }
.method__gets { background: none !important; padding: 0 !important; }
.method__gets > .mono { color: var(--carbon-suave) !important; margin-bottom: 0.6rem !important; }
.gets { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.gets i { font-style: normal; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 600; padding: 0.5em 0.95em 0.5em 0.6em; border-radius: 999px; background: color-mix(in srgb, var(--terracota) 10%, transparent); border: 1px solid color-mix(in srgb, var(--terracota) 35%, transparent); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.5s ease, transform 0.6s var(--ease-out); }
.gets i b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; background: var(--grad); color: #fff; box-shadow: 0 0 12px var(--glow); }
.method__step.is-active .gets i { opacity: 1; transform: none; transition-delay: calc(var(--k) * 140ms + 0.35s); }
.method__dots li.is-on { background: var(--grad); box-shadow: 0 0 10px var(--terracota); }

/* volúmenes */
.mb polygon { stroke: var(--m-r); stroke-width: 0.6; stroke-linejoin: round; fill-opacity: var(--fo, 1); }
.mb__t { fill: var(--m-top); }
.mb__l { fill: var(--m-l); }
.mb__r { fill: var(--m-r); }
.mb--wire polygon { stroke: var(--terracota); stroke-width: 1.3; stroke-dasharray: 5 4; animation: isoFlow 1.6s linear infinite; }
.mb--old .mb__t { fill: var(--m-o-t); } .mb--old .mb__l { fill: var(--m-o-l); } .mb--old .mb__r { fill: var(--m-o-r); }
.mb--old polygon { stroke: var(--m-o-r); }
.mg__t { fill: var(--m-g-t); } .mg__l { fill: var(--m-g-l); } .mg__r { fill: var(--m-g-r); }
.mp__b { fill: var(--m-person); }
.mp__sh { fill: var(--m-shadow); }
.mt__c { fill: var(--teal); }
.mt__k { stroke: var(--m-person); stroke-width: 1.6; }
.mfx-grid { fill: none; stroke: var(--terracota); stroke-width: 0.7; stroke-opacity: 0.55; }
.mfx-sun circle { fill: var(--amber); filter: drop-shadow(0 0 12px var(--amber)); }
.mfx-rays { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; fill: none; }
.mfx-ray { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 3 6; fill: none; animation: isoFlow 1.2s linear infinite; }
.mfx-wind path { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 8 7; stroke-linecap: round; animation: isoFlow 1s linear infinite; filter: drop-shadow(0 0 6px var(--teal)); }
.mfx-view path { fill: none; stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 4 5; animation: isoFlow 1.3s linear infinite; }
.mc__line { fill: none; stroke: color-mix(in srgb, var(--carbon) 70%, transparent); stroke-width: 1.1; }
.mc__dot { fill: var(--terracota); filter: drop-shadow(0 0 6px var(--terracota)); }
.mc__txt { font-family: var(--font-word); }
.mc__n { font-weight: 700; font-size: 46px; fill: var(--carbon); letter-spacing: -1px; }
.mc__t { font-weight: 600; font-size: 21px; fill: var(--carbon-suave); letter-spacing: 0.4px; }

/* ==========================================================================
   ILUSTRACIONES (todas): de línea → volúmenes sólidos terracota
   ========================================================================== */
.iso polygon, .iso polyline, .iso line, .iso circle, .iso ellipse, .iso path, .iso rect { stroke: color-mix(in srgb, var(--m-r) 80%, #000); stroke-width: 0.5; }
.iso .ft { fill: var(--m-top); }
.iso .fl { fill: var(--m-l); }
.iso .fr { fill: var(--m-r); }
.iso .plate.ft, .iso .rug, .iso .linen { fill: var(--m-g-t); }
.iso .plate.fl { fill: var(--m-g-l); } .iso .plate.fr { fill: var(--m-g-r); }
.iso .plate { stroke: var(--m-g-r); }
.iso .wall.fl, .iso .wall.fr, .iso .wall.ft { fill: var(--m-g-t); stroke: var(--m-g-r); }
.iso .win, .iso .door { fill: var(--m-win); stroke: none; }
.iso .sign { fill: var(--amber); }
.iso .pv { fill: var(--teal-deep); stroke: var(--teal); }
.iso .green, .iso .leaf { fill: var(--teal); stroke: color-mix(in srgb, var(--teal) 70%, #000); }
.iso .pool { fill: color-mix(in srgb, var(--teal) 60%, #9FD6D3); stroke: none; }
.iso .road { fill: var(--m-g-l); stroke: none; }
.iso .ln, .iso .trunk, .iso .dim, .iso .thin { stroke: var(--m-person); stroke-width: 1; stroke-opacity: 0.7; }
.iso .gridln { stroke: var(--terracota); stroke-opacity: 0.4; stroke-width: 0.6; }
.iso .wire { stroke: var(--terracota); stroke-width: 1.2; }
.iso .old.fl, .iso .old.fr, .iso .old.ft { fill: var(--m-o-t); stroke: var(--m-o-r); }
.iso .sun circle { fill: var(--amber); stroke: none; filter: drop-shadow(0 0 6px var(--amber)); }
.iso .sun__rays line { stroke: var(--amber); stroke-width: 1.6; }
.iso .air__p, .iso .air__h { stroke: var(--teal); stroke-width: 1.5; }
.iso .air--sun .air__p, .iso .air--sun .air__h { stroke: var(--amber); }
.iso .campath { stroke: var(--amber); stroke-width: 1.4; }
.iso .cam__body rect, .iso .cam__body polygon { fill: var(--m-person); stroke: none; }
.iso .orbit { stroke: var(--amber); stroke-width: 1.8; }
/* las piezas "suben" en vez de dibujarse */
.iso.is-primed .d {
  stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1;
  opacity: 0; transform: translateY(18px); transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity 0.45s ease calc(var(--i) * 10ms), transform 0.8s var(--ease-out) calc(var(--i) * 10ms);
}
.iso.is-primed.is-on .d { opacity: 1; transform: none; }
.iso.is-primed .wire.d { stroke-dasharray: 3 3; }
.world__tile:hover .iso .win, .way:hover .iso .win, .pj-tile:hover .iso .win, .pj-tile.is-on .iso .win, .qz-opt--svc:hover .iso .win, .qz-opt--svc.is-sel .iso .win { fill: var(--amber); filter: drop-shadow(0 0 4px var(--amber)); }

/* ==========================================================================
   CIERRE · COTIZADOR · PIE
   ========================================================================== */
.closing { background: #0A0807; }
.closing::after {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(35% 30% at 30% 35%, color-mix(in srgb, #F45D2A 40%, transparent), transparent 70%),
    radial-gradient(30% 28% at 70% 65%, color-mix(in srgb, #FF9F55 26%, transparent), transparent 70%),
    radial-gradient(40% 35% at 75% 25%, color-mix(in srgb, #3A8C8E 30%, transparent), transparent 70%);
  will-change: transform; animation: blobDrift 22s ease-in-out infinite alternate;
}
@keyframes blobDrift { to { transform: rotate(18deg) scale(1.12) translate(3%, -2%); } }
.closing__video { opacity: 0.22; mix-blend-mode: screen; }
.closing__veil { background: radial-gradient(80% 70% at 50% 50%, transparent, rgba(10,8,7,0.7)); z-index: 1; }
.closing__topo { z-index: 1; }
.closing__pin { z-index: 2; }
.closing__values strong { font-weight: 700; letter-spacing: -0.05em; }
.closing__values span { font-weight: 700; font-size: 1rem; color: var(--terracota); text-shadow: 0 0 18px var(--glow); }
.closing__quote { font-weight: 700; letter-spacing: -0.04em; }
.closing .section-label { color: #FF9F55; }

.qz { background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 0 80px -40px var(--glow), 0 40px 80px -60px rgba(0,0,0,0.7); }
.qz__count { font-weight: 700; }
.qz__bar i { background: var(--grad); box-shadow: 0 0 10px var(--terracota); }
.qz-opt { background: color-mix(in srgb, var(--carbon) 3%, transparent); border-color: var(--line); }
.qz-opt strong { font-weight: 700; }
.qz-opt.is-sel { box-shadow: inset 0 0 0 1px var(--terracota), 0 0 34px -10px var(--glow); }
.qz-chip.is-sel { background: var(--grad); border-color: transparent; box-shadow: 0 0 24px -4px var(--glow); color: #fff; }
.qz-field input, .qz-field select, .qz-field textarea { background: color-mix(in srgb, var(--carbon) 4%, transparent) !important; color: var(--carbon); }
.qz-field select option { background: var(--card); color: var(--carbon); }
.qz-res__range { font-weight: 700; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px var(--glow)); }
.qz-res__range i, .qz-res__range small { -webkit-text-fill-color: var(--carbon-suave); }

.site-foot__title { font-weight: 700; letter-spacing: -0.045em; }
.site-foot__grid { border-top-color: var(--line); }
.site-foot__social a:hover { box-shadow: 0 0 26px -2px var(--glow); }

/* líneas orgánicas: un poco más presentes en oscuro */
html[data-theme="dark"] .section-topo, html[data-theme="dark"] .closing__topo { opacity: 1; }

/* ==========================================================================
   PÁGINA PROYECTOS
   ========================================================================== */
.pj-hero { background: radial-gradient(55% 60% at 100% 0%, color-mix(in srgb, var(--terracota) 22%, transparent), transparent 70%), radial-gradient(45% 50% at 0% 100%, color-mix(in srgb, var(--teal) 24%, transparent), transparent 70%), var(--bg-hero); }
.pj-hero__title { font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: 0.96; }
.pj-hero__stats strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px var(--glow)); }
.pj-worlds, .pj-works { background: var(--bg-vistazo); }
.pj-surprise { font-weight: 700; box-shadow: 0 0 26px -8px var(--glow); }
.pj-surprise:hover { background: var(--grad); box-shadow: 0 0 34px -4px var(--glow); }
.pj-chip { font-weight: 600; }
.pj-chip.is-on { background: var(--grad); box-shadow: 0 0 20px -4px var(--glow); }
.pj-card__title { font-weight: 700; }
.pj-badge--week { background: var(--grad); box-shadow: 0 0 20px -4px var(--glow); }
.pj-media { background: radial-gradient(50% 50% at 100% 0%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 70%), var(--bg-studio); }
.pj-media--dark { background: radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--terracota) 24%, transparent), transparent 70%), #0A0807; }
.pj-cta { background: radial-gradient(55% 60% at 50% 110%, color-mix(in srgb, var(--terracota) 30%, transparent), transparent 70%), var(--bg-cotiza); }
.pj-pano__ring, .pj-anim__play { box-shadow: 0 0 24px -2px var(--glow); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; align-items: end; padding-top: 6.5rem; padding-bottom: 9.5rem; }
  
  
  
  
  .lp-hero__copy { margin-top: 9rem; }
  .lp-hero__shade { background: linear-gradient(0deg, color-mix(in srgb, var(--bg-hero) 96%, transparent) 0%, color-mix(in srgb, var(--bg-hero) 82%, transparent) 50%, color-mix(in srgb, var(--bg-hero) 35%, transparent) 80%, color-mix(in srgb, var(--bg-hero) 55%, transparent) 100%); }
  .lp-hero__cap { right: var(--pad); left: var(--pad); width: auto; bottom: 1.2rem; }
  .lu-reel { position: relative; top: 0; max-width: 420px; }
  .method__stage-wrap { top: 60px; height: 46vh; background: linear-gradient(var(--bg-method) 85%, transparent); }
  .method__big { display: none; }
  .method__step { padding: 8vh 0; }
}
@media (max-width: 640px) {
  .lp-hero__title { font-size: clamp(2.9rem, 14vw, 4rem); }
  .lp-hero__actions { flex-direction: column; align-items: stretch; }
  .btn-glow, .btn-line { justify-content: space-between; }
  .lp-hero__metrics strong { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-glow, .closing::after, .lp-hero__me-ring svg, .lp-hero__kicker .dot { animation: none; }
  .lu-reel__img.is-on { animation: none; }
}

/* ilustraciones de los mundos más grandes */
.world__ill, .pj-tile__ill { height: clamp(96px, 9.6vw, 150px) !important; }
.mfx-frame { fill: color-mix(in srgb, var(--amber) 16%, transparent); stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: none !important; animation: none !important; filter: drop-shadow(0 0 10px var(--amber)); }
/* CTA de las tres formas como botón */
.way__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.2rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--terracota) 55%, transparent); font-size: 0.82rem; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.way__cta:hover { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 0 30px -6px var(--glow); text-shadow: none; }
.closing__values span.odo { font-family: var(--font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.04em; color: #FF7A3D; text-shadow: 0 0 30px var(--glow); }
.closing__values span.odo span { font-size: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }

/* ==========================================================================
   v3.1 — ajustes (2026-10-04)
   ========================================================================== */
/* 1 · el título no se corta (ni la "g" ni la itálica) */
.lp-hero__title .line { overflow: visible; padding-bottom: 0.08em; margin-bottom: -0.02em; }
.lp-hero__title .accent { padding: 0 0.14em 0.18em 0.02em; margin-right: -0.1em; display: inline-block; line-height: 1.12; }

/* 3 · anillo de texto siempre en blanco, sin placa duplicada */

/* 12 · "¿Qué quieres construir?" usa exactamente el diseño de "Elige un mundo" */
.world__tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(0.5rem, 1vw, 0.9rem); }
.world__tile {
  padding: 0.8rem 0.8rem 0.9rem; border-radius: 18px; gap: 0.15rem;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s, background 0.4s;
}
.world__tile:hover { transform: translateY(-6px); background: var(--card); box-shadow: inset 0 0 0 1px var(--terracota), 0 0 40px -12px var(--glow); }
.world__tile:hover .world__ill { transform: translateY(-5px) scale(1.04); }
.world__ill { margin-bottom: 0.35rem; }
.world__name { font-size: 0.95rem; }
.world__count { font-size: 0.54rem; }
.world__go { display: none; }
.world__tile:nth-child(n+7), .pj-tile:nth-child(n+7) { background: color-mix(in srgb, var(--teal) 9%, var(--card)); }
.pj-tile.is-on { background: color-mix(in srgb, var(--terracota) 10%, var(--card)); }

/* 11 · tableros de 360° y animación sin huecos: 2 piezas grandes + 8 chicas */
@media (min-width: 1101px) {
  .pj-anims, .pj-panos { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 13vw, 230px); grid-auto-flow: dense; }
  .pj-anim { aspect-ratio: auto; }
  .pj-anim:nth-child(1), .pj-pano:nth-child(1) { grid-column: 1 / span 2; grid-row: span 2; aspect-ratio: auto; }
  .pj-anim:nth-child(6), .pj-pano:nth-child(6) { grid-column: 3 / span 2; grid-row: span 2; aspect-ratio: auto; }
  .pj-pano--big { grid-column: 1 / span 2; }
}
@media (max-width: 1100px) {
  .pj-anims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pj-anim:nth-child(1), .pj-anim:nth-child(6) { grid-column: span 2; }
}
.pj-anim video { position: absolute; inset: 0; }

/* 13 · degradados de fondo más intensos */
.vistazo {
  background:
    radial-gradient(60% 55% at 100% 0%, color-mix(in srgb, var(--terracota) 38%, transparent), transparent 70%),
    radial-gradient(45% 45% at 15% 55%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 70%),
    radial-gradient(55% 50% at 0% 100%, color-mix(in srgb, var(--teal) 40%, transparent), transparent 70%),
    var(--bg-vistazo);
}
.studio {
  background:
    radial-gradient(55% 45% at 95% 5%, color-mix(in srgb, var(--amber) 28%, transparent), transparent 70%),
    radial-gradient(70% 55% at 0% 35%, color-mix(in srgb, var(--teal) 52%, transparent), transparent 70%),
    radial-gradient(50% 40% at 70% 90%, color-mix(in srgb, var(--terracota) 18%, transparent), transparent 70%),
    var(--bg-studio);
}
.method {
  background:
    radial-gradient(65% 60% at 0% 100%, color-mix(in srgb, var(--terracota) 46%, transparent), transparent 70%),
    radial-gradient(50% 45% at 100% 0%, color-mix(in srgb, var(--amber) 24%, transparent), transparent 70%),
    radial-gradient(40% 40% at 60% 50%, color-mix(in srgb, var(--terra-deep) 18%, transparent), transparent 70%),
    var(--bg-method);
}
.ways {
  background:
    radial-gradient(60% 55% at 50% 0%, color-mix(in srgb, var(--teal) 36%, transparent), transparent 70%),
    radial-gradient(45% 45% at 100% 100%, color-mix(in srgb, var(--terracota) 26%, transparent), transparent 70%),
    var(--bg-ways);
}
.cotiza {
  background:
    radial-gradient(55% 55% at 85% 15%, color-mix(in srgb, var(--terracota) 42%, transparent), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--teal) 55%, transparent), transparent 70%),
    var(--bg-cotiza);
}
.site-foot {
  background:
    radial-gradient(80% 70% at 50% 125%, color-mix(in srgb, var(--terracota) 52%, transparent), transparent 70%),
    radial-gradient(45% 45% at 0% 0%, color-mix(in srgb, var(--teal) 32%, transparent), transparent 70%),
    radial-gradient(35% 35% at 100% 20%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%),
    var(--bg-foot);
}
.pj-hero { background: radial-gradient(60% 65% at 100% 0%, color-mix(in srgb, var(--terracota) 40%, transparent), transparent 70%), radial-gradient(55% 60% at 0% 100%, color-mix(in srgb, var(--teal) 42%, transparent), transparent 70%), var(--bg-hero); }
.pj-worlds, .pj-works { background: radial-gradient(50% 40% at 100% 30%, color-mix(in srgb, var(--terracota) 18%, transparent), transparent 70%), radial-gradient(50% 40% at 0% 80%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 70%), var(--bg-vistazo); }
.pj-media { background: radial-gradient(60% 60% at 100% 0%, color-mix(in srgb, var(--teal) 50%, transparent), transparent 70%), radial-gradient(40% 40% at 0% 100%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%), var(--bg-studio); }
.pj-media--dark { background: radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--terracota) 42%, transparent), transparent 70%), radial-gradient(40% 40% at 100% 0%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 70%), #0A0807; }
.pj-cta { background: radial-gradient(65% 70% at 50% 115%, color-mix(in srgb, var(--terracota) 50%, transparent), transparent 70%), radial-gradient(40% 40% at 0% 0%, color-mix(in srgb, var(--teal) 30%, transparent), transparent 70%), var(--bg-cotiza); }

/* fluidez: el escenario del método brilla con un fondo fijo (sin filtros por cuadro) */
.method__stage::before { content: ""; position: absolute; inset: 10% 5%; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--terracota) 22%, transparent), transparent 70%); }

@media (max-width: 1100px) { .world__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .world__tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 0.4rem var(--pad) 0.8rem; scrollbar-width: none; }
  .world__tiles::-webkit-scrollbar { display: none; }
  .world__tile { flex: 0 0 42%; scroll-snap-align: start; }
  .world__tile:last-child { grid-column: auto; }
}
/* 5 · cambio automático de las ventanas de "Un vistazo" */
.vz-slot .vz-slot__media, .vz-slot .vz-slot__title { transition: opacity 0.38s ease, transform 0.5s var(--ease-out); }
.vz-slot.is-swap .vz-slot__media { opacity: 0.15; transform: scale(1.03); }
.vz-slot.is-swap .vz-slot__title { opacity: 0; transform: translateY(6px); }

/* 7 · fluidez: sin desenfoques de fondo sobre elementos que se animan o se repiten mucho */
.way, .qz, .pj-badge, .pj-pano__ring, .vz-slot__hint, .vz-shuffle { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.qz { background: var(--card); }
.pj-badge { background: color-mix(in srgb, var(--cal) 88%, transparent); }
.pj-pano__ring { background: rgba(0, 0, 0, 0.35); }
.vz-shuffle { background: rgba(0, 0, 0, 0.35); }
.lp-hero__cap { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: color-mix(in srgb, var(--cal) 72%, transparent); }
.closing::after, .lp-hero__me-ring svg { will-change: transform; }

/* ==========================================================================
   v3.2 — hero limpio: marca arriba del título + foto como moneda junto a "100+"
   ========================================================================== */
.lp-hero { grid-template-columns: minmax(0, 1fr); }
.lp-hero__kicker { flex-wrap: wrap; row-gap: 0.3rem; }
.lp-hero__kicker b { color: var(--terracota); text-shadow: 0 0 16px var(--glow); font-weight: 700; }
.lp-hero__kicker .sep { width: 1px; height: 1.1em; background: color-mix(in srgb, var(--carbon) 30%, transparent); }

.lp-hero__metrics { align-items: center; }
.lp-hero__coin-li { max-width: none !important; }
.lp-coin { display: block; width: clamp(72px, 6.4vw, 92px); aspect-ratio: 1; perspective: 600px; }
.lp-coin__in {
  position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  animation: coinSpin 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.lp-coin__face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--terracota) 70%, transparent), 0 10px 30px -10px rgba(0,0,0,0.6), 0 0 34px -10px var(--glow);
}
.lp-coin__face img { width: 100%; height: 100%; object-fit: cover; }
.lp-coin__face--back { transform: rotateY(180deg); background: var(--grad); }
.lp-coin__face--back .mark { height: 52%; color: #fff; }
.lp-coin:hover .lp-coin__in { animation-play-state: paused; }
@keyframes coinSpin {
  0%, 38% { transform: rotateY(0deg); }
  50%, 88% { transform: rotateY(180deg); }
  100% { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) { .lp-coin__in { animation: none; } }
@media (max-width: 900px) { .lp-hero__copy { margin-top: 0; } }
.lp-hero__metrics .lp-coin span { margin: 0; line-height: normal; }
.lp-coin__face--back { background: #F4EEE6; }

/* ==========================================================================
   v3.3 — celular: flechas como trazo (no emoji) y marca legible sobre el título
   ========================================================================== */
body { font-variant-emoji: text; }
.btn-glow i svg, .btn-line i svg { width: 18px; height: 18px; display: block; }
.btn-glow i { color: #fff; }
@media (max-width: 640px) {
  .lp-hero__kicker {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
    padding: 0; border: 0; background: none; border-radius: 0; margin-bottom: 1.2rem;
  }
  .lp-hero__kicker .dot { display: none; }
  .lp-hero__kicker .sep { display: none; }
  .lp-hero__kicker b {
    display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; letter-spacing: 0.18em;
    padding: 0.5em 0.95em; border-radius: 999px; color: #fff; background: var(--grad); text-shadow: none;
    box-shadow: 0 0 26px -6px var(--glow);
  }
  .lp-hero__kicker .svc { font-size: 0.66rem; letter-spacing: 0.14em; line-height: 1.7; color: var(--carbon); opacity: 0.85; padding-left: 0.2rem; }
  .btn-glow i, .btn-line i { width: 38px; height: 38px; }
}

/* Cotizador: la caricatura de Lu invita a seguir la conversación */
.cotiza__toon { position: relative; display: block; width: clamp(190px, 17vw, 250px); margin-bottom: -0.4rem; }
.cotiza__toon::before { content: ""; position: absolute; inset: 18% 8% 6%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--terracota) 38%, transparent), transparent); }
.cotiza__toon img { position: relative; z-index: 1; display: block; width: 100%; height: auto; transform-origin: 50% 90%; animation: toonFloat 6s ease-in-out infinite; filter: drop-shadow(0 18px 22px rgba(0,0,0,0.35)); transition: transform 0.5s var(--ease-out); }
.cotiza__toon:hover img { animation-play-state: paused; transform: rotate(-3deg) scale(1.04); }
@keyframes toonFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@media (max-width: 1100px) { .cotiza__toon { width: 150px; } }
@media (prefers-reduced-motion: reduce) { .cotiza__toon img { animation: none; } }

/* ==========================================================================
   v4 — iconos vectoriales (sustituyen a los caracteres de texto)
   ========================================================================== */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex-shrink: 0; }
.nav-ico .ico { width: 0.95em; height: 0.95em; vertical-align: -0.12em; }
.pm__nav, .vidbox__nav { display: grid; place-items: center; padding: 0; }
.pm__nav .ico, .vidbox__nav .ico { width: 24px; height: 24px; }
.pm__close, .lightbox__close { display: inline-flex; align-items: center; gap: 0.45em; }
.pm__close .ico, .lightbox__close .ico { width: 1.15em; height: 1.15em; }
.pm__act { gap: 0.55em; }
.pm__act .ico { width: 1.05em; height: 1.05em; color: var(--terracota); }
.pm__act--cta .ico { color: #fff; }
.pm__next i .ico, .lb-next-arrow .ico { width: 1.3em; height: 1.3em; }
.vz-shuffle { display: inline-flex; align-items: center; gap: 0.35em; }
.vz-shuffle .ico { width: 1.05em; height: 1.05em; transition: transform 0.6s var(--ease-out); }
.vz-shuffle.is-spin .ico { transform: rotate(360deg); }
.vz-slot__hint { display: inline-flex; align-items: center; gap: 0.4em; }
.vz-slot__play .ico, .pj-anim__play .ico { width: 22px; height: 22px; margin-left: 3px; }
.vz-week__badge .ico, .pj-badge .ico { width: 1.05em; height: 1.05em; vertical-align: -0.18em; }
.pj-badge { display: inline-flex; align-items: center; gap: 0.35em; }
.way__cta .ico, .btn-cta .ico, .closing__cta .ico, .pj-card__more .ico { width: 1.1em; height: 1.1em; }
.btn .ico { width: 1.15em; height: 1.15em; }
.btn { gap: 0.55em; }
.gets i b .ico { width: 12px; height: 12px; }
.qz__back { display: inline-flex; align-items: center; gap: 0.4em; }
.qz__next .ico { width: 1.1em; height: 1.1em; }
.pj-surprise__dice .ico { width: 1.25em; height: 1.25em; }
.pj-surprise.is-roll .pj-surprise__dice { animation: diceRoll 0.45s var(--ease-out); display: inline-block; }
.lp-hero__cap-title .ico { width: 0.9em; height: 0.9em; color: var(--terracota); }

/* ficha de proyecto: la imagen SIEMPRE completa (verticales incluidas) */
.pm__frame { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: block; }
.pm__frame::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover no-repeat; filter: blur(28px) brightness(0.45) saturate(1.1); transform: scale(1.1); }
.pm__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; z-index: 1; }
.pm__count, .pm__nav { z-index: 2; }

/* aviso de cookies */
.consent { position: fixed; left: 50%; bottom: 1.2rem; z-index: 1200; width: min(560px, calc(100% - 1.6rem)); display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1rem 0.9rem 1.2rem; border-radius: 18px; background: var(--card); color: var(--carbon); box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px -20px rgba(0,0,0,0.6); font-size: 0.86rem; line-height: 1.5; transform: translate(-50%, 140%); transition: transform 0.5s var(--ease-out); }
.consent.is-in { transform: translate(-50%, 0); }
.consent a { color: var(--terracota); text-decoration: underline; }
.consent__b { display: flex; gap: 0.5rem; flex-shrink: 0; }
.consent__b button { cursor: pointer; min-height: 40px; padding: 0 1rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; border: 1px solid var(--line); background: transparent; color: var(--carbon); }
.consent__yes { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; }
.site-foot__bar a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .consent { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: stretch; } .consent__b button { flex: 1; } }
.vz-slot__hint { white-space: nowrap; }