/* Tema site (Imperio Web) — ficha de una oferta de la Central (`/servicio/…`). Marca sobre las clases `iwc-offer…` del
   complemento; se carga solo en la ficha (storefront/imperio-central/service.blade.php del tema). */

.iw-offer { --iwo-line: color-mix(in srgb, var(--iw-black) 9%, transparent); }

/* Cabecera: imagen + caja de compra */
.iw-offer .iwc-offer__hero {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
    .iw-offer .iwc-offer__hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .iw-offer .iwc-offer__hero--plain { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
    .iw-offer .iwc-offer__hero > .iwc-offer__buy { position: sticky; top: 6.5rem; }
}
.iw-offer .iwc-offer__media {
    overflow: hidden;
    border-radius: var(--iw-radius-2xl);
    border: 0;
    background: linear-gradient(135deg, var(--iw-surface-alt), var(--iw-white));
    box-shadow: none;
    aspect-ratio: 16 / 9;
}
.iw-offer .iwc-offer__media img,
.iw-offer .iwc-offer__media picture { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Marco de la imagen: recorta la cinta «Oferta» de la esquina. */
.iw-offer__media-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--iw-radius-2xl);
}
.iw-offer:not(.iw-offer--course) .iwc-offer__media { aspect-ratio: 4 / 3; padding: 1.25rem; }

/* Diseño plano (pauta del dueño, 2026-11-11): sin contenedores anidados. La columna de compra no es una tarjeta;
   las secciones se separan con líneas, no con cajas dentro de cajas. */
.iw-offer .iwc-offer__hero > .iwc-offer__buy {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.iw-offer__kind {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--iw-brand);
}
.iw-offer .iwc-offer__title {
    margin: 0;
    font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--iw-black);
}
.iw-offer .iwc-offer__summary {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--iw-black) 64%, transparent);
}

/* Opciones (Solo el curso / Con asesoría): tarjetas para elegir. Es el punto de decisión de compra, así que aquí sí
   van tarjetas (un solo nivel; la columna de compra sigue plana). */
.iw-offer .iwc-offer__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.35rem 0 0;
    padding: 0;
    list-style: none;
    border: 0;
}
.iw-offer .iwc-offer__option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    margin: 0;
    padding: 0.95rem 1rem 1rem;
    border-radius: var(--iw-radius-lg);
    border: 1.5px solid color-mix(in srgb, var(--iw-black) 10%, transparent);
    background: var(--iw-white);
    box-shadow: var(--iw-shadow-xs);
    transition: transform 0.25s var(--iw-reveal-ease), border-color 0.2s ease, box-shadow 0.25s var(--iw-reveal-ease), background-color 0.2s ease;
}
.iw-offer .iwc-offer__option:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--iw-brand) 45%, transparent);
    box-shadow: var(--iw-shadow-brand-soft);
}
.iw-offer .iwc-offer__option[aria-current="true"] {
    border-color: var(--iw-brand);
    background: linear-gradient(160deg, color-mix(in srgb, var(--iw-brand) 9%, white) 0%, var(--iw-white) 70%);
    box-shadow: 0 0 0 1px var(--iw-brand), var(--iw-shadow-brand-soft);
}
/* Marca de elegido */
.iw-offer .iwc-offer__option::after {
    content: "";
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--iw-black) 22%, transparent);
    background: var(--iw-white);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.iw-offer .iwc-offer__option[aria-current="true"]::after {
    border-color: var(--iw-brand);
    background: var(--iw-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.iw-offer__option-tag {
    align-self: flex-start;
    margin-bottom: 0.3rem;
    padding: 0.12rem 0.55rem;
    border-radius: var(--iw-radius-pill);
    background: var(--iw-brand);
    color: var(--iw-white);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.iw-offer__option-tag--soft {
    background: color-mix(in srgb, var(--iw-brand) 10%, white);
    color: var(--iw-brand);
}
.iw-offer .iwc-offer__option-label { padding-right: 1.5rem; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--iw-black); }
.iw-offer .iwc-offer__option-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.875rem; color: color-mix(in srgb, var(--iw-black) 60%, transparent); }
.iw-offer .iwc-offer__option-price strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--iw-black); }
.iw-offer .iwc-offer__option[aria-current="true"] .iwc-offer__option-price strong { color: var(--iw-brand); }
.iw-offer .iwc-offer__option-price s { font-size: 0.8125rem; color: color-mix(in srgb, var(--iw-black) 45%, transparent); }
@media (max-width: 420px) {
    .iw-offer .iwc-offer__options { grid-template-columns: minmax(0, 1fr); }
}

