/* Planes: composición compacta de la referencia con la identidad de Shalom Trust.
   Las superficies planas y el footer compacto sólo se aplican a esta ruta. */
.plans-view{background:#f4f6f9}
.plans-view > .page-noise{display:none}
.plans-view > main.planes-page{
  --pl-bg:#f4f6f9;
  --pl-card:#fff;
  --pl-ink:#17202e;
  --pl-muted:#687383;
  --pl-accent:#FB923C;
  --pl-accent-2:#FB923C;
  --pl-soft:#FB923C;
  color:var(--pl-ink);background:var(--pl-bg);border-radius:0;box-shadow:none;
  font-family:var(--font-sans);
}
.planes-page::before{display:none}
.pl-container{width:min(1120px,calc(100% - 56px));margin-inline:auto;position:relative}

/* Títulos breves, de dos líneas, con la jerarquía de la referencia. */
.pl-section{padding:48px 0 26px;position:relative;scroll-margin-top:24px}
.pl-section.pl-mdm{padding-top:66px}
.pl-heading{text-align:center;margin:0 auto 36px}
.pl-eyebrow{
  display:inline-flex;align-items:center;min-height:21px;padding:4px 9px;margin-bottom:10px;
  border:0;border-radius:999px;background:linear-gradient(90deg,var(--pl-accent),var(--pl-accent-2));color:#fff;
  font-size:10px;line-height:1;font-weight:750;letter-spacing:-.02em;
}
.pl-heading h1,.pl-heading h2{
  margin:0;color:var(--pl-ink);font-size:clamp(38px,3.9vw,50px);
  line-height:.98;letter-spacing:var(--track-title,-.035em);font-weight:520;
}
.pl-heading h1 em,.pl-heading h2 em,.pl-cta h2 em{position:relative;display:inline-block;font-style:normal}
.pl-heading h1 em::after,.pl-heading h2 em::after,.pl-cta h2 em::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:50%;
  background:var(--pl-accent);transform:rotate(-2deg);
}

