/* Protegetuviaje-2026 — estilos locales (mínimos).
   El kit resuelve layout vía utilities en los partials PHP. Aquí: reset,
   sr-only, y tweaks que extienden componentes del kit. */

/* ═══════════════════════════════════════════════════════════════
 * BASE
 * ═══════════════════════════════════════════════════════════════ */

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: clip;
    max-width: 100vw;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.ptvr-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ptvr-site__main { flex: 1 0 auto; }

.ptv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ptv-sr-only--focusable:focus,
.ptv-sr-only--focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    padding: var(--ptv-space-2);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--ptv-color-bg-surface);
    color: var(--ptv-color-text-primary);
}

.ptv-section { padding-block: var(--ptv-space-6); }

/* ═══════════════════════════════════════════════════════════════
 * HEADER — Figma 512:1240 (desktop) / 512:1309 (mobile)
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-header {
    position: sticky;
    top: 0;
    z-index: var(--ptv-z-sticky);
    width: 100%;
    padding: var(--ptv-space-3) var(--ptv-space-4);
    background: transparent;
    transition:
        padding var(--ptv-transition-base),
        background var(--ptv-transition-base),
        backdrop-filter var(--ptv-transition-base);
}

.ptvr-header--scrolled {
    padding-block: var(--ptv-space-2);
    background: color-mix(in srgb, var(--ptv-color-bg-surface) 72%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--ptv-shadow-sm);
}

.ptvr-header--scrolled .ptvr-header__pill { box-shadow: none; }

/* Especificidad subida con `.ptvr-header` para ganarle al `.ptv-flex` del kit
   (mismas (0,0,1,0)) — el orden de cascada depende del CDN. */
.ptvr-header .ptvr-header__desktop { display: none; }
.ptvr-header .ptvr-header__mobile  { display: block; }

@media (min-width: 992px) {
    .ptvr-header .ptvr-header__desktop { display: flex; }
    .ptvr-header .ptvr-header__mobile  { display: none; }
}

/* Mobile estrecho: compacta padding para que hamburger siempre sea tappable */
@media (max-width: 991.98px) {
    .ptvr-header {
        padding-inline: var(--ptv-space-2);
        padding-bottom: 0;
    }

    /* SPA cotizador v3 floating fallbacks (anti-flash hasta que `theme.js`
       mida y publique en `:root`):
       - top 64px ≈ header scrolled mobile (real lo setea JS).
       - inline 8px matchea el margen del inline (default SPA 16 → "encogimiento"). */
    :root {
        --qf-pill-floating-top: 64px;
        --qf-pill-floating-inline: 8px;
    }
}

/* Sticky-top desktop fallback hasta que `theme.js` mida el header real
   (`--plan-header-sticky-top` / `--summary-sticky-top`). 80px ≈ header
   scrolled real (70-76px). Flush sin gap intencional. */
@media (min-width: 992px) {
    :root {
        --plan-header-sticky-top: 80px;
        --summary-sticky-top: 80px;
    }
}

@media (max-width: 479.98px) {
    .ptvr-header__pill--mobile { padding: var(--ptv-space-2) var(--ptv-space-3); }
    .ptvr-header__icon-btn.ptv-btn { width: 40px; height: 40px; }
}

/* Pills blancas — Figma radius 10px, shadow suave */
.ptvr-header__pill {
    background: var(--ptv-color-bg-surface);
    border-radius: 10px;
    box-shadow: 0 3px 4.7px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: box-shadow var(--ptv-transition-base);
}

/* `position: relative` ancla el megamenu absolute al ancho completo del header. */
.ptvr-header__desktop {
    width: 100%;
    position: relative;
}

.ptvr-header__pill--logo  { padding: var(--ptv-space-3) var(--ptv-space-4); flex: 0 0 auto; }
.ptvr-header__pill--links { padding: var(--ptv-space-2) var(--ptv-space-3); flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
.ptvr-header__pill--ctas  { padding: var(--ptv-space-2) var(--ptv-space-3); flex: 0 0 auto; gap: 0; justify-content: flex-start; min-width: 0; overflow: visible; }
/* overflow visible para no clipear el popover de "Quiero que me llamen". */
.ptvr-header__pill--mobile { padding: var(--ptv-space-3) var(--ptv-space-4); width: 100%; }

/* Reset del <ul>: `ptv-flex` no quita list-style ni padding-inline. */
.ptvr-header__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ptvr-header__nav-item { margin: 0; padding: 0; }

/* Divider vertical del kit — ajustes de altura y cero margen para pegado */
.ptvr-header .ptv-divider--vertical {
    --ptv-divider-color: var(--ptv-color-neutral-400);
    height: 47px;
    align-self: center;
    flex: 0 0 auto;
    margin-inline: 0;
}

/* Logo */
.ptvr-header__brand { display: inline-flex; align-items: center; line-height: 0; }
.ptvr-header__logo { height: 18px; width: auto; display: block; }
.ptvr-header__logo--mobile { height: 16px; }

/* Dropdown trigger — Inter 12px con hover tappable (padding + radius) */
.ptvr-header__nav-link.ptv-dropdown__trigger {
    font-size: 12px;
    letter-spacing: -0.01em;
    padding: var(--ptv-space-2) var(--ptv-space-4);
    gap: var(--ptv-space-2);
    border-radius: var(--ptv-radius-md);
}

.ptvr-header__nav-link .ptv-dropdown__chevron { font-size: 10px; display: inline-flex; align-items: center; }

/* Megamenú full-width: el `.ptv-dropdown` pasa a static para que el
   `.ptv-dropdown__menu` se ancle al `.ptvr-header__desktop` (relative). */
.ptvr-header__desktop .ptv-dropdown:has(.ptvr-header__dropdown-menu--mega) {
    position: static;
}

.ptvr-header__dropdown-menu--mega {
    left: 0;
    right: 0;
    width: 100%;
    /* Top padding amplio (48px) para clearance del botón × absolute (44px). */
    padding: var(--ptv-space-12) var(--ptv-space-8) var(--ptv-space-5);
    border: 0;
    border-radius: 10px;
    box-shadow: var(--ptv-shadow-md);
}

/* Botón × del megamenu — absolute para no afectar layout de columnas. */
.ptvr-header__megamenu-close {
    position: absolute;
    top: var(--ptv-space-3);
    right: var(--ptv-space-3);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--ptv-radius-full, 999px);
    color: var(--ptv-color-text-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
    z-index: 1;
}
.ptvr-header__megamenu-close:hover,
.ptvr-header__megamenu-close:focus-visible {
    background: var(--ptv-color-neutral-200);
    outline: none;
}

/* Estado vacío del mobile-menu (sub-sección sin menú asignado). Usado por mobile-menu.php. */
.ptvr-header__submenu-empty {
    margin: 0;
    font-size: 12px;
    color: var(--ptv-color-text-secondary);
}

/* CTAs: altura uniforme 42px, tipografía 12px (override sobre ptv-btn--sm) */
.ptvr-header__cta.ptv-btn {
    height: 42px;
    font-size: 12px;
    letter-spacing: -0.01em;
    padding-block: 0;
    padding-inline: var(--ptv-space-3);
}

/* Iconos PNG con color baked-in (no aplica color/font-size). */
.ptvr-header__cta-icon {
    display: block;
    flex-shrink: 0;
}

/* CTA "Habla con un agente activo" — trigger del popover ptvr-agent-popover (Figma 512:2519). */
.ptvr-header__cta--agent { gap: var(--ptv-space-2); }
.ptvr-header__cta--agent:hover { background: var(--ptv-color-neutral-200); }

.ptvr-header__cta-agent-label { font-weight: var(--ptv-font-light); }

@media (max-width: 1279.98px) {
    .ptvr-header__cta-agent-label { display: none; }
}

.ptvr-header__cta-phone {
    color: inherit;
    text-decoration: none;
    font-weight: var(--ptv-font-medium);
}

.ptvr-header__cta-phone:hover,
.ptvr-header__cta-phone:focus-visible { text-decoration: underline; }

.ptvr-header__cta--account.ptv-btn { width: 46px; padding-inline: 0; }
.ptvr-header__cta--account i { font-size: 18px; }

/* Mobile icon-btns: 43px fijo. Iconos PNG con color baked-in. */
.ptvr-header__icon-btn.ptv-btn {
    width: 43px;
    height: 43px;
    padding: 0;
}

.ptvr-header__icon-btn-glyph { display: block; }

/* ═══════════════════════════════════════════════════════════════
 * Megamenú — Seguros / Empresas / Asistencia
 * ═══════════════════════════════════════════════════════════════ */

/* Seguros y Empresas usan listas planas. Asistencia activa títulos y
   bullets brand vía `.ptvr-megamenu--with-titles` y `__list--bullets`. */
.ptvr-megamenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-megamenu__list li { margin: 0; }

/* Título de columna — solo aparece en Asistencia (mega heterogéneo). */
.ptvr-megamenu__col-title {
    margin: 0 0 var(--ptv-space-4) 0;
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: -0.01em;
}

/* Títulos linkeables del mega de Asistencia (Preguntas frecuentes, Beneficios para ti). */
.ptvr-megamenu__col-title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--ptv-transition-fast);
}
.ptvr-megamenu__col-title-link:hover,
.ptvr-megamenu__col-title-link:focus-visible {
    color: var(--ptv-color-brand-600);
}

/* Bullets brand — solo en Asistencia (`__list--bullets`). */
.ptvr-megamenu__list--bullets li {
    position: relative;
    padding-left: var(--ptv-space-4);
}

.ptvr-megamenu__list--bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: var(--ptv-radius-full);
    background: var(--ptv-color-brand-600);
}

/* Enlaces del mega alineados con `.ptvr-header__nav-link` (12px, -0.01em). */
.ptvr-megamenu__link {
    display: inline-block;
    color: var(--ptv-color-text-primary);
    text-decoration: none;
    font-size: 12px;
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.01em;
    transition: color var(--ptv-transition-fast);
}

.ptvr-megamenu__link:hover,
.ptvr-megamenu__link:focus-visible {
    color: var(--ptv-color-brand-600);
}

/* ── Partners (3ª col del mega de Asistencia) ────────── */
.ptvr-megamenu__partners { align-items: center; }

.ptvr-megamenu__partner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Caja de alto fijo + contain: cada logo ocupa exactamente la misma
   celda (mismo footprint) y escala dentro sin deformarse → uniformidad
   visual aunque los logos tengan proporciones distintas. En 2 columnas
   cada celda es más ancha, así que el logo puede crecer sin apretarse. */
.ptvr-megamenu__partner img {
    width: 100%;
    height: 72px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Card teal "Plan familiar" — toda la card es un <a> clickeable. */
/* Banner editable desde Ajustes → Banner megamenu Asistencia. Sin fondo
   por default: el admin lo aplica vía inline `background-color`. Hover
   sin cambio de fondo (no podemos asumir un color válido sobre cualquier
   bg posible); el feedback es box-shadow + translate. */
.ptvr-megamenu__card {
    color: inherit;
    text-decoration: none;
    border-radius: var(--ptv-radius-xl);
    padding: var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ptv-space-4);
    min-height: 220px;
    transition: transform var(--ptv-transition-fast),
                box-shadow var(--ptv-transition-fast);
}

.ptvr-megamenu__card:hover,
.ptvr-megamenu__card:focus-visible {
    color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    outline: none;
}

.ptvr-megamenu__card-headline {
    display: flex;
    align-items: flex-start;
    gap: var(--ptv-space-3);
}

.ptvr-megamenu__card-title {
    margin: 0;
    flex: 1;
    color: inherit;
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.2;
}

/* Imagen opcional entre título y CTA. Se ajusta proporcionalmente al
   contenedor; el aspect-ratio lo gobierna el adjunto (no se fuerza). */
.ptvr-megamenu__card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.ptvr-megamenu__card-image img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    height: auto;
    object-fit: contain;
}

.ptvr-megamenu__card-cta.ptv-btn {
    align-self: stretch;
    height: 40px;
}

/* ── CTAs al pie — fila izquierda pegada al fondo del panel ─── */
.ptvr-megamenu__ctas {
    justify-content: flex-start;
    padding-top: var(--ptv-space-6);
}

/* CTAs alineados con el patrón del header: 12px font-size, height 42px,
   font-weight regular como los `.ptvr-header__cta` arriba. */
.ptvr-megamenu__cta.ptv-btn {
    height: 42px;
    padding-inline: var(--ptv-space-3);
    font-size: 12px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.01em;
    gap: var(--ptv-space-2);
}

/* Outline del CTA "Área de cliente": border neutral-950 igual que el
   `.ptvr-insurance__cta-outline` de los Hero Sections (el kit por
   defecto usa `--ptv-color-border` gris; aquí lo overridamos). */
.ptvr-megamenu__cta--account {
    --_btn-border: var(--ptv-color-neutral-950);
}

/* WhatsApp badge — sin background ni radius. El SVG `icon-whatsapp.svg`
   trae el verde + la burbuja baked-in, así que ponerlo sobre otro fondo
   verde lo enmascararía. Mismo patrón que `.ptvr-insurance__cta-wa-badge`
   en los Hero Sections de los singles. */
.ptvr-megamenu__cta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    line-height: 1;
}

.ptvr-megamenu__cta-icon {
    display: block;
}

/* Agente activo: punto verde "online" indicador de status. */
.ptvr-megamenu__cta-status {
    width: 8px;
    height: 8px;
    border-radius: var(--ptv-radius-full);
    background: var(--ptv-color-success-500);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ptv-color-success-500) 25%, transparent);
}

.ptvr-megamenu__cta-glyph {
    font-size: 14px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * Mobile menu — panel full-viewport custom (no cubierto por el kit)
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-mm {
    /* Top offset lo setea JS (--ptvr-menu-top). z-index UNDER del header. */
    position: fixed;
    top: var(--ptvr-menu-top, 0);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--ptv-z-sticky) - 1);
    background: var(--ptv-color-bg-surface);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.985);
    transform-origin: top center;
    transition:
        opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 320ms;
}

.ptvr-mm[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition:
        opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Drawer abierto: header + panel por encima de widgets flotantes (Trustlock, chats, etc). */
body[data-mobile-menu-open="true"] .ptvr-header { z-index: 2147483647; }
body[data-mobile-menu-open="true"] .ptvr-mm     { z-index: 2147483646; }

.ptvr-mm__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;            /* no propaga el scroll al body */
    -webkit-overflow-scrolling: touch;       /* iOS smooth scroll dentro del menú */
    padding: var(--ptv-space-5);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

.ptvr-mm[data-open="true"] .ptvr-mm__scroll { opacity: 1; transform: translateY(0); }

/* Hamburguesa: alterna iconos según estado del menú. */
.ptvr-header__menu-toggle-icon--open { display: none; }
body[data-mobile-menu-open="true"] .ptvr-header__menu-toggle-icon--closed { display: none; }
body[data-mobile-menu-open="true"] .ptvr-header__menu-toggle-icon--open   { display: inline-block; }

.ptvr-mm__section + .ptvr-mm__section,
.ptvr-mm__section + .ptvr-mm__flat {
    border-top: var(--ptv-border-width-sm, 1px) solid var(--ptv-color-border-subtle);
}

/* Link plano sin chevron (ej. "Validar certificado"). Stack vertical para
   poder apilar título + hint descriptivo cuando aplique. */
.ptvr-mm__flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ptv-space-1);
    width: 100%;
    padding: var(--ptv-space-4) 0;
    color: var(--ptv-color-text-primary);
    text-decoration: none;
    font-family: var(--ptv-font-sans);
}
.ptvr-mm__flat:hover,
.ptvr-mm__flat:focus-visible {
    color: var(--ptv-color-text-brand);
}

/* Subtítulo descriptivo bajo un `.ptvr-mm__title` dentro de un flat link.
   Mantiene su color secundario en hover (no migra a brand-600 como el
   título) para que el énfasis quede en el call-to-action. */
.ptvr-mm__hint {
    font-size: var(--ptv-text-b4);
    line-height: 1.4;
    color: var(--ptv-color-text-secondary);
    font-weight: var(--ptv-font-regular, 400);
    letter-spacing: -0.01em;
}
.ptvr-mm__flat:hover .ptvr-mm__hint,
.ptvr-mm__flat:focus-visible .ptvr-mm__hint {
    color: var(--ptv-color-text-secondary);
}

.ptvr-mm__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--ptv-space-4) 0;
    background: transparent;
    border: 0;
    color: var(--ptv-color-text-primary);
    cursor: pointer;
    text-align: left;
    font-family: var(--ptv-font-sans);
}

.ptvr-mm__title {
    font-size: 18px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}

.ptvr-mm__chevron {
    display: inline-flex;
    font-size: 14px;
    transition: transform var(--ptv-transition-fast);
}

.ptvr-mm__section[data-open="true"] .ptvr-mm__chevron { transform: rotate(180deg); }

/* Panel animado via grid-template-rows */
.ptvr-mm__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition:
        grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease;
}

.ptvr-mm__panel > * { min-height: 0; }

.ptvr-mm__section[data-open="true"] .ptvr-mm__panel {
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 260ms ease 80ms;
}

.ptvr-mm__section[data-open="true"] .ptvr-mm__panel > * {
    padding-bottom: var(--ptv-space-4);
}

/* Grupos dentro del panel — heading coral + sublinks */
.ptvr-mm__groups {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
    padding-block: var(--ptv-space-2);
}

.ptvr-mm__group { display: flex; flex-direction: column; gap: var(--ptv-space-3); }

.ptvr-mm__group-title {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}

.ptvr-mm__group-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-mm__group-links a {
    color: var(--ptv-color-text-primary);
    font-size: 16px;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.ptvr-mm__group-links a:hover,
.ptvr-mm__group-links a:focus-visible { color: var(--ptv-color-text-brand); }

/* Group title linkeable en Asistencia. Hereda el coral. */
.ptvr-mm__group-title a {
    color: inherit;
    text-decoration: none;
}
.ptvr-mm__group-title a:hover,
.ptvr-mm__group-title a:focus-visible {
    text-decoration: underline;
}

/* ── Partners grid (Grupo "Beneficios para ti" en Asistencia mobile) ── */
.ptvr-mm__partners {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ptv-space-5) var(--ptv-space-4);
    align-items: center;
}

.ptvr-mm__partner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Caja de alto fijo + contain → mismo footprint para todos los logos
   (igual que en desktop). En 2 columnas la celda es más ancha, el logo
   crece en consecuencia. */
.ptvr-mm__partner img {
    width: 100%;
    height: 56px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Banner editable (mobile) — equivalente a `.ptvr-megamenu__card` full-width.
   Mismo modelo: sin fondo por default, hover sin cambio de bg. */
.ptvr-mm__plan-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ptv-space-4);
    padding: var(--ptv-space-5);
    min-height: 180px;
    color: inherit;
    border-radius: var(--ptv-radius-xl);
    text-decoration: none;
    transition: box-shadow var(--ptv-transition-fast);
}

.ptvr-mm__plan-card:hover,
.ptvr-mm__plan-card:focus-visible {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    outline: none;
}

.ptvr-mm__plan-card-headline {
    display: flex;
    align-items: flex-start;
    gap: var(--ptv-space-3);
}

.ptvr-mm__plan-card-title {
    margin: 0;
    flex: 1;
    color: inherit;
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ptvr-mm__plan-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
}

.ptvr-mm__plan-card-image img {
    display: block;
    max-width: 100%;
    max-height: 100px;
    height: auto;
    object-fit: contain;
}

.ptvr-mm__plan-card-cta.ptv-btn {
    align-self: stretch;
    height: 40px;
}

/* Promo buttons (Ajustes → Menú móvil) — banda fija fuera del scroll, encima de los CTAs. */
.ptvr-mm__promos {
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: var(--ptv-space-3) var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) 160ms,
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}
.ptvr-mm[data-open="true"] .ptvr-mm__promos { opacity: 1; transform: translateY(0); }

/* Barra inferior fija con CTAs sobre bg dark */
.ptvr-mm__ctas {
    flex: 0 0 auto;
    padding: var(--ptv-space-5) var(--ptv-space-4);
    background: var(--ptv-color-neutral-950);
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.ptvr-mm[data-open="true"] .ptvr-mm__ctas { opacity: 1; transform: translateY(0); }

.ptvr-mm__cta.ptv-btn {
    flex: 1 1 0;
    height: 49px;
    border-radius: 10px;
    font-size: 16px;
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
 * FOOTER — Figma 512:938
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-footer {
    width: 100%;
    background: var(--ptv-color-neutral-950);
    color: var(--ptv-color-text-inverse);
    /* Padding-bottom extra: clearance para la barra sticky del cotizador v3 (~70-80px). */
    padding: var(--ptv-space-20) var(--ptv-space-10) calc(var(--ptv-space-10) + 96px);
}

@media (max-width: 767.98px) {
    .ptvr-footer { padding-inline: var(--ptv-space-5); }
}

.ptvr-footer__inner { width: 100%; }

/* Row 1 — top (contact+menus | newsletter) */
.ptvr-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 524px);
    gap: var(--ptv-space-16);
}

@media (max-width: 991.98px) {
    .ptvr-footer__top { grid-template-columns: 1fr; gap: var(--ptv-space-10); }
}

/* Grid interno: Contacto | Menús-wrapper (sub-flex con Protegetuviaje+Ayuda) */
.ptvr-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 238px) minmax(0, max-content);
    gap: var(--ptv-space-10);
}

.ptvr-footer__menus { display: flex; gap: var(--ptv-space-8); }

@media (max-width: 991.98px) {
    .ptvr-footer__grid { grid-template-columns: minmax(0, 238px) minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .ptvr-footer__grid { grid-template-columns: 1fr; gap: var(--ptv-space-8); }
    .ptvr-footer__menus { flex-direction: column; gap: var(--ptv-space-8); }
}

/* Tipografía sobre dark. Override del `footer h3 { border-bottom }` de WP block-styles. */
.ptvr-footer__title {
    margin: 0;
    color: var(--ptv-color-neutral-600);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    border-bottom: 0;
    padding-bottom: 0;
}

.ptvr-footer__title--muted { color: var(--ptv-color-text-inverse-muted); /* Figma Blue/400 — fuera del kit */ }

.ptvr-footer__emergency {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.02em;
}

/* Phone trigger + WhatsApp: flex con contenido alineado a la izquierda
   (icono → ISO/número → chevron fluyen pegados desde el borde izquierdo,
   sin margin-auto ni padding-right de reserva). */
.ptvr-footer__phone-trigger,
.ptvr-footer__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    color: var(--ptv-color-text-inverse);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    text-decoration: none;
    letter-spacing: -0.02em;
}

/* Override del trigger del kit (default: bg neutral-200) para el footer dark. */
.ptvr-footer__phone-trigger {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ptv-color-text-inverse);
    white-space: nowrap;
    font-family: inherit;
}
.ptvr-footer__phone-trigger:hover {
    background: transparent;
    color: var(--ptv-color-brand-600);
}
.ptvr-footer__phone-trigger:focus-visible {
    outline: none;
    color: var(--ptv-color-brand-600);
}

/* Anula el `width: 100%; justify-content: space-between` que el kit
   aplica al `.ptv-dropdown__trigger` en ≤480px — en el footer queremos
   los items pegados a la izquierda, no spread con el chevron al final.
   Override de `ptv-design-kit/src/components.css` @4516-4525. */
@media (max-width: 480px) {
    .ptvr-footer__phone-trigger {
        width: auto;
        justify-content: flex-start;
    }
}

.ptvr-footer__whatsapp:hover,
.ptvr-footer__whatsapp:focus-visible {
    color: var(--ptv-color-brand-600);
    outline: none;
}

/* Iconos teléfono/WhatsApp del bloque "Contacto" — brand-600 sin círculo. */
.ptvr-footer__contact-icon {
    color: var(--ptv-color-brand-600);
    font-size: 18px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Dropdown del kit en footer dark: menu queda claro (sin override del kit).
   max-height: 208px = 3 items visibles aprox. */
.ptvr-footer__phone-menu {
    min-width: 280px;
    max-height: 208px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ptv-color-neutral-400) transparent;
}
.ptvr-footer__phone-menu::-webkit-scrollbar { width: 8px; }
.ptvr-footer__phone-menu::-webkit-scrollbar-track { background: transparent; }
.ptvr-footer__phone-menu::-webkit-scrollbar-thumb {
    background: var(--ptv-color-neutral-400);
    border-radius: var(--ptv-radius-full);
}

/* Item: name+display stacked izq, flag der. */
.ptvr-footer__phone-item {
    justify-content: space-between;
    gap: var(--ptv-space-3);
    white-space: normal;          /* override kit nowrap para texto multilínea */
    padding: var(--ptv-space-3) var(--ptv-space-4);
}

.ptvr-footer__phone-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ptvr-footer__phone-item-name {
    font-weight: var(--ptv-font-semibold);
    font-size: 14px;
    color: var(--ptv-color-text-primary);
    line-height: 1.2;
}

.ptvr-footer__phone-item-display {
    font-size: 13px;
    color: var(--ptv-color-text-secondary);
    line-height: 1.2;
}

.ptvr-footer__phone-item-flag {
    flex-shrink: 0;
}

/* Links del menú — ul/li/a del wp_nav_menu */
.ptvr-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ptvr-footer__links li { margin: 0; }

.ptvr-footer__links a {
    color: var(--ptv-color-text-inverse);
    font-size: 12px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.ptvr-footer__links a:hover,
.ptvr-footer__links a:focus-visible { color: var(--ptv-color-brand-600); }

/* Redes sociales */
.ptvr-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--ptv-color-text-inverse);
    font-size: 22px;
    text-decoration: none;
    transition: color var(--ptv-transition-fast);
}

.ptvr-footer__social-link:hover,
.ptvr-footer__social-link:focus-visible { color: var(--ptv-color-brand-600); }

.ptvr-footer__social-list { list-style: none; margin: 0; padding: 0; }

/* Newsletter */
.ptvr-footer__logo { width: min(345px, 80%); height: auto; display: block; }

.ptvr-footer__nl-title {
    margin: 0 0 var(--ptv-space-1);
    color: var(--ptv-color-text-inverse);
    font-size: 20px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}

.ptvr-footer__nl-form { max-width: 448px; }

/* Input group custom — el kit no tiene variante con botón embebido + dark bg */
.ptvr-footer__nl-input {
    padding: 3px 3px 3px var(--ptv-space-6);
    height: 50px;
    background: var(--ptv-color-neutral-900);
    border-radius: var(--ptv-radius-md);
}

.ptvr-footer__nl-control {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ptv-color-text-inverse);
    font-family: var(--ptv-font-sans);
    font-size: 16px;
    letter-spacing: -0.02em;
}

/* Focus ring custom (outline default removido). */
.ptvr-footer__nl-control:focus,
.ptvr-footer__nl-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ptv-color-brand-600);
    border-radius: var(--ptv-radius-sm);
}
.ptvr-footer__nl-control::placeholder { color: var(--ptv-color-neutral-600); opacity: 1; }

.ptvr-footer__nl-submit.ptv-btn {
    height: 44px;
    min-width: 92px;
    font-weight: var(--ptv-font-semibold);
}

/* Checkbox ptv-check sobre fondo oscuro — el kit no trae variante inverse */
.ptvr-footer__nl-consent .ptv-check__box {
    background: transparent;
    border-color: var(--ptv-color-base-white);
}

.ptvr-footer__nl-consent .ptv-check__label {
    color: var(--ptv-color-text-inverse);
    font-size: 14px;
    font-weight: var(--ptv-font-regular);
    line-height: 1.3;
}

.ptvr-footer__nl-consent .ptv-check__label a { color: inherit; text-decoration: underline; }

.ptvr-footer__nl-consent .ptv-check__control:checked + .ptv-check__box {
    background: var(--ptv-color-base-white);
    border-color: var(--ptv-color-base-white);
}

/* Tick oscuro sobre caja blanca (currentColor). */
.ptvr-footer__nl-consent .ptv-check__icon { color: var(--ptv-color-text-primary); }

/* Honeypot — server-side check en template_redirect ignora si trae valor. */
.ptvr-footer__nl-hp { display: none !important; }

/* Mensajes de feedback (éxito/error) tras el redirect del handler. */
.ptvr-footer__nl-feedback {
    margin: 0;
    padding: var(--ptv-space-3) var(--ptv-space-4);
    border-radius: var(--ptv-radius-md);
    font-size: var(--ptv-text-b4);
    line-height: var(--ptv-leading-normal);
    color: var(--ptv-color-text-inverse);
}

.ptvr-footer__nl-feedback--success {
    /* Bloque entero reemplaza el form. */
    background: var(--ptv-color-success-700);
    padding: var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

/* `[hidden]` del UA stylesheet (display: none) pierde contra
   `.ptvr-footer__nl-feedback--success { display: flex }` en cascade,
   así que el bloque queda visible al cargar la página. Restauramos
   la semántica con mayor especificidad. Aplica también al error. */
.ptvr-footer__nl-feedback[hidden] {
    display: none;
}

.ptvr-footer__nl-feedback--error {
    /* Aparece dentro del form para permitir reintento. */
    background: color-mix(in srgb, var(--ptv-color-danger-600) 25%, transparent);
    border: var(--ptv-border-width-sm) solid var(--ptv-color-danger-600);
}

.ptvr-footer__nl-feedback-msg {
    margin: 0;
    font-size: var(--ptv-text-b4);
    color: var(--ptv-color-text-inverse);
    opacity: 0.9;
}

/* Trustpilot */
.ptvr-footer__trustpilot { min-height: 25px; max-width: 200px; }

/* Divider del kit — ajuste de color sobre dark */
.ptvr-footer__inner > .ptv-divider { --ptv-divider-color: var(--ptv-color-neutral-800); margin: 0; }

/* Row 2 — Seguros por país (5 cols → no soportado por ptv-grid, custom) */
.ptvr-footer__countries-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ptv-space-10);
}

@media (max-width: 1199.98px) { .ptvr-footer__countries-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .ptvr-footer__countries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .ptvr-footer__countries-grid { grid-template-columns: 1fr; } }

/* Row 3 — legal (con más aire respecto a la fila de países) */
.ptvr-footer__legal { margin-top: var(--ptv-space-8); }

.ptvr-footer__copy { margin: 0; color: var(--ptv-color-text-inverse); font-size: 12px; }

/* Párrafo institucional bajo "Seguros por país". */
.ptvr-footer__about {
    margin: 0;
    color: var(--ptv-color-text-inverse);
    opacity: 0.7;
    font-size: 13px;
    line-height: var(--ptv-leading-loose);
}

.ptvr-footer__legal-links a {
    color: var(--ptv-color-text-inverse);
    font-size: 12px;
    text-decoration: none;
}

.ptvr-footer__legal-links a:hover,
.ptvr-footer__legal-links a:focus-visible { color: var(--ptv-color-brand-600); }

/* Exit-intent modal */
.ptvr-exit-modal .ptv-modal {
    background: var(--ptv-color-brand-600);
    color: var(--ptv-color-text-inverse);
}

.ptvr-exit-modal .ptv-modal__close { color: var(--ptv-color-text-inverse); }

.ptvr-exit-modal__body { padding: var(--ptv-space-10); text-align: center; }

.ptvr-exit-modal__title {
    margin: 0;
    font-size: var(--ptv-text-h3, 32px);
    font-weight: var(--ptv-font-bold, 700);
    line-height: 1.1;
}

.ptvr-exit-modal__offer {
    margin: var(--ptv-space-2) 0 0;
    font-size: var(--ptv-text-h2, 40px);
    font-weight: var(--ptv-font-bold, 700);
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
 * CALLME · template-parts/header/callme-modal.php (Figma 512:2590)
 * Popover anclado al botón "Quiero que me llamen" del header.
 * ═══════════════════════════════════════════════════════════════ */

/* Ancla del popover en el flow del header. */
.ptvr-header__callme-anchor {
    align-self: center;
}

/* Override del `.ptv-popover` del kit: width 360px y anclaje right
   (el trigger está en el extremo derecho del header). */
.ptvr-callme-popover {
    --ptv-popover-bg: var(--ptv-color-bg-surface);
    width: min(360px, calc(100vw - var(--ptv-space-6)));
    max-width: none;
    left: auto;
    right: 0;
    transform: translateX(0) translateY(0);
    transform-origin: top right;
}

/* Anula la animación del kit (`translateX(-50%)` final) que choca con `right: 0`. */
.ptvr-callme-popover.ptv-popover--bottom.ptv-popover--open,
.ptvr-callme-popover.ptv-popover--bottom {
    animation: none;
    transform: translateX(0) translateY(0);
}

/* Flecha bajo el trigger (derecha) en lugar del centro. */
.ptvr-callme-popover::after {
    left: auto;
    right: var(--ptv-space-6);
    transform: translateX(0);
}

.ptvr-callme {
    padding: var(--ptv-space-5) var(--ptv-space-5) var(--ptv-space-6);
    position: relative;
}

.ptvr-callme__close {
    position: absolute;
    top: var(--ptv-space-4);
    right: var(--ptv-space-4);
    background: transparent;
    border: 0;
    color: var(--ptv-color-text-primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: var(--ptv-space-2);
}

.ptvr-callme__body {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
    padding: 0;
}

/* Wrappers form/success — mismo layout para conservar spacing en el toggle AJAX. */
.ptvr-callme__form-block,
.ptvr-callme__success-block {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
}

.ptvr-callme__title {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-tight);
    letter-spacing: -0.02em;
}

.ptvr-callme__subtitle {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: 10px;
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.02em;
}

.ptvr-callme__form {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

/* Honeypot — validado server-side en template_redirect. */
.ptvr-callme__hp { display: none !important; }

/* Grupo de campos — gap apretado (Figma 7px). */
.ptvr-callme__fields {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

/* Override del `.ptv-input-wrap` vía custom props del kit (bg neutral-200, no border). */
.ptvr-callme__field.ptv-input-wrap {
    --_iw-bg:        var(--ptv-color-neutral-200);
    --_iw-border:    transparent;
    --_iw-radius:    var(--ptv-radius-lg);
    --_iw-h:         3.5rem;
    --_iw-pad-x:     var(--ptv-space-3);
    --_iw-pad-y:     var(--ptv-space-2);
    --_iw-label-c:   var(--ptv-color-text-primary);
}

.ptvr-callme__field.ptv-input-wrap:focus-within {
    --_iw-border: var(--ptv-color-brand-600);
}

.ptvr-callme__field .ptv-input__label {
    font-size: 12px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.01em;
}

.ptvr-callme__field .ptv-input {
    font-size: 12px;
    font-weight: var(--ptv-font-regular);
}

/* ── Combo teléfono ──
   Country picker = `.ptv-select-wrap` (no <select> nativo) para pintar
   `.ptv-flag` en cada opción. ptv.js maneja a11y/dropdown; el listener
   inline en callme-modal.php preserva el HTML del flag al seleccionar. */
.ptvr-callme__phone-row {
    /* Alineamos baseline para que el trigger (con flag) y el input
       (texto) no salten en altura. */
    align-items: center;
}

/* Constriñe el select-wrap al contenido (default es block); el chevron
   `::after` del kit conserva right reajustado al padding del trigger. */
.ptvr-callme__phone-country {
    flex: 0 0 auto;
    width: auto;
}
.ptvr-callme__phone-country::after {
    right: var(--ptv-space-2);
}

/* Trigger compacto: bandera + calling code + espacio para el chevron. */
.ptvr-callme__phone-trigger {
    /* Hereda font del kit (b4/semibold); ajustamos al size del partial. */
    font-size: 12px;
    font-weight: var(--ptv-font-medium);
    /* Padding-right reserva espacio para el chevron del kit (que vive
       fuera del trigger, en `::after` del wrap). */
    padding-right: var(--ptv-space-5);
    gap: var(--ptv-space-2);
    color: var(--ptv-color-text-primary);
}

/* Valor visible del trigger — flex row para alinear flag + code. */
.ptvr-callme__phone-value {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    /* El kit aplica overflow:hidden + ellipsis al `.ptv-select__value`,
       pero acá el contenido es chiquito y predecible — lo limpiamos
       para que el flag no se recorte. */
    overflow: visible;
}

/* Calling code dentro del trigger (y de cada option). */
.ptvr-callme__phone-code {
    font-variant-numeric: tabular-nums;
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-medium);
    white-space: nowrap;
}

/* Dropdown: el ancho default del kit (`left:0; right:0`) lo ataría al
   trigger compacto. Lo dejamos crecer al contenido (nombres de país
   pueden ser largos) y le ponemos un min-width razonable.
   max-height + overflow para scroll cuando son ~245 países.
   max-width controlado para no salir del popover (360px - padding). */
.ptvr-callme__phone-dropdown {
    right: auto;
    min-width: 260px;
    max-width: 300px;
    max-height: 320px;
    overflow-y: auto;
}

/* Search sticky en el top del dropdown — no se va con el scroll de
   opciones. `role="presentation"` en el <li> evita que ARIA lo cuente
   como opción del listbox. */
.ptvr-callme__phone-search-item {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--ptv-space-2) var(--ptv-space-3);
    background: var(--ptv-color-bg-surface);
    border-bottom: var(--ptv-border-width-sm) solid var(--ptv-color-border-subtle);
}

.ptvr-callme__phone-search {
    width: 100%;
    border: var(--ptv-border-width-sm) solid var(--ptv-color-border);
    border-radius: var(--ptv-radius-md);
    background: var(--ptv-color-bg-surface);
    padding: var(--ptv-space-2) var(--ptv-space-3);
    font-family: var(--ptv-font-sans);
    font-size: 13px;
    color: var(--ptv-color-text-primary);
    outline: none;
    transition: border-color var(--ptv-transition-fast);
}
.ptvr-callme__phone-search::placeholder {
    color: var(--ptv-color-text-secondary);
}
.ptvr-callme__phone-search:focus {
    border-color: var(--ptv-color-brand-600);
}

/* Empty state cuando el filtro no encuentra país — `role="presentation"`
   también, no es interactivo. */
.ptvr-callme__phone-empty {
    padding: var(--ptv-space-3) var(--ptv-space-4);
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b4);
    font-style: italic;
    pointer-events: none;
}

