/* ============================================================
   Adpulze — Página de Precios (precios.html)
   Estilos exclusivos de esta página. Se carga después de styles.css
   y solo agrega las secciones nuevas (hero de precios + slider).
   ============================================================ */

/* ---------- Hero de precios ---------- */
.phero{position:relative;background:var(--white);padding:150px 0 0;overflow-x:clip}
/* Fondo del diseño (Figma 3016:162). El degradado prismático NO está recortado por
   el panel: es una capa aparte que lo desborda y se derrama sobre la página, por eso
   el borde del bloque "desaparece" donde hay color.
   Van DOS capas sin recortar con la misma geometría (inset negativo), sacadas del
   render 1x del diseño contra la base real (blanco de página + panel #F6F6F6 r38):
   · ::before en `multiply` con el mapa de oscurecido M = min(1, composite/base):
     blanco donde el diseño no tiñe nada, así que no aparece ningún borde.
   · ::after en `screen` con el mapa de aclarado S = max(0, (composite-base)/(1-base)):
     negro donde no hay que aclarar. Hace el trabajo que multiply no puede: cerca de
     la esquina el arte SUBE el gris del panel hasta casi blanco y lo deja continuo
     con la página — sin esta capa el brillo se recorta en el gris y el borde del
     bloque queda marcado como una línea debajo del color.
   El gris del panel debe ser EXACTAMENTE #F6F6F6 (la base con la que se dividió):
   con otro gris la reconstrucción no cierra y reaparece la línea.
   La región desborda al panel 92px a los lados y 80px arriba (=7.32% y 9.23% del
   panel), que es lo que llega el color en el diseño — medido sobre el render: el
   arte muere ~37px encima del panel y nunca toca el borde izquierdo de la página.
   Ambos mapas funden a neutro (blanco/negro) en sus últimos 50px del lado derecho
   para que en viewports >1440 el tinte no termine en un corte vertical. */
