/*
 * Tema site · Puente del tema site hacia las vistas del núcleo y de los plugins (.iw-sf-*, tarjetas de planes, páginas de servicio).
 * Fuente: este archivo (antes, bloque <style> en resources/themes/site/partials/storefront-core-bridge.blade.php).
 * Lo carga ese partial con <link> y cache-bust por filemtime (brand-theme.md §4.3). En producción va a
 * public_html/css/themes/site-core-bridge.css junto con el tema.
 */
/* ── Contenedor y superficies ── */
.iw-site .iw-sf-container,
.iw-site .iw-inner-shell__crumbs.iw-sf-container {
    width: 100%;
    max-width: var(--iw-max, 1360px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--iw-gutter, 1rem);
    padding-right: var(--iw-gutter, 1rem);
    box-sizing: border-box;
}

.iw-site .iw-inner-shell {
    position: relative;
    background:
        radial-gradient(ellipse 90% 55% at 50% -8%, color-mix(in srgb, var(--iw-brand) 9%, transparent), transparent 62%),
        linear-gradient(180deg, var(--iw-surface) 0%, var(--iw-white) 38%, var(--iw-white) 100%);
}

.iw-site .iw-inner-shell::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(color-mix(in srgb, var(--iw-brand) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--iw-brand) 4%, transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 55%);
}

.iw-site .iw-inner-shell__body {
    position: relative;
    z-index: 1;
}

.iw-site .iw-sf-body,
.iw-site .iw-sf-main,
.iw-site .iw-main-inner {
    background: transparent;
}

.iw-site .iw-sf-section {
    padding-block: var(--iw-section-y, clamp(3.5rem, 2.8rem + 2.5vw, 6rem));
}

/* ── Migas de pan heredadas (alineadas al estilo minimal .iw-breadcrumb) ── */
.iw-site .iw-sf-breadcrumb-nav {
    margin-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0;
}

@media (min-width: 640px) {
    .iw-site .iw-sf-breadcrumb-nav {
        padding-top: 0.625rem;
    }
}

.iw-site .iw-sf-breadcrumb-nav ol {
    gap: 0.25rem 0.4rem;
}