/* Cada opción: bandera | nombre país (flex:1, ellipsis) | calling code. */
.ptvr-callme__phone-option {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
}

.ptvr-callme__phone-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptvr-callme__phone-option .ptvr-callme__phone-code {
    flex: 0 0 auto;
    color: var(--ptv-color-text-secondary);
    font-weight: var(--ptv-font-regular);
}
.ptvr-callme__phone-option.ptv-select__option--selected .ptvr-callme__phone-code {
    color: var(--ptv-color-brand-600);
}

/* Helper text bajo el grupo (10px). */
.ptvr-callme__helper {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: 10px;
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.02em;
}

/* Checkbox de privacidad — solo ajuste del size del texto. */
.ptvr-callme__consent .ptv-check__label {
    font-size: 11px;
    line-height: 1.4;
    color: var(--ptv-color-text-primary);
}
.ptvr-callme__consent .ptv-check__label a {
    color: inherit;
    text-decoration: underline;
}

/* El SVG del check usa `currentColor` — sobre la caja brand-600 del kit
   (estado checked default), el tick va en blanco. */
.ptvr-callme__consent .ptv-check__icon { color: var(--ptv-color-base-white); }

/* Botón "Llámenme" — alineado a la izquierda, ancho propio según el
   contenido + padding generoso. Color brand-600 (filled-brand del kit). */
.ptvr-callme__submit.ptv-btn {
    align-self: flex-start;
    height: 40px;
    padding-inline: var(--ptv-space-7);   /* 28px ≈ Figma */
    font-size: 14px;
    font-weight: var(--ptv-font-medium);
}

/* ── Mensajes de feedback (éxito/error) ──────────────────── */
.ptvr-callme__feedback {
    margin: 0;
    padding: var(--ptv-space-3) var(--ptv-space-4);
    border-radius: var(--ptv-radius-md);
    font-size: var(--ptv-text-b4);
    line-height: var(--ptv-leading-normal);
}

.ptvr-callme__feedback--success {
    background: var(--ptv-color-success-50);
    color: var(--ptv-color-success-800);
}

.ptvr-callme__feedback--success p {
    margin: 0;
    font-size: var(--ptv-text-b4);
    line-height: var(--ptv-leading-normal);
}

.ptvr-callme__feedback--error {
    background: color-mix(in srgb, var(--ptv-color-danger-600) 15%, transparent);
    border: var(--ptv-border-width-sm) solid var(--ptv-color-danger-600);
    color: var(--ptv-color-danger-700, var(--ptv-color-danger-600));
}

/* ═══════════════════════════════════════════════════════════════
 * Popover "Habla con un agente activo" (Figma 512:2519)
 * Mismo patrón de anclaje right + override de animación que callme.
 * ═══════════════════════════════════════════════════════════════ */
.ptvr-agent-popover {
    --ptv-popover-bg: var(--ptv-color-bg-surface);
    width: min(320px, calc(100vw - var(--ptv-space-6)));
    max-width: none;
    left: auto;
    right: 0;
    transform: translateX(0) translateY(0);
    transform-origin: top right;
}

.ptvr-agent-popover.ptv-popover--bottom.ptv-popover--open,
.ptvr-agent-popover.ptv-popover--bottom {
    animation: none;
    transform: translateX(0) translateY(0);
}

.ptvr-agent-popover::after {
    left: auto;
    right: var(--ptv-space-6);
    transform: translateX(0);
}

.ptvr-agent {
    padding: var(--ptv-space-4) var(--ptv-space-5);
    position: relative;
}

.ptvr-agent__close {
    position: absolute;
    top: var(--ptv-space-4);
    right: var(--ptv-space-4);
    background: transparent;
    border: 0;
    color: var(--ptv-color-text-primary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    padding: var(--ptv-space-2);
    z-index: 1;
}

.ptvr-agent__body {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
}

.ptvr-agent__header {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    padding-right: var(--ptv-space-6); /* deja aire para la X */
}

.ptvr-agent__title {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-tight);
    letter-spacing: -0.02em;
}

.ptvr-agent__subtitle {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: 12px;
    font-weight: var(--ptv-font-regular);
    line-height: var(--ptv-leading-normal);
}

.ptvr-agent__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

/* Filas de acción (WhatsApp + phone trigger). El phone-trigger reusa
   `.ptv-dropdown__trigger` del kit normalizado al mismo look. */
.ptvr-agent__action {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-2);
    width: 100%;
    padding: var(--ptv-space-2) var(--ptv-space-3);
    background: var(--ptv-color-neutral-200);
    border: 0;
    border-radius: var(--ptv-radius-lg);
    color: var(--ptv-color-text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ptvr-agent__action:hover,
.ptvr-agent__action:focus-visible {
    background: var(--ptv-color-neutral-300, var(--ptv-color-neutral-200));
    color: var(--ptv-color-text-primary);
    outline: none;
}

.ptvr-agent__action-icon {
    flex-shrink: 0;
    display: block;
}

.ptvr-agent__action-label {
    flex: 1 1 auto;
    min-width: 0;
}

.ptvr-agent__action-arrow {
    margin-left: auto;
    font-size: 14px;
    font-weight: var(--ptv-font-regular);
    line-height: 1;
    flex-shrink: 0;
}

/* Phone trigger — hereda look de `.ptvr-agent__action`. */
.ptvr-agent__phone-trigger {
    white-space: nowrap;
}

.ptvr-agent__phone-icon {
    color: var(--ptv-color-brand-600);
    font-size: 16px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.ptvr-agent__phone-flag {
    flex-shrink: 0;
}

.ptvr-agent__phone-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* Mismo patrón que el footer (items con name + display + flag). */
.ptvr-agent__phone-menu {
    min-width: 280px;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ptv-color-neutral-400) transparent;
}
.ptvr-agent__phone-menu::-webkit-scrollbar { width: 8px; }
.ptvr-agent__phone-menu::-webkit-scrollbar-track { background: transparent; }
.ptvr-agent__phone-menu::-webkit-scrollbar-thumb {
    background: var(--ptv-color-neutral-400);
    border-radius: var(--ptv-radius-full);
}

.ptvr-agent__phone-item {
    justify-content: space-between;
    gap: var(--ptv-space-3);
    white-space: normal;
    padding: var(--ptv-space-3) var(--ptv-space-4);
}

.ptvr-agent__phone-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ptvr-agent__phone-item-name {
    font-weight: var(--ptv-font-semibold);
    font-size: 13px;
    color: var(--ptv-color-text-primary);
    line-height: 1.2;
}

.ptvr-agent__phone-item-display {
    font-size: 12px;
    color: var(--ptv-color-text-secondary);
    line-height: 1.2;
}

.ptvr-agent__phone-item-flag {
    flex-shrink: 0;
}

/* Trigger del popover callme — por eso es <button>. */
.ptvr-agent__footer {
    display: flex;
    align-items: center;
}

.ptvr-agent__callme-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--ptv-color-text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.2;
    cursor: pointer;
}

.ptvr-agent__callme-link:hover .ptvr-agent__callme-text,
.ptvr-agent__callme-link:focus-visible .ptvr-agent__callme-text {
    color: var(--ptv-color-brand-600);
}

.ptvr-agent__callme-link:focus-visible {
    /* Focus ring custom (outline default removido). */
    outline: none;
    box-shadow: 0 0 0 2px var(--ptv-color-brand-600);
    border-radius: var(--ptv-radius-sm);
}

.ptvr-agent__callme-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
 * BLOG LISTING — Figma 781:24426
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-blog { background: var(--ptv-color-bg-surface); }

/* Hero — Figma 781:24428: pt-80 pb-100. */
.ptvr-blog__hero { padding-block: var(--ptv-space-20) 100px; }

/* Figma 781:24428 — gap 20px (kit no expone gap-5 en grid). */
.ptvr-blog__hero-grid {
    align-items: center;
    gap: var(--ptv-space-5);
}

/* Figma — gap entre eyebrow / título / descripción 40px (kit no expone gap-10) */
.ptvr-blog__hero-intro { gap: var(--ptv-space-10); }

@media (max-width: 991.98px) {
    .ptvr-blog__hero { padding-block: var(--ptv-space-12) var(--ptv-space-16); }
    /* `minmax(0, 1fr)` (no `1fr` a secas): el `1fr` default es `minmax(auto, 1fr)`,
       y la imagen featured (thumbnail `ptvr-hero` ≈670px intrínseco) infla la
       columna por encima del viewport → scroll horizontal y title cut-off. */
    .ptvr-blog__hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--ptv-space-8); }
    .ptvr-blog__hero-intro { gap: var(--ptv-space-6); }
}

/* Tablet — featured card (`.ptv-card--image-top` por markup) pasa a layout
   horizontal (body | divider | image), mientras el grid arriba sigue 1-col
   (intro sobre featured). Aplica a todos los subhomes que reusan
   `template-parts/blog/hero.php` (blog, seguros, coberturas, covid, empresas,
   productos, requisitos). En mobile la card queda vertical (default). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ptvr-blog__hero-featured {
        flex-direction: row;
        align-items: stretch;
    }
    .ptvr-blog__hero-featured .ptv-card__body    { order: 0; flex: 1 1 0; min-width: 0; }
    .ptvr-blog__hero-featured .ptv-card__divider { order: 1; }
    .ptvr-blog__hero-featured .ptv-card__image {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        /* Override del kit `<lg` (@4752: `height: 242px; flex: 0 0 242px`)
           que fija la imagen en 242×242 — en horizontal queremos que
           stretchee a la altura del body. */
        height: auto;
        aspect-ratio: auto;
    }
    .ptvr-blog__hero-featured .ptv-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Body en horizontal: sin min-height del modo vertical; padding y gap
       acordes al patrón desktop image-right del listing. */
    .ptvr-blog__hero-featured .ptv-card__body {
        min-height: 0;
    }
    /* Divider — orientación vertical (el kit lo deja horizontal por defecto
       en `--image-top`). Sustituye border-top dashed → border-left dashed. */
    .ptvr-blog__hero-featured .ptv-card__divider {
        border-top:    none;
        border-left:   var(--ptv-border-width-md) dashed var(--ptv-color-border);
        width:         0;
        height:        auto;
        align-self:    stretch;
        margin-block:  var(--_card-radius);
        margin-inline: 0;
    }
}

.ptvr-blog__eyebrow {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 24px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.04em;
}

.ptvr-blog__hero-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.ptvr-blog__hero-desc {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: 18px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    max-width: 538px;
}

/* Hero featured — boarding-pass del kit. Body > imagen sobre pixel-perfect del Figma. */
.ptvr-blog__hero-featured {
    width: 100%;
    text-decoration: none;
    color: inherit;
}

/* min-height 286 (Figma "down" h-286). Override del shared rule para
   agrupar título+CTA arriba en lugar de space-between. */
.ptvr-blog__hero-featured .ptv-card__body {
    min-height: 286px;
    padding: var(--ptv-space-8);
    justify-content: flex-start;
    gap: var(--ptv-space-3);
}

/* Grid */
.ptvr-blog__grid-section { padding-block: var(--ptv-space-6) var(--ptv-space-16); }

.ptvr-blog__grid { align-items: stretch; }

/* <992px: 1 columna. */
@media (max-width: 991.98px) {
    .ptvr-blog__grid { grid-template-columns: 1fr; }
}

/* Cards del blog — overrides al ptv-card del kit. */
.ptvr-blog__card,
.ptvr-blog__hero-featured { color: inherit; text-decoration: none; }

.ptvr-blog__card .ptv-card__body,
.ptvr-blog__hero-featured .ptv-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ptv-space-6);
}

/* Stagger animation: cada card entra con delay incremental en stagger */
.ptvr-blog__grid > .ptvr-blog__card:nth-child(4n+1) { --ptv-anim-delay: 0ms; }
.ptvr-blog__grid > .ptvr-blog__card:nth-child(4n+2) { --ptv-anim-delay: 75ms; }
.ptvr-blog__grid > .ptvr-blog__card:nth-child(4n+3) { --ptv-anim-delay: 150ms; }
.ptvr-blog__grid > .ptvr-blog__card:nth-child(4n+4) { --ptv-anim-delay: 225ms; }

/* ≥lg (desktop): altura 309 (Figma 781:24432) + radius 24
   (Figma 781:24433/24437, sobre el default kit 32). En tablet
   el kit ya apila --image-right a column, así que estas reglas
   horizontales solo tienen sentido en desktop. */
@media (min-width: 992px) {
    .ptvr-blog__card.ptv-card--image-right {
        height: 309px;
        --_card-radius: var(--ptv-radius-2xl);   /* 24 */
    }

    .ptvr-blog__card.ptv-card--image-right .ptv-card__body {
        min-width: 0;
        overflow: hidden;
    }
}

/* <lg (mobile + tablet): invertir el collapse del kit para que la
   imagen quede ARRIBA del body (el kit default deja body arriba).
   Dimensiones del patrón related (Figma 512:3763): image 242h fija,
   body min-h 232. El kit aplica esto al variant --image-top pero
   el blog card es --image-right, por eso lo replicamos aquí. */
@media (max-width: 991.98px) {
    .ptvr-blog__card.ptv-card--image-right .ptv-card__image    { order: 0 !important; }
    .ptvr-blog__card.ptv-card--image-right .ptv-card__divider  { order: 1; }
    .ptvr-blog__card.ptv-card--image-right .ptv-card__body     { order: 2 !important; }

    .ptvr-blog__card .ptv-card__body {
        min-height: 232px;
    }

    .ptvr-blog__card .ptv-card__image {
        height: 242px;
        flex: 0 0 242px;
        width: 100%;
        overflow: hidden;
        position: relative;       /* anclar el title overlay absolute */
    }
    .ptvr-blog__card .ptv-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        aspect-ratio: auto;
    }
}

/* Hero featured: aspect 670/393 ≈ 5/3 (Figma 781:24428 img h=393). */
.ptvr-blog__hero-featured .ptv-card__image {
    aspect-ratio: 670 / 393;
    width: 100%;
    overflow: hidden;
}
.ptvr-blog__hero-featured .ptv-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Typography shared por card y featured */
.ptvr-blog__card-title {
    margin: 0;
    font-size: 32px;
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--ptv-color-text-primary);
}

.ptvr-blog__card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    font-size: 18px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    color: var(--ptv-color-text-primary);
}

/* Switch responsive entre los DOS layouts del card:
     · Desktop: title body + cta simple visibles, overlay/desc/cta-filled
       ocultos (la card se ve como Figma 781:24432 — listing blog).
     · Mobile + tablet: overlay (24px del kit) + desc + cta filled
       visibles (patrón related-content, Figma 512:3763); title body
       y cta simple ocultos.
   `display: none` saca los elementos del árbol de accesibilidad, así
   los lectores de pantalla sólo leen UN título por card en cada
   breakpoint. El root del card sigue siendo un único <a> con aria-label. */
.ptvr-blog__card-image-title,
.ptvr-blog__card-desc,
.ptvr-blog__card-cta-filled {
    display: none;
}

@media (max-width: 991.98px) {
    /* Oculta los elementos del layout desktop SOLO en las cards del listado
       (`.ptvr-blog__card`), que en <lg switchen al patrón overlay+filled.
       La featured del hero (`.ptvr-blog__hero-featured`) reusa estas mismas
       clases pero conserva su layout title+cta-simple en todos los breakpoints. */
    .ptvr-blog__card .ptvr-blog__card-title,
    .ptvr-blog__card .ptvr-blog__card-cta {
        display: none;
    }

    /* Restaura visibilidad de los elementos del layout mobile/tablet.
       El kit ya define `.ptv-card__image-title` como flex centrado;
       sobreescribimos solo el `display: none` del default-desktop. */
    .ptvr-blog__card-image-title {
        display: flex;
    }
    .ptvr-blog__card-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        overflow: hidden;
    }
    .ptvr-blog__card-cta-filled {
        display: inline-flex;
    }

    /* Dimensiones Figma 512:3763 y look related-content para el card.
       El kit ya pone image height 242, body min-h 232 y title overlay
       24px globalmente en <lg (components.css). Aquí ajustamos lo
       específico del blog card:
         - body con bg blanco (default era neutral-200 heredado de
           --bg-neutral-200) para matchear related-content.
         - padding del body 28 (default kit en <lg es 20; subimos para
           que el desc y el botón respiren igual que en related).
         - gap interno del body 12 (mismo que .ptvr-related__card-body).
         - radius del card 24. */
    .ptvr-blog__card {
        --_card-radius: 24px;
    }
    .ptvr-blog__card .ptv-card__body {
        padding: var(--ptv-space-7);
        gap: var(--ptv-space-3);
        justify-content: flex-start;
    }
    .ptvr-blog__card-desc {
        margin: 0;
        max-width: 304px;
        color: var(--ptv-color-neutral-950);
        font-size: 14px;
        font-weight: var(--ptv-font-regular);
        line-height: 1.4;
        letter-spacing: -0.02em;
    }
    /* CTA filled — radius 10 (Figma related), pegado al borde inferior
       izquierdo del body con margin-top:auto. */
    .ptvr-blog__card-cta-filled {
        --_btn-radius: 10px;
        align-self: flex-start;
        margin-top: auto;
    }
}

/* Tablet — listing cards en `/blog` (`.ptvr-blog__grid`) recuperan el
   layout horizontal de desktop (imagen al lado, title+cta-simple en el
   body). Revierte: (a) el collapse vertical que el kit aplica a
   `--image-right` en <lg (`ptv-design-kit/src/components.css` @4805-4828)
   y (b) los overrides de stacking + overlay/filled del bloque <lg
   anterior en este mismo archivo. Carruseles (`.ptvr-inicio-blog__carousel`,
   `.ptvr-article__related-blog`) no se ven afectados porque NO están
   dentro de `.ptvr-blog__grid`. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ptvr-blog__grid .ptvr-blog__card.ptv-card--image-right {
        flex-direction: row;
    }
    /* Revierte order del kit (image-top en <lg) → body | divider | image. */
    .ptvr-blog__grid .ptvr-blog__card.ptv-card--image-right .ptv-card__body    { order: 0; }
    .ptvr-blog__grid .ptvr-blog__card.ptv-card--image-right .ptv-card__divider { order: 1; }
    .ptvr-blog__grid .ptvr-blog__card.ptv-card--image-right .ptv-card__image   {
        order: 2;
        flex: var(--_card-image-flex) 1 0;
        max-height: none;
        height: auto;
        width: auto;
    }
    .ptvr-blog__grid .ptvr-blog__card .ptv-card__image img {
        aspect-ratio: auto;
    }
    /* Body: revierte min-height 232 + padding 28 mobile → naturales
       del kit en desktop. Height 309 + radius 24 como en desktop. */
    .ptvr-blog__grid .ptvr-blog__card.ptv-card--image-right {
        height: 309px;
        --_card-radius: var(--ptv-radius-2xl);
    }
    .ptvr-blog__grid .ptvr-blog__card .ptv-card__body {
        min-height: 0;
        min-width: 0;
        overflow: hidden;
        padding: var(--ptv-space-8);
        gap: var(--ptv-space-6);
        justify-content: space-between;
    }
    /* Divider vuelve vertical (el kit lo pasa a horizontal en <lg). */
    .ptvr-blog__grid .ptvr-blog__card .ptv-card__divider {
        border-top:    none;
        border-left:   var(--ptv-border-width-md) dashed var(--ptv-color-border);
        width:         0;
        height:        auto;
        align-self:    stretch;
        margin-block:  var(--_card-radius);
        margin-inline: 0;
    }
    /* Switch al layout desktop: title+cta-simple visibles, overlay/desc/filled
       ocultos (revierte el switch del bloque <lg). */
    .ptvr-blog__grid .ptvr-blog__card .ptvr-blog__card-title,
    .ptvr-blog__grid .ptvr-blog__card .ptvr-blog__card-cta {
        display: inline-flex;
    }
    .ptvr-blog__grid .ptvr-blog__card .ptvr-blog__card-title { display: block; }
    .ptvr-blog__grid .ptvr-blog__card .ptvr-blog__card-image-title,
    .ptvr-blog__grid .ptvr-blog__card .ptvr-blog__card-desc,
    .ptvr-blog__grid .ptvr-blog__card .ptvr-blog__card-cta-filled {
        display: none;
    }
}

/* Paginación "Ver más" — usa ptv-btn--cta del kit. */
.ptvr-blog__pagination { padding-block: var(--ptv-space-6) var(--ptv-space-16); }

/* ═══════════════════════════════════════════════════════════════
 * ARTICLE (single) — Figma 781:25106
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-article { background: var(--ptv-color-bg-surface); }

/* Hero 2 cols — Figma 781:25108. */
.ptvr-article__hero { padding-block: var(--ptv-space-20) var(--ptv-space-24); }

.ptvr-article__hero-grid {
    align-items: center;
    gap: var(--ptv-space-5);
}

@media (max-width: 991.98px) {
    .ptvr-article__hero { padding-block: var(--ptv-space-12) var(--ptv-space-16); }
    .ptvr-article__hero-grid { grid-template-columns: 1fr; gap: var(--ptv-space-8); }
}

.ptvr-article__breadcrumb .ptv-breadcrumb__list {
    font-size: 14px;
    letter-spacing: -0.01em;
}

/* Override del nowrap del kit en items del breadcrumb (rompe layout con títulos largos). */
.ptvr-article__breadcrumb .ptv-breadcrumb__item { white-space: normal; min-width: 0; }

/* Mobile: el último crumb (título del artículo) se oculta — redundante. */
@media (max-width: 767.98px) {
    .ptvr-article__breadcrumb .ptv-breadcrumb__item:last-child { display: none; }
}

/* min-width:0 evita overflow del track por contenido intrínseco. */
.ptvr-article__hero-intro {
    min-width: 0;
    gap: var(--ptv-space-10);
}

@media (max-width: 991.98px) {
    .ptvr-article__hero-intro { gap: var(--ptv-space-6); }
}

.ptvr-article__chips {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ptvr-article__chip.ptv-btn {
    height: 42px;
    border-radius: 6px;
    font-weight: var(--ptv-font-semibold);
}

.ptvr-article__excerpt {
    margin: 0;
    max-width: 538px;
    color: var(--ptv-color-text-primary);
    font-size: 18px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}

.ptvr-article__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.ptvr-article__date {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.02em;
}

.ptvr-article__hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 670 / 581;
    border-radius: 32px;
    overflow: hidden;
    background: var(--ptv-color-neutral-200);
}

.ptvr-article__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ptvr-article__hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* Main — content (2/3) + sidebar (1/3) */
.ptvr-article__main { padding-block: var(--ptv-space-6) var(--ptv-space-16); }


.ptvr-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 423px;
    gap: var(--ptv-space-12);
    align-items: start;
}

@media (max-width: 991.98px) {
    .ptvr-article__layout {
        grid-template-columns: 1fr;
        gap: var(--ptv-space-8);
    }
}

/* Contenido tipográfico */
.ptvr-article__featured-excerpt {
    margin-bottom: var(--ptv-space-8);
    padding: var(--ptv-space-6) var(--ptv-space-8);
    background: var(--ptv-color-neutral-200);
    border-radius: 16px;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.ptvr-article__featured-excerpt > *:first-child { margin-top: 0; }
.ptvr-article__featured-excerpt > *:last-child  { margin-bottom: 0; }

.ptvr-article__body {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ptv-color-text-primary);
}

/* Titulares: 64px ≈ spec 60px (la siguiente parada del token es 80px). */
.ptvr-article__body h2 {
    margin: var(--ptv-space-16) 0 var(--ptv-space-4);
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.ptvr-article__body h3 {
    margin: var(--ptv-space-16) 0 var(--ptv-space-4);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* Primer heading sin margen — el hero ya separa. */
.ptvr-article__body > h2:first-child,
.ptvr-article__body > h3:first-child { margin-top: 0; }

.ptvr-article__body p { margin: 0 0 var(--ptv-space-10); }

.ptvr-article__body ul,
.ptvr-article__body ol { margin: 0 0 var(--ptv-space-4) var(--ptv-space-5); }

.ptvr-article__body li { margin-bottom: var(--ptv-space-2); }

.ptvr-article__body a {
    color: var(--ptv-color-brand-600);
    text-decoration: underline;
}

.ptvr-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ptv-radius-xl);
    margin: auto;
}

/* min-width:0 contiene WP block alignments dentro de la columna. */
.ptvr-article__content-col,
.ptvr-article__content { min-width: 0; }

.ptvr-article__body { overflow-wrap: anywhere; }

.ptvr-article__body figure,
.ptvr-article__body .wp-block-image,
.ptvr-article__body .alignwide,
.ptvr-article__body .alignfull,
.ptvr-article__body .aligncenter,
.ptvr-article__body .alignleft,
.ptvr-article__body .alignright {
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
}

.ptvr-article__body figure img,
.ptvr-article__body .wp-block-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.ptvr-article__body iframe,
.ptvr-article__body video,
.ptvr-article__body embed { max-width: 100%; }

/* Fallback para tablas que no pasaron por el filtro PHP (la ptv-table tiene su propio scroll). */
.ptvr-article__body table:not(.ptv-table) {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    margin: 0 0 var(--ptv-space-10);
}

/* Scroll horizontal robusto para .ptv-table del kit: forzamos wrap+table
   a crecer con su contenido para que el scroll exterior detecte overflow.
   `margin-bottom: space-10` (40 px) mantiene el ritmo del texto — sin
   esto, la tabla quedaba pegada al párrafo siguiente. */
.ptvr-article__body .ptv-table-scroll {
    width: 100%;
    margin: 0 0 var(--ptv-space-10);
}

.ptvr-article__body .ptv-table-wrap,
.ptvr-article__body .ptv-table {
    width: max-content;
    min-width: 100%;
}

/* Cuando la `.ptv-table-wrap` no va dentro de `.ptv-table-scroll`, ella
   misma carga el margin. */
.ptvr-article__body > .ptv-table-wrap,
.ptvr-article__body .ptv-table-wrap:not(.ptv-table-scroll .ptv-table-wrap) {
    margin-bottom: var(--ptv-space-10);
}

.ptvr-article__body .ptv-table .ptv-table__th,
.ptvr-article__body .ptv-table .ptv-table__td {
    overflow-wrap: normal;
    word-break: normal;
}

/* Mismo fix de scroll horizontal para la tabla de precios en single-seguro-de-viaje-para. */
.ptvr-insurance__prices .ptv-table-wrap,
.ptvr-insurance__prices .ptv-table {
    width: max-content;
    min-width: 100%;
}

.ptvr-article__body blockquote {
    margin: var(--ptv-space-6) 0;
    padding: var(--ptv-space-4) var(--ptv-space-6);
    border-left: 4px solid var(--ptv-color-brand-600);
    background: var(--ptv-color-neutral-200);
    font-style: italic;
    border-radius: 0 12px 12px 0;
}

/* Banner CTA interno */
.ptvr-article__banner {
    margin-top: var(--ptv-space-12);
    border-radius: 20px;
    background: var(--ptv-color-neutral-950);
    color: var(--ptv-color-text-inverse);
    overflow: hidden;
}

.ptvr-article__banner-inner {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
    padding: var(--ptv-space-10) var(--ptv-space-12);
}

@media (max-width: 575.98px) {
    .ptvr-article__banner-inner { padding: var(--ptv-space-6); }

    /* Override del nowrap+line-height:1 del ptv-btn para envolver copy largo. */
    .ptvr-article__banner-ctas { flex-direction: column; align-items: stretch; }
    .ptvr-article__banner-ctas .ptv-btn {
        white-space: normal;
        line-height: 1.3;
        width: 100%;
    }
}

.ptvr-article__banner-title {
    margin: 0;
    max-width: 578px;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--ptv-color-text-inverse);
}

.ptvr-article__banner-icon {
    color: var(--ptv-color-social-whatsapp);
    font-size: 20px;
}

/* Sidebar — sticky en desktop. En mobile, estático debajo del contenido. */
.ptvr-article__sidebar-col {
    position: sticky;
    top: calc(var(--ptv-space-16) + var(--ptv-space-12));
}

@media (max-width: 991.98px) {
    .ptvr-article__sidebar-col { position: static; }
}

.ptvr-article__sidebar-card {
    background: var(--ptv-color-neutral-200);
    border-radius: 18px;
    padding: var(--ptv-space-6) var(--ptv-space-7);
}

.ptvr-article__sidebar-section { padding-block: var(--ptv-space-4); }

.ptvr-article__sidebar-section:first-child { padding-top: 0; }
.ptvr-article__sidebar-section:last-child  { padding-bottom: 0; }

.ptvr-article__sidebar-title {
    margin: 0 0 var(--ptv-space-3);
    color: var(--ptv-color-brand-400, #FF8589);
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.02em;
}

.ptvr-article__author { min-width: 0; }

.ptvr-article__author-avatar {
    width: 59px;
    height: 59px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ptvr-article__author-meta { min-width: 0; gap: var(--ptv-space-1); }

.ptvr-article__author-name {
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ptvr-article__author-role {
    font-size: 14px;
    color: var(--ptv-color-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ptvr-article__share {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ptvr-article__share-link {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    color: var(--ptv-color-text-primary);
    font-size: 22px;
    text-decoration: none;
    transition: color var(--ptv-transition-fast);
}

.ptvr-article__share-link:hover,
.ptvr-article__share-link:focus-visible { color: var(--ptv-color-brand-600); }

.ptvr-article__related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ptvr-article__related-link {
    color: var(--ptv-color-text-primary);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    text-decoration: underline;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ptvr-article__related-link:hover,
.ptvr-article__related-link:focus-visible { color: var(--ptv-color-brand-600); }

/* Cards image-top: min-height 320 para silueta consistente. */
.ptvr-blog__card.ptv-card--image-top .ptv-card__body {
    min-height: 320px;
}

/* ═══════════════════════════════════════════════════════════════
 * Contact CTA "¿Necesitas ayuda?" — Figma 781:24504
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-contact-cta {
    position: relative;
    /* Padding interno para dar aire al título y card sobre el bg oscuro/imagen.
       64 px desde el master Figma + compensación visual cuando se acumula
       con margins externos en pages como inicio. Mismo valor en todos los
       consumidores (single-articulo, page-inicio, single-seguro-de-viaje-para, etc.). */
    padding-block: var(--ptv-space-16);
    padding-inline: var(--ptv-space-10);
    background-color: var(--ptv-color-neutral-950);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--ptv-color-text-inverse);
    /* Sin overflow:hidden — el dropdown del teléfono debe desbordar. */
}

/* `.ptvr-contact-cta__card` usa `backdrop-filter` (línea ~2594) que crea
   stacking context propio — atrapa el z-index del dropdown adentro y la
   siguiente sección (Trustpilot widget) lo cubre por orden DOM. Cuando el
   dropdown está abierto elevamos la SECCIÓN para que el menú quede sobre
   las secciones siguientes, pero por DEBAJO del header sticky
   (--ptv-z-sticky = 1020) y de la floatbar fija (--ptv-z-fixed = 1030):
   con --ptv-z-modal (1050) la sección tapaba el header al hacer scroll.
   --ptv-z-dropdown (1000) le gana al flujo normal sin invadir el header.
   `:has()` es soportado en todos los navegadores modernos. */
.ptvr-contact-cta:has(.ptv-dropdown--open) {
    z-index: var(--ptv-z-dropdown, 1000);
}

.ptvr-contact-cta__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.ptvr-contact-cta__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma 781:31251: gap-[80px] entre title y card. */
    gap: 80px;
}

.ptvr-contact-cta__title {
    margin: 0;
    max-width: 950px;
    color: var(--ptv-color-text-inverse);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-align: center;
}

/* Card glass — Figma master default (blog/home): 600 × 463 fijo, radius 32.
   La variante emergency (Figma 781:23962) usa 600 × 301 — la override
   abajo ajusta el min-height para evitar aire muerto. */
.ptvr-contact-cta__card {
    position: relative;
    width: min(600px, 100%);
    min-height: 463px;
    padding: var(--ptv-space-6) var(--ptv-space-8);
    border-radius: 32px;
    background: rgba(136, 136, 136, 0.15);
    backdrop-filter: blur(5px) saturate(160%);
    -webkit-backdrop-filter: blur(5px) saturate(160%);
    box-shadow:
        0 2px 30px rgba(0, 0, 0, 0.05),
        0 8px 72px -5px rgba(0, 0, 0, 0.1),
        inset 1px 0.5px 0 rgba(255, 255, 255, 0.6),
        inset -1px -1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 5px rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
}

/* Chat bubble (avatar + texto) */
.ptvr-contact-cta__chat {
    display: flex;
    align-items: flex-end;
    gap: var(--ptv-space-3);
}

.ptvr-contact-cta__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ptv-color-neutral-950);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* SVG inline (Protegetuviaje mark, viewBox 30×18). */
.ptvr-contact-cta__avatar svg {
    width: 60%;
    height: auto;
    display: block;
}

.ptvr-contact-cta__bubble {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--ptv-space-4) var(--ptv-space-5);
    background: rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    color: var(--ptv-color-text-primary);
}

.ptvr-contact-cta__team {
    margin: 0 0 var(--ptv-space-6);
    font-size: 15px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    opacity: 0.7;
}

.ptvr-contact-cta__msg {
    margin: 0 0 var(--ptv-space-3);
    font-size: 20px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.ptvr-contact-cta__msg:last-child { margin-bottom: 0; }

.ptvr-contact-cta__msg--prompt { margin-top: var(--ptv-space-10); }

/* Variante emergency (Figma 781:23962/23988) — role=heading/sub.
   Card aquí es 600 × 301 (vs 600 × 463 del default blog/home). Override
   del min-height del card-base para no dejar aire muerto en este variant. */
.ptvr-contact-cta--emergency .ptvr-contact-cta__card {
    min-height: 301px;
}
.ptvr-contact-cta__heading {
    margin: 0 0 var(--ptv-space-1);
    font-size: 20px;
    font-weight: var(--ptv-font-semibold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ptv-color-text-primary);
}

.ptvr-contact-cta__sub {
    margin: 0;
    font-size: 15px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.3;
    letter-spacing: -0.02em;
    opacity: 0.7;
}

/* Flag del botón phone (emoji). */
.ptvr-contact-cta__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.ptvr-contact-cta__actions { align-self: stretch; }

/* Botones content-sized, capados a 100%. Body shrinks + label wrap
   permite labels largos (ej. "Habla con un agente por WhatsApp" 31 chars)
   sin desbordar el arrow. */
.ptvr-contact-cta__actions > .ptv-btn--cta,
.ptvr-contact-cta__actions > .ptv-dropdown {
    width: max-content;
    max-width: 100%;
}
.ptvr-contact-cta__actions .ptv-btn__body {
    flex: 1 1 auto;
    min-width: 0;
}
.ptvr-contact-cta__actions .ptv-btn__label {
    white-space: normal;
    text-align: left;
    line-height: 1.2;
}

/* PNG con color baked-in (mismo asset que el CTA del header). */
.ptvr-contact-cta__btn-icon--wa {
    display: block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.ptvr-contact-cta__status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ptv-color-social-whatsapp);
    display: inline-block;
    flex-shrink: 0;
}

/* Phone dropdown — lista de Ajustes → Contacto. Trigger reusa ptv-btn--light --cta. */
.ptvr-contact-cta__phone-dropdown {
    position: relative;
    /* Crea stacking context propio en estado abierto y lo eleva por encima
       de la siguiente sección (footer + barra sticky del cotizador @4203,
       que vive en z-index ~1019). Sin z-index el menú quedaba atrapado
       bajo elementos de la sección posterior. */
    z-index: var(--ptv-z-fixed, 1030);
}
.ptvr-contact-cta__phone-dropdown.ptv-dropdown--open {
    z-index: var(--ptv-z-modal, 1050);
}
.ptvr-contact-cta__phone-trigger .ptv-dropdown__chevron svg {
    transition: transform var(--ptv-transition-fast);
}
.ptv-dropdown--open .ptvr-contact-cta__phone-trigger .ptv-dropdown__chevron svg {
    transform: rotate(180deg);
}
/* Icono phone — mismo tratamiento que el footer. */
.ptvr-contact-cta__phone-icon {
    color: var(--ptv-color-brand-600);
    font-size: 18px;
    line-height: 1;
}
.ptvr-contact-cta__phone-menu {
    /* Alinear al borde derecho del trigger (override del default left). */
    right: 0;
    left: auto;
    min-width: 280px;
    max-height: 208px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ptv-color-neutral-400) transparent;
    padding: var(--ptv-space-2);
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-md);
    box-shadow: var(--ptv-shadow-lg);
    z-index: var(--ptv-z-dropdown, 1000);
}
.ptvr-contact-cta__phone-menu::-webkit-scrollbar { width: 8px; }
.ptvr-contact-cta__phone-menu::-webkit-scrollbar-track { background: transparent; }
.ptvr-contact-cta__phone-menu::-webkit-scrollbar-thumb {
    background: var(--ptv-color-neutral-400);
    border-radius: var(--ptv-radius-full);
}
/* El dropdown abre SIEMPRE hacia abajo: se quitó `--automatic` en
   `contact-cta.php`, así que el kit ya no añade `--up`. Este guard deja
   la dirección explícita en todos los breakpoints (neutraliza `--up`
   por si llegara a aplicarse). El JS hace un scroll suave al abrir para
   revelar el menú cuando queda cerca del bottom del viewport. */
