/* =========================================================================
   PhotoPills — Premium / Pricing page
   Page-specific styles. Tokens and primitives come from ../common.css.
   Visual language: dark cinematic, photo-dominant black background, yellow
   as a small accent (used on the featured plan, on ✓ checks, and on the
   primary CTA). No italic. Mobile-first cascade with the canonical
   breakpoints (480 / 720 / 1024 / 1200) defined in common.css.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Page wrapper — pushes content below the fixed nav and gives the page
   a generous outer padding so cards don't kiss the viewport edges.
   ------------------------------------------------------------------------- */
/* No top padding here — the pricing-intro section provides its own
   nav-clearance padding-top, so the gradient-strong bg extends all the way
   up to the underside of the sticky nav with no solid-dark gap above it. */
.page-premium-pricing #main {
  /* Each section owns its own vertical padding (symmetric md). No
     extra padding here — would create a double gap before the footer. */
  padding-top: 0;
  padding-bottom: 0;
}


/* =========================================================================
   1 · CHOOSE  ·  full first section: intro + cards + includes + trust-strip
   The wrapper carries the gradient-soft so the four blocks live as one
   visual band. Top padding clears the sticky nav; bottom padding hands
   off to the FAQ band below.
   ========================================================================= */
/* Section 1 splits into a "hero" zone (intro + cards, vertically centered
   in the viewport) and the rest (includes + trust-strip flowing below).
   The hero ensures the price decision lives in the user's first viewport. */
.pricing-choose {
  background: var(--bg-bold);
  /* No bottom padding here — .includes__inner already provides
     symmetric var(--section-pad-y-md) top/bottom. */
}