.iw-site .iw-sf-crumb {
    display: inline;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: color-mix(in srgb, var(--iw-black) 48%, transparent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.iw-site .iw-sf-crumb:hover {
    color: var(--iw-brand);
    border-color: transparent;
    background: transparent;
}

.iw-site .iw-sf-crumb--current {
    background: transparent;
    border: 0;
    color: color-mix(in srgb, var(--iw-black) 78%, transparent);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.6875rem;
}

/* ── Tipografía de catálogo ── */
.iw-site .iw-sf-eyebrow {
    color: var(--iw-brand);
    letter-spacing: 0.22em;
    font-weight: 700;
}

.iw-site .iw-sf-heading {
    color: var(--iw-black);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.iw-site .iw-sf-subtext {
    color: color-mix(in srgb, var(--iw-black) 62%, transparent);
}

.iw-footer-light .iw-sf-subtext {
    color: var(--iw-footer-text-muted, rgba(255, 255, 255, 0.58));
}

.iw-site .iw-sf-divider {
    border-color: color-mix(in srgb, var(--iw-brand) 12%, transparent);
}

/* ── Enlaces y chips ── */
.iw-site .iw-sf-link,
.iw-site .iw-sf-nav-link:hover,
.iw-site .iw-sf-footer-link:hover {
    color: var(--iw-brand);
    text-decoration: none;
}

.iw-site .iw-sf-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.iw-site .iw-sf-chip {
    border-color: color-mix(in srgb, var(--iw-brand) 18%, transparent);
    background: color-mix(in srgb, var(--iw-brand) 6%, white);
    color: color-mix(in srgb, var(--iw-black) 72%, transparent);
    border-radius: var(--iw-radius-pill);
}

/* ── Botones de marca (cromo carrito: soft-square) ── */
.iw-site .iw-brand-btn {
    background: linear-gradient(135deg, var(--iw-brand), color-mix(in srgb, var(--iw-accent) 85%, var(--iw-brand)));
    color: var(--iw-white);
    border: none;
    border-radius: var(--iw-hero-btn-radius, 0.7rem);
    font-weight: 700;
    box-shadow: none;
    transition: filter 0.2s ease, transform 0.2s var(--iw-reveal-ease);
}

.iw-site .iw-brand-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.iw-site .iw-brand-btn--outline {
    background: transparent;
    color: var(--iw-brand);
    border: 1px solid color-mix(in srgb, var(--iw-brand) 35%, transparent);
    box-shadow: none;
    border-radius: var(--iw-hero-btn-radius, 0.7rem);
}

.iw-site .iw-brand-btn--outline:hover {
    background: color-mix(in srgb, var(--iw-brand) 8%, transparent);
    transform: none;
}

/* ── Paneles, inputs ── */
.iw-site .iw-sf-panel {
    border: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
    background: color-mix(in srgb, var(--iw-white) 94%, var(--iw-surface));
    border-radius: var(--iw-radius-xl);
    box-shadow: var(--iw-shadow-sm);
}

.iw-site .iw-sf-input,
.iw-site .iw-sf-textarea,
.iw-site .iw-sf-catalog-filter-input,
.iw-site .iw-sf-catalog-select {
    border-radius: var(--iw-radius-md);
    border-color: color-mix(in srgb, var(--iw-black) 12%, transparent);
    background: var(--iw-white);
}

.iw-site .iw-sf-input:focus,
.iw-site .iw-sf-textarea:focus,
.iw-site .iw-sf-catalog-filter-input:focus,
.iw-site .iw-sf-catalog-select:focus {
    border-color: var(--iw-brand);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-brand) 15%, transparent);
}

/* ── Catálogo / tienda ── */
.iw-site .iw-sf-catalog-section-divider {
    border-color: color-mix(in srgb, var(--iw-brand) 10%, transparent);
}

.iw-site .iw-sf-catalog-sidebar {
    border-radius: var(--iw-radius-xl);
}

.iw-site .iw-sf-catalog-filter-title,
.iw-site .iw-sf-catalog-filter .iw-sf-catalog-filter-title {
    color: var(--iw-black);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.iw-site .iw-sf-catalog-filter-submit {
    border-radius: var(--iw-radius-pill);
}

.iw-site .iw-sf-catalog-categories__item {
    border-radius: var(--iw-radius-lg);
}

.iw-site .iw-sf-catalog-categories__avatar {
    border-color: color-mix(in srgb, var(--iw-brand) 15%, transparent);
}

.iw-site .iw-sf-catalog-categories__arrow {
    background: var(--iw-white);
    border: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
    color: var(--iw-black);
    box-shadow: var(--iw-shadow-sm);
}

.iw-site .iw-sf-catalog-categories__arrow:hover {
    border-color: color-mix(in srgb, var(--iw-brand) 30%, transparent);
    color: var(--iw-brand);
}

.iw-site .iw-sf-catalog-pagination__page {
    border-radius: var(--iw-radius-pill);
}

.iw-site .iw-sf-catalog-pagination__page--active {
    background: var(--iw-brand);
    border-color: var(--iw-brand);
    color: var(--iw-white);
}

.iw-site .iw-sf-catalog-price-range::-webkit-slider-thumb,
.iw-site .iw-sf-catalog-price-range::-moz-range-thumb {
    background: var(--iw-brand);
    border-color: var(--iw-brand);
}

.iw-site .iw-sf-catalog-price-dual__fill {
    background: var(--iw-brand);
}

/* ── Tarjetas de producto ── */
.iw-site .iw-sf-product-card,
.iw-site .iw-sf-product-card article {
    border-radius: var(--iw-radius-xl);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--iw-black) 6%, transparent);
    background: var(--iw-white);
    box-shadow: var(--iw-shadow-xs);
    transition: transform 0.35s var(--iw-reveal-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.iw-site .iw-sf-product-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--iw-brand) 22%, transparent);
    box-shadow: var(--iw-shadow-md), var(--iw-shadow-brand-soft);
}

.iw-site .iw-ec-campaign-carousel__tab--active {
    border-color: var(--iw-brand);
    color: var(--iw-brand);
    background: color-mix(in srgb, var(--iw-brand) 8%, white);
}

.iw-site .iw-ec-campaign-carousel__view-all {
    color: var(--iw-brand);
    font-weight: 700;
}

.iw-site .iw-ec-campaign-carousel__nav {
    border-color: color-mix(in srgb, var(--iw-brand) 15%, transparent);
}

.iw-site .iw-sf-product-price {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--iw-brand);
}

.iw-site .iw-sf-stock--in {
    color: color-mix(in srgb, var(--iw-brand) 72%, var(--iw-black));
}

.iw-site .iw-sf-stock-dot--in {
    background: var(--iw-brand);
}

