/* Webs públicas de PlanerSoft — hoja COMPARTIDA (docs/DISENO_WEB_GES_MODERNA.md).
   Servida por Control en /static/web.css para cualquier sitio. Cada sitio la
   enlaza en su base.html DESPUÉS de public.css (Tailwind) y de su <style> de
   tokens de marca. Todas las clases llevan el prefijo pw- (Planer web). */
:root {
  /* Tokens de MARCA: los define cada sitio en su base.html, en un <style> ANTES
     de enlazar esta hoja (--pw-brand, --pw-brand-hover, --pw-brand-soft,
     --pw-brand-glow, --pw-glow-2, --pw-navy, --pw-navy-2, --pw-navy-3,
     --pw-hero-img). Aquí solo van los derivados y los neutros. */
  --pw-brand-tint: color-mix(in srgb, var(--pw-brand) 55%, #fff);    /* acentos sobre oscuro */
  --pw-brand-tint-2: color-mix(in srgb, var(--pw-brand) 32%, #fff);  /* eyebrow en pill oscura */
  --pw-ink:#0f172a; --pw-ink-2:#475569; --pw-ink-3:#94a3b8;
  --pw-surface:#ffffff; --pw-surface-soft:#f6f8fc; --pw-page-bg:#f4f7fb;
  --pw-line:#e6ebf2; --pw-line-2:#d5dde8; --pw-card-bg:#f1f5fb;
  --pw-r-sm:10px; --pw-r-md:16px; --pw-r-lg:24px; --pw-r-xl:32px; --pw-r-pill:999px;
  --pw-sh-card:0 10px 28px rgba(11,23,40,.06); --pw-sh-card-hover:0 18px 44px rgba(11,23,40,.12);
  --pw-sh-brand:0 10px 24px var(--pw-brand-glow);
  --pw-t:180ms ease;
  --pw-header-card-h:64px;                                        /* altura de la tarjeta de cabecera */
  --pw-header-gap:.75rem;                                         /* aire sobre la tarjeta */
  --pw-header-h:calc(var(--pw-header-gap) + var(--pw-header-card-h)); /* franja sticky total */
  --pw-gutter:1rem;                                               /* = padding lateral de .pw-container */
}

html, body { overflow-x: clip; }
.pw-page { background: var(--pw-surface-soft); color: var(--pw-ink); }
.pw-page section[id] { scroll-margin-top: calc(var(--pw-header-h) + 8px); }

/* ---------- Márgenes base de títulos (capa components) ----------
   public.css (Tailwind v4) va en capas: base < components < utilities. Estas
   reglas van en `components` para que un `mt-*` de Tailwind en la plantilla
   GANE (una regla sin capa ganaría siempre y el mt-* se ignoraría), y a la vez
   superen al reset de preflight (capa base). Los márgenes por contexto
   (.pw-section-head .pw-h2, .pw-hero .pw-h1…) siguen sin capa, a propósito. */
@layer components {
  .pw-h1, .pw-h2, .pw-h3 { margin: 0; }
  .pw-band-h1 { margin: .75rem 0 0; }
  .pw-card-title { margin: 1.25rem 0 0; }
  /* Título sin icono delante (primer hijo de su bloque): arranca arriba. */
  .pw-card-title:first-child { margin-top: 0; }
}

/* ---------- Contenedor y tipografía ---------- */
.pw-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .pw-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .pw-container { padding-inline: 2rem; } }

.pw-eyebrow {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .12em; color: var(--pw-brand-hover);
}
.pw-h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; overflow-wrap: break-word;
}
.pw-h2 {
  font-size: clamp(1.9rem, 3vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.12; color: var(--pw-ink); overflow-wrap: break-word;
}
.pw-h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--pw-ink); }
.pw-lead { font-size: 17px; line-height: 1.7; color: var(--pw-ink-2); max-width: 42rem; }
@media (min-width: 768px) { .pw-lead { font-size: 18px; } }
.pw-center { text-align: center; }
.pw-center .pw-lead { margin-inline: auto; }
/* Encabezado de sección a todo el ancho del contenedor, encima de la rejilla. */
.pw-section-head { max-width: none; text-align: center; }
.pw-section-head .pw-h2 { margin-top: .75rem; }
.pw-section-head .pw-lead { margin: 1rem auto 0; max-width: 52rem; }