.ptvr-contact-cta__phone-dropdown.ptv-dropdown--up .ptvr-contact-cta__phone-menu,
.ptvr-contact-cta__phone-dropdown .ptvr-contact-cta__phone-menu {
    top: calc(100% + var(--ptv-space-2));
    bottom: auto;
}
.ptvr-contact-cta__phone-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ptv-space-3);
    padding: var(--ptv-space-3) var(--ptv-space-3);
    border-radius: var(--ptv-radius-sm);
    color: var(--ptv-color-text-primary);
    text-decoration: none;
}
.ptvr-contact-cta__phone-item:hover,
.ptvr-contact-cta__phone-item:focus-visible {
    background: var(--ptv-color-neutral-100);
    color: var(--ptv-color-text-primary);
}
.ptvr-contact-cta__phone-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ptvr-contact-cta__phone-item-name {
    font-size: 13px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.01em;
}
.ptvr-contact-cta__phone-item-display {
    font-size: 13px;
    color: var(--ptv-color-text-secondary, #6b7280);
}

/* <lg: Figma 781:29182 (mobile 390px) — specs compactos. */
@media (max-width: 991.98px) {
    /* Padding compacto: recorta section + `--loose` solo aquí. */
    .ptvr-contact-cta { padding-inline: var(--ptv-space-2); }
    .ptvr-contact-cta .ptv-container--loose { padding-inline: var(--ptv-space-2); }
    .ptvr-contact-cta__card { padding: var(--ptv-space-5); }

    .ptvr-contact-cta__avatar {
        width: 33px;
        height: 33px;
    }
    .ptvr-contact-cta__chat { gap: var(--ptv-space-2); }
    .ptvr-contact-cta__bubble {
        padding: var(--ptv-space-3) var(--ptv-space-4);
        border-radius: 16px;
    }
    .ptvr-contact-cta__team {
        margin-bottom: var(--ptv-space-4);
        font-size: 12px;
    }
    .ptvr-contact-cta__msg {
        font-size: 18px;
        line-height: 1.25;
        letter-spacing: -0.02em;
    }
    .ptvr-contact-cta__msg--prompt { margin-top: var(--ptv-space-6); }

    .ptvr-contact-cta__actions > .ptv-btn--cta {
        --_btn-font-size: 16px;
        --_btn-pad-x:     var(--ptv-space-3);   /* 12px */
        --_btn-pad-y:     var(--ptv-space-2);   /*  8px */
        --_btn-radius:    10px;
        min-height: 49px;
    }
    .ptvr-contact-cta__btn-icon--wa { width: 32px; height: 32px; }
}

/* <576px: font 14px para que el botón largo + arrow entre en el card. */
@media (max-width: 575.98px) {
    .ptvr-contact-cta__actions > .ptv-btn--cta {
        --_btn-font-size: 14px;
        --_btn-pad-x:     var(--ptv-space-2);   /* 8px */
    }
    .ptvr-contact-cta__btn-icon--wa { width: 28px; height: 28px; }
}

/* ═══════════════════════════════════════════════════════════════
 * Reduced motion
 * ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ptvr-header,
    .ptvr-header__pill,
    .ptvr-mm,
    .ptvr-mm__scroll,
    .ptvr-mm__ctas,
    .ptvr-mm__chevron,
    .ptvr-mm__panel {
        transition: none !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * SINGLE SEGURO-DE-VIAJE-PARA — Figma 781:23783
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-insurance { background: var(--ptv-color-bg-surface); }

/* Padding por bloque — Figma 781:23714/23783: py-100 simétrico. Usamos
   space-24 (96px) por ser el token más cercano. No afecta a Trustpilot
   ni `.ptvr-contact-cta` (componentes propios con padding propio). */
.ptvr-insurance__section {
    padding-block: var(--ptv-space-24);
}
.ptvr-insurance__title-block {
    /* Figma master de los `bloxk text` (e.g. 781:23750/23753/23755): py-100.
       El kit no tiene space-25; usamos literal 100 para pixel-perfect. */
    padding-block: 100px;
}
.ptvr-insurance__carousel-section,
.ptvr-insurance__grid-section {
    /* Top más tight (16) que bottom (24): el title-block ya aporta su
       propio 24 inferior, así que un top adicional 16 = total ~40px de
       respiro entre el bloque "header solo" y el de contenido — coherente
       con el `gap-[40px]` interno que el Figma usa entre title y lead.
       Bottom 24 cierra el bloque antes del siguiente CTA/sección. */
    padding-block: var(--ptv-space-16) var(--ptv-space-24);
}
.ptvr-insurance__cta-strip,
.ptvr-insurance__cta-wa-section {
    padding-block: var(--ptv-space-10);
}

/* `#planes` (dark) replica los paddings de `.ptvr-related`: title-block
   64/0, carousel-section 80/64. Sin esto el gap title→carousel quedaba
   en 160 (96+64) en lugar del 80 deseado. */
#planes .ptvr-insurance__title-block {
    padding-block: var(--ptv-space-16) 0;       /* 64 / 0 */
}
#planes .ptvr-insurance__carousel-section {
    padding-block: var(--ptv-space-20) var(--ptv-space-16);   /* 80 / 64 */
}
@media (max-width: 767.98px) {
    .ptvr-insurance__section,
    .ptvr-insurance__title-block { padding-block: var(--ptv-space-16); }
    .ptvr-insurance__carousel-section,
    .ptvr-insurance__grid-section { padding-block: var(--ptv-space-10) var(--ptv-space-16); }
    .ptvr-insurance__cta-strip,
    .ptvr-insurance__cta-wa-section { padding-block: var(--ptv-space-8); }
}

/* Nosotros: en mobile y tablet baja el padding-block (96 base) a 48 para
   eliminar el exceso de blanco entre secciones. Scoped a `.ptvr-nos` para
   no tocar otras pages que comparten `.ptvr-insurance__section`. */
@media (max-width: 991.98px) {
    .ptvr-nos .ptvr-insurance__section,
    .ptvr-nos .ptvr-insurance__title-block {
        padding-block: var(--ptv-space-12);
    }
}

/* "¿Cuánto cuesta…?" — tabla más pegada al título. */
.ptvr-insurance__title-block#precios { padding-bottom: var(--ptv-space-8); }
.ptvr-insurance__prices { padding-top: var(--ptv-space-4); }

/* Grupo con fondo unificado (ej. "¿Cómo contratar?" sobre neutral-200, Figma 781:23834). */
.ptvr-insurance__group { padding-block: 0; }
.ptvr-insurance__group--gray { background: var(--ptv-color-neutral-200); }

/* Variante dark — "Planes de seguro" (Figma instance y=4014). */
.ptvr-insurance__group--dark {
    background: var(--ptv-color-neutral-950);
    color: var(--ptv-color-text-inverse);
    padding-block: 0;
}
/* `margin-bottom: --ptv-space-16` (64px) = gap header→grid cuando ambos
   conviven en un mismo `<section>`. `gap: --ptv-space-10` (40px) entre
   title y lead = `gap-[40px]` del Figma en bloxk text 2/3/4. */
.ptvr-insurance__section-header { text-align: center; max-width: 820px; margin-inline: auto; margin-bottom: var(--ptv-space-16); gap: var(--ptv-space-10); }

.ptvr-insurance__h2 {
    margin: 0;
    color: var(--ptv-color-text-primary);
    /* Figma master: 52 px / lh 1.1 / tracking -0.04em. Escala fluida hasta 52. */
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
}
.ptvr-insurance__h2--center { text-align: center; }
.ptvr-insurance__h2--wide { max-width: 910px; margin-inline: auto; }
/* --inverse DEBE venir después del h2 base por orden de cascade. */
.ptvr-insurance__h2--inverse { color: var(--ptv-color-text-inverse); }

/* Prose — body 18px, leading loose. */
.ptvr-insurance__prose {
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b2);
    line-height: var(--ptv-leading-loose);
    letter-spacing: var(--ptv-tracking-tight);
}
.ptvr-insurance__prose p { margin: 0 0 var(--ptv-space-5); }
.ptvr-insurance__prose ul,
.ptvr-insurance__prose ol { margin: 0 0 var(--ptv-space-5) var(--ptv-space-5); }
.ptvr-insurance__prose li + li { margin-top: var(--ptv-space-2); }
.ptvr-insurance__prose a { color: var(--ptv-color-brand-600); text-decoration: underline; }
.ptvr-insurance__prose--narrow { max-width: 920px; margin-inline: auto; }
.ptvr-insurance__prose--center { text-align: center; }

/* Headings WYSIWYG dentro del prose — replican la jerarquía de
   `.ptvr-insurance__h2/__h3`. `:first-child` cancela margin-top para no
   acumular con el padding-top de la sección. */
.ptvr-insurance__prose h2 {
    margin: var(--ptv-space-8) 0 var(--ptv-space-4);
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
}
.ptvr-insurance__prose h3 {
    margin: var(--ptv-space-6) 0 var(--ptv-space-3);
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-h4);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}
.ptvr-insurance__prose h4 {
    margin: var(--ptv-space-5) 0 var(--ptv-space-2);
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b1);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}
.ptvr-insurance__prose > h2:first-child,
.ptvr-insurance__prose > h3:first-child,
.ptvr-insurance__prose > h4:first-child {
    margin-top: 0;
}

/* ── Media genérico (hero / split) — imagen 670×680 con radius 32 + overlay
   rgba(0,0,0,0.2) (Figma 781:23800 y todos los content-right del template). ── */
.ptvr-insurance__media {
    position: relative;
    width: 100%;
    aspect-ratio: 670 / 680;
    border-radius: var(--ptv-radius-3xl);     /* 32px */
    overflow: hidden;
    background: var(--ptv-color-neutral-200);
}
.ptvr-insurance__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Overlay uniforme sobre todas las imágenes del template (Figma master). */
.ptvr-insurance__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    border-radius: inherit;
}

/* ── Hero ─────────────────────────────────────────────────── */
/* Figma 781:23785: pt-51 / pb-100. */
.ptvr-insurance__hero {
    padding-block: 51px 100px;
}
.ptvr-insurance__hero-grid {
    align-items: center;
    /* Figma: content gap-[20px] entre las 2 cols. Override del `--gap-lg`
       del kit. */
    column-gap: var(--ptv-space-5);
}
/* Figma — gap title→body→ctas = 40px (space-10). */
.ptvr-insurance__hero-intro { gap: var(--ptv-space-10); }
@media (max-width: 991.98px) {
    .ptvr-insurance__hero-grid { grid-template-columns: 1fr; }
    .ptvr-insurance__hero-intro { min-width: 0; order: 0; }
    .ptvr-insurance__hero .ptvr-insurance__media { order: 1; }
}

.ptvr-insurance__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    /* Figma 781:23788: 52px / lh 1.1 / tracking -0.04em. */
    font-size: clamp(36px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
}

/* Destino acentuado en brand (Figma: última palabra del H1 en rojo). */
.ptvr-insurance__title-accent { color: var(--ptv-color-brand-600); }

.ptvr-insurance__lead {
    margin: 0;
    max-width: 540px;
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: var(--ptv-tracking-tight);
    color: var(--ptv-color-text-primary);
}

/* CTA WhatsApp — ptv-btn--filled con icono PNG (color baked-in).
   Figma 781:23792 master: h 48 / r 8 / px 10-20 / gap 8 / 14px semibold. */
.ptvr-insurance__cta-wa {
    --_btn-radius: 8px;
    height: 48px;
    padding-inline: var(--ptv-space-3) var(--ptv-space-5);   /* 10 / 20 */
    gap: var(--ptv-space-2);                                  /* 8 */
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.02em;
    /* Permite wrap si el viewport es muy estrecho. */
    white-space: normal;
    text-align: left;
}

.ptvr-insurance__cta-wa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    line-height: 1;
}

.ptvr-insurance__cta-wa-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* "Calcula tu seguro" — ptv-btn--outline con border neutral-950 (default del kit es gris).
   Figma 781:23798 master: h 48 / r 8 / px 20 / 14px semibold. */
.ptvr-insurance__cta-outline {
    --_btn-radius: 8px;
    --_btn-border: var(--ptv-color-neutral-950);
    height: 48px;
    padding-inline: var(--ptv-space-5);
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.02em;
}

/* <lg: CTAs compactos (Figma mobile 781:29119) para que el WhatsApp largo entre en 1 línea. */
@media (max-width: 991.98px) {
    .ptvr-insurance__cta-wa,
    .ptvr-insurance__cta-outline {
        height: auto;
        min-height: 40px;
        font-size: 13px;
    }
    .ptvr-insurance__cta-wa {
        padding-inline: var(--ptv-space-1) var(--ptv-space-3);
        gap: var(--ptv-space-2);
    }
    .ptvr-insurance__cta-outline {
        padding-inline: var(--ptv-space-3);
    }
    .ptvr-insurance__cta-wa-badge {
        width: 28px;
        height: 28px;
    }
    .ptvr-insurance__cta-wa-icon {
        width: 20px;
        height: 20px;
    }
}

.ptvr-insurance__inline-cta {
    --_btn-radius: 10px;
    align-self: flex-start;
}

/* Tab-chips sticky con scroll-spy. JS lee --ptvr-chip-top. */
.ptvr-insurance { --ptvr-chip-top: 72px; }

/* <lg: bajamos chip-nav a 142px (header 0-76 + cotizador floating 84-134 + 8). */
@media (max-width: 991.98px) {
    .ptvr-insurance { --ptvr-chip-top: 142px; }
}

.ptvr-insurance__chips-section {
    position: sticky;
    top: var(--ptvr-chip-top);
    /* Z por debajo del cotizador (que está a `sticky - 1 = 1019`) y
       del header global (`sticky = 1020`). Va a `sticky - 3` para
       dejar espacio explícito a `sticky - 2` por si necesitamos
       insertar otro nivel intermedio en el futuro. */
    z-index: calc(var(--ptv-z-sticky) - 3);
    padding-block: var(--ptv-space-3);
    /* Margin-bottom da aire entre el bar y la siguiente sección (group gray
       en este template). El bar sticky mantiene su altura compacta al pinear;
       el margin solo afecta cómo respira respecto al bloque que viene debajo. */
    margin-bottom: var(--ptv-space-6);
    background: var(--ptv-color-bg-surface);
    transition: box-shadow var(--ptv-transition-base);
}

/* JS sentinel añade `--pinned` cuando el bar queda sticky. */
.ptvr-insurance__chips-section--pinned {
    box-shadow: var(--ptv-shadow-sm);
}

/* Centrado "safe": centra si caben, fallback start si desbordan. */
.ptvr-insurance__chips {
    justify-content: safe center;
}

/* scroll-margin para no esconder targets bajo la barra sticky. JS actualiza --ptvr-scroll-offset. */
.ptvr-insurance [id] {
    scroll-margin-top: var(--ptvr-scroll-offset, calc(var(--ptvr-chip-top) + var(--ptv-space-16)));
}
.ptvr-insurance__chip.ptv-btn {
    --_btn-radius: var(--ptv-radius-lg);
    height: 41px;
    font-size: 14px;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ── Split bloque (img+texto / texto+img-reverse) ─────────── */
/* Figma 781:23823 (split #3) y 781:23924 (split #11): pt-120 / pb-100 / px-40.
   El kit no tiene space-30 (max es space-24 = 96), usamos literales para
   no perder los valores exactos de Figma. */
.ptvr-insurance__split {
    padding-block: 120px 100px;
}
.ptvr-insurance__split-grid {
    align-items: center;
    /* Figma: content gap-[50px] entre las 2 cols. Override del `--gap-lg`. */
    column-gap: 50px;
}
/* Figma 781:23783 — gap title→body→cta = 40px (space-10). */
.ptvr-insurance__split-text { gap: var(--ptv-space-10); }
@media (max-width: 991.98px) {
    .ptvr-insurance__split-grid { grid-template-columns: 1fr; }
    .ptvr-insurance__split-text { min-width: 0; }
    .ptvr-insurance__split .ptvr-insurance__media { order: 1; }
    .ptvr-insurance__split-text { order: 0; }
}

.ptvr-insurance__split--reverse .ptvr-insurance__media { order: 2; }
.ptvr-insurance__split--reverse .ptvr-insurance__split-text { order: 1; }
@media (max-width: 991.98px) {
    .ptvr-insurance__split--reverse .ptvr-insurance__media { order: 1; }
    .ptvr-insurance__split--reverse .ptvr-insurance__split-text { order: 0; }
}

/* ═══════════════════════════════════════════════════════════════
 * REVEAL BLOCK · template-parts/components/reveal.php
 * Pin & scrub con scroll-driven animations. Fallback mobile: stacked.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-reveal {
    background: var(--ptv-color-bg-surface);
    padding-bottom: var(--ptv-space-24);
}

/* Estado base (mobile-first / fallback): sin pin, layout stacked. */
.ptvr-reveal__pin    { position: relative; }
.ptvr-reveal__pinned { position: relative; padding-block: var(--ptv-space-16); }

/* Mobile: flujo normal. Desktop: absolute sobre la imagen (fade-out con scroll). */
.ptvr-reveal__title-block {
    position: relative;
    z-index: 3;
    max-width: 820px;
    margin-inline: auto;
    padding: var(--ptv-space-16) var(--ptv-space-5) var(--ptv-space-12);
    text-align: center;
}

.ptvr-reveal__eyebrow {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: var(--ptv-text-c1);
    font-weight: var(--ptv-font-semibold);
    letter-spacing: var(--ptv-tracking-normal);
    text-transform: uppercase;
}

.ptvr-reveal__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
    max-width: 910px;
}

.ptvr-reveal__lead {
    margin: 0;
    max-width: 588px;
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-medium);
    color: var(--ptv-color-text-primary);
    line-height: var(--ptv-leading-normal);
    letter-spacing: var(--ptv-tracking-tight);
}

/* Layout: estado base mobile-friendly (1 columna, imagen first). */
.ptvr-reveal__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-8);
    align-items: center;
    max-width: 1320px;
    margin-inline: auto;
}

.ptvr-reveal__col {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
    min-width: 0;
}

.ptvr-reveal__media-anchor {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 417 / 570;
    margin-inline: auto;
    order: -1;
}

.ptvr-reveal__media {
    /* Estado final/fallback (Figma 781:23910): cápsula 417×570 con radius 200px. */
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 417 / 570;
    border-radius: 200px;
    overflow: hidden;
    background: var(--ptv-color-neutral-200);
    margin: 0 auto;
    order: -1;
}
.ptvr-reveal__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ptvr-reveal__item {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    width: 100%;
}

.ptvr-reveal__item-title {
    margin: 0;
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}

.ptvr-reveal__item-body {
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}
.ptvr-reveal__item-body p { margin: 0 0 var(--ptv-space-3); }

.ptvr-reveal__item-bullets {
    margin: 0;
    padding-inline-start: var(--ptv-space-5);
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}
.ptvr-reveal__item-bullets li + li { margin-top: var(--ptv-space-1); }

/* Variante "titles": items son solo títulos, estilo statement brand-red. */
.ptvr-reveal--titles .ptvr-reveal__item {
    padding-bottom: var(--ptv-space-5);
    border-bottom: 1px dashed var(--ptv-color-border, var(--ptv-color-neutral-400));
}
.ptvr-reveal--titles .ptvr-reveal__item-title {
    color: var(--ptv-color-brand-600);
    font-size: clamp(var(--ptv-text-b2), 2vw, var(--ptv-text-h4));
    font-weight: var(--ptv-font-semibold);
}

/* Variante "rich": title + body/bullets. Título neutral, sin divider. */
.ptvr-reveal--rich .ptvr-reveal__item-title {
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-h5);
    font-weight: var(--ptv-font-semibold);
}

/* <992: cols con `display: contents` para que items vivan en el grid + order var. */
@media (max-width: 991.98px) {
    .ptvr-reveal__media,
    .ptvr-reveal__media-anchor { display: none; }
    .ptvr-reveal__col { display: contents; }
    .ptvr-reveal__item { order: var(--idx, 0); }
}

/* Tablet (768–991): 2 cols con stretch para igualar alturas (dividers alineados). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ptvr-reveal__layout {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ptv-space-10);
        align-items: stretch;
    }
    /* min-height común — grid-auto-rows: 1fr no funciona aquí. */
    .ptvr-reveal__item {
        min-height: 260px;
    }
    /* Excepción: #cobertura (single-seguro-de-viaje-para) se apila 1-col
       en tablet, igual que mobile. Items sin min-height para no dejar gaps. */
    #cobertura.ptvr-reveal .ptvr-reveal__layout {
        grid-template-columns: 1fr;
    }
    #cobertura.ptvr-reveal .ptvr-reveal__item {
        min-height: 0;
    }
}

/* <lg: en #cobertura quita el divider del último item (no tiene nada
   debajo, el dashed queda colgando). El selector :last-child funciona
   porque al apilar (cols con display:contents) el último DOM es el
   último visual — los `--idx` se asignan en orden DOM. */
@media (max-width: 991.98px) {
    #cobertura.ptvr-reveal .ptvr-reveal__layout > .ptvr-reveal__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* ── Desktop: layout 3-col (items | media | items) ─────────── */
@media (min-width: 992px) {
    .ptvr-reveal__pinned { padding-block: var(--ptv-space-20); }
    .ptvr-reveal__layout {
        grid-template-columns: 1fr auto 1fr;
        gap: var(--ptv-space-10);
    }
    .ptvr-reveal__col--left  { text-align: right; align-items: flex-end; }
    .ptvr-reveal__col--right { text-align: left;  align-items: flex-start; }
    .ptvr-reveal__col--left  .ptvr-reveal__item { align-items: flex-end;   text-align: right; max-width: 360px; }
    .ptvr-reveal__col--right .ptvr-reveal__item { align-items: flex-start; text-align: left;  max-width: 360px; }
    .ptvr-reveal__media-anchor {
        width: 417px;
        max-width: 417px;
        order: 0;
    }
    .ptvr-reveal__media {
        max-width: 417px;
        width: 417px;
        order: 0;
    }
}

/* Pin & scrub desktop: __pin 180vh + sticky 100vh + view-timeline scrubber. */
@media (min-width: 992px) {
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {

            .ptvr-reveal__pin {
                height: 180vh;
                view-timeline-name: --ptvr-reveal;
            }

            .ptvr-reveal__pinned {
                position: sticky;
                top: 0;
                height: 100vh;
                padding-block: 0;
                display: grid;
                place-items: center;
                overflow: hidden;
            }

            .ptvr-reveal__body {
                position: relative;
                z-index: 1;
                align-self: center;
            }

            /* Media absolute centrado, +10vh para clearance del header+chips. */
            .ptvr-reveal__media {
                position: absolute;
                top: calc(50% + 10vh);
                left: 50%;
                transform: translate(-50%, -50%);
                width: 417px;
                height: 570px;
                max-width: none;
                aspect-ratio: auto;
                margin: 0;
                z-index: 2;
                will-change: width, height, border-radius;
                animation: ptvr-reveal-morph linear both;
                animation-timeline: --ptvr-reveal;
                animation-range: cover 36% cover 50%;
            }
            @keyframes ptvr-reveal-morph {
                from {
                    width: 100%;
                    height: 100%;
                    border-radius: 0;
                }
            }

            /* Items fade-in cuando termina el morph. */
            .ptvr-reveal__item {
                animation: ptvr-reveal-item-in linear both;
                animation-timeline: --ptvr-reveal;
                animation-range: cover 50% cover 60%;
            }
            @keyframes ptvr-reveal-item-in {
                from { opacity: 0; transform: translateY(28px); }
            }
        }
    }
}

/* "Planes de seguro de viaje para ir a X" — usa `.ptvr-related__card*`
   (ver bloque más abajo). Aquí solo overrides del carrusel: spotlight
   responsive y desc en mobile. */

/* Tablet (641–991): fuerza estética mobile del carrusel `--spotlight` (el kit lo pasa a desktop a 641px). */
@media (min-width: 641px) and (max-width: 991.98px) {
    .ptv-carousel--spotlight {
        display: block;
        grid-template-columns: none;
        column-gap: 0;
        --_slide-w: 75vw;
        padding-bottom: var(--ptv-space-4);
        overflow: hidden;
    }
    .ptv-carousel--spotlight .ptv-carousel__slide {
        opacity: 0.55;
        filter: none;
        transform: scale(0.88) translateY(12px);
        z-index: 1;
    }
    .ptv-carousel--spotlight .ptv-carousel__slide.is-active {
        opacity: 1;
        filter: none;
        transform: scale(1) translateY(0);
        z-index: 10;
    }
    .ptv-carousel--spotlight .ptv-carousel__viewport {
        grid-column: auto;
        grid-row: auto;
        overflow: hidden;
    }
    .ptv-carousel--spotlight .ptv-carousel__controls {
        display: flex;
        justify-content: center;
        gap: var(--ptv-space-3);
        margin-top: var(--ptv-space-6);
    }
    .ptv-carousel--spotlight .ptv-carousel__btn--prev,
    .ptv-carousel--spotlight .ptv-carousel__btn--next {
        grid-column: auto;
        grid-row: auto;
    }
}

/* Statement block — Figma 781:23902. */
.ptvr-insurance__statement-wrap { max-width: 1180px; margin-inline: auto; text-align: center; gap: var(--ptv-space-10); }
.ptvr-insurance__statement-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4.5vw, 57px);    /* escala fluida: h2-xs → +10% h1 */
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
    max-width: 1180px;
}

/* Cost list — bullet brand + nombre brand-bold + valor text-primary. */
.ptvr-insurance__cost-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ptvr-insurance__cost-item {
    position: relative;
    padding-left: var(--ptv-space-5);
    padding-block: var(--ptv-space-1);
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b3);           /* 16px */
    line-height: var(--ptv-leading-normal);
}
.ptvr-insurance__cost-item::before {
    content: '\2022';                        /* • */
    position: absolute;
    left: var(--ptv-space-1);
    color: var(--ptv-color-brand-600);
    font-weight: var(--ptv-font-semibold);
}
.ptvr-insurance__cost-name {
    color: var(--ptv-color-brand-600);
    font-weight: var(--ptv-font-semibold);
}
.ptvr-insurance__cost-value { color: var(--ptv-color-text-primary); }

/* ── Carrusel (planes / garantías) ────────────────────────── */
.ptvr-insurance__carousel { width: 100%; }

.ptvr-insurance__step,
.ptvr-insurance__warranty {
    height: 100%;
    /* Figma 781:23847 (pasos) y 781:23945 (garantías): rounded-[12px].
       Override del default del kit (`--_card-radius: --radius-3xl` = 32). */
    --_card-radius: var(--ptv-radius-lg);
}

/* Step card — Figma 781:23847: w 425 / radius 12 / p-24 / gap 40 entre
   "Paso N" y body. Min-height 304 (card en Figma h=304). */
.ptvr-insurance__step-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ptv-space-10);
    min-height: 304px;
    padding: var(--ptv-space-6);
}

/* Warranty card — Figma 781:23945 (instance del mismo master que pasos).
   Mismo patrón que step sin número de paso. */
.ptvr-insurance__warranty-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--ptv-space-10);
    min-height: 304px;
    padding: var(--ptv-space-6);
}

.ptvr-insurance__step-num {
    margin: 0;
    /* Figma 781:23849: 32px semibold lh 1.1 tracking -1.28 (-0.04em). */
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--ptv-color-text-primary);
}

.ptvr-insurance__step-text,
.ptvr-insurance__warranty-text {
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b3);            /* 16px */
    line-height: var(--ptv-leading-normal);
}

/* El ptv-card__body ya trae padding del kit; en el step lo dejamos en mano
   nuestra porque queremos más espacio y alineaciones específicas. */
.ptvr-insurance__step .ptv-card__body { padding: var(--ptv-space-6); }

.ptvr-insurance__warranty-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b1);            /* 20px */
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}

/* Tips / consejos — Figma 781:23783. */
.ptvr-insurance__tips { padding-block: var(--ptv-space-16) calc(var(--ptv-space-24) + var(--ptv-space-4)); }
.ptvr-insurance__tips-stack { max-width: 695px; margin-inline: auto; gap: var(--ptv-space-20); }
.ptvr-insurance__tip { gap: var(--ptv-space-10); }
.ptvr-insurance__tip-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-h5);            /* 22px */
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}

/* FAQ — Figma 781:23783. Usa ptv-accordion del kit. */
.ptvr-insurance__faq-header {
    max-width: 820px;
    margin-inline: auto;
    margin-bottom: var(--ptv-space-12);
    text-align: center;
}

.ptvr-insurance__faq-accordion {
    max-width: 980px;
    margin-inline: auto;
}

.ptvr-insurance__faq-cta { margin-top: var(--ptv-space-10); }

/* ═══════════════════════════════════════════════════════════════
 * TRUSTPILOT REVIEWS — [tp_reviews_carousel] · Figma 781:23993
 * Trustpilot green #00B67A es hardcoded (no es token del kit).
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-tp-reviews {
    /* Padding interno del wrapper para aire al header + carousel sobre el
       bg gris-surface. Mismo valor en todos los consumidores. */
    padding-block: var(--ptv-space-16);
    background: var(--ptv-color-bg-surface);
}

/* max-width 1560 = carousel 1320 + flechas externas (240 total). */
.ptvr-tp-reviews__wrap {
    max-width: 1560px;
    margin-inline: auto;
    text-align: center;
    /* Figma 781:31247: gap-[80px] entre header → carousel → CTA. */
    gap: 80px;
}

.ptvr-tp-reviews__header {
    gap: var(--ptv-space-8);
}

/* Badges flush sin gap. */
.ptvr-tp-reviews__badge {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

/* ── Título y subtítulo ────────────────────────────────────── */
.ptvr-tp-reviews__title {
    margin: 0;
    max-width: 950px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--ptv-color-text-primary);
}

.ptvr-tp-reviews__subtitle {
    margin: 0;
    max-width: 502px;
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ptv-color-text-primary);
}

/* Carousel — el kit `--spotlight` arma grid [prev] [viewport] [next]. */
.ptvr-tp-reviews__carousel {
    width: 100%;
    max-width: 1320px;
}

/* Reserva altura mientras llega el AJAX — coincide con min-height del card body para evitar CLS. */
.ptvr-tp-reviews__carousel .ptv-carousel__viewport {
    min-height: 412px;
}
@media (max-width: 640px) {
    .ptvr-tp-reviews__carousel .ptv-carousel__viewport {
        min-height: 320px;
    }
}

/* Figma 781:31247 desktop: active 424×412, laterales scale 0.85 +
   opacity 0.45 + blur 1.6. Override solo desktop — tablet (≥641 & ≤991)
   ya tiene su 75vw slide arriba. */
@media (min-width: 992px) {
    .ptvr-tp-reviews__carousel {
        --_slide-w: 424px;
    }
    .ptvr-tp-reviews__carousel.ptv-carousel--spotlight .ptv-carousel__slide {
        opacity: 0.45;
        filter: blur(1.6px);
        transform: scale(0.85) translateY(0);
    }
    .ptvr-tp-reviews__carousel.ptv-carousel--spotlight .ptv-carousel__slide.is-active {
        opacity: 1;
        filter: none;
        transform: scale(1) translateY(0);
    }
}

/* Review card (compose sobre ptv-card del kit) */
.ptvr-tp-review { height: 100%; }

.ptvr-tp-review__body {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
    text-align: left;
    min-height: 412px;
}

.ptvr-tp-review__rating {
    display: flex;
    gap: 2px;
}

.ptvr-tp-review__star {
    width: 22px;
    height: 22px;
    background: #00B67A;                      /* Trustpilot brand */
    border-radius: 2px;
    position: relative;
}

.ptvr-tp-review__star::after {
    content: "★";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--ptv-color-base-white);
    font-size: 15px;
    line-height: 1;
}

.ptvr-tp-review__star--empty {
    background: var(--ptv-color-neutral-400);
}