.iw-site .iw-status-success {
    border-radius: var(--iw-radius-xl);
    border: 1px solid color-mix(in srgb, var(--iw-brand) 28%, transparent);
    background: color-mix(in srgb, var(--iw-brand) 9%, white);
    color: color-mix(in srgb, var(--iw-brand) 78%, var(--iw-black));
}

.iw-site .iw-status-success-text {
    color: color-mix(in srgb, var(--iw-brand) 72%, var(--iw-black));
}

.iw-site .iw-coupon-applied {
    border-radius: var(--iw-radius-xl);
    border: 1px solid color-mix(in srgb, var(--iw-brand) 28%, transparent);
    background: color-mix(in srgb, var(--iw-brand) 7%, white);
}

.iw-site .checkout-payment-option:has(:checked) {
    border-color: var(--iw-brand);
    box-shadow: 0 0 0 1px var(--iw-brand);
}

/* ── Servicios catálogo (plugin) ── */
/* Estilos principales en storefront-design-system (.iw-service-catalog-grid) */

/* Carrito / checkout: ver partials/storefront-commerce-flow.blade.php */

/* ── Contacto (componentes core) ── */
.iw-site .iw-sf-contact-col-title {
    color: var(--iw-black);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.iw-site .iw-sf-contact-icon {
    color: var(--iw-brand);
    border-color: color-mix(in srgb, var(--iw-brand) 20%, transparent);
    background: color-mix(in srgb, var(--iw-brand) 8%, white);
}

.iw-site .iw-sf-contact-help-band {
    border-color: color-mix(in srgb, var(--iw-brand) 12%, transparent);
}

.iw-site .iw-sf-contact-help-tile {
    border: 1px solid color-mix(in srgb, var(--iw-black) 6%, transparent);
    border-radius: var(--iw-radius-xl);
    background: var(--iw-white);
    padding: 1.15rem;
    box-shadow: var(--iw-shadow-xs);
}

.iw-site .iw-sf-contact-help-tile:hover {
    border-color: color-mix(in srgb, var(--iw-brand) 28%, transparent);
    box-shadow: var(--iw-shadow-sm);
}

/* ── Páginas estáticas (text-page / legales) ── */
.iw-site .iw-sf-page-shell.iw-inner-shell__body {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.iw-site .iw-sf-prose.iw-legal-page :where(h2) {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--iw-black);
}

.iw-site .iw-sf-prose.iw-legal-page :where(h2:first-child) {
    margin-top: 0;
}

.iw-site .iw-sf-prose.iw-legal-page :where(p) {
    color: color-mix(in srgb, var(--iw-black) 68%, transparent);
    line-height: 1.75;
}

/* Tabla de plazos (vencimiento de la instalación): en móvil se desplaza dentro de su caja. */
.iw-site .iw-sf-prose.iw-legal-page :where(table) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.25rem 0;
    border-collapse: collapse;
    font-size: 0.9rem;
    line-height: 1.55;
}

.iw-site .iw-sf-prose.iw-legal-page :where(th, td) {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
    text-align: left;
    vertical-align: top;
    min-width: 9rem;
}

.iw-site .iw-sf-prose.iw-legal-page :where(th) {
    font-weight: 600;
    color: var(--iw-black);
    background: color-mix(in srgb, var(--iw-brand) 6%, transparent);
}

.iw-site .iw-sf-prose.iw-legal-page :where(td:first-child) {
    font-weight: 600;
    white-space: nowrap;
    color: var(--iw-black);
}

/* En móvil cada fila es una tarjeta y cada celda lleva su título (data-label). */
@media (max-width: 640px) {
    .iw-site .iw-sf-prose.iw-legal-page :where(table, tbody, tr, td) {
        display: block;
        width: 100%;
    }

    .iw-site .iw-sf-prose.iw-legal-page :where(thead) {
        display: none;
    }

    .iw-site .iw-sf-prose.iw-legal-page :where(tr) {
        margin-bottom: 0.75rem;
        border: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
        border-radius: var(--iw-radius-xl);
        overflow: hidden;
    }

    .iw-site .iw-sf-prose.iw-legal-page :where(td) {
        min-width: 0;
        white-space: normal;
        border-bottom: 0;
        padding: 0.55rem 0.9rem;
    }

    .iw-site .iw-sf-prose.iw-legal-page :where(td:first-child) {
        background: color-mix(in srgb, var(--iw-brand) 6%, transparent);
    }

    .iw-site .iw-sf-prose.iw-legal-page :where(td[data-label]:not(:first-child))::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        font-size: 0.75rem;
        font-weight: 600;
        color: color-mix(in srgb, var(--iw-black) 55%, transparent);
    }
}