/* ---------- Botones ---------- */
.pw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 48px; padding: 0 1.375rem; border-radius: var(--pw-r-sm); border: 1px solid transparent;
  font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--pw-t), border-color var(--pw-t), color var(--pw-t), box-shadow var(--pw-t), transform var(--pw-t);
}
.pw-btn:hover { transform: translateY(-1px); }
.pw-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pw-brand-glow); }
.pw-btn-primary { background: var(--pw-brand); color: #fff; }
.pw-btn-primary:hover { background: var(--pw-brand-hover); box-shadow: var(--pw-sh-brand); color: #fff; }
.pw-btn-ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #fff; }
.pw-btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.pw-btn-secondary { background: #fff; border-color: var(--pw-line-2); color: var(--pw-ink); }
.pw-btn-secondary:hover { background: var(--pw-surface-soft); color: var(--pw-ink); }
.pw-btn-dark { background: var(--pw-navy); color: var(--pw-brand-tint); min-height: 48px; height: auto; padding-block: .75rem; white-space: normal; text-align: center; }
.pw-btn-dark:hover { background: var(--pw-navy-2); color: var(--pw-brand-tint-2); }
.pw-btn-pill { border-radius: var(--pw-r-pill); }
.pw-btn-sm { height: 40px; padding: 0 1.125rem; font-size: 14px; }
.pw-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Cabecera ---------- */
/* Cabecera flotante (Ricardo, 2026-09-23): la franja sticky es transparente y
   lo visible es una TARJETA (.pw-header-bar) del ancho del contenido de la
   página (mismo hueco lateral y ancho máximo, 1280px, que .pw-container y max-w-7xl), separada .75rem del borde
   superior. El hero y la banda empiezan DETRÁS de la franja (margin-top
   negativo), así la foto asoma por arriba y por los lados de la tarjeta. */
.pw-header {
  position: sticky; top: 0; z-index: 50; height: var(--pw-header-h);
  padding-top: var(--pw-header-gap);   /* padding, no margin en la tarjeta: evita el colapso de márgenes */
  background: transparent; color: var(--pw-ink); pointer-events: none;
}
.pw-header > * { pointer-events: auto; }
.pw-header-bar {
  height: var(--pw-header-card-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: calc(100% - 2 * var(--pw-gutter)); max-width: calc(1280px - 2 * var(--pw-gutter));
  margin: 0 auto; padding-inline: .75rem;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--pw-line); border-radius: 12px; box-shadow: var(--pw-sh-card);
}
@media (min-width: 640px) { :root { --pw-gutter: 1.5rem; } }
@media (min-width: 768px) { .pw-header-bar { border-radius: var(--pw-r-md); padding-inline: 1.25rem; } }
@media (min-width: 1024px) { :root { --pw-gutter: 2rem; } }
.pw-brand { display: flex; min-width: 0; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.pw-brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.5rem; color: inherit; margin: 0; }
.pw-brand-tag { font-size: .68rem; font-weight: 600; line-height: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pw-brand-hover); margin: 0; }
.pw-nav ul { list-style: none; margin: 0; padding: 0; }
.pw-nav a {
  position: relative; display: inline-block; padding-block: .375rem;
  font-size: 14px; font-weight: 500; color: var(--pw-ink-2); text-decoration: none; transition: color var(--pw-t);
}
.pw-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--pw-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-t);
}
.pw-nav a:hover { color: var(--pw-ink); }
.pw-nav a:hover::after, .pw-nav a:focus-visible::after { transform: scaleX(1); }
.pw-access {
  display: inline-flex; align-items: center; height: 40px; padding: 0 .75rem; border-radius: var(--pw-r-sm);
  font-size: 14px; font-weight: 600; color: var(--pw-ink); text-decoration: none; transition: color var(--pw-t), background-color var(--pw-t);
}
.pw-access:hover { color: var(--pw-brand-hover); }
.pw-menu-btn {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--pw-r-sm); border: 1px solid var(--pw-line-2); background: #fff; color: var(--pw-ink);
  transition: background-color var(--pw-t), border-color var(--pw-t), color var(--pw-t);
}
@media (min-width: 1280px) { .pw-menu-btn { display: none; } }
.pw-menu-btn:focus-visible, .pw-access:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pw-brand-glow); }

