/* ==================================================
   CREA TU FIESTA · IMPRIMI2

   Usa los tokens de style.css (--negro, --blanco,
   --rosa, --amarillo, --cyan, --gris, Arial) y copia
   los componentes que ya existen en la web en vez de
   inventar otros:

     · kicker rosa en mayúsculas ......... .tienda-etiqueta
     · titulares grandes y apretados ..... .empresas-hero h1
     · botón píldora rosa, texto negro ... .boton-bloque.boton-rosa (style.css, se usa tal cual)
     · chips redondeados, activo en negro  .tienda-filtros button
     · selector de cantidad ............... .item-cantidad (carrito.css, se usa tal cual)
     · botón negro de ancho completo ..... .boton-finalizar (carrito.css, se usa tal cual)
     · zona de subida y ficha de archivo . .zona-soltar / .archivo-ficha (personaliza.css)
     · formulario ......................... #form-empresas
     · bloque negro con kicker amarillo .. .empresas-contacto-bloque
     · confirmación ....................... .empresas-confirmacion
     · botón de WhatsApp ................. .empresas-boton-whatsapp

   Móvil primero: los estilos base son para pantallas
   pequeñas y se amplían con min-width.
================================================== */

.pagina-fiesta {

    /*
    El rosa de marca (#ff006e) da 3.8:1 sobre el fondo:
    vale para titulares y rellenos, no para texto
    pequeño. Para eso usamos esta variante más oscura
    (5.8:1).
    */
    --fiesta-rosa-texto: #c8005a;

    --fiesta-borde: #cccccc;

    --fiesta-gris-texto: #666666;

    --fiesta-fondo-suave: #f4f3f1;

    min-height: 70vh;

    background: var(--blanco);

    color: var(--texto);

}


/*
Varios bloques llevan display:flex/grid; sin esto el
atributo hidden no los ocultaría.
*/
.pagina-fiesta [hidden] {

    display: none !important;

}


/*
Oculto a la vista pero accesible por teclado y lector
de pantalla. Lo usan los radios, checkboxes y el input
de archivo, que se dibujan con su <label>.
*/
.fiesta-oculto {

    position: absolute;

    width: 1px;

    height: 1px;

    margin: -1px;

    padding: 0;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

    border: 0;

}


.fiesta-contenedor {

    max-width: 1250px;

    margin: 0 auto;

    padding-left: 5%;

    padding-right: 5%;

}


.fiesta-grupo-campos {

    min-width: 0;

    margin: 0;

    padding: 0;

    border: 0;

}


.fiesta-leyenda {

    width: 100%;

    padding: 0;

}


/* Foco visible y coherente en toda la sección */

.pagina-fiesta a:focus-visible,
.pagina-fiesta button:focus-visible,
.pagina-fiesta select:focus-visible,
.fiesta-oculto:focus-visible + .fiesta-opcion-caja,
.fiesta-oculto:focus-visible + .fiesta-chip-caja,
.fiesta-oculto:focus-visible + .fiesta-color-caja .fiesta-color-muestra,
.fiesta-oculto:focus-visible + .fiesta-subida-zona,
.fiesta-producto-check:focus-visible {

    outline: 3px solid var(--rosa);

    outline-offset: 3px;

}



/* ==================================================
   1. PORTADA
================================================== */

.fiesta-portada {

    display: grid;

    gap: 44px;

    padding-top: 52px;

    padding-bottom: 60px;

}