/* ── Blog / notas ── */
.iw-site .notes-article__content :where(h2, h3, h4) {
    color: var(--iw-black);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.iw-site .notes-article__content :where(a) {
    color: var(--iw-brand);
}

.iw-site .notes-post-card,
.iw-site .notes-sidebar {
    border-radius: var(--iw-radius-xl);
    border-color: color-mix(in srgb, var(--iw-black) 6%, transparent);
    box-shadow: var(--iw-shadow-sm);
}

/* ── Reservas / cotizaciones / crédito ── */
.iw-site .iw-reservas-wizard__step--active,
.iw-site .iw-quote-scratch__header,
.iw-site .credit-wizard__step.is-active {
    border-color: var(--iw-brand);
    color: var(--iw-brand);
}

.iw-site .iw-reservas-wizard__panel,
.iw-site .credit-wizard__panel {
    border-radius: var(--iw-radius-xl);
    border-color: color-mix(in srgb, var(--iw-black) 8%, transparent);
    box-shadow: var(--iw-shadow-sm);
}

/* Agendar cita — cromo plano (como carrito/text-page), sin cajas */
.iw-cita-page {
    max-width: 42rem;
}
.iw-cita-form {
    display: grid;
    gap: 1.75rem;
    margin-top: 0.25rem;
}
.iw-cita-alert {
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
    font-size: 0.875rem;
    line-height: 1.45;
}
.iw-cita-alert--warn { color: #92400e; }
.iw-cita-alert--error { color: #9f1239; }
.iw-cita-block {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.iw-cita-block + .iw-cita-block {
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--iw-black) 7%, transparent);
}
.iw-cita-block__title {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--iw-black) 48%, transparent);
}
.iw-cita-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.iw-cita-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.55rem 1rem;
    border-radius: var(--iw-hero-btn-radius, 1rem);
    border: 1px solid color-mix(in srgb, var(--iw-black) 12%, transparent);
    background: transparent;
    color: var(--iw-black);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.iw-cita-choice:hover {
    border-color: color-mix(in srgb, var(--iw-brand) 40%, transparent);
    color: var(--iw-brand);
}
.iw-cita-choice.is-on {
    border-color: var(--iw-brand);
    background: var(--iw-brand);
    color: #fff;
}
.iw-cita-interest {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--iw-black);
}
.iw-cita-field {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.85rem;
}
.iw-cita-field:first-of-type { margin-top: 0; }
.iw-cita-field__label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--iw-black) 72%, transparent);
}
.iw-cita-field__help {
    font-size: 0.75rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--iw-black) 48%, transparent);
}
.iw-cita-optional {
    font-weight: 500;
    color: color-mix(in srgb, var(--iw-black) 42%, transparent);
}
.iw-cita-input {
    width: 100%;
    border-radius: var(--iw-hero-btn-radius, 1rem);
    border: 1px solid color-mix(in srgb, var(--iw-black) 12%, transparent);
    background: var(--iw-white);
    padding: 0.7rem 0.9rem;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--iw-black);
    transition: border-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 640px) {
    .iw-cita-input { font-size: 0.875rem; }
}
.iw-cita-input:focus {
    outline: none;
    border-color: var(--iw-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-brand) 14%, transparent);
}
.iw-cita-input--area {
    min-height: 5.5rem;
    resize: vertical;
}
.iw-cita-schedule {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}
.iw-cita-field--inline {
    flex: 1 1 12rem;
    margin-top: 0;
    min-width: 0;
}
.iw-cita-schedule__btn {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding-inline: 1.1rem;
}
.iw-cita-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}
.iw-cita-slot {
    min-height: 2.35rem;
    min-width: 4.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--iw-hero-btn-radius, 1rem);
    border: 1px solid color-mix(in srgb, var(--iw-black) 12%, transparent);
    background: transparent;
    color: var(--iw-black);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.iw-cita-slot:hover {
    border-color: color-mix(in srgb, var(--iw-brand) 40%, transparent);
}
.iw-cita-slot.is-on {
    border-color: var(--iw-brand);
    background: var(--iw-brand);
    color: #fff;
}
.iw-cita-empty {
    margin: 0.85rem 0 0;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--iw-black) 52%, transparent);
}
.iw-cita-applicant {
    display: inline-flex;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}