.ptvr-tp-review__text {
    margin: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--ptv-color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ptvr-tp-review__author {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
    padding-top: var(--ptv-space-3);
    border-top: 1px solid var(--ptv-color-border-subtle, var(--ptv-color-neutral-400));
}

.ptvr-tp-review__avatar {
    width: 42px;
    height: 42px;
    border-radius: var(--ptv-radius-full);
    background: var(--ptv-color-neutral-400);
    color: var(--ptv-color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ptv-font-semibold);
    font-size: 16px;
    flex-shrink: 0;
}

.ptvr-tp-review__author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ptvr-tp-review__name {
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
}

.ptvr-tp-review__sub {
    font-size: 12px;
    color: var(--ptv-color-text-secondary);
}

/* ── CTA inferior — usa ptv-btn--filled + ptv-btn--cta del kit.
      Aquí solo fijamos el border-radius Figma (10px) y la tipografía. */
.ptvr-tp-reviews__cta {
    --_btn-radius: 10px;
    font-size: 16px;
    letter-spacing: -0.02em;
}

/* ── Responsive ────────────────────────────────────────────── */
/* <lg: padding-top 80 para separar del bloque-scroll (que no tiene pb en mobile). */
@media (max-width: 991.98px) {
    .ptvr-tp-reviews { padding-block: var(--ptv-space-20) var(--ptv-space-12); }
}
@media (max-width: 767.98px) {
    .ptvr-tp-review__body { min-height: 320px; }
    .ptvr-tp-review__star { width: 18px; height: 18px; }
    .ptvr-tp-review__star::after { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
 * RELATED CONTENT · related-content.php (Figma 781:31248)
 * Anatomía: divider · media · divider · content (sin gap).
 * Source of truth de "contenidos relacionados" en home, singles y
 * page-templates — incluye "Planes de seguro de viaje para ir a X".
 * NO confundir con `.ptvr-insurance__plan*` (Coberturas single-seguro).
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-related {
    /* Figma master: bg dark + overflow-clip. Padding interno del wrapper
       para aire al header + carousel sobre el bg oscuro. Mismo valor en
       todos los consumidores (single-seguro-de-viaje-para, page-inicio,
       y las demás 13 páginas que usan el partial). */
    background: var(--ptv-color-neutral-950, #06151e);
    color: var(--ptv-color-text-inverse);
    padding-block: var(--ptv-space-16);
    overflow: clip;
}

.ptvr-related__inner {
    /* Figma: flex-col + items-center + gap-80 (header → carousel) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.ptvr-related__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-5);   /* gap interno header — pequeño */
    text-align: center;
}

.ptvr-related__title {
    margin: 0;
    /* Figma: 42 px semibold / lh 1.05 / tracking -1.68 / w 583 / center */
    max-width: 583px;
    color: var(--ptv-color-text-inverse);
    font-family: var(--ptv-font-sans);
    font-size: clamp(28px, 4.2vw, 42px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.ptvr-related__subtitle {
    margin: 0;
    /* Figma master no lleva subtitle; este es opt-in editorial. */
    max-width: 720px;
    color: var(--ptv-color-text-inverse);
    opacity: 0.85;
    font-size: var(--ptv-text-b2, 18px);
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.02em;
}

/* Carousel ── usa el kit `--marquee`. slide-w 379 (Figma). */
.ptvr-related__carousel {
    width: 100%;
}

@media (min-width: 992px) {
    .ptvr-related__carousel {
        --_slide-w: 379px;
    }
}

/* Arrows abajo del track, gap 12 (Figma master). margin-top 0 para que
   el `gap: 80` del __inner ya lo cubra; controls del kit deben estar
   centrados. */
.ptvr-related__carousel .ptv-carousel__controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: var(--ptv-space-6, 24px);
}

/* Buttons prev/next — bg gris claro, h 49 w 50 r 12 / arrow 27. */
.ptvr-related__carousel .ptv-carousel__btn--prev,
.ptvr-related__carousel .ptv-carousel__btn--next {
    background: #eeefef;
    color: var(--ptv-color-neutral-950, #06151e);
    height: 49px;
    width: 50px;
    border-radius: 12px;
    border: 0;
    cursor: pointer;
}
.ptvr-related__carousel .ptv-carousel__btn--prev[disabled],
.ptvr-related__carousel .ptv-carousel__btn--prev[aria-disabled="true"],
.ptvr-related__carousel .ptv-carousel__btn--next[disabled],
.ptvr-related__carousel .ptv-carousel__btn--next[aria-disabled="true"] {
    opacity: 0.3;
    cursor: default;
}


/* CARD — compone sobre `ptv-card --image-top --bg-white`. Overrides al
   Figma 781:31248: slide 379, radius 24, image 242h, body 232h. El resto
   (overlay, ticket, padding) viene del kit. */

/* Slide width Figma. Especificidad (.ptv-carousel.ptv-carousel--marquee.ptvr-related__carousel)
   para ganarle al default del kit (.ptv-carousel.ptv-carousel--marquee = 320px). */
@media (min-width: 992px) {
    .ptv-carousel.ptv-carousel--marquee.ptvr-related__carousel {
        --_slide-w: 379px;
    }
}

/* Override del radius global del card 32 → 24 (Figma). Aplica a image,
   body y al margin-inline del divider (el kit usa `--_card-radius` en
   los 3 lugares). */
.ptvr-related__card {
    --_card-radius: 24px;
    height: 100%;
}

/* Image — Figma 242 h. Sustituye el aspect-ratio default del kit. */
.ptvr-related__card .ptv-card__image {
    height: 242px;
    flex: 0 0 242px;
}
.ptvr-related__card .ptv-card__image img {
    aspect-ratio: auto;
    height: 100%;
}


/* Body — Figma 232 h. Padding del kit (28 / mobile 20). CTA queda
   left-aligned con margin-top:auto para anclarse al borde inferior. */
.ptvr-related__card-body {
    min-height: 232px;
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
    color: var(--ptv-color-neutral-950);
}

/* Description — Figma 14 px regular, ancho 304, max 4 líneas. */
.ptvr-related__card-desc {
    margin: 0;
    width: 100%;
    max-width: 304px;
    color: var(--ptv-color-neutral-950);
    font-size: 14px;
    font-weight: var(--ptv-font-regular);
    line-height: 1.4;
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* CTA — radius 10 (Figma). align-self:flex-start = pegado a la izquierda
   del body, anclado al borde inferior via margin-top:auto. */
.ptvr-related__card-cta {
    --_btn-radius: 10px;
    align-self: flex-start;
    margin-top: auto;
}

/* Responsive — desktop pixel-perfect; <lg matchea las dimensiones del
   carrusel de blog en inicio (`.ptvr-inicio-blog__carousel`) para que
   ambas secciones se vean idénticas en mobile y tablet. */
@media (max-width: 991.98px) {
    .ptvr-related {
        padding-block: var(--ptv-space-16);
    }
    .ptvr-related__inner {
        gap: var(--ptv-space-10);
    }
    /* Mismo slide-w que `.ptvr-inicio-blog__carousel` (theme.css:7485-7488). */
    .ptv-carousel.ptv-carousel--marquee.ptvr-related__carousel {
        --_slide-w: min(332px, 85vw);
    }
    /* Body: mismo min-height, padding y gap que el blog card en <lg
       (theme.css:1985-1995) para igualar la altura visual. */
    .ptvr-related__card-body {
        min-height: 232px;
        padding: var(--ptv-space-7);
        gap: var(--ptv-space-3);
    }
}


/* Razones (single-seguro-viaje): cards radius alineado con ¿Qué cubre?
   (`.ptvr-insurance__step` = 12). El kit default es 32. */
#razones .ptv-card-grid__card {
    --_card-radius: var(--ptv-radius-lg);
}


/* ═══════════════════════════════════════════════════════════════
 * PLANS · "Coberturas" en single-seguro-viaje (Figma 781:23754)
 * ═══════════════════════════════════════════════════════════════ */

/* Figma 781:23754 master: bg white, pt-100 pb-200 px-60. */
.ptvr-insurance__plans {
    padding-block: 100px 200px;
}

/* Figma: gap-17 entre las 3 cards. */
.ptvr-insurance__plans-grid {
    align-items: stretch;
    column-gap: 17px;
    row-gap: 17px;
}

/* Override del radius del card (kit 32 → 16 Figma). */
.ptvr-insurance__plan-card {
    height: 100%;
    --_card-radius: var(--ptv-radius-xl);   /* 16 */
}

/* Figma: card body p-32 con gap-48 entre top-wrapper → items → price → btn. */
.ptvr-insurance__plan-body {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-12);
    padding: var(--ptv-space-8);
    height: 100%;
}

/* Figma 781:23754;576:2726: title 32 px semibold brand-600 / lh 1.1 / tracking -0.04em. */
.ptvr-insurance__plan-title {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* Figma 781:23754;576:2727: lead 18 px / lh 24. */
.ptvr-insurance__plan-content {
    flex: 1;
    color: var(--ptv-color-text-primary);
    font-size: 18px;
    line-height: 24px;
}

.ptvr-insurance__plan-content p { margin: 0 0 var(--ptv-space-3); }

/* Bullets con check icon — contenido viene del WYSIWYG. */
.ptvr-insurance__plan-content ul {
    list-style: none;
    margin: var(--ptv-space-4) 0 0;
    padding: 0;
}
.ptvr-insurance__plan-content ul li {
    position: relative;
    /* Figma: bullet icon 24 + gap 8 = 32 px de left-padding. */
    padding-left: calc(24px + var(--ptv-space-2));
    padding-block: var(--ptv-space-1);
    color: var(--ptv-color-text-primary);
    font-size: 18px;
    line-height: 24px;
}
.ptvr-insurance__plan-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--ptv-space-1) + 0px);
    /* Figma: bullet symbol 24×24. */
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--ptv-color-teal-600, #14b8a6);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.8' stroke='%2314b8a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* Bullets disabled: <li class="is-disabled"> → X rojo + texto atenuado. */
.ptvr-insurance__plan-content ul li.is-disabled {
    color: var(--ptv-color-text-disabled, #9ca3af);
}
.ptvr-insurance__plan-content ul li.is-disabled::before {
    border-color: var(--ptv-color-brand-600);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 3 9 9 M9 3 3 9' stroke='%23ff5e57' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Figma 781:23754;576:2763: price 32 px semibold brand-600 / lh 1.1. */
.ptvr-insurance__plan-price {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

/* Figma: CTA "Cotiza ya tu seguro" — kit `ptv-btn--cta` split + radius 10. */
.ptvr-insurance__plan-cta {
    --_btn-radius: 10px;
    align-self: flex-start;
}

/* COMPARATOR + BANNER TICKET — migrados al kit (incluyendo CTA overflow fix
   y label wrap, ahora en `.ptv-banner-ticket__cta` directamente). */

/* ═══════════════════════════════════════════════════════════════
 * SPA injection slots · cotizadorv2.protegetuviaje.com
 * Hidden hasta tener contenido (anti-CLS). agent-phone-sync.js
 * propaga #numberNavbar → [data-ptv-agent-phone].
 * ═══════════════════════════════════════════════════════════════ */

#numberNavbar:empty,
#numberNavbar:not(.ready) {
    visibility: hidden;
}

/* #ptv__app: mount del cotizador v3 (Shadow DOM). z-index sticky-1 para quedar
   bajo el header sticky pero sobre el resto. Inicio resetea esto. */
#ptv__app {
    display: block;
    width: 100%;
    position: relative;
    z-index: calc(var(--ptv-z-sticky, 1020) - 1);
    /* height anti-CLS y guardrail al min-height:100vh del SPA root. */
    height: 220px;
    overflow: visible;
}

/* Mirror anti-FOUC de las scoped styles del SPA (display:none default).
   TODO: agregar '/css/index.css' a quoterScript.js → eliminar este mirror. */
.q-bar { display: none; }
.qf-pill { display: none; }
.qf-desktop { display: none; }

/* Mirror de App.vue: bg neutral en steps 3-5 del SPA.
   TODO: agregar '/css/index.css' a quoterScript.js → eliminar este mirror. */
#site-body.site-body--neutral {
    background-color: var(--ptv-color-neutral-200);
}

/* Modo floatbar-default-bottom:
   - Desktop: la barra es position:fixed → colapsamos la reserva (height 0).
   - <lg: la barra es desktop-only, el SPA cae a flow inline. */
@media (min-width: 992px) {
    #ptv__app[data-floatbar-default-bottom="true"] {
        height: 0;
    }

    /* `.q-overlay` (modal full-screen del SPA): eleva el host sobre el
       header sticky. `#ptv__app` crea stacking context (z 1019) que
       atrapa al overlay interno (z 1050) bajo el header (z 1020); subir
       a `--ptv-z-modal` libera el overlay. Solo desktop — mobile usa
       `QuoteMobileForm.vue` con Teleport a body y no necesita esta regla. */
    #ptv__app:has(.q-overlay) {
        z-index: var(--ptv-z-modal, 1050);
    }
}
@media (max-width: 991.98px) {
    /* width:auto cancela el width:100% global para evitar overflow con margin:8px. */
    #ptv__app[data-floatbar-default-bottom="true"] {
        height: auto;
        min-height: 0;
        margin: 8px;
        width: auto;
    }
    #ptv__app[data-floatbar-default-bottom="true"] .ptv-h-dvh {
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * COTIZADOR SKELETON · template-parts/components/cotizador-skeleton.php
 * Placeholder mientras el SPA Vue carga. Markup espeja QuoteStep.vue +
 * QuoteFormSkeleton.vue. Es hermano de #ptv__app dentro de
 * .cotizador-container — sobrevive a `app.mount(host)`.
 * ═══════════════════════════════════════════════════════════════ */

/* Swap host↔skeleton vía atributo sticky `data-spa-ready` (lo setea un
   MutationObserver en cotizador.php). Sticky para no romper steps siguientes.
   `html body` sube especificidad sobre `.ptvr-inicio-hero__cotizador #ptv__app`. */
html body #ptv__app:not([data-spa-ready]) {
    display: none;
}
#ptv__app[data-spa-ready] ~ .ptvr-cot-skel {
    display: none;
}

/* En `/cotizacion` el dispatcher emite `#ptv__app` dentro de
   `.cotizador-container`, pero los partials de step 2-5 viven como hermanos
   de ESE wrapper (no de `#ptv__app`). El `~` no los alcanza — `:has()` sí. */
.ptvr-cotizacion__app:has(#ptv__app[data-spa-ready]) .ptvr-cot-skel {
    display: none;
}

/* ── Wrapper raíz ────────────────────────────────────────────── */
.ptvr-cot-skel {
    width: 100%;
}

/* Desktop no-Inicio: host colapsado → ocultar skeleton también. */
@media (min-width: 992px) {
    .ptvr-cot-skel[data-floatbar-default-bottom="true"] {
        display: none;
    }
}

/* Wrappers que mirror QuoteStep — padding default standalone (80/24/24). */
.ptvr-cot-skel__section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--ptv-space-20) var(--ptv-space-6) var(--ptv-space-6);
    width: 100%;
    box-sizing: border-box;
}

.ptvr-cot-skel__inner {
    width: 100%;
    max-width: 1355px;
}


.ptvr-cot-skel__form {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    align-items: center;
    width: 100%;
}

/* Overrides de padding por contexto — espejan los del SPA. */
.ptvr-inicio-hero__cotizador--detached .ptvr-cot-skel__section {
    padding: 0;
}

@media (max-width: 991.98px) {
    .ptvr-cot-skel[data-floatbar-default-bottom="true"] .ptvr-cot-skel__section {
        padding: 0;
    }
    /* Mismo margin:8px del host no-Inicio para que alineen. */
    .ptvr-cot-skel[data-floatbar-default-bottom="true"] {
        margin: 8px;
        width: auto;
    }
}

/* Mobile pill (<lg) — mirror de .sk-pill. */
.ptvr-cot-skel__pill {
    display: none;
}

@media (max-width: 991.98px) {
    .ptvr-cot-skel__pill {
        display: flex;
        width: 100%;
        filter: drop-shadow(0 2px 3.85px rgba(0, 0, 0, 0.1));
    }
    .ptvr-cot-skel__pill-content {
        background: var(--ptv-color-bg-surface);
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--ptv-space-1);
        padding: 5px var(--ptv-space-6) 5px var(--ptv-space-4);
        height: 50px;
        border-radius: var(--ptv-radius-lg);
        overflow: hidden;
    }
    .ptvr-cot-skel__pill-row {
        display: flex;
        align-items: center;
        gap: var(--ptv-space-1);
    }
    /* Override del .ptv-skeleton--circle como punto separador. */
    .ptvr-cot-skel__dot.ptv-skeleton {
        width: 4px;
        height: 4px;
        flex-shrink: 0;
    }
    .ptvr-cot-skel__pill-divider {
        flex-shrink: 0;
        width: 0;
        height: 30px;
        align-self: center;
        border: none;
        border-left: var(--ptv-border-width-sm) dashed var(--ptv-color-border);
        margin: 0;
    }
    .ptvr-cot-skel__pill-btn {
        flex: 0 0 52px;
        height: 50px;
        border-radius: var(--ptv-radius-lg);
    }
    .ptvr-cot-skel__desktop {
        display: none;
    }
}

/* Desktop bar (≥lg, solo hero context). */
.ptvr-cot-skel__desktop {
    display: none;
}

@media (min-width: 992px) {
    .ptvr-cot-skel__desktop {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--ptv-space-2);
        width: 100%;
    }

    /* Tabs row. */
    .ptvr-cot-skel__tabs {
        display: flex;
        gap: var(--ptv-space-2);
        padding-bottom: 13px;
    }
    .ptvr-cot-skel__tab {
        width: 90px;
        height: 32px;
    }
    .ptvr-cot-skel__tab--md { width: 115px; }
    .ptvr-cot-skel__tab--lg { width: 135px; }

    /* .form-bar: transparente con backdrop-blur. Las tarjetas blancas viven en cada __card. */
    .ptvr-cot-skel__bar {
        display: flex;
        align-items: stretch;
        width: 100%;
        padding: var(--ptv-space-2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* .form-col: flex-grow matchea anchos Figma. */
    .ptvr-cot-skel__col {
        display: flex;
        align-items: stretch;
        min-width: 0;
        flex: 0 1 0%;
    }
    .ptvr-cot-skel__col--origin    { flex-grow: 203; }
    .ptvr-cot-skel__col--dest      { flex-grow: 254; }
    .ptvr-cot-skel__col--dates     { flex-grow: 297; }
    .ptvr-cot-skel__col--travelers { flex-grow: 142; }
    .ptvr-cot-skel__col--email     { flex-grow: 269; }

    /* Tarjeta blanca interna dentro de cada .form-col. */
    .ptvr-cot-skel__card {
        background: var(--ptv-color-base-white);
        border-radius: var(--ptv-border-radius-component); /* 12px */
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--ptv-space-1);
        width: 100%;
        /* space-3 (12px) en lugar del space-4 del SPA para matchear visual. */
        padding-inline: var(--ptv-space-3);
        min-height: 79px;                         /* --form-card-min-h default */
    }

    /* Variante fechas: tarjeta con dos halves. */
    .ptvr-cot-skel__card--split {
        flex-direction: row;
        gap: 0;
        padding-inline: 0;
    }
    .ptvr-cot-skel__card-half {
        display: flex;
        flex: 1 1 0%;
        flex-direction: column;
        justify-content: center;
        gap: var(--ptv-space-1);
        padding-inline: var(--ptv-space-4);      /* --form-card-px default */
    }
    /* Half izquierda — padding mayor por no tener divider externo. */
    .ptvr-cot-skel__card-half--pl {
        padding-left: var(--ptv-space-6);        /* --form-card-pl default */
    }
    /* Separador vertical entre los dos halves de fechas. */
    .ptvr-cot-skel__card-sep {
        align-self: center;
        flex-shrink: 0;
        width: 1px;
        height: 40px;
        background: var(--ptv-color-neutral-200);
    }

    /* Divider vertical entre columnas. */
    .ptvr-cot-skel__bar-divider {
        flex-shrink: 0;
        width: 0;
        align-self: stretch;
        border: none;
        border-left: var(--ptv-border-width-sm) dashed var(--ptv-color-neutral-200);
        margin: var(--ptv-space-3) 0;
    }

    .ptvr-cot-skel__submit {
        flex-shrink: 0;
        min-width: 174px;
        align-self: stretch;
    }

    /* Paddings responsive del .form-bar real. */
    @media (max-width: 1280px) {
        .ptvr-cot-skel__bar {
            padding: var(--ptv-space-1);
        }
        .ptvr-cot-skel__card {
            padding-inline: var(--ptv-space-3);   /* --form-card-px */
            min-height: 72px;
        }
        .ptvr-cot-skel__card-half {
            padding-inline: var(--ptv-space-3);
        }
        .ptvr-cot-skel__card-half--pl {
            padding-left: var(--ptv-space-5);     /* --form-card-pl */
        }
    }
    @media (max-width: 1100px) {
        .ptvr-cot-skel__bar {
            padding: 2px;
        }
        .ptvr-cot-skel__card {
            padding-inline: var(--ptv-space-2);
            min-height: 64px;
        }
        .ptvr-cot-skel__card-half {
            padding-inline: var(--ptv-space-2);
        }
        .ptvr-cot-skel__card-half--pl {
            padding-left: var(--ptv-space-4);
        }
    }
}

/* Neutraliza ptv-h-dvh (100dvh) del SPA — overflow invisible bloqueaba clicks. */
#ptv__app .ptv-h-dvh {
    height: auto;
    min-height: 0;
}

/* Cotización: el SPA es el contenido principal — neutraliza la reserva
   anti-CLS (height 220px) para que step 2+ pueda crecer libremente. NO
   neutralizamos el z-index: el SPA debe conservar el `z-index` elevado
   del global (#ptv__app → `--ptv-z-sticky - 1`) para que sus dropdowns
   (destinos, fechas, viajeros) pinten ENCIMA de las cards de
   "Novedades para ti" del hero — esas cards usan `backdrop-filter` que
   crea un stacking context y, sin elevación del SPA, ganan en pintura. */
.ptvr-cotizacion__app #ptv__app,
.ptvr-cotizacion__app #ptv__app[data-floatbar-default-bottom="true"] {
    height: auto;
    min-height: 0;
}

/* Cotización step 2+: el JS de page-cotizacion.php reubica el cotizador
   fuera del hero (hermano de `.ptvr-inicio-hero`) y agrega la clase
   `--advanced` al wrapper. Neutralizamos los anchos/márgenes que el
   wrapper `__cotizador` arrastra del partial del hero para no constreñir
   los layouts internos del SPA (.plan-step max-width 1440;
   .passengers/payment/thank-you 1280) ni añadir un margin lateral que
   no existía en el step 2+ pre-refactor. */
.ptvr-cotizacion__app--advanced > .ptvr-inicio-hero__cotizador {
    margin: 0;
    width: 100%;
    max-width: none;
}

/* Step 2+: el SPA decide su propio spacing-top. Garantizamos que el
   tema NO aporte padding ni margin al wrapper avanzado ni al cotizador
   reubicado, así el header del sitio queda pegado al primer elemento
   del SPA y el SPA controla la separación interna (suele ser un
   padding-top del propio plan-step / passengers / payment). */
.ptvr-cotizacion__app--advanced {
    padding-block: 0;
    margin-block: 0;
}
.ptvr-cotizacion__app--advanced > .ptvr-inicio-hero__cotizador {
    padding-block: 0;
}
.ptvr-cotizacion__app--advanced #ptv__app {
    padding-top: 0;
    margin-top: 0;
}

/* Override defensivo de los padding-top de las step pages del SPA cuando
   corre embebido en este tema (WordPress, light DOM — `#ptv__app` NO es
   Shadow Root en este modo, así que CSS del tema puede alcanzar las
   clases internas). Sin esto, cada step page (`.plan-step`,
   `.passengers-step`, `.payment-step`) suma su propio padding-top
   (48/80 px en plan-step, 32/48 en los demás) sobre el header del tema.
   El SPA ya está adaptado para padding-top: 0 en plan-step, pero hasta
   que el bundle se rebuilds y deploye, este override hace que el cambio
   se vea inmediatamente desde el lado del tema. */
.ptvr-cotizacion__app--advanced .plan-step,
.ptvr-cotizacion__app--advanced .passengers-step,
.ptvr-cotizacion__app--advanced .payment-step {
    padding-top: 0;
}

/* Step 2+ mobile/tablet: oculta FeelSocial (iframe inyectado en
   `inc/tracking.php`) — compite con el SPA. Clase en `<body>` porque el
   iframe es hermano de `<main>` y un selector descendiente del wrapper
   no lo alcanza. */
@media (max-width: 991.98px) {
    body.ptvr-cotizacion-advanced #ptvr-feelsocial-iframe {
        display: none;
    }
}

/* Step 2+ mobile/tablet: oculta el Sales Chat (widget inyectado en
   `inc/tracking.php`) por la misma razón que FeelSocial — compite con el
   SPA del cotizador. Cubrimos el contenedor `#ptv__chat` y, por si el
   drawer se monta vía Teleport en `<body>`, también la burbuja y la
   ventana (`.ptv-chat__bubble` / `.ptv-chat__window`). */
@media (max-width: 991.98px) {
    body.ptvr-cotizacion-advanced #ptv__chat,
    body.ptvr-cotizacion-advanced .ptv-chat__bubble,
    body.ptvr-cotizacion-advanced .ptv-chat__window {
        display: none;
    }
}

/* Step 2+: oculta el skeleton del step 1 (cotizador-skeleton.php sin
   modifier --step{N} ni --extras). Sin esto se verían dos skeletons
   simultáneos durante la carga del chunk antes de que el SPA setee
   `data-spa-ready`. `--extras` se excluye explícitamente porque no
   contiene el substring "ptvr-cot-skel--step". */
.ptvr-cotizacion__app--advanced .ptvr-cot-skel:not([class*="ptvr-cot-skel--step"]):not(.ptvr-cot-skel--extras) {
    display: none;
}

/* PaymentStep: el grid usa `align-items: stretch` + sidebar
   `align-self: start`, combo que rompe el sticky del sidebar (no hay
   scroll-room). Forzamos `align-items: start`. El ID `#ptv__app` es
   OBLIGATORIO: la regla scoped de Vue `.payment-step__grid[data-v-xxx]`
   se inyecta después en `<head>` y empata especificidad sin él. */
#ptv__app .payment-step__grid {
    align-items: start;
}

/* ═══════════════════════════════════════════════════════════════
 * COTIZADOR SKELETONS · steps 2-5
 * Cada partial es hermano de #ptv__app dentro de .ptvr-cotizacion__app.
 * Comparten clase raíz `.ptvr-cot-skel` (las reglas globales arriba ya
 * los ocultan cuando #ptv__app tiene `data-spa-ready`).
 * El partial correcto se unhide vía script inline en page-cotizacion.php
 * según `window.location.hash`.
 * ═══════════════════════════════════════════════════════════════ */

/* Wrappers de paso — match al root container de cada SFC del SPA para
   evitar shift en el swap PHP→SPA:
     · plan-step: pad 12/8, max-w 1440
     · passengers / payment / thank-you: pad 8/4 → 12/8 @≥768, max-w 1280
   Steps 3-5 agregan pb 96 en mobile por la bottom-sheet sticky.
   `display: block` cancela el flex de `.ptvr-cot-skel__section` (step 1);
   `max-width: none` en `__inner` cancela el cap del step 1.
   Combinador `>` obligatorio en step 3: `__section` se reusa para
   secciones internas del form; descendiente cancelaría su flex. */
.ptvr-cot-skel--step2 > .ptvr-cot-skel-step2__section,
.ptvr-cot-skel--extras > .ptvr-cot-skel-extras__section,
.ptvr-cot-skel--step3 > .ptvr-cot-skel-step3__section,
.ptvr-cot-skel--step4 > .ptvr-cot-skel-step4__section,
.ptvr-cot-skel--step5 > .ptvr-cot-skel-step5__section {
    display: block;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.ptvr-cot-skel--step2 > .ptvr-cot-skel-step2__section > .ptvr-cot-skel__inner,
.ptvr-cot-skel--extras > .ptvr-cot-skel-extras__section > .ptvr-cot-skel__inner,
.ptvr-cot-skel--step3 > .ptvr-cot-skel-step3__section > .ptvr-cot-skel__inner,
.ptvr-cot-skel--step4 > .ptvr-cot-skel-step4__section > .ptvr-cot-skel__inner,
.ptvr-cot-skel--step5 > .ptvr-cot-skel-step5__section > .ptvr-cot-skel__inner {
    max-width: none;
}

/* Step 2 — mirror exacto del SFC `PlanSelectionStep.vue` (L411–441):
   px space-4 en todos los breakpoints; solo cambia py (12 → 20) en
   desktop. Antes daba "encogimiento" al swappear skeleton → SFC. */
.ptvr-cot-skel--step2 > .ptvr-cot-skel-step2__section {
    padding: var(--ptv-space-12) var(--ptv-space-4);
    max-width: 1440px;
    overflow-x: clip;
}

@media (min-width: 992px) {
    .ptvr-cot-skel--step2 > .ptvr-cot-skel-step2__section {
        padding: var(--ptv-space-20) var(--ptv-space-4);
    }
}

/* Steps 3/4/5 — `.passengers-step` / `.payment-step` / `.thank-you`:
   mobile padding-inline reducido, desktop padding más amplio. max-width 1280. */
.ptvr-cot-skel--extras > .ptvr-cot-skel-extras__section,
.ptvr-cot-skel--step3 > .ptvr-cot-skel-step3__section,
.ptvr-cot-skel--step4 > .ptvr-cot-skel-step4__section,
.ptvr-cot-skel--step5 > .ptvr-cot-skel-step5__section {
    padding: var(--ptv-space-8) var(--ptv-space-4);
    max-width: 1280px;
}

@media (min-width: 768px) {
    .ptvr-cot-skel--extras > .ptvr-cot-skel-extras__section,
    .ptvr-cot-skel--step3 > .ptvr-cot-skel-step3__section,
    .ptvr-cot-skel--step4 > .ptvr-cot-skel-step4__section,
    .ptvr-cot-skel--step5 > .ptvr-cot-skel-step5__section {
        padding: var(--ptv-space-12) var(--ptv-space-8);
    }
}

/* Mobile variant `.passengers-step--mobile` etc. del SPA — reserva 96px
   bajo el sticky bottom-sheet del summary. */
@media (max-width: 991.98px) {
    .ptvr-cot-skel--extras > .ptvr-cot-skel-extras__section,
    .ptvr-cot-skel--step3 > .ptvr-cot-skel-step3__section,
    .ptvr-cot-skel--step4 > .ptvr-cot-skel-step4__section,
    .ptvr-cot-skel--step5 > .ptvr-cot-skel-step5__section {
        padding-bottom: 96px;
    }
}

/* `min-height: 100vh` matchea `#site-body` del SPA (App.vue): cuando se
   hace el swap, ambos contenedores llegan exactamente al mismo alto en
   viewports altos, evitando un cambio de altura del bg. */
.ptvr-cot-skel--step2,
.ptvr-cot-skel--extras,
.ptvr-cot-skel--step3,
.ptvr-cot-skel--step4,
.ptvr-cot-skel--step5 {
    min-height: 100vh;
}

/* Extras/Passengers/Payment/ThankYou: App.vue los incluye en
   `NEUTRAL_BG_ROUTES` y setea `#site-body.site-body--neutral` con bg gris.
   Replicamos el bg gris acá para evitar flash blanco→gris al swap. */
.ptvr-cot-skel--extras,
.ptvr-cot-skel--step3,
.ptvr-cot-skel--step4,
.ptvr-cot-skel--step5 {
    background: var(--ptv-color-neutral-200);
}

/* ── STEP 2 · PlanSelection ─────────────────────────────────────── */
.ptvr-cot-skel-step2 {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
    width: 100%;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step2 { gap: var(--ptv-space-10); }
}

/* Headline — mirror del SFC `PlanSelectionStep.vue` (línea 433):
   mobile = column-reverse + stretch, ≥768 = row + flex-start. */
.ptvr-cot-skel-step2__headline {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--ptv-space-4);
}

@media (min-width: 768px) {
    .ptvr-cot-skel-step2__headline {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--ptv-space-6);
    }
}

.ptvr-cot-skel-step2__headline-left {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-step2__title-row {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-4);
    flex-wrap: wrap;
}

/* Headline-right — mobile <768 = column con items stretched (botones full
   width); ≥768 = column + flex-end. Mirror de `.plan-step__headline-actions`
   del SPA (PlanSelectionSkeleton.vue:186-199), donde el mobile apila los
   botones uno encima del otro full-width en lugar de mantenerlos en fila
   apretada con `space-between`. */
.ptvr-cot-skel-step2__headline-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--ptv-space-3);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .ptvr-cot-skel-step2__headline-right {
        align-items: flex-end;
    }
}

.ptvr-cot-skel-step2__trustpilot {
    width: 148px;
    height: 24px;
    border-radius: var(--ptv-radius-full);
}

.ptvr-cot-skel-step2__title {
    width: 440px;
    height: 46px;
    border-radius: 8px;
}

@media (max-width: 767.98px) {
    .ptvr-cot-skel-step2__title { width: 200px; height: 30px; }
}

.ptvr-cot-skel-step2__flags {
    display: flex;
    gap: 4px;
}

.ptvr-cot-skel-step2__flag {
    width: 32px;
    height: 32px;
    border-radius: var(--ptv-radius-full);
}

.ptvr-cot-skel-step2__subtitle {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ptvr-cot-skel-step2__subtitle-line {
    width: 230px;
    height: 24px;
    border-radius: 6px;
}

.ptvr-cot-skel-step2__subtitle-line--short { width: 170px; }

.ptvr-cot-skel-step2__edit-btn {
    width: 140px;
    height: 36px;
    border-radius: 4px;
}

.ptvr-cot-skel-step2__share-btn {
    width: 200px;
    height: 52px;
    border-radius: 12px;
}

/* Mobile <768: ambos botones full-width (apilados en column-stretched
   del headline-right). Mismo comportamiento que el SPA. */
@media (max-width: 767.98px) {
    .ptvr-cot-skel-step2__edit-btn,
    .ptvr-cot-skel-step2__share-btn {
        width: 100%;
    }
}

/* Controls */
.ptvr-cot-skel-step2__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ptv-space-4);
    flex-wrap: wrap;
}

.ptvr-cot-skel-step2__controls-left {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
    flex-wrap: wrap;
}

.ptvr-cot-skel-step2__coin,
.ptvr-cot-skel-step2__lifemiles {
    width: 265px;
    height: 55px;
    border-radius: 12px;
}

.ptvr-cot-skel-step2__lifemiles { width: 256px; }

.ptvr-cot-skel-step2__coupon {
    flex: 1;
    min-width: 265px;
    max-width: 320px;
    height: 55px;
    border-radius: 12px;
}

/* Grid de cards */
.ptvr-cot-skel-step2__grid-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.ptvr-cot-skel-step2__grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--ptv-space-4);
    overflow: visible;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step2__grid { gap: var(--ptv-space-5); }
}

.ptvr-cot-skel-step2__card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 540px;
    /* Non-favorite cards sit 32px lower (mirror del SPA). */
    margin-top: 32px;
}

.ptvr-cot-skel-step2__card--fav { margin-top: 0; }

.ptvr-cot-skel-step2__card-header {
    height: 104px;
    border-radius: 16px;
    flex-shrink: 0;
}

.ptvr-cot-skel-step2__sep {
    border: none;
    border-top: 1.5px dashed rgba(82, 87, 93, 0.22);
    margin: 0 16px;
    flex-shrink: 0;
}

.ptvr-cot-skel-step2__card-body {
    flex: 1;
    border-radius: 16px;
}

/* <992px: el SPA muestra stack horizontal scrollable; <768px: stack vertical. */
@media (max-width: 991.98px) {
    .ptvr-cot-skel-step2__grid {
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: var(--ptv-space-2);
        scrollbar-width: thin;
    }
    .ptvr-cot-skel-step2__card { flex: 0 0 320px; }
}

@media (max-width: 767.98px) {
    .ptvr-cot-skel-step2__grid {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
        gap: var(--ptv-space-5);
    }
    .ptvr-cot-skel-step2__card {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 0;
    }
}

/* ── STEP 3 · Passengers (router meta.step=4) ──────────────────── */
.ptvr-cot-skel-step3 { width: 100%; }

.ptvr-cot-skel-step3__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-2);
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step3__grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--ptv-space-3);
        align-items: start;
    }
}

/* Form card (left) */
.ptvr-cot-skel-step3__form {
    background: var(--ptv-color-bg-surface);
    border-radius: var(--ptv-radius-2xl);
    padding: var(--ptv-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
    min-width: 0;
}

.ptvr-cot-skel-step3__intro {
    display: flex;
    align-items: flex-start;
    gap: var(--ptv-space-3);
    padding-bottom: var(--ptv-space-8);
    border-bottom: 1px solid var(--ptv-color-border);
    margin: 0 calc(var(--ptv-space-8) * -1);
    padding-left: var(--ptv-space-8);
    padding-right: var(--ptv-space-8);
}

.ptvr-cot-skel-step3__back {
    width: 36px;
    height: 36px;
    border-radius: var(--ptv-radius-full);
    flex-shrink: 0;
}

.ptvr-cot-skel-step3__intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    flex: 1;
    min-width: 0;
}

.ptvr-cot-skel-step3__title {
    width: 200px;
    height: 28px;
    border-radius: 6px;
}

.ptvr-cot-skel-step3__subtitle {
    width: min(320px, 80%);
    height: 16px;
    border-radius: 4px;
}

.ptvr-cot-skel-step3__section {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
}

.ptvr-cot-skel-step3__section--bordered {
    padding-top: var(--ptv-space-8);
    border-top: 1px solid var(--ptv-color-border);
    margin: 0 calc(var(--ptv-space-8) * -1);
    padding-left: var(--ptv-space-8);
    padding-right: var(--ptv-space-8);
}

.ptvr-cot-skel-step3__row {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-step3__row--between { justify-content: space-between; }

.ptvr-cot-skel-step3__heading {
    width: 180px;
    height: 20px;
    border-radius: 4px;
}

.ptvr-cot-skel-step3__sub-heading {
    width: 220px;
    height: 16px;
    border-radius: 4px;
}

.ptvr-cot-skel-step3__pill {
    width: 130px;
    height: 32px;
    border-radius: var(--ptv-radius-md);
}

.ptvr-cot-skel-step3__grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ptv-space-3);
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step3__grid-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.ptvr-cot-skel-step3__input {
    width: 100%;
    height: 56px;
    border-radius: var(--ptv-radius-lg);
}

.ptvr-cot-skel-step3__helper {
    width: min(420px, 90%);
    height: 14px;
    border-radius: 4px;
}

.ptvr-cot-skel-step3__helper--sm { width: min(280px, 70%); }

.ptvr-cot-skel-step3__radio {
    width: 64px;
    height: 24px;
    border-radius: 4px;
}