.fiesta-kicker {

    margin-bottom: 14px;

    color: var(--fiesta-rosa-texto);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.fiesta-portada h1 {

    font-size:
        clamp(
            46px,
            7vw,
            92px
        );

    line-height: 0.88;

    font-weight: 950;

    letter-spacing: -0.045em;

}


.fiesta-portada h1 span {

    color: var(--rosa);

}


.fiesta-intro {

    max-width: 560px;

    margin-top: 24px;

    color: var(--fiesta-gris-texto);

    font-size:
        clamp(
            16px,
            2vw,
            19px
        );

    line-height: 1.5;

}


.fiesta-empezar {

    font-weight: 700;

    transition:
        filter 0.2s ease;

}


.fiesta-empezar:hover {

    filter: brightness(1.07);

}


.fiesta-portada-alternativa {

    margin-top: 18px;

    color: var(--fiesta-gris-texto);

    font-size: 14px;

    line-height: 1.5;

}


.fiesta-portada-alternativa a {

    color: var(--texto);

    font-weight: 700;

}


.fiesta-ventajas {

    display: grid;

    gap: 20px;

    margin-top: 44px;

    padding: 26px 0 0;

    border-top: 1px solid #dddddd;

    list-style: none;

}


.fiesta-ventajas li::before {

    content: "";

    display: block;

    width: 28px;

    height: 4px;

    margin-bottom: 12px;

    background: var(--rosa);

}


.fiesta-ventajas strong {

    display: block;

    margin-bottom: 4px;

    font-size: 14px;

}


.fiesta-ventajas span {

    color: var(--fiesta-gris-texto);

    font-size: 13px;

    line-height: 1.45;

}


/* Panel rosa: mismo lenguaje que .bloque-marca */

.fiesta-portada-panel {

    min-height: 380px;

    position: relative;

    overflow: hidden;

    padding: 64px 28px 70px;

    border-radius: 12px;

    background: var(--rosa);

    color: var(--negro);

}


.fiesta-portada-panel::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 45%;

    height: 40%;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(0, 0, 0, 0.24) 1px,
            transparent 1px
        );

    background-size: 8px 8px;

    opacity: 0.45;

}


.fiesta-panel-decoracion {

    position: absolute;

    top: 17px;

    left: 22px;

    right: 22px;

    display: flex;

    justify-content: space-between;

    font-size: 10px;

}


.fiesta-panel-titulo {

    margin-bottom: 24px;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height: 0.86;

    font-weight: 900;

}


.fiesta-panel-pasos {

    position: relative;

    z-index: 1;

    counter-reset: paso;

    list-style: none;

}


.fiesta-panel-pasos li {

    counter-increment: paso;

    display: flex;

    align-items: baseline;

    gap: 14px;

    padding: 12px 0;

    border-top: 1px solid rgba(0, 0, 0, 0.25);

    font-size: 17px;

    font-weight: 700;

}


.fiesta-panel-pasos li::before {

    content: counter(paso, decimal-leading-zero);

    font-size: 11px;

    font-weight: 900;

}


/* Mismo aspecto que .tienda-producto-etiqueta */

.fiesta-panel-sello {

    position: absolute;

    left: 28px;

    bottom: 24px;

    z-index: 2;

    padding: 7px 10px;

    background: var(--amarillo);

    color: var(--negro);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.7px;

}



/* ==================================================
   ASISTENTE: MARCO Y PROGRESO
================================================== */

.fiesta-asistente {

    padding-top: 12px;

    padding-bottom: 80px;

    scroll-margin-top: 12px;

}


.fiesta-asistente-marco {

    padding: 24px 18px 30px;

    border: 1px solid #e2e2e2;

    background: #ffffff;

}


.fiesta-progreso {

    margin-bottom: 32px;

}


.fiesta-progreso-cabecera {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap: 6px 16px;

    margin-bottom: 12px;

}


