/* ══════════════════════════════════════════════════════════════
   ORDER MODAL — Formulario de pedido en modal
   Funciona con los cinco temas: sale de las vars, no de colores propios.
══════════════════════════════════════════════════════════════ */

/* Bloquea scroll del body cuando el modal está abierto */
body.modal-open { overflow: hidden; }

/* ── Overlay backdrop ──────────────────────────────────────── */
.order-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    padding: 0;
}
.order-modal-overlay[hidden] { display: none !important; }

/* ── Modal card ────────────────────────────────────────────── */
.order-modal-card {
    background: var(--bg-layer2);
    color: var(--cream);
    width: 100%;
    max-width: 520px;
    max-height: 92dvh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 20px 20px 0 0;
    position: relative;
    animation: orderModalIn 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim, rgba(255,255,255,0.1)) transparent;
}
.order-modal-card::-webkit-scrollbar { width: 4px; }
.order-modal-card::-webkit-scrollbar-thumb {
    background: var(--gold-dim, rgba(255,255,255,0.12));
    border-radius: 4px;
}

@media (min-width: 600px) {
    .order-modal-overlay {
        align-items: center;
        padding: 16px;
    }
    .order-modal-card {
        border-radius: 20px;
    }
}

@keyframes orderModalIn {
    from { transform: translateY(48px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ── Botón cerrar ──────────────────────────────────────────── */
.order-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: var(--bg-layer3);
    border: 1px solid var(--gold-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cream);
    transition: background 0.18s;
    flex-shrink: 0;
}
.order-modal-close:hover { background: var(--gold-dim); }

/* ── Barra de producto ─────────────────────────────────────── */
.order-modal-product-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 4px 16px;
}

.order-modal-product-bar__imgwrap {
    position: relative;
    flex-shrink: 0;
}

.order-modal-product-bar__img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--gold-border);
    display: block;
}

.order-modal-product-bar__badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--gold);
    color: var(--bg-base, #fff);
    font-size: 11px;
    font-weight: 800;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.order-modal-product-bar__info {
    flex: 1;
    min-width: 0;
}

.order-modal-product-bar__name {
    font-weight: 600;
    font-size: 15px;
    color: var(--cream);
    margin: 0 0 5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-modal-product-bar__price {
    font-weight: 700;
    font-size: 18px;
    color: var(--gold);
    margin: 0;
    letter-spacing: -0.3px;
}

/* ── Resumen de precios ────────────────────────────────────── */
.order-modal-pricing {
    background: var(--bg-layer1);
    padding: 12px 20px;
    border-bottom: 1px solid var(--gold-border);
}

.order-modal-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
    color: var(--cream-dim);
}

.order-modal-pricing__row--total {
    border-top: 1px solid var(--gold-border);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cream);
}

.order-modal-pricing__free {
    color: var(--positivo);
    font-weight: 700;
}

.order-modal-pricing__before {
    text-decoration: line-through;
    color: var(--cream-muted);
    font-size: 13px;
}

.order-modal-pricing__row--before {
    opacity: 0.7;
}

.order-modal-pricing__saving {
    color: var(--positivo);
    font-weight: 700;
}

/* ── Texto motivacional ────────────────────────────────────── */
.order-modal-form-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4vw, 1.3rem);
    font-weight: 700;
    color: var(--cream);
    padding: 16px 20px 0;
    margin: 0;
    line-height: 1.3;
}

.order-modal-intro-text {
    text-align: center;
    color: var(--positivo);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 20px 4px;
    margin: 0;
    line-height: 1.55;
}

/* ── Cuerpo del formulario ─────────────────────────────────── */
.order-modal-body {
    padding: 0 16px 28px;
}

/* Social proof dentro del modal */
.order-modal-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: var(--cream-dim);
    padding: 10px 0 0;
    margin-bottom: 2px;
}

/* Urgency strip dentro del modal — reducir margen */
.order-modal-urgency {
    margin: 6px 0 10px;
}

/* form-box sin bordes extras dentro del modal */
.order-modal-body .form-box {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ── Trust line compacta (reemplaza bloque de precios) ─────── */
/* ── GARANTÍAS DESTACADAS ──────────────────────────────────────
   Reemplazan la antigua trust-line de 12px en color apagado, que se
   perdía entre el resto. "Envío gratis" y "pagas al recibirlo" son las
   dos objeciones que frenan la compra contraentrega: tienen que verse.
   Los colores salen de las variables del tema para que funcionen en
   los 8 temas sin excepciones. */
/* SIN USAR desde que las tres pastillas salieron del formulario (decían lo
   mismo que las promesas de dos líneas más abajo). Se conservan por si se
   quieren recuperar: basta con volver a pintar el <div class="trust-badges">
   en la vista. Si no se recuperan, este bloque se puede borrar entero. */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 4px 0 18px;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    background: var(--bg-layer2);
    border: 1px solid var(--gold-border);
    color: var(--cream);
}

.trust-badge strong {
    font-weight: 800;
}

.trust-badge__ico {
    display: inline-flex;
    flex-shrink: 0;
}

.trust-badge__ico svg {
    width: 16px;
    height: 16px;
}