.ptvr-cot-skel-step3__footer {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
    padding-top: var(--ptv-space-8);
    border-top: 1px solid var(--ptv-color-border);
    margin: 0 calc(var(--ptv-space-8) * -1);
    padding-left: var(--ptv-space-8);
    padding-right: var(--ptv-space-8);
}

@media (min-width: 640px) {
    .ptvr-cot-skel-step3__footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--ptv-space-5);
    }
}

.ptvr-cot-skel-step3__terms {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.ptvr-cot-skel-step3__terms-line {
    width: min(280px, 80%);
    height: 12px;
    border-radius: 4px;
}

.ptvr-cot-skel-step3__terms-line--short { width: min(180px, 60%); }

.ptvr-cot-skel-step3__actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--ptv-space-3);
}

@media (min-width: 640px) {
    .ptvr-cot-skel-step3__actions {
        flex-direction: row;
        flex-shrink: 0;
    }
}

.ptvr-cot-skel-step3__btn {
    width: 100%;
    height: 48px;
    border-radius: var(--ptv-radius-full);
}

/* Ancho fijo solo desde sm (≥640) — mismo breakpoint que el SPA usa
   en `.pass-sk__btn--ghost/--primary` (PassengersStepSkeleton.vue). */
@media (min-width: 640px) {
    .ptvr-cot-skel-step3__btn--ghost { width: 160px; }
    .ptvr-cot-skel-step3__btn--primary { width: 180px; }
}

/* Sidebar — visible solo ≥992px (en mobile el aside sigue en flujo pero
   el SPA lo oculta con v-if; aquí lo ocultamos con CSS por simplicidad). */
.ptvr-cot-skel-step3__sidebar {
    display: none;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step3__sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--ptv-space-4);
        min-width: 0;
        position: sticky;
        top: var(--ptv-space-6);
    }
}

.ptvr-cot-skel-step3__payments {
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-2xl);
    padding: var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
}

.ptvr-cot-skel-step3__payments-title {
    width: 220px;
    height: 18px;
    border-radius: 4px;
    align-self: center;
}

.ptvr-cot-skel-step3__pay-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--ptv-space-2);
}

.ptvr-cot-skel-step3__pay-item {
    aspect-ratio: 1.6 / 1;
    border-radius: var(--ptv-radius-md);
}

/* ── STEP 2.5 · Extras (router meta.step=3) ─────────────────────
   Mirror de `ExtrasStepSkeleton.vue`. Card izquierda (intro + 3 upgrade
   placeholders) + sidebar PriceSummary en desktop. Mismas medidas que
   step3 (Passengers) para que el swap PHP→SPA no produzca saltos. */
.ptvr-cot-skel-extras { width: 100%; }

.ptvr-cot-skel-extras__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-2);
}

@media (min-width: 992px) {
    .ptvr-cot-skel-extras__grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--ptv-space-3);
        align-items: start;
    }
}

/* Card izquierda */
.ptvr-cot-skel-extras__card {
    background: var(--ptv-color-bg-surface);
    border-radius: var(--ptv-radius-2xl);
    padding: var(--ptv-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
    min-width: 0;
}

.ptvr-cot-skel-extras__intro {
    display: flex;
    align-items: flex-start;
    gap: var(--ptv-space-3);
    padding-bottom: var(--ptv-space-8);
    border-bottom: 1px solid var(--ptv-color-border);
    margin: 0 calc(var(--ptv-space-8) * -1);
    padding-left: var(--ptv-space-8);
    padding-right: var(--ptv-space-8);
}

.ptvr-cot-skel-extras__back {
    width: 36px;
    height: 36px;
    border-radius: var(--ptv-radius-full);
    flex-shrink: 0;
}

.ptvr-cot-skel-extras__intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    flex: 1;
    min-width: 0;
}

.ptvr-cot-skel-extras__title {
    width: 260px;
    max-width: 80%;
    height: 28px;
    border-radius: 6px;
}

.ptvr-cot-skel-extras__subtitle {
    width: 180px;
    max-width: 60%;
    height: 16px;
    border-radius: 4px;
}

/* Lista de upgrade placeholders */
.ptvr-cot-skel-extras__list {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

.ptvr-cot-skel-extras__upgrade {
    display: flex;
    align-items: flex-start;
    gap: var(--ptv-space-3);
    padding: var(--ptv-space-5);
    border: 1px solid var(--ptv-color-border);
    border-radius: var(--ptv-radius-xl);
    background: var(--ptv-color-bg-surface);
}

.ptvr-cot-skel-extras__checkbox {
    width: 28px;
    height: 28px;
    border-radius: var(--ptv-radius-md);
    flex-shrink: 0;
}

.ptvr-cot-skel-extras__upgrade-head {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ptv-space-3);
    min-width: 0;
}

.ptvr-cot-skel-extras__upgrade-titles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.ptvr-cot-skel-extras__upgrade-title {
    width: 70%;
    max-width: 280px;
    height: 18px;
    border-radius: 4px;
}

.ptvr-cot-skel-extras__upgrade-desc {
    width: 90%;
    max-width: 360px;
    height: 12px;
    border-radius: 4px;
}

.ptvr-cot-skel-extras__upgrade-price {
    width: 90px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Sidebar — visible solo ≥992px (en mobile el SPA usa v-if; aquí lo
   ocultamos con CSS por simplicidad, igual que step3). */
.ptvr-cot-skel-extras__sidebar {
    display: none;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-extras__sidebar {
        display: flex;
        flex-direction: column;
        gap: var(--ptv-space-4);
        min-width: 0;
        position: sticky;
        top: var(--ptv-space-6);
    }
}

/* ── STEP 4 · Payment (router meta.step=5) ─────────────────────── */
.ptvr-cot-skel-step4 { width: 100%; }

.ptvr-cot-skel-step4__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-2);
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step4__grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: var(--ptv-space-3);
        align-items: start;
    }
}

.ptvr-cot-skel-step4__main {
    background: var(--ptv-color-bg-surface);
    border-radius: var(--ptv-radius-2xl);
    padding: var(--ptv-space-8) var(--ptv-space-8) var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
    min-width: 0;
}

.ptvr-cot-skel-step4__intro {
    display: flex;
    align-items: flex-start;
    gap: var(--ptv-space-3);
    margin: 0 calc(var(--ptv-space-8) * -1);
    padding: 0 var(--ptv-space-8) var(--ptv-space-10);
    border-bottom: 1px solid var(--ptv-color-border);
}

.ptvr-cot-skel-step4__back {
    width: 36px;
    height: 36px;
    border-radius: var(--ptv-radius-full);
    flex-shrink: 0;
}

.ptvr-cot-skel-step4__intro-text {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    flex: 1;
    min-width: 0;
}

.ptvr-cot-skel-step4__title {
    width: 220px;
    height: 28px;
    border-radius: 6px;
}

.ptvr-cot-skel-step4__subtitle {
    width: min(340px, 90%);
    height: 14px;
    border-radius: 4px;
}

.ptvr-cot-skel-step4__subtitle--short { width: min(260px, 70%); }

.ptvr-cot-skel-step4__methods {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
}

.ptvr-cot-skel-step4__methods-heading {
    width: 280px;
    max-width: 80%;
    height: 18px;
    border-radius: 4px;
}

.ptvr-cot-skel-step4__methods-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

.ptvr-cot-skel-step4__method {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
    min-height: 67px;
    padding: 0 var(--ptv-space-4);
    border: 1px solid var(--ptv-color-border);
    border-radius: var(--ptv-radius-2xl);
    background: var(--ptv-color-base-white);
}

.ptvr-cot-skel-step4__method-check {
    width: 22px;
    height: 22px;
    border-radius: var(--ptv-radius-sm);
    flex-shrink: 0;
}

/* Wrapper que agrupa name + logos. En desktop name a la izquierda y
   logos a la derecha (`space-between`); en mobile <768 apila vertical
   (igual que `PaymentMethodsSkeleton.vue` del SPA). */
.ptvr-cot-skel-step4__method-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-step4__method-name {
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.ptvr-cot-skel-step4__method-logos {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-1);
    flex-shrink: 0;
}

.ptvr-cot-skel-step4__method-logo {
    width: 38px;
    height: 38px;
    border-radius: var(--ptv-radius-md);
}

@media (max-width: 767.98px) {
    .ptvr-cot-skel-step4__method {
        padding: var(--ptv-space-3);
    }
    .ptvr-cot-skel-step4__method-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ptv-space-2);
    }
    .ptvr-cot-skel-step4__method-logos {
        flex-wrap: wrap;
    }
}

.ptvr-cot-skel-step4__summary {
    display: none;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step4__summary {
        display: block;
        position: sticky;
        top: var(--ptv-space-6);
        min-width: 0;
    }
}

/* ── STEP 5 · ThankYou (router meta.step=6) ────────────────────── */
.ptvr-cot-skel-step5 { width: 100%; }

.ptvr-cot-skel-step5__intro {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ptv-space-8);
}

.ptvr-cot-skel-step5__title {
    width: 240px;
    height: 30px;
    border-radius: 6px;
}

.ptvr-cot-skel-step5__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-3);
    align-items: start;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step5__grid {
        grid-template-columns: minmax(0, 1fr) 380px;
    }
}

.ptvr-cot-skel-step5__main {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
    min-width: 0;
}

.ptvr-cot-skel-step5__card {
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-3xl);
    overflow: hidden;
}

/* Split solo ≥768px (el SPA usa !isMobile = (min-width: 768px)). */
@media (min-width: 768px) {
    .ptvr-cot-skel-step5__card--split {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}

.ptvr-cot-skel-step5__card-body {
    padding: var(--ptv-space-7);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
    min-width: 0;
}

.ptvr-cot-skel-step5__heading {
    width: 200px;
    height: 22px;
    border-radius: 6px;
}

.ptvr-cot-skel-step5__line {
    width: 100%;
    height: 14px;
    border-radius: 4px;
}

.ptvr-cot-skel-step5__line--xs {
    width: 160px;
    height: 10px;
}

.ptvr-cot-skel-step5__line--label {
    width: 220px;
    height: 16px;
}

.ptvr-cot-skel-step5__list {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-step5__button {
    width: 100%;
    height: 48px;
    border-radius: var(--ptv-radius-full);
    margin-top: var(--ptv-space-2);
}

/* Cap: máximo 300px (el SPA usa `!ptv-max-w-[300px]`). */
.ptvr-cot-skel-step5__button--cap { max-width: 300px; }

.ptvr-cot-skel-step5__button--auto {
    width: 200px;
    margin-top: 0;
}

.ptvr-cot-skel-step5__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-step5__wallet {
    width: 150px;
    height: 48px;
    border-radius: var(--ptv-radius-md);
}

/* Image side — solo visible cuando el card es split (≥768px). */
.ptvr-cot-skel-step5__image {
    display: none;
    border-radius: 0;
    min-height: 100%;
}

@media (min-width: 768px) {
    .ptvr-cot-skel-step5__card--split .ptvr-cot-skel-step5__image {
        display: block;
    }
}

.ptvr-cot-skel-step5__sidebar {
    display: none;
}

@media (min-width: 992px) {
    .ptvr-cot-skel-step5__sidebar {
        display: block;
        position: sticky;
        top: var(--ptv-space-6);
        min-width: 0;
    }
}

/* ── PriceSummary skeleton (compartido) ────────────────────────── */
.ptvr-cot-skel-summary {
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ptvr-cot-skel-summary__plan-header {
    background: var(--ptv-color-neutral-950);
    padding: var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

/* En fondo oscuro, los .ptv-skeleton del kit no contrastan — overrides
   para hacerlos visibles (mismo trick que el SFC scoped). */
.ptvr-cot-skel-summary__plan-badge,
.ptvr-cot-skel-summary__plan-name,
.ptvr-cot-skel-summary__plan-sub {
    background: rgba(255, 255, 255, 0.18);
    animation: none;
}

.ptvr-cot-skel-summary__plan-badge {
    width: 90px;
    height: 12px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__plan-name {
    width: 140px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.22);
}

.ptvr-cot-skel-summary__plan-sub {
    width: 110px;
    height: 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
}

/* Divider boarding-pass entre header oscuro y body blanco — mirror del
   `<hr class="ps-sk__sep">` del PriceSummarySkeleton.vue (SPA). 1.5px
   dashed con padding lateral 16 para que no toque los bordes. */
.ptvr-cot-skel-summary__sep {
    margin: 0 16px;
    border: none;
    border-top: 1.5px dashed var(--ptv-color-neutral-300, rgba(82, 87, 93, 0.22));
    flex-shrink: 0;
}

.ptvr-cot-skel-summary__body {
    display: flex;
    flex-direction: column;
}

.ptvr-cot-skel-summary__trip {
    padding: var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-summary__row {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-summary__row--between { justify-content: space-between; }

.ptvr-cot-skel-summary__heading {
    width: 130px;
    height: 16px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__chip {
    width: 70px;
    height: 22px;
    border-radius: var(--ptv-radius-md);
}

.ptvr-cot-skel-summary__chevron {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__trip-row {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-summary__trip-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--ptv-radius-full);
    flex-shrink: 0;
}

.ptvr-cot-skel-summary__trip-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptvr-cot-skel-summary__trip-label {
    width: 80px;
    height: 10px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__trip-value {
    width: 140px;
    height: 14px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__divider {
    height: 1px;
    background: var(--ptv-color-border);
    opacity: 0.4;
}

.ptvr-cot-skel-summary__block {
    padding: var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-summary__input {
    width: 100%;
    height: 56px;
    border-radius: var(--ptv-radius-lg);
}

.ptvr-cot-skel-summary__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-summary__price-label {
    width: 110px;
    height: 14px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__price-value {
    width: 90px;
    height: 14px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__price-row--total {
    margin-top: var(--ptv-space-2);
    padding-top: var(--ptv-space-3);
    border-top: 1px dashed var(--ptv-color-border);
}

.ptvr-cot-skel-summary__total-label {
    width: 90px;
    height: 18px;
    border-radius: 4px;
}

.ptvr-cot-skel-summary__total-value {
    width: 130px;
    height: 26px;
    border-radius: 6px;
}

.ptvr-cot-skel-summary__cta {
    padding: 0 var(--ptv-space-5) var(--ptv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}

.ptvr-cot-skel-summary__banner {
    width: 100%;
    height: 56px;
    border-radius: var(--ptv-radius-lg);
}

.ptvr-cot-skel-summary__btn {
    width: 100%;
    height: 48px;
    border-radius: var(--ptv-radius-full);
}

.ptvr-cot-skel-summary__helper {
    width: min(280px, 80%);
    height: 12px;
    border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════
 * ANNOUNCEMENT BAR · template-parts/header/announcement-bar.php
 * Figma 781:28791. Marquee CSS-only, configurable desde Ajustes.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-announcement {
    position: relative;
    width: 100%;
    box-sizing: border-box;
        /* Padding-inline alineado a `.ptvr-header`. */
    padding-inline: var(--ptv-space-2);
    /* Fade-in cuando el JS termina init (window.load + fonts + idle).
       Espacio reservado vía `min-height` del inner — sin CLS. Evita el
       parpadeo causado por terceros pesados durante la carga. */
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.ptvr-announcement--ready {
    opacity: 1;
}


/* `[hidden]` UA puede perder contra reglas con combinador. Mismo fix
   documentado en `.ptvr-footer__nl-feedback[hidden]` arriba — sube
   especificidad para que `bar.hidden = true` (page-cotizacion.php) aplique. */
.ptvr-announcement[hidden] {
    display: none;
}

.ptvr-announcement__inner {
    position: relative;
    min-height: 37px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 var(--ptv-space-10) 0 var(--ptv-space-4); /* room for close btn */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ─── Marquee (carrusel infinito) ─── activo en TODOS los breakpoints */
.ptvr-announcement__marquee {
    display: block;
    width: 100%;
    overflow: hidden;
    /* Layer promotion + `contain: paint`: parent y track en GPU desde el
       parse (sin transición main→compositor en el primer frame). El paint
       containment limita repaint si el track invalida pintura. */
    transform: translateZ(0);
    contain: paint;
}
.ptvr-announcement__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: center;
    /* Gap amplio para separar el • con aire (~160px texto-a-texto). */
    gap: var(--ptv-space-20);
    /* Layer promotion explícita desde el parse — sin transición
       main-thread → compositor en el primer frame de la animación. */
    transform: translateZ(0);
    will-change: transform;
}

/* CSS animation sobre `transform` corre en compositor — sigue moviendo
   aunque el main thread se bloquee (chats, ads).
   `--ptvr-marquee-distance` (JS, px) = `nPerHalf*passWidth` exacto del
   loop. Fallback `-50%` aproxima pre-JS, pero `gap` no agrega espacio
   trailing → mismatch g/2 sin la var en px. */
.ptvr-announcement__track.is-ready {
    animation: ptvr-announcement-marquee 30s linear infinite;
}

@keyframes ptvr-announcement-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(var(--ptvr-marquee-distance, -50%), 0, 0); }
}

/* Hover-pause via CSS — el compositor maneja pause/resume directamente
   sin involucrar el main thread. Permite leer y hacer click sobre links
   sin "perseguir" el contenido en movimiento. */
.ptvr-announcement:hover .ptvr-announcement__track.is-ready {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .ptvr-announcement__track,
    .ptvr-announcement__track.is-ready { animation: none; }
}
.ptvr-announcement__item,
.ptvr-announcement__sep {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.ptvr-announcement__sep { opacity: 0.6; }

/* Items link — color/hover/underline configurables desde Ajustes (--ptvr-ann-link*).
   Sin `transition`: aunque la propiedad no cambia mientras el item scrollea
   (solo el track translada), tener `transition` declarado puede inducir
   al browser a poner el elemento en su propia capa intermedia durante el
   movimiento. Sin transition los hover-states siguen funcionando — solo
   no animan, lo cual es aceptable para una barra de anuncios.

   `inline-flex` + `min-height: 24px` para cumplir WCAG 2.2 `target-size`:
   el texto del marquee es 14px con line-height 1.2 (= 16.8px), por debajo
   del mínimo de 24×24 para un target táctil. Extendemos el bounding box
   del <a> sin romper el layout flex del track. */
.ptvr-announcement__item--link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--ptvr-ann-link, inherit);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}
.ptvr-announcement__item--link:hover,
.ptvr-announcement__item--link:focus-visible {
    opacity: 0.85;
    color: var(--ptvr-ann-link-hover, var(--ptvr-ann-link, inherit));
}

.ptvr-announcement--no-underline .ptvr-announcement__item--link {
    text-decoration: none;
}


@media (min-width: 768px) {
    /* Pastilla con radius. SIN padding-bottom para pegar al nav. */
    .ptvr-announcement { padding-block: var(--ptv-space-2) 0; }
    .ptvr-announcement__inner { border-radius: var(--ptv-radius-md); }
}

@media (min-width: 992px) {
    .ptvr-announcement { padding-inline: var(--ptv-space-4); }
}

/* <lg: full-bleed edge-to-edge. */
@media (max-width: 991.98px) {
    .ptvr-announcement { padding-inline: 0; }
    .ptvr-announcement__inner { border-radius: 0; }
}

/* ─── Close button ─── */
.ptvr-announcement__close {
    position: absolute;
    top: 50%;
    right: var(--ptv-space-3);
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity var(--ptv-transition-fast);
}
.ptvr-announcement__close:hover { opacity: 1; }
.ptvr-announcement__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
 * PRODUCTO · single-producto.php — reusa `.ptvr-insurance__*`
 * ═══════════════════════════════════════════════════════════════ */

/* ── Checks ───────────────────────────────────────────────── */
.ptvr-product__check-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ptv-space-6);
}
.ptvr-product__check-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-3);
    text-align: center;
}
.ptvr-product__check-icon {
    font-size: var(--ptv-text-h4);
    color: var(--ptv-color-success-500);
}
.ptvr-product__check-label {
    font-size: var(--ptv-text-b3);
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
    line-height: var(--ptv-leading-tight);
}

/* ── Banners promocionales ────────────────────────────────── */
.ptvr-product__banner {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
    padding: var(--ptv-space-8);
    background: var(--ptv-color-neutral-200);
    border-radius: var(--ptv-radius-2xl);
    height: 100%;
}
.ptvr-product__banner-title {
    margin: 0;
    font-size: var(--ptv-text-h4);
    font-weight: var(--ptv-font-bold);
    color: var(--ptv-color-text-primary);
}
.ptvr-product__banner-body {
    flex: 1;
}
.ptvr-product__banner-cta {
    align-self: flex-start;
    margin-top: auto;
}

/* ── Felizdemora — bloque brand-specific ─────────────────── */
.ptvr-product__felizdemora {
    padding-block: calc(var(--ptv-space-24) + var(--ptv-space-6));
    background: var(--ptv-color-neutral-950);
    color: var(--ptv-color-text-inverse);
}
.ptvr-product__felizdemora-title {
    margin: 0 0 var(--ptv-space-12);
    text-align: center;
    font-size: var(--ptv-text-h2);
    font-weight: var(--ptv-font-bold);
    color: inherit;
}
.ptvr-product__felizdemora-grid {
    align-items: center;
}
.ptvr-product__felizdemora-h3 {
    margin: 0 0 var(--ptv-space-3);
    font-size: var(--ptv-text-h4);
    font-weight: var(--ptv-font-bold);
    color: inherit;
}
.ptvr-product__felizdemora-intro p {
    margin: 0;
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
    color: inherit;
}
.ptvr-product__felizdemora-media {
    text-align: center;
}
.ptvr-product__felizdemora-media img {
    max-width: 100%;
    height: auto;
    /* Red anti-CLS: fija ratio aunque alguna regla responsive pise el width/height. */
    aspect-ratio: 471 / 355;
}
.ptvr-product__felizdemora-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
}
.ptvr-product__felizdemora-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ptv-space-4);
    align-items: start;
}
.ptvr-product__felizdemora-icon {
    font-size: var(--ptv-text-h4);
    color: inherit;
    flex-shrink: 0;
}
.ptvr-product__felizdemora-step h4 {
    margin: 0 0 var(--ptv-space-1);
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-bold);
    color: inherit;
}
.ptvr-product__felizdemora-step p {
    margin: 0;
    font-size: var(--ptv-text-b4);
    line-height: var(--ptv-leading-normal);
    color: inherit;
    opacity: 0.92;
}
@media (max-width: 767.98px) {
    .ptvr-product__felizdemora { padding-block: var(--ptv-space-16); }
    .ptvr-product__felizdemora-title { margin-bottom: var(--ptv-space-8); }
}

/* ── Para empresas — wrapper del SPA ─────────────────────── */
.ptvr-product__empresas-h3 {
    margin: 0;
    font-size: var(--ptv-text-h5);
    font-weight: var(--ptv-font-bold);
    color: var(--ptv-color-text-primary);
}
.ptvr-product__empresas #demoEmpresas {
    max-width: 560px;
    margin-inline: auto;
    margin-top: var(--ptv-space-8);
}

/* ═══════════════════════════════════════════════════════════════
 * COBERTURA · single-cobertura.php
 * Schengen dropdown (informativo) + form "Sitio para Embajadas".
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-coverage__schengen {
    margin-top: var(--ptv-space-6);
}

.ptvr-coverage__schengen-heading {
    margin: 0 0 var(--ptv-space-3);
    font-size: var(--ptv-text-b3);
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-primary);
}

/* Trigger full-width de la columna. */
.ptvr-coverage__schengen-dropdown {
    display: block;
    width: 100%;
    max-width: 360px;
}
.ptvr-coverage__schengen-dropdown .ptv-dropdown__trigger {
    width: 100%;
    justify-content: space-between;
}
.ptvr-coverage__schengen-dropdown .ptv-dropdown__menu {
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    /* Reset <ul> defaults — el kit asume <div> en `.ptv-dropdown__menu`. */
    margin: 0;
    list-style: none;
}

/* Items informativos (<span>) — anular cursor/hover del kit. */
.ptvr-coverage__schengen-item {
    cursor: default;
}
.ptvr-coverage__schengen-item:hover {
    background: transparent;
}

/* "Sitio para Embajadas" — form montado por el SPA en #validateQuote. */
.ptvr-coverage__validate #validateQuote {
    max-width: 720px;
    margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════
 * PAGE — patrón genérico para Pages WP sin template propio.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-page {
    padding-block: calc(var(--ptv-space-24) + var(--ptv-space-6));
    color: var(--ptv-color-text-primary);
}

.ptvr-page__inner {
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.ptvr-page__title {
    margin: 0 0 var(--ptv-space-10);
    font-size: clamp(36px, 5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--ptv-color-text-primary);
}

/* Prose styling de the_content() — centrado, listas y blockquotes left. */
.ptvr-page__content {
    text-align: center;
    font-size: var(--ptv-text-b3);
    line-height: 1.6;
}

.ptvr-page__content > :first-child { margin-top: 0; }
.ptvr-page__content > :last-child  { margin-bottom: 0; }

.ptvr-page__content h2 {
    margin: var(--ptv-space-12) 0 var(--ptv-space-4);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.ptvr-page__content h3 {
    margin: var(--ptv-space-8) 0 var(--ptv-space-3);
    font-size: clamp(20px, 2.5vw, 24px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.ptvr-page__content h4 {
    margin: var(--ptv-space-6) 0 var(--ptv-space-2);
    font-size: 18px;
    font-weight: var(--ptv-font-semibold);
    line-height: 1.3;
}

.ptvr-page__content p {
    margin: 0 0 var(--ptv-space-4);
}

.ptvr-page__content a {
    color: var(--ptv-color-text-brand);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: opacity var(--ptv-transition-fast);
}
.ptvr-page__content a:hover,
.ptvr-page__content a:focus-visible {
    opacity: 0.8;
}

.ptvr-page__content strong { font-weight: var(--ptv-font-semibold); }
.ptvr-page__content em     { font-style: italic; }

/* Listas — left-align, max-width estrecho centrado. */
.ptvr-page__content ul,
.ptvr-page__content ol {
    margin: 0 auto var(--ptv-space-4);
    padding-inline-start: var(--ptv-space-6);
    max-width: 600px;
    text-align: left;
}
.ptvr-page__content li { margin-bottom: var(--ptv-space-2); }
.ptvr-page__content li:last-child { margin-bottom: 0; }

/* Imágenes — centradas, radius del kit. */
.ptvr-page__content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--ptv-space-8) auto;
    border-radius: var(--ptv-radius-md);
}

.ptvr-page__content figure {
    margin: var(--ptv-space-8) auto;
}
.ptvr-page__content figure img { margin: 0 auto; }
.ptvr-page__content figcaption {
    margin-top: var(--ptv-space-2);
    font-size: var(--ptv-text-c1);
    color: var(--ptv-color-text-secondary);
}

/* Gutenberg alignments. */
.ptvr-page__content .alignleft   { float: left;  margin: 0 var(--ptv-space-6) var(--ptv-space-4) 0; }
.ptvr-page__content .alignright  { float: right; margin: 0 0 var(--ptv-space-4) var(--ptv-space-6); }
.ptvr-page__content .aligncenter { margin-left: auto; margin-right: auto; }
.ptvr-page__content .alignwide,
.ptvr-page__content .alignfull {
    margin-inline: calc((100vw - 100%) / -2 * 0.4);
    max-width: none;
}

/* Blockquote — left-align. */
.ptvr-page__content blockquote {
    margin: var(--ptv-space-8) auto;
    padding: var(--ptv-space-4) var(--ptv-space-6);
    max-width: 720px;
    background: var(--ptv-color-neutral-200);
    border-left: 3px solid var(--ptv-color-brand-600);
    border-radius: var(--ptv-radius-sm);
    text-align: left;
    font-style: italic;
}

@media (max-width: 767.98px) {
    .ptvr-page { padding-block: var(--ptv-space-20); }
    .ptvr-page__title { margin-bottom: var(--ptv-space-8); }
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · TEMPLATE · page-templates/page-inicio.php
 * Espaciado uniforme entre secciones: cada hijo directo de
 * `.ptvr-inicio` lleva el mismo margin-bottom para que el ritmo
 * vertical sea coherente. Cambiar el token aquí ajusta TODA la home
 * de una sola vez. Desktop only — mobile usa sus propios overrides.
 * ═══════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .ptvr-inicio > * {
        margin-bottom: var(--ptv-space-20);   /* 80px uniforme */
    }
    .ptvr-inicio > *:last-child {
        margin-bottom: 0;
    }

    /* Secciones que SE FUNDEN con el bg blanco de la página → `padding-block: 0`.
       Su contenido no necesita aire respecto a su propio fondo (es el mismo
       del wrapper). El gap entre secciones lo aporta el margin-bottom uniforme.
       Sin esto, su padding-block (86-120) se sumaba al margin → demasiado blanco. */
    .ptvr-inicio-contenido { padding-bottom: 0; }
    .ptvr-inicio .ptv-banner-ticket { padding-block: 0; }
    .ptvr-inicio-blog { padding-block: 0; }
    .ptvr-inicio-faqs { padding-block: 0; }

    /* Bloque-scroll header: padding-top 0 (el margin uniforme ya separa de la
       sección previa), padding-bottom 64 para separar el título del runway.
       `.ptvr-inicio-bs__header` solo se usa en inicio así que el scope no es
       necesario, pero lo dejamos por consistencia con el resto del bloque. */
    .ptvr-inicio-bs__header { padding-block: 0 var(--ptv-space-16); }

    /* Nota: las secciones `.ptvr-contact-cta`, `.ptvr-related` y `.ptvr-tp-reviews`
       traen el padding interno (64 px) directamente en sus reglas component-level.
       Mismo valor en TODAS las páginas que las consumen. */
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · HERO · template-parts/sections/inicio/hero.php (Figma 781:31073)
 * Hero full-bleed, dark bg con elipse-spotlight + cotizador + cards.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-inicio-hero {
    position: relative;
    /* z-index 50 para que la barra fixed del cotizador v3 quede sobre el
       bloque-scroll pinneado y los carousels del kit. */
    z-index: 50;
    /* min-height anti-jump cuando el SPA del cotizador monta y crece. */
    min-height: clamp(640px, 88vh, 980px);
    /* Margin-inline = padding del header (16). NO setear margin-block aquí:
       `.ptvr-inicio > *` aporta el margin-bottom uniforme; un valor local
       ganaría por cascada. */
    margin-inline: var(--ptv-space-4);
    isolation: isolate;
    color: var(--ptv-color-text-inverse, #fff);
    /* Figma 781:31073: padding-top 110, padding-bottom 31. */
    padding-block: clamp(72px, 8vw, 110px) clamp(16px, 2vw, 31px);
    /* SIN overflow:clip/border-radius aquí: van en `__clip` para que los
       dropdowns absolutos del cotizador puedan desbordar el stage. */
}

/* Clip wrapper — capas decorativas + radius + overflow clipping. */
.ptvr-inicio-hero__clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--ptv-radius-xl, 12px);
    overflow: clip;
    background-color: var(--ptv-color-neutral-950);
}

/* 3 capas absolutas: __bg (imagen/video con blur opc), __overlay (dark),
   __spotlight (mismo bg sin blur, masked por radial-gradient cursor → reveal). */
.ptvr-inicio-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.ptvr-inicio-hero--blur .ptvr-inicio-hero__bg--image {
    filter: blur(var(--bg-blur, 12px));
    /* Scale up un poco para que los bordes del blur no muestren bordes
       transparentes/limpios — un blur grande crea bandas en los bordes
       de la imagen. */
    transform: scale(1.06);
}

/* Video bg — el video llena el contenedor. No se aplica blur por
   regla del editor (caro y poco usado). */
.ptvr-inicio-hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay dark uniforme — el spotlight encima crea el reveal. */
.ptvr-inicio-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / var(--bg-overlay-alpha, 0.4));
    pointer-events: none;
}

/* Ken Burns — solo al bg-image base (escalar el spotlight descalibraría el reveal). */
@keyframes ptvr-inicio-hero-kenburns {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.ptvr-inicio-hero--kenburns .ptvr-inicio-hero__bg--image {
    animation: ptvr-inicio-hero-kenburns 14s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}
/* a11y: respeta prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .ptvr-inicio-hero--kenburns .ptvr-inicio-hero__bg--image {
        animation: none;
    }
}

/* Capa noise (film grain) — fractal SVG inline + mix-blend overlay. */
.ptvr-inicio-hero__noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    opacity: 0.5;
    pointer-events: none;
}

/* ── Capa de ruido global sobre imágenes ─────────────────────────────
   Activada por `.ptvr-noise` en el <body> (Ajustes → Config. General →
   "Capa de ruido global"). Aplica el filtro SVG `#ptvr-noise` (definido
   inline en footer.php) a las imágenes de contenido — mismo look que el
   hero de Inicio, pero embebido en el render de cada <img> en vez de un
   overlay, para que funcione en todo el sitio sin tocar el markup.

   El hero de Inicio usa background-image (no <img>), así que conserva su
   overlay dedicado y NO recibe doble ruido. */
.ptvr-noise img {
    filter: url(#ptvr-noise);
}

/* Excepciones (regla posterior + mayor especificidad → sin !important):
   - SVG: logos/iconos vectoriales servidos como .svg
   - [class*="logo"]: cubre todas las clases `*__logo` (header, footer,
     aliados, opiniones, b2b2c, marcas…), presentes y futuras
   - .ptvr-no-noise: opt-out manual para casos puntuales del editor
   - flags (flagcdn, raster) y logos de partners del megamenú/mobile,
     cuyo <img> no lleva clase con "logo". */
.ptvr-noise img[src$=".svg"],
.ptvr-noise img[class*="logo"],
.ptvr-noise img.ptvr-no-noise,
.ptvr-noise .ptv-flag__img,
.ptvr-noise .ptvr-megamenu__partner img,
.ptvr-noise .ptvr-mm__partner img {
    filter: none;
}

/* Spotlight — masked por radial al cursor (--spot-x/y) → reveal sobre blur. */
.ptvr-inicio-hero__spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    /* Múltiples stops para feather natural sin bordes duros. */
    --_mask: radial-gradient(
        circle calc(var(--ellipse-size, 400px) / 2) at var(--spot-x) var(--spot-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.92) 20%,
        rgba(0, 0, 0, 0.7) 45%,
        rgba(0, 0, 0, 0.35) 70%,
        rgba(0, 0, 0, 0.1) 90%,
        rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: var(--_mask);
    mask-image: var(--_mask);
}

/* Posición default del spotlight (Figma: esquina superior derecha). JS sobreescribe. */
.ptvr-inicio-hero--ellipse {
    --spot-x: calc(100% - var(--ellipse-size, 400px) / 2 - 40px);
    --spot-y: calc(var(--ellipse-size, 400px) / 2 + 60px);
}

/* Mobile/touch/reduced-motion: sin spotlight, blur capped. */
@media (max-width: 767.98px),
       (pointer: coarse),
       (prefers-reduced-motion: reduce) {
    .ptvr-inicio-hero__spotlight { display: none; }
    .ptvr-inicio-hero--blur .ptvr-inicio-hero__bg--image {
        filter: blur(min(var(--bg-blur, 12px), 6px));
    }
}

/* Bg type: stage — texto decorativo con reveal por elipse cursor (réplica del 404). */
.ptvr-inicio-hero__stage-text {
    position:        absolute;
    /* Anti-CLS: ancla Y al viewport, no al alto de la sección
       (que crece cuando el SPA monta). */
    top:             50vh;
    left:            0;
    right:           0;
    transform:       translateY(-50%);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    font-family:     var(--ptv-font-sans);
    /* Font-size adaptativo: min(horizontal vw/chars, vertical vh/líneas). */
    font-size:       clamp(60px, min(
        calc(180vw / max(var(--stage-char-count, 4), 4)),
        calc(80vh / max(var(--stage-line-count, 1), 1))
    ), 520px);
    font-weight:     var(--ptv-font-semibold);
    line-height:     0.85;
    letter-spacing:  -0.07em;
    user-select:     none;
    pointer-events:  none;
}

/* Línea independiente con nowrap. */
.ptvr-inicio-hero__stage-text-line {
    display:     block;
    white-space: nowrap;
}

/* Capa base fantasma. */
.ptvr-inicio-hero__stage-text--base {
    z-index: 0;
    color:   rgba(255, 255, 255, 0.06);
}

/* Capa spot — gradient brand→teal, bg-clip:text, masked por la elipse. */
.ptvr-inicio-hero__stage-text--spot {
    z-index:    1;
    background: linear-gradient(
        135deg,
        var(--ptv-color-brand-400) 0%,
        var(--ptv-color-brand-600) 35%,
        var(--ptv-color-teal-400)  72%,
        var(--ptv-color-teal-500)  100%
    );
    background-size: 180% 180%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ptvr-inicio-hero-stage-drift 14s ease-in-out infinite;
    --_mask: radial-gradient(
        circle calc(var(--ellipse-size, 460px) / 2) at var(--spot-x) var(--spot-y),
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.75) 42%,
        rgba(0, 0, 0, 0.4)  68%,
        rgba(0, 0, 0, 0.12) 88%,
        rgba(0, 0, 0, 0)    100%
    );
    -webkit-mask-image: var(--_mask);
            mask-image: var(--_mask);
    /* Glow sutil sobre dark. */
    filter:
        drop-shadow(0 0 32px rgba(255, 90, 93, 0.38))
        drop-shadow(0 0 64px rgba(14, 158, 142, 0.22));
}

@keyframes ptvr-inicio-hero-stage-drift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Mobile/touch/reduced-motion: solo texto fantasma base. */
@media (max-width: 767.98px),
       (pointer: coarse),
       (prefers-reduced-motion: reduce) {
    .ptvr-inicio-hero__stage-text--spot { display: none; }
}

.ptvr-inicio-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 1408px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

/* ── Top block: trustpilot + headline + CTA ─────────────── */
.ptvr-inicio-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma: gap-26 entre trustpilot/headline/CTA. */
    gap: 26px;
    text-align: center;
    /* Figma: content-hero w 583. */
    max-width: 583px;
}

/* Trustpilot Micro TrustScore — Figma master pill 250 wide, min-height anti-CLS. */
.ptvr-inicio-hero__trustpilot.trustpilot-widget {
    max-width: 250px;
    width: 100%;
    min-height: 20px;
}

/* Headline — Inter SemiBold 42px / -0.04em / line-height 1.1 */
.ptvr-inicio-hero__headline {
    margin: 0;
    color: var(--ptv-color-text-inverse);
    font-family: var(--ptv-font-sans);
    font-size: clamp(28px, 4.2vw, 42px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

/* Imagen inline al final del titular — escala con el font-size (height:1em). */
.ptvr-inicio-hero__headline-img {
    display: inline-block;
    height: 1em;
    width: auto;
    vertical-align: middle;
    margin-inline-start: 0.1em;
}

/* CTA pill blanca con icon WA opcional. */
.ptvr-inicio-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    background: var(--ptv-color-base-white);
    color: var(--ptv-color-neutral-950);
    padding: 8px 20px 8px 10px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ptvr-inicio-hero__cta:hover,
.ptvr-inicio-hero__cta:focus-visible {
    color: var(--ptv-color-neutral-950);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    outline: none;
}

.ptvr-inicio-hero__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border-radius: 999px;
    flex-shrink: 0;
}
.ptvr-inicio-hero__cta-icon img { display: block; }

.ptvr-inicio-hero__cta-text strong,
.ptvr-inicio-hero__cta-text b {
    font-weight: 700;
}

/* Cotizador (iframe global #ptv__app) — override del display:none en este contexto. */
.ptvr-inicio-hero__cotizador {
    width: 100%;
    max-width: 1355px;
}

/* Mount del SPA — min-height 220px anti-CLS para que el stage-text no salte. */
.ptvr-inicio-hero__cotizador #ptv__app {
    display: block;
    width: 100%;
    height: auto;
    min-height: 220px;
}

/* Neutraliza el .cotizador-container legacy del dispatcher. */
.ptvr-inicio-hero__cotizador .cotizador-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Notificaciones "Novedades para ti" — gap al cotizador lo aporta
   `__inner gap: 89.5px`. Figma master: notifications-wrapper w 714. */
.ptvr-inicio-hero__notifications {
    width: 100%;
    max-width: 714px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-6);
}

.ptvr-inicio-hero__notifications-title {
    margin: 0;
    color: var(--ptv-color-text-inverse);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.04em;
    text-align: center;
}

.ptvr-inicio-hero__notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ptv-space-2);
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.ptvr-inicio-hero__notification {
    flex: 1 1 320px;
    max-width: 360px;
}