.pricing-choose__hero {
  /* Hero — 100vh exactos para que el .hero-scroll-hint flote visible
     dentro del primer viewport. Excepción a la regla 8: padding asimétrico
     porque el hero contiene más densidad de contenido que el home-hero
     (intro + 2 plan-cards), así que el padding-top se limita a nav-clearance
     (96-140px) en lugar de --section-pad-y-xl, que dejaba la sección más
     alta que 100vh y empujaba el scroll-hint bajo el fold. El bottom
     reserva el aire para el componente flotante "What you get". */
  position: relative; /* anchor for the .hero-scroll-hint at the bottom */
  /* `100svh` (viewport VISIBLE) en vez de `100vh`: en móvil/tablet el 100vh
     incluye la barra del navegador, así el hero era más alto que lo visible y el
     scroll-hint (absolute al fondo) caía fuera del primer viewport. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 12vh, 140px) 0 clamp(80px, 14vh, 160px);
}

/* Viewports CORTOS (tablet landscape · alto ≤900) o ESTRECHOS (tablet portrait +
   móvil · ancho ≤1024): el padding grande empujaba el contenido y el hint fuera
   del primer viewport. Se reduce para que intro + plan-cards + el hint "What you
   get" quepan y el chevron se vea en el primer viewport. */
@media (max-width: 1024px), (max-height: 900px) {
  .pricing-choose__hero {
    padding: clamp(64px, 9vh, 88px) 0 clamp(56px, 8vh, 76px);
  }
}


/* ----- 1.2 · INTRO V2  ·  homepage pattern (h1 + badge, subtitle, rule, pitch-body) -----
   .section-title, .section-subtitle, .section-rule and .pitch-body live in
   common.css — the V2 intro uses them directly to match the home exactly.
   Only the title gets a local override to keep "PhotoPills Premium" + badge
   on a single line and to wider the container. */

/* Wider intro inner for V2 so the longer title fits in a single line. */
.pricing-intro--v2 .pricing-intro__inner {
  max-width: 720px;
}

/* Editorial title pattern (home Premium / App / Loop / Final CTA):
   weight 600, sans, sized down from the global .section-title cap (78px)
   so "PhotoPills Premium" + Beta badge fit in a single line at 720px
   container width. */
/* `.pricing-intro__title-v2` (base + móvil) promovido a common.css como
   COMPONENTE COMPARTIDO con Premium (2026-08). No redefinir aquí. */

/* Subtitle inside V2 — matches the home `.product-copy .section-subtitle`
   override exactly (heading-sm to heading-md, weight 300, tighter
   line-height). The default .section-subtitle is 21-28px which would tie
   with .pitch-body and break the editorial hierarchy; .product-copy
   bumps it to 24-32px. We replicate that here. */
.pricing-intro--v2 .section-subtitle {
  font-size: clamp(var(--text-heading-sm), 3vw, var(--text-heading-md));
  line-height: 1.125;
  font-weight: 300;
  margin-bottom: 1.25rem;
}

/* Center the rule under the centered intro block. */
.pricing-intro--v2 .section-rule {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* `.pitch-body` defaults to 21-28px (same range as .section-subtitle),
   which makes them tie in size and on mid viewports the body even grows
   bigger than the subtitle (2.2vw vs 2vw). The home Premium section
   sidesteps this by living inside `.product-copy`, which tightens the
   pitch-body to 18-21px. We replicate that override here so the
   hierarchy reads `subtitle (bigger) → body (smaller)` like in home. */
.pricing-intro--v2 .pitch-body {
  font-size: clamp(var(--text-body-md), 1.7vw, var(--text-body-lg));
  line-height: 1.2;
  font-weight: 300;
  text-align: center;
  margin: 0 auto;
  max-width: 56ch;
}


/* ----- 1.1 · INTRO  ·  eyebrow + headline + lead -----
   Tight bottom padding — intro and plan-grid live in the same viewport
   (above the fold) on standard desktop heights. */
.pricing-intro {
  padding: 0 24px clamp(32px, 4vw, 56px);
}

.pricing-intro__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* `.pricing-intro__eyebrow`, `.pricing-intro__title` (sin --v2) y
   `.pricing-intro__lead` retiradas 2026-05-13 — solo la variante --v2
   se usa en HTML (la base con eyebrow + headline + lead fue una
   propuesta descartada). */


/* =========================================================================
   2 · PLAN GRID  ·  Monthly + Annual cards
   ========================================================================= */
.plan-grid {
  padding: 0 24px;
}

.plan-grid__inner {
  /* Un único plan (anual) → una sola card centrada. Antes era un grid
     2-col (Monthly + Annual); al quedar una card, block + max-width + auto
     la centra. Ancho ~= el que tenía cada card en el grid de 880 (~430). */
  max-width: 440px;
  margin: 0 auto;
}

.plan-grid__disclaimer {
  max-width: 880px;
  margin: 24px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  color: var(--content-text-label-weak);
}


/* ----- Card --------------------------------------------------------------
   Elevated dark card sitting on a black page. Subtle 1px hairline border
   so the surface reads on bg-neutral-bold without using a heavy fill.
   ------------------------------------------------------------------------- */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--gradient-subtle);
  border: 1px solid var(--border-neutral-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: border-color var(--dur-instant) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

.plan-card:hover {
  border-color: color-mix(in srgb, var(--gray-white) 25%, transparent);
}

/* Featured (Annual) — yellow hairline + recommended chip */
.plan-card--featured {
  border-color: var(--border-secondary-accent);
}

.plan-card--featured:hover {
  border-color: var(--color-action-soft);
}

/* Same typography as `.badge` (mono uppercase, weight 500) — sits in the
   same register as Beta / Premium Member labels. Anchored to the top-right
   corner, crossing the card's top border so it reads as a "ribbon"
   sitting on top of the card. */
.plan-card__chip {
  position: absolute;
  top: 0;
  right: 20px;
  transform: translateY(-50%);
  background: var(--bg-primary-default);
  color: var(--content-text-default-inverted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.plan-card__head {
  margin-bottom: 24px;
}

.plan-card__name {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 4px;
  color: var(--content-text-default);
}

.plan-card__tagline {
  font-size: var(--text-body-sm);
  color: var(--content-text-default-weak);
  margin: 0;
  line-height: 1.4;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.plan-card__amount {
  font-size: clamp(36px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--content-text-default);
}

.plan-card__per {
  font-size: var(--text-body-sm);
  color: var(--content-text-default-weak);
}

.plan-card__price-note {
  font-size: var(--text-body-sm);
  color: var(--content-text-label-weak);
  margin: 0 0 24px;
  min-height: 20px;
}

.plan-card__cta {
  width: 100%;
  margin-bottom: 16px;
}

/* The .btn-ghost in common.css sits on dark hero — works here too. */

.plan-card__fineprint {
  font-size: var(--text-body-sm);
  color: var(--content-text-default-weak);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ============================================================================
   ESTADOS DE CAPACIDAD · data-pricing-state en .pricing-choose
   open (default) · full (waitlist) · reopened. Los [data-state-only] se
   muestran solo en su estado; los [data-state-hide] se ocultan en él.
   ========================================================================== */
.pricing-choose:not([data-pricing-state="open"]) [data-state-only="open"] { display: none; }
.pricing-choose:not([data-pricing-state="full"]) [data-state-only="full"] { display: none; }
.pricing-choose:not([data-pricing-state="reopened"]) [data-state-only="reopened"] { display: none; }
.pricing-choose[data-pricing-state="full"] [data-state-hide="full"] { display: none; }

/* Badge de estado sobre la card, centrado (la card es flex-column centrada). */
.plan-card__status { align-self: center; margin: 0 0 18px; }

/* Full · "Doors closed" como título de la card (más visual que un badge). */
.plan-card__state-title {
  font-family: var(--font-sans);
  font-size: var(--text-heading-sm);        /* 24 · mismo tamaño que el resto de títulos de card */
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--content-text-default);
  margin: 0 0 8px;
}
/* Reopened · el mensaje es una frase → un poco más de aire antes del precio. */
.plan-card__state-title--reopened {
  margin-bottom: clamp(16px, 2vw, 22px);
}

/* Descripción bajo el título de estado (la cola de la lista de espera). */
.plan-card__state-sub {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: 300;
  line-height: 1.5;
  color: var(--content-text-default-weak);
  margin: 0 0 clamp(16px, 2vw, 22px);
}

/* Full · la card deja de ser "featured" — sin filete amarillo (no es un plan
   recomendado si está agotado). */
.pricing-choose[data-pricing-state="full"] .plan-card--featured { border-color: var(--border-neutral-soft); }
.pricing-choose[data-pricing-state="full"] .plan-card--featured:hover { border-color: color-mix(in srgb, var(--gray-white) 25%, transparent); }

/* Waitlist · captura de email (reusa .field/.input del DS), centrada. */
.plan-waitlist { display: flex; flex-direction: column; gap: 12px; text-align: center; margin: 8px 0 16px; }
.plan-waitlist .field label { font-size: var(--text-body-sm); }

/* Selector de estados · SOLO demo (pill fijo abajo-centro). No es diseño real. */
.pricing-state-demo {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--radius-full);
  background: rgba(10, 13, 18, 0.9);
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
  border: 1px solid var(--border-neutral-soft);
  box-shadow: var(--shadow-strong);
}
.pricing-state-demo__label { font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--content-text-default-weak); padding: 0 8px; }
.pricing-state-demo button {
  all: unset;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  color: var(--content-text-default-weak);
}
.pricing-state-demo button:hover { color: var(--content-text-default); }
.pricing-state-demo button.is-active { background: var(--yellow-5); color: var(--gray-black); font-weight: 600; }
.pricing-state-demo button:focus-visible { outline: 2px solid var(--yellow-5); outline-offset: 2px; }


/* `.info-tip` promovido a `mockup/common.css` (mayo 2026) — componente
   compartido; no redeclarar aquí. Documentado en MDS y en el styleguide. */


/* =========================================================================
   4 · INCLUDES  ·  feature lists grouped by capability
   ========================================================================= */
.includes {
  padding: 0 24px;
  /* Vertical spacing lives on .includes__inner so it stays symmetric
     (var(--section-pad-y-md) top and bottom). */
}

/* Includes lives flat on the page — header reads as section heading,
   feature groups as a clean editorial list. The card chrome (bg + stroke)
   moved to .trust-strip below. */
.includes__inner {
  max-width: 720px;
  margin: 0 auto;
  /* Solo padding vertical (simétrico md). El gutter lateral lo pone la
     sección `.includes` (0 24px), igual que .plan-grid / .pricing-intro —
     antes este inner AÑADÍA su propio padding-x encima → doble margen en
     móvil y el título quedaba estrujado a 640px (necesita 670 para 1 línea). */
  padding: var(--section-pad-y-md) 0;
}

.includes__head {
  margin-bottom: 40px;
}

.includes__title {
  font-size: var(--text-heading-md);
  font-weight: 600;
  line-height: 1.25;
  color: var(--content-text-default);
  margin: 0 0 6px;
  /* Una línea en desktop: el título mide ~670px y la columna 720, pero el
     margen (50px) es tan justo que el render del webfont lo empujaba a
     saltar de línea "cuando no toca". nowrap lo fija (cabe dentro de 720).
     En móvil se libera a normal (media ≤720). */
  white-space: nowrap;
}

.includes__sub {
  font-size: var(--text-body-md);
  color: var(--content-text-default-weak);
  margin: 0;
}

.includes__group {
  padding: 28px 0;
  border-top: 1px solid var(--border-neutral-soft);
}

.includes__group:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

.includes__group:last-child {
  padding-bottom: 0;
}

.includes__group-label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--content-text-default-weak);
  margin: 0 0 12px;
}

.includes__group-note {
  /* Replaces the original italic line — same emphasis without italic. */
  font-size: var(--text-body-sm);
  color: var(--content-text-default-weak);
  margin: 12px 0 0 28px;
  line-height: 1.5;
  font-style: normal;
}


/* ----- Feature list ------------------------------------------------------ */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-s);
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-body-md);
  line-height: 1.5;
  color: var(--content-text-default);
}