.iw-cita-applicant__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--iw-hero-btn-radius, 1rem);
    border: 1px solid color-mix(in srgb, var(--iw-black) 12%, transparent);
    font-size: 0.8125rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--iw-black) 58%, transparent);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.iw-cita-applicant__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.iw-cita-applicant__opt.is-on {
    border-color: var(--iw-brand);
    background: var(--iw-brand);
    color: #fff;
}
.iw-cita-grid {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}
@media (min-width: 640px) {
    .iw-cita-grid { grid-template-columns: 1fr 1fr; }
    .iw-cita-field--full { grid-column: 1 / -1; }
    .iw-cita-grid .iw-cita-field { margin-top: 0; }
}
.iw-cita-submit {
    margin-top: 1.35rem;
    display: flex;
    justify-content: flex-start;
}
.iw-cita-submit .iw-btn-primary {
    min-width: 12rem;
    justify-content: center;
}
.iw-cita-submit .iw-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Footer heredado (oculto: site usa iw-footer-light) ── */
.iw-site .iw-sf-footer {
    display: none;
}

/* CMP cookies: contraste fijo (el JS del núcleo pinta primary=blanco → texto blanco). */
.iw-site .iw-cmp__btn {
    background: #fff;
    color: #111827;
    border: 1px solid #d1d5db;
    -webkit-text-fill-color: #111827;
}
.iw-site .iw-cmp__btn:hover {
    background: #f8fafc;
    color: #111827;
    -webkit-text-fill-color: #111827;
}
.iw-site .iw-cmp__btn--primary {
    background: var(--iw-brand, #196cdf);
    border-color: var(--iw-brand, #196cdf);
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.iw-site .iw-cmp__btn--primary:hover {
    background: var(--iw-brand, #196cdf);
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: brightness(1.06);
}
.iw-site .iw-cmp__icon {
    background: var(--iw-brand, #196cdf);
    color: #fff;
}
.iw-site .iw-cmp__title {
    color: var(--iw-black, #0a0a0a);
}
.iw-site .iw-cmp__link {
    color: var(--iw-brand, #196cdf);
}
/* ── Tarjetas de planes (widget de Suscripciones) · estilo del sitio ──────────────────────────────────
   Una sola tarjeta para todos los bloques de «Sistema web» (niveles de cada sistema, Sistema personalizado y el
   servicio suelto) y para la vitrina de la Central. Variables del plugin (--iw-plan-*) + ajustes de estructura. */
.iw-site {
    --iw-plan-text: var(--iw-black);
    --iw-plan-muted: color-mix(in srgb, var(--iw-black) 58%, transparent);
    --iw-plan-border: color-mix(in srgb, var(--iw-black) 7%, transparent);
    --iw-plan-border-hover: color-mix(in srgb, var(--iw-brand) 28%, transparent);
    --iw-plan-radius: var(--iw-radius-xl, 1.375rem);
    --iw-plan-shadow: var(--iw-shadow-sm);
    --iw-plan-accent: var(--iw-brand);
    --iw-plan-check: var(--iw-brand);
    --iw-plan-divider: color-mix(in srgb, var(--iw-black) 7%, transparent);
    --iw-plan-button-radius: var(--iw-hero-btn-radius, 0.875rem);
    --iw-plan-price-size: 2rem;
    --iw-plan-soon-bg: #f1edfe;
    --iw-plan-soon-text: #6d28d9;
    --iw-plan-switch-bg: var(--iw-surface-alt, #eef4fb);
    --iw-plan-switch-border: color-mix(in srgb, var(--iw-black) 6%, transparent);
    --iw-plan-switch-text: color-mix(in srgb, var(--iw-black) 60%, transparent);
    --iw-plan-switch-active-bg: var(--iw-white);
    --iw-plan-switch-active-text: var(--iw-brand);
    --iw-plan-gap: 1.5rem;
}

/* Selector de periodo: píldora con un indicador que se desliza al botón activo (solo CSS: el plugin cambia
   aria-pressed y el indicador sigue al botón con :has()). Botones del mismo ancho para que el salto sea exacto. */
.iw-site .iw-subscription-period-switch:not([hidden]) {
    position: relative;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 0;
    width: fit-content;
    margin: 0 auto 2rem;
    padding: 4px;
    isolation: isolate;
    --iw-period-count: 1;
    --iw-period-index: 0;
}
.iw-site .iw-subscription-period-switch::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--iw-period-count));
    border-radius: var(--iw-radius-pill, 999px);
    background: var(--iw-white);
    box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--iw-brand) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--iw-black) 6%, transparent);
    transform: translateX(calc(100% * var(--iw-period-index)));
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.iw-site .iw-subscription-period-switch:has(> button:nth-child(2):last-child) { --iw-period-count: 2; }
.iw-site .iw-subscription-period-switch:has(> button:nth-child(3):last-child) { --iw-period-count: 3; }
.iw-site .iw-subscription-period-switch:has(> button:nth-child(4):last-child) { --iw-period-count: 4; }
.iw-site .iw-subscription-period-switch:has(> button:nth-child(2)[aria-pressed="true"]) { --iw-period-index: 1; }
.iw-site .iw-subscription-period-switch:has(> button:nth-child(3)[aria-pressed="true"]) { --iw-period-index: 2; }
.iw-site .iw-subscription-period-switch:has(> button:nth-child(4)[aria-pressed="true"]) { --iw-period-index: 3; }
.iw-site .iw-subscription-period-switch button,
.iw-site .iw-subscription-period-switch button[aria-pressed="true"] {
    position: relative;
    z-index: 1;
    min-width: 6.25rem;
    padding: 0.65rem 1.5rem;
    background: transparent;
    box-shadow: none;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.35s ease, transform 0.2s ease;
}
.iw-site .iw-subscription-period-switch button[aria-pressed="true"] {
    color: var(--iw-brand);
}
.iw-site .iw-subscription-period-switch button:hover:not([aria-pressed="true"]):not(:disabled) {
    color: var(--iw-black);
}
.iw-site .iw-subscription-period-switch button:active:not(:disabled) {
    transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
    .iw-site .iw-subscription-period-switch::before,
    .iw-site .iw-subscription-period-switch button {
        transition: none;
    }
}
@media (max-width: 480px) {
    .iw-site .iw-subscription-period-switch button,
    .iw-site .iw-subscription-period-switch button[aria-pressed="true"] {
        min-width: 0;
        padding: 0.6rem 1rem;
        font-size: 0.875rem;
    }
}

/* Grilla: dos tarjetas (p. ej. ISP Hub) con el mismo ancho que tres. */
@media (min-width: 1024px) {
    .iw-site .iw-subscription-plans__grid[data-columns="2"] {
        max-width: 54rem;
        margin-inline: auto;
    }
}

/* Tarjeta */
.iw-site .iw-subscription-plan-card {
    transition: box-shadow 0.35s ease, transform 0.4s var(--iw-reveal-ease, ease), border-color 0.3s ease;
}
.iw-site .iw-subscription-plan-card:hover {
    box-shadow: var(--iw-shadow-md);
    transform: translateY(-3px);
}
.iw-site .iw-subscription-plan-card--featured {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--iw-brand) 34%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--iw-brand) 5%, white) 0%, white 42%);
    box-shadow: var(--iw-shadow-md), var(--iw-shadow-brand-soft);
}
.iw-site .iw-subscription-plan-card--soon {
    opacity: 1;
}
.iw-site .iw-subscription-plan-card__body,
.iw-site .iw-subscription-plan-card:has(.iw-subscription-plan-card__badge) .iw-subscription-plan-card__body {
    padding: 1.75rem 1.5rem 1.5rem;
}

