/* Divitiae · tienda en línea — carrito, entrega, pago y seguimiento.
   Hereda los colores de Hada (--hik-*) y su modo claro/oscuro (data-color-mode). */

/* El botón «Comprar ahora» vive en la ficha de Hada, fuera de .dvt-wrap: también lleva los tokens. */
.dvt-wrap,
.dvt-comprar {
    --dvt-rojo: var(--hik-primary, #E31937);
    --dvt-rojo-hover: var(--hik-primary-light, #FF3D5A);
    --dvt-fondo: var(--hik-bg, #000);
    --dvt-card: var(--hik-bg-card, #111);
    --dvt-texto: var(--hik-text, #fff);
    --dvt-suave: var(--hik-text-muted, rgba(255, 255, 255, .6));
    --dvt-borde: var(--hik-border, rgba(255, 255, 255, .1));
    --dvt-ok: #1fae54;
    --dvt-espera: #f0a500;
    --dvt-radio-s: 8px;
    --dvt-radio-m: 14px;
    --dvt-rapido: 150ms;
    --dvt-ease: cubic-bezier(.16, 1, .3, 1);
    --dvt-texto-xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    --dvt-espacio: clamp(1rem, .6rem + 1.6vw, 2rem);
}

.dvt {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(96px + var(--dvt-espacio)) 16px 96px;
    color: var(--dvt-texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* [hidden] siempre gana: varias piezas tienen display: flex/grid propio. */
.dvt-wrap [hidden] { display: none !important; }
/* Al cambiar de paso el foco va al título (para lectores de pantalla) sin pintar un contorno. */
.dvt [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---------------------------------------------------------------- cabecera */
.dvt-head { margin-bottom: var(--dvt-espacio); }
.dvt-eyebrow {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dvt-rojo);
}
.dvt-title {
    margin: 0 0 1.25rem;
    font-size: var(--dvt-texto-xl);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-weight: 700;
}
.dvt-pasos {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.dvt-pasos li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem .4rem .45rem;
    border: 1px solid var(--dvt-borde);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--dvt-suave);
}
.dvt-pasos li span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--dvt-borde);
    font-weight: 700;
    font-size: .75rem;
}
.dvt-pasos li[aria-current="step"] { color: var(--dvt-texto); border-color: var(--dvt-rojo); }
.dvt-pasos li[aria-current="step"] span { background: var(--dvt-rojo); color: #fff; }
.dvt-pasos li.is-hecho span { background: var(--dvt-ok); color: #fff; }

/* ---------------------------------------------------------------- rejilla */
.dvt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dvt-espacio);
    align-items: start;
}
@media (min-width: 960px) {
    .dvt-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

.dvt-card {
    background: var(--dvt-card);
    border: 1px solid var(--dvt-borde);
    border-radius: var(--dvt-radio-m);
    padding: clamp(1.1rem, .8rem + 1vw, 1.75rem);
    margin-bottom: 1rem;
}
.dvt-h2 { margin: 0 0 1rem; font-size: 1.25rem; letter-spacing: -.01em; color: var(--dvt-texto); }
.dvt-h3 { margin: 0 0 .75rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dvt-suave); }
.dvt-nota { margin: -.5rem 0 1rem; color: var(--dvt-suave); font-size: .9rem; }
.dvt-aviso h2 { margin-top: 0; }

/* ---------------------------------------------------------------- líneas */
.dvt-lineas { display: grid; gap: .75rem; }
.dvt-linea {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "img info" "qty total";
    gap: .75rem 1rem;
    padding: .75rem;
    border: 1px solid var(--dvt-borde);
    border-radius: var(--dvt-radio-s);
    transition: border-color var(--dvt-rapido) ease;
}
@media (min-width: 640px) {
    .dvt-linea {
        grid-template-columns: 72px minmax(0, 1fr) auto auto;
        grid-template-areas: "img info qty total";
        align-items: center;
    }
}
.dvt-linea:hover { border-color: color-mix(in srgb, var(--dvt-texto) 25%, transparent); }
.dvt-linea.is-error { border-color: var(--dvt-rojo); }
.dvt-linea__img { grid-area: img; }
.dvt-linea__img img, .dvt-linea__sinimg {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}
.dvt-linea__info { grid-area: info; min-width: 0; }
.dvt-linea__titulo { color: var(--dvt-texto); text-decoration: none; font-weight: 600; line-height: 1.3; }
.dvt-linea__titulo:hover { text-decoration: underline; }
.dvt-linea__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 0; color: var(--dvt-suave); font-size: .85rem; }
/* 1.2.0 · bajo pedido: informativo (ámbar), no error */
.dvt-chip--pedido { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #92400e; }
.dvt-linea__pedido { margin: .35rem 0 0; color: #92400e; font-size: .85rem; }
.dvt-aviso-pedido { margin: .75rem 0 0; padding: .7rem .9rem; border-radius: 10px; background: color-mix(in srgb, #f59e0b 12%, transparent); color: #78350f; font-size: .9rem; line-height: 1.45; }
[data-color-mode="dark"] .dvt-chip--pedido, [data-color-mode="dark"] .dvt-linea__pedido { color: #fcd34d; }
[data-color-mode="dark"] .dvt-aviso-pedido { color: #fde68a; }
.dvt-comprar__plazo { margin: .4rem 0 0; font-size: .85rem; color: #92400e; }
[data-color-mode="dark"] .dvt-comprar__plazo { color: #fcd34d; }
.dvt-linea__error { margin: .35rem 0 0; color: var(--dvt-rojo-hover); font-size: .85rem; font-weight: 600; }
.dvt-linea__total { grid-area: total; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.dvt-linea__total strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dvt-linea__quitar {
    background: none;
    border: 0;
    padding: 0;
    color: var(--dvt-suave);
    font-size: .8rem;
    text-decoration: underline;
    cursor: pointer;
}
.dvt-linea__quitar:hover { color: var(--dvt-rojo-hover); }
.dvt-chip {
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--dvt-espera);
    color: var(--dvt-espera);
    font-size: .72rem;
    font-weight: 600;
}

.dvt-qty { grid-area: qty; display: inline-flex; align-items: center; border: 1px solid var(--dvt-borde); border-radius: var(--dvt-radio-s); width: max-content; }
.dvt-qty__btn {
    width: 2.25rem;
    height: 2.25rem;
    background: none;
    border: 0;
    color: var(--dvt-texto);
    font-size: 1.1rem;
    cursor: pointer;
}
.dvt-qty__btn:hover { background: var(--dvt-borde); }
.dvt-qty__num {
    width: 3rem;
    height: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--dvt-texto);
    text-align: center;
    font: inherit;
    -moz-appearance: textfield;
}
.dvt-qty__num::-webkit-inner-spin-button, .dvt-qty__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.dvt-skeleton {
    height: 96px;
    border-radius: var(--dvt-radio-s);
    background: linear-gradient(90deg, var(--dvt-borde) 0%, color-mix(in srgb, var(--dvt-texto) 6%, transparent) 50%, var(--dvt-borde) 100%);
    background-size: 200% 100%;
    animation: dvt-brillo 1.2s linear infinite;
}
@keyframes dvt-brillo { to { background-position: -200% 0; } }

.dvt-vacio { text-align: center; padding: 2rem 0 1rem; }
.dvt-vacio__t { font-size: 1.1rem; color: var(--dvt-suave); }

/* ---------------------------------------------------------------- botones */
.dvt-acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.dvt-btn, .dvt-comprar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 1.4rem;
    border-radius: var(--dvt-radio-s);
    border: 1px solid transparent;
    font: 600 1rem/1 'Inter', sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dvt-rapido) var(--dvt-ease), background-color var(--dvt-rapido) ease, border-color var(--dvt-rapido) ease;
}
.dvt-btn:active, .dvt-comprar:active { transform: scale(.98); }
.dvt-btn:focus-visible, .dvt-comprar:focus-visible, .dvt-qty__btn:focus-visible, .dvt-linea__quitar:focus-visible,
.dvt-opcion:focus-within, .dvt-campo input:focus-visible, .dvt-campo select:focus-visible {
    outline: 2px solid var(--dvt-rojo-hover);
    outline-offset: 2px;
}
.dvt-btn--primario, .dvt-comprar { background: var(--dvt-rojo); color: #fff; }
.dvt-btn--primario:hover, .dvt-comprar:hover { background: var(--dvt-rojo-hover); color: #fff; }
.dvt-btn--primario:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.dvt-btn--ghost { background: transparent; color: var(--dvt-texto); border-color: var(--dvt-borde); }
.dvt-btn--ghost:hover { border-color: var(--dvt-texto); }

/* Botón de la ficha (template-parts/ficha/compra.php de Hada). */
.dvt-comprar { width: 100%; margin-top: .75rem; }
.dvt-comprar__precio { font-variant-numeric: tabular-nums; opacity: .9; }

/* ---------------------------------------------------------------- formulario */
.dvt-fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.dvt-fieldset legend { font-weight: 700; margin-bottom: .75rem; font-size: .95rem; color: var(--dvt-texto); padding: 0; }
.dvt-campos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.dvt-campo { grid-column: span 6; display: flex; flex-direction: column; gap: .35rem; }
@media (min-width: 640px) {
    .dvt-campo { grid-column: span 3; }
    .dvt-campo--s { grid-column: span 2; }
    .dvt-campo--xs { grid-column: span 1; }
    .dvt-campo--full { grid-column: span 6; }
}
.dvt-campo label { font-size: .85rem; color: var(--dvt-suave); font-weight: 500; }
.dvt-opcional { font-weight: 400; }
.dvt-campo input, .dvt-campo select {
    min-height: 46px;
    padding: 0 .85rem;
    border: 1px solid var(--dvt-borde);
    border-radius: var(--dvt-radio-s);
    background: var(--dvt-fondo);
    color: var(--dvt-texto);
    font: inherit;
    font-size: 1rem;
}
.dvt-campo input[aria-invalid="true"], .dvt-campo select[aria-invalid="true"] { border-color: var(--dvt-rojo); }
.dvt-campo__error { margin: 0; color: var(--dvt-rojo-hover); font-size: .82rem; }
.dvt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dvt-opciones { display: grid; gap: .6rem; }
.dvt-opcion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1px solid var(--dvt-borde);
    border-radius: var(--dvt-radio-s);
    cursor: pointer;
    transition: border-color var(--dvt-rapido) ease, background-color var(--dvt-rapido) ease;
}
.dvt-opcion:hover { border-color: color-mix(in srgb, var(--dvt-texto) 35%, transparent); }
.dvt-opcion:has(input:checked) { border-color: var(--dvt-rojo); background: color-mix(in srgb, var(--dvt-rojo) 8%, transparent); }
.dvt-opcion input { accent-color: var(--dvt-rojo); width: 1.1rem; height: 1.1rem; }
.dvt-opcion__txt { display: flex; flex-direction: column; gap: .15rem; }
.dvt-opcion__txt small { color: var(--dvt-suave); }
.dvt-opcion__precio { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.dvt-acepto { display: flex; gap: .7rem; align-items: flex-start; margin: .5rem 0 0; font-size: .9rem; color: var(--dvt-suave); }
.dvt-acepto input { margin-top: .2rem; accent-color: var(--dvt-rojo); width: 1.1rem; height: 1.1rem; flex: none; }
.dvt-acepto a { color: var(--dvt-texto); }

.dvt-error {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border-left: 3px solid var(--dvt-rojo);
    background: color-mix(in srgb, var(--dvt-rojo) 10%, transparent);
    border-radius: 0 var(--dvt-radio-s) var(--dvt-radio-s) 0;
    font-weight: 600;
}

/* ---------------------------------------------------------------- pago */
.dvt-pedido { font-weight: 500; color: var(--dvt-suave); font-size: .9rem; margin-left: .5rem; }
.dvt-prueba { display: inline-block; padding: .3rem .7rem; border-radius: 999px; background: var(--dvt-espera); color: #000; font-size: .8rem; font-weight: 700; }
.dvt-brick { min-height: 320px; }
.dvt-cargando { color: var(--dvt-suave); }

/* ---------------------------------------------------------------- resultado */
.dvt-resultado { text-align: center; padding-block: 2.5rem; }
.dvt-resultado:focus { outline: none; }
.dvt-resultado__icono svg {
    width: 64px;
    height: 64px;
    padding: 14px;
    border-radius: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dvt-resultado--ok .dvt-resultado__icono { color: var(--dvt-ok); }
.dvt-resultado--ok .dvt-resultado__icono svg { background: color-mix(in srgb, var(--dvt-ok) 15%, transparent); }
.dvt-resultado--espera .dvt-resultado__icono { color: var(--dvt-espera); }
.dvt-resultado--espera .dvt-resultado__icono svg { background: color-mix(in srgb, var(--dvt-espera) 15%, transparent); }
.dvt-resultado--mal .dvt-resultado__icono { color: var(--dvt-rojo); }
.dvt-resultado--mal .dvt-resultado__icono svg { background: color-mix(in srgb, var(--dvt-rojo) 15%, transparent); }
.dvt-resultado .dvt-acciones { justify-content: center; }
.dvt-seg-linea { color: var(--dvt-suave); margin: .25rem 0; }

.dvt-linea-tiempo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin: 1.75rem 0 1rem;
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: .82rem;
    color: var(--dvt-suave);
}
.dvt-linea-tiempo li { position: relative; padding-top: 1.6rem; }
.dvt-linea-tiempo li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    border: 2px solid var(--dvt-borde);
    background: var(--dvt-card);
}
.dvt-linea-tiempo li.is-hecho { color: var(--dvt-texto); }
.dvt-linea-tiempo li.is-hecho::before { background: var(--dvt-ok); border-color: var(--dvt-ok); }
.dvt-linea-tiempo li[aria-current="step"] { font-weight: 700; }

/* ---------------------------------------------------------------- resumen */
.dvt-resumen__caja {
    position: sticky;
    top: 96px;
    background: var(--dvt-card);
    border: 1px solid var(--dvt-borde);
    border-radius: var(--dvt-radio-m);
    padding: 1.4rem;
    box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .6);
}
.dvt-totales { margin: 0; display: grid; gap: .6rem; }
.dvt-totales div { display: flex; justify-content: space-between; gap: 1rem; }
.dvt-totales dt { color: var(--dvt-suave); }
.dvt-totales dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.dvt-totales__sub { font-size: .82rem; }
.dvt-totales__total { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--dvt-borde); }
.dvt-totales__total dt { color: var(--dvt-texto); font-weight: 700; }
.dvt-totales__total dd { font-size: 1.5rem; letter-spacing: -.01em; }

.dvt-gratis { margin-top: 1.1rem; font-size: .88rem; }
.dvt-gratis p { margin: 0 0 .5rem; }
.dvt-gratis__barra { height: 6px; border-radius: 999px; background: var(--dvt-borde); overflow: hidden; }
.dvt-gratis__barra span {
    display: block;
    height: 100%;
    background: var(--dvt-ok);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 400ms var(--dvt-ease);
}
.dvt-garantias { margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--dvt-borde); list-style: none; display: grid; gap: .45rem; font-size: .82rem; color: var(--dvt-suave); }
.dvt-garantias li::before { content: '✓'; color: var(--dvt-ok); margin-right: .5rem; font-weight: 700; }

/* ---------------------------------------------------------------- términos de venta */
.dvt-legal { max-width: 900px; }
.dvt-legal__head { padding-bottom: 1.5rem; border-bottom: 2px solid var(--dvt-rojo); }
.dvt-legal__meta { margin: 0; color: var(--dvt-suave); font-size: .9rem; }
.dvt-legal__cuerpo { color: var(--dvt-texto); line-height: 1.7; font-size: 1rem; }
.dvt-legal__cuerpo h2 { margin: 2.25rem 0 .75rem; font-size: 1.3rem; letter-spacing: -.01em; color: var(--dvt-texto); }
.dvt-legal__cuerpo h2:first-child { margin-top: 0; }
.dvt-legal__cuerpo h3 { margin: 1.5rem 0 .5rem; font-size: 1.05rem; color: var(--dvt-texto); }
.dvt-legal__cuerpo p, .dvt-legal__cuerpo li { color: var(--dvt-texto); }
.dvt-legal__cuerpo p { margin: 0 0 1rem; }
.dvt-legal__cuerpo ul, .dvt-legal__cuerpo ol { padding-left: 1.25rem; margin: .5rem 0 1rem; }
.dvt-legal__cuerpo ul { list-style: disc; }
.dvt-legal__cuerpo ol { list-style: decimal; }
.dvt-legal__cuerpo li::marker { color: var(--dvt-rojo); }
.dvt-legal__cuerpo li { margin: .35rem 0; }
.dvt-legal__cuerpo a { color: var(--dvt-rojo-hover); text-underline-offset: 2px; }
.dvt-legal__cuerpo strong { color: var(--dvt-texto); }
.dvt-legal__cuerpo table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.dvt-legal__cuerpo .wp-block-table table, .dvt-legal__cuerpo .wp-block-table thead { border: 0; }
.dvt-legal__cuerpo th, .dvt-legal__cuerpo td { text-align: left; padding: .6rem .75rem; border: 0; border-bottom: 1px solid var(--dvt-borde); }
.dvt-legal__cuerpo thead th { border-bottom: 2px solid var(--dvt-borde); }
.dvt-legal__cuerpo th { color: var(--dvt-suave); font-weight: 600; }
.dvt-legal__cuerpo .wp-block-table { overflow-x: auto; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .dvt-skeleton { animation: none; }
    .dvt-btn, .dvt-comprar, .dvt-gratis__barra span, .dvt-linea, .dvt-opcion { transition: none; }
}