:root {
  --navy-950: #061722;
  --navy-900: #082735;
  --navy-850: #0b303d;
  --navy-800: #103c49;
  --teal-600: #007a85;
  --teal-500: #00a5ae;
  --teal-400: #17c6cc;
  --teal-300: #5de1df;
  --ink-900: #17313e;
  --ink-700: #405b67;
  --ink-600: #58707a;
  --ink-500: #5a6f79;
  --surface: #ffffff;
  --surface-soft: #f0f5f7;
  --surface-muted: #edf3f5;
  --line: #d3e0e5;
  --line-strong: #c2d3d9;
  --success: #23946a;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --shadow-sm: 0 8px 24px rgba(6, 36, 48, .06);
  --shadow-md: 0 18px 50px rgba(6, 36, 48, .1);
  --shadow-lg: 0 30px 80px rgba(3, 25, 35, .18);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --max-width: 1200px;
  --header-height: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--ink-900);
  font-family: "Geist", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--header-height) + 18px); }
#producto, #planes { scroll-margin-top: 0; }
#pedir-demo { scroll-margin-top: calc(0px - var(--header-height) - 18px); }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--teal-300);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 3000;
  padding: 11px 15px;
  border-radius: 10px;
  background: #fff;
  color: var(--navy-950);
  font-size: 14px;
  font-weight: 750;
  transform: translateY(-150%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* Header and official TYTURN brand construction */
.site-header {
  position: relative;
  z-index: 1000;
  color: #f5f8fc;
  border-bottom: 1px solid rgba(123, 223, 226, .08);
  background: rgba(6, 23, 34, .92);
  backdrop-filter: blur(16px);
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
html.nav-ready .site-header {
  position: fixed;
  inset: 0 0 auto;
}
html.nav-ready .site-header:not(.scrolled) {
  background: rgba(6, 23, 34, .72);
}
.site-header.scrolled {
  border-bottom: 1px solid rgba(123, 223, 226, .12);
  background: rgba(6, 23, 34, .94);
  box-shadow: 0 10px 32px rgba(0, 11, 18, .16);
  backdrop-filter: blur(18px);
}
.nav-shell {
  width: min(var(--max-width), calc(100% - 48px));
  height: var(--header-height);
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand, .footer-brand { display: inline-flex; align-items: center; min-width: 0; }
.brand-symbol {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--navy-900);
  box-shadow: inset 0 0 0 1px rgba(37, 214, 223, .14), 0 10px 26px rgba(1, 18, 27, .18);
}
.brand-symbol img { width: 88%; height: 88%; object-fit: contain; }
.brand-symbol.small { width: 38px; height: 38px; border-radius: 11px; }
.desktop-nav {
  --nav-lamp-x: 0px;
  --nav-lamp-w: 0px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid rgba(119, 222, 224, .14);
  border-radius: 999px;
  background: rgba(4, 20, 29, .38);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 32px rgba(0, 10, 16, .08);
}
.desktop-nav a {
  position: relative;
  z-index: 2;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 17px;
  border-radius: 999px;
  color: rgba(235, 246, 249, .68);
  font-size: 13px;
  font-weight: 650;
  transition: color 180ms ease;
}
.desktop-nav a:hover,
.desktop-nav a.active { color: #f5ffff; }
.nav-tubelight-indicator {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 0;
  width: var(--nav-lamp-w);
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(83, 224, 225, .115), rgba(38, 185, 193, .045));
  transform: translate3d(var(--nav-lamp-x), 0, 0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 160ms ease;
}
.desktop-nav.is-lamp-ready .nav-tubelight-indicator { opacity: 1; }
.nav-tubelight-indicator::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: min(34px, 44%);
  height: 2px;
  border-radius: 99px 99px 0 0;
  background: #68e7e5;
  transform: translateX(-50%);
  box-shadow: 0 0 7px rgba(93, 225, 223, .9), 0 0 18px rgba(46, 203, 206, .5);
}
.nav-tubelight-indicator::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 58px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(85, 224, 224, .26), rgba(85, 224, 224, .08) 42%, transparent 72%);
  filter: blur(4px);
  transform: translateX(-50%);
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-cta, .mobile-demo {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(84, 229, 226, .34);
  border-radius: 13px;
  background: rgba(26, 202, 205, .12);
  color: #eaffff;
  font-size: 13px;
  font-weight: 750;
  transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease;
}
.nav-cta:hover, .mobile-demo:hover { transform: translateY(-2px); border-color: rgba(93, 225, 223, .62); background: rgba(26, 202, 205, .19); }
.menu-button {
  position: relative;
  width: 44px;
  height: 44px;
  display: none;
  padding: 0;
  border: 1px solid rgba(119, 222, 224, .17);
  border-radius: 14px;
  background: rgba(4, 22, 31, .56);
  color: #eaffff;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 26px rgba(0,10,16,.12);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease-out);
}
.menu-button:hover {
  border-color: rgba(103, 229, 227, .34);
  background: rgba(8, 35, 45, .72);
}
.menu-button:active { transform: scale(.97); }
.menu-button span {
  position: absolute;
  left: 12px;
  top: calc(50% - 1px);
  width: 18px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 240ms var(--ease-out);
}
.menu-button span:nth-child(1) { transform: translateY(-4px); }
.menu-button span:nth-child(2) { transform: translateY(4px); }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(0) rotate(-45deg); }
.mobile-nav { display: none; }