/* La cabecera es SIEMPRE clara (Ricardo, 2026-09-23): ya no hay estado
   transparente sobre el hero ni la banda, que empiezan justo debajo de ella. */

/* Menú móvil: panel flotante. La visibilidad la sigue gobernando .hidden. */
.pw-mobile {
  position: absolute; top: calc(var(--pw-header-h) + .5rem); left: 0; right: 0; margin-inline: auto;
  width: calc(100% - 2 * var(--pw-gutter)); max-width: calc(1280px - 2 * var(--pw-gutter));
  background: #fff; color: var(--pw-ink); border: 1px solid var(--pw-line);
  border-radius: var(--pw-r-lg); box-shadow: var(--pw-sh-card-hover); padding: .75rem;
}
.pw-mobile ul { list-style: none; margin: 0; padding: 0; }
.pw-mobile li a {
  display: block; border-radius: var(--pw-r-sm); padding: .625rem .75rem;
  font-size: 15px; font-weight: 500; color: var(--pw-ink); text-decoration: none; transition: background-color var(--pw-t);
}
.pw-mobile li a:hover { background: var(--pw-surface-soft); }
.pw-mobile-ctas { margin-top: .75rem; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pw-mobile-ctas .pw-btn { width: 100%; padding-inline: .75rem; }

/* ---------- Hero ---------- */
.pw-hero, .pw-band {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pw-navy-3) 65%, transparent) 0%, color-mix(in srgb, var(--pw-navy-3) 35%, transparent) 45%, transparent 75%),
    radial-gradient(ellipse 55% 60% at 65% 35%, color-mix(in srgb, var(--pw-brand) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 55% at 20% 80%, color-mix(in srgb, var(--pw-glow-2) 50%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--pw-navy-3) 55%, transparent) 0%, color-mix(in srgb, var(--pw-navy) 50%, transparent) 45%, color-mix(in srgb, var(--pw-navy-2) 45%, transparent) 100%),
    var(--pw-hero-img) center / cover no-repeat,
    var(--pw-navy);
}
.pw-hero {
  /* Tamaño del hero ORIGINAL: en móvil min-h 48svh y py-12 (3rem); en md+ la
     proporción de la foto (1919/820 = 42.73vw de alto) con el texto centrado.
     Se suman los 6rem que tapan la hoja y la tarjeta de cifras solapadas y la
     franja de la cabecera flotante, que va ENCIMA (el hero empieza detrás). */
  display: flex; align-items: center;
  min-height: calc(48svh + 6rem + var(--pw-header-h));
  margin-top: calc(-1 * var(--pw-header-h));
  padding-top: calc(var(--pw-header-h) + 3rem); padding-bottom: calc(3rem + 6rem);
}
@media (min-width: 768px) {
  .pw-hero { min-height: calc(42.73vw + 6rem + var(--pw-header-h)); }
}
/* Titular del hero algo más contenido que el H1 genérico para que el texto
   quepa en la altura original de la foto. */
.pw-hero .pw-h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.pw-hero-copy { max-width: 42rem; }
.pw-hero .pw-h1 { color: #fff; margin-top: 1.5rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pw-hero-lead { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pw-hero-lead { margin-top: 1.5rem; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.82); max-width: 40rem; }
@media (min-width: 768px) { .pw-hero-lead { font-size: 18px; } }
.pw-hero .pw-btn-row { margin-top: 2rem; }
.pw-pill {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; padding: .25rem .875rem;
  border-radius: var(--pw-r-pill); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--pw-brand-tint-2);
}
.pw-trust { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; list-style: none; padding: 0; }
.pw-trust li {
  display: inline-flex; align-items: center; gap: .4rem; padding: .375rem .75rem; border-radius: var(--pw-r-pill);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.86);
}
.pw-trust svg { width: 15px; height: 15px; color: var(--pw-brand-tint); flex-shrink: 0; }
/* ---------- Cifras (tarjeta flotante que solapa el hero) ---------- */
.pw-stats-wrap { position: relative; z-index: 3; margin-top: -3rem; }