/* Precio */
.iw-offer__old {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 -0.6rem;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--iw-black) 50%, transparent);
}
.iw-offer__old s { text-decoration-thickness: 1.5px; }

.iw-offer .iwc-offer__price { margin-top: 1.1rem; }
.iw-offer .iwc-offer__price-amount {
    font-size: clamp(1.9rem, 1.6rem + 1vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--iw-black);
}
.iw-offer .iwc-offer__note { font-size: 0.8125rem; line-height: 1.5; color: color-mix(in srgb, var(--iw-black) 60%, transparent); }

/* Botones */
.iw-offer .iwc-offer__actions { margin-top: 1.1rem; }
.iw-offer .iwc-offer__actions .iw-brand-btn,
.iw-offer .iwc-offer__closing .iw-brand-btn,
.iw-offer .iwc-offer__bar .iw-brand-btn {
    min-height: 48px;
    border-radius: var(--iw-hero-btn-radius, 1rem);
    background: linear-gradient(135deg, var(--iw-brand), color-mix(in srgb, var(--iw-accent) 85%, var(--iw-brand)));
    font-weight: 700;
    transition: transform 0.2s var(--iw-reveal-ease), filter 0.2s ease;
}
.iw-offer .iwc-offer__actions .iw-brand-btn { width: 100%; }
.iw-offer .iw-brand-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Botones de otros complementos: «Ver detalles del curso», «Agendar una llamada». */
.iw-offer .iwc-offer__actions--extra { display: grid; gap: 0.6rem; }
.iw-offer .iwc-offer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0.5rem 1rem;
    border-radius: var(--iw-hero-btn-radius, 1rem);
    border: 1px solid color-mix(in srgb, var(--iw-brand) 30%, transparent);
    background: color-mix(in srgb, var(--iw-brand) 6%, white);
    color: var(--iw-brand);
    font-size: 0.875rem;
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.2s var(--iw-reveal-ease);
}
.iw-offer .iwc-offer__btn:hover { background: color-mix(in srgb, var(--iw-brand) 11%, white); transform: translateY(-1px); }

/* Listas con visto */
.iw-offer .iwc-offer__checks--compact { margin-top: 1rem; font-size: 0.875rem; }
.iw-offer .iwc-offer__checks li::before { color: var(--iw-brand); }