/* Tarjetas blancas, sin etiquetas que desplacen el contenido ni efecto cristal. */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pl-card{
  display:flex;flex-direction:column;min-height:460px;padding:28px 26px 25px;
  border:0;border-radius:14px;background:var(--pl-card);
  box-shadow:0 8px 24px rgba(45,55,72,.055);
}
.pl-card.pl-featured{
  background:linear-gradient(180deg,#FB923C 0%,#FB923C 30%,#fff 66%);
  box-shadow:0 10px 28px rgba(251,146,60,.08);
}
.pl-name{margin:0 0 6px;color:var(--pl-ink);font-size:18px;font-weight:600;letter-spacing:-.025em}
.pl-copy{margin:0;min-height:50px;color:var(--pl-muted);font-size:12px;line-height:1.4}
.pl-price{display:flex;align-items:flex-start;gap:2px;margin:16px 0 18px;color:var(--pl-ink)}
.pl-price sup{margin-top:4px;font-size:18px;font-weight:700}
.pl-price strong{font-size:48px;line-height:.92;letter-spacing:-.06em;font-weight:650}
.pl-price span{align-self:flex-end;margin-bottom:2px;font-size:13px;font-weight:600}
.pl-price.pl-quote{min-height:44px;flex-direction:column;justify-content:center;gap:2px}
.pl-price.pl-quote strong{font-size:27px;letter-spacing:-.04em}
.pl-price.pl-quote span{align-self:flex-start;margin:0;font-size:10px;color:var(--pl-muted)}
.pl-btn{
  width:100%;min-height:40px;padding:9px 14px;border:0;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-size:12px;line-height:1.3;font-weight:650;
  transition:background .18s ease;
}
.pl-btn.pl-dark{background:var(--pl-ink);color:#fff}
.pl-btn.pl-dark:hover{background:#293544}
.pl-btn.pl-hot{background:linear-gradient(90deg,var(--pl-accent),var(--pl-accent-2));color:#fff}
.pl-btn.pl-hot:hover{background:linear-gradient(90deg,#FB923C,#FB923C)}
.pl-features{margin-top:22px;padding-top:18px;border-top:1px solid #edf1ed}
.pl-features-title{margin:0 0 12px;color:var(--pl-ink);font-size:11px;line-height:1.35;font-weight:700}
.pl-features ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.pl-features li{position:relative;padding-left:21px;color:var(--pl-muted);font-size:12px;line-height:1.35}
.pl-features li::before{
  content:"✓";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;
  display:grid;place-items:center;background:var(--pl-accent);color:#fff;
  font-size:10px;font-weight:800;
}

/* Franja discreta de capacidades, sin logos de clientes inventados. */
.pl-strip{padding:20px 0 0}
.pl-strip p{text-align:center;margin:0;color:#8e98a6;font-size:8px;font-weight:650;letter-spacing:.18em}
.pl-strip-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 30px;margin-top:17px;color:#9aa4b1}
.pl-strip-row span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:-.02em}
.pl-strip-row i{font-style:normal;font-size:21px;line-height:1;color:inherit}

/* Acordeón compacto, centrado y más estrecho que las tarjetas. */
.pl-faq{padding:56px 0 78px;scroll-margin-top:24px}
.pl-faq .pl-container{width:min(760px,calc(100% - 48px))}
.pl-faq .pl-heading{margin-bottom:36px}
.pl-faq .pl-heading h2{font-size:clamp(36px,3.8vw,48px)}
.pl-accordion{display:grid;gap:5px}
.pl-faq-item{border:0;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 4px 16px rgba(45,55,72,.04)}
.pl-faq-q{
  width:100%;display:grid;grid-template-columns:22px 1fr;align-items:center;gap:9px;
  padding:13px 15px;border:0;background:transparent;text-align:left;color:var(--pl-ink);
  font-size:12px;line-height:1.35;font-weight:650;cursor:pointer;
}
.pl-plus{
  width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--pl-accent);color:#fff;font-size:17px;line-height:1;font-weight:450;
  transition:transform .2s ease;
}
.pl-faq-item.open .pl-plus{transform:rotate(45deg)}
.pl-faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .24s ease,visibility .24s}
.pl-faq-a>p{overflow:hidden;margin:0;padding:0 22px 0 46px;color:var(--pl-muted);font-size:12px;line-height:1.5}
.pl-faq-item.open .pl-faq-a{grid-template-rows:1fr;visibility:visible}
.pl-faq-item.open .pl-faq-a>p{padding-bottom:13px}
.pl-faq-help{text-align:center;margin:24px 0 0;color:#7c8796;font-size:11px;line-height:1.5}
.pl-faq-help a{text-decoration:underline;text-underline-offset:2px}

/* Neutraliza el fondo y las curvas de footer-reveal únicamente en planes. */
.plans-view > main.planes-page > .pl-cta{
  padding:65px 0 58px;margin:0;border-radius:0;background:var(--pl-ink);
  border-bottom:1px solid var(--pl-accent);
}
.pl-cta-card{text-align:center}
.pl-cta h2{margin:0;color:#fff;font-size:clamp(34px,3.6vw,45px);line-height:.98;letter-spacing:var(--track-title,-.035em);font-weight:520}
.pl-cta-form{
  width:min(360px,100%);min-height:46px;margin:28px auto 0;display:flex;gap:4px;
  padding:4px;border:0;border-radius:8px;background:#fff;
}
.pl-cta-form input{flex:1;min-width:0;background:transparent;border:0;border-radius:5px;color:var(--pl-ink);padding:0 10px;font-size:11px}
.pl-cta-form .pl-btn{width:auto;min-width:112px;min-height:38px;border-radius:6px}
.pl-cta .form-status{color:#d8dde5!important;font-size:9px!important}
.pl-cta .form-status:empty{display:none}
.pl-cta-alt{margin:17px 0 0;color:#c3cbd6;font-size:11px}
.pl-cta-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Diálogo de contacto, conservado sin modificar los flujos de selección. */
.pl-dialog{
  position:fixed;inset:0;margin:auto;width:max-content;max-width:calc(100vw - 24px);
  height:max-content;max-height:calc(100dvh - 24px);border:0;padding:0;
  border-radius:20px;background:#fff;color:var(--pl-ink);box-shadow:0 24px 80px rgba(0,0,0,.2);
}
.pl-dialog::backdrop{background:rgba(24,33,48,.4)}
.pl-dialog-card{position:relative;width:min(420px,calc(100vw - 24px));padding:36px 28px 28px;text-align:center}
.pl-dialog-card h3{margin:8px 0 12px;font-size:28px;letter-spacing:-.04em;font-weight:650}
.pl-dialog-card p{margin:0 0 24px;color:var(--pl-muted);font-size:14px;line-height:1.5}
.pl-dialog-actions{display:grid;gap:10px}
.pl-dialog-close{position:absolute;right:8px;top:4px;width:44px;height:44px;border:0;background:transparent;color:var(--pl-muted);font-size:26px;cursor:pointer}
.pl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.planes-page :is(button,a,input):focus-visible{outline:2px solid #FB923C;outline-offset:4px}
.planes-page .pl-dialog-close:focus-visible{outline-offset:-4px}
.pl-cta :is(button,a,input):focus-visible{outline-color:#FB923C}

@media(max-width:1000px) and (min-width:761px){
  .pl-container{width:calc(100% - 48px)}
  .pl-grid{gap:14px}
  .pl-card{padding:22px 18px}
  .pl-copy{min-height:54px}
  .pl-strip-row{gap:14px 20px}
}
@media(max-width:760px){
  .pl-container{width:min(480px,calc(100% - 36px))}
  .pl-section{padding-top:52px}
  /* La cabecera móvil es absoluta y no reserva espacio en el flujo. La
     primera sección sí debe hacerlo para que la etiqueta y el título
     comiencen claramente debajo de los controles. */
  .planes-page > .pl-section:first-of-type{
    padding-top:max(118px,calc(env(safe-area-inset-top) + 106px));
  }
  .pl-section.pl-mdm{padding-top:64px}
  .pl-heading{margin-bottom:36px}
  .pl-heading h1,.pl-heading h2{font-size:clamp(30px,6.6vw,42px);line-height:1.04}
  .pl-heading br{display:none}
  .pl-grid{grid-template-columns:1fr;gap:18px}
  .pl-card{min-height:0;padding:28px}
  .pl-copy{min-height:0;max-width:340px}
  .pl-name{font-size:20px}
  .pl-copy,.pl-features li{font-size:14px}
  .pl-price{margin-top:20px}
  .pl-price strong{font-size:50px}
  .pl-features{margin-top:24px;padding-top:20px}
  .pl-features-title{font-size:13px}
  .pl-strip-row{gap:16px 22px}
  .pl-strip-row span{font-size:12px}
  .pl-faq{padding:64px 0 76px}
  .pl-faq .pl-container{width:min(520px,calc(100% - 36px))}
  .pl-faq .pl-heading{margin-bottom:36px}
  .pl-faq .pl-heading h2{font-size:clamp(30px,6.6vw,42px)}
  .pl-faq-q{padding:15px 14px;gap:8px}
  .pl-faq-a>p{padding-left:48px;padding-right:18px}
  .pl-faq-help{font-size:11px}
  .plans-view > main.planes-page > .pl-cta{padding:68px 0 62px}
  .pl-cta h2{font-size:36px}
  .pl-cta-form .pl-btn{min-width:100px;font-size:12px}
  .pl-cta-form input{padding:0 8px;font-size:11px}
  .pl-cta-alt{font-size:11px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce){
  .planes-page *{scroll-behavior:auto;transition:none}
}

/* ==========================================================================
   FONDO DE CIELO — solo escritorio.

   El mismo archivo que ya usa la portada (assets/hero-sky-clouds): no anade
   ni un byte, el navegador lo sirve de cache.

   Va sobre <main>, NO sobre el body ni sobre body::before:

   · body::before tiene que seguir existiendo. En esta ruta el footer
     .st-contact-footer es sticky bottom:0 y sube hasta y=0 cuando es mas
     alto que el viewport; esa franja es lo unico que lo tapa. Quitarla deja
     el footer naranja asomando por detras de las tarjetas.
   · main pinta un color opaco, asi que puede llevar el cielo sin destapar
     nada. Se sube 92px detras de la cabecera y se devuelven como padding,
     para que el cielo empiece en el borde superior de la pagina sin mover
     ni un pixel del contenido.

   `background-size:100% auto` conserva la proporcion de la foto (1672x941):
   a 1425px de ancho ocupa 802px de alto, justo la cabecera, el titular y
   casi todas las tarjetas, que quedan blancas flotando sobre el cielo.
   Encima, un degradado al gris de la pagina disuelve el borde inferior sin
   dejar linea, igual que en la portada.

   El telefono no se toca: sigue con su fondo plano.
   ========================================================================== */
@media(min-width:901px){
  .plans-view > main.planes-page{
    margin-top:-92px;
    padding-top:92px;
    background-color:var(--pl-bg);
    background-image:
      linear-gradient(to bottom,
        rgba(244,246,249,0) 0%,
        rgba(244,246,249,0) 38%,
        rgba(244,246,249,.30) 56%,
        rgba(244,246,249,.72) 76%,
        rgba(244,246,249,.95) 90%,
        var(--pl-bg) 100%),
      url("/assets/hero-sky-clouds.png");
    background-image:
      linear-gradient(to bottom,
        rgba(244,246,249,0) 0%,
        rgba(244,246,249,0) 38%,
        rgba(244,246,249,.30) 56%,
        rgba(244,246,249,.72) 76%,
        rgba(244,246,249,.95) 90%,
        var(--pl-bg) 100%),
      image-set(
        url("/assets/hero-sky-clouds.webp") type("image/webp"),
        url("/assets/hero-sky-clouds.png") type("image/png"));
    background-repeat:no-repeat,no-repeat;
    background-position:center top,center top;
    /* 56.3vw == 100% / (1672/941): la altura exacta que ocupa la foto sin
       deformarse, para que el degradado acabe justo donde acaba ella. */
    background-size:100% 56.3vw,100% auto;
  }

  /* El menu, como en la portada y en las paginas MDM: sobre el azul del
     cielo el gris original cae a ~3:1. Solo cambia el color; posiciones,
     tamanos, subrayado y botones se quedan igual. */
  body.plans-view .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
  }

  body.plans-view .desktop-nav,
  body.plans-view .desktop-nav > a,
  body.plans-view .desktop-nav .solutions-trigger,
  body.plans-view .desktop-nav .nav-menu-trigger{
    color:rgba(255,255,255,.95);
  }

  body.plans-view .desktop-nav :is(a,.solutions-trigger,.nav-menu-trigger):hover,
  body.plans-view .desktop-nav .active{
    color:#fff;
  }

  body.plans-view .desktop-nav > :is(a,button)::after,
  body.plans-view .desktop-nav > .nav-menu > .nav-menu-trigger::after{
    background:#fff;
  }
}

/* ==========================================================================
   FONDO DE CIELO — TELEFONO.

   Misma idea que en escritorio, pero con la foto VERTICAL (941x1672), que es
   la que compone bien en pantalla estrecha. Va igualmente sobre <main>, que
   es opaco: body::before no se puede tocar en esta ruta porque es lo unico
   que tapa el footer sticky.

   `background-size:100% auto` conserva la proporcion, asi que a 388px de
   ancho ocupa 689px de alto: cubre la cabecera, el titular y la parte
   superior de la primera tarjeta, que queda blanca flotando sobre el cielo.
   Encima, un degradado al gris de la pagina disuelve el borde inferior — sin
   linea, igual que arriba.

   El header en telefono es absolute y no ocupa flujo, asi que main ya empieza
   en y=0 y el cielo llega al borde superior sin necesidad de subirlo.
   ========================================================================== */
@media(max-width:900px){
  .plans-view > main.planes-page{
    background-color:var(--pl-bg);
    background-image:
      linear-gradient(to bottom,
        rgba(244,246,249,0) 0%,
        rgba(244,246,249,0) 40%,
        rgba(244,246,249,.32) 58%,
        rgba(244,246,249,.74) 78%,
        rgba(244,246,249,.95) 91%,
        var(--pl-bg) 100%),
      url("/assets/planes-sky-mobile.webp?v=cielo-movil-1");
    background-repeat:no-repeat,no-repeat;
    background-position:center top,center top;
    /* 177.68vw == 100% / (941/1672): el alto exacto que ocupa la foto sin
       deformarse, para que el degradado acabe justo donde acaba ella. */
    background-size:100% 177.68vw,100% auto;
  }

  /* El logo naranja sobre el azul del cielo se pierde, igual que pasaba en
     /mdm/. En blanco lee limpio. Solo cambia el color. */
  body.plans-view .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
  }

  /* Y por la misma razon la pildora de idioma y el boton de menu: el crema
     de body:not(.home-page) (styles.css) sobre el cielo dejaba la cabecera
     a medias, logo blanco y controles color arena. Mismo cristal que
     Android/Apple. El selector se repite con .mobile-controls-floating
     porque esa variante en styles.css gana por especificidad. */
  body.plans-view .mobile-header-language,
  body.plans-view .site-header.mobile-controls-floating .mobile-header-language{
    color:#fff;
    border-color:rgba(255,255,255,.64);
    background:rgba(255,255,255,.12);
    box-shadow:none;
  }

  body.plans-view .menu-toggle,
  body.plans-view .site-header.mobile-controls-floating .menu-toggle{
    color:#fff;
    background:rgba(255,255,255,.15)!important;
    box-shadow:none;
  }
}