/* Etiqueta («Recomendado», «Próximamente»): píldora pequeña arriba a la derecha. */
.iw-site .iw-subscription-plan-card__badge {
    top: 1.6rem;
    right: 1.25rem;
    left: auto;
    transform: none;
    padding: 0.3rem 0.65rem;
    border-radius: var(--iw-radius-pill, 999px);
    background: linear-gradient(90deg, var(--iw-brand), color-mix(in srgb, var(--iw-accent) 80%, var(--iw-brand)));
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.iw-site .iw-subscription-plan-card__badge--soon {
    background: var(--iw-plan-soon-bg);
    color: var(--iw-plan-soon-text);
}
.iw-site .iw-subscription-plan-card:has(.iw-subscription-plan-card__badge) .iw-subscription-plan-card__title {
    padding-right: 7.5rem;
}

.iw-site .iw-subscription-plan-card__title {
    font-size: 1.1875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.iw-site .iw-subscription-plan-card__desc {
    min-height: 2.9em; /* dos líneas: los botones quedan a la misma altura */
    margin-top: 0.45rem;
    line-height: 1.45;
}

/* Precio */
.iw-site .iw-subscription-showcase {
    margin: 0.25rem 0 0.35rem;
}
.iw-site .iw-subscription-showcase__price,
.iw-site .iw-subscription-plan-card__compact-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.3rem;
    margin: 1.1rem 0 0.15rem;
}
.iw-site .iw-subscription-showcase__price strong,
.iw-site .iw-subscription-plan-card__compact-price strong {
    font-size: var(--iw-plan-price-size);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--iw-black);
}
.iw-site .iw-subscription-showcase__price > span,
.iw-site .iw-subscription-plan-card__compact-price span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--iw-plan-muted);
}
.iw-site .iw-subscription-showcase__unit,
.iw-site .iw-subscription-showcase__alternative,
.iw-site .iw-subscription-plan-card__notice {
    font-size: 0.8125rem;
    color: var(--iw-plan-muted);
}
.iw-site .iw-subscription-plan-card__form {
    margin-top: 0.35rem;
}