/* Envío gratis: el verde de éxito, que es el que ya usa el resumen */
.trust-badge--envio {
    color: var(--positivo);
    border-color: color-mix(in srgb, var(--positivo) 45%, transparent);
    background: color-mix(in srgb, var(--positivo) 12%, var(--bg-layer2));
}

/* Pago contraentrega: el acento del tema */
.trust-badge--cod {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    background: color-mix(in srgb, var(--gold) 12%, var(--bg-layer2));
}

.trust-badge--ahorro {
    color: var(--positivo);
    border-style: dashed;
}

/* Navegadores sin color-mix (WebViews viejos): el borde y el color de
   texto ya bastan para que se lea, el fondo simplemente queda plano. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
    .trust-badge--envio,
    .trust-badge--cod { background: var(--bg-layer2); }
}

@media (max-width: 360px) {
    .trust-badge { font-size: 12.5px; padding: 8px 11px; }
}
.order-modal-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.order-modal-card__scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-dim, rgba(255,255,255,0.1)) transparent;
}
.order-modal-card__scroll::-webkit-scrollbar { width: 4px; }
.order-modal-card__scroll::-webkit-scrollbar-thumb {
    background: var(--gold-dim, rgba(255,255,255,0.12));
    border-radius: 4px;
}

/* ── Barra de progreso ─────────────────────────────────────── */
.modal-progress-bar {
    height: 3px;
    background: var(--bg-layer3, rgba(255,255,255,0.08));
    overflow: hidden;
}
.modal-progress-bar__fill {
    height: 100%;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    width: 10%;
}

/* ── Chip flotante de total ────────────────────────────────── */
.modal-floating-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 12px;
    background: var(--bg-layer2);
    border-top: 1px solid var(--gold-border);
    flex-shrink: 0;
    transition: opacity 0.22s, transform 0.22s;
}
.modal-floating-total.is-hidden {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}
.modal-floating-total__label {
    font-size: 12px;
    color: var(--cream-dim);
    margin-bottom: 1px;
}
.modal-floating-total__shipping {
    font-size: 11px;
    color: var(--positivo);
    font-weight: 600;
}
.modal-floating-total__amount {
    font-size: 22px;
    font-weight: 800;
    color: var(--gold);
    letter-spacing: -0.5px;
}

/* ── Validación teléfono en tiempo real ────────────────────── */
.input-lg.tel-valid {
    border-color: var(--positivo) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}
.input-lg.tel-invalid {
    border-color: var(--error) !important;
}
.tel-hint {
    font-size: 12px;
    margin-top: 5px;
    transition: color 0.2s;
    color: var(--text-muted);
}
.tel-hint.ok  { color: var(--positivo); font-weight: 600; }
.tel-hint.err { color: var(--error); font-weight: 600; }

/* ── Icono de éxito animado ────────────────────────────────── */
.order-success__icon-wrap {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--positivo) 12%, transparent);
    border: 2px solid var(--positivo);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    animation: successPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes successPop {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
.success-check-path {
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    animation: drawCheck 0.35s 0.38s ease forwards;
}
@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}

/* Confetti CSS */
.success-confetti {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 0;
    overflow: visible;
    pointer-events: none;
}
.confetti-p {
    position: absolute;
    top: -10px;
    width: 7px; height: 7px;
    border-radius: 2px;
    opacity: 0;
    animation: confettiFall 1.1s ease-out both;
}
@keyframes confettiFall {
    0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(140px) rotate(600deg); }
}
/* Variantes de posición, color y retardo.
   El confeti traía azul, rosa, morado y naranja escritos a mano: seis
   colores que no aparecen en ninguna otra parte de la landing, y que en
   un tema borgoña o verde salvia caen como una fiesta ajena. Se queda
   dentro de la paleta — acento, confirmación y blanco — que sigue
   leyéndose como celebración pero es la misma marca. */
.confetti-p:nth-child(1)  { left: 10%; background: var(--gold);       animation-delay: 0.05s; }
.confetti-p:nth-child(2)  { left: 20%; background: var(--gold-light); animation-delay: 0.10s; width:5px; height:10px; }
.confetti-p:nth-child(3)  { left: 30%; background: var(--positivo);    animation-delay: 0.02s; }
.confetti-p:nth-child(4)  { left: 42%; background: var(--white);      animation-delay: 0.15s; width:9px; }
.confetti-p:nth-child(5)  { left: 52%; background: var(--gold);       animation-delay: 0.08s; height:9px; }
.confetti-p:nth-child(6)  { left: 62%; background: var(--gold-light); animation-delay: 0.12s; width:5px; height:10px; }
.confetti-p:nth-child(7)  { left: 72%; background: var(--positivo);    animation-delay: 0.04s; }
.confetti-p:nth-child(8)  { left: 82%; background: var(--gold);       animation-delay: 0.18s; }
.confetti-p:nth-child(9)  { left: 90%; background: var(--white);      animation-delay: 0.07s; width:9px; }
.confetti-p:nth-child(10) { left: 5%;  background: var(--gold-light); animation-delay: 0.13s; height:5px; }
/* ══════════════════════════════════════════════════════════════
   FORMULARIO DE PEDIDO EN PÁGINA
   Vive al final de la landing, en <section id="form-pedido">, y todos
   los CTAs son anclas nativas que apuntan ahí. Ya no hay modal: el
   overlay obligaba a bloquear el scroll del body, atrapar el foco y
   pelear con el teclado, que es lo más frágil dentro del WebView de
   Facebook, de donde viene el 87% del tráfico. Como ancla nativa el
   botón funciona aunque todo el JavaScript esté muerto.
   ══════════════════════════════════════════════════════════════ */