/* ---------- Hoja flotante (efecto «sheet») ----------
   Todas las páginas: el <main> recorta sus esquinas inferiores y queda por
   encima del pie, que empieza DETRÁS (margin-top negativo), así las esquinas
   redondeadas se ven sobre el fondo oscuro del pie.
   Home: además, todo lo que va tras el hero va en .pw-sheet, que sube 3rem
   sobre el hero con las cuatro esquinas redondeadas. */
:root { --pw-sheet-r: var(--pw-r-xl); --pw-sheet-foot: 3rem; }
@media (min-width: 768px) { :root { --pw-sheet-r: 48px; --pw-sheet-foot: 4rem; } }
.pw-main {
  position: relative; z-index: 2; overflow: hidden; overflow: clip; background: var(--pw-page-bg);
  border-bottom-left-radius: var(--pw-sheet-r); border-bottom-right-radius: var(--pw-sheet-r);
}
.pw-sheet {
  position: relative; z-index: 2; display: flow-root; margin-top: -3rem; background: var(--pw-surface);
  border-radius: var(--pw-sheet-r); box-shadow: 0 -12px 32px rgba(11,23,40,.10);
}
.pw-stats {
  display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--pw-line);
  border-radius: var(--pw-r-lg); box-shadow: var(--pw-sh-card-hover); overflow: hidden;
}
@media (min-width: 640px) { .pw-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pw-stats { grid-template-columns: repeat(4, 1fr); } }
.pw-stat { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; }
@media (min-width: 1024px) { .pw-stat + .pw-stat { border-left: 1px solid var(--pw-line); } }
/* Variante de 3 cifras (Pro, Lab, Soft): 3 columnas y separadores desde md. */
@media (min-width: 768px) {
  .pw-stats--3 { grid-template-columns: repeat(3, 1fr); }
  .pw-stats--3 .pw-stat + .pw-stat { border-left: 1px solid var(--pw-line); }
}
.pw-stat-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--pw-ink); margin: 0; }
.pw-stat-text { margin: .25rem 0 0; font-size: 15px; line-height: 1.5; color: var(--pw-ink-2); }

.pw-icon {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--pw-r-pill); background: var(--pw-brand-soft); color: var(--pw-brand-hover);
}
.pw-icon svg { width: 20px; height: 20px; }
.pw-icon-lg { width: 44px; height: 44px; }
.pw-icon-lg svg { width: 22px; height: 22px; }