/* Secciones */
.iw-offer .iwc-offer__section { margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.iw-offer .iwc-offer__h2 {
    position: relative;
    margin: 0 0 1.1rem;
    padding-left: 0.9rem;
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--iw-black);
}
.iw-offer .iwc-offer__h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--iw-brand), var(--iw-accent));
}
/* Qué incluye: lista plana en columnas */
.iw-offer .iwc-offer__section > .iwc-offer__checks {
    display: grid;
    gap: 0.65rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.iw-offer .iwc-offer__section > .iwc-offer__checks li {
    border: 0;
    background: none;
    border-radius: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Detalle */
.iw-offer .iwc-offer__details { max-width: 46rem; font-size: 0.9375rem; line-height: 1.7; color: color-mix(in srgb, var(--iw-black) 74%, transparent); }
.iw-offer .iwc-offer__details h2 {
    margin: 1.6rem 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--iw-black);
}
.iw-offer .iwc-offer__details > h2:first-child { margin-top: 0; }
.iw-offer .iwc-offer__details ul { margin: 0.5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.iw-offer .iwc-offer__details ul li + li { margin-top: 0.4rem; }
/* Temario: lista numerada, separada por líneas */
.iw-offer .iwc-offer__details ol {
    counter-reset: iwo;
    display: grid;
    gap: 0 2rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--iwo-line);
}
@media (min-width: 720px) {
    .iw-offer--course .iwc-offer__details ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.iw-offer .iwc-offer__details ol li {
    counter-increment: iwo;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border: 0;
    border-bottom: 1px solid var(--iwo-line);
    border-radius: 0;
    background: none;
    color: var(--iw-black);
    font-weight: 500;
    line-height: 1.4;
}
.iw-offer .iwc-offer__details ol li::before {
    content: counter(iwo, decimal-leading-zero);
    flex: none;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--iw-brand);
}

/* Preguntas frecuentes: separadas por líneas */
.iw-offer .iwc-offer__faq { max-width: 46rem; display: block; border: 0; border-top: 1px solid var(--iwo-line); border-radius: 0; background: none; }
.iw-offer .iwc-offer__faq details,
.iw-offer .iwc-offer__faq details + details {
    border: 0;
    border-bottom: 1px solid var(--iwo-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.iw-offer .iwc-offer__faq details[open] { border-color: var(--iwo-line); box-shadow: none; }
.iw-offer .iwc-offer__faq summary { padding: 0.95rem 0; font-size: 0.9375rem; font-weight: 700; color: var(--iw-black); cursor: pointer; }
.iw-offer .iwc-offer__faq details[open] summary { color: var(--iw-brand); }
.iw-offer .iwc-offer__faq p { margin: 0; padding: 0 0 1rem; font-size: 0.9375rem; line-height: 1.6; color: color-mix(in srgb, var(--iw-black) 70%, transparent); }

/* Niveles y add-ons de un sistema */
.iw-offer .iwc-offer__rows { border: 0; border-top: 1px solid var(--iwo-line); border-radius: 0; background: none; }
.iw-offer .iwc-offer__rows > li { padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--iwo-line); }
.iw-offer .iwc-offer__level { border: 0; border-top: 2px solid var(--iw-brand); border-radius: 0; background: none; padding: 1rem 0 0; }
.iw-offer .iwc-offer__link { color: var(--iw-brand); font-weight: 600; }

/* Cierre: una fila con línea arriba, sin banda */
.iw-offer .iwc-offer__closing {
    margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
    padding: 1.5rem 0 0;
    border: 0;
    border-top: 1px solid var(--iwo-line);
    border-radius: 0;
    background: none;
}
.iw-offer .iwc-offer__closing-title { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; color: var(--iw-black); }
.iw-offer .iwc-offer__closing .iwc-offer__actions { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .iw-offer .iwc-offer__option, .iw-offer .iw-brand-btn, .iw-offer .iwc-offer__btn { transition: none; }
    .iw-offer .iwc-offer__option:hover, .iw-offer .iw-brand-btn:hover, .iw-offer .iwc-offer__btn:hover { transform: none; }
}

/* Oferta simple (curso, servicio) en escritorio: dos columnas en toda la ficha. A la izquierda la imagen y, debajo,
   «qué incluye», el detalle y las preguntas; a la derecha la compra, que acompaña al bajar. Antes el contenido ocupaba
   solo la mitad izquierda y la derecha quedaba vacía. */
@media (min-width: 960px) {
    .iw-offer--simple {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
        column-gap: clamp(2rem, 3.5vw, 3.5rem);
        row-gap: 0; /* las secciones ya traen su margen; el hueco de filas del complemento sumaba espacio vacío al final */
        align-items: start;
    }
    .iw-offer--simple > .iwc-offer__hero { display: contents; }
    .iw-offer--simple > .iwc-offer__hero > .iw-offer__media-wrap,
    .iw-offer--simple > .iwc-offer__hero > .iwc-offer__media { grid-column: 1; grid-row: 1; }
    .iw-offer--simple > .iwc-offer__hero > .iwc-offer__buy {
        grid-column: 2;
        grid-row: 1 / span 12;
        position: sticky;
        top: 6.5rem;
        align-self: start;
    }
    .iw-offer--simple > .iwc-offer__section,
    .iw-offer--simple > .iwc-offer__block { grid-column: 1; }
    .iw-offer--simple .iwc-offer__details,
    .iw-offer--simple .iwc-offer__faq { max-width: none; }
    /* Con la compra siempre a la vista, el cierre que repite el botón sobra. */
    .iw-offer--simple > .iwc-offer__closing { display: none; }
    .iw-offer--simple > .iwc-offer__bar { grid-column: 1 / -1; }
    .iw-offer--simple > .iwc-offer__section:first-of-type { margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
}