/* Card glassmorphism — backdrop-blur + inset shadows del Figma. */
.ptvr-inicio-hero__notification-link {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-4);
    padding: 15px;
    border-radius: 20px;
    text-decoration: none;
    color: var(--ptv-color-text-inverse);
    background: rgba(122, 122, 122, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow:
        inset  1px  0.5px 0 0 rgba(255, 255, 255, 0.6),
        inset -1px -1px   0 0 rgba(255, 255, 255, 0.4),
        inset  0    0     5px 0 rgba(255, 255, 255, 0.15),
        inset  0    2px   20px 2px rgba(53, 53, 53, 0.05),
        0 2px 30px rgba(0, 0, 0, 0.05),
        0 8px 72px -5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ptvr-inicio-hero__notification-link:hover,
.ptvr-inicio-hero__notification-link:focus-visible {
    color: var(--ptv-color-text-inverse);
    transform: translateY(-2px);
    outline: none;
}

.ptvr-inicio-hero__notification-emoji {
    flex-shrink: 0;
    width: 51px;
    height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(215, 218, 185, 0.5);
    mix-blend-mode: hard-light;
    font-size: 24px;
    line-height: 1;
}

.ptvr-inicio-hero__notification-text {
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ptvr-inicio-hero__notification-arrow {
    margin-left: 4px;
    display: inline-block;
}

/* Responsive <lg — "floating card" coherente con margin-inline:8px. */
@media (max-width: 991.98px) {
    .ptvr-inicio-hero {
        margin: 0 8px 8px;
        padding-block: 56px 20px;
        /* min-height liberado: stage-text oculto y cotizador detached. */
        min-height: 0;
    }
    .ptv-banner-ticket--inicio,
    .ptvr-inicio-contenido,
    .ptvr-inicio-bs,
    .ptvr-inicio-blog,
    .ptvr-inicio-faqs {
        margin-inline: 8px;
    }
    /* Anula padding-block 96 que el kit aplica al `.ptv-banner-ticket`
       base; en <lg el ritmo lo aportan los margins entre secciones. */
    .ptv-banner-ticket {
        padding-block: 0;
    }
    /* Feliz-demora + Nosotros cierre + Single-seguro-viaje: estas secciones
       banner-ticket sí necesitan respiro vertical en mobile+tablet (la regla
       global de arriba pone padding-block: 0). */
    .ptvr-fdmr-incluido,
    .ptvr-fdmr-empresa,
    .ptv-banner-ticket--gray,
    .ptvr-nos-cierre,
    .ptvr-insurance__banner-ticket {
        padding-block: var(--ptv-space-12);
    }
    /* Alinea banner-ticket con los cards de contenido (24px desde el edge). */
    .ptv-banner-ticket--inicio .ptv-container--loose,
    .ptvr-inicio-blog .ptv-container--loose,
    .ptvr-inicio-faqs .ptv-container--loose {
        padding-inline: var(--ptv-space-4);
    }
    .ptvr-inicio-contenido__inner {
        padding-inline: var(--ptv-space-4);
    }
    .ptvr-inicio-bs__messages,
    .ptvr-inicio-bs__cob {
        padding-inline: var(--ptv-space-4);
    }
    .ptvr-inicio-hero__inner {
        gap: var(--ptv-space-1);
    }
    .ptvr-inicio-hero__content {
        gap: var(--ptv-space-4);
    }
    .ptvr-inicio-hero__cta {
        font-size: 12px;
    }
    /* SPA bleeds to 0 con negative margin (rompe el padding del __inner). */
    .ptvr-inicio-hero__cotizador {
        margin-inline: calc(clamp(16px, 4vw, 32px) * -1);
        width: auto;
        max-width: none;
    }
    /* <lg: el JS de hero.php saca el cotizador del hero (detached, hermano del .ptvr-inicio). */
    .ptvr-inicio-hero__cotizador--detached {
        margin: 8px 8px;
        width: auto;
        max-width: none;
    }
    /* Detached: soltamos min-height (trade-off: leve CLS aceptable). */
    .ptvr-inicio-hero__cotizador--detached #ptv__app {
        height: auto;
        min-height: 0;
    }
    /* Neutraliza padding standalone del SPA (`pt-20 px-6 pb-6`). TODO: fix en SPA. */
    .ptvr-inicio-hero__cotizador--detached #ptv__app .ptv-h-dvh {
        padding: 0;
    }
    /* Sin cotizador inline: respiro entre content y notifications. */
    .ptvr-inicio-hero__inner:not(:has(.ptvr-inicio-hero__cotizador)) .ptvr-inicio-hero__notifications {
        margin-top: var(--ptv-space-4);
    }
    /* "Novedades para ti": anula margin-top base; el gap del __inner basta. */
    .ptvr-inicio-hero__notifications {
        margin-top: 0;
    }
    /* stage-text oculto en <lg (no hay zona libre vertical para él). */
    .ptvr-inicio-hero__stage-text { display: none; }
    .ptvr-inicio-hero__notifications-list {
        flex-direction: column;
        align-items: stretch;
    }
    /* Cards content-sized en column layout (sin el flex 1 1 320 default). */
    .ptvr-inicio-hero__notification {
        flex: 0 0 auto;
        max-width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · CONTENIDO · contenido.php (Figma 781:31254)
 * 2 cols: izq sticky con copy, der pila de cards dark con title bicolor.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-inicio-contenido {
    background: var(--ptv-color-bg-base, #fff);
    color: var(--ptv-color-neutral-950);
    /* Figma 781:31254: bloxk text 5 empieza en y=0, tira termina en y=861,
       frame 947h → padding-top 0, padding-bottom 86. */
    padding-block: 0 86px;
    /* Margin-bottom: lo aporta la regla uniforme `.ptvr-inicio > * { ... }`. */
}

.ptvr-inicio-contenido__inner {
    max-width: 1408px;
    margin: 0 auto;
    display: grid;
    /* Der 495px (Figma). */
    grid-template-columns: minmax(0, 1fr) 495px;
    /* Figma: gap horizontal 199px entre col izq (633w) y col der (495w). */
    gap: clamp(40px, 14vw, 199px);
    align-items: start;
}

/* Padding-inline asimétrico desktop only (Figma: 61 izq / 52 der).
   En <lg lo aporta el override en `@media (max-width: 991.98px)` arriba. */
@media (min-width: 992px) {
    .ptvr-inicio-contenido__inner {
        padding-inline: 61px 52px;
    }
}

/* Lado izquierdo (sticky) */
.ptvr-inicio-contenido__sticky-wrap {
    position: relative;
    height: 100%;
}

.ptvr-inicio-contenido__sticky {
    position: sticky;
    top: var(--ptv-sticky-offset, 96px);
    display: flex;
    flex-direction: column;
    /* Figma: 40px gap eyebrow ↔ title ↔ desc ↔ CTA. */
    gap: 40px;
    max-width: 633px;
}

.ptvr-inicio-contenido__eyebrow {
    margin: 0;
    color: var(--ptv-color-brand-600, #ff5a5f);
    /* Figma: h400-inter-medium → 24px / medium / lh 1.0. */
    font-size: 24px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    line-height: 1;
}

.ptvr-inicio-contenido__title {
    margin: 0;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.ptvr-inicio-contenido__desc {
    margin: 0;
    color: var(--ptv-color-neutral-950);
    font-size: 18px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    line-height: var(--ptv-leading-normal);
    max-width: 56ch;
}

/* CTA del kit; solo align-self propio. */
.ptvr-inicio-contenido__cta {
    align-self: flex-start;
}

/* Cards apiladas pegadas — divider <hr> entre cada par. */
.ptvr-inicio-contenido__cards {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 495px;
    justify-self: end;
}

/* Divider en la costura entre cards — margin-inline = inset del radius. */
.ptvr-inicio-contenido__divider {
    width: auto;
    margin-block: 0;
    margin-inline: 42px;
}

.ptvr-inicio-contenido__card {
    background: var(--ptv-color-neutral-950);
    color: var(--ptv-color-text-inverse);
    border-radius: 42px;
    padding: clamp(32px, 3.5vw, 47px) clamp(28px, 3vw, 41px);
    min-height: 436px;                 /* Figma — fija altura mínima */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(48px, 6vw, 96px);       /* gap entre título y descripción */
    position: relative;
    overflow: hidden;
}


.ptvr-inicio-contenido__card-title {
    margin: 0;
    font-family: var(--ptv-font-sans);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.ptvr-inicio-contenido__card-title-main {
    color: var(--ptv-color-text-inverse);
}

.ptvr-inicio-contenido__card-title-accent {
    color: #c1c4c6;
}

.ptvr-inicio-contenido__card-desc {
    margin: 0;
    color: var(--ptv-color-text-inverse);
    font-size: clamp(16px, 1.5vw, 20px);
    font-weight: var(--ptv-font-regular);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ptvr-inicio-contenido {
        padding-block: var(--ptv-space-12, 48px);
    }
    .ptvr-inicio-contenido__inner {
        grid-template-columns: 1fr;
        gap: var(--ptv-space-12, 48px);
    }
    /* Sticky pasa a static cuando se apila. */
    .ptvr-inicio-contenido__sticky {
        position: static;
        top: auto;
        gap: var(--ptv-space-6, 24px);
        max-width: 100%;
    }
    .ptvr-inicio-contenido__cards {
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 767.98px) {
    .ptvr-inicio-contenido__card {
        border-radius: 28px;
        min-height: 320px;
        padding: var(--ptv-space-8, 32px) var(--ptv-space-6, 24px);
        gap: var(--ptv-space-8, 32px);
    }
    .ptvr-inicio-contenido__divider {
        margin-inline: 28px;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · BANNER TICKET — Figma 781:31162
 * Reusa `.ptv-banner-ticket`. `--inicio` activa título bicolor.
 * ═══════════════════════════════════════════════════════════════ */

.ptv-banner-ticket--inicio .ptv-banner-ticket__title {
    color: #c1c4c6;
}
/* Accent (color claro). strong/b mantenidos por backward-compat. */
.ptv-banner-ticket--inicio .ptv-banner-ticket__title .ptv-banner-ticket__title-accent,
.ptv-banner-ticket--inicio .ptv-banner-ticket__title strong,
.ptv-banner-ticket--inicio .ptv-banner-ticket__title b {
    color: #f4f5f6;
    font-weight: inherit;   /* mantiene el semibold del h2 */
}

/* CTA del banner-ticket — el kit ahora usa `margin-top: auto` global
   para anclar el CTA al fondo del card. No requiere override aquí. */

/* Responsive (<lg): el contenedor de imagen es CUADRADO porque la
   imagen real de eSIM tiene ratio ≈ 1:1 (~420×427px) — usar el `16/10`
   default del kit la recorta arriba/abajo. Importante: levantamos el
   `max-height: 14rem` que el kit aplica en `.ptv-card__image` a <=640px,
   porque ese cap rompe el `aspect-ratio` (el container se queda en
   224px × ancho-del-flex, en lugar de un cuadrado del ancho del card).
   Con `max-height: none` el square gana y la imagen se muestra completa.
   Scoped a `--inicio` para no afectar a otros consumidores. */
@media (max-width: 991.98px) {
    .ptv-banner-ticket--inicio .ptv-card__image.ptv-banner-ticket__media {
        aspect-ratio: 1 / 1;
        max-height: none;
    }
}

/* Banner-ticket en tablet (641–991.98px): el kit lo deja horizontal,
   pero la imagen se sale del card cuando el ancho disponible no alcanza.
   Forzamos stack (imagen abajo) igual que en mobile.
   Override de `ptv-design-kit/src/components.css` @5190-5215. */
@media (min-width: 641px) and (max-width: 991.98px) {
    .ptv-banner-ticket .ptv-card--image-right,
    .ptv-banner-ticket .ptv-card--image-left {
        flex-direction: column;
    }
    .ptv-banner-ticket .ptv-card--image-right .ptv-card__body,
    .ptv-banner-ticket .ptv-card--image-left  .ptv-card__body    { order: 0; }
    .ptv-banner-ticket .ptv-card--image-right .ptv-card__divider,
    .ptv-banner-ticket .ptv-card--image-left  .ptv-card__divider { order: 1; }
    .ptv-banner-ticket .ptv-card--image-right .ptv-card__image,
    .ptv-banner-ticket .ptv-card--image-left  .ptv-card__image   {
        order: 2;
        flex: 0 0 auto;
    }
    /* Divider vuelve a horizontal (el kit lo puso vertical en tablet). */
    .ptv-banner-ticket .ptv-card--image-right .ptv-card__divider,
    .ptv-banner-ticket .ptv-card--image-left  .ptv-card__divider {
        border-top:    var(--ptv-border-width-md) dashed var(--ptv-color-border);
        border-left:   none;
        width:         auto;
        height:        0;
        align-self:    auto;
        margin-block:  0;
        margin-inline: var(--_card-radius);
    }
}


/* ═══════════════════════════════════════════════════════════════
 * BANNER-TICKET --gray (FelizDemora "Cerca de ti…")
 * Title bicolor con <strong> en gris faded.
 * ═══════════════════════════════════════════════════════════════ */

.ptv-banner-ticket--gray .ptv-banner-ticket__title {
    color: var(--ptv-color-text-primary);
}
.ptv-banner-ticket--gray .ptv-banner-ticket__title strong,
.ptv-banner-ticket--gray .ptv-banner-ticket__title b {
    color: var(--ptv-color-neutral-600);
    font-weight: inherit;
}
.ptv-banner-ticket--gray .ptv-banner-ticket__body {
    color: var(--ptv-color-text-secondary, var(--ptv-color-neutral-800));
}

/* Figma 781:24855 — section padding pt-0 pb-50 (vs kit default 96/96). */
.ptv-banner-ticket--gray {
    padding-block: 0 50px;
}


/* ═══════════════════════════════════════════════════════════════
 * `.ptvr-glass-card` — chat-card glassmorphism reusable
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-glass-card {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-4);
    padding: 15px;
    border-radius: 20px;
    color: var(--ptv-color-text-inverse);
    background: rgba(122, 122, 122, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow:
        inset  1px  0.5px 0 0 rgba(255, 255, 255, 0.6),
        inset -1px -1px   0 0 rgba(255, 255, 255, 0.4),
        inset  0    0     5px 0 rgba(255, 255, 255, 0.15),
        inset  0    2px   20px 2px rgba(53, 53, 53, 0.05),
        0 2px 30px rgba(0, 0, 0, 0.05),
        0 8px 72px -5px rgba(0, 0, 0, 0.1);
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · BLOQUE SCROLL — Figma 781:31163
 * Pin sticky 100vh + runway 500vh. JS calcula progress y anima:
 *   - opacity/transform en headline/teléfono/mensajes/coberturas
 *   - --media-w/h/r/opacity en el wrapper del bg que morpha.
 * Bail con `--static` si reduced-motion.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-inicio-bs {
    --overlay-opacity: 0;
    /* Mitad del teléfono — los slots de mensajes se anclan a su borde. */
    --phone-half: clamp(110px, 11vw, 240px);
    --msg-gap: 6px;
    --msg-offset: calc(var(--phone-half) + var(--msg-gap));
    position: relative;
    background: var(--ptv-color-base-white);
}

/* Header en flujo normal antes del runway (no superpuesto al pin). */
.ptvr-inicio-bs__header {
    position: relative;
    max-width: 950px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 120px) var(--ptv-space-5) clamp(32px, 4vw, 64px);
    text-align: center;
}

.ptvr-inicio-bs__header-title {
    margin: 0;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(28px, 4.5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

/* Runway 500vh edge-to-edge (margin negativo bleeds full-viewport). */
.ptvr-inicio-bs__runway {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 500vh;
}

/* Pin sticky 100vh. JS aplica --media-y para empujar la forma cuando se reduce. */
.ptvr-inicio-bs__pin {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: clip;
    isolation: isolate;
    background: var(--ptv-color-base-white);
}

/* Capa 0: media — bg image que morpha de full-bleed → card → pastilla. */
.ptvr-inicio-bs__media {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--media-y, 0px));
    transform: translate(-50%, -50%);
    width: var(--media-w, 100vw);
    height: var(--media-h, 100vh);
    border-radius: var(--media-r, 0px);
    overflow: hidden;
    opacity: 1;
    z-index: 1;
    will-change: width, height, border-radius, top;
    background: var(--ptv-color-neutral-950);
}
.ptvr-inicio-bs__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Capa 1: overlay dark sobre el media ──────────────────── */
.ptvr-inicio-bs__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    opacity: var(--overlay-opacity, 0);
    z-index: 2;
    pointer-events: none;
}

/* Capa 2: teléfono — anclado al bottom, slide-up via JS. */
.ptvr-inicio-bs__phone {
    position: absolute;
    left: 50%;
    bottom: -6%;
    /* Inicial fuera del viewport; JS interpola 90% → 0% en scroll. */
    transform: translateX(-50%) translateY(90%);
    width: calc(var(--phone-half) * 2);
    aspect-ratio: 338 / 694;
    opacity: 1;
    z-index: 4;
    pointer-events: none;
}
.ptvr-inicio-bs__phone-shell {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ptvr-inicio-bs__phone-screen {
    position: absolute;
    top: 7.88%;
    left: 3.27%;
    right: 3.27%;
    bottom: 11.16%;
    width: auto;
    height: auto;
    border-radius: clamp(14px, 1.7vw, 24px);
    object-fit: cover;
    display: block;
}

/* Capa 4: 6 mensajes en 3 filas × 2 cols flanqueando el teléfono. JS staggers via --idx. */
.ptvr-inicio-bs__messages {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 3;
    pointer-events: none;
}

.ptvr-inicio-bs__msg {
    position: absolute;
    /* Figma master: chat-card w 353. */
    width: clamp(240px, 24vw, 353px);
    pointer-events: auto;
    /* SIN transform/opacity aquí — rompería el backdrop-blur del hijo .__msg-card. */
}

/* Slots anclados al teléfono. La fila central recibe --msg-mid-extra para
   abrirse más (las top/bottom abrazan el teléfono, la media queda afuera). */
.ptvr-inicio-bs {
    --msg-mid-extra: clamp(40px, 6vw, 100px);
}

.ptvr-inicio-bs__msg--slot-0 { top: 38vh; right: calc(50% + var(--msg-offset)); }
.ptvr-inicio-bs__msg--slot-1 { top: 38vh; left:  calc(50% + var(--msg-offset)); }
.ptvr-inicio-bs__msg--slot-2 { top: 54vh; right: calc(50% + var(--msg-offset) + var(--msg-mid-extra)); }
.ptvr-inicio-bs__msg--slot-3 { top: 54vh; left:  calc(50% + var(--msg-offset) + var(--msg-mid-extra)); }
.ptvr-inicio-bs__msg--slot-4 { top: 70vh; right: calc(50% + var(--msg-offset)); }
.ptvr-inicio-bs__msg--slot-5 { top: 70vh; left:  calc(50% + var(--msg-offset)); }

/* Glass-card más opaco para que el frosting funcione sobre el media morphing.
   opacity/transform aquí (no en el <li>) para no romper el backdrop-filter. */
.ptvr-inicio-bs__msg-card {
    width: 100%;
    opacity: 0;
    transform: translateY(24px);
    background: rgba(122, 122, 122, 0.22);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.ptvr-inicio-bs__msg-icon {
    --icon-bg: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
    width: 51px;
    height: 51px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--icon-bg);
    font-size: 24px;
    line-height: 1;
    overflow: hidden;
}
.ptvr-inicio-bs__msg-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ptvr-inicio-bs__msg-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptvr-inicio-bs__msg-heading {
    margin: 0;
    color: #fcfdfd;
    font-size: 16px;
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ptvr-inicio-bs__msg-body {
    margin: 0;
    color: #fcfdfd;
    font-size: 12px;
    font-weight: var(--ptv-font-regular);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Capa 5: coberturas — grid 3-col (items | hueco-pastilla | items). */
.ptvr-inicio-bs__cob {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 80px);
    /* Mismo --media-y para alinear con el morph del media. */
    transform: translateY(var(--media-y, 0px));
    opacity: 0;
    z-index: 6;
    pointer-events: none;
}

/* Header dark sobre el bg blanco del pin, alineado a la col izq. */
.ptvr-inicio-bs__cob-header {
    text-align: left;
    align-self: flex-start;
    max-width: 720px;
    color: var(--ptv-color-neutral-950);
}

.ptvr-inicio-bs__cob-title {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ptv-color-neutral-950);
    text-wrap: balance;
}

.ptvr-inicio-bs__cob-lead {
    margin: 8px 0 0;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: var(--ptv-font-medium);
    line-height: 1.3;
    color: rgba(6, 21, 30, 0.75);
}

.ptvr-inicio-bs__cob-grid {
    display: grid;
    /* Figma: pastilla central 417px (no 460 como tenía). */
    grid-template-columns: 1fr 417px 1fr;
    gap: clamp(20px, 3vw, 60px);
    align-items: center;
    width: 100%;
    max-width: 1320px;
}

.ptvr-inicio-bs__cob-col {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 38px);
    min-width: 0;
}

/* Items siempre left-aligned (ambas cols). */
.ptvr-inicio-bs__cob-col--left,
.ptvr-inicio-bs__cob-col--right {
    text-align: left;
    align-items: flex-start;
}

/* Hueco para la pastilla del media. */
.ptvr-inicio-bs__cob-anchor {
    width: 100%;
    aspect-ratio: 417 / 570;
}

.ptvr-inicio-bs__cob-item {
    display: flex;
    flex-direction: column;
    /* Figma: title h=42 termina en y=42, links bullets frame inicia en
       y=61 → gap = 19px. Usamos space-5 (20) por simplicidad. */
    gap: var(--ptv-space-5);
    max-width: 387px;
    opacity: 0;
    transform: translateY(24px);
}

/* Divider dashed entre items (mismo patrón que Reveal). */
.ptvr-inicio-bs__cob-item + .ptvr-inicio-bs__cob-item {
    padding-top: clamp(20px, 2vw, 28px);
    border-top: 1px dashed var(--ptv-color-border, rgba(6, 21, 30, 0.18));
}

.ptvr-inicio-bs__cob-item-title {
    margin: 0;
    color: var(--ptv-color-brand-600, #ff5a5f);
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: left;
}

/* Bullets — list-style disc explícito por si el kit los neutraliza. */
.ptvr-inicio-bs__cob-bullets {
    margin: 0;
    padding-inline-start: 20px;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: var(--ptv-font-medium);
    line-height: 1.3;
    text-align: left;
    list-style: disc outside;
}
/* Figma: el segundo bullet inicia en y=46 cuando el primero (h=34) termina
   en y=34 → gap real = 12px (no 29). */
.ptvr-inicio-bs__cob-bullets li + li { margin-top: var(--ptv-space-3); }
.ptvr-inicio-bs__cob-bullets li::marker {
    color: var(--ptv-color-neutral-950);
}
/* Links inline brand + underline. */
.ptvr-inicio-bs__cob-bullets a {
    color: var(--ptv-color-brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ptvr-inicio-bs__cob-bullets a:hover,
.ptvr-inicio-bs__cob-bullets a:focus-visible {
    color: var(--ptv-color-brand-700, var(--ptv-color-brand-600));
}

/* --static: reduced motion → muestra estado final (pastilla + coberturas). */
.ptvr-inicio-bs--static .ptvr-inicio-bs__pin {
    height: auto;
    min-height: 100vh;
    padding-block: clamp(48px, 6vw, 96px);
}
.ptvr-inicio-bs--static .ptvr-inicio-bs__runway {
    min-height: 0;
}
.ptvr-inicio-bs--static .ptvr-inicio-bs__phone,
.ptvr-inicio-bs--static .ptvr-inicio-bs__messages,
.ptvr-inicio-bs--static .ptvr-inicio-bs__overlay {
    display: none;
}
.ptvr-inicio-bs--static .ptvr-inicio-bs__media {
    width: 417px;
    height: 570px;
    border-radius: 200px;
    opacity: 1;
}
.ptvr-inicio-bs--static .ptvr-inicio-bs__cob,
.ptvr-inicio-bs--static .ptvr-inicio-bs__cob-item {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* <lg (Figma 781:31163 mobile): pin grid 2-row, sin runway/teléfono.
       Row 1: media + overlay + mensajes stacked. Row 2: coberturas. */
    .ptvr-inicio-bs__runway {
        min-height: 0;
    }
    .ptvr-inicio-bs__pin {
        position: relative;
        top: auto;
        height: auto;
        min-height: auto;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }
    .ptvr-inicio-bs__phone {
        display: none;
    }

    /* Media full-bleed. !important para pisar inline styles del JS desktop. */
    .ptvr-inicio-bs__media {
        grid-column: 1;
        grid-row: 1;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        aspect-ratio: auto;
        border-radius: 0 !important;
        margin: 0 !important;
        opacity: 1 !important;
        align-self: stretch;
        justify-self: stretch;
        overflow: hidden;
    }
    .ptvr-inicio-bs__media-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Overlay dark re-habilitado en mobile. */
    .ptvr-inicio-bs__overlay {
        display: block;
        grid-column: 1;
        grid-row: 1;
        position: relative;
        inset: auto;
        background: rgba(0, 0, 0, 0.35);
        align-self: stretch;
        justify-self: stretch;
        z-index: 1;
    }

    /* Mensajes: column vertical sobre el overlay. */
    .ptvr-inicio-bs__messages {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        inset: auto;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 2vw, 16px);
        padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 32px);
        margin: 0;
        pointer-events: auto;
    }
    .ptvr-inicio-bs__msg {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
    }
    /* !important para pisar opacity/transform inline del JS desktop. */
    .ptvr-inicio-bs__msg-card {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Cob en row 2; transform:none pisa el --media-y del JS desktop. */
    .ptvr-inicio-bs__cob {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        inset: auto;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        padding: clamp(48px, 6vw, 96px) clamp(16px, 4vw, 32px) 0;
    }
    .ptvr-inicio-bs__cob-item {
        opacity: 1 !important;
        transform: none !important;
    }
    .ptvr-inicio-bs__cob-grid {
        grid-template-columns: 1fr;
    }
    .ptvr-inicio-bs__cob-anchor {
        display: none;
    }
}

/* Tablet (768–991): 2 cols stretch (mismo patrón del reveal). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ptvr-inicio-bs__cob-grid {
        grid-template-columns: 1fr 1fr;
        column-gap: var(--ptv-space-10);
        align-items: stretch;
    }
    /* min-height parejo. */
    .ptvr-inicio-bs__cob-item {
        min-height: 220px;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · BLOCK FAQs — Figma 781:31252 (reusa `.ptv-accordion`)
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-inicio-faqs {
    background: var(--ptv-color-bg-base, #fff);
    color: var(--ptv-color-neutral-950);
    padding-block: clamp(64px, 7vw, 100px);
}

.ptvr-inicio-faqs__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(48px, 5vw, 80px);
}

/* ── Header centrado ──────────────────────────────────────── */
.ptvr-inicio-faqs__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.5vw, 39px);
    text-align: center;
    max-width: 950px;
}

.ptvr-inicio-faqs__title {
    margin: 0;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.ptvr-inicio-faqs__subtitle {
    margin: 0;
    max-width: 575px;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ptvr-inicio-faqs__accordion {
    width: 100%;
    max-width: 1035px;
}

/* ── CTA inferior ─────────────────────────────────────────── */
.ptvr-inicio-faqs__cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
 * INICIO · BLOG LATEST — Figma 781:31249 + 781:31250
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-inicio-blog {
    background: var(--ptv-color-bg-base, #fff);
    color: var(--ptv-color-neutral-950);
    padding-block: 40px;
}

.ptvr-inicio-blog__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma master: gap-[40px] entre cards y arrows. Mismo gap aplicado
       header→carousel y carousel→CTA inferior. */
    gap: 40px;
}

/* ── Header centrado ──────────────────────────────────────── */
.ptvr-inicio-blog__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
    text-align: center;
    max-width: 950px;
}

.ptvr-inicio-blog__title {
    margin: 0;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.ptvr-inicio-blog__subtitle {
    margin: 0;
    max-width: 762px;
    color: var(--ptv-color-neutral-950);
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Carrusel reusa `template-parts/blog/card.php` (image-right). */
.ptv-carousel.ptvr-inicio-blog__carousel {
    width: 100%;
}

/* Desktop: Figma 781:31250 — card-article visible 387 (text) + 284 (img)
   ≈ 671 px. min() para que en viewports estrechos no desborde. */
@media (min-width: 992px) {
    .ptv-carousel.ptvr-inicio-blog__carousel {
        --_slide-w: min(671px, 80vw);
    }

    /* Altura y radius del card SOLO en desktop. En tablet/mobile las
       cards se apilan vertical (image 242 + body 232) y necesitan
       crecer libre — forzar height: 309 las recortaba (la imagen, el
       texto y el botón ya no cabían). Figma master 781:31250: 309 / 24. */
    .ptvr-inicio-blog__carousel .ptvr-blog__card.ptv-card--image-right {
        height: 309px;
        border-radius: 24px;
    }
}

/* Mobile + tablet — slide width Figma 512:3763 (~332 px), con cap
   responsivo en mobile estrecho. Sin esto, las cards apiladas
   verticales heredan el slide-w 260 del kit y se ven apretadas. */
@media (max-width: 991.98px) {
    .ptv-carousel.ptvr-inicio-blog__carousel {
        --_slide-w: min(332px, 85vw);
    }
}

/* Body bg gris (neutral-200) solo en el carrusel que reusa blog/card.php
   con look "ticket" (Inicio · blog-latest). El listing del blog mantiene
   el blanco del kit. */
.ptvr-inicio-blog__carousel .ptvr-blog__card .ptv-card__body {
    background: var(--ptv-color-neutral-200);
}

/* CTA inferior */
.ptvr-inicio-blog__cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════
 * 404 — gemelo del hero de Inicio en stage claro.
 * "404" decorativo con reveal por elipse-spotlight (JS en 404-spotlight.js).
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-404 {
    position: relative;
    z-index: 50;
    /* Mismas márgenes que el hero. Radius/clip en `__clip` para no recortar dropdowns. */
    margin: 0 var(--ptv-space-4) var(--ptv-space-3);
    isolation: isolate;
    color: var(--ptv-color-text-inverse);
    padding-block: clamp(32px, 4vw, 56px) clamp(96px, 10vw, 160px);
    /* min-height refuerza el feel de hero si el SPA del cotizador no monta. */
    min-height: clamp(640px, 88vh, 980px);
    display: flex;
    align-items: flex-start;
}

/* Clip wrapper — gemelo del `.ptvr-inicio-hero__clip`. */
.ptvr-404__clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--ptv-radius-xl);
    overflow: clip;
    background-color: var(--ptv-color-neutral-950);
}

/* "404" decorativo — capa base fantasma + capa spot con reveal por elipse. */
.ptvr-404__numero {
    position: absolute;
    /* Anti-CLS: Y ancla al viewport para que el SPA mountando no lo mueva. */
    top: 50vh;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--ptv-font-sans);
    font-size: clamp(220px, 38vw, 520px);
    font-weight: var(--ptv-font-semibold);
    line-height: 0.85;
    letter-spacing: -0.07em;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

/* Base fantasma. */
.ptvr-404__numero--base {
    z-index: 0;
    color: rgba(255, 255, 255, 0.06);
}

/* Capa spot — gradient brand→teal masked por la elipse cursor. */
.ptvr-404--ellipse {
    --spot-x: calc(100% - var(--ellipse-size, 460px) / 2 - 40px);
    --spot-y: calc(var(--ellipse-size, 460px) / 2 + 60px);
}

.ptvr-404__numero--spot {
    z-index: 1;
    background: linear-gradient(
        135deg,
        var(--ptv-color-brand-400) 0%,
        var(--ptv-color-brand-600) 35%,
        var(--ptv-color-teal-400)  72%,
        var(--ptv-color-teal-500)  100%
    );
    background-size: 180% 180%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: ptvr-404-gradient-drift 14s ease-in-out infinite;
    /* Mask radial — feathered desde 100% opacidad en el centro a 0%
       en el borde de la elipse. Mismo perfil que el `__spotlight` del
       hero de Inicio para que el "tamaño de linterna" se sienta igual. */
    --_mask: radial-gradient(
        circle calc(var(--ellipse-size, 460px) / 2) at var(--spot-x) var(--spot-y),
        rgba(0, 0, 0, 1)    0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.75) 42%,
        rgba(0, 0, 0, 0.4)  68%,
        rgba(0, 0, 0, 0.12) 88%,
        rgba(0, 0, 0, 0)    100%
    );
    -webkit-mask-image: var(--_mask);
            mask-image: var(--_mask);
    /* Halo brand+teal — sobre fondo oscuro el glow se aprovecha mejor,
       subimos opacidad para que el revealed-404 se sienta luminoso. */
    filter:
        drop-shadow(0 0 32px rgba(255, 90, 93, 0.38))
        drop-shadow(0 0 64px rgba(14, 158, 142, 0.22));
}

@keyframes ptvr-404-gradient-drift {
    0%, 100% { background-position:   0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Mobile / touch / reduced-motion — ocultamos la capa spot (no hay
   cursor que mueva la elipse). Queda solo el 404 fantasma de base,
   más liviano visualmente. */
@media (max-width: 767.98px),
       (pointer: coarse),
       (prefers-reduced-motion: reduce) {
    .ptvr-404__numero--spot { display: none; }
}

/* ── Inner: contenido + cotizador + CTA ───────────────────────── */
.ptvr-404__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    max-width: 1408px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

/* ── Bloque superior — eyebrow + headline + copy ──────────────── */
.ptvr-404__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-5);
    text-align: center;
    max-width: 720px;
}

/* Headline — gemelo de `.ptvr-inicio-hero__headline`. */
.ptvr-404__headline {
    margin: 0;
    font-family: var(--ptv-font-sans);
    font-size: clamp(28px, 4.2vw, 42px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
    color: var(--ptv-color-text-inverse);
}

.ptvr-404__copy {
    margin: 0;
    max-width: 560px;
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: var(--ptv-font-regular);
    line-height: var(--ptv-leading-normal);
    letter-spacing: var(--ptv-tracking-tight);
    color: rgba(255, 255, 255, 0.72);
    text-wrap: pretty;
}

/* ── Cotizador — mismo ancho que en el hero de Inicio ────────── */
.ptvr-404__cotizador {
    width: 100%;
    max-width: 1355px;
}

/* min-height anti-CLS para que el 404 decorativo no salte al montar el SPA. */
.ptvr-404__cotizador #ptv__app {
    display: block;
    width: 100%;
    height: auto;
    min-height: 220px;
}

.ptvr-404__cotizador .cotizador-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* CTA z-index sticky para quedar sobre el floatbar fixed del cotizador. */
.ptvr-404__cta {
    position: relative;
    z-index: var(--ptv-z-sticky, 1020);
}

/* <lg: padding y min-height compactos. */
@media (max-width: 991.98px) {
    .ptvr-404 {
        margin-inline: var(--ptv-space-3);
        padding-block: clamp(24px, 6vw, 40px) clamp(40px, 8vw, 64px);
        min-height: clamp(360px, 60vh, 520px);
    }
    .ptvr-404__inner {
        gap: var(--ptv-space-1);
    }
    /* SPA bleeds to viewport edge (mismo patrón del hero de Inicio). */
    .ptvr-404__cotizador {
        margin-inline: calc(clamp(16px, 4vw, 32px) * -1);
        width: auto;
        max-width: none;
    }
}
@media (max-width: 575.98px) {
    .ptvr-404__numero {
        font-size: clamp(180px, 60vw, 280px);
    }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ptvr-404__numero--spot {
        animation: none;
        background-position: 0% 50%;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * PREGUNTAS FRECUENTES — Índice (`page-templates/preguntas-index.php`)
 * Cards image-right de la taxonomy `categoria-pregunta`.
 * NOTA: paralelo al `.ptvr-blog__*` (cerca de la línea 1700) —
 * mantenidos separados para evolución independiente.
 * ═══════════════════════════════════════════════════════════════ */

/* `.ptvr-preguntas__page-header` reusado en search.php. */
.ptvr-preguntas__hero,
.ptvr-preguntas__page-header {
    padding-block: var(--ptv-space-20) var(--ptv-space-16);
}

.ptvr-preguntas__hero-inner {
    align-items: center;
    text-align: center;
    gap: var(--ptv-space-6);
    max-width: 820px;
    margin-inline: auto;
}

@media (max-width: 991.98px) {
    .ptvr-preguntas__hero,
    .ptvr-preguntas__page-header {
        padding-block: var(--ptv-space-12) var(--ptv-space-10);
    }
    .ptvr-preguntas__hero-inner { gap: var(--ptv-space-5); }
}

.ptvr-preguntas__eyebrow {
    margin: 0;
    color: var(--ptv-color-brand-600);
    font-size: 24px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.04em;
}

.ptvr-preguntas__hero-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.ptvr-preguntas__hero-desc {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: var(--ptv-font-regular);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.02em;
    max-width: 620px;
    text-wrap: pretty;
}

/* Buscador centrado. */
.ptvr-preguntas__search {
    width: 100%;
    max-width: 540px;
    margin-top: var(--ptv-space-3);
}

/* ── Grid de categorías ───────────────────────────────────────── */
.ptvr-preguntas__grid-section { padding-block: var(--ptv-space-6) var(--ptv-space-16); }

.ptvr-preguntas__grid { align-items: stretch; }

/* <992: 1 columna. */
@media (max-width: 991.98px) {
    .ptvr-preguntas__grid { grid-template-columns: 1fr; }
}

/* Stagger (igual que blog). */
.ptvr-preguntas__grid > .ptvr-preguntas__card:nth-child(4n+1) { --ptv-anim-delay: 0ms; }
.ptvr-preguntas__grid > .ptvr-preguntas__card:nth-child(4n+2) { --ptv-anim-delay: 75ms; }
.ptvr-preguntas__grid > .ptvr-preguntas__card:nth-child(4n+3) { --ptv-anim-delay: 150ms; }
.ptvr-preguntas__grid > .ptvr-preguntas__card:nth-child(4n+4) { --ptv-anim-delay: 225ms; }

/* Card — anchor styling + body layout. */
.ptvr-preguntas__card { color: inherit; text-decoration: none; }

.ptvr-preguntas__card .ptv-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
}

/* ≥lg (desktop): altura fija solo en variante --image-right.
   En tablet el kit apila a column, así que la altura horizontal
   no aplica. */
@media (min-width: 992px) {
    .ptvr-preguntas__card.ptv-card--image-right { height: 320px; }
    .ptvr-preguntas__card.ptv-card--image-right .ptv-card__body {
        min-width: 0;
        overflow: hidden;
    }
}

/* <lg (mobile + tablet): invertir orden — imagen arriba (igual que blog). */
@media (max-width: 991.98px) {
    .ptvr-preguntas__card.ptv-card--image-right .ptv-card__image   { order: 0 !important; }
    .ptvr-preguntas__card.ptv-card--image-right .ptv-card__divider { order: 1; }
    .ptvr-preguntas__card.ptv-card--image-right .ptv-card__body    { order: 2 !important; }

    .ptvr-preguntas__card .ptv-card__body { min-height: 280px; }

    .ptvr-preguntas__card .ptv-card__image {
        aspect-ratio: 16 / 9;
        width: 100%;
        overflow: hidden;
    }
    .ptvr-preguntas__card .ptv-card__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* Tablet — listing de FAQs (`.ptvr-preguntas__grid`) recupera el layout
   horizontal de desktop (imagen al lado). Mismo patrón que `.ptvr-blog__grid`:
   revierte el collapse vertical del kit (@4805-4828 en components.css) +
   los overrides del bloque <lg anterior. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ptvr-preguntas__grid .ptvr-preguntas__card.ptv-card--image-right {
        flex-direction: row;
        height: 320px;
    }
    .ptvr-preguntas__grid .ptvr-preguntas__card.ptv-card--image-right .ptv-card__body    { order: 0; }
    .ptvr-preguntas__grid .ptvr-preguntas__card.ptv-card--image-right .ptv-card__divider { order: 1; }
    .ptvr-preguntas__grid .ptvr-preguntas__card.ptv-card--image-right .ptv-card__image   {
        order: 2;
        flex: var(--_card-image-flex) 1 0;
        max-height: none;
        aspect-ratio: auto;
        width: auto;
    }
    .ptvr-preguntas__grid .ptvr-preguntas__card .ptv-card__body {
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }
    /* Divider vuelve vertical (el kit lo pasa a horizontal en <lg). */
    .ptvr-preguntas__grid .ptvr-preguntas__card .ptv-card__divider {
        border-top:    none;
        border-left:   var(--ptv-border-width-md) dashed var(--ptv-color-border);
        width:         0;
        height:        auto;
        align-self:    stretch;
        margin-block:  var(--_card-radius);
        margin-inline: 0;
    }
}

/* Tipografía del card. */
.ptvr-preguntas__card-title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: var(--ptv-color-text-primary);
}

.ptvr-preguntas__card-desc {
    margin: 0;
    font-size: 15px;
    font-weight: var(--ptv-font-regular);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.01em;
    color: var(--ptv-color-text-secondary);
    /* Clamp 4 líneas para uniformidad. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ptvr-preguntas__card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    font-size: 16px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
    color: var(--ptv-color-text-primary);
    /* Empuja el CTA al fondo del card body. Esto sustituye el
       `justify-content: space-between` anterior y permite que título
       y descripción queden agrupados arriba con el gap reducido. */
    margin-top: auto;
    padding-top: var(--ptv-space-4);
}


/* ═══════════════════════════════════════════════════════════════
 * PREGUNTAS — Archive de categoría (`taxonomy-categoria-pregunta.php`)
 * Hero reusa `.ptvr-insurance__hero*` + breadcrumb + chips + acordeón.
 * ═══════════════════════════════════════════════════════════════ */

/* Page header centrado (archive + single de pregunta). */
.ptvr-preguntas__archive-header,
.ptvr-preguntas__single-hero {
    padding-block: var(--ptv-space-12) var(--ptv-space-10);
}

@media (max-width: 991.98px) {
    .ptvr-preguntas__archive-header,
    .ptvr-preguntas__single-hero {
        padding-block: var(--ptv-space-10) var(--ptv-space-8);
    }
}

.ptvr-preguntas__archive-header-inner,
.ptvr-preguntas__single-hero-inner {
    text-align: center;
}

/* Override del flex-start default del kit. */
.ptvr-preguntas__archive-header-inner .ptv-breadcrumb__list,
.ptvr-preguntas__single-hero-inner .ptv-breadcrumb__list {
    justify-content: center;
}

/* Reset márgenes de <p> internos para tipografía consistente. */
.ptvr-preguntas__archive-desc,
.ptvr-preguntas__single-desc {
    max-width: 720px;
    margin-inline: auto;
}
.ptvr-preguntas__archive-desc > *:first-child,
.ptvr-preguntas__single-desc > *:first-child { margin-top: 0; }
.ptvr-preguntas__archive-desc > *:last-child,
.ptvr-preguntas__single-desc > *:last-child  { margin-bottom: 0; }
.ptvr-preguntas__archive-desc p,
.ptvr-preguntas__single-desc p {
    margin: 0 0 var(--ptv-space-3);
}
.ptvr-preguntas__archive-desc p:last-child,
.ptvr-preguntas__single-desc p:last-child {
    margin-bottom: 0;
}

/* ── Subcategorías (chips bajo el hero) ──────────────────────── */
.ptvr-preguntas__subcategories {
    padding-block: var(--ptv-space-2) var(--ptv-space-8);
}

.ptvr-preguntas__subcategories-label {
    margin: 0 0 var(--ptv-space-3);
    font-size: var(--ptv-text-b4);
    font-weight: var(--ptv-font-medium);
    color: var(--ptv-color-text-secondary);
}

.ptvr-preguntas__subcategories-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptv-space-2);
}

.ptvr-preguntas__subcategory-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--ptv-space-2) var(--ptv-space-4);
    background: var(--ptv-color-bg-page);
    border: 1px solid var(--ptv-color-neutral-200);
    border-radius: var(--ptv-radius-full);
    font-size: var(--ptv-text-b4);
    font-weight: var(--ptv-font-medium);
    color: var(--ptv-color-text-primary);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ptvr-preguntas__subcategory-chip:hover,
.ptvr-preguntas__subcategory-chip:focus-visible {
    background: var(--ptv-color-bg-surface);
    border-color: var(--ptv-color-text-primary);
    transform: translateY(-1px);
    outline: none;
}

/* ── Acordeón del archive (tweaks sobre el `.ptv-accordion` del kit) ── */
.ptvr-preguntas__accordion-section {
    padding-block: var(--ptv-space-6) var(--ptv-space-16);
}

.ptvr-preguntas__accordion {
    max-width: 980px;
    margin-inline: auto;
}

/* Link "Ver más →" — margin propio (es sibling del content del kit). */
.ptvr-preguntas__see-more {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    margin: var(--ptv-space-3) var(--ptv-space-5) var(--ptv-space-5);
    font-size: var(--ptv-text-b3);
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.01em;
    color: var(--ptv-color-brand-600);
    text-decoration: none;
    transition: gap 0.15s ease;
}

.ptvr-preguntas__see-more:hover,
.ptvr-preguntas__see-more:focus-visible {
    gap: var(--ptv-space-3);   /* flecha avanza en hover. */
    color: var(--ptv-color-brand-400);
    outline: none;
}

/* Anula padding-bottom del content cuando va seguido de see-more. */
.ptvr-preguntas__accordion .ptv-accordion__content {
    padding-bottom: 0;
}

/* Centrado de medios cuando el body lleva `--center` (single-pregunta). */
.ptvr-article__body.ptvr-insurance__prose--center figure,
.ptvr-article__body.ptvr-insurance__prose--center .wp-block-image,
.ptvr-article__body.ptvr-insurance__prose--center .aligncenter,
.ptvr-article__body.ptvr-insurance__prose--center .alignnone,
.ptvr-article__body.ptvr-insurance__prose--center .alignwide,
.ptvr-article__body.ptvr-insurance__prose--center .alignfull,
.ptvr-article__body.ptvr-insurance__prose--center figure img,
.ptvr-article__body.ptvr-insurance__prose--center .wp-block-image img,
.ptvr-article__body.ptvr-insurance__prose--center > img,
.ptvr-article__body.ptvr-insurance__prose--center > p > img,
.ptvr-article__body.ptvr-insurance__prose--center > p > a > img {
    display: block;
    margin-inline: auto;
}

/* Aprieta padding-block del content del single-pregunta (default 120px era excesivo). */
.ptvr-pregunta__content.ptvr-insurance__section {
    padding-block: var(--ptv-space-6) var(--ptv-space-16);
}

@media (max-width: 767.98px) {
    .ptvr-pregunta__content.ptvr-insurance__section {
        padding-block: var(--ptv-space-5) var(--ptv-space-12);
    }
}


/* Widget "¿Te fue útil?" al pie de single-pregunta.php (voting AJAX en preguntas-helpful.js). */
.ptvr-preguntas__helpful {
    padding-block: var(--ptv-space-8) var(--ptv-space-10);
}

.ptvr-preguntas__helpful-card {
    max-width: 540px;
    margin-inline: auto;
    padding: var(--ptv-space-6) var(--ptv-space-5);
    background: var(--ptv-color-bg-page);
    border-radius: var(--ptv-radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-4);
    text-align: center;
}

.ptvr-preguntas__helpful-question {
    margin: 0;
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-medium);
    color: var(--ptv-color-text-primary);
    letter-spacing: var(--ptv-tracking-tight);
}

.ptvr-preguntas__helpful-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ptv-space-3);
}

/* Yes/no simétricos — estilo neutro. */
.ptvr-preguntas__helpful-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    padding: var(--ptv-space-2) var(--ptv-space-4);
    background: var(--ptv-color-bg-surface);
    border: 1px solid var(--ptv-color-neutral-200);
    border-radius: var(--ptv-radius-full);
    font-size: var(--ptv-text-b3);
    font-weight: var(--ptv-font-medium);
    letter-spacing: var(--ptv-tracking-tight);
    color: var(--ptv-color-text-primary);
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.ptvr-preguntas__helpful-btn:hover:not(:disabled),
.ptvr-preguntas__helpful-btn:focus-visible:not(:disabled) {
    background: var(--ptv-color-neutral-200);
    border-color: var(--ptv-color-text-primary);
    transform: translateY(-1px);
    outline: none;
}

.ptvr-preguntas__helpful-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

/* `is-voted` — botón elegido en brand (sin opacity:0.6). */
.ptvr-preguntas__helpful-btn.is-voted {
    background: var(--ptv-color-brand-600);
    border-color: var(--ptv-color-brand-600);
    color: var(--ptv-color-text-inverse);
    opacity: 1;
}

.ptvr-preguntas__helpful-icon {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 1;
}

.ptvr-preguntas__helpful-count {
    font-variant-numeric: tabular-nums;
    font-weight: var(--ptv-font-semibold);
    color: var(--ptv-color-text-secondary);
}

.ptvr-preguntas__helpful-btn.is-voted .ptvr-preguntas__helpful-count {
    color: var(--ptv-color-text-inverse);
}

.ptvr-preguntas__helpful-thanks {
    margin: 0;
    font-size: var(--ptv-text-b4);
    font-weight: var(--ptv-font-medium);
    color: var(--ptv-color-text-secondary);
}

/* Reduced motion — anula transforms de los botones. */
@media (prefers-reduced-motion: reduce) {
    .ptvr-preguntas__helpful-btn {
        transition: none;
    }
    .ptvr-preguntas__helpful-btn:hover:not(:disabled),
    .ptvr-preguntas__helpful-btn:focus-visible:not(:disabled) {
        transform: none;
    }
}


/* ── Resultados de búsqueda de preguntas (`search.php`) ──────
   Lista vertical de items con título + resumen + "Ver más →".
   El header centrado del search.php reusa `.ptvr-preguntas__page-header`
   ya definido más arriba — acá solo estilamos la lista. */
.ptvr-preguntas-search__results {
    padding-block: var(--ptv-space-6) var(--ptv-space-16);
}

.ptvr-preguntas-search__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
    max-width: 820px;
    margin-inline: auto;
}