.feature-list__check {
  flex-shrink: 0;
  width: 20px;
  font-weight: 600;
  color: var(--content-text-highlight);
  line-height: 1.5;
  text-align: center;
}

.feature-list__meta {
  color: var(--content-text-label-weak);
  font-size: var(--text-body-sm);
}


/* =========================================================================
   5 · TRUST STRIP  ·  thin band with mono labels separated by middots
   ========================================================================= */
/* Trust strip — same visual register as `.plan-grid__disclaimer`:
   small mono, muted, no card chrome. Lives flat on the page after the
   includes section, before the FAQ band. Sits close to the section
   above (no big gap) — reads as a fineprint coda, not a section. */
.trust-strip {
  max-width: 880px;
  margin: clamp(12px, 2vw, 20px) auto 0;
  padding: 0 24px;
}

/* Trust strip wrapper inside .includes__inner — same vertical rhythm as
   .includes__group (20px padding + hairline) so it reads as the closing
   row of the list. */
.includes__trust {
  padding: 20px 0 0;
  border-top: 1px solid var(--border-neutral-soft);
}

.trust-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: 0.04em;
  color: var(--content-text-label-weak);
  text-transform: none;
}

.trust-strip__list li {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.trust-strip__list li + li::before {
  content: '·';
  position: absolute;
  left: -14px;
  color: var(--content-text-label-weak);
}


/* =========================================================================
   6 · FAQ  ·  Quick questions
   ========================================================================= */
/* FAQ band — gradient-soft from the surface catalog. The lighter top of
   the gradient sits against the flat dark canvas of the previous section,
   creating a discreet but visible seam without a border. Same pattern the
   homepage uses (Captured Plans, Plan Every Shot, final-cta). */
/* FAQ — section 2. Same gradient-strong recipe as section 1. The seam
   reads because each gradient resets at its own light top: section 1
   ends darker (~#02), section 2 lifts back to a lighter #14. */
.pricing-faq {
  background: var(--gradient-strong);
  padding: var(--section-pad-y-md) var(--gutter);
}

.pricing-faq__inner {
  max-width: 720px;
  margin: 0 auto;
}

.pricing-faq__title {
  font-size: var(--text-heading-md);
  font-weight: 600;
  text-align: center;
  color: var(--content-text-default);
  margin: 0 0 24px;
}

.pricing-faq__list {
  border-top: 1px solid var(--border-neutral-soft);
}

.pricing-faq__more {
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--content-text-default-weak);
  margin: 32px 0 0;
}