.phero__panel{position:relative;background:#F6F6F6;border-radius:var(--radius-lg);padding:44px 16px 40px;text-align:center}
.phero__panel::before{content:"";position:absolute;inset:-9.23% -7.32% 0;z-index:0;pointer-events:none;
  background:url("img/phero-glow-3.jpg") 72% center/cover no-repeat;mix-blend-mode:multiply}
.phero__panel::after{content:"";position:absolute;inset:-9.23% -7.32% 0;z-index:0;pointer-events:none;
  background:url("img/phero-shine-3.jpg") 72% center/cover no-repeat;mix-blend-mode:screen}
/* z-index:1: el contenido tiene que pintar por encima del ::after (último hijo). */
.phero__panel>*{position:relative;z-index:1}
.phero__eyebrow{font-size:17px;line-height:1.4;color:#4B4B4B}
.phero__title{margin-top:10px;font-size:34px;font-weight:500;line-height:1.05;letter-spacing:-1.4px;color:#37322F;text-wrap:balance}
.phero__title-accent{color:var(--brand)}

/* ---------- Tarjeta de planes ----------
   Medidas y colores tomados del diseño (Figma "Widget Price" 1581:4096,
   tarjeta de 760×591 px). Los px de acá replican ese frame 1:1. */
.plans{max-width:760px;margin:32px auto 0;background:var(--white);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius-lg);box-shadow:0 19px 46px rgba(0,0,0,0.06);padding:24px 20px 22px;text-align:left}
.plans__brand{display:flex;align-items:center;gap:10px}
/* Isotipo: cuadro exterior tenue (51px) + tile con borde naranja (37px) + marca (16px) */
.plans__brand-badge{display:inline-flex;align-items:center;justify-content:center;width:51px;height:51px;flex-shrink:0;background:rgba(252,231,224,0.45);border-radius:13px}
.plans__brand-tile{display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;flex-shrink:0;background:#FCE7E0;border:1px solid var(--accent);border-radius:8px}
.plans__brand-mark{display:block;width:16px;height:16px}
.plans__brand-label{font-size:15px;font-weight:500;letter-spacing:0.03em;text-transform:uppercase;color:#3A3634}
.plans__title{margin-top:22px;font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-0.5px;color:#3A3634}
.plans__title-accent{color:var(--accent)}
.plans__sub{margin-top:18px;max-width:464px;font-size:16px;line-height:1.63;color:#8A8A9E}

/* Fila de meta: etiqueta + rango elegido (mismo tamaño y color en el diseño) */
.plans__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:23px}
.plans__meta-label{font-size:16px;font-weight:500;text-transform:uppercase;color:#3A3634}
.plans__meta-range{display:inline-flex;align-items:center;gap:7px;font-size:16px;font-weight:500;color:#3A3634}
.plans__meta-dot{width:7px;height:7px;border-radius:50%;background:#F56E32;box-shadow:0 0 0 2px rgba(245,110,50,0.44)}

/* ---------- Slider ---------- */
.plans__slider{position:relative;margin-top:91px;padding-bottom:53px}
.plans__tooltip{position:absolute;bottom:calc(100% + 28px);left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:6px 9px 6px 8px;background:#2B2B2B;border-radius:4px;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:-0.5px;color:var(--white);white-space:nowrap;pointer-events:none}
.plans__tooltip-dot{width:6px;height:6px;border-radius:50%;background:#FF5E26;flex-shrink:0}
.plans__caret{position:absolute;bottom:calc(100% + 25px);left:28.5714%;transform:translateX(-50%);width:0;height:0;border-left:4.2px solid transparent;border-right:4.2px solid transparent;border-top:3.6px solid #414141;pointer-events:none}
.plans__track{position:relative;height:8px;border-radius:var(--radius-pill);background:#E1E1E6;box-shadow:inset 0 0 3.3px rgba(0,0,0,0.15)}
/* El degradado va sobre el tramo relleno (no sobre la barra completa), como en el diseño. */
.plans__track-fill{position:absolute;left:0;top:0;bottom:0;width:var(--plans-fill,28.5714%);border-radius:var(--radius-pill);background:linear-gradient(90deg,#FE884E 0%,#F46B2F 100%)}
.plans__dot{position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.plans__dot--past{width:8px;height:8px;background:#3C3C3C}
.plans__dot--next{width:8px;height:8px;background:var(--white);box-shadow:inset 0 0 0 0.5px #CFCFCF}
.plans__dot--current{opacity:0}
.plans__thumb{position:absolute;top:50%;left:28.5714%;transform:translate(-50%,-50%);width:21px;height:21px;border-radius:50%;background:var(--white);border:3px solid #F77338;box-shadow:0 0 0 7px rgba(245,110,50,0.24);pointer-events:none}
.plans__range{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:44px;margin:0;opacity:0;cursor:grab;-webkit-appearance:none;appearance:none;background:transparent}
.plans__range:active{cursor:grabbing}
.plans__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:44px}
.plans__range::-moz-range-thumb{width:44px;height:44px;border:none;background:transparent}
.plans__range:focus{outline:none}
.plans__range:focus-visible ~ .plans__thumb{box-shadow:0 0 0 7px rgba(245,110,50,0.24),0 0 0 10px #FFFFFF,0 0 0 13px #C93D0B}
.plans__labels{position:absolute;left:0;right:0;top:18px}
/* El export de Figma declara 13px, pero esos nodos están escalados en el archivo:
   medida sobre el render, la altura de mayúscula es 8px = ~11px reales (para
   comparar, "Plan Founder" a 13px mide 9px y "FACTURACIÓN MENSUAL" a 16px mide 12px).
   Tracking escalado en la misma proporción: -0.91px·(11/13) y -0.52px·(11/13). */
.plans__label{position:absolute;transform:translateX(-50%);font-size:11px;line-height:1.63;letter-spacing:-0.77px;color:#CFCFCF;white-space:nowrap;cursor:pointer;transition:color 0.2s ease}
.plans__label:hover{color:#A3A3A3}
.plans__label.is-active{top:20px;padding:2.5px 6px;background:rgba(234,61,1,0.10);border-radius:8px;font-weight:500;letter-spacing:-0.44px;color:#F67236;cursor:default}
@media (prefers-reduced-motion:no-preference){
  .plans__track-fill{transition:width 0.18s ease}
  .plans__thumb{transition:left 0.18s ease}
}

/* ---------- Divider + pie de la tarjeta ---------- */
.plans__divider{height:1px;background:rgba(0,0,0,0.08);margin-top:21px}
.plans__foot{display:grid;gap:24px;margin-top:20px}
.plans__foot>*{min-width:0}
.plans__plan-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.plans__plan-name{font-size:13px;font-weight:500;color:#3A3634}
.plans__plan-chip{display:inline-flex;align-items:center;padding:2px 9px;background:#FDF4F1;border-radius:var(--radius-pill);font-size:13px;font-weight:500;line-height:1.63;color:#F67236}
.plans__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;margin-top:14px}
.plans__price-currency{font-size:24px;font-weight:500;color:#CFCFCF;align-self:flex-start;margin-top:0}
.plans__price-value{font-family:var(--font-heading);font-size:36px;font-weight:600;line-height:0.9;letter-spacing:-1.1px;color:#3A3634}
.plans__price-period{font-size:13px;font-weight:500;letter-spacing:-0.65px;color:#CFCFCF}
.plans__price-before{margin-left:5px;font-size:16px;font-weight:400;letter-spacing:0.8px;color:#000000;text-decoration-thickness:1.5px}
.plans__save{display:inline-flex;align-items:center;margin-top:17px;padding:4px 10px;background:#E9F8F1;border-radius:var(--radius-pill);font-size:11px;font-weight:700;line-height:1.5;letter-spacing:-0.5px;color:#16A876}
/* Tramo "Custom" ($1.6M+): sin precio de lista, sin tachado ni ahorro. */
.plans--custom .plans__price-currency,
.plans--custom .plans__price-period,
.plans--custom .plans__price-before,
.plans--custom .plans__tooltip,
.plans--custom .plans__caret{display:none}
/* El chip de ahorro se oculta reservando su lugar: si no, la tarjeta
   pega un salto de 43px al llegar al último tramo. */
.plans--custom .plans__save{visibility:hidden}
.plans__action{text-align:center}
.plans__cta{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;background:#FB7E43;border-radius:var(--radius-pill);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-0.64px;color:var(--white);text-align:center;text-decoration:none;transition:background 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease}
.plans__cta:hover{background:#F96C2D;transform:translateY(-2px);box-shadow:0 10px 26px rgba(244,101,43,0.35)}
.plans__cta:active{transform:translateY(0) scale(0.97)}
.plans__note{margin-top:13px;font-size:10px;line-height:1.6;color:#8A8A9E}

/* ---------- Mobile y tablet: ocultar etiquetas intermedias del slider
     (con 8 etiquetas, el chip activo pisa a sus vecinas por debajo de 1120px) ---------- */
@media (max-width:1119px){
  .plans__label{display:none}
  .plans__label.is-active{display:inline-flex}
}
@media (max-width:399px){
  .plans__price-value{font-size:32px}
  .plans__price-before{margin-left:8px}
}

/* ---------- Tablet / Desktop ---------- */
@media (min-width:768px){
  .phero{padding-top:190px}
  .phero__panel{border-radius:31px;padding:64px 32px 64px}
  .phero__eyebrow{font-size:20px}
  .phero__title{margin-top:12px;font-size:46px;letter-spacing:-1.9px}
  /* A partir de acá el panel tiene proporciones parecidas a las del diseño, así que
     los mapas se estiran exacto a la región calculada en vez de recortarse. */
  .phero__panel::before,
  .phero__panel::after{background-position:center;background-size:100% 100%}
  .plans{margin-top:48px;padding:33px 32px 22px}
  .plans__title{font-size:30px;letter-spacing:-0.48px}
  .plans__price-value{font-size:40px;letter-spacing:-1.2px}
  .plans__foot{grid-template-columns:minmax(0,1fr) minmax(0,226px);align-items:center;column-gap:62px;margin-top:20px}
  .plans__offer{position:relative;padding-right:62px}
  .plans__offer::after{content:"";position:absolute;right:0;top:2px;bottom:2px;width:1px;background:rgba(0,0,0,0.08)}
  .plans__cta{display:inline-flex}
  .plans__note{max-width:226px;margin-inline:auto}
}

/* Ajustes de esta página sobre secciones reutilizadas del index */
@media (min-width:768px){
  #demo .cta__title{max-width:700px}
  #demo .cta__sub{max-width:680px}
}

/* La píldora "Marcas que ya lo utilizan" va con relleno blanco sólido
   (en el index es translúcida sobre el panel gris). */
#marcas .brands__badge{background:var(--white);border-color:rgba(23,10,4,0.04);box-shadow:0 6px 16px rgba(23,10,4,0.07),0 1px 3px rgba(23,10,4,0.05)}

@media (min-width:1120px){
  .phero{padding-top:210px}
  .phero__panel{border-radius:38px;padding:72px 40px 82px}
  .phero__title{font-size:52px;letter-spacing:-2.1px}
  .plans{margin-top:52px}
}