.ptvr-preguntas-search__item {
    padding: var(--ptv-space-5) 0;
    border-bottom: 1px solid var(--ptv-color-neutral-200);
}

.ptvr-preguntas-search__item:last-child {
    border-bottom: 0;
}

.ptvr-preguntas-search__title-link {
    text-decoration: none;
    color: inherit;
}

.ptvr-preguntas-search__title {
    margin: 0 0 var(--ptv-space-2);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: var(--ptv-font-semibold);
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: var(--ptv-color-text-primary);
    transition: color 0.15s ease;
}

.ptvr-preguntas-search__title-link:hover .ptvr-preguntas-search__title,
.ptvr-preguntas-search__title-link:focus-visible .ptvr-preguntas-search__title {
    color: var(--ptv-color-brand-600);
}

.ptvr-preguntas-search__summary {
    margin: 0 0 var(--ptv-space-3);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
    color: var(--ptv-color-text-secondary);
    letter-spacing: var(--ptv-tracking-tight);
}

.ptvr-preguntas-search__pagination {
    margin-top: var(--ptv-space-10);
    display: flex;
    justify-content: center;
}

.ptvr-preguntas-search__empty {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
    font-size: var(--ptv-text-b2);
    color: var(--ptv-color-text-secondary);
}


/* ═══════════════════════════════════════════════════════════════
 * eSIM · page-templates/page-esim.php (reusa insurance-hero)
 * ═══════════════════════════════════════════════════════════════ */

/* Pill superior del insurance-hero (arg `pill`, usado solo en eSIM). */
.ptvr-insurance__hero-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ptv-color-brand-50, #eef2ff);
    color: var(--ptv-color-brand-700, #1d4ed8);
    font-size: var(--ptv-text-b3, 13px);
    font-weight: var(--ptv-font-medium);
    letter-spacing: 0.01em;
}

/* Espaciados shared del steps-grid (eSIM + FelizDemora). Card-grid del kit
   trae padding-bottom propio que neutralizamos a 0 para no acumular con
   el margin-top del cta-wrap. */
.ptvr-steps-grid .ptv-card-grid__header {
    margin-bottom: calc(var(--ptv-space-24) + var(--ptv-space-6));
}
.ptvr-steps-grid .ptv-card-grid {
    padding-bottom: 0;
}
.ptvr-steps-grid {
    padding-bottom: calc(var(--ptv-space-24) + var(--ptv-space-20));
}

/* "Por qué elegir" — bump margin del header a 96px (kit default 48 era corto). */
.ptvr-esim-porque__grid .ptv-card-grid__header {
    margin-bottom: var(--ptv-space-24);
}

/* Hero eSIM — imagen limpia: sin el overlay rgba(0,0,0,0.2) que el
   insurance-hero compartido aplica por default (::after del __media). */
.ptvr-esim .ptvr-insurance__hero .ptvr-insurance__media::after {
    content: none;
}
/* Hero eSIM — tampoco capa de ruido global (`.ptvr-noise img`) ni el
   background placeholder del __media: la imagen se muestra tal cual. */
.ptvr-noise .ptvr-esim .ptvr-insurance__hero .ptvr-insurance__media-img {
    filter: none;
}
.ptvr-esim .ptvr-insurance__hero .ptvr-insurance__media {
    background: none;
}



/* ═══════════════════════════════════════════════════════════════
 * FELIZDEMORA · ¿Vuelo demorado? carrusel (Figma 781:24844 + 781:24845)
 * ═══════════════════════════════════════════════════════════════ */

/* Hero FelizDemora — usa el insurance-hero compartido. Figma 781:24843
   pide pt-80 (vs pt-51 del default seguro-de-viaje-para). Override scoped. */
.ptvr-fdmr .ptvr-insurance__hero {
    padding-block: 80px 100px;
}

.ptvr-fdmr-vuelo {
    padding-block: clamp(64px, 8vw, 100px);
}

.ptvr-fdmr-vuelo__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-10);
    text-align: center;
    /* Unificado con el resto de carruseles del tema: 64px entre header y
       carrusel (antes 120px). */
    margin-bottom: var(--ptv-space-16);
}

.ptvr-fdmr-vuelo__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    /* Figma `I781:24844;...:2225` → text-[52px] tracking-[-2.08px]. */
    font-size: clamp(36px, 4.5vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
    max-width: 820px;
}

.ptvr-fdmr-vuelo__lead {
    margin: 0;
    max-width: 720px;
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b2);
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: var(--ptv-tracking-tight);
}

/* Cards Figma I781:24889: w 406, alto se adapta al contenido (no forzamos
   149 fijo porque sin body el card queda con aire muerto). `height: 100%`
   se queda para que el carousel iguale al slide más alto. */
.ptvr-fdmr-vuelo__card {
    height: 100%;
    --_card-radius: var(--ptv-radius-lg);   /* 12px — override del 32px default. */
}
.ptvr-fdmr-vuelo__card .ptv-card__body {
    /* Figma I781:24890 (text-content): p-24 todos lados. */
    padding: var(--ptv-space-6);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Figma: gap title→body = 40 (text-content gap-40 entre title h-24 y down h-37). */
    gap: var(--ptv-space-10);
    justify-content: flex-start;
}

.ptvr-fdmr-vuelo__card-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    /* Figma I781:24891: 24 px medium / lh 1 / tracking -0.04em. */
    font-size: 24px;
    font-weight: var(--ptv-font-medium);
    line-height: 1;
    letter-spacing: -0.04em;
    /* Reserva 2 líneas de espacio (uniformidad de altura entre cards) y
       trunca cualquier título más largo a 2 líneas. */
    min-height: calc(24px * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Body opcional del card (expuesto por flexibilidad del metabox). */
.ptvr-fdmr-vuelo__card-text {
    margin-top: var(--ptv-space-3);
    color: var(--ptv-color-text-primary);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}
.ptvr-fdmr-vuelo__card-text p {
    margin: 0 0 var(--ptv-space-3);
    font-weight: var(--ptv-font-bold);
}
.ptvr-fdmr-vuelo__card-text strong,
.ptvr-fdmr-vuelo__card-text b { font-weight: var(--ptv-font-semibold); }

/* Figma 781:24889 master: card 406w. Override del default kit (380). */
.ptvr-fdmr-vuelo__carousel {
    --_slide-w: 406px;
}


/* ═══════════════════════════════════════════════════════════════
 * FELIZDEMORA · ¿Cómo funciona? overrides (Figma 781:24885 + 781:24889)
 * Sobre el patrón eSIM: title brand 20px, body wrapper h-37, bg invertido.
 * ═══════════════════════════════════════════════════════════════ */

/* Restaura padding-bottom del .ptv-card-grid (neutralizado para eSIM). */
.ptvr-fdmr-como .ptv-card-grid {
    padding-bottom: calc(var(--ptv-space-24) + var(--ptv-space-20));
}

/* Sin padding-bottom en el outer (el respiro vive dentro de la sección gris). */
.ptvr-fdmr-como {
    padding-bottom: 0;
}

.ptvr-steps-grid__grid .ptv-card-grid__card-title {
    font-size:      var(--ptv-text-h3);
    font-weight:    var(--ptv-font-semibold);
    line-height:    var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
}
@media (max-width: 767.98px) {
    .ptvr-steps-grid__grid .ptv-card-grid__card-title {
        font-size: var(--ptv-text-h3-xs);
    }
}

.ptvr-steps-grid__grid .ptv-card-grid__card-body {
    padding: var(--ptv-space-6);
}

/* Body Figma 781:29059: caja min-h 181 justify-end → título arriba, párrafo abajo. */
.ptvr-steps-grid__grid .ptv-card-grid__card-body-text {
    min-height:      181px;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
}

/* Inter SemiBold (no el bold default del browser) en <strong>/<b>. */
.ptvr-steps-grid__grid .ptv-card-grid__card-body-text p {
    margin: 0 0 var(--ptv-space-3);
}
.ptvr-steps-grid__grid .ptv-card-grid__card-body-text p:last-child {
    margin-bottom: 0;
}
.ptvr-steps-grid__grid .ptv-card-grid__card-body-text strong,
.ptvr-steps-grid__grid .ptv-card-grid__card-body-text b {
    font-weight: var(--ptv-font-semibold);
}

/* CTA inferior del steps-grid — margin-top reemplaza el padding-bottom del grid. */
.ptvr-steps-grid__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--ptv-space-24);
}

/* ───────────────────────────────────────────────────────────────
   FELIZDEMORA · overrides finales para `.ptvr-fdmr-como__grid`.

   Estos overrides vienen DESPUÉS de las reglas `.ptvr-steps-grid__grid`
   de arriba (mismo specificity 0,2,0) para ganar por orden de cascada.
   Las reglas de steps-grid son para eSIM (cards alargadas, body justify-end
   con min-h 181, title h3). FelizDemora pide cards Figma 781:24897:
   p-24, gap-40, title 20 brand-600, body h-37 justify-start, card h-149.
   ─────────────────────────────────────────────────────────────── */

.ptvr-fdmr-como__grid .ptv-card-grid__card,
.ptvr-esim-como__grid .ptv-card-grid__card {
    --_card-radius: var(--ptv-radius-lg);    /* 12 — override del default 32 */
}

.ptvr-fdmr-como__grid .ptv-card-grid__card-body {
    min-height: 149px;                       /* override de --split min-h 280 */
    justify-content: flex-start;             /* override de --split space-between */
}

.ptvr-fdmr-como__grid .ptv-card-grid__card-title {
    color: var(--ptv-color-brand-600);
    font-size: var(--ptv-text-b1);           /* 20 (override de h3 que ponía steps-grid) */
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}

.ptvr-fdmr-como__grid .ptv-card-grid__card-body-text {
    min-height: 37px;                        /* override de steps-grid min-h 181 */
    justify-content: flex-start;             /* override de steps-grid flex-end */
    flex: 0 0 auto;                          /* override del kit flex:1 */
}


/* ═══════════════════════════════════════════════════════════════
 * OPINIONES — `page-templates/page-opiniones.php`
 * Reemplaza la legada `page-3294.php` (Bootstrap) con el UI Kit.
 * ═══════════════════════════════════════════════════════════════ */

/* Intro Trustpilot — 2 cols (badge izq + texto der), apila en mobile. */
.ptvr-opin-intro {
    background-color: var(--ptv-color-neutral-200);
    padding-block: var(--ptv-space-20);
}
.ptvr-opin-intro__inner {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: var(--ptv-space-12);
    align-items: center;
    max-width: 64rem;
    margin-inline: auto;
}
.ptvr-opin-intro__badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-2);
    text-decoration: none;
    color: var(--ptv-color-teal-600);
}
.ptvr-opin-intro__badge:hover .ptvr-opin-intro__badge-label {
    text-decoration: underline;
}
.ptvr-opin-intro__badge-img {
    max-height: 80px;
    width: auto;
    height: auto;
}
.ptvr-opin-intro__badge-label {
    font-weight: var(--ptv-font-semibold);
    font-size: 1rem;
}
.ptvr-opin-intro__body {
    color: var(--ptv-color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}
.ptvr-opin-intro__body p { margin: 0 0 var(--ptv-space-4); }

@media (max-width: 767.98px) {
    .ptvr-opin-intro__inner {
        grid-template-columns: 1fr;
        gap: var(--ptv-space-6);
        text-align: center;
    }
    /* Texto primero, badge después (orden visual del legado). */
    .ptvr-opin-intro__body  { order: 1; }
    .ptvr-opin-intro__badge { order: 2; justify-self: center; }
}

/* Opiniones verificadas — texto centrado. */
.ptvr-opin-verif {
    padding-block: var(--ptv-space-20);
}
.ptvr-opin-verif__inner {
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
}
.ptvr-opin-verif__title     { margin: 0 0 var(--ptv-space-10); }
.ptvr-opin-verif__body {
    color: var(--ptv-color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}
.ptvr-opin-verif__body p { margin: 0 0 var(--ptv-space-6); }
.ptvr-opin-verif__body a { color: var(--ptv-color-text-teal); }

/* Carrusel [tp_reviews_carousel] — solo respiración vertical. */
.ptvr-opin__reviews {
    padding-block: var(--ptv-space-12);
}

/* 5) Valoraciones por destino — 3 cards sobre fondo neutral-200. */
.ptvr-opin-valor {
    background-color: var(--ptv-color-neutral-200);
    padding-block: var(--ptv-space-24);
}
.ptvr-opin-valor__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-opin-valor__title     { margin: 0 0 var(--ptv-space-8); }
.ptvr-opin-valor__lead {
    margin: 0 auto var(--ptv-space-12);
    max-width: 56rem;
    text-align: center;
    color: var(--ptv-color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}
.ptvr-opin-valor__lead p { margin: 0 0 var(--ptv-space-4); }
.ptvr-opin-valor__lead a { color: var(--ptv-color-text-teal); }

.ptvr-opin-valor__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ptv-space-6);
    margin-bottom: var(--ptv-space-12);
}
.ptvr-opin-valor__card {
    --_card-radius: var(--ptv-radius-2xl);
    /* flex-column para igualar alturas (kit no lo hace sin imagen). */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ptvr-opin-valor__card-title {
    margin: 0 0 var(--ptv-space-4);
    color: var(--ptv-color-teal-600);
    font-weight: var(--ptv-font-bold);
    font-size: 1.125rem;
}
.ptvr-opin-valor__card-text {
    color: var(--ptv-color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ptvr-opin-valor__card-text p { margin: 0 0 var(--ptv-space-4); }

.ptvr-opin-valor__footer {
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
    color: var(--ptv-color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}
.ptvr-opin-valor__footer p { margin: 0 0 var(--ptv-space-4); }
.ptvr-opin-valor__footer a { color: var(--ptv-color-text-teal); }

@media (max-width: 991.98px) {
    .ptvr-opin-valor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ptvr-opin-valor__grid { grid-template-columns: 1fr; }
}

/* FAQs — patrón del accordion de Inicio. */
.ptvr-opin-faqs {
    padding-block: var(--ptv-space-20);
}
.ptvr-opin-faqs__title      { margin: 0 0 var(--ptv-space-12); }
.ptvr-opin-faqs__accordion {
    max-width: 56rem;
    margin-inline: auto;
}

/* Companies — logos grayscale → color en hover. */
.ptvr-opin-companies {
    padding-block: var(--ptv-space-20);
}
.ptvr-opin-companies__title { margin: 0 0 var(--ptv-space-16); }
.ptvr-opin-companies__grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 64rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ptv-space-12) var(--ptv-space-8);
    align-items: center;
    justify-items: center;
}
.ptvr-opin-companies__item { display: flex; }
.ptvr-opin-companies__logo {
    max-width: 140px;
    max-height: 64px;
    width: auto;
    height: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.ptvr-opin-companies__logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 991.98px) {
    .ptvr-opin-companies__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ptvr-opin-companies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Aliados — grid de cards con CTA inferior. */
.ptvr-opin-aliados {
    background-color: var(--ptv-color-neutral-200);
    padding-block: var(--ptv-space-24);
}
.ptvr-opin-aliados__title   { margin: 0 0 var(--ptv-space-16); }
.ptvr-opin-aliados__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ptv-space-6);
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-opin-aliados__card {
    --_card-radius: var(--ptv-radius-2xl);
    /* Mismo fix de altura que las cards de Valoraciones. */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ptvr-opin-aliados__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ptv-space-4);
    height: 100%;
}
.ptvr-opin-aliados__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-bottom: var(--ptv-space-2);
}
.ptvr-opin-aliados__logo {
    max-width: 170px;
    max-height: 80px;
    width: auto;
    height: auto;
}
.ptvr-opin-aliados__card-title {
    margin: 0;
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: 1.125rem;
}
.ptvr-opin-aliados__card-badge {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-style: italic;
    font-size: 0.9375rem;
}
.ptvr-opin-aliados__card-text {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}
.ptvr-opin-aliados__cta {
    margin-top: auto;
    align-self: center;
}

@media (max-width: 991.98px) {
    .ptvr-opin-aliados__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ptvr-opin-aliados__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
 * CONTACTO — `page-templates/page-contacto.php`
 * Canales (cards Chat/WA/Email/Tel) + phones (grid con banderas).
 * ═══════════════════════════════════════════════════════════════ */

/* Channels — ahora delegan en el reveal block compartido `.ptvr-channels`
   (definido más abajo en este archivo). No hay reglas específicas del
   scope `.ptvr-cont-channels` aquí porque el styling viene del bloque
   reveal + override `.ptvr-channels.ptvr-reveal--rich`. */

/* Teléfonos por país — auto-fit grid. Patrón compartido por `cont-phones`
   (Contacto) y `tpilot-phones` (Trustpilot). Las únicas diferencias entre
   ambos son el wrapper (padding-block / bg) y el header (cont es simple,
   tpilot apila vertical con max-width); el resto del grid + card + copy
   + note es idéntico. */
.ptvr-cont-phones {
    background-color: var(--ptv-color-neutral-200);
    padding-block: var(--ptv-space-20);
}
.ptvr-cont-phones__inner,
.ptvr-tpilot-phones__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-cont-phones__header {
    text-align: center;
    margin-bottom: var(--ptv-space-16);
}
.ptvr-cont-phones__title  { margin: 0 0 var(--ptv-space-8); }
.ptvr-cont-phones__lead {
    margin: 0 auto;
    max-width: 44rem;
    color: var(--ptv-color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.ptvr-cont-phones__grid,
.ptvr-tpilot-phones__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: var(--ptv-space-4);
}
.ptvr-cont-phones__item,
.ptvr-tpilot-phones__item { display: flex; }
.ptvr-cont-phones__card,
.ptvr-tpilot-phones__card {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-4);
    flex: 1 1 auto;
    padding: var(--ptv-space-4) var(--ptv-space-5);
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ptvr-cont-phones__card:hover,
.ptvr-tpilot-phones__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ptv-shadow-sm);
}
.ptvr-cont-phones__flag,
.ptvr-tpilot-phones__flag { flex: 0 0 auto; }
.ptvr-cont-phones__copy,
.ptvr-tpilot-phones__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ptvr-cont-phones__country,
.ptvr-tpilot-phones__country {
    color: var(--ptv-color-text-secondary);
    font-size: 0.8125rem;
}
.ptvr-cont-phones__number,
.ptvr-tpilot-phones__number {
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-semibold);
    font-size: 1rem;
}

