/* AMT — inicio en blanco (solo public/index.html: <body class="lp lp-light">). Reutiliza landing.css redefiniendo los tokens
   para fondo claro y corrige lo que allí está pensado para negro. La plataforma (app) y /planes/ siguen en oscuro. */
html:has(body.lp-light) { background: #fff; color-scheme: light; }
body.lp-light {
  --bg: #ffffff;
  --bg-1: #f5f7f9;
  --bg-2: #ffffff;
  --bg-3: #eceff3;
  --inset: #f2f4f7;
  --hover: rgba(10, 14, 20, .045);
  --active: rgba(10, 14, 20, .07);
  --line: rgba(10, 14, 20, .1);
  --line-soft: rgba(10, 14, 20, .07);
  --line-strong: rgba(10, 14, 20, .18);
  --text: #0b0d10;
  --text-2: #3f4550;
  --text-3: #66707d;
  --text-4: #a2a9b3;
  --blue-soft: rgba(31, 94, 255, .07);
  --shadow-pop: 0 18px 50px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);
  --hero-tone: #d4e4ea;   /* color del fondo de la foto en su borde izquierdo: el degradado lo continúa sin corte */
  --lp-pillars-h: 0px;   /* el encabezado ya no lleva la franja de pilares: la foto llega hasta abajo */
  background: #fff;
  color: var(--text);
}
.lp-light .logo-mark.glow { filter: none; }