/* Botón: soft-square como el resto del sitio. Destacado = marca; los demás, versión suave. */
.iw-site .iw-subscription-plan-card__button {
    min-height: 44px;
    margin-top: 0.85rem;
    padding: 0.7rem 1.25rem;
    background: linear-gradient(135deg, var(--iw-brand), color-mix(in srgb, var(--iw-accent) 85%, var(--iw-brand)));
    color: var(--iw-white);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.2s var(--iw-reveal-ease, ease), filter 0.2s ease, background-color 0.2s ease;
}
.iw-site .iw-subscription-plan-card__form .iw-subscription-plan-card__button {
    margin-top: 0;
}
.iw-site .iw-subscription-plan-card__button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}
.iw-site .iw-subscription-plan-card:not(.iw-subscription-plan-card--featured) .iw-subscription-plan-card__button {
    background: color-mix(in srgb, var(--iw-brand) 8%, white);
    color: var(--iw-brand);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iw-brand) 22%, transparent);
}
.iw-site .iw-subscription-plan-card:not(.iw-subscription-plan-card--featured) .iw-subscription-plan-card__button:hover {
    background: color-mix(in srgb, var(--iw-brand) 13%, white);
    filter: none;
}

.iw-site .iw-subscription-plan-card__button--soon,
.iw-site .iw-subscription-plan-card:not(.iw-subscription-plan-card--featured) .iw-subscription-plan-card__button--soon {
    background: color-mix(in srgb, var(--iw-black) 4%, white);
    color: var(--iw-plan-muted);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iw-black) 7%, transparent);
    opacity: 1;
    cursor: default;
    transform: none;
    filter: none;
}

/* «Qué incluye» y listas */
.iw-site .iw-subscription-plan-card__features-title {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iw-plan-muted);
}
.iw-site .iw-subscription-plan-card__features {
    gap: 0.55rem;
    margin: 0.85rem 0 1.25rem;
}
.iw-site .iw-subscription-plan-card__features li {
    color: color-mix(in srgb, var(--iw-black) 80%, transparent);
}

/* «Add-ons disponibles»: sin caja, separados de «Qué incluye» por una línea punteada y con otro trazo (+ en lugar
   del check, texto secundario). Siempre al pie de la tarjeta, alineados entre tarjetas. */
.iw-site .iw-plan-addons {
    margin-top: auto;
    padding-top: 1.15rem;
    border-top: 1px dashed color-mix(in srgb, var(--iw-black) 14%, transparent);
}
.iw-site .iw-plan-addons .iw-subscription-plan-card__features-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--iw-brand);
}
.iw-site .iw-plan-addons__list {
    display: grid;
    gap: 0.5rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}
.iw-site .iw-plan-addons__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.iw-site .iw-plan-addons__item::before {
    content: "+";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--iw-brand) 40%, transparent);
    color: var(--iw-brand);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}
.iw-site .iw-plan-addons__name {
    min-width: 0;
    flex: 1 1 auto;
    color: color-mix(in srgb, var(--iw-black) 68%, transparent);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}