.ptvr-cont-phones__note,
.ptvr-tpilot-phones__note {
    margin: var(--ptv-space-12) auto 0;
    max-width: 56rem;
    text-align: center;
    color: var(--ptv-color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ptvr-cont-phones__note a,
.ptvr-tpilot-phones__note a { color: var(--ptv-color-text-teal); }

@media (max-width: 575.98px) {
    .ptvr-cont-phones__grid,
    .ptvr-tpilot-phones__grid {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
 * EMERGENCIA — `page-templates/page-emergencia.php`
 * ═══════════════════════════════════════════════════════════════ */

/* Banda "Número de emergencia" — bg brand-200, card central. */
.ptvr-emer-numero {
    padding-block: var(--ptv-space-12);
    background: var(--ptv-color-brand-200);
}
.ptvr-emer-numero__inner {
    display: flex;
    justify-content: center;
}
.ptvr-emer-numero__card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ptv-space-8);
    padding: var(--ptv-space-6) var(--ptv-space-8);
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-lg);
    border: 2px solid var(--ptv-color-brand-600);
    box-shadow: var(--ptv-shadow-md);
    max-width: 56rem;
    width: 100%;
}
.ptvr-emer-numero__labels {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-1);
    flex: 1 1 auto;
    min-width: 0;
}
.ptvr-emer-numero__label {
    margin: 0;
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: 1rem;
    line-height: 1.3;
}
.ptvr-emer-numero__sublabel {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-weight: var(--ptv-font-medium);
    font-size: 0.875rem;
}
.ptvr-emer-numero__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-3);
    color: var(--ptv-color-brand-600);
    text-decoration: none;
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    line-height: 1;
    white-space: nowrap;
}
.ptvr-emer-numero__tel:hover { text-decoration: underline; }
.ptvr-emer-numero__tel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ptv-color-brand-600);
}

@media (max-width: 575.98px) {
    .ptvr-emer-numero__card {
        flex-direction: column;
        text-align: center;
        gap: var(--ptv-space-4);
        padding: var(--ptv-space-5);
    }
    .ptvr-emer-numero__labels { align-items: center; }
    .ptvr-emer-numero__tel { font-size: 1.5rem; flex-wrap: wrap; justify-content: center; }
}

/* Opciones de contacto — phones grid + side panel (WA + email). */
.ptvr-emer-contacto {
    padding-block: var(--ptv-space-20);
}
.ptvr-emer-contacto__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-emer-contacto__header {
    text-align: center;
    margin-bottom: var(--ptv-space-16);
}
.ptvr-emer-contacto__title { margin: 0; }
.ptvr-emer-contacto__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--ptv-space-8);
    align-items: start;
}

/* Phones list */
.ptvr-emer-contacto__phones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ptv-space-3);
}
.ptvr-emer-contacto__phone-item { display: flex; }
.ptvr-emer-contacto__phone-card {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
    flex: 1 1 auto;
    padding: var(--ptv-space-3) var(--ptv-space-4);
    background: var(--ptv-color-neutral-200);
    border-radius: var(--ptv-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ptvr-emer-contacto__phone-card:hover {
    background: var(--ptv-color-base-white);
    box-shadow: var(--ptv-shadow-sm);
    transform: translateY(-2px);
}
.ptvr-emer-contacto__phone-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ptvr-emer-contacto__phone-country {
    color: var(--ptv-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: var(--ptv-font-semibold);
}
.ptvr-emer-contacto__phone-number {
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-semibold);
    font-size: 1rem;
}

/* Side panel (WA + Email) */
.ptvr-emer-contacto__side {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-4);
}
.ptvr-emer-contacto__channel {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
    padding: var(--ptv-space-4);
    background: var(--ptv-color-neutral-200);
    border-radius: var(--ptv-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.ptvr-emer-contacto__channel:hover {
    background: var(--ptv-color-base-white);
    box-shadow: var(--ptv-shadow-sm);
    transform: translateY(-2px);
}
.ptvr-emer-contacto__channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    color: var(--ptv-color-teal-600);
}
.ptvr-emer-contacto__channel-icon img { display: block; }
.ptvr-emer-contacto__channel-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ptvr-emer-contacto__channel-label {
    color: var(--ptv-color-text-secondary);
    font-size: 0.8125rem;
    font-weight: var(--ptv-font-semibold);
}
.ptvr-emer-contacto__channel-value {
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-semibold);
    font-size: 1rem;
    word-break: break-word;
}

@media (max-width: 991.98px) {
    .ptvr-emer-contacto__layout { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .ptvr-emer-contacto__phones { grid-template-columns: 1fr; }
}

/* "¿Qué hacer en caso de emergencia?" — imagen lateral + grid de items. */
.ptvr-emer-quehacer {
    padding-block: var(--ptv-space-20);
    background: var(--ptv-color-neutral-200);
}
.ptvr-emer-quehacer__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-emer-quehacer__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ptv-space-12);
    align-items: start;
}
.ptvr-emer-quehacer__media {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-8);
}
.ptvr-emer-quehacer__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ptv-radius-lg);
    object-fit: cover;
}
.ptvr-emer-quehacer__title {
    margin: 0;
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.625rem, 1.8vw + 1rem, 2.25rem);
    line-height: 1.2;
}
.ptvr-emer-quehacer__content {
    background: var(--ptv-color-base-white);
    padding: var(--ptv-space-10);
    border-radius: var(--ptv-radius-lg);
}
.ptvr-emer-quehacer__subtitle {
    margin: 0 0 var(--ptv-space-10);
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.25rem, 1.2vw + 1rem, 1.5rem);
    line-height: 1.3;
}
.ptvr-emer-quehacer__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ptv-space-8);
}
.ptvr-emer-quehacer__item-title {
    margin: 0 0 var(--ptv-space-2);
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: 1.0625rem;
    line-height: 1.3;
}
.ptvr-emer-quehacer__item-desc {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .ptvr-emer-quehacer__layout {
        grid-template-columns: 1fr;
        gap: var(--ptv-space-10);
    }
    .ptvr-emer-quehacer__content { padding: var(--ptv-space-8); }
}
@media (max-width: 575.98px) {
    .ptvr-emer-quehacer__grid { grid-template-columns: 1fr; }
}

/* Reintegro — card 2-col (desc + form). */
.ptvr-emer-reintegro {
    padding-block: var(--ptv-space-20);
}
.ptvr-emer-reintegro__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-emer-reintegro__card {
    --_card-radius: var(--ptv-radius-lg);
}
.ptvr-emer-reintegro__body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ptv-space-12);
    align-items: center;
    padding: var(--ptv-space-10);
}
.ptvr-emer-reintegro__title {
    margin: 0 0 var(--ptv-space-6);
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
    line-height: 1.3;
}
.ptvr-emer-reintegro__desc {
    color: var(--ptv-color-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}
.ptvr-emer-reintegro__desc p { margin: 0 0 var(--ptv-space-3); }
.ptvr-emer-reintegro__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ptv-space-3);
    padding: var(--ptv-space-6);
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-lg);
}
.ptvr-emer-reintegro__form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--ptv-color-teal-600);
}
.ptvr-emer-reintegro__form-title {
    margin: 0;
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: 1.125rem;
}
.ptvr-emer-reintegro__form-desc {
    color: var(--ptv-color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}
.ptvr-emer-reintegro__form-desc p { margin: 0 0 var(--ptv-space-2); }
.ptvr-emer-reintegro__cta {
    align-self: flex-start;
    margin-top: var(--ptv-space-2);
}

@media (max-width: 991.98px) {
    .ptvr-emer-reintegro__body {
        grid-template-columns: 1fr;
        gap: var(--ptv-space-8);
        padding: var(--ptv-space-8);
    }
}

/* Inconvenientes — 4 cards con icono. */
.ptvr-emer-inconv {
    padding-block: var(--ptv-space-20);
    background: var(--ptv-color-neutral-200);
}
.ptvr-emer-inconv__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-emer-inconv__title  { margin: 0 0 var(--ptv-space-16); text-align: center; }
.ptvr-emer-inconv__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ptv-space-6);
}
.ptvr-emer-inconv__card {
    --_card-radius: var(--ptv-radius-lg);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ptvr-emer-inconv__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ptv-space-4);
    height: 100%;
}
.ptvr-emer-inconv__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    color: var(--ptv-color-teal-600);
    margin-bottom: var(--ptv-space-2);
}
.ptvr-emer-inconv__card-title {
    margin: 0;
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: 1.0625rem;
    line-height: 1.3;
}
.ptvr-emer-inconv__cta {
    margin-top: auto;
}

@media (max-width: 991.98px) {
    .ptvr-emer-inconv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .ptvr-emer-inconv__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════
 * TRUSTPILOT — `page-templates/page-trustpilot.php`
 *
 * Las 3 primeras secciones editoriales (content / storytelling / pagos)
 * usan ahora el markup canónico de `.ptvr-insurance__*` del
 * single-seguro-de-viaje-para: statement centrado + splits 2-col +
 * group--gray con title-block y grid. Por eso este bloque queda
 * mínimo: solo overrides locales del scope `ptvr-tpilot-*`. El bloque
 * de canales (más abajo) y el de teléfonos (`ptvr-tpilot-phones`)
 * conservan sus reglas propias.
 *
 * Prefix `ptvr-tpilot-*` para no chocar con el carrusel `ptvr-tp-reviews-*`.
 * ═══════════════════════════════════════════════════════════════ */

/* Pagos — compresión vertical entre title-block y grid-section.
   El default insurance da gap visible ~164px (100+64); para pagos
   los tabs son una tira horizontal corta, así que ese aire se ve
   excesivo. Comprimimos a gap 48px (=space-12). */
.ptvr-tpilot-pagos .ptvr-insurance__title-block {
    padding-block: var(--ptv-space-24) 0;
}
.ptvr-tpilot-pagos .ptvr-insurance__grid-section {
    padding-block: var(--ptv-space-12) var(--ptv-space-24);
}

/* Pagos · grid de métodos — el partial usa `.ptv-flex --wrap --center
   --gap-8` (en vez de `.ptv-grid` con columnas fijas) para que la
   última fila incompleta quede centrada. Aquí dictamos los anchos por
   breakpoint para emular el comportamiento 1 / 2 / 3 columnas que
   antes daba `.ptv-grid--1 --md-2 --lg-3`. La fórmula descuenta los
   gaps (`--ptv-space-8` = 32 px, mismo valor que `--gap-lg` del kit). */
.ptvr-tpilot-pagos__grid > .ptvr-tpilot-pagos__method {
    flex: 0 0 auto;
    width: 100%;
}
@media (min-width: 768px) {
    .ptvr-tpilot-pagos__grid > .ptvr-tpilot-pagos__method {
        width: calc((100% - var(--ptv-space-8)) / 2);
    }
}
@media (min-width: 992px) {
    .ptvr-tpilot-pagos__grid > .ptvr-tpilot-pagos__method {
        width: calc((100% - var(--ptv-space-8) * 2) / 3);
    }
}

/* Pagos · card de método — el wrapper es `.ptv-card --bg-white`, así
   que bg/radius vienen del kit. Aquí solo definimos el layout interno
   del body (media arriba centrada + título debajo) y el sizing del
   media. */
.ptvr-tpilot-pagos__method {
    --_card-radius: var(--ptv-radius-lg);
}
.ptvr-tpilot-pagos__method-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ptv-space-3);
    height: 100%;
}
/* Slot media — bounding-box fijo para que todos los cards alineen
   aunque las imágenes tengan aspect-ratios distintos. `object-fit:
   contain` admite tanto logos sueltos como collages multi-logo. */
.ptvr-tpilot-pagos__method-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    height: 120px;
    margin-inline: auto;
}
.ptvr-tpilot-pagos__method-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.ptvr-tpilot-pagos__method-title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-semibold);
    font-size: var(--ptv-text-b2);
    letter-spacing: -0.02em;
}

/* Tabs del bloque Pagos — el kit ya estiliza `.ptv-tabs --pill`; solo
   forzamos centrado del set y margen inferior al panel. */
.ptvr-tpilot-pagos__tabs {
    justify-content: center;
    margin-bottom: var(--ptv-space-10);
}
.ptvr-tpilot-pagos__tab-flag {
    display: inline-flex;
    align-items: center;
    margin-right: var(--ptv-space-2);
    vertical-align: middle;
}

/* Canales — ahora delega en el reveal block compartido `.ptvr-channels`
   (definido al final de este archivo). No hay reglas específicas del
   scope `.ptvr-tpilot-canales` aquí. El styling viene del bloque reveal
   + override `.ptvr-channels.ptvr-reveal--rich` (gemelo del de Pilares
   Nosotros, brand-red títulos + divider dashed). */

/* ── Reveal block compartido — Canales (Trustpilot + Contacto) ─────
   Aplica el look "titles brand-red + divider dashed" sobre la variante
   `--rich` que el partial activa por traer title + body. Mismo patrón
   que Pilares de Nosotros. El link "Contactar →" del body es un anchor
   plano que hereda los estilos de prose del kit con un toque dedicado
   (peso medium + flecha alineada). */
.ptvr-channels.ptvr-reveal--rich .ptvr-reveal__item {
    padding-bottom: var(--ptv-space-5);
    border-bottom: 1px dashed var(--ptv-color-border, var(--ptv-color-neutral-400));
}
.ptvr-channels.ptvr-reveal--rich .ptvr-reveal__item-title {
    color: var(--ptv-color-brand-600);
    font-size: clamp(var(--ptv-text-b2), 2vw, var(--ptv-text-h4));
    font-weight: var(--ptv-font-semibold);
}

/* Quita divider colgante del último item: desktop → solo `:last-child`
   (resto conserva divider); mobile/tablet → quita todos (apilados en 1
   columna, el gap natural separa). Aplica también a Pilares Nosotros. */
@media (min-width: 992px) {
    .ptvr-channels.ptvr-reveal--rich .ptvr-reveal__col .ptvr-reveal__item:last-child,
    .ptvr-nos-pilares.ptvr-reveal--rich .ptvr-reveal__col .ptvr-reveal__item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}
@media (max-width: 991.98px) {
    .ptvr-channels.ptvr-reveal--rich .ptvr-reveal__item,
    .ptvr-nos-pilares.ptvr-reveal--rich .ptvr-reveal__item {
        border-bottom: none;
        padding-bottom: 0;
    }
}
.ptvr-channels__cta-wrap {
    margin-top: var(--ptv-space-3);
    margin-bottom: 0;
}
.ptvr-channels__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-2);
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-medium);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}
.ptvr-channels__cta:hover,
.ptvr-channels__cta:focus-visible {
    color: var(--ptv-color-brand-600);
    text-decoration: none;
}

/* Teléfonos — patrón de Contacto/Phones. */
/* Tpilot-phones — wrapper + header propios; el resto (grid, card, copy,
   note + responsive) está consolidado en el bloque `.ptvr-cont-phones`
   arriba via multi-selector. */
.ptvr-tpilot-phones {
    background-color: var(--ptv-color-neutral-200);
    padding-block: var(--ptv-space-24);
}
.ptvr-tpilot-phones__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ptv-space-10);
    max-width: 820px;
    margin: 0 auto var(--ptv-space-16);
}
.ptvr-tpilot-phones__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-semibold);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.04em;
}


/* ═══════════════════════════════════════════════════════════════
 * NOSOTROS — `page-templates/page-nosotros.php`
 *
 * Los 4 partials editoriales (mensaje / pilares / mision-vision /
 * valores) usan ahora el markup canónico de `.ptvr-insurance__*` del
 * single-seguro-de-viaje-para: statements centrados + groups gris
 * con warranty-cards en grid. Por eso este bloque queda mínimo —
 * sólo overrides locales que no aporta el bloque insurance.
 * ═══════════════════════════════════════════════════════════════ */

/* Eyebrow del statement "Nuestro Mensaje": teal pequeño tipo tag.
   Es el único elemento del Mensaje que no existe en el patrón
   insurance, por eso vive aquí scoped al template Nosotros. */
.ptvr-nos__eyebrow {
    margin: 0;
    color: var(--ptv-color-teal-600);
    font-weight: var(--ptv-font-semibold);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Reveal de Pilares: el partial pasa items con title + body, lo que
   activa la variante `--rich` (título text-primary h5 sin divider). El
   look deseado es el de la variante `--titles` del single (título
   brand-red clamp grande + divider dashed inferior), pero conservando
   el body como prose secundaria. Igualamos el título via specificity
   `.ptvr-nos-pilares.ptvr-reveal--rich` (0,3,0) que gana sobre la
   regla base de `--rich`. */
.ptvr-nos-pilares.ptvr-reveal--rich .ptvr-reveal__item {
    padding-bottom: var(--ptv-space-5);
    border-bottom: 1px dashed var(--ptv-color-border, var(--ptv-color-neutral-400));
}
/* <lg: quita el divider en TODOS los items (apilados 1-col, el gap separa).
   Repetimos el override del bloque @9528-9533 aquí porque aquel queda ANTES
   de la regla base (línea 9611) en el archivo — misma especificidad, gana
   la posterior. Esta copia, posterior a la base, asegura que la base
   pierda en <lg. */
@media (max-width: 991.98px) {
    .ptvr-nos-pilares.ptvr-reveal--rich .ptvr-reveal__item {
        border-bottom: none;
        padding-bottom: 0;
    }
}
.ptvr-nos-pilares.ptvr-reveal--rich .ptvr-reveal__item-title {
    color: var(--ptv-color-brand-600);
    font-size: clamp(var(--ptv-text-b2), 2vw, var(--ptv-text-h4));
    font-weight: var(--ptv-font-semibold);
}

/* Pilares · icono opcional del editor (img/SVG sobre círculo teal).
   Sólo aplica cuando el editor sube una imagen al repeater; sin
   imagen el partial omite el span y la card queda como warranty
   estándar (title + prose). */
.ptvr-nos-pilares__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--ptv-radius-full);
    background: var(--ptv-color-teal-50);
    color: var(--ptv-color-teal-600);
    margin-bottom: var(--ptv-space-2);
    flex: 0 0 auto;
}
.ptvr-nos-pilares__icon img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
}

/* Cierre — wrapper `.ptv-banner-ticket` ya aporta su propio
   padding-block del kit. Sin override por ahora. */


/* ═══════════════════════════════════════════════════════════════
 * ALIADOS — `page-templates/page-aliados.php`
 * ═══════════════════════════════════════════════════════════════ */

/* the_content() — igual a Trustpilot. */
.ptvr-aliados-content {
    padding-block: var(--ptv-space-24);
}
.ptvr-aliados-content__inner {
    max-width: 56rem;
    margin-inline: auto;
}
.ptvr-aliados-content__body {
    color: var(--ptv-color-text-primary);
    font-size: 1.0625rem;
    line-height: 1.7;
    text-align: center;
}
.ptvr-aliados-content__body p { margin: 0 0 var(--ptv-space-5); }
.ptvr-aliados-content__body a { color: var(--ptv-color-text-teal); }

/* Listado — cards horizontales (logo izq + cuerpo der). */
.ptvr-aliados-lista {
    padding-block: var(--ptv-space-24);
    background: var(--ptv-color-neutral-200);
}
.ptvr-aliados-lista__inner {
    max-width: 72rem;
    margin-inline: auto;
}
.ptvr-aliados-lista__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ptv-space-10);
    max-width: 820px;
    margin: 0 auto var(--ptv-space-16);
}
.ptvr-aliados-lista__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-semibold);
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.1;
    letter-spacing: -0.04em;
}
.ptvr-aliados-lista__grid {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-6);
}

/* Card aliado — horizontal logo + copy. */
.ptvr-aliados-card {
    --_card-radius: var(--ptv-radius-lg);
}
.ptvr-aliados-card__body {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: var(--ptv-space-8);
    align-items: center;
    padding: var(--ptv-space-8);
}
.ptvr-aliados-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: var(--ptv-space-5);
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-xl);
}
.ptvr-aliados-card__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.ptvr-aliados-card__copy {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
    min-width: 0;
}
.ptvr-aliados-card__title {
    margin: 0;
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.25rem, 1vw + 0.875rem, 1.5rem);
    line-height: 1.3;
}
.ptvr-aliados-card__lead {
    color: var(--ptv-color-text-primary);
    font-weight: var(--ptv-font-semibold);
    font-size: 1rem;
    line-height: 1.6;
}
.ptvr-aliados-card__lead p { margin: 0 0 var(--ptv-space-2); }
.ptvr-aliados-card__content {
    color: var(--ptv-color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.7;
}
.ptvr-aliados-card__content p { margin: 0 0 var(--ptv-space-3); }
.ptvr-aliados-card__content a { color: var(--ptv-color-text-teal); }
.ptvr-aliados-card__content ul,
.ptvr-aliados-card__content ol {
    margin: 0 0 var(--ptv-space-3);
    padding-left: var(--ptv-space-6);
}

@media (max-width: 767.98px) {
    .ptvr-aliados-card__body {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--ptv-space-6);
        padding: var(--ptv-space-6);
    }
    .ptvr-aliados-card__media {
        max-width: 200px;
        margin-inline: auto;
    }
    .ptvr-aliados-card__copy { align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════
 * VALIDA TU CERTIFICADO — `page-1561.php` (envoltura del SPA #validateQuote)
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-validate__head {
    background: var(--ptv-color-bg-surface);
    text-align: center;
    /* Override del pb 100 heredado: la card del form ya tiene padding
       interno; 12px = mínimo respiro. */
    padding-bottom: var(--ptv-space-3);
}
/* `<h1>` solo (sin lead) → reduce el mb 64 del section-header a 12. */
.ptvr-validate__head .ptvr-insurance__section-header {
    margin-bottom: var(--ptv-space-3);
}
.ptvr-validate__form-section {
    background: var(--ptv-color-bg-surface);
    padding-block: 0 var(--ptv-space-20);
}
.ptvr-validate__card {
    max-width: 56rem;
    margin-inline: auto;
    padding: var(--ptv-space-10);
    background: var(--ptv-color-base-white);
    border-radius: var(--ptv-radius-2xl);
    box-shadow: var(--ptv-shadow-sm);
}

@media (max-width: 575.98px) {
    .ptvr-validate__card {
        padding: var(--ptv-space-6);
    }
}

/* <lg: aprieta el padding-inline scoped a .ptvr-validate__form-section. */
@media (max-width: 991.98px) {
    .ptvr-validate__form-section > .ptv-container {
        padding-inline: var(--ptv-space-3);
    }
}

/* ═══════════════════════════════════════════════════════════════
 * BTN LOADING STATE — `.ptvr-btn--loadable` con spinner del kit
 * Toggle via `btn.dataset.loading = 'true' | 'false'`.
 * ═══════════════════════════════════════════════════════════════ */

.ptvr-btn--loadable { position: relative; }

.ptvr-btn--loadable .ptvr-btn__loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ptvr-btn--loadable .ptvr-btn__loader .ptv-spinner {
    --ptv-spinner-size: 1.25em;
    --ptv-spinner-stroke: 2px;
    --ptv-spinner-color: currentColor;
    --ptv-spinner-speed: 700ms;
}

.ptvr-btn--loadable[data-loading="true"] .ptvr-btn__label { visibility: hidden; }
.ptvr-btn--loadable[data-loading="true"] .ptvr-btn__loader { display: flex; }



/* Último `<p>` sin margen inferior — antes duplicado en 15 contextos prose. */
.ptvr-insurance__prose p:last-child,
.ptvr-reveal__item-body p:last-child,
.ptvr-insurance__plan-content p:last-child,
.ptvr-page__content blockquote p:last-child,
.ptvr-fdmr-vuelo__card-text p:last-child,
.ptvr-opin-intro__body p:last-child,
.ptvr-opin-verif__body p:last-child,
.ptvr-opin-valor__lead p:last-child,
.ptvr-opin-valor__card-text p:last-child,
.ptvr-opin-valor__footer p:last-child,
.ptvr-emer-reintegro__desc p:last-child,
.ptvr-emer-reintegro__form-desc p:last-child,
.ptvr-aliados-content__body p:last-child,
.ptvr-aliados-card__lead p:last-child,
.ptvr-aliados-card__content p:last-child {
    margin-bottom: 0;
}

/* Opiniones section titles — clamp(1.375rem,…,1.75rem) info-900 bold lh 1.3.
   Verif sin text-align (heredado del parent); el resto centered. */
.ptvr-opin-verif__title,
.ptvr-opin-valor__title,
.ptvr-opin-faqs__title,
.ptvr-opin-companies__title,
.ptvr-opin-aliados__title {
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
    line-height: 1.3;
}
.ptvr-opin-valor__title,
.ptvr-opin-faqs__title,
.ptvr-opin-companies__title,
.ptvr-opin-aliados__title {
    text-align: center;
}

/* Section titles ~1.5→2rem — info-900 bold lh 1.3. Compartido por
   cont-phones, emer-contacto, emer-inconv. Overrides locales (margin /
   text-align) por selector. */
.ptvr-cont-phones__title,
.ptvr-emer-contacto__title,
.ptvr-emer-inconv__title {
    color: var(--ptv-color-info-900);
    font-weight: var(--ptv-font-bold);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    line-height: 1.3;
}

/* Lead 22 px (Figma "bloxk text" 52/22 w-762) — medium, lh 1.1, tracking
   -0.02em. Compartido por insurance section-lead, tpilot-phones, aliados-lista. */
.ptvr-insurance__section-lead,
.ptvr-tpilot-phones__lead,
.ptvr-aliados-lista__lead {
    margin: 0;
    max-width: 762px;
    color: var(--ptv-color-text-primary);
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
 * TEMPLATE B2B2C — page-templates/page-b2b2c.php
 * Clases locales `.ptvr-b2b2c-*` sobre el UI Kit (tokens --ptv-*).
 * ═══════════════════════════════════════════════════════════════ */

/* Ritmo vertical entre secciones custom (las que delegan en componentes
   del kit traen su propio padding). */
.ptvr-b2b2c-ingresos,
.ptvr-b2b2c-crece,
.ptvr-b2b2c-marcas,
.ptvr-b2b2c-alcance,
.ptvr-b2b2c-faqs,
.ptvr-b2b2c-cta {
    padding-block: clamp(56px, 7vw, 96px);
}

/* Encabezados de sección reutilizados. */
.ptvr-b2b2c-ingresos__title,
.ptvr-b2b2c-crece__title,
.ptvr-b2b2c-marcas__title,
.ptvr-b2b2c-alcance__title,
.ptvr-b2b2c-faqs__title,
.ptvr-b2b2c-cta__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
}

/* Hero · pill en color marca (rosado) — scope B2B2C para no tocar el pill
   claro que usan eSIM/FelizDemora. */
.ptvr-b2b2c .ptvr-insurance__hero-pill {
    background: var(--ptv-color-brand-600);
    color: var(--ptv-color-text-inverse);
}

/* ── 2. Más ingresos sin costos extras ───────────────────────── */
.ptvr-b2b2c-ingresos__grid {
    align-items: start;
}
.ptvr-b2b2c-ingresos__lead {
    margin: var(--ptv-space-5) 0 0;
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b2);
    line-height: var(--ptv-leading-loose);
    letter-spacing: var(--ptv-tracking-tight);
}
.ptvr-b2b2c-ingresos__features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-8) var(--ptv-space-6);
}
@media (min-width: 768px) {
    .ptvr-b2b2c-ingresos__features { grid-template-columns: 1fr 1fr; }
}
.ptvr-b2b2c-ingresos__feature-title {
    margin: 0 0 var(--ptv-space-2);
    color: var(--ptv-color-brand-600);
    font-size: var(--ptv-text-b1);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-tight);
    letter-spacing: var(--ptv-tracking-tight);
}
.ptvr-b2b2c-ingresos__feature-text {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}

/* ── 3. Crece sin complicaciones ─────────────────────────────── */
.ptvr-b2b2c-crece__grid {
    align-items: center;
}
.ptvr-b2b2c-crece__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ptv-radius-xl);
}
.ptvr-b2b2c-crece__lead {
    margin: var(--ptv-space-4) 0 var(--ptv-space-10);
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b2);
    line-height: var(--ptv-leading-loose);
    letter-spacing: var(--ptv-tracking-tight);
}
.ptvr-b2b2c-crece__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ptv-space-8) var(--ptv-space-6);
    margin: 0;
}
.ptvr-b2b2c-crece__stat { margin: 0; }
.ptvr-b2b2c-crece__stat-value {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 3.6vw, 44px);
    font-weight: var(--ptv-font-bold);
    line-height: 1.1;
    letter-spacing: var(--ptv-tracking-tighter);
}
.ptvr-b2b2c-crece__stat-label {
    margin: var(--ptv-space-2) 0 0;
    color: var(--ptv-color-text-secondary);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}

/* ── 4. Marcas / partners ────────────────────────────────────── */
.ptvr-b2b2c-marcas {
    background: var(--ptv-color-bg-surface-warm, var(--ptv-color-neutral-200));
}
.ptvr-b2b2c-marcas__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--ptv-space-12);
}
.ptvr-b2b2c-marcas__lead {
    margin: var(--ptv-space-3) 0 0;
    color: var(--ptv-color-text-secondary);
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}
.ptvr-b2b2c-marcas__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ptv-space-10) var(--ptv-space-8);
    align-items: center;
    justify-items: center;
}
@media (min-width: 768px) {
    .ptvr-b2b2c-marcas__grid { grid-template-columns: repeat(4, 1fr); }
}
/* Caja de alto fijo + contain → todos los logos al mismo tamaño (uniforme)
   y más grandes. */
.ptvr-b2b2c-marcas__logo {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: contain;
}

/* ── 5. Alcance global ───────────────────────────────────────── */
.ptvr-b2b2c-alcance__intro {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-5);
}
.ptvr-b2b2c-alcance__lead {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.02em;
}
.ptvr-b2b2c-alcance__media {
    margin-top: var(--ptv-space-16);
}
.ptvr-b2b2c-alcance__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── 6. 5 estrellas / Trustpilot ─────────────────────────────── */
.ptvr-b2b2c-estrellas__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--ptv-space-8);
}
.ptvr-b2b2c-estrellas__title {
    margin: 0;
    color: var(--ptv-color-text-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
}
.ptvr-b2b2c-estrellas__lead {
    margin: var(--ptv-space-3) 0 0;
    color: var(--ptv-color-text-secondary);
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}

/* ── 7. Formas de conectarse — títulos de card en color marca ── */
.ptvr-b2b2c-formas .ptv-card-grid__card-title {
    color: var(--ptv-color-brand-600);
}

/* ── 8. Banner "¿Quieres ser nuestro aliado comercial?" ──────── */
.ptvr-b2b2c-aliado {
    position: relative;
    isolation: isolate;
    padding-block: clamp(64px, 9vw, 120px);
    background-color: var(--ptv-color-neutral-950);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--ptv-color-text-inverse);
}
.ptvr-b2b2c-aliado__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}
.ptvr-b2b2c-aliado:not(.ptvr-b2b2c-aliado--has-bg) .ptvr-b2b2c-aliado__overlay {
    background: transparent;
}
.ptvr-b2b2c-aliado__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ptv-space-10);
    align-items: center;
}
@media (min-width: 768px) {
    .ptvr-b2b2c-aliado__inner { grid-template-columns: 1.1fr 1fr; }
}
.ptvr-b2b2c-aliado__title {
    margin: 0 0 var(--ptv-space-6);
    color: var(--ptv-color-text-inverse);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: var(--ptv-tracking-tighter);
}
.ptvr-b2b2c-aliado__list {
    list-style: none;
    margin: 0 0 var(--ptv-space-6);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-3);
}
.ptvr-b2b2c-aliado__list-item {
    position: relative;
    padding-left: var(--ptv-space-6);
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}
.ptvr-b2b2c-aliado__list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: var(--ptv-radius-full);
    background: var(--ptv-color-brand-600);
}
.ptvr-b2b2c-aliado__lead {
    margin: 0;
    color: var(--ptv-color-text-inverse-muted, rgba(255, 255, 255, 0.8));
    font-size: var(--ptv-text-b3);
    line-height: var(--ptv-leading-normal);
}

/* ── 9. FAQs ─────────────────────────────────────────────────── */
.ptvr-b2b2c-faqs__header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--ptv-space-10);
}
.ptvr-b2b2c-faqs__lead {
    margin: var(--ptv-space-3) 0 0;
    color: var(--ptv-color-text-secondary);
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    letter-spacing: -0.02em;
}
.ptvr-b2b2c-faqs__accordion {
    max-width: 860px;
    margin: 0 auto;
}

/* ── 10. CTA final ───────────────────────────────────────────── */
.ptvr-b2b2c-cta {
    background: var(--ptv-color-bg-surface-warm, var(--ptv-color-neutral-200));
}
.ptvr-b2b2c-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ptv-space-5);
}
.ptvr-b2b2c-cta__lead {
    margin: 0;
    color: var(--ptv-color-text-secondary);
    font-size: 22px;
    font-weight: var(--ptv-font-medium);
    line-height: var(--ptv-leading-normal);
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════════════════════════════════
   CPT `requisito-viaje` — Requisitos para viajar a {destino} desde {origen}
   Reutiliza el sistema visual de `.ptvr-insurance__*` (single-seguro-de-
   viaje-para.php). Aquí solo lo específico de requisitos: banderas del
   hero, ancho del prose, cards de imperdibles y lista de "otros países".
   ═══════════════════════════════════════════════════════════════ */

/* Banderas del hero (fila origen + destino, sobre el intro del hero). */
.ptvr-req__flags {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-3);
}
.ptvr-req__flag { box-shadow: 0 2px 10px rgba(6, 21, 30, 0.18); }

/* Prose del contenido migrado — medida legible centrada. Hereda toda la
   tipografía de `.ptvr-article__body` (h2/h3/ul/tabla/blockquote/links). */
.ptvr-req__prose {
    max-width: 860px;
    margin-inline: auto;
}
.ptvr-req__prose > :first-child { margin-top: 0; }

/* Espaciado idéntico a la sección "Planes de seguro" (`#planes`) del
   single-seguro-de-viaje-para.php: title-block 64/0, carousel-section 80/64.
   Scoped por id → gana sobre las reglas base y las de media query, igual
   que en planes. */
#imperdibles .ptvr-insurance__title-block { padding-block: var(--ptv-space-16) 0; }
#imperdibles .ptvr-insurance__carousel-section { padding-block: var(--ptv-space-20) var(--ptv-space-16); }

/* ── Cards de Imperdibles (carrusel, mismo mecanismo que "Planes") ── */
/* Radio 12px como los cards de "Pasos"/"Garantías" (`.ptvr-insurance__step`);
   el default del kit es 32px (--radius-3xl). `height:100%` para que todos
   los slides del carrusel queden a la misma altura. */
.ptvr-imperdibles__card {
    --_card-radius: var(--ptv-radius-lg);
    height: 100%;
}

/* Imagen a altura fija (sustituye el aspect-ratio del kit), como en las
   cards de planes/relacionados. */
.ptvr-imperdibles__card-image {
    height: 220px;
    flex: 0 0 220px;
}
.ptvr-imperdibles__card-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    display: block;
}

.ptvr-imperdibles__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--ptv-space-2);
    /* Crece para que el botón pueda anclarse abajo aunque el texto varíe. */
    flex: 1 1 auto;
}

/* Botón opcional de la card — pegado al fondo, ancho por contenido. */
.ptvr-imperdibles__card-cta {
    margin-top: auto;
    align-self: flex-start;
}

.ptvr-imperdibles__card-title {
    margin: 0;
    font-size: 22px;
    font-weight: var(--ptv-font-semibold);
    line-height: var(--ptv-leading-heading);
    letter-spacing: -0.02em;
    color: var(--ptv-color-text-primary);
}

.ptvr-imperdibles__card-loc {
    margin: 0 0 var(--ptv-space-1);
    padding-bottom: var(--ptv-space-2);
    border-bottom: 1px solid var(--ptv-color-border);
    color: var(--ptv-color-text-teal);
    font-size: 14px;
    font-weight: var(--ptv-font-semibold);
}

.ptvr-imperdibles__card-text {
    margin: 0;
    font-size: 15px;
    line-height: var(--ptv-leading-normal);
    color: var(--ptv-color-text-secondary);
}

/* ── Lista "otros países" ────────────────────────────────────── */
.ptvr-req-otros__subtitle {
    margin: var(--ptv-space-8) 0 var(--ptv-space-4);
    font-size: 18px;
    font-weight: var(--ptv-font-semibold);
    letter-spacing: -0.02em;
    color: var(--ptv-color-text-primary);
}

.ptvr-req-otros__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ptv-space-2) var(--ptv-space-8);
}

.ptvr-req-otros__link {
    display: flex;
    align-items: center;
    gap: var(--ptv-space-3);
    padding: var(--ptv-space-2) 0;
    color: var(--ptv-color-text-primary);
    font-size: 15px;
    text-decoration: none;
}

.ptvr-req-otros__link:hover .ptvr-req-otros__link-text {
    color: var(--ptv-color-text-brand);
    text-decoration: underline;
}

.ptvr-req-otros__flags {
    display: inline-flex;
    align-items: center;
    gap: var(--ptv-space-1);
    flex-shrink: 0;
}

.ptvr-req-otros__chevron { color: var(--ptv-color-text-disabled); }

@media (max-width: 767.98px) {
    .ptvr-req-otros__list { grid-template-columns: 1fr; }
}