/* ============================================================================
   home.css — Rediseño de la home del Asociate URG (index.html).
   Guillermo Cismondi 19/08/2026.
   Basado en la maqueta nueva, con COLORES y TIPOGRAFÍA OFICIALES (tokens de
   styles.css :root). Se linkea DESPUÉS de styles.css. Incluye: topbar promo,
   header, hero, trust bar, sección planes, plan cards, coverage note.
   ============================================================================ */

:root {
  --lp-navy: var(--blue, #1f3f97);
  --lp-navy-deep: #16224c;          /* topbar/acentos oscuros, texto blanco legible */
  --lp-cyan: var(--cyan, #0ca9cc);
  --lp-green: var(--lime, #91bf3b); /* verde CTA oficial */
  --lp-green-deep: #5f8a22;         /* verde oficial oscurecido, para barras con texto blanco */
  /* Guillermo Cismondi 10/10/2026 - variantes SOLO para texto chico que fallaba contraste (Lighthouse):
     #0ca9cc da 2.5:1 y #5f8a22 4.08:1. Los fondos y la marca quedan igual. El verde es el mismo
     --lp-green-a11y que ya usan plus.css, conecta.css y area.css. */
  --lp-cyan-text: #08768f;
  --lp-green-a11y: #4d6a1a;
  --lp-title: var(--text, #1f2f5f);
  --lp-body: var(--muted, #5a6a8f);
  --lp-line: var(--line, #dfe6f2);
  --lp-card: var(--card, #ffffff);
  --lp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2391bf3b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Guillermo 20/08/2026 (fix) - offset global de scroll para que el topbar promo + header (ambos
   fixed) no tapen el destino de un scrollIntoView (ej. el scroll-to-Plus del header). --header-h
   la mide el JS (fallback 76px, altura aprox. del header). */
html { scroll-padding-top: calc(var(--topbar-h, 36px) + var(--header-h, 76px)); }

/* Tipografía oficial en toda la landing nueva */
.lp-header, .lp-hero, .lp-trust, .lp-section, .lp-plans, .lp-note {
  font-family: 'Nunito', 'Nunito Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.lp-hero__title, .lp-section__title, .lp-plan__name, .lp-plan__amount {
  font-family: 'Sora', 'Sora Fallback', 'Nunito', 'Nunito Fallback', sans-serif;
}

/* ---------- Barra promo superior ---------- */
/* Guillermo 20/08/2026 (fix) - sticky no agarraba en preprod (probablemente por el
   overflow-x:hidden compartido en html/body de styles.css, que rompe el containing block de
   sticky en algunos navegadores). Se pasa a position:fixed, que no depende de eso: el topbar
   y el header quedan fijos al viewport en cualquier navegador/breakpoint. --topbar-h/--header-h
   los setea el JS (miden el alto real; el texto del topbar puede wrappear en mobile angosto) y
   se usan para: 1) el "top" del header (queda pegado debajo del topbar) y 2) el padding-top de
   <main> (ver body.fixed-plan-headers main más abajo), que compensa el espacio que dejaron de
   ocupar en el flujo normal al pasar a fixed. */
.promo-topbar {
  background: var(--lp-navy-deep);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
}

/* ---------- Header nuevo ---------- */
.lp-header {
  position: fixed;
  top: var(--topbar-h, 36px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--lp-line);
}
/* Guillermo 20/08/2026 (fix) - compensa el espacio que topbar+header dejan de ocupar en el
   flujo normal al ser fixed. No estaba definida en home.css (index.html quedaba con el
   padding-top:76px genérico de styles.css, pensado para 1 solo header fijo, no para topbar+header). */
body.fixed-plan-headers main {
  padding-top: calc(var(--topbar-h, 36px) + var(--header-h, 76px));
}
.lp-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.lp-brand { display: inline-flex; align-items: center; line-height: 0; }
.lp-brand img { height: 42px; width: auto; }
.lp-header__spacer { flex: 1 1 auto; }
.lp-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5fb;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--lp-title);
  font-weight: 600;
}
.lp-loc::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lp-green);
  flex: 0 0 auto;
}
.lp-loc__change {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--lp-cyan-text);
  font: inherit; font-weight: 700;
  text-decoration: underline;
}
.lp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 800; font-size: 15px; letter-spacing: 0.2px;
  color: #fff; text-decoration: none;
  background: linear-gradient(145deg, #a5cb4b, var(--lp-green));
  box-shadow: 0 10px 20px rgba(126, 167, 50, 0.34);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lp-cta:hover { transform: translateY(-1px); }

/* ---------- Hero ---------- */
.lp-hero {
  background: linear-gradient(180deg, #eaf3fb 0%, #f4f9fc 55%, #ffffff 100%);
  padding: clamp(12px, 2.4vw, 28px) 0 clamp(28px, 4vw, 56px);
}
.lp-hero__grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* Guillermo Cismondi 10/10/2026 - CLS 0.185 en desktop (Lighthouse): al cargar Sora/Nunito el
     texto del hero cambia de alto, y con align-items:center la imagen se recentraba y se movia.
     La imagen queda anclada arriba y las columnas no dependen del ancho del texto (minmax 0). */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.lp-hero__grid > .lp-hero__media { align-self: start; }
.lp-hero__title {
  color: var(--lp-title);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.lp-hero__title .is-accent { color: var(--lp-cyan); }
.lp-hero__text {
  color: var(--lp-body);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  max-width: 34ch;
  margin: 0 0 28px;
}
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-hero__media { position: relative; }
.lp-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(21, 39, 88, 0.16);
}

/* Botones hero (reusan el verde oficial + outline navy) */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  border-radius: 999px; cursor: pointer; text-decoration: none;
  font-weight: 800; font-size: 16px; letter-spacing: 0.2px;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.lp-btn--green {
  color: #fff; border: 0;
  background: linear-gradient(145deg, #a5cb4b, var(--lp-green));
  box-shadow: 0 12px 24px rgba(126, 167, 50, 0.34);
}
.lp-btn--green:hover { transform: translateY(-1px); }
.lp-btn--outline {
  color: var(--lp-navy); background: #fff;
  border: 2px solid var(--lp-navy);
}
.lp-btn--outline:hover { background: #f3f6fd; }

/* ---------- Trust bar (OSDE) ---------- */
.lp-trust {
  border-bottom: 1px solid var(--lp-line);
  background: #fff;
}
.lp-trust__inner {
  max-width: 1180px; margin: 0 auto; padding: 20px 24px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 16px;
  color: var(--lp-body); font-size: 15px;
}
.lp-trust__inner strong { color: var(--lp-title); font-weight: 800; }
.lp-trust__osde { height: 20px; width: auto; vertical-align: middle; }
.lp-trust__sep { color: var(--lp-line); }

/* ---------- Sección planes ---------- */
.lp-section { padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); background: #fff; }
.lp-section__head { max-width: 1180px; margin: 0 auto 34px; padding: 0 24px; text-align: center; }
.lp-section__title {
  color: var(--lp-title); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 12px;
}
.lp-section__subtitle {
  color: var(--lp-body); font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.5; margin: 0 auto; max-width: 46ch;
}
/* Guillermo 17/09/2026 - el subtitulo de "Nuestros planes" entra en una sola linea: con los
   46ch de arriba cortaba despues de "o". En pantallas angostas sigue partiendo, que corresponde. */
.lp-section__subtitle--static { max-width: 92ch; }

/* ---------- Grid de planes ---------- */
/* Guillermo 03/09/2026 - las columnas tienen un ancho maximo, no 1fr.
   Con 1fr, en las ciudades donde solo se vende Conecta la unica tarjeta se estiraba a los 1180px
   del contenedor y quedaba enorme al lado de como se ve en Rosario o Cordoba. El tope es el ancho
   que tiene una tarjeta cuando son tres, asi que una sola queda igual de grande y centrada. */
.lp-plans {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 361px));
  justify-content: center;
  gap: 24px; align-items: stretch;
}
.lp-plan {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(21, 39, 88, 0.07);
}
.lp-plan--featured {
  border-color: var(--lp-navy);
  box-shadow: 0 22px 48px rgba(31, 63, 151, 0.18);
}
.lp-plan__top {
  text-align: center; color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 9px 12px;
}
.lp-plan__top--cyan { background: var(--lp-cyan); }
.lp-plan__top--navy { background: var(--lp-navy); }
.lp-plan__top--green { background: var(--lp-green-deep); }
.lp-plan__media { aspect-ratio: 16 / 9; overflow: hidden; }
.lp-plan__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-plan__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 24px; }
.lp-plan__badge {
  display: inline-block;
  background: #eef3fb; color: var(--lp-title);
  border-radius: 999px; padding: 6px 14px;
  font-size: 12px; font-weight: 700; margin-bottom: 16px;
}
/* Guillermo 27/08/2026 - badge de promo sin promo vigente: invisible pero reservando la linea,
   para que los titulos de las tres tarjetas queden alineados (js/vitrina-promo.js). */
/* Guillermo Cismondi 16/10/2026 - sin promo el badge no reserva lugar (dejaba ~100px vacios entre la foto y el
   titulo); con UTM/promo vitrina-promo.js le saca is-promo-empty y aparece. */
.lp-plan__badge.is-promo-empty { display: none; }

/* badge del color del título de cada plan */
.lp-plan__badge--cyan { background: rgba(12, 169, 204, 0.12); color: var(--lp-cyan); }
.lp-plan__badge--navy { background: rgba(31, 63, 151, 0.10); color: var(--lp-navy); }
.lp-plan__badge--green { background: var(--lime-soft, #edf8da); color: var(--lp-green-deep); }

.lp-plan__name { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
/* colores de título por plan (doble clase para ganar especificidad sobre h3 de styles.css) */
.lp-plan .lp-plan__name.lp-plan__name--cyan { color: var(--lp-cyan); }
.lp-plan .lp-plan__name.lp-plan__name--navy { color: var(--lp-navy); }
.lp-plan .lp-plan__name.lp-plan__name--green { color: var(--lp-green-deep); }
/* min-heights fijos para alinear precio/incluye/botones entre las 3 cards */
.lp-plan__lead { color: var(--lp-title); font-weight: 700; font-size: 15px; margin: 0 0 8px; min-height: 40px; }
.lp-plan__desc { color: var(--lp-body); font-size: 14.5px; line-height: 1.5; margin: 0; min-height: 66px; }

/* Guillermo 07/09/2026 - el bloque de precio reserva siempre el alto del "Antes $x" y apoya el
   importe contra el piso: asi las tres cards muestran el precio a la misma altura, tenga o no
   promo cada plan (antes Conecta usaba un span placeholder propio y quedaba 18px mas abajo). */
.lp-plan__price {
  border-top: 1px solid var(--lp-line);
  margin-top: 16px; padding-top: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 901px) {
  .lp-plan__price { min-height: 100px; }
}
.lp-plan__antes {
  display: block; min-height: 18px;
  color: var(--lp-body); font-size: 13px;
}
.lp-plan__antes s { color: var(--lp-body); }
.lp-plan__antes--ph { visibility: hidden; }
.lp-plan__amount {
  color: var(--lp-title); font-weight: 800;
  font-size: clamp(30px, 3.2vw, 38px); line-height: 1.1;
  white-space: nowrap;
}
.lp-plan__per { display: block; color: var(--lp-body); font-size: 13px; margin-top: 2px; }
.lp-plan__per--promo { color: var(--lp-green-a11y); font-weight: 700; }
/* Guillermo 17/09/2026 - el "Desde" va dentro del importe pero mucho mas chico: es una
   aclaracion, no el numero. En em para que siga al clamp del monto. */
.lp-plan__desde {
  font-size: 0.34em; font-weight: 700; color: var(--lp-body);
  letter-spacing: 0.02em; margin-right: 2px;
}

.lp-plan__promo {
  color: var(--lp-green-deep); font-weight: 800; font-size: 13px;
  margin-top: 8px;
}
.lp-plan__includes {
  color: var(--lp-body); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; margin: 18px 0 8px;
}
.lp-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-plan__list li {
  position: relative; padding-left: 26px;
  color: var(--lp-title); font-size: 14.5px; line-height: 1.4;
}
.lp-plan__list li::before {
  content: ""; position: absolute; left: 0; top: 1px;
  width: 16px; height: 16px;
  background: var(--lp-check) center / contain no-repeat;
}
.lp-plan__actions { margin-top: auto; padding-top: 22px; display: grid; gap: 12px; justify-items: center; }
.lp-plan__actions .lp-btn { width: 100%; }
.lp-plan__more {
  background: none; border: 0; cursor: pointer;
  color: var(--lp-cyan-text); font-weight: 700; font-size: 15px; text-decoration: none;
}
.lp-plan__more--green { color: var(--lp-green-a11y); }
.lp-plan__more--navy { color: var(--lp-navy); }

/* ---------- Coverage note (centrada) ---------- */
.lp-note {
  max-width: 1180px; margin: 34px auto 56px; padding: 0 24px;
}
/* el footer pega sin la banda gris del margin-top base de styles.css */
.site-footer { margin-top: 0; }
.lp-note__inner {
  background: #f4f8fd; border: 1px solid var(--lp-line);
  border-radius: 16px; padding: 20px 28px;
  color: var(--lp-body); font-size: 15px; line-height: 1.55;
  text-align: center;                 /* pedido: mensaje de cobertura centrado */
}
.lp-note__inner strong { color: var(--lp-title); }

/* Guillermo 17/09/2026 - las tres tarjetas se alinean por subgrid en vez de por los min-height
   de arriba: la bajada nueva de Conecta ocupa 4 lineas, se pasaba de los 66px fijos y corria
   precio, "Incluye" y bullets hacia abajo solo en esa card. Con subgrid cada bloque comparte
   fila con el de las otras dos, sea cual sea el largo del texto. Las filas, de arriba hacia
   abajo: top, media, badge, nombre, lead, bajada, precio, "Incluye", bullets, botones.
   Los min-height siguen ahi como fallback para navegadores sin subgrid. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    /* el gap de 24px de .lp-plans es entre columnas: con las tarjetas ocupando 10 filas
       cada una, tambien se aplicaba entre esas 10 filas y estiraba las cards ~216px. */
    .lp-plans { grid-template-rows: repeat(10, auto); column-gap: 24px; row-gap: 0; }
    .lp-plan { display: grid; grid-row: span 10; grid-template-rows: subgrid; }
    .lp-plan__body { display: grid; grid-row: span 8; grid-template-rows: subgrid; }
    .lp-plan__head { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    /* con las filas compartidas los min-height solo agregarian hueco muerto */
    .lp-plan__lead, .lp-plan__desc, .lp-plan__price { min-height: 0; }
    .lp-plan__name, .lp-plan__lead, .lp-plan__desc { align-self: start; }
    /* el importe sigue apoyado contra el piso de su fila y los botones contra el de la suya */
    .lp-plan__price { align-self: stretch; }
    .lp-plan__actions { align-self: end; }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-hero__media { order: -1; }
  .lp-hero__text { max-width: none; }
}
@media (max-width: 560px) {
  /* Guillermo Cismondi 09/10/2026 - header mobile de UNA fila: logo a la izquierda, ciudad a la
     derecha, y "Cotizá online" fuera.
     Antes el logo iba centrado en su propia fila y debajo la ciudad y el boton, o sea dos filas de
     header fijo comiendose la parte de arriba de la pantalla. El boton ademas era redundante: la
     pagina entera es la cotizacion y cada plan tiene el suyo mas abajo, pegado al precio -- que es
     donde se decide --, asi que arriba solo competia con el dato util, que es en que ciudad estas
     parado (de eso dependen los planes y los precios que se ven). */
  .lp-header__inner { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 10px 14px; }
  .lp-header__inner .lp-brand { flex: 0 1 auto; justify-content: flex-start; }
  .lp-header__spacer { display: none; }
  /* Con `body.fixed-plan-headers` delante: styles.css tiene
     `body.fixed-plan-headers .header-start-cta { display: inline-flex }` en este mismo rango de
     anchos, y con un selector mas especifico que el de clase sola le ganaba a este display:none. */
  body.fixed-plan-headers .lp-header__inner .header-start-cta,
  .lp-header__inner .header-start-cta { display: none; }
  .lp-loc { font-size: 12px; padding: 6px 10px; flex: 0 0 auto; }
  /* Guillermo Cismondi 27/10/2026 - fuera de zona core va el logo de Conecta (mas ancho) y con una
     ciudad larga la pildora se salia de pantalla: cede primero el logo (achica sin deformarse) y la
     ciudad se corta con "..." solo si la pildora pasa del 66% del ancho. */
  .lp-header__inner .lp-brand { min-width: 0; }
  .lp-brand img { max-width: 100%; object-fit: contain; object-position: left center; }
  .lp-loc { flex: 0 0 auto; max-width: 66%; white-space: nowrap; }
  .lp-loc #lp-loc-city { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .lp-hero__actions .lp-btn { width: 100%; }
  /* Guillermo Cismondi 15/10/2026 - en mobile el hero no muestra "Cotiza online" (pedido del usuario):
     queda "Ver los planes", que baja a las tarjetas, y ahi cada plan tiene su propio "Cotiza online". */
  #hero-ya-cotizar { display: none; }
}

/* ---------- Landing Ritorno ---------- */
/* Guillermo 17/09/2026 - con ritorno=1 el header comercial se reemplaza por el de Urgencias
   (lo hace html.is-urgencias). Ese header traia position:sticky/top:0/z-index:20 de styles: como
   la topbar de promo es fixed con z-index 60, la promo se le montaba encima y el contenido
   arrancaba pegado. Aca toma la misma posicion que tenia el header comercial -- fijo, arrancando
   donde termina la promo -- asi el orden de arriba hacia abajo queda:
   promo (si la campania la anuncia) -> header de Urgencias -> resto de la pagina.
   El hueco lo compensa `body.fixed-plan-headers main` con --header-h, que el JS de la pagina mide
   sobre el header que este a la vista. */
html.is-urgencias #site-header-urgencias {
  position: fixed;
  top: var(--topbar-h, 0px);
  left: 0;
  right: 0;
  z-index: 50;
}

/* Guillermo 17/09/2026 - En <=720px el header de Urgencias se queda sin sus tres botones: la nav
   pasa a ser un panel colgante que abre el boton de telefono (.urgencias-mobile-toggle, ya
   existente), pero una regla de styles lo apagaba justo en este combo
   (html.is-urgencias body.fixed-plan-headers), asi que en el telefono el header quedaba con el
   logo y nada mas. Se vuelve a mostrar: mismo peso de selector, pero este archivo carga despues.
   Al tocarlo abre .urgencias-nav.is-open (el panel con los tres botones) y, ya en mobile, cada
   boton marca directo -- el JS del header hace window.location.href = tel: en vez de desplegar el
   numero, que en mobile esta oculto a proposito. */
@media (max-width: 720px) {
  html.is-urgencias body.fixed-plan-headers .urgencias-mobile-toggle {
    display: inline-flex;
  }
}

/* Guillermo Cismondi 16/10/2026 - mobile: foto de las tarjetas de planes mas baja (200px). */
@media (max-width: 640px) {
  .lp-plan__media { aspect-ratio: auto; height: 200px; }
}