.pedido-section {
    max-width: 640px;
    margin: 0 auto;
    padding: 8px 16px 28px;
    scroll-margin-top: 73px; /* alto de .announcement-bar; el JS lo afina en vivo */
}

/* Los 3 bloques de corrido, en un solo scroll, sin navegación por pasos.
   Volver a poner .js-pasos en .order-modal-body restaura el paso a paso. */
.order-modal-body:not(.js-pasos) .form-step { display: block; }
.order-modal-body:not(.js-pasos) .btn-step-next,
.order-modal-body:not(.js-pasos) .btn-step-prev,
.order-modal-body:not(.js-pasos) .form-stepper-indicator,
.order-modal-body:not(.js-pasos) .modal-progress-bar { display: none; }

/* Separación entre bloques ahora que se ven los tres seguidos */
.order-modal-body:not(.js-pasos) .form-step + .form-step {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(128, 128, 128, 0.18);
}

/* La "promesa de cero riesgo" (tres frases fijas antes del primer campo)
   se retiró: repetía el subtítulo del formulario y la fila de confianza
   del pie. Los estilos .promesa-riesgo* vivían aquí. */

/* ── Menos preámbulo antes del primer campo ────────────────────
   El comprador que llega aquí ya decidió: cada línea de texto entre el
   botón y el primer input es un freno. Se comprimen los encabezados de
   cada bloque sin quitar su contenido. */
.pedido-section .order-modal-form-title {
    margin-bottom: 4px;
}

.pedido-section .order-modal-intro-text {
    margin-bottom: 6px;
}

.pedido-section .form-step__head {
    margin-bottom: 14px;
}

.pedido-section .form-step__head .step-emoji {
    transform: scale(0.72);
    margin-bottom: -6px;
    opacity: 0.75;
}

/* Estas dos reglas escondían el encabezado del primer bloque, y tenían
   sentido cuando el primer bloque era "¿A nombre de quién va el pedido?":
   ese título repetía lo que ya decían las etiquetas "Tu nombre" y "Tu
   apellido" justo debajo.
   Con el formulario reordenado el primer bloque es la elección de color, y
   ahí el encabezado es imprescindible: sin él aparecen cuatro pastillas
   sueltas — Negro, Camel, Vino tinto, Verde oliva — sin nada que diga qué
   son ni qué hay que hacer con ellas. Los encabezados se quedan. */

/* Un latido lento en la pastilla de envío gratis: es el argumento que
   más pesa y merece que el ojo lo encuentre. Nada de movimiento para
   quien pidió reducirlo en su sistema. */
@media (prefers-reduced-motion: no-preference) {
    .trust-badge--envio {
        animation: latido-envio 3.2s ease-in-out infinite;
    }
    @keyframes latido-envio {
        0%, 88%, 100% { transform: scale(1); }
        92%           { transform: scale(1.045); }
        96%           { transform: scale(0.995); }
    }
}

/* ══════════════════════════════════════════════════════════════
   PANEL DEL FORMULARIO
   Hasta ahora el formulario se leía como una sección más de texto,
   con el mismo fondo que el resto de la landing. Aquí es donde se
   compra: tiene que verse como una pieza aparte, con su propio marco
   y un acento arriba que diga "esto es lo importante".
   ══════════════════════════════════════════════════════════════ */
.pedido-panel {
    position: relative;
    background: var(--bg-layer2);
    border: 1px solid var(--gold-border);
    border-radius: 22px;
    padding: 22px 14px 24px;
    overflow: hidden;
    box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.55);
}

/* Filo de acento en el borde superior */
.pedido-panel::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent,
        var(--gold) 22%,
        var(--gold) 78%,
        transparent);
    opacity: 0.9;
}

/* ── Kicker: en qué punto está y cuánto falta ─────────────────── */
.pedido-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    margin: 0 0 16px;
    /* Mismo tamano y tipografia que los .section-title del resto de la
       landing (style.css): la cabecera del formulario es un titulo de
       seccion mas, no un eyebrow. */
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.15;
    text-transform: none;
    text-wrap: balance;
    color: var(--gold);
}

.pedido-kicker__punto {
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: var(--positivo);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .pedido-kicker__punto {
        animation: pedido-latido 1.9s ease-in-out infinite;
    }
    @keyframes pedido-latido {
        0%, 100% { opacity: 1;   transform: scale(1); }
        50%      { opacity: 0.4; transform: scale(0.8); }
    }
}

@media (min-width: 640px) {
    .pedido-panel { padding: 26px 26px 30px; }
}