/* Shared section language */
.section-dark {
  color: #f5f8fc;
  background: linear-gradient(136deg, var(--navy-950) 0%, var(--navy-900) 54%, #0b3541 100%);
}
.section-dark-soft {
  color: #f5f8fc;
  background: linear-gradient(135deg, #091c27 0%, #0c303b 54%, #0d3b45 100%);
}
.section-light { background: var(--surface); }
.section-soft { background: linear-gradient(180deg, var(--surface-soft), #f5f9fa); }
.product-showcase, .ready-section, .plans, .faq-section { padding: 112px 0; }
.section-heading, .ready-grid, .plan-grid, .faq-grid, footer {
  width: min(var(--max-width), calc(100% - 48px));
  margin-inline: auto;
}
.section-heading { margin-bottom: 48px; }
.section-heading.centered { max-width: 760px; text-align: center; }
.section-kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--teal-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}
.section-kicker.light { color: #72e4e1; }
.eyebrow { color: #55dde0; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(85, 221, 224, .1); }
.section-heading h2, .faq-title h2, .cta-copy h2 {
  margin: 14px 0 18px;
  color: var(--ink-900);
  font-size: clamp(38px, 4vw, 58px);
  font-weight: 680;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.section-heading h2 span, .faq-title h2 span { color: var(--teal-600); }
.section-heading p, .faq-title > p, .cta-copy > p {
  max-width: 670px;
  margin: 0;
  color: var(--ink-600);
  font-size: 17px;
  line-height: 1.7;
}
.centered p { margin-inline: auto; }

/* Hero */
.hero {
  position: relative;
  min-height: min(760px, 100svh);
  overflow: clip;
  padding: calc(var(--header-height) + 18px) 0 28px;
}
.hero-ambient {
  position: absolute;
  z-index: 0;
  inset: -30% -8% auto 28%;
  height: 720px;
  pointer-events: none;
  background: radial-gradient(circle at 52% 40%, rgba(15, 198, 205, .14), transparent 59%);
}
.hero-paths {
  position: absolute;
  z-index: 0;
  inset: -8px 0 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .8;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.95) 62%, rgba(0,0,0,.42) 86%, transparent 100%);
  animation: hero-paths-enter 780ms ease both;
}
.hero-paths svg {
  width: 126%;
  height: 100%;
  transform: translate3d(-12%, 2%, 0) scale(1.025);
  transform-origin: center;
  will-change: transform;
  animation: hero-path-canvas 20s ease-in-out infinite;
}
.hero-paths path {
  fill: none;
  stroke: url(#hero-path-gradient);
  stroke-width: var(--path-width);
  stroke-linecap: round;
  opacity: var(--path-opacity);
  vector-effect: non-scaling-stroke;
}
.hero-paths-set {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.hero-paths-set-primary { animation: hero-path-primary 9.5s ease-in-out infinite alternate; }
.hero-paths-set-secondary { opacity: .76; animation: hero-path-secondary 7.2s ease-in-out infinite alternate; }
.hero-paths-set-accent { opacity: .62; animation: hero-path-accent 5.4s ease-in-out infinite alternate; }
@keyframes hero-paths-enter { from { opacity: 0; } to { opacity: .8; } }
@keyframes hero-path-canvas {
  0%, 100% { transform: translate3d(-12%, 3%, 0) scale(1.025); }
  27% { transform: translate3d(-5%, -4%, 0) scale(1.06); }
  54% { transform: translate3d(-15%, -7%, 0) scale(1.035); }
  78% { transform: translate3d(-7%, 1%, 0) scale(1.055); }
}
@keyframes hero-path-primary {
  from { transform: translate3d(-18px, 16px, 0); opacity: .82; }
  to { transform: translate3d(16px, -30px, 0); opacity: 1; }
}
@keyframes hero-path-secondary {
  from { transform: translate3d(18px, -14px, 0); opacity: .58; }
  to { transform: translate3d(-16px, 26px, 0); opacity: .88; }
}
@keyframes hero-path-accent {
  from { transform: translate3d(-12px, 10px, 0); opacity: .44; }
  to { transform: translate3d(14px, -20px, 0); opacity: .76; }
}
.hero.is-motion-paused .hero-paths svg,
.hero.is-motion-paused .hero-paths-set {
  animation-play-state: paused;
}

.hero-shell {
  position: relative;
  z-index: 1;
  width: min(var(--max-width), calc(100% - 48px));
  margin: auto;
}
.hero-copy {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}
.hero h1 {
  margin: 5px 0 10px;
  color: #f5f8fc;
  font-size: clamp(50px, 5vw, 70px);
  font-weight: 620;
  letter-spacing: -.058em;
  line-height: .96;
}
.hero h1 em { color: #72e7e3; font-style: normal; font-weight: inherit; }
.hero-title-word {
  display: inline-block;
  white-space: nowrap;
  perspective: 520px;
}
.hero-roll-char {
  display: inline-block;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0);
  transform-origin: 50% 75%;
}
.hero-title-roll.is-rolling .hero-roll-char {
  animation: hero-text-roll 520ms var(--ease-out) both;
  animation-delay: calc(var(--char-index) * 20ms);
}
@keyframes hero-text-roll {
  0% {
    opacity: .28;
    transform: translate3d(0, 52%, 0) rotateX(-64deg);
    filter: blur(3px);
  }
  52% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0);
    filter: blur(0);
  }
}
.hero-lead {
  max-width: 640px;
  margin: 0 auto;
  color: #c5d8e1;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.52;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 21px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 780;
  transition: transform 190ms var(--ease-out), box-shadow 210ms ease, border-color 180ms ease, background-color 180ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active, .is-pressed { transform: translateY(0) scale(.98) !important; }
.btn-primary {
  border-color: #63e7e5;
  background: linear-gradient(135deg, #27d1d1, #18b9c2);
  color: #052936;
  box-shadow: 0 12px 28px rgba(13, 190, 196, .2), inset 0 1px rgba(255, 255, 255, .36);
}
.btn-primary:hover { box-shadow: 0 17px 36px rgba(13, 190, 196, .29), inset 0 1px rgba(255, 255, 255, .5); }
.btn-ghost { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .055); color: #f4fbfc; }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .09); }
.btn-large { min-width: 210px; min-height: 56px; font-size: 16px; }

.hero-product {
  width: min(1160px, 100%);
  margin: 20px auto 0;
}
.hero-product-toolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.hero-view-tabs {
  position: relative;
  width: min(282px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(116, 222, 224, .16);
  border-radius: 999px;
  background: rgba(4, 21, 31, .5);
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 12px 34px rgba(0, 11, 18, .13);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.hero-view-tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 2);
  border-radius: 999px;
  background: linear-gradient(180deg, #68e7e5, #4dd6da);
  box-shadow: 0 7px 18px rgba(28, 199, 204, .18), inset 0 1px rgba(255,255,255,.4);
  transform: translate3d(0, 0, 0);
  transition: transform 360ms var(--ease-out), box-shadow 220ms ease;
}
.hero-product[data-hero-view="pwa"] .hero-view-tabs::before {
  transform: translate3d(100%, 0, 0);
}
.hero-view-tabs::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 25%;
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: rgba(118, 240, 237, .95);
  box-shadow: 0 0 10px rgba(92, 230, 228, .72);
  transform: translateX(-50%);
  transition: left 360ms var(--ease-out);
}
.hero-product[data-hero-view="pwa"] .hero-view-tabs::after { left: 75%; }
.hero-view-button {
  position: relative;
  z-index: 2;
  min-height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9db2bb;
  cursor: pointer;
  font-size: 11px;
  font-weight: 780;
  transition: color 180ms ease, transform 180ms var(--ease-out);
}
.hero-view-button:hover { color: #fff; }
.hero-view-button.is-active {
  background: transparent;
  color: #052936;
}
.hero-view-button:active { transform: scale(.98); }

.hero-product-stage {
  position: relative;
  height: 460px;
  overflow: visible;
  isolation: isolate;
  transition: height 180ms var(--ease-out);
}
.hero-slide {
  position: absolute;
  left: 50%;
  margin: 0;
  will-change: transform, opacity;
  transition: transform 360ms var(--ease-out), opacity 220ms ease, filter 220ms ease, width 170ms var(--ease-out);
}
.hero-slide-web {
  top: 20px;
  z-index: 3;
  width: min(930px, 84%);
  transform-origin: center;
}
.hero-slide-pwa {
  top: 2px;
  z-index: 2;
  width: 222px;
  transform-origin: center;
}
.hero-web-frame,
.hero-phone-frame {
  overflow: hidden;
  background: #081823;
}
.hero-web-frame {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid rgba(115, 222, 224, .2);
  border-radius: 20px;
  box-shadow: 0 28px 70px rgba(0, 10, 17, .35), 0 0 46px rgba(27, 200, 205, .05);
  cursor: default;
  appearance: none;
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.hero-web-frame img {
  width: 100%;
  height: auto;
}
.hero-phone-frame {
  display: block;
  width: 100%;
  padding: 5px;
  border: 1px solid rgba(111, 226, 226, .32);
  border-radius: 28px;
  background: #0a1f2a;
  box-shadow: 0 24px 58px rgba(0, 9, 15, .38), 0 0 36px rgba(31, 199, 205, .08);
  cursor: default;
  transition: transform 220ms var(--ease-out), box-shadow 220ms ease, border-color 220ms ease;
}
.hero-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  pointer-events: none;
  image-rendering: auto;
}
.hero-product[data-hero-view="web"] .hero-slide-web {
  opacity: 1;
  transform: translate3d(-56%, 0, 0) scale(1);
  filter: none;
}
.hero-product[data-hero-view="web"] .hero-slide-pwa {
  opacity: .9;
  transform: translate3d(143%, 0, 0) scale(.78);
  filter: none;
}
.hero-product[data-hero-view="pwa"] .hero-slide-web {
  z-index: 1;
  opacity: 0;
  transform: translate3d(-60%, 0, 0) scale(.92);
  filter: none;
  pointer-events: none;
}
.hero-product[data-hero-view="pwa"] .hero-slide-pwa {
  z-index: 4;
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  filter: none;
}
.hero-product[data-hero-view="pwa"] .hero-phone-frame {
  cursor: zoom-in;
}
@media (hover: hover) and (pointer: fine) {
  .hero-product[data-hero-view="pwa"] .hero-phone-frame:hover {
    transform: none;
    border-color: rgba(111, 226, 226, .52);
    box-shadow: 0 28px 66px rgba(0, 9, 15, .42), 0 0 42px rgba(31, 199, 205, .12);
  }
}
.hero-product[data-hero-phone-zoom="true"] .hero-product-stage {
  height: 520px;
}
.hero-product[data-hero-phone-zoom="true"] .hero-slide-pwa {
  width: 250px;
}
.hero-product[data-hero-phone-zoom="true"] .hero-phone-frame {
  transform: none;
  cursor: zoom-out;
  border-color: rgba(111, 226, 226, .58);
  box-shadow: 0 32px 74px rgba(0, 9, 15, .46), 0 0 48px rgba(31, 199, 205, .14);
}

.hero-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Glyph Portal · TYTURN -> Hero
   Intro de marca: pin sticky + recorrido corto + entrada por el check oficial.
   El Hero se solapa con el final del portal para eliminar cualquier tramo muerto. */
.glyph-portal {
  --gp-length: .62;
  --gp-height: 100svh;
  --gp-name-opacity: 1;
  --gp-mark-opacity: 1;
  --gp-field-opacity: 0;
  --gp-field-scale: 1;
  --gp-content-opacity: 0;
  position: relative;
  z-index: 4;
  isolation: isolate;
  background: var(--navy-950);
}
.glyph-portal-viewport {
  position: absolute;
  inset: 0 auto auto 0;
  width: 0;
  height: 100vh;
  height: 100svh;
  visibility: hidden;
  pointer-events: none;
}
.glyph-portal-pin {
  position: relative;
  height: var(--gp-height);
  overflow: clip;
  isolation: isolate;
  background: var(--navy-950);
}
.glyph-portal[data-gp-motion="on"] .glyph-portal-pin {
  position: sticky;
  top: 0;
}
.glyph-portal-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.glyph-portal-reveal {
  fill: var(--navy-950);
  opacity: var(--gp-field-opacity);
}
.glyph-portal-field-paths {
  opacity: var(--gp-field-opacity);
  transform: scale(var(--gp-field-scale));
  transform-origin: center;
  transform-box: fill-box;
}
.glyph-portal-field-paths path {
  fill: none;
  stroke: url(#glyph-portal-field-gradient);
  stroke-width: var(--path-width);
  stroke-linecap: round;
  opacity: var(--path-opacity);
  vector-effect: non-scaling-stroke;
}
.glyph-portal-field-paths .hero-paths-set {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.glyph-portal-word-wrap {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  text-rendering: geometricPrecision;
}
.tyturn-wordmark-lockup {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.25vw, 18px);
  user-select: none;
}
.tyturn-wordmark-mark {
  width: clamp(94px, 7.8vw, 116px);
  height: auto;
  flex: 0 0 auto;
  opacity: var(--gp-mark-opacity);
}
.tyturn-wordmark-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
  opacity: var(--gp-name-opacity);
}
.tyturn-wordmark-name {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: clamp(72px, 6.4vw, 92px);
  font-weight: 800;
  letter-spacing: -.072em;
  line-height: .8;
}
.tyturn-wordmark-name-light { color: #f5f8fc; }
.tyturn-wordmark-name-teal { color: #0bc9d6; }
.glyph-portal-word-wrap {
  filter: drop-shadow(0 18px 42px rgba(0, 201, 214, .12));
}
.glyph-portal-paths {
  opacity: .74;
}
.glyph-portal-paths path {
  stroke: url(#glyph-portal-path-gradient);
}
.glyph-portal-ambient {
  opacity: .88;
}
.glyph-portal.is-motion-paused .glyph-portal-paths svg,
.glyph-portal.is-motion-paused .glyph-portal-paths .hero-paths-set,
.glyph-portal.is-motion-paused .glyph-portal-field-paths .hero-paths-set {
  animation-play-state: paused;
}

.glyph-portal-content {
  position: relative;
  z-index: 3;
  background: var(--navy-950);
}
.glyph-portal[data-gp-motion="on"] .glyph-portal-content {
  margin-top: calc((var(--gp-length) - 1) * var(--gp-height));
  opacity: var(--gp-content-opacity);
  pointer-events: none;
}
.glyph-portal[data-gp-entered="true"] .glyph-portal-content {
  pointer-events: auto;
}

@media (max-width: 760px) {
  .glyph-portal {
    --gp-length: .66;
  }
  .glyph-portal-word-wrap {
    top: 50%;
  }
  .tyturn-wordmark-lockup {
    gap: 10px;
  }
  .tyturn-wordmark-mark {
    width: clamp(68px, 19vw, 82px);
  }
  .tyturn-wordmark-name {
    font-size: clamp(50px, 14.5vw, 60px);
    letter-spacing: -.07em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glyph-portal {
    background: var(--navy-950);
  }
  .glyph-portal-pin {
    position: relative !important;
    height: auto;
    min-height: 132px;
    display: grid;
    place-items: center;
    padding: 18px 0 28px;
    background: var(--navy-950);
  }
  .glyph-portal-art {
    display: none;
  }
  .glyph-portal-word-wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
  .tyturn-wordmark-copy,
  .tyturn-wordmark-mark {
    opacity: 1 !important;
  }
  .glyph-portal-field-paths,
  .glyph-portal-reveal {
    display: none;
  }
  .glyph-portal-content {
    margin-top: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Product operation bento */
.operation-bento {
  width: min(var(--max-width), calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.operation-primary, .operation-states, .operation-mobile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.operation-primary { grid-column: 1 / span 8; }
.operation-states { grid-column: 1 / span 8; }
.operation-mobile { grid-column: 9 / -1; grid-row: 1 / span 2; display: flex; flex-direction: column; background: linear-gradient(165deg, #0a2330, #0d3440); }
.operation-tile-copy { padding: 28px 30px 23px; }
.operation-tile-copy.compact { padding-bottom: 18px; }
.operation-tile-copy > span { color: var(--teal-600); font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.operation-tile-copy h3 { max-width: 610px; margin: 9px 0 8px; color: var(--ink-900); font-size: clamp(24px, 2.3vw, 34px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.operation-tile-copy p { max-width: 620px; margin: 0; color: var(--ink-600); font-size: 14px; line-height: 1.6; }
/* Containing block del crop: las capturas mobile/intermedia se posicionan en
   absoluto dentro de esta figure. Sin `position: relative` el offsetParent era
   el <article> (.operation-primary / .operation-states), la captura se pintaba
   sobre el copy y la figure quedaba vacia. En desktop la imagen sigue en flujo
   normal (width 100% / height auto), asi que esta linea no altera ese layout. */
.operation-shot { position: relative; margin: 0; overflow: hidden; border-top: 1px solid var(--line); background: #edf4f5; }
/* Capturas light completas: la figure crece con la imagen real, sin crop vertical ni horizontal. */
.operation-shot img { width: 100%; height: auto; object-fit: cover; object-position: left top; }
/* Desktop: foco de tarjeta completa sobre las capturas light.
   Las ventanas son pixeles reales del asset, no estimaciones.
     agenda  1423x545 -> x 40..1060 / y 152.5..544.6 = 1020 x 392.1 px
     estados 1382x760 -> x 44..1064 / y 65..627.4   = 1020 x 562.4 px
   El aspect-ratio usa el alto equivalente de la ventana sobre el ancho del
   asset (392.1 * 1423/1020 = 547 y 562.4 * 1382/1020 = 762), asi la figura
   conserva el alto del tile y el encuadre queda determinista: ni barra app,
   ni tira de dias, ni panel Proximos turnos entran en el recorte. Los crops
   mobile e intermedios siguen definidos en sus propias media queries. */
.operation-shot-agenda { aspect-ratio: 1423 / 547; }
.operation-shot-agenda img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * 1423 / 1020);
  max-width: none;
  height: auto;
  transform: translate(-2.8110%, -27.9817%);
}
.operation-shot-states { aspect-ratio: 1382 / 762; }
.operation-shot-states img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * 1382 / 1020);
  max-width: none;
  height: auto;
  transform: translate(-3.1838%, -8.5526%);
}
.operation-mobile .operation-tile-copy { position: relative; z-index: 2; }
.operation-mobile .operation-tile-copy > span { color: #61dddc; }
.operation-mobile .operation-tile-copy h3 { color: #f4fbfc; font-size: 27px; }
.operation-mobile .operation-tile-copy p { color: #a9c0c8; }
.operation-phone { width: min(330px, calc(100% - 46px)); margin: auto auto -116px; overflow: hidden; border: 6px solid #173e4b; border-bottom: 0; border-radius: 34px 34px 0 0; background: var(--navy-950); box-shadow: 0 24px 54px rgba(0, 12, 19, .32); }
.operation-phone img { width: 100%; height: auto; }
.operation-capabilities { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.operation-capabilities span { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 4px; padding: 14px; color: var(--ink-500); font-size: 13px; text-align: center; }
.operation-capabilities span + span { border-left: 1px solid var(--line); }
.operation-capabilities b { color: var(--ink-900); }

/* PRO product chapter */
.pro-section { position: relative; overflow: hidden; padding: 108px 0; }
.pro-section::before { content: ""; position: absolute; width: 620px; height: 620px; top: -360px; right: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(36, 207, 207, .12), transparent 68%); pointer-events: none; }
.pro-shell { position: relative; z-index: 1; width: min(var(--max-width), calc(100% - 48px)); margin-inline: auto; }
/* PRO V5.2: producto full-width, una evidencia principal por vista.
   Encabezado = copy a la izquierda, tabs manuales a la derecha. */
.pro-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 26px 48px; margin-bottom: 22px; }
.pro-heading { max-width: 760px; }
.pro-heading h2 { margin: 14px 0 0; color: #f5f8fc; font-size: clamp(40px, 4.5vw, 62px); font-weight: 680; letter-spacing: -.048em; line-height: 1.04; }
.pro-heading h2 span { color: #73e7e3; }
.pro-heading > p { max-width: 640px; margin: 16px 0 0; color: #a7bec7; font-size: 16px; line-height: 1.7; }
.pro-scope { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 24px; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.pro-scope span { min-height: 62px; display: grid; place-items: center; padding: 12px; color: #c8dadd; font-size: 12px; font-weight: 650; text-align: center; }
.pro-scope span + span { border-left: 1px solid rgba(255, 255, 255, .1); }
/* Sin JS no existe controlador de tabs: se oculta el tablist y los tres modulos
   quedan visibles, uno debajo del otro, sin controles muertos. */
.pro-tabs { display: none; align-items: center; gap: 28px; }
html.pro-ready .pro-tabs { display: flex; }
.pro-tab { min-height: 44px; display: inline-flex; align-items: center; padding: 4px 2px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: #8fa9b1; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .01em; cursor: pointer; transition: color 140ms ease, border-color 140ms ease; }
.pro-tab:hover { color: #dcebee; }
.pro-tab.is-active { color: #f5f8fc; border-bottom-color: #24d0cd; }
.pro-tab:focus-visible { outline: 2px solid #73e7e3; outline-offset: 4px; }
.pro-stage { position: relative; }
.pro-panel { display: block; }
html.pro-ready .pro-panel { display: none; }
html.pro-ready .pro-panel.is-active { display: block; }
.pro-module-copy { max-width: 780px; padding-bottom: 18px; }
.pro-module-copy > span { color: #61dcda; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.pro-module-copy h3 { margin: 13px 0 13px; color: #f3fafb; font-size: clamp(27px, 3vw, 42px); font-weight: 680; letter-spacing: -.038em; line-height: 1.08; }
.pro-module-copy p { margin: 0; color: #9fb6be; font-size: 14px; line-height: 1.65; }
.pro-subtabs { display: none; flex-wrap: wrap; gap: 0 26px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
html.pro-ready .pro-subtabs { display: flex; }
.pro-subtab { font-size: 12px; }
.pro-subview { display: block; }
html.pro-ready .pro-subview { display: none; }
html.pro-ready .pro-subview.is-active { display: block; }
/* Encuadre de evidencia. El aspect-ratio sale de las dimensiones reales del
   derivado (--pro-frame-w / --pro-frame-h): la captura nunca se deforma y nunca
   se agranda mas alla del ancho del rail. El par context/focus de Metricas
   comparte encuadre para que el crossfade no mueva el layout. */
.pro-shot { margin: 0; overflow: hidden; border: 1px solid rgba(131, 220, 221, .16); border-radius: 24px; background: #071722; box-shadow: 0 30px 72px rgba(0, 11, 18, .3); }
.pro-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pro-shot-v52 { position: relative; aspect-ratio: var(--pro-frame-w) / var(--pro-frame-h); }
.pro-shot-v52 img { position: absolute; inset: 0; }
.pro-view-metricas { --pro-frame-w: 1326; --pro-frame-h: 422; }
.pro-view-beneficios-fidelizacion { --pro-frame-w: 2295; --pro-frame-h: 503; }
.pro-view-beneficios-giftcards { --pro-frame-w: 1148; --pro-frame-h: 248; }
.pro-view-beneficios-actividad { --pro-frame-w: 2295; --pro-frame-h: 143; }
.pro-view-recordatorios { --pro-frame-w: 2018; --pro-frame-h: 717; }
/* PRO V5.2 responsive: dos variantes de control, desktop (>1080) y compacta
   (<=1080). Cada grupo lleva su propio par control/panel, de modo que al pasar
   de un breakpoint a otro nunca queda seleccionado un control oculto sin panel
   visible. La variante pertinente se resuelve en CSS, tambien sin JS. */
.pro-group-compact { display: none; }
/* Capa neutra en desktop: el encuadre sigue resolviendose en .pro-shot-v52 con
   el aspect-ratio del derivado, exactamente como antes de esta fase. */
.pro-frame { position: absolute; inset: 0; }
/* Los rotulos editoriales de las variantes compactas van FUERA de la captura. */
.pro-note { display: none; }
.pro-shot-metrics img { transition: opacity 160ms ease; }
.pro-shot-metrics .pro-metrics-focus { opacity: 0; }
.pro-shot-metrics.is-focus .pro-metrics-focus { opacity: 1; }
.pro-shot-metrics.is-focus .pro-metrics-context { opacity: 0; }

/* Assistant */
.assistant-section { position: relative; overflow: hidden; padding: 112px 0; }
.assistant-section::before { content: ""; position: absolute; width: 520px; height: 520px; left: -310px; bottom: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(24, 189, 194, .1), transparent 68%); pointer-events: none; }
.assistant-grid { position: relative; z-index: 1; width: min(1080px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: clamp(54px, 5.4vw, 76px); }
.assistant-copy { max-width: 510px; }
.assistant-mode { width: max-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; padding: 7px 10px; border: 1px solid #bbe0d4; border-radius: 999px; background: #f1faf7; color: #247857; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.assistant-mode i { width: 7px; height: 7px; border-radius: 50%; background: #2ea878; box-shadow: 0 0 0 4px rgba(46, 168, 120, .1); }
.assistant-copy h2 { margin: 14px 0 20px; color: var(--ink-900); font-size: clamp(42px, 4.6vw, 62px); font-weight: 680; letter-spacing: -.05em; line-height: 1.04; }
.assistant-copy h2 span { color: var(--teal-600); }
.assistant-copy > p { margin: 0; color: var(--ink-600); font-size: 17px; line-height: 1.7; }
.assistant-points { display: grid; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.assistant-points span, .assistant-points b, .assistant-points small { display: block; }
.assistant-points b { color: var(--ink-900); font-size: 14px; }
.assistant-points small { margin-top: 3px; color: var(--ink-500); font-size: 13px; }
.assistant-visual { position: relative; width: min(500px, 100%); margin: 0 auto; padding: 14px 14px 0; overflow: hidden; border: 1px solid #c8dfe3; border-radius: 32px; background: linear-gradient(160deg, #eff7f8, #dfecef); box-shadow: var(--shadow-lg); }
.assistant-visual img { position: relative; z-index: 1; width: 100%; height: auto; border: 1px solid #274752; border-bottom: 0; border-radius: 22px 22px 0 0; }
/* Asistente: capa neutra en desktop/tablet. El encuadre completo del asset se
   resuelve igual que siempre; la ventana mobile (<=760) reusa este mismo
   contenedor como marco de recorte. */
.assistant-shot { display: block; }
.assistant-glow { position: absolute; inset: 8% 4% auto; height: 52%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 183, 190, .18), transparent 68%); filter: blur(20px); }
.assistant-visual figcaption { position: absolute; right: 25px; bottom: 19px; z-index: 2; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(6, 24, 34, .88); color: #bcd1d7; font-size: 10px; font-weight: 700; }

/* Plans */
.plan-grid { max-width: 960px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; min-height: 650px; padding: 31px; overflow: hidden; border: 1px solid var(--line); border-radius: 29px; background: linear-gradient(180deg, #fff, #fbfdfd); box-shadow: var(--shadow-sm); }
.plan-card::before { content: ""; position: absolute; inset: 0 28px auto; height: 3px; border-radius: 0 0 99px 99px; background: var(--line-strong); }
.plan-card.pro { border-color: #7ddbd7; background: radial-gradient(circle at 95% 4%, rgba(28, 202, 201, .1), transparent 25%), linear-gradient(180deg, #fff, #faffff); box-shadow: 0 22px 58px rgba(14, 145, 147, .12); }
.plan-card.pro::before { background: linear-gradient(90deg, #24d0cd, #0faab5); }
.plan-head-row { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.plan-name { color: var(--teal-600); font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.plan-fit { max-width: 225px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); color: var(--ink-600); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-align: center; }
.plan-fit.pro-fit { border-color: #b6e6e3; background: #e9f9f8; color: var(--teal-600); }
.plan-top h3 { margin: 0 0 12px; color: var(--ink-900); font-size: 30px; font-weight: 720; letter-spacing: -.035em; line-height: 1.08; }
.plan-top p { min-height: 74px; margin: 0; color: var(--ink-600); font-size: 14px; line-height: 1.6; }
.plan-includes { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.plan-card ul { display: grid; gap: 10px; margin: 17px 0 28px; padding: 0; list-style: none; }
.plan-card li { position: relative; padding-left: 23px; color: var(--ink-700); font-size: 14px; line-height: 1.45; }
.plan-card li::before { content: ""; position: absolute; left: 1px; top: .47em; width: 9px; height: 9px; border: 2px solid var(--teal-500); border-radius: 50%; }
.plan-bottom { margin-top: auto; display: grid; gap: 12px; }
.plan-bottom > small { color: var(--ink-500); font-size: 12px; }
.plan-bottom .btn { width: 100%; }
.plan-btn { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink-900); }
.plan-btn:hover { border-color: #afcdd1; background: var(--surface-muted); }

/* Web ready and FAQ */
.ready-grid { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: clamp(50px, 5.4vw, 74px); }
.ready-copy h2 { margin: 14px 0 20px; color: var(--ink-900); font-size: clamp(40px, 4.4vw, 58px); font-weight: 680; letter-spacing: -.048em; line-height: 1.04; }
.ready-copy h2 span { color: var(--teal-600); }
.ready-copy > p { margin: 0; color: var(--ink-600); font-size: 16px; line-height: 1.7; }
.ready-path { margin: 31px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ready-path li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ready-path li > span { padding-top: 2px; color: var(--teal-600); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.ready-path b, .ready-path small { display: block; }
.ready-path b { color: var(--ink-900); font-size: 14px; }
.ready-path small { margin-top: 3px; color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.ready-visual { position: relative; margin: 0; padding: 13px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 29px; background: #edf4f5; box-shadow: var(--shadow-md); }
/* Web lista V5.2: la preparacion se resuelve una sola vez en el resultado
   final. La superficie toma el encuadre del derivado mas alto (context,
   1924x807) para que ningun estado se recorte y la seccion no salte entre
   pasos; el DETAIL (1322x169) se centra con aire editorial y nunca se estira.
   El badge WEB LISTA vive dentro de la evidencia real: no se superpone ningun
   overlay sobre los pixeles. */
.ready-shot { position: relative; width: 100%; aspect-ratio: 1924 / 807; overflow: hidden; border: 1px solid #173d49; border-radius: 18px; background: var(--navy-950); }
.ready-frame { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); opacity: 0; transition: opacity 160ms linear; }
.ready-frame.is-active { opacity: 1; }
.ready-frame img { display: block; width: 100%; height: auto; }
.ready-state { display: none; }
.ready-visual figcaption { padding: 11px 5px 1px; color: var(--ink-500); font-size: 11px; }
#contenido > .faq-section { padding: clamp(140px,18svh,210px) 0 clamp(160px,22svh,250px); }
.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 74px; }
.accordion { display: grid; gap: 9px; }
.accordion details { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease; }
.accordion summary { min-height: 58px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--ink-900); font-size: 14px; font-weight: 700; list-style: none; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:focus-visible { outline: 2px solid var(--teal-600); outline-offset: -3px; border-radius: 15px; }
.accordion summary span { color: var(--teal-600); font-size: 22px; font-weight: 400; transition: transform 270ms cubic-bezier(.22,1,.36,1), color 270ms ease; }
#contenido .accordion details[open]:not(.is-faq-closing) { border-color: rgba(104,218,221,.43); background: linear-gradient(155deg,rgba(18,51,64,.97),rgba(7,29,42,.97)); box-shadow: 0 23px 58px rgba(0,6,13,.23), 0 0 18px rgba(50,177,189,.045); }
.accordion details[open]:not(.is-faq-closing) summary { color: #f3fbfc; }
.accordion details[open]:not(.is-faq-closing) summary span { transform: rotate(45deg); }
.accordion details p { margin: 0; padding: 0 18px 18px; color: var(--ink-600); font-size: 14px; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
  #contenido .accordion details:not([open]):hover { border-color: rgba(104,218,221,.35); background: linear-gradient(155deg,rgba(16,47,60,.95),rgba(6,27,40,.97)); }
  .accordion details:not([open]):hover summary span { color: #8be5e5; }
}
@media (prefers-reduced-motion: reduce) {
  .accordion details, .accordion summary span { transition: none; }
}

/* Closing CTA and footer */
.final-cta { padding: 34px 24px 76px; background: #fff; }
.cta-card {
  position: relative;
  width: min(var(--max-width), 100%);
  margin: auto;
  padding: 52px 55px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 54px;
  border: 1px solid rgba(93, 225, 223, .14);
  border-radius: 32px;
  background: radial-gradient(circle at 80% 12%, rgba(37, 207, 208, .16), transparent 30%), linear-gradient(135deg, var(--navy-950), var(--navy-850));
  color: #f5f8fc;
  box-shadow: var(--shadow-lg);
}
.cta-card::after { content: ""; position: absolute; width: 380px; height: 380px; right: -180px; bottom: -260px; border: 1px solid rgba(93, 225, 223, .14); border-radius: 50%; pointer-events: none; }
.cta-copy h2 { color: #f5f8fc; }
.cta-copy h2 span { color: #70e5e2; }
.cta-copy > p { color: #a9c0c9; }
.cta-copy > small { display: block; margin-top: 14px; color: #809ba6; font-size: 12px; }
.cta-actions { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; }
.secondary-channel { min-height: 38px; display: inline-flex; align-items: center; color: #a9c4cc; font-size: 12px; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(169, 196, 204, .35); text-underline-offset: 4px; }
.secondary-channel:hover { color: #e6f7f8; }
footer { min-height: 112px; padding: 28px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; border-top: 1px solid var(--line); }
.footer-brand .brand-symbol { box-shadow: inset 0 0 0 1px rgba(37, 214, 223, .14); }
.footer-claim { margin-left: 10px; color: var(--ink-600); font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.footer-links { display: flex; align-items: center; gap: 19px; }
.footer-links a { min-height: 40px; display: inline-flex; align-items: center; color: var(--ink-600); font-size: 12px; font-weight: 650; }
.footer-links a:hover { color: var(--teal-600); }
footer > p { margin: 0; color: var(--ink-500); font-size: 12px; text-align: right; }

/* Progressive motion: content is visible unless JS has initialized the observer. */
html.motion-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 620ms ease, transform 700ms var(--ease-out); }
html.motion-ready .reveal.visible { opacity: 1; transform: none; }
html.motion-ready .delay-1 { transition-delay: 80ms; }
html.motion-ready .delay-2 { transition-delay: 150ms; }
html.motion-ready .hero-product-shell.reveal .hero-product-viewport { clip-path: inset(0 0 100% 0); transition: clip-path 820ms var(--ease-out) 80ms; }
html.motion-ready .hero-product-shell.reveal.visible .hero-product-viewport { clip-path: inset(0); }
@keyframes brand-enter { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.brand-symbol { animation: brand-enter 520ms var(--ease-out) both; }

/* Tablet */
@media (max-width: 1080px) {
  :root { --header-height: 72px; }
  .desktop-nav { display: none; }
  html.nav-ready .menu-button { display: grid; }
  .mobile-nav {
    display: grid;
    width: min(420px, calc(100% - 28px));
    margin: 0 auto 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    background: rgba(6, 23, 34, .96);
    box-shadow: 0 20px 50px rgba(0, 10, 16, .3);
    backdrop-filter: blur(18px);
  }
  html.nav-ready .mobile-nav {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    transition: max-height 300ms var(--ease-out), margin 300ms var(--ease-out), padding 300ms var(--ease-out), opacity 180ms ease, transform 300ms var(--ease-out), border-color 180ms ease;
  }
  html.nav-ready .mobile-nav.open {
    max-height: 260px;
    margin-bottom: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: rgba(255, 255, 255, .12);
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .mobile-nav a { min-height: 46px; padding: 0 12px; display: flex; align-items: center; border-radius: 10px; color: #d8e7ec; font-size: 14px; font-weight: 650; }
  .mobile-nav a:hover { background: rgba(255, 255, 255, .06); }
  .mobile-nav .mobile-demo { margin-top: 4px; color: #efffff; }
  .nav-actions { margin-left: auto; }
  .hero { min-height: auto; padding-top: calc(var(--header-height) + 20px); }
  .hero-shell { width: min(920px, calc(100% - 40px)); }
  .hero-copy { max-width: 760px; }
  .hero-product { width: min(900px, 100%); }
  .hero-product-stage { height: 420px; }
  .hero-slide-web { top: 32px; width: min(720px, 82%); }
  .hero-slide-pwa { top: 8px; width: 190px; }
  .hero-product[data-hero-view="web"] .hero-slide-pwa { transform: translate3d(122%, 0, 0) scale(.78); }
  .hero-product[data-hero-view="pwa"] .hero-slide-pwa { transform: translate3d(-50%, 0, 0) scale(1); }
  .hero-product[data-hero-phone-zoom="true"] .hero-slide-pwa { width: 206px; }
  .ready-grid { grid-template-columns: 1fr; }
  .ready-copy { max-width: 760px; }
  .ready-visual { width: min(820px, 100%); margin-inline: auto; }
  .pro-header { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .assistant-grid { gap: 48px; }
  .faq-grid { grid-template-columns: 1fr; gap: 38px; }
  .faq-title { max-width: 760px; }
  .cta-card { grid-template-columns: 1fr; }
  .cta-actions { justify-items: start; }

  /* --- PRO V5.2 compacto: tablet (761-1080) y mobile (<=760) comparten los
     mismos controles; solo cambia la ventana que se recorta. Desktop no se
     toca: aca unicamente se elige que grupo de controles se muestra. --- */
  .pro-group-desktop { display: none; }
  .pro-group-compact { display: block; }

  /* Superficie estable. El alto de la evidencia deja de salir del aspect-ratio
     bruto de cada derivado (eso hacia saltar la seccion entre vistas: Actividad
     media ~57 px mientras Metricas media ~288 px) y pasa a ser un marco fijo de
     944 x 380 de referencia. La captura se recorta DENTRO, centrada, sin
     deformarse y sin reescalarse por encima del ancho del rail. */
  .pro-group-compact .pro-shot-v52 {
    aspect-ratio: 944 / 380;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .pro-group-compact .pro-shot-v52 .pro-frame {
    position: relative;
    inset: auto;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #071722;
  }
  /* La ventana se mide sobre el asset real: --win-scale = ancho del derivado /
     ancho de la ventana; translate = desplazamiento en % del propio asset
     (el porcentaje de translate es relativo al tamano del elemento, o sea a la
     captura completa, no al marco). Asi la proporcion nunca se deforma. */
  .pro-group-compact .pro-shot-v52 .pro-frame img {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    max-width: none;
    height: auto;
    object-fit: cover;
    object-position: left top;
  }

  /* Beneficios, tablet. Ventanas autorizadas sobre el master 2048x1280
     (Fidelizacion 208,382,816,176 / Cupones 1024,382,816,176) mapeadas al
     derivado v5.2 con el factor real 2880/2048 = 1.40625. */
  .pro-group-compact .pro-view-compact-fidelizacion .pro-frame { aspect-ratio: 816 / 176; }
  .pro-group-compact .pro-view-compact-fidelizacion .pro-frame img { width: calc(100% * 2295 / 1147.5); transform: translate(-0.022%, -50.932%); }
  .pro-group-compact .pro-view-compact-cupones .pro-frame { aspect-ratio: 816 / 176; }
  .pro-group-compact .pro-view-compact-cupones .pro-frame img { width: calc(100% * 2295 / 1147.5); transform: translate(-50.022%, -50.932%); }
  /* Gift Cards y Actividad en tablet: derivado existente, proporcion intacta.
     Actividad es DETAIL y no se estira para llenar la superficie. */
  .pro-group-compact .pro-view-compact-giftcards .pro-frame { aspect-ratio: 1148 / 248; }
  .pro-group-compact .pro-view-compact-giftcards .pro-frame img { width: 100%; transform: translate(0, 0); }
  .pro-group-compact .pro-view-compact-actividad .pro-frame { aspect-ratio: 2295 / 143; }
  .pro-group-compact .pro-view-compact-actividad .pro-frame img { width: 100%; transform: translate(0, 0); }

  /* Recordatorios, tablet: Pendiente (307,382,716,352) y Proximo
     (1024,227,718,510). Ambas proporciones son mas altas que la superficie, por
     eso se ajustan por alto con un margen real de sobra. */
  .pro-group-compact .pro-view-compact-rec-pendiente .pro-frame { aspect-ratio: 716 / 352; width: 80%; }
  .pro-group-compact .pro-view-compact-rec-pendiente .pro-frame img { width: calc(100% * 2018 / 1006.875); transform: translate(0, -30.431%); }
  .pro-group-compact .pro-view-compact-rec-proximo .pro-frame { aspect-ratio: 718 / 510; width: 55%; }
  .pro-group-compact .pro-view-compact-rec-proximo .pro-frame img { width: calc(100% * 2018 / 1009.6875); transform: translate(-49.951%, 0); }

  .pro-group-compact .pro-subtabs { margin-bottom: 18px; }
  .pro-group-compact .pro-note {
    display: block;
    margin: 14px 0 0;
    color: #8fa9b1;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.5;
  }
}

/* Franja <=900: solo reglas de Operacion.
   La ventana universal de 900 px del derivado que vivia aca forzaba la MISMA
   geometria de origen para las seis vistas de PRO (assets de proporciones muy
   distintas) y producia contenido y palabras cortadas, perdida de estados y un
   salto artificial en 900/901. Se elimino como estrategia general: cada
   evidencia usa su ventana semantica propia en su breakpoint. */
@media (max-width: 900px) {
  .operation-primary { grid-column: 1 / -1; }
  .operation-states { grid-column: 1 / span 7; }
  .operation-mobile { grid-column: 8 / -1; grid-row: 2; }
  .operation-phone { width: min(240px, calc(100% - 36px)); margin-bottom: -90px; }
}

/* Mobile */
@media (max-width: 760px) {
  :root { --header-height: 68px; }
  #contenido > .faq-section { padding: 112px 0 148px; }
  .nav-shell { width: calc(100% - 28px); }
  .brand-symbol { width: 42px; height: 42px; border-radius: 13px; }
  .nav-cta { display: none; }
  .section-heading, .ready-grid, .plan-grid, .faq-grid, footer { width: calc(100% - 28px); }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2, .faq-title h2, .cta-copy h2 { font-size: clamp(33px, 10vw, 43px); }
  .section-heading p, .faq-title > p, .cta-copy > p { font-size: 15px; line-height: 1.65; }
  .section-kicker, .eyebrow { font-size: 10px; }
  .hero { padding: calc(var(--header-height) + 22px) 0 26px; }
  .hero-shell { width: calc(100% - 28px); }
  .hero-paths { opacity: .52; }
  .hero-paths svg { width: 194%; }
  .hero-paths-set-secondary path:nth-child(n+9),
  .hero-paths-set-accent path:nth-child(n+6) { display: none; }
  .hero-brand-name { font-size: 11px; }
  .hero h1 { margin-top: 4px; font-size: clamp(42px, 12.3vw, 50px); line-height: .98; }
  .hero-lead { max-width: 345px; font-size: 16px; line-height: 1.5; }
  .hero-product { margin-top: 22px; }
  .hero-product-toolbar { margin-bottom: 9px; }
  .hero-view-tabs { width: 100%; }
  .hero-view-button { flex: 1; min-height: 36px; }
  .hero-product-stage { height: 430px; }
  .hero-slide-web {
    top: 82px;
    width: 100%;
    transform-origin: center;
  }
  .hero-slide-web .hero-web-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1426 / 610;
    cursor: zoom-in;
  }
  .hero-slide-web .hero-web-frame img {
    width: 100%;
    max-width: none;
    transform: scale(1.12);
    transform-origin: center center;
    transition: transform 180ms var(--ease-out);
  }
  .hero-product[data-hero-web-zoom="true"] .hero-slide-web .hero-web-frame {
    cursor: zoom-out;
    border-color: rgba(111, 226, 226, .5);
    box-shadow: 0 30px 72px rgba(0, 10, 17, .42), 0 0 40px rgba(27, 200, 205, .11);
  }
  .hero-product[data-hero-web-zoom="true"] .hero-slide-web .hero-web-frame img {
    transform: scale(1.42);
  }
  .hero-slide-pwa {
    top: 2px;
    width: 186px;
  }
  .hero-product[data-hero-view="web"] .hero-slide-web {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  .hero-product[data-hero-view="web"] .hero-slide-pwa {
    opacity: .86;
    transform: translate3d(76%, 0, 0) scale(.72);
  }
  .hero-product[data-hero-view="pwa"] .hero-slide-web {
    opacity: 0;
    transform: translate3d(-62%, 0, 0) scale(.9);
    pointer-events: none;
  }
  .hero-product[data-hero-view="pwa"] .hero-slide-pwa {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  .hero-product[data-hero-phone-zoom="true"] .hero-product-stage { height: 470px; }
  .hero-product[data-hero-phone-zoom="true"] .hero-slide-pwa { width: 214px; }
  .management-preview img { width: 130%; max-width: none; object-position: 42% top; }
  .operation-bento { width: calc(100% - 28px); grid-template-columns: 1fr; }
  .operation-primary, .operation-states, .operation-mobile, .operation-capabilities { grid-column: 1; grid-row: auto; }
  .operation-primary { order: 1; }
  .operation-mobile { order: 2; min-height: 680px; }
  .operation-states { order: 3; }
  .operation-capabilities { order: 4; grid-template-columns: repeat(2, 1fr); }
  .operation-capabilities span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .operation-capabilities span:nth-child(4) { border-top: 1px solid var(--line); }
  .operation-tile-copy { padding: 23px 21px 18px; }
  .operation-tile-copy h3 { font-size: 26px; }
  .operation-phone { width: min(284px, calc(100% - 42px)); margin-bottom: -90px; }
  /* Mobile: una tarjeta completa por bloque.
     Geometria real medida en los assets (no estimada):
       agenda  1423x545 -> tarjeta 2 (14:00 Marcela Martinez) x 54..1045 = 992px,
                          y 369..521 = 153px. La tarjeta 1 (10:00 Juan Perez) ocupa
                          y 205..357; el paso entre tarjetas es 164px y el hueco entre
                          ambas es 369-357 = 12px.
       estados 1382x760 -> tarjeta 10:00 COMPLETADO x 60..1051 = 992px,
                          y 396..604 = 209px. El crop CSS usa una ventana
                          deliberadamente mas amplia (aspect-ratio 989 / 248) que
                          conserva aire y contexto superior limpio.
     La ventana de crop no es el tamano real de la tarjeta: agenda usa 1004x157
     sobre una tarjeta de 992x153, y la imagen se escala a esa ventana con
     calc(100% * Wasset / Wventana). La captura se posiciona en absoluto dentro
     de la figura, asi el encuadre es determinista: ni la tira de fechas, ni el
     sidebar, ni la tarjeta vecina entran en el recorte.
     translateY porcentual = -(Ycrop / Hasset) * 100, con Ycrop ~ 367 en agenda
     (369 menos el aire superior). El porcentaje de translateY es relativo a la
     altura del propio elemento transformado, o sea a la altura del asset, no a
     la figura.
     En los assets la tarjeta no arranca en 0: la agenda deja 54px a la
     izquierda y 60px en estados, compensados con el translateX en % de la
     imagen. */
  .operation-shot-agenda { aspect-ratio: 1004 / 157; }
  .operation-shot-agenda img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% * 1423 / 1004);
    max-width: none;
    height: auto;
    transform: translate(-3.87%, -67.34%);
  }
  .operation-shot-states { aspect-ratio: 989 / 248; }
  .operation-shot-states img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% * 1382 / 989);
    max-width: none;
    height: auto;
    transform: translate(-4.41%, -47.76%);
  }
  .pro-section, .assistant-section { padding: 78px 0; }
  .pro-shell, .assistant-grid { width: calc(100% - 28px); }
  .pro-heading h2, .assistant-copy h2 { font-size: clamp(36px, 10vw, 46px); }
  .pro-heading > p, .assistant-copy > p { font-size: 15px; }
  .pro-scope { grid-template-columns: repeat(2, 1fr); }
  .pro-scope span:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .1); border-left: 0; }
  .pro-scope span:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .1); }
  .pro-tabs { gap: 8px; }
  html.pro-ready .pro-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pro-tab { justify-content: center; padding-inline: 0; text-align: center; }
  .pro-subtabs { gap: 0 18px; }
  .pro-module-copy { padding-bottom: 14px; }
  .pro-module-copy h3 { font-size: 25px; }
  .pro-shot { border-radius: 18px; }
  .assistant-grid { grid-template-columns: 1fr; }
  .assistant-copy { max-width: none; }
  .assistant-visual { width: min(440px, 100%); }
  /* Asistente mobile: ventana editorial sobre el MISMO asset. El panel completo
     a 505x640 reducido a ~330 px dejaba el cuerpo de la respuesta en ~8,5 px.
     La ventana recorta solo periferia (consultas sugeridas y avisos) y conserva
     entera la jerarquia pregunta -> respuesta -> cifras, sin cortar texto:
       x 22..478  (456)  todo el texto vive entre x 35 y x 475
       y  80..495 (415)  desde la consulta hasta la grilla de metricas
     aspect-ratio 456/415 · zoom calc(100% * 505 / 456) · translate del origen
     (-22/505, -80/640). Nunca se agranda por encima de 1:1: el marco mobile mide
     a lo sumo 440 - 28 - 2 = 410 px de ancho contra los 456 del recorte. */
  .assistant-shot { position: relative; display: block; width: 100%; aspect-ratio: 456 / 415; overflow: hidden; border: 1px solid #274752; border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--navy-950); }
  .assistant-shot img { position: absolute; top: 0; left: 0; width: calc(100% * 505 / 456); max-width: none; height: auto; border: 0; border-radius: 0; transform: translate(-4.3564%, -12.5%); }
  /* El rotulo deja de flotar sobre la captura: en mobile caeria encima de la
     cifra "Saldo pendiente". Pasa debajo de la ventana, como en el resto. */
  .assistant-visual { padding-bottom: 12px; }
  .assistant-visual figcaption { position: static; display: inline-block; margin: 11px 2px 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; padding: 24px; }
  .plan-top p { min-height: 0; }
  .plan-head-row { align-items: flex-start; }
  .plan-fit { max-width: 170px; }
  .ready-copy h2 { font-size: clamp(36px, 10vw, 46px); }
  .ready-copy > p { font-size: 15px; }
  .ready-visual { padding: 9px; border-radius: 22px; }
  /* Web lista mobile: una evidencia por vez. Las ventanas autorizadas viven en
     la referencia 2048x1280; el master real es 2880x1800 (factor 1.40625) y
     cada derivado es el crop 1:1 de ese master, asi que la ventana en
     coordenadas del derivado es (x * 1.40625 - crop_x, y * 1.40625 - crop_y).
       context 360, 393, 560, 86 -> crop 478, 526  x  28.25   y 26.65625  787.5    x 120.9375
       detail  436, 850, 490, 52 -> crop 478,1162  x 135.125  y 33.3125   689.0625 x  73.125
     El marco de la superficie toma la ventana mas alta (context, 560/86) para
     que ningun estado se recorte y la seccion no salte; el detail se centra. */
  .ready-shot { aspect-ratio: 560 / 86; border-radius: 14px; }
  .ready-frame { left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 12px; background: var(--navy-950); }
  .ready-frame img { position: absolute; top: 0; left: 0; max-width: none; height: auto; }
  /* Cada ventana se centra y nunca se agranda por encima de 1:1 respecto de su
     derivado (width: min(100%, ancho de la ventana)): un detalle chico no se
     estira para llenar la superficie. */
  .ready-frame-context { aspect-ratio: 560 / 86; width: min(100%, 787.5px); }
  .ready-frame-context img { width: calc(100% * 1924 / 787.5); transform: translate(-1.4683%, -3.3031%); }
  .ready-frame-detail { aspect-ratio: 490 / 52; width: min(100%, 689.0625px); }
  .ready-frame-detail img { width: calc(100% * 1322 / 689.0625); transform: translate(-10.2213%, -19.7115%); }
  /* Rotulo editorial fuera del screenshot: la ventana mobile recorta el
     encabezado, asi que el nombre funcional del paso va debajo. */
  .ready-state { display: block; margin: 10px 0 0; color: var(--teal-600); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .final-cta { padding: 24px 14px 58px; }
  .cta-card { padding: 35px 24px; gap: 30px; border-radius: 25px; }
  .cta-actions { width: 100%; justify-items: stretch; text-align: center; }
  footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  footer > p { text-align: center; }

  /* --- PRO V5.2 compacto mobile: superficie de referencia 358 x 264 y ventanas
     propias de <=760 sobre los mismos derivados. --- */
  .pro-group-compact .pro-shot-v52 { aspect-ratio: 358 / 264; }

  /* Beneficios, mobile. Ventanas autorizadas sobre el master 2048x1280:
     Fidelizacion 232,430,430,82 / Cupones 1048,430,490,82 /
     Gift Cards 232,606,410,86 / Actividad 1710,749,74,65. */
  .pro-group-compact .pro-view-compact-fidelizacion .pro-frame { aspect-ratio: 430 / 82; }
  .pro-group-compact .pro-view-compact-fidelizacion .pro-frame img { width: calc(100% * 2295 / 604.6875); transform: translate(-1.492%, -64.351%); }
  .pro-group-compact .pro-view-compact-cupones .pro-frame { aspect-ratio: 490 / 82; }
  .pro-group-compact .pro-view-compact-cupones .pro-frame img { width: calc(100% * 2295 / 689.0625); transform: translate(-51.492%, -64.351%); }
  .pro-group-compact .pro-view-compact-giftcards .pro-frame { aspect-ratio: 410 / 86; }
  .pro-group-compact .pro-view-compact-giftcards .pro-frame img { width: calc(100% * 1148 / 576.5625); transform: translate(-2.983%, -27.898%); }
  /* Actividad mobile es DETAIL: el contador real 30 se presenta a escala
     moderada dentro de la superficie, sin ampliarlo para llenar el marco. */
  .pro-group-compact .pro-view-compact-actividad .pro-frame { aspect-ratio: 74 / 65; width: 35%; }
  .pro-group-compact .pro-view-compact-actividad .pro-frame img { width: calc(100% * 2295 / 104.0625); transform: translate(-92.056%, -18.379%); }

  /* Recordatorios, mobile: Pendiente 328,614,384,98 y Proximo 1554,529,176,164. */
  .pro-group-compact .pro-view-compact-rec-pendiente .pro-frame { aspect-ratio: 384 / 98; width: 100%; }
  .pro-group-compact .pro-view-compact-rec-pendiente .pro-frame img { width: calc(100% * 2018 / 540); transform: translate(-1.449%, -75.933%); }
  .pro-group-compact .pro-view-compact-rec-proximo .pro-frame { aspect-ratio: 176 / 164; width: 77%; }
  .pro-group-compact .pro-view-compact-rec-proximo .pro-frame img { width: calc(100% * 2018 / 247.5); transform: translate(-86.884%, -59.262%); }

  .pro-group-compact .pro-subtabs { gap: 0 14px; }
  html.pro-ready .pro-group-compact .pro-subtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pro-group-compact .pro-subtab { justify-content: center; padding-inline: 0; text-align: center; }

  /* Metricas mobile es DETAIL: protagonista Ingreso neto. Se entra directo al
     FOCUS y se omite el cruce context -> focus porque dos ventanas con
     geometrias distintas sobre una superficie de 358 px darian una composicion
     rota. El rotulo "Ingreso neto" va fuera de la captura. El one-shot de
     desktop/tablet queda intacto. */
  .pro-view-metricas {
    aspect-ratio: 358 / 264;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .pro-view-metricas .pro-frame {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 440 / 188;
    overflow: hidden;
    border-radius: 14px;
    background: #071722;
  }
  .pro-view-metricas .pro-metrics-context { display: none; }
  .pro-view-metricas .pro-metrics-focus {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: calc(100% * 1326 / 440);
    max-width: none;
    height: auto;
    opacity: 1;
    transform: translate(0, -20.853%);
  }
  .pro-note-mobile { display: block; margin: 14px 0 0; color: #8fa9b1; font-size: 12px; font-weight: 650; line-height: 1.5; }
}

/* Franja intermedia 761-900: layout deliberado de una pieza por fila.
   Evita el split estrecho Estados + phone (0.29-0.30 de escala con texto de
   ~3px y hueco muerto bajo la imagen). Cada bloque ocupa el ancho completo y
   conserva el encuadre de tarjeta completa definido en mobile. */
@media (min-width: 761px) and (max-width: 900px) {
  .operation-primary, .operation-states, .operation-mobile, .operation-capabilities { grid-column: 1 / -1; grid-row: auto; order: initial; }
  .operation-primary { order: 1; }
  .operation-mobile { order: 2; min-height: 0; }
  .operation-states { order: 3; }
  .operation-capabilities { order: 4; grid-template-columns: repeat(4, 1fr); }
  .operation-mobile .operation-tile-copy { padding: 26px 28px 20px; }
  .operation-phone { width: 284px; margin-inline: auto; margin-bottom: -90px; }
  .operation-capabilities span:nth-child(3) { border-left: 1px solid var(--line); border-top: 0; }
  .operation-capabilities span:nth-child(4) { border-top: 0; }
  /* Mismo encuadre de tarjeta completa que <=760, ahora a ancho completo:
     la tarjeta crece con la franja y el texto escala con ella en lugar de
     caer a ~3px en un split estrecho de 7/5 columnas. */
  .operation-shot-agenda { aspect-ratio: 1004 / 157; }
  .operation-shot-agenda img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% * 1423 / 1004);
    max-width: none;
    height: auto;
    transform: translate(-3.87%, -67.34%);
  }
  .operation-shot-states { aspect-ratio: 989 / 248; }
  .operation-shot-states img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% * 1382 / 989);
    max-width: none;
    height: auto;
    transform: translate(-4.41%, -47.76%);
  }
}

@media (max-width: 390px) {
  .pro-tab { font-size: 12px; }
  .pro-subtab { font-size: 11px; }
  .plan-head-row { display: grid; justify-content: start; }
  .plan-fit { max-width: none; }
}

@media (min-width: 1025px) and (max-height: 700px) {
  .hero { min-height: 620px; padding-top: calc(var(--header-height) + 34px); }
  .hero-grid { gap: 36px; }
  .hero h1 { font-size: clamp(48px, 4.7vw, 66px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html.motion-ready .reveal { opacity: 1; transform: none; }
  html.motion-ready .hero-product-shell.reveal .hero-product-viewport { clip-path: none; }
  /* Web lista V5.2: el estado final se muestra directo. La regla es CSS para que
     el DETAIL ya este completo en el primer pintado, sin entrada ni espera. */
  .ready-frame { transition: none !important; }
  .ready-frame-context { opacity: 0 !important; }
  .ready-frame-detail { opacity: 1 !important; }
}

/* Hero V5.3: reduced motion conserva la composición final sin trayectorias ni roll. */
@media (prefers-reduced-motion: reduce) {
  .hero-paths,
  .hero-paths svg,
  .hero-paths-set { animation: none !important; }
  .hero-title-roll.is-rolling .hero-roll-char { animation: none !important; opacity: 1; transform: none; filter: none; }
  .hero-slide,
  .hero-product-stage,
  .hero-web-frame img,
  .hero-view-button,
  .hero-view-tabs::before,
  .hero-view-tabs::after,
  .nav-tubelight-indicator,
  .menu-button span,
  .mobile-nav {
    transition: none !important;
  }
}