.iw-site a.iw-plan-addons__name:hover {
    color: var(--iw-brand);
}
.iw-site .iw-plan-addons__status {
    flex-shrink: 0;
    color: var(--iw-plan-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.iw-site .iw-plan-addons__item--soon .iw-plan-addons__status {
    color: var(--iw-plan-soon-text);
}
.iw-site .iw-plan-addons__item--quote .iw-plan-addons__status {
    color: var(--iw-brand);
}

/* Servicio suelto (renovación del diseño): la misma tarjeta, en horizontal. */
.iw-site .iw-sw-extra-card .iw-subscription-plan-card__body {
    gap: 1.25rem;
}
.iw-site .iw-sw-extra-card__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iw-brand);
}
.iw-site .iw-sw-extra-card .iw-subscription-plan-card__desc {
    min-height: 0;
    max-width: 44rem;
}
.iw-site .iw-sw-extra-card__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}
.iw-site .iw-sw-extra-card__action .iw-subscription-showcase__price {
    margin: 0;
}
.iw-site .iw-sw-extra-card__action .iw-subscription-plan-card__button {
    width: auto;
    margin-top: 0;
}
@media (min-width: 768px) {
    .iw-site .iw-sw-extra-card .iw-subscription-plan-card__body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.75rem 2rem;
    }
    .iw-site .iw-sw-extra-card__action {
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-end;
    }
}

.iw-site .iw-sw-extra__price {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--iw-black);
    font-variant-numeric: tabular-nums;
}
/* Add-ons · precio o estado en cada ficha (sale de la Central) */
.iw-site .iw-mod-guide-module__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin: 0.65rem 0 0;
}
.iw-site .iw-mod-guide-module__price-label {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--iw-black);
    font-variant-numeric: tabular-nums;
}
.iw-site .iw-mod-guide-module__price--soon .iw-mod-guide-module__price-label {
    color: #6d28d9;
}
.iw-site .iw-mod-guide-module__price--custom .iw-mod-guide-module__price-label,
.iw-site .iw-mod-guide-module__price--base .iw-mod-guide-module__price-label {
    color: var(--iw-brand, #196cdf);
}
.iw-site .iw-mod-guide-module__price-note {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--iw-black) 58%, transparent);
}

/* Páginas de servicio · servicio de la Central y pasos para contratarlo */
.iw-site .iw-svc-central__steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.iw-site .iw-svc-central__step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
}
.iw-site .iw-svc-central__step:last-child {
    border-bottom: 0;
}
.iw-site .iw-svc-central__step-index {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--iw-brand, #196cdf) 10%, white);
    color: var(--iw-brand, #196cdf);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.iw-site .iw-svc-central__step-text {
    padding-top: 0.35rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--iw-black) 72%, transparent);
}
.iw-site .iw-svc-central__step-text strong {
    color: var(--iw-black);
}
/* Tarjetas de un curso (Marketing): sin lista de lo que incluye, el precio y «Comprar» van al pie para que las
   dos opciones queden parejas aunque la descripción tenga otro largo. */
.iw-site .iw-svc-course-card .iw-subscription-showcase {
    margin-top: auto;
}
/* Próximas fechas (las que el carrito pedirá elegir) y aviso sin fechas. */
.iw-site .iw-svc-course-dates {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--iw-radius-lg, 1rem);
    background: color-mix(in srgb, var(--iw-brand) 6%, white);
}
.iw-site .iw-svc-course-dates__title {
    margin: 0 0 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--iw-brand);
}
.iw-site .iw-svc-course-dates__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.iw-site .iw-svc-course-dates__list li {
    padding: 0.2rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--iw-brand) 22%, transparent);
    border-radius: 999px;
    background: var(--iw-white, #fff);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--iw-black);
}
.iw-site .iw-svc-course-card__soon {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
    color: color-mix(in srgb, var(--iw-black) 58%, transparent);
}
/* Pasos en fila, debajo de las tarjetas de un curso (Marketing). */
.iw-site .iw-svc-central__steps--row {
    max-width: 54rem;
    margin: 2.5rem auto 0;
}
@media (min-width: 768px) {
    .iw-site .iw-svc-central__steps--row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
    .iw-site .iw-svc-central__steps--row .iw-svc-central__step {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0;
        border-bottom: 0;
    }
    .iw-site .iw-svc-central__steps--row .iw-svc-central__step-text {
        padding-top: 0;
    }
}
/* Utilidades propias (no dependen del build de Tailwind) */
.iw-site .iw-sw-stack > * + * {
    margin-top: 5rem;
}
.iw-site .iw-svc-central__grid {
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
}
@media (min-width: 1024px) {
    .iw-site .iw-svc-central__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        align-items: start;
        gap: 3rem;
    }
}
.iw-site .iw-svc-central__card-body {
    padding: 1.75rem 1.5rem;
}
@media (min-width: 640px) {
    .iw-site .iw-svc-central__card-body {
        padding: 2rem;
    }
}