/* The link inside uses the global `.text-link` pattern (yellow + underlined).
   No local override needed — added the class in the markup. */


/* ----- FAQ ---------------------------------------------------------------
   El accordion vive en common.css como componente canonico `.faq`
   (promocionado desde aqui en la auditoria 2026-07). Markup:
   <details class="faq"><summary class="faq__q">...</summary>
   <div class="faq__a"><p>...</p></div></details> */


/* =========================================================================
   RESPONSIVE  ·  mobile-first cascade with canonical breakpoints
   common.css defines: --bp-xs 480 / --bp-sm 720 / --bp-md 1024 / --bp-lg 1200
   ========================================================================= */

/* (Antes: md- apilaba las 2 plan-cards. Con una sola card ya no hace falta
   — .plan-grid__inner es block centrado a 440 en todos los anchos.) */

/* sm and below — phone */
@media (max-width: 720px) {

  .plan-card {
    padding: 28px 22px 24px;
  }

  /* .includes__inner ya no lleva padding-x propio (lo pone la sección),
     así que no hay override lateral que ajustar en móvil. */

  /* En móvil el título SÍ se parte (no cabe en una línea a 32px). */
  .includes__title {
    white-space: normal;
  }

  .info-tip__bubble {
    /* Keep bubbles inside the viewport on narrow widths */
    max-width: 220px;
  }
}

/* xs — compact phones */
@media (max-width: 480px) {
  /* Sin padding-top en #main: creaba una franja negra (el bg transparente
     de #main dejaba ver el negro del body) SOBRE el degradado del hero.
     El hero (.pricing-choose__hero) ya despeja la nav con su propio
     padding-top clamp(96px…), y el degradado debe llegar hasta arriba,
     por debajo de la nav fija (48px). */

  .pricing-intro,
  .plan-grid,
  .includes,
  .pricing-faq {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .trust-strip {
    margin-left: 16px;
    margin-right: 16px;
    padding: 14px 16px;
  }

  .trust-strip__list {
    gap: 8px 18px;
    font-size: var(--text-mono-sm); /* 12px — minimum mono allowed */
  }

  .trust-strip__list li + li::before { left: -12px; }
}