/* botones */
.lp-light .lp-btn-blue { background: var(--text); color: #fff; }
.lp-light .lp-btn-blue:hover { background: #22262d; }
.lp-light .lp-btn-line { background: rgba(255, 255, 255, .6); border-color: var(--line-strong); color: var(--text); }
.lp-light .lp-btn-line:hover { background: #fff; border-color: rgba(10, 14, 20, .32); }

/* barra superior */
.lp-light .lp-nav { background: rgba(255, 255, 255, .82); border-bottom-color: var(--line-soft); }
@media (max-width: 1100px) { .lp-light .lp-nav { background: rgba(255, 255, 255, .98); } }

/* ---------- encabezado: la foto es el fondo ----------
   El fondo de la sección continúa el tono de la foto (blanco → azul hielo) y la foto se ancla a la derecha a toda la altura,
   fundida por la izquierda, arriba y abajo: se lee como una sola imagen, no como un recuadro junto al texto. */
.lp-light .lp-hero {
  border-bottom: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 62%, #fff calc(100% - var(--lp-pillars-h, 103px))),
    linear-gradient(90deg, #ffffff 0%, #f4f8fa 24%, var(--hero-tone) 56%, var(--hero-tone) 100%);
}
/* la foto se desvanece (máscara) por la izquierda, arriba y abajo hacia el fondo de la sección: sin bordes */
.lp-light .lp-hero-bg {
  left: auto; right: 0; bottom: var(--lp-pillars-h, 103px); width: auto; aspect-ratio: 2242 / 2186; max-width: 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 9%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, transparent 0%, #000 9%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
.lp-light .lp-hero-bg img { object-fit: cover; object-position: 50% 0; }
.lp-light .lp-hero-bg::after { content: none; }
.lp-light .lp-hero-inner { padding-top: 150px; padding-bottom: 170px; }
.lp-light .lp-hero-inner > * { max-width: min(470px, 36vw); }
.lp-light .lp-hero .lp-cta { margin-top: 44px; }
.lp-light .lp-hero h1 { max-width: min(520px, 38vw); font-size: clamp(36px, 4vw, 58px); color: var(--text); }
.lp-light .lp-hero .lp-lead { color: var(--text-2); }
.lp-light .lp-kicker { color: var(--text-3); }

/* superficies y detalles pensados para negro */
.lp-light .lp-panel { background: var(--bg-1); }
.lp-light .lp-show-tabs button[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(15, 23, 42, .06); }
.lp-light .lp-eco-item:hover { background: var(--bg-1); }
.lp-light .lp-checks .ic { background: rgba(10, 14, 20, .06); }
.lp-light .lp-billing button.is-active { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.lp-light .lp-plans-teaser { background: var(--bg-1); }
.lp-light .lp-teaser-price b { background: linear-gradient(180deg, #0b0d10, #66707d); -webkit-background-clip: text; background-clip: text; }
.lp-light .dv-screen { box-shadow: 0 40px 80px rgba(15, 23, 42, .22); }
.lp-light .dv-base { box-shadow: 0 18px 30px rgba(15, 23, 42, .18); }
.lp-light .dv-phone { box-shadow: -20px 30px 60px rgba(15, 23, 42, .25); }

/* bandas con foto: velo claro en lugar de negro */
.lp-light .lp-campus-bg img { filter: grayscale(1) brightness(1.05) contrast(.9); }
.lp-light .lp-campus-bg::after { background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, .72) 100%); }

.lp-light .lp-foot { background: var(--bg-1); }

/* cierre («Opera con método. Mide con rigor.») en negro como el original, para contrastar con el resto del inicio en blanco */
.lp-light .lp-final { background: #050505; color: #fff; border-top: none; }
.lp-light .lp-final h2 { color: #fff; }
.lp-light .lp-final .logo-mark { color: #fff; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .35)); }
.lp-light .lp-final .lp-btn-blue { background: #fff; color: #0b0d10; }
.lp-light .lp-final .lp-btn-blue:hover { background: #e6e8eb; }
.lp-light .lp-final .lp-btn-line { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .28); color: #fff; }
.lp-light .lp-final .lp-btn-line:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }

@media (max-width: 1100px) {
  .lp-light .lp-hero-bg { max-width: 52%; }
  .lp-light .lp-hero-inner > * { max-width: 42vw; }
  .lp-light .lp-hero h1 { max-width: 44vw; }
}
@media (max-width: 760px) {
  .lp-light .lp-hero { background: #fff; }
  .lp-light .lp-hero-bg { position: relative; bottom: auto; width: 100%; max-width: none; height: auto; aspect-ratio: 2242 / 2186; }
  .lp-light .lp-hero-bg { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .lp-light .lp-hero-inner { padding-top: 12px; padding-bottom: 48px; }
  .lp-light .lp-hero-inner > *, .lp-light .lp-hero h1 { max-width: none; }
  }


/* ecosistema: una sola imagen panorámica (la app AMT en la pantalla de inicio del iPhone) en lugar de la cuadrícula */
.lp-eco-fig { margin: 0; overflow: hidden; border-radius: 4px; background: #dcdcde; }
.lp-eco-fig img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .lp-eco-fig { border-radius: 4px; }
  .lp-eco-fig img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 96% 50%; }
}

/* prueba del encabezado (/?hero=b): foto con fondo gris neutro #d4d4d4 */
.lp-light.lp-hero-b { --hero-tone: #d4d4d4; }
.lp-light.lp-hero-b .lp-hero { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 88%, #fff 100%), linear-gradient(90deg, #ffffff 0%, #f1f1f1 22%, #d4d4d4 54%, #d4d4d4 100%); }
.lp-light.lp-hero-b .lp-hero { min-height: min(860px, calc(100vh - 72px)); display: flex; align-items: center; }
.lp-light.lp-hero-b .lp-hero-inner { width: 100%; padding-top: 72px; padding-bottom: 72px; }
/* la foto completa hasta el escritorio: solo se funde por la izquierda y apenas arriba y abajo */
.lp-light.lp-hero-b .lp-hero-bg {
  aspect-ratio: 2400 / 2480; max-width: 62%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 5%, #000 97%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%), linear-gradient(180deg, transparent 0%, #000 5%, #000 97%, transparent 100%);
}
.lp-light.lp-hero-b .lp-hero-bg img { object-fit: contain; object-position: 100% 100%; }
@media (max-width: 760px) {
  .lp-light.lp-hero-b .lp-hero { background: #fff; }
  .lp-light.lp-hero-b .lp-hero { display: block; min-height: 0; }
  .lp-light.lp-hero-b .lp-hero-bg { max-width: none; width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 92%, transparent 100%); }
  .lp-light.lp-hero-b .lp-hero-inner { padding-top: 12px; padding-bottom: 48px; }
}

/* línea bajo el título del encabezado */
.lp-light .lp-hero .lp-hero-who { margin-top: 20px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-2); }
.lp-light .lp-hero .lp-hero-who + .lp-cta { margin-top: 36px; }

/* encabezado con más aire: columna de texto más ancha (el título cabe en 3 renglones); la foto no se mueve */
.lp-light.lp-hero-b .lp-hero-inner > * { max-width: min(560px, 44vw); }
.lp-light.lp-hero-b .lp-hero h1 { max-width: min(700px, 47vw); font-size: clamp(36px, 3.9vw, 58px); line-height: 1.04; }
.lp-light.lp-hero-b .lp-hero .lp-hero-who { margin-top: 24px; }
.lp-light.lp-hero-b .lp-hero .lp-hero-who + .lp-cta { margin-top: 40px; }
.lp-light.lp-hero-b .lp-by { margin-top: 34px; padding-top: 26px; max-width: min(460px, 36vw); }
@media (max-width: 1280px) {
  .lp-light.lp-hero-b .lp-hero-inner > * { max-width: 38vw; }
  .lp-light.lp-hero-b .lp-hero h1 { max-width: 41vw; }
  .lp-light.lp-hero-b .lp-by { max-width: 38vw; }
}
@media (max-width: 760px) {
  .lp-light.lp-hero-b .lp-hero-inner > *, .lp-light.lp-hero-b .lp-hero h1, .lp-light.lp-hero-b .lp-by { max-width: none; }
}
.lp-light.lp-hero-b .lp-hero-inner > .lp-cta { max-width: none; }
.lp-by > span { white-space: nowrap; }
@media (max-width: 760px) { .lp-by .ats-logo { height: 23px; } }