/* ---------- Secciones ---------- */
.pw-section { padding-block: 5rem; background: var(--pw-surface); }
@media (min-width: 1024px) { .pw-section { padding-block: 6rem; } }
.pw-section--soft { background: var(--pw-surface-soft); }
.pw-section--first { padding-top: 5rem; }
.pw-split { display: grid; gap: 2.5rem; align-items: center; margin-top: 3.5rem; }
@media (min-width: 1024px) {
  .pw-split { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
  .pw-split--rev { grid-template-columns: 1fr 1.1fr; }
  .pw-split--rev > :first-child { order: 2; }
}
/* Columna de texto junto a la imagen: se estira a la altura de la fila y
   centra su contenido; la imagen conserva su 4/3. */
.pw-split { align-items: stretch; }
.pw-split > .pw-frame { align-self: center; width: 100%; }
.pw-split-text { display: flex; flex-direction: column; justify-content: center; gap: .75rem; }
.pw-split-text > * { margin: 0; }
.pw-split-text .pw-lead { font-size: 17px; line-height: 1.65; }
.pw-split-text .pw-h3 { margin-top: -.25rem; }
.pw-checks { list-style: none; padding: 0; display: grid; gap: .5rem; margin-top: .25rem !important; }
.pw-checks li { display: flex; align-items: flex-start; gap: .75rem; font-size: 15px; line-height: 1.5; color: var(--pw-ink); }
.pw-check {
  display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; margin-top: 1px;
  width: 22px; height: 22px; border-radius: var(--pw-r-pill); background: var(--pw-brand-soft); color: var(--pw-brand-hover);
}
.pw-check svg { width: 14px; height: 14px; stroke-width: 3; }
.pw-frame {
  border-radius: var(--pw-r-lg); border: 1px solid var(--pw-line); box-shadow: var(--pw-sh-card);
  overflow: hidden; background: var(--pw-surface-soft); aspect-ratio: 4 / 3;
}
.pw-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pw-callout { display: flex; justify-content: center; margin-bottom: 3rem; }

/* ---------- Tarjetas ---------- */
.pw-grid-4 { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 768px) { .pw-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .pw-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.pw-grid-3 { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .pw-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.pw-card {
  background: #fff; border: 1px solid var(--pw-line); border-radius: 20px; padding: 1.5rem;
  transition: background-color var(--pw-t), border-color var(--pw-t), box-shadow var(--pw-t), transform var(--pw-t);
}
.pw-card:hover { transform: translateY(-5px); border-color: var(--pw-line-2); box-shadow: var(--pw-sh-card-hover); }
/* Tarjeta atenuada (p. ej. módulos en preparación de PlanerSoft). */
/* Tarjeta que contiene un formulario (lead magnet): sin elevación al pasar. */
.pw-card--form { border-radius: var(--pw-r-lg); box-shadow: var(--pw-sh-card); }
.pw-card--form:hover { transform: none; border-color: var(--pw-line); box-shadow: var(--pw-sh-card); }
/* Tarjeta destacada con borde de marca (oferta de asociados). */
.pw-card--brand { border: 2px solid color-mix(in srgb, var(--pw-brand) 25%, transparent); }
.pw-card--brand:hover { border-color: color-mix(in srgb, var(--pw-brand) 45%, transparent); }
.pw-card--dashed { border-style: dashed; border-color: var(--pw-line-2); background: #f8fafc; }
.pw-card--tint { background: var(--pw-card-bg); }
.pw-card--flush { padding: 0; overflow: hidden; }
.pw-card-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--pw-ink); }
.pw-card-text { margin: .625rem 0 0; font-size: 15px; line-height: 1.6; color: var(--pw-ink-2); }
/* Tarjetas de plan (tarifas): solo radio y elevación; bordes y colores siguen en Tailwind. */
.pw-plan { border-radius: 20px !important; transition: box-shadow var(--pw-t), transform var(--pw-t); }
.pw-plan:hover { transform: translateY(-5px); box-shadow: var(--pw-sh-card-hover); }

/* ---------- CTA final ---------- */
.pw-cta-section { padding-block: 5rem; background: var(--pw-surface); }
.pw-cta {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--pw-r-xl);
  padding: 3rem 1.5rem; text-align: center; color: #fff;
  background:
    radial-gradient(ellipse 60% 70% at 75% 20%, var(--pw-brand-glow), transparent 70%),
    linear-gradient(135deg, var(--pw-navy-3) 0%, var(--pw-navy) 55%, var(--pw-navy-2) 100%);
}
@media (min-width: 768px) { .pw-cta { padding: 4rem; } }
.pw-cta .pw-h2 { color: #fff; max-width: 44rem; margin-inline: auto; }
.pw-cta p { margin: 1.25rem auto 0; max-width: 36rem; font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.8); }
.pw-cta .pw-btn-row { justify-content: center; margin-top: 2.25rem; }

/* ---------- Pie ---------- */
.pw-footer {
  position: relative; color: #fff; padding-block: calc(4rem + var(--pw-sheet-foot)) 2rem;
  margin-top: calc(-1 * var(--pw-sheet-foot));
  background:
    linear-gradient(color-mix(in srgb, var(--pw-navy-3) 90%, transparent), color-mix(in srgb, var(--pw-navy-3) 90%, transparent)),
    var(--pw-hero-img) center / cover no-repeat,
    var(--pw-navy-3);
}
.pw-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pw-brand), transparent);
}
.pw-footer-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #94a3b8; margin: 0; }
.pw-footer ul a { font-size: 14px; color: #cbd5e1; text-decoration: none; transition: color var(--pw-t); }
.pw-footer ul a:hover, .pw-footer ul a:focus-visible { color: #fff; }
.pw-footer-legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08); }