.fiesta-progreso-paso {

    margin-right: 10px;

    color: var(--fiesta-rosa-texto);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.fiesta-progreso-nombre {

    font-size: 13px;

    font-weight: 700;

}


.fiesta-progreso-barra {

    height: 6px;

    overflow: hidden;

    background: var(--gris);

}


.fiesta-progreso-barra span {

    display: block;

    width: 20%;

    height: 100%;

    background: var(--rosa);

    transition:
        width 0.3s ease;

}


.fiesta-progreso-etapas {

    display: none;

}


.fiesta-enlace {

    padding: 4px 0;

    border: none;

    background: none;

    color: var(--fiesta-gris-texto);

    cursor: pointer;

    font-family: inherit;

    font-size: 12px;

    text-decoration: underline;

}


.fiesta-enlace:hover {

    color: var(--texto);

}



/* ==================================================
   ASISTENTE: TEXTOS COMUNES
================================================== */

.fiesta-paso-titulo {

    outline: none;

    font-size:
        clamp(
            34px,
            5vw,
            58px
        );

    line-height: 0.92;

    font-weight: 900;

    letter-spacing: -0.035em;

}


.fiesta-paso-titulo span {

    color: var(--rosa);

}


.fiesta-paso-intro {

    max-width: 620px;

    margin-top: 12px;

    color: var(--fiesta-gris-texto);

    font-size: 15px;

    line-height: 1.5;

}


.fiesta-subtitulo {

    display: block;

    margin: 32px 0 14px;

    padding: 0;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


.fiesta-opcional {

    color: var(--fiesta-gris-texto);

    font-weight: 400;

    text-transform: none;

    letter-spacing: 0;

}


.fiesta-ayuda {

    margin-top: 6px;

    color: var(--fiesta-gris-texto);

    font-size: 12px;

    line-height: 1.5;

}


.fiesta-ayuda-arriba {

    margin: -6px 0 14px;

}


.fiesta-ayuda a {

    color: var(--texto);

}


.fiesta-error,
.fiesta-campo-error {

    color: var(--fiesta-rosa-texto);

    font-size: 13px;

    line-height: 1.5;

}


.fiesta-error:not(:empty) {

    margin-top: 18px;

    font-weight: 700;

}


.fiesta-campo-error:not(:empty) {

    margin-top: 6px;

}


.fiesta-letra-pequena {

    margin-top: 10px;

    color: var(--fiesta-gris-texto);

    font-size: 12px;

    line-height: 1.5;

}


.fiesta-cargando {

    padding: 30px 0;

    color: #777777;

    font-size: 13px;

}



/* ==================================================
   BOTONES DEL ASISTENTE
================================================== */

.fiesta-navegacion {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-top: 36px;

}


.fiesta-siguiente {

    margin-left: auto;

}


.fiesta-boton {

    min-height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 0 24px;

    border: 1px solid #111111;

    border-radius: 0;

    cursor: pointer;

    text-decoration: none;

    font-family: inherit;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.08em;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;

}


.fiesta-boton-principal {

    background: #111111;

    color: #ffffff;

}


.fiesta-boton-principal:hover {

    border-color: var(--rosa);

    background: var(--rosa);

    color: #111111;

}


.fiesta-boton-secundario {

    background: transparent;

    color: #111111;

}


.fiesta-boton-secundario:hover {

    background: #111111;

    color: #ffffff;

}


.fiesta-boton:disabled {

    cursor: wait;

    opacity: 0.45;

}



/* ==================================================
   PASO 1 · TARJETAS DE CELEBRACIÓN
================================================== */

.fiesta-celebraciones {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 10px;

    margin-top: 28px;

}


.fiesta-opcion {

    position: relative;

    display: block;

    cursor: pointer;

}


.fiesta-opcion-caja {

    min-height: 124px;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 18px 10px;

    border: 1px solid var(--fiesta-borde);

    background: #ffffff;

    text-align: center;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.2;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;

}


.fiesta-opcion-caja svg {

    width: 40px;

    height: 40px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.fiesta-opcion:hover .fiesta-opcion-caja {

    border-color: #111111;

}


.fiesta-oculto:checked + .fiesta-opcion-caja {

    border-color: #111111;

    background: #111111;

    color: #ffffff;

}


.fiesta-oculto:checked + .fiesta-opcion-caja svg {

    stroke: var(--rosa);

}



/* ==================================================
   CHIPS (invitados y temáticas)
   Mismo aspecto que .tienda-filtros button
================================================== */

.fiesta-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.fiesta-paso-intro + .fiesta-chips {

    margin-top: 26px;

}


.fiesta-chip {

    position: relative;

    display: inline-block;

    cursor: pointer;

}


.fiesta-chip-caja {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 19px;

    border: 1px solid var(--fiesta-borde);

    border-radius: 100px;

    background: transparent;

    color: #111111;

    font-size: 12px;

    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;

}


.fiesta-chips-grandes .fiesta-chip-caja {

    min-width: 76px;

    min-height: 60px;

    font-size: 22px;

    font-weight: 900;

}


.fiesta-chip:hover .fiesta-chip-caja {

    border-color: #111111;

}


.fiesta-oculto:checked + .fiesta-chip-caja {

    border-color: #111111;

    background: #111111;

    color: #ffffff;

}



/* ==================================================
   CAMPOS DE TEXTO
   Mismo lenguaje que #form-empresas. 16px en los
   inputs para que iOS no haga zoom al enfocarlos.
================================================== */

.fiesta-campo {

    margin-top: 22px;

}


.fiesta-campo label {

    display: block;

    margin-bottom: 8px;

    font-size: 12px;

    font-weight: 700;

}


.fiesta-campo input,
.fiesta-campo select,
.fiesta-campo textarea {

    width: 100%;

    min-height: 50px;

    padding: 12px 14px;

    border: 1px solid #999999;

    border-radius: 0;

    background: #ffffff;

    color: #111111;

    outline: none;

    font-family: inherit;

    font-size: 16px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;

}


.fiesta-campo textarea {

    resize: vertical;

    line-height: 1.5;

}


.fiesta-campo input:focus,
.fiesta-campo select:focus,
.fiesta-campo textarea:focus {

    border-color: #111111;

    box-shadow:
        0 0 0 3px
        rgba(255, 0, 110, 0.28);

}


.fiesta-campo [aria-invalid="true"] {

    border-color: var(--fiesta-rosa-texto);

}


.fiesta-invitados-otro {

    max-width: 320px;

}


.fiesta-contador {

    display: block;

    margin-top: 6px;

    color: #767676;

    font-size: 11px;

    text-align: right;

}



/* ==================================================
   PASO 2 · RECOMENDACIÓN
================================================== */

.fiesta-recomendacion {

    margin-top: 32px;

    padding: 20px;

    background: var(--fiesta-fondo-suave);

}


.fiesta-recomendacion .fiesta-subtitulo {

    margin-top: 0;

}


.fiesta-recomendacion-vacia {

    color: var(--fiesta-gris-texto);

    font-size: 14px;

    line-height: 1.5;

}


.fiesta-recomendacion-lista {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(130px, 1fr)
        );

    gap: 10px;

    list-style: none;

}


.fiesta-recomendacion-lista li {

    display: grid;

    align-content: start;

    gap: 6px;

    padding: 10px;

    background: #ffffff;

}


.fiesta-recomendacion-lista .fiesta-miniatura {

    width: 100%;

    height: auto;

    aspect-ratio: 4 / 5;

    margin-bottom: 4px;

}


.fiesta-recomendacion-lista strong {

    font-size: 14px;

    line-height: 1.2;

}


.fiesta-recomendacion-motivo,
.fiesta-recomendacion-reparto {

    color: var(--fiesta-gris-texto);

    font-size: 12px;

    line-height: 1.35;

}


.fiesta-recomendacion-reparto {

    font-size: 11px;

}


.fiesta-recomendacion-aviso {

    color: var(--fiesta-rosa-texto);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.35;

}


.fiesta-recomendacion-pie {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 6px 16px;

    margin-top: 16px;

    color: var(--fiesta-gris-texto);

    font-size: 13px;

    line-height: 1.5;

}


.fiesta-recomendacion-pie strong {

    color: var(--texto);

}


/*
Miniatura de producto. Si la imagen no carga, fiesta.js
la oculta y queda la inicial del producto detrás.
*/
.fiesta-miniatura {

    width: 56px;

    height: 70px;

    flex: none;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;

    background: #eeeeee;

    color: #999999;

    font-size: 18px;

    font-weight: 900;

}


.fiesta-miniatura::before {

    content: attr(data-inicial);

}


.fiesta-miniatura img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* ==================================================
   PASO 3 · ESTILO
================================================== */

.fiesta-estilo {

    display: grid;

    gap: 8px 48px;

}


.fiesta-colores {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(66px, 1fr)
        );

    gap: 14px 6px;

}


.fiesta-color {

    position: relative;

    display: block;

    cursor: pointer;

}


.fiesta-color-caja {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding-top: 4px;

    font-size: 11px;

    text-align: center;

}


.fiesta-color-muestra {

    width: 40px;

    height: 40px;

    position: relative;

    border: 1px solid rgba(0, 0, 0, 0.2);

    border-radius: 50%;

    transition:
        box-shadow 0.15s ease;

}


.fiesta-color:hover .fiesta-color-muestra {

    box-shadow:
        0 0 0 3px var(--blanco),
        0 0 0 4px #999999;

}


.fiesta-oculto:checked + .fiesta-color-caja {

    font-weight: 700;

}


.fiesta-oculto:checked + .fiesta-color-caja .fiesta-color-muestra {

    box-shadow:
        0 0 0 3px var(--blanco),
        0 0 0 5px #111111;

}


/*
Marca de seleccionado en una esquina: se lee igual
sobre un color claro que sobre uno oscuro.
*/
.fiesta-oculto:checked + .fiesta-color-caja .fiesta-color-muestra::after {

    content: "✓";

    position: absolute;

    top: -7px;

    right: -7px;

    width: 19px;

    height: 19px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #111111;

    color: #ffffff;

    font-size: 11px;

    font-weight: 900;

}



/* ==================================================
   SUBIDA DE IMAGEN
   Mismo aspecto que .zona-soltar / .boton-subir /
   .archivo-ficha de personaliza.css
================================================== */

.fiesta-subida-zona {

    display: block;

    padding: 26px 18px;

    border: 1px dashed #999999;

    background: #ffffff;

    cursor: pointer;

    text-align: center;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;

}


.fiesta-subida-zona:hover,
.fiesta-subida-zona.arrastrando {

    border-color: #111111;

    background: var(--fiesta-fondo-suave);

}


.fiesta-subida-icono {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    margin: 0 auto 12px;

    border: 1px solid #111111;

    font-size: 16px;

}


.fiesta-subida-zona strong {

    display: block;

    margin-bottom: 7px;

    font-size: 13px;

}


.fiesta-subida-zona em {

    display: block;

    color: var(--fiesta-gris-texto);

    font-size: 12px;

    font-style: normal;

    line-height: 1.6;

}


.fiesta-subida-boton {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    margin-top: 14px;

    padding: 0 18px;

    background: #111111;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.1em;

    transition:
        background 0.15s ease;

}


.fiesta-subida-zona:hover .fiesta-subida-boton {

    background: var(--rosa);

    color: #111111;

}


.fiesta-archivo-ficha {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    border: 1px solid #111111;

    background: #ffffff;

}


.fiesta-archivo-ficha img {

    width: 56px;

    height: 56px;

    flex: none;

    object-fit: cover;

    background: var(--fiesta-fondo-suave);

}


.fiesta-archivo-nombre {

    min-width: 0;

    flex: 1;

    font-size: 13px;

    line-height: 1.4;

    overflow-wrap: anywhere;

}


.fiesta-archivo-quitar {

    min-height: 38px;

    flex: none;

    padding: 0 12px;

    border: 1px solid #111111;

    background: transparent;

    color: #111111;

    cursor: pointer;

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

}


.fiesta-archivo-quitar:hover {

    background: #111111;

    color: #ffffff;

}



/* ==================================================
   PASO 4 · CATÁLOGO
================================================== */

.fiesta-catalogo-acciones {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    gap: 4px 14px;

    margin-top: 12px;

}


.fiesta-catalogo-acciones .fiesta-ayuda {

    margin: 0;

}


.fiesta-catalogo-error {

    margin-top: 24px;

    padding: 20px;

    border-left: 4px solid var(--rosa);

    background: var(--fiesta-fondo-suave);

    font-size: 14px;

    line-height: 1.5;

}


.fiesta-catalogo-error .fiesta-boton {

    margin-top: 14px;

}


.fiesta-catalogo {

    display: grid;

    gap: 30px;

    margin-top: 20px;

}


.fiesta-grupo .fiesta-subtitulo {

    margin: 0 0 4px;

}


.fiesta-grupo-descripcion {

    margin-bottom: 12px;

    color: var(--fiesta-gris-texto);

    font-size: 13px;

    line-height: 1.5;

}


.fiesta-grupo-lista {

    border-top: 1px solid #dddddd;

}


.fiesta-producto {

    padding: 14px 0;

    border-bottom: 1px solid #dddddd;

}


.fiesta-producto-principal {

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

}


.fiesta-producto-check {

    width: 22px;

    height: 22px;

    margin: 0;

    accent-color: #111111;

    cursor: pointer;

}


.fiesta-producto-etiqueta {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

}


.fiesta-producto-texto {

    min-width: 0;

}


.fiesta-producto-texto strong {

    display: block;

    margin-bottom: 3px;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.15;

}


.fiesta-producto-texto span {

    color: var(--fiesta-rosa-texto);

    font-size: 13px;

}


.fiesta-producto.incluido .fiesta-producto-texto strong {

    font-weight: 700;

}


.fiesta-producto-subtotal {

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

}


.fiesta-producto.agotado {

    opacity: 0.55;

}


.fiesta-producto.agotado .fiesta-producto-etiqueta {

    cursor: not-allowed;

}


.fiesta-producto-opciones {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 14px 18px;

    margin-top: 14px;

    padding-left: 34px;

}


.fiesta-opcion-titulo {

    display: block;

    margin-bottom: 6px;

    padding: 0;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


.fiesta-producto select {

    min-width: 130px;

    min-height: 42px;

    padding: 0 12px;

    border: 1px solid #aaaaaa;

    border-radius: 0;

    background: #ffffff;

    color: #111111;

    font-family: inherit;

    font-size: 16px;

}


/* .item-cantidad viene de carrito.css; aquí solo el input central */

.fiesta-producto .item-cantidad input {

    width: 100%;

    min-width: 0;

    padding: 0;

    border: none;

    background: transparent;

    color: #111111;

    text-align: center;

    font-family: inherit;

    font-size: 16px;

    -moz-appearance: textfield;

    appearance: textfield;

}


.fiesta-producto input[type="number"]::-webkit-inner-spin-button,
.fiesta-producto input[type="number"]::-webkit-outer-spin-button {

    margin: 0;

    -webkit-appearance: none;

}


.fiesta-producto .item-cantidad button:hover {

    background: var(--fiesta-fondo-suave);

}


.fiesta-tallas,
.fiesta-variantes {

    min-width: 0;

    flex-basis: 100%;

    margin: 0;

    padding: 0;

    border: 0;

}


/* Una fila por color: nombre (y lo que queda) + selector − / + */

.fiesta-variantes-lista {

    display: grid;

    gap: 8px;

}


.fiesta-variante {

    max-width: 340px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.fiesta-variante-nombre {

    font-size: 14px;

    line-height: 1.25;

}


.fiesta-variante-nombre small {

    display: block;

    color: var(--fiesta-gris-texto);

    font-size: 11px;

}


.fiesta-bloque-color + .fiesta-bloque-color {

    padding-top: 14px;

    border-top: 1px dashed #dddddd;

}


.fiesta-bloque-color .fiesta-enlace {

    margin-top: 6px;

}


.fiesta-anadir-color {

    flex-basis: 100%;

}


.fiesta-producto .item-cantidad button:disabled {

    cursor: not-allowed;

    opacity: 0.35;

}


.fiesta-tallas-lista {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}


.fiesta-talla {

    display: grid;

    justify-items: center;

    gap: 4px;

    font-size: 11px;

    font-weight: 700;

}


.fiesta-talla input {

    width: 54px;

    height: 42px;

    padding: 0;

    border: 1px solid #aaaaaa;

    border-radius: 0;

    background: #ffffff;

    color: #111111;

    text-align: center;

    font-family: inherit;

    font-size: 16px;

    -moz-appearance: textfield;

    appearance: textfield;

}


.fiesta-producto input:focus-visible {

    outline: 3px solid var(--rosa);

    outline-offset: 1px;

}


.fiesta-producto-aviso {

    flex-basis: 100%;

    color: var(--fiesta-gris-texto);

    font-size: 12px;

    line-height: 1.4;

}


.fiesta-producto-aviso:empty {

    display: none;

}


/*
Barra de total pegada abajo mientras se recorre el
catálogo. whatsapp.js sube su botón flotante cuando
esta barra está visible para no taparla.
*/
.fiesta-total-barra {

    position: sticky;

    bottom: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin: 28px -18px -30px;

    padding: 12px 18px;

    background: #111111;

    color: #ffffff;

}


.fiesta-total-texto {

    display: grid;

    line-height: 1.2;

}


.fiesta-total-etiqueta {

    color: #cccccc;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.fiesta-total-texto strong {

    font-size: 20px;

}


#fiesta-total-unidades {

    color: #cccccc;

    font-size: 12px;

}


.fiesta-total-acciones {

    display: flex;

    gap: 8px;

}


.fiesta-total-barra .fiesta-boton {

    min-height: 46px;

    padding: 0 16px;

}


.fiesta-total-barra .fiesta-boton-principal {

    border-color: var(--rosa);

    background: var(--rosa);

    color: #111111;

}


.fiesta-total-barra .fiesta-boton-principal:hover {

    border-color: #ffffff;

    background: #ffffff;

}


.fiesta-total-barra .fiesta-boton-secundario {

    border-color: rgba(255, 255, 255, 0.55);

    color: #ffffff;

}


.fiesta-total-barra .fiesta-boton-secundario:hover {

    background: #ffffff;

    color: #111111;

}


/*
En móvil la barra se queda en dos líneas de texto y el
"Volver" en la flecha, para que no pase de ~70 px y el
botón de WhatsApp (que sube a 82 px) no la tape.
*/
.fiesta-total-barra .fiesta-texto-boton,
.fiesta-total-barra .fiesta-total-etiqueta {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0 0 0 0);

    white-space: nowrap;

}



/* ==================================================
   PASO 5 · RESUMEN
================================================== */

.fiesta-resumen {

    display: grid;

    gap: 28px;

    margin-top: 26px;

}


.fiesta-resumen .fiesta-subtitulo {

    margin-top: 0;

}


.fiesta-resumen-detalles {

    padding: 20px;

    background: var(--fiesta-fondo-suave);

}


.fiesta-resumen-lista {

    display: grid;

}


.fiesta-resumen-fila {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 2px 12px;

    padding: 12px 0;

    border-top: 1px solid #dddddd;

}


.fiesta-resumen-fila dt {

    color: var(--fiesta-gris-texto);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.fiesta-resumen-fila dd {

    grid-column: 1;

    font-size: 15px;

    line-height: 1.4;

    overflow-wrap: anywhere;

}


.fiesta-resumen-fila .fiesta-enlace {

    grid-column: 2;

    grid-row: 1 / span 2;

    align-self: center;

}


.fiesta-colores-mini {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 6px 12px;

}


.fiesta-colores-mini span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}


.fiesta-colores-mini i {

    width: 16px;

    height: 16px;

    display: inline-block;

    border: 1px solid rgba(0, 0, 0, 0.2);

    border-radius: 50%;

}


.fiesta-resumen-imagen {

    width: 120px;

    max-width: 100%;

    aspect-ratio: 1;

    margin-top: 4px;

    object-fit: cover;

    background: #ffffff;

}


.fiesta-tabla-scroll {

    overflow-x: auto;

}


.fiesta-tabla {

    width: 100%;

    min-width: 340px;

    border-collapse: collapse;

    font-size: 14px;

}


.fiesta-tabla th,
.fiesta-tabla td {

    padding: 12px 6px;

    border-bottom: 1px solid #dddddd;

    text-align: right;

    vertical-align: top;

}


.fiesta-tabla th:first-child,
.fiesta-tabla td:first-child {

    padding-left: 0;

    text-align: left;

}


.fiesta-tabla th:last-child,
.fiesta-tabla td:last-child {

    padding-right: 0;

}


.fiesta-tabla thead th {

    padding-top: 0;

    color: var(--fiesta-gris-texto);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


.fiesta-tabla tbody th {

    font-weight: 500;

}


.fiesta-tabla-variante {

    display: block;

    margin-top: 3px;

    color: var(--fiesta-gris-texto);

    font-size: 12px;

    font-weight: 400;

}


.fiesta-tabla tfoot th,
.fiesta-tabla tfoot td {

    padding-top: 16px;

    border-bottom: none;

    font-size: 20px;

    font-weight: 900;

}


.fiesta-campo-notas {

    margin-top: 26px;

}


/* .boton-finalizar viene de carrito.css */

.fiesta-anadir {

    margin-top: 20px;

    font-weight: 800;

    letter-spacing: 0.08em;

    transition:
        background 0.15s ease,
        color 0.15s ease;

}


.fiesta-anadir:hover:not(:disabled) {

    background: var(--rosa);

    color: #111111;

}


.fiesta-anadir:disabled {

    cursor: wait;

}



/* ==================================================
   CONFIRMACIÓN (mismo aspecto que .empresas-confirmacion)
================================================== */

.fiesta-confirmacion {

    margin-top: 26px;

    padding: 32px 26px;

    border-left: 4px solid var(--cyan);

    background: #f2fdff;

    outline: none;

}


.fiesta-confirmacion-icono {

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border-radius: 50%;

    background: var(--cyan);

    color: #ffffff;

    font-size: 26px;

    font-weight: 900;

}


.fiesta-confirmacion h3 {

    margin-bottom: 10px;

    font-size: 26px;

    font-weight: 500;

}


.fiesta-confirmacion p {

    max-width: 520px;

    color: #555555;

    font-size: 14px;

    line-height: 1.6;

}


.fiesta-confirmacion-acciones {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;

}


.fiesta-confirmacion-compacta {

    padding: 22px 20px;

}


.fiesta-confirmacion-compacta h3 {

    font-size: 20px;

}


.fiesta-confirmacion-compacta .fiesta-boton {

    margin-top: 16px;

}



/* ==================================================
   7. ¿NO SABES QUÉ NECESITAS?
   Mismo lenguaje que .empresas-contacto-bloque
================================================== */

.fiesta-alternativa {

    padding-bottom: 20px;

}


.fiesta-alternativa-bloque {

    display: grid;

    gap: 28px;

    padding: 34px 26px;

    background: #111111;

    color: #ffffff;

}


.fiesta-alternativa-etiqueta {

    margin-bottom: 14px;

    color: var(--amarillo);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.12em;

}


.fiesta-alternativa-bloque h2 {

    margin-bottom: 14px;

    font-size:
        clamp(
            32px,
            4.4vw,
            54px
        );

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: -0.03em;

}


.fiesta-alternativa-bloque > div > p:not(.fiesta-alternativa-etiqueta) {

    max-width: 440px;

    color: #cccccc;

    font-size: 15px;

    line-height: 1.55;

}


.fiesta-alternativa-boton {

    margin-top: 26px;

}


.fiesta-alternativa-pasos {

    display: grid;

    gap: 12px;

    list-style: none;

}


.fiesta-alternativa-pasos li {

    display: flex;

    align-items: baseline;

    gap: 12px;

    font-size: 16px;

}


.fiesta-alternativa-pasos li::before {

    content: "✓";

    color: var(--amarillo);

    font-weight: 900;

}



/* ==================================================
   8. FORMULARIO DE PROPUESTA
================================================== */

.fiesta-propuesta {

    padding-top: 50px;

    padding-bottom: 110px;

    scroll-margin-top: 12px;

}


.fiesta-propuesta > h2 {

    margin-bottom: 12px;

    font-size:
        clamp(
            30px,
            4vw,
            42px
        );

    font-weight: 500;

}


.fiesta-propuesta-intro {

    max-width: 520px;

    margin-bottom: 10px;

    color: var(--fiesta-gris-texto);

    font-size: 14px;

    line-height: 1.6;

}


.fiesta-propuesta-form {

    display: grid;

    gap: 10px;

}


.fiesta-propuesta-campos {

    display: grid;

    gap: 0 20px;

}


.fiesta-propuesta-lateral .fiesta-subtitulo {

    margin-top: 22px;

    margin-bottom: 8px;

    font-size: 12px;

    letter-spacing: 0;

    text-transform: none;

}


/* Mismo aspecto que .empresas-boton-whatsapp */

.fiesta-boton-whatsapp {

    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 24px;

    padding: 0 16px;

    border: none;

    background: #25d366;

    color: #0b0b0b;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 0.03em;

    transition:
        opacity 0.2s ease;

}


.fiesta-boton-whatsapp svg {

    width: 24px;

    height: 24px;

    flex: none;

    fill: currentColor;

}


.fiesta-boton-whatsapp:hover {

    opacity: 0.85;

}


.fiesta-boton-whatsapp:disabled {

    cursor: wait;

    opacity: 0.5;

}



/* ==================================================
   TABLET Y ESCRITORIO
================================================== */

@media (min-width: 600px) {

    .fiesta-total-barra .fiesta-texto-boton,
    .fiesta-total-barra .fiesta-total-etiqueta {

        position: static;

        width: auto;

        height: auto;

        overflow: visible;

        clip: auto;

    }

}


@media (min-width: 700px) {

    .fiesta-ventajas {

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

    }


    .fiesta-asistente-marco {

        padding: 40px 44px 44px;

    }


    .fiesta-total-barra {

        margin: 32px -44px -44px;

        padding: 14px 44px;

    }


    .fiesta-progreso-etapas {

        display: grid;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        margin-top: 10px;

        list-style: none;

        color: #767676;

        font-size: 11px;

        font-weight: 700;

    }


    .fiesta-progreso-etapas li.actual {

        color: #111111;

    }


    .fiesta-progreso-etapas li.hecha {

        color: var(--fiesta-rosa-texto);

    }


    .fiesta-celebraciones {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: 14px;

    }


    .fiesta-propuesta-campos {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .fiesta-campo-ancho {

        grid-column: 1 / -1;

    }


    .fiesta-alternativa-bloque {

        padding: 44px 48px;

    }

}


@media (min-width: 900px) {

    .fiesta-portada {

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(320px, 0.85fr);

        align-items: center;

        gap: 60px;

        padding-top: 72px;

        padding-bottom: 90px;

    }


    .fiesta-estilo {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

    }


    .fiesta-resumen {

        grid-template-columns:
            minmax(0, 0.85fr)
            minmax(0, 1.15fr);

        align-items: start;

        gap: 40px;

    }


    .fiesta-alternativa-bloque {

        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(0, 0.7fr);

        align-items: center;

        gap: 48px;

        padding: 52px 56px;

    }


    .fiesta-propuesta-form {

        grid-template-columns:
            minmax(0, 1.6fr)
            minmax(280px, 0.9fr);

        align-items: start;

        gap: 40px;

    }


    .fiesta-propuesta-lateral .fiesta-subtitulo {

        margin-top: 22px;

    }

}


@media (min-width: 1100px) {

    .fiesta-catalogo {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        align-items: start;

        gap: 34px 44px;

    }

}


@media (prefers-reduced-motion: reduce) {

    .fiesta-progreso-barra span,
    .fiesta-opcion-caja,
    .fiesta-chip-caja,
    .fiesta-boton,
    .fiesta-empezar {

        transition: none;

    }

}