/* ---------- Reveal al scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .pw-header, .pw-btn, .pw-card, .pw-plan, .pw-nav a, .pw-nav a::after { transition: none !important; }
  .pw-btn:hover, .pw-card:hover, .pw-plan:hover { transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Banda superior (tarifas y blog) ----------
   Hero corto con el mismo fondo; el <main> sube 3rem sobre ella con las
   esquinas superiores redondeadas (body.pw-has-band, bloque band de base). */
.pw-band {
  display: flex; align-items: center; min-height: calc(148px + var(--pw-header-h));
  margin-top: calc(-1 * var(--pw-header-h));
  padding-top: calc(var(--pw-header-h) + 1.25rem); padding-bottom: calc(1.5rem + 3rem);
}
@media (min-width: 768px) { .pw-band { min-height: calc(228px + var(--pw-header-h)); padding-top: calc(var(--pw-header-h) + 1.5rem); padding-bottom: calc(1.75rem + 3rem); } }
.pw-band-copy { max-width: 56rem; }
.pw-band-h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; color: #fff; overflow-wrap: break-word; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pw-band-lead {
  margin: .75rem 0 0; max-width: 42rem; font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pw-pill svg { width: 14px; height: 14px; }
.pw-band .pw-btn-row { margin-top: 1.5rem; }
.pw-band-note { margin: .75rem 0 0; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.pw-band-copy nav { margin-bottom: .75rem; }   /* migas dentro de la banda */
/* Banda solo con la foto (páginas cuyo titular vive en el cuerpo, p. ej. baja). */
.pw-band--bare { min-height: calc(88px + var(--pw-header-h)); }
@media (min-width: 768px) { .pw-band--bare { min-height: calc(128px + var(--pw-header-h)); } }
.pw-has-band .pw-main {
  /* El propio <main> dibuja la hoja: fondo, cuatro esquinas redondeadas,
     sombra superior y recorte de su contenido (sea cual sea su primer o último
     bloque). overflow:hidden es el respaldo de navegadores sin overflow:clip. */
  margin-top: -3rem; border-radius: var(--pw-sheet-r);
  overflow: hidden; overflow: clip;
  box-shadow: 0 -12px 32px rgba(11,23,40,.10);
}
/* Páginas con una tarjeta que ASOMA sobre la banda (tarifas: body.pw-band-peek):
   el recorte pasa a clip-path, abierto 4rem por arriba y con las esquinas
   inferiores redondeadas; las superiores las da el fondo del main. */
.pw-has-band.pw-band-peek .pw-main {
  overflow: visible;
  clip-path: inset(-4rem 0 0 0 round 0 0 var(--pw-sheet-r) var(--pw-sheet-r));
}
/* Banda con tarjeta que asoma: 1.5rem más de aire bajo el texto. */
.pw-band--card { padding-bottom: calc(1.5rem + 3rem + 1.5rem); }
@media (min-width: 768px) { .pw-band--card { padding-bottom: calc(1.75rem + 3rem + 1.5rem); } }

/* ---------- Tarjeta «Sin permanencia» (tarifas) ---------- */
.pw-offer-wrap { position: relative; z-index: 3; margin-top: -1.5rem; }
.pw-offer {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: 1.25rem 1.5rem; border-radius: var(--pw-r-lg); color: #fff;
  background: linear-gradient(135deg, var(--pw-brand), var(--pw-brand-hover)); box-shadow: var(--pw-sh-brand);
}
@media (min-width: 768px) {
  .pw-offer { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 2rem; }
}
.pw-offer-main { display: flex; align-items: center; gap: .75rem; }
.pw-offer-icon {
  display: inline-flex; flex-shrink: 0; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: var(--pw-r-pill); background: rgba(255,255,255,.16);
}
.pw-offer-icon svg { width: 20px; height: 20px; }
.pw-offer-title { margin: 0; font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.pw-offer-text { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: rgba(255,255,255,.92); }