/* =========================================
   COLORES Y CONFIGURACIÓN GENERAL
========================================= */

:root {
    --bordo: #7a2848;
    --bordo-oscuro: #4f152c;
    --bordo-profundo: #32101f;
    --rosa: #e9b8c8;
    --rosa-claro: #f9eaf0;
    --crema: #fffaf4;
    --crema-oscuro: #f3e6d9;
    --marron: #3d272e;
    --gris: #745f66;
    --blanco: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--marron);
    background-color: var(--crema);
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
}

section {
    scroll-margin-top: 85px;
}

.subtitulo-seccion {
    margin-bottom: 14px;
    color: var(--bordo);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.subtitulo-claro {
    color: var(--rosa);
}

.mensaje-vacio {
    color: var(--gris);
    text-align: center;
}


/* =========================================
   NAVEGACIÓN
========================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 17px 0;
    background-color: var(--bordo-oscuro);
    box-shadow: 0 4px 18px rgba(50, 16, 31, 0.14);
}

.navbar-brand {
    color: var(--blanco);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: bold;
    letter-spacing: 1px;
}

.navbar-brand:hover {
    color: var(--blanco);
}

.navegacion-enlaces {
    display: flex;
    align-items: center;
    gap: 28px;
}

.navegacion-enlaces a {
    color: #f5e7ec;
    font-size: 15px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.navegacion-enlaces a:hover {
    color: var(--rosa);
}

.navegacion-enlaces .boton-navegacion {
    padding: 10px 20px;
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border-radius: 30px;
    font-weight: bold;
}

.navegacion-enlaces .boton-navegacion:hover {
    color: var(--bordo-oscuro);
    background-color: var(--rosa);
}


/* =========================================
   PORTADA
========================================= */

.portada {
    position: relative;
    display: flex;
    align-items: center;

    min-height: 68vh;
    padding: 70px 0;

    color: var(--blanco);
    background-color: var(--bordo-profundo);
    background-position: center;
    background-size: cover;
}

.contenido-portada {
    position: relative;
    z-index: 1;
}

.texto-superior {
    margin-bottom: 16px;

    color: var(--rosa);

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.portada h1 {
    max-width: 680px;
    margin: 0 0 22px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(60px, 8vw, 105px);
    font-weight: bold;

    line-height: 0.82;
    letter-spacing: -3px;
}

.portada h1 span {
    color: var(--rosa);
    font-style: italic;
    font-weight: normal;
}

.descripcion-portada {
    max-width: 570px;
    margin-bottom: 30px;

    color: #f7eaf0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.55;
}

.botones-portada {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
}

.boton-principal,
.boton-secundario {
    display: inline-block;

    padding: 12px 21px;

    border-radius: 30px;

    font-size: 15px;
    font-weight: bold;
    text-decoration: none;

    transition: all 0.2s ease;
}

.boton-principal {
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border: 2px solid var(--blanco);
}

.boton-principal:hover {
    color: var(--bordo-oscuro);
    background-color: var(--rosa);
    border-color: var(--rosa);
}

.boton-secundario {
    color: var(--blanco);
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.75);
}

.boton-secundario:hover {
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
}


/* =========================================
   MENSAJES
========================================= */

.contenedor-mensajes {
    padding-top: 25px;
}

.alert-success {
    color: var(--bordo-oscuro);
    background-color: var(--rosa-claro);
    border: 1px solid var(--rosa);
    border-radius: 12px;
}


/* =========================================
   PRESENTACIÓN
========================================= */

.presentacion {
    padding: 65px 0;
    background-color: var(--crema);
}


/* Títulos generales de otras secciones */

.encabezado-seccion h2,
.titulo-book h2,
.titulo-como-pedir h2,
.seccion-pedido h2 {
    margin: 0;

    color: var(--bordo-oscuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5vw, 65px);
    font-weight: bold;
    line-height: 1.05;
}


/* Título exclusivo de Sobre Josefa */

.presentacion h2 {
    margin: 0;

    color: var(--bordo-oscuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4vw, 56px);
    font-weight: bold;
    line-height: 1.02;
}


/* Texto Sobre Josefa */

.texto-presentacion {
    max-width: 720px;
    margin-bottom: 14px;

    color: var(--gris);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.55;
}


/* =========================================
   PRESENTACIÓN - CELULAR
========================================= */

@media (max-width: 768px) {

    .presentacion {
        padding: 50px 0;
    }

    .presentacion h2 {
        font-size: 40px;
    }

    .texto-presentacion {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.55;
    }
}


/* =========================================
   CATÁLOGO
========================================= */

.seccion-catalogo {
    padding: 75px 0;
    background-color: var(--rosa-claro);
}

.encabezado-seccion {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px;
}

.encabezado-seccion > p {
    max-width: 430px;
    margin: 0;
    color: var(--gris);
    line-height: 1.7;
}

.tarjeta-producto {
    height: 100%;
    overflow: hidden;
    background-color: var(--blanco);
    border-radius: 18px;
    box-shadow: 0 9px 30px rgba(80, 21, 45, 0.1);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tarjeta-producto:hover {
    transform: translateY(-7px);
    box-shadow: 0 17px 40px rgba(80, 21, 45, 0.17);
}

.contenedor-imagen-producto {
    height: 270px;
    overflow: hidden;
}

.contenedor-imagen-producto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.tarjeta-producto:hover img {
    transform: scale(1.04);
}

.contenido-producto {
    display: flex;
    flex-direction: column;
    min-height: 235px;
    padding: 22px;
}

.contenido-producto h3 {
    margin-bottom: 13px;
    color: var(--bordo-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: bold;
}

.contenido-producto > p {
    flex-grow: 1;
    color: var(--gris);
    line-height: 1.65;
}

.pie-producto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 18px;
    border-top: 1px solid var(--crema-oscuro);
}

.pie-producto strong {
    color: var(--bordo);
    font-size: 22px;
}

.pie-producto a {
    padding: 9px 19px;
    color: var(--blanco);
    background-color: var(--bordo);
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
}

.pie-producto a:hover {
    background-color: var(--bordo-oscuro);
}


/* =========================================
   BOOK DE TORTAS
========================================= */

.seccion-book {
    padding: 110px 0;
    background-color: var(--crema);
}

.titulo-book {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.titulo-book > p:last-child {
    margin-top: 20px;
    color: var(--gris);
    font-size: 18px;
}

.galeria {
    columns: 3 280px;
    column-gap: 22px;
}

.foto-galeria {
    position: relative;
    break-inside: avoid;
    overflow: hidden;
    margin: 0 0 22px;
    background-color: var(--rosa-claro);
    border-radius: 16px;
}

.foto-galeria img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.45s ease;
}

.foto-galeria:hover img {
    transform: scale(1.035);
}

.foto-galeria figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    padding: 45px 20px 19px;

    color: var(--blanco);
    background: linear-gradient(
        transparent,
        rgba(50, 16, 31, 0.9)
    );
}

.foto-galeria figcaption h3 {
    margin: 0 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: bold;
}

.foto-galeria figcaption p {
    margin: 0;
    color: #f7eaf0;
    font-size: 14px;
}


/* =========================================
   CÓMO PEDIR
========================================= */

.seccion-como-pedir {
    padding: 100px 0;
    background-color: var(--crema-oscuro);
}

.titulo-como-pedir {
    margin-bottom: 55px;
    text-align: center;
}

.paso {
    height: 100%;
    padding: 35px;
    background-color: var(--crema);
    border-top: 4px solid var(--bordo);
    border-radius: 4px 4px 16px 16px;
}

.paso span {
    display: block;
    margin-bottom: 30px;
    color: var(--rosa);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 45px;
    font-weight: bold;
}

.paso h3 {
    color: var(--bordo-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: bold;
}

.paso p {
    margin: 0;
    color: var(--gris);
    line-height: 1.65;
}


/* =========================================
   FORMULARIO
========================================= */

.seccion-pedido {
    padding: 110px 0;
    color: var(--blanco);
    background-color: var(--bordo);
}

.seccion-pedido h2 {
    color: var(--blanco);
}

.descripcion-pedido {
    margin: 25px 0 35px;
    color: #f5dce5;
    font-size: 18px;
    line-height: 1.7;
}

.datos-pedido {
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.datos-pedido p {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 17px 0;
    color: #f5dce5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.datos-pedido strong {
    color: var(--blanco);
}

.contenedor-formulario {
    padding: 38px;
    color: var(--marron);
    background-color: var(--blanco);
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(50, 16, 31, 0.25);
}

form p {
    margin-bottom: 19px;
}

form label {
    display: block;
    margin-bottom: 7px;
    color: var(--bordo-oscuro);
    font-weight: bold;
}

.form-control,
.form-select {
    width: 100%;
    padding: 12px 14px;
    background-color: var(--crema);
    border: 1px solid var(--crema-oscuro);
    border-radius: 9px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--blanco);
    border-color: var(--bordo);
    box-shadow: 0 0 0 4px rgba(122, 40, 72, 0.12);
}

textarea.form-control {
    resize: vertical;
}

.errorlist {
    margin: 0 0 8px;
    padding: 0;
    color: #b42318;
    font-size: 14px;
    list-style: none;
}

.boton-enviar {
    width: 100%;
    padding: 14px;
    color: var(--blanco);
    background-color: var(--bordo);
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.boton-enviar:hover {
    background-color: var(--bordo-oscuro);
}


/* =========================================
   PIE DE PÁGINA
========================================= */

.pie-pagina {
    padding: 65px 0 25px;
    color: var(--blanco);
    background-color: var(--bordo-profundo);
}

.pie-pagina h2 {
    margin-bottom: 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: bold;
}

.pie-pagina h3 {
    margin-bottom: 18px;
    color: var(--rosa);
    font-size: 18px;
    font-weight: bold;
}

.pie-pagina p {
    color: #f0dce3;
    line-height: 1.7;
}

.enlace-instagram {
    color: var(--blanco);
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
}

.enlace-instagram:hover {
    color: var(--rosa);
}

.pie-pagina hr {
    margin-top: 40px;
    border-color: rgba(255, 255, 255, 0.3);
}

.texto-final {
    margin: 0;
    text-align: center;
    font-size: 14px;
}

/* =========================================
   VISOR DE FOTOGRAFÍAS
========================================= */

.foto-galeria {
    cursor: pointer;
}

.foto-galeria:focus {
    outline: 4px solid rgba(122, 40, 72, 0.25);
    outline-offset: 4px;
}

.visor-fotos {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background-color: rgba(25, 7, 15, 0.94);
}

.visor-fotos.visor-visible {
    display: flex;
}

.contenido-visor {
    max-width: 1000px;
    max-height: 90vh;
    text-align: center;
}

.contenido-visor img {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin: auto;

    object-fit: contain;
    border-radius: 12px;
}

.contenido-visor p {
    margin: 15px 0 0;
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.cerrar-visor {
    position: absolute;
    top: 18px;
    right: 25px;

    color: white;
    background: transparent;
    border: none;

    font-size: 48px;
    line-height: 1;
    cursor: pointer;
}

.cerrar-visor:hover {
    color: var(--rosa);
}

/* =========================================
   WHATSAPP FLOTANTE
========================================= */

.boton-whatsapp {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1100;

    padding: 14px 21px;

    color: var(--blanco);
    background-color: #25d366;
    border-radius: 40px;

    font-weight: bold;
    text-decoration: none;

    box-shadow: 0 8px 23px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.boton-whatsapp:hover {
    color: var(--blanco);
    background-color: #1ebe5d;
    transform: translateY(-3px);
}


/* =========================================
   TABLETS
========================================= */

@media (max-width: 991px) {

    .navegacion-enlaces {
        gap: 15px;
    }

    .navegacion-enlaces a:not(.boton-navegacion) {
        display: none;
    }

    .portada {
        min-height: 680px;
    }

    .presentacion,
    .seccion-catalogo,
    .seccion-book,
    .seccion-como-pedir,
    .seccion-pedido {
        padding: 80px 0;
    }

    .encabezado-seccion {
        display: block;
    }

    .encabezado-seccion > p {
        margin-top: 20px;
    }
}


/* =========================================
   CELULARES
========================================= */

@media (max-width: 576px) {

    .navbar {
        padding: 13px 0;
    }

    .navbar-brand {
        font-size: 20px;
    }

    .navegacion-enlaces .boton-navegacion {
        padding: 8px 13px;
        font-size: 13px;
    }

    .portada {
        min-height: 650px;
        padding: 70px 0;
        background-position: center;
    }

    .texto-superior {
        font-size: 12px;
        line-height: 1.6;
    }

    .portada h1 {
        font-size: 64px;
        letter-spacing: -2px;
    }

    .descripcion-portada {
        font-size: 18px;
    }

    .botones-portada {
        display: grid;
    }

    .boton-principal,
    .boton-secundario {
        width: 100%;
        text-align: center;
    }

    .presentacion,
    .seccion-catalogo,
    .seccion-book,
    .seccion-como-pedir,
    .seccion-pedido {
        padding: 65px 0;
    }

    .presentacion h2,
    .encabezado-seccion h2,
    .titulo-book h2,
    .titulo-como-pedir h2,
    .seccion-pedido h2 {
        font-size: 40px;
    }

    .texto-presentacion {
        font-size: 18px;
    }

    .contenedor-imagen-producto {
        height: 280px;
    }

    .contenido-producto {
        min-height: auto;
        padding: 22px;
    }

    .galeria {
        columns: 1;
    }

    .paso {
        padding: 27px;
    }

    .contenedor-formulario {
        padding: 25px 20px;
    }

    .datos-pedido p {
        display: block;
    }

    .datos-pedido strong {
        display: block;
        margin-bottom: 5px;
    }

    .boton-whatsapp {
        right: 13px;
        bottom: 13px;
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* =========================================
   OPINIONES DE CLIENTES
========================================= */

.seccion-opiniones {
    padding: 70px 0;
    background-color: #fffaf5;
}


/* ENCABEZADO */

.encabezado-opiniones {
    max-width: 720px;
    margin: 0 auto 35px;
    text-align: center;
}

.encabezado-opiniones .subtitulo-seccion {
    margin-bottom: 10px;

    color: #86284d;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.encabezado-opiniones h2 {
    margin-bottom: 14px;

    color: #561126;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.05;
}

.encabezado-opiniones > p:last-child {
    margin: 0;

    color: #765f66;

    font-size: 16px;
    line-height: 1.5;
}


/* =========================================
   CARRUSEL HORIZONTAL
========================================= */

.grilla-opiniones {
    display: flex;
    gap: 20px;

    width: 100%;
    padding: 8px 5px 22px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}


/* TARJETAS */

.tarjeta-opinion {
    position: relative;

    display: flex;
    flex: 0 0 440px;
    flex-direction: column;

    width: 440px;
    min-height: 270px;
    margin: 0;
    padding: 27px;

    background-color: white;

    border: 1px solid #eedde2;
    border-top: 4px solid #86284d;
    border-radius: 17px;

    box-shadow: 0 12px 30px rgba(86, 17, 38, 0.08);

    scroll-snap-align: start;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.tarjeta-opinion:hover {
    transform: translateY(-5px);

    box-shadow:
        0 17px 38px rgba(86, 17, 38, 0.13);
}


/* ESTRELLAS */

.estrellas-opinion {
    margin-bottom: 17px;

    color: #d69a35;

    font-size: 20px;
    letter-spacing: 4px;
    line-height: 1;

    white-space: nowrap;
}


/* OPINIÓN */

.tarjeta-opinion blockquote {
    flex-grow: 1;

    margin: 0 0 20px;
    padding: 0;

    color: #4e3840;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.55;
}


/* NOMBRE DEL CLIENTE */

.nombre-cliente {
    margin: 0;

    color: #561126;

    font-size: 15px;
    font-weight: 700;
}

.nombre-cliente::before {
    content: "— ";
    color: #d89ab0;
}


/* =========================================
   BARRA INFERIOR DEL CARRUSEL
========================================= */

.grilla-opiniones::-webkit-scrollbar {
    height: 7px;
}

.grilla-opiniones::-webkit-scrollbar-track {
    background-color: #f0dfe4;
    border-radius: 20px;
}

.grilla-opiniones::-webkit-scrollbar-thumb {
    background-color: #86284d;
    border-radius: 20px;
}

.grilla-opiniones::-webkit-scrollbar-thumb:hover {
    background-color: #561126;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .seccion-opiniones {
        padding: 60px 0;
    }

    .tarjeta-opinion {
        flex-basis: 400px;
        width: 400px;
    }
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 768px) {

    .seccion-opiniones {
        padding: 50px 0;
    }

    .encabezado-opiniones {
        margin-bottom: 28px;
    }

    .encabezado-opiniones h2 {
        font-size: 38px;
    }

    .encabezado-opiniones > p:last-child {
        font-size: 15px;
    }

    .grilla-opiniones {
        gap: 16px;
        padding-bottom: 18px;
    }

    .tarjeta-opinion {
        flex-basis: 88vw;
        width: 88vw;
        min-height: auto;
        padding: 24px 21px;
    }

    .estrellas-opinion {
        margin-bottom: 15px;
        font-size: 19px;
    }

    .tarjeta-opinion blockquote {
        margin-bottom: 18px;
        font-size: 16px;
        line-height: 1.5;
    }

    .nombre-cliente {
        font-size: 14px;
    }
}
/* =========================================
   TAMAÑOS Y PRECIOS DE LOS PRODUCTOS
========================================= */

.lista-tamanos-producto {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: auto;
    margin-bottom: 20px;
    padding-top: 10px;
}

.tamano-producto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 11px 15px;

    background-color: #fff7f3;
    border: 1px solid #eedde2;
    border-radius: 10px;
}

.tamano-producto span {
    color: #674d56;
    font-size: 16px;
    font-weight: 600;
}

.tamano-producto strong {
    color: #86284d;
    font-size: 18px;
    font-weight: 700;
}

.precio-unico-producto {
    margin-top: auto;
    margin-bottom: 20px;
    padding-top: 10px;
}

.precio-unico-producto strong {
    color: #86284d;
    font-size: 23px;
    font-weight: 700;
}

.texto-encargo {
    color: #765f66;
    font-size: 15px;
}
/* =========================================
   TOTAL ESTIMADO DEL PEDIDO
========================================= */

.resumen-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin: 5px 0 24px;
    padding: 18px 22px;

    background-color: #fff1f5;
    border: 1px solid #e5bdcb;
    border-left: 5px solid #86284d;
    border-radius: 12px;
}

.resumen-total[hidden] {
    display: none;
}

.resumen-total span {
    color: #674d56;
    font-size: 17px;
    font-weight: 600;
}

.resumen-total strong {
    color: #86284d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 700;
}

@media (max-width: 576px) {

    .resumen-total {
        padding: 16px 18px;
    }

    .resumen-total span {
        font-size: 15px;
    }

    .resumen-total strong {
        font-size: 23px;
    }

}
/* =========================================
   PÁGINA DE TORTAS PERSONALIZADAS
========================================= */

.pagina-personalizada {
    margin: 0;
    color: #4e3840;
    background-color: #fffaf5;
}


/* Barra superior */

.navbar-personalizada {
    position: sticky;
    top: 0;
    z-index: 1000;

    padding: 18px 0;
    background-color: #561126;
}

.barra-personalizada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.marca-personalizada {
    color: white;
    text-decoration: none;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
    font-weight: 700;
}

.marca-personalizada:hover {
    color: #f0b5ca;
}

.volver-inicio {
    padding: 12px 22px;

    color: #561126;
    background-color: white;
    border-radius: 999px;

    text-decoration: none;
    font-size: 16px;
    font-weight: 700;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.volver-inicio:hover {
    color: #561126;
    background-color: #f8dce6;
    transform: translateY(-2px);
}


/* Presentación */

.hero-personalizado {
    padding: 100px 0 90px;

    text-align: center;

    background:
        radial-gradient(
            circle at top left,
            rgba(229, 157, 184, 0.25),
            transparent 35%
        ),
        #fff7f3;
}

.hero-personalizado .subtitulo-seccion {
    margin-bottom: 18px;
    color: #86284d;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
}

.hero-personalizado h1 {
    max-width: 1000px;
    margin: 0 auto 25px;

    color: #561126;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 700;
    line-height: 1;
}

.descripcion-hero-personalizado {
    max-width: 760px;
    margin: 0 auto;

    color: #765f66;

    font-size: 21px;
    line-height: 1.7;
}


/* Distribución principal */

.seccion-formulario-personalizado {
    padding: 100px 0;
    background-color: #f5e8dc;
}

.distribucion-personalizada {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(500px, 1.35fr);
    gap: 70px;
    align-items: start;
}


/* Información lateral */

.informacion-personalizada {
    position: sticky;
    top: 125px;
}

.informacion-personalizada .subtitulo-seccion {
    margin-bottom: 18px;
    color: #86284d;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
}

.informacion-personalizada h2 {
    margin-bottom: 25px;
    color: #561126;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(43px, 5vw, 65px);
    font-weight: 700;
    line-height: 1.05;
}

.informacion-personalizada > p {
    margin-bottom: 35px;
    color: #674d56;

    font-size: 19px;
    line-height: 1.7;
}

.dato-personalizado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 0;
    border-top: 1px solid rgba(86, 17, 38, 0.2);
}

.dato-personalizado:last-of-type {
    border-bottom: 1px solid rgba(86, 17, 38, 0.2);
}

.dato-personalizado strong {
    color: #561126;
    font-size: 17px;
}

.dato-personalizado span {
    color: #765f66;
    text-align: right;
}

.informacion-personalizada .aclaracion-personalizada {
    margin-top: 28px;
    margin-bottom: 0;

    color: #876f77;
    font-size: 15px;
    line-height: 1.6;
}


/* Tarjeta del formulario */

.tarjeta-formulario-personalizado {
    padding: 50px;

    background-color: white;
    border: 1px solid #ead7dc;
    border-radius: 24px;

    box-shadow: 0 20px 55px rgba(86, 17, 38, 0.1);
}

.tarjeta-formulario-personalizado > h2 {
    margin-bottom: 10px;
    color: #561126;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 700;
}

.campos-obligatorios {
    margin-bottom: 35px;
    color: #876f77;
    font-size: 14px;
}


/* Campos */

.campo-personalizado {
    margin: 0 0 25px;
}

.fila-campos-personalizados {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.campo-personalizado label,
.campo-personalizado legend {
    display: block;

    margin-bottom: 9px;
    color: #561126;

    font-size: 16px;
    font-weight: 700;
}

.campo-personalizado legend {
    float: none;
    width: auto;
}

.campo-personalizado .form-control,
.campo-personalizado .form-select {
    width: 100%;
    min-height: 56px;
    padding: 13px 16px;

    color: #4e3840;
    background-color: #fffaf5;
    border: 1px solid #ead7dc;
    border-radius: 11px;

    font-size: 16px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.campo-personalizado textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.campo-personalizado .form-control:focus,
.campo-personalizado .form-select:focus {
    background-color: white;
    border-color: #86284d;
    box-shadow: 0 0 0 4px rgba(134, 40, 77, 0.12);
}

.ayuda-campo {
    margin: -3px 0 12px;
    color: #876f77;
    font-size: 14px;
}


/* Opciones de rellenos */

.opciones-rellenos > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.opciones-rellenos > div > div {
    margin: 0;
}

.opciones-rellenos label {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 52px;
    margin: 0;
    padding: 12px 15px;

    color: #674d56;
    background-color: #fff7f3;
    border: 1px solid #ead7dc;
    border-radius: 10px;

    cursor: pointer;
    font-weight: 600;

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

.opciones-rellenos label:hover {
    color: #561126;
    background-color: #fceaf0;
    border-color: #d89ab0;
}

.opciones-rellenos input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin: 0;

    accent-color: #86284d;
    cursor: pointer;
}


/* Errores */

.campo-personalizado .errorlist {
    margin: 8px 0 0;
    padding: 0;

    color: #b4233d;
    list-style: none;

    font-size: 14px;
    font-weight: 600;
}


/* Precio a confirmar */

.precio-confirmar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin: 10px 0 25px;
    padding: 18px 22px;

    background-color: #fff1f5;
    border: 1px solid #e5bdcb;
    border-left: 5px solid #86284d;
    border-radius: 12px;
}

.precio-confirmar span {
    color: #674d56;
    font-size: 17px;
    font-weight: 600;
}

.precio-confirmar strong {
    color: #86284d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}


/* Botón */

.boton-enviar-personalizado {
    width: 100%;
    padding: 17px 25px;

    color: white;
    background-color: #86284d;
    border: none;
    border-radius: 999px;

    font-size: 18px;
    font-weight: 700;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.boton-enviar-personalizado:hover {
    background-color: #561126;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(86, 17, 38, 0.2);
}


/* Pie de página */

.footer-personalizado {
    padding: 55px 0;
    color: white;
    background-color: #350917;
    text-align: center;
}

.footer-personalizado strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
}

.footer-personalizado p {
    margin: 12px 0;
    color: #f0dce3;
}

.footer-personalizado a {
    color: #f0b5ca;
    text-decoration: none;
    font-weight: 700;
}


/* =========================================
   RESPONSIVE PERSONALIZADO
========================================= */

@media (max-width: 992px) {

    .distribucion-personalizada {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .informacion-personalizada {
        position: static;
    }

}


@media (max-width: 768px) {

    .navbar-personalizada {
        padding: 14px 0;
    }

    .marca-personalizada {
        font-size: 23px;
    }

    .volver-inicio {
        padding: 10px 15px;
        font-size: 13px;
    }

    .hero-personalizado {
        padding: 70px 0 65px;
    }

    .hero-personalizado h1 {
        font-size: 48px;
    }

    .descripcion-hero-personalizado {
        font-size: 18px;
    }

    .seccion-formulario-personalizado {
        padding: 65px 0;
    }

    .tarjeta-formulario-personalizado {
        padding: 32px 22px;
        border-radius: 18px;
    }

    .tarjeta-formulario-personalizado > h2 {
        font-size: 35px;
    }

    .fila-campos-personalizados {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .opciones-rellenos > div {
        grid-template-columns: 1fr;
    }

}
/* Botón para tortas personalizadas */

.boton-personalizado-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;
    padding: 14px 28px;

    color: #561126;
    background-color: #f0b5ca;
    border: 2px solid #f0b5ca;
    border-radius: 999px;

    text-decoration: none;
    font-size: 17px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.boton-personalizado-hero:hover {
    color: white;
    background-color: #86284d;
    border-color: #86284d;
    transform: translateY(-3px);
}

@media (max-width: 768px) {

    .boton-personalizado-hero {
        width: 100%;
    }

}
/* =========================================
   CARRUSEL DE FOTOS DE PRODUCTOS
========================================= */

.carrusel-producto {
    position: relative;
    height: 380px;
    overflow: hidden;

    background-color: #f3e7e2;
}

.imagenes-producto {
    position: relative;
    width: 100%;
    height: 100%;
}

.imagenes-producto img {
    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: none;
}

.imagenes-producto img.imagen-producto-activa {
    display: block;
    animation: aparecer-foto 0.35s ease;
}

@keyframes aparecer-foto {

    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }

}


/* Flechas */

.flecha-producto {
    position: absolute;
    top: 50%;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    color: #561126;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 34px;
    line-height: 1;

    cursor: pointer;
    opacity: 0;

    transform: translateY(-50%);

    transition:
        opacity 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.flecha-anterior {
    left: 15px;
}

.flecha-siguiente {
    right: 15px;
}

.carrusel-producto:hover .flecha-producto,
.flecha-producto:focus-visible {
    opacity: 1;
}

.flecha-producto:hover {
    color: white;
    background-color: #86284d;
}

.flecha-anterior:hover {
    transform: translateY(-50%) translateX(-2px);
}

.flecha-siguiente:hover {
    transform: translateY(-50%) translateX(2px);
}


/* Indicadores inferiores */

.contador-fotos-producto {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    background-color: rgba(45, 9, 21, 0.5);
    border-radius: 999px;

    transform: translateX(-50%);
}

.punto-foto-producto {
    width: 8px;
    height: 8px;
    padding: 0;

    background-color: rgba(255, 255, 255, 0.55);
    border: none;
    border-radius: 50%;

    cursor: pointer;

    transition:
        width 0.2s ease,
        background-color 0.2s ease;
}

.punto-foto-producto.punto-activo {
    width: 22px;
    background-color: white;
    border-radius: 999px;
}


/* Celulares */

@media (max-width: 768px) {

    .carrusel-producto {
        height: 330px;
    }

    .flecha-producto {
        width: 40px;
        height: 40px;
        font-size: 30px;
        opacity: 1;
    }

    .flecha-anterior {
        left: 10px;
    }

    .flecha-siguiente {
        right: 10px;
    }

}
/* =========================================
   CARRUSEL HORIZONTAL DEL CATÁLOGO
========================================= */

.contenedor-carrusel-catalogo {
    position: relative;
    width: 100%;
    padding: 0 55px;
}

.carrusel-catalogo {
    display: flex;
    align-items: stretch;
    gap: 24px;

    width: 100%;
    padding: 8px 4px 25px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
}

.carrusel-catalogo::-webkit-scrollbar {
    display: none;
}

.item-catalogo {
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;

    scroll-snap-align: start;
}

.item-catalogo .tarjeta-producto {
    height: 100%;
}

/* =========================================
   ALINEACIÓN DE TEXTOS DEL CATÁLOGO
========================================= */

/* Todos los títulos reservan espacio para 2 líneas */
.item-catalogo .tarjeta-producto h3 {
    min-height: 72px;
    margin-bottom: 12px;
}

/* Todas las descripciones reservan el mismo espacio */
.item-catalogo .tarjeta-producto h3 + p {
    min-height: 105px;

    margin-top: 0;
    margin-bottom: 18px;

    font-size: 14px;
    line-height: 1.45;
}

/* Flechas del catálogo */

.flecha-catalogo {
    position: absolute;
    top: 50%;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    padding: 0;

    color: white;
    background-color: #86284d;
    border: none;
    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 36px;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow: 0 8px 20px rgba(86, 17, 38, 0.22);

    transition:
        background-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

.flecha-catalogo-anterior {
    left: 0;
}

.flecha-catalogo-siguiente {
    right: 0;
}

.flecha-catalogo:hover {
    background-color: #561126;
    transform: translateY(-50%) scale(1.08);
}

.flecha-catalogo:disabled {
    opacity: 0.3;
    cursor: default;
    transform: translateY(-50%);
}


/* Tablets: dos tortas por vez */

@media (max-width: 992px) {

    .item-catalogo {
        flex-basis: calc((100% - 24px) / 2);
    }

}


/* Celulares: una torta por vez */

@media (max-width: 600px) {

    .contenedor-carrusel-catalogo {
        padding: 0 38px;
    }

    .carrusel-catalogo {
        gap: 16px;
    }

    .item-catalogo {
        flex-basis: 100%;
    }

    .flecha-catalogo {
        width: 38px;
        height: 38px;
        font-size: 29px;
    }

}
/* =========================================
   CARRUSEL DEL BOOK PERSONALIZADO
========================================= */

.contenedor-carrusel-book {
    position: relative;
    width: 100%;
    padding: 0 45px;
}

.galeria[data-carrusel-book] {
    display: flex;
    grid-template-columns: none;
    gap: 18px;

    width: 100%;
    padding: 6px 4px 20px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
}

.galeria[data-carrusel-book]::-webkit-scrollbar {
    display: none;
}

.galeria[data-carrusel-book] .foto-galeria {
    flex: 0 0 calc((100% - 72px) / 5);
    min-width: 0;
    margin: 0;

    scroll-snap-align: start;
}

.galeria[data-carrusel-book] .foto-galeria img {
    width: 100%;
    height: 300px;

    object-fit: cover;
    object-position: center;
}


/* =========================================
   FLECHAS DEL BOOK
========================================= */

.flecha-book {
    position: absolute;
    top: 50%;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: white;
    background-color: #86284d;

    border: none;
    border-radius: 50%;

    font-family: Arial, sans-serif;
    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow: 0 6px 16px rgba(86, 17, 38, 0.20);

    transition:
        opacity 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.flecha-book-anterior {
    left: 0;
}

.flecha-book-siguiente {
    right: 0;
}

.flecha-book:hover {
    background-color: #561126;
    transform: translateY(-50%) scale(1.08);
}

.flecha-book:disabled {
    opacity: 0.3;
    cursor: default;
    transform: translateY(-50%);
}


/* =========================================
   TABLETS
========================================= */

@media (max-width: 992px) {

    .galeria[data-carrusel-book] .foto-galeria {
        flex-basis: calc((100% - 18px) / 2);
    }

}


/* =========================================
   CELULARES
========================================= */

@media (max-width: 600px) {

    .contenedor-carrusel-book {
        padding: 0 38px;
    }

    .galeria[data-carrusel-book] {
        gap: 16px;
    }

    .galeria[data-carrusel-book] .foto-galeria {
        flex-basis: 100%;
    }

    .galeria[data-carrusel-book] .foto-galeria img {
        height: 420px;
    }

    .flecha-book {
        width: 38px;
        height: 38px;

        font-size: 29px;
    }

}
/* =========================================
   FILTROS DE CATEGORÍAS DEL CATÁLOGO
========================================= */

.filtros-catalogo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin: 0 0 45px;
}

.filtro-catalogo {
    padding: 11px 22px;

    color: #6c4d58;
    background-color: transparent;
    border: 1px solid #dcbfca;
    border-radius: 999px;

    font-size: 15px;
    font-weight: 700;
    cursor: pointer;

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

.filtro-catalogo:hover {
    color: #561126;
    background-color: #fff1f5;
    border-color: #86284d;

    transform: translateY(-2px);
}

.filtro-catalogo.filtro-activo {
    color: white;
    background-color: #86284d;
    border-color: #86284d;

    box-shadow: 0 7px 18px rgba(86, 17, 38, 0.18);
}

.item-catalogo.producto-oculto {
    display: none;
}


/* Celulares */

@media (max-width: 600px) {

    .filtros-catalogo {
        justify-content: flex-start;
        flex-wrap: nowrap;

        margin-bottom: 32px;
        padding: 3px 2px 10px;

        overflow-x: auto;
        scrollbar-width: none;
    }

    .filtros-catalogo::-webkit-scrollbar {
        display: none;
    }

    .filtro-catalogo {
        flex: 0 0 auto;
        padding: 10px 18px;
        font-size: 14px;
    }

}
/* =========================================
   ALINEACIÓN DE TARJETAS DEL CATÁLOGO
========================================= */

.tarjeta-producto {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contenido-producto {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.contenido-producto > p {
    margin-bottom: 20px;
}

.lista-tamanos-producto,
.precio-unico-producto {
    margin-top: auto;
}

.pie-producto {
    flex-shrink: 0;
}
/* ==================================================
   PORTADA CON IMAGEN O VIDEO
================================================== */

.portada {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-position: center;
    background-size: cover;
}

.video-portada {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.capa-portada {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        rgba(45, 10, 26, 0.55),
        rgba(45, 10, 26, 0.72)
    );
    pointer-events: none;
}

.contenido-portada {
    position: relative;
    z-index: 2;
}

.boton-enviando {
    cursor: wait;
    opacity: 0.75;
}

button:disabled,
input:disabled {
    cursor: wait;
}
/* ==================================================
   PÁGINA ARMÁ TU BOX
================================================== */

.pagina-box {
    background: #fff8f5;
    color: #4b1427;
}

.hero-box {
    padding: 72px 0 58px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(241, 177, 196, 0.42),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #fff8f5,
            #fbe8ed
        );
}

.hero-box h1 {
    max-width: 760px;
    margin: 8px 0 18px;
    font-family: Georgia, serif;
    font-size: clamp(3.2rem, 8vw, 6.5rem);
    line-height: 0.95;
    color: #5b1029;
}

.descripcion-hero-box {
    max-width: 680px;
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #775d66;
}

.seccion-armar-box {
    padding: 70px 0 90px;
}

#formulario-box {
    display: grid;
    gap: 34px;
}

.paso-box {
    padding: clamp(24px, 5vw, 48px);
    background: #ffffff;
    border: 1px solid #efd9df;
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(83, 16, 42, 0.08);
}

.encabezado-paso-box {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 34px;
}

.encabezado-paso-box h2 {
    margin: 3px 0 0;
    font-family: Georgia, serif;
    font-size: clamp(2rem, 5vw, 3.3rem);
    color: #541127;
}

.encabezado-paso-box .subtitulo-seccion {
    margin: 0;
}

.numero-paso-box {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    place-items: center;
    border-radius: 50%;
    background: #711c3d;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
}

.grilla-tamanos-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tarjeta-tamano-box {
    position: relative;
    display: flex;
    min-height: 280px;
    padding: 26px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #efd7df;
    border-radius: 24px;
    background: #fff9f7;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tarjeta-tamano-box:hover {
    transform: translateY(-4px);
    border-color: #c78399;
    box-shadow: 0 16px 35px rgba(91, 16, 41, 0.12);
}

.tarjeta-tamano-box.seleccionada,
.tarjeta-tamano-box:has(.radio-tamano-box:checked) {
    border-color: #711c3d;
    box-shadow:
        0 0 0 4px rgba(113, 28, 61, 0.1),
        0 16px 35px rgba(91, 16, 41, 0.15);
}

.radio-tamano-box {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tarjeta-tamano-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

.tarjeta-tamano-box > *:not(img):not(input) {
    position: relative;
    z-index: 1;
}

.nombre-tamano-box {
    display: block;
    margin-bottom: 5px;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
}

.precio-tamano-box {
    display: block;
    margin-bottom: 12px;
    font-size: 1.35rem;
    color: #922b52;
}

.tarjeta-tamano-box small {
    min-height: 48px;
    color: #715762;
    line-height: 1.45;
}

.contenido-tamano-box {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.contenido-tamano-box span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #f4dce4;
    color: #64162f;
    font-size: 0.78rem;
    font-weight: 700;
}

.aviso-elegir-tamano {
    padding: 18px 20px;
    margin-bottom: 28px;
    border-radius: 16px;
    background: #f8e8ed;
    color: #701e3b;
}

.categoria-box {
    padding: 0;
    margin: 0 0 42px;
    border: 0;
}

.categoria-box:last-child {
    margin-bottom: 0;
}

.cabecera-categoria-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid #edd7de;
}

.cabecera-categoria-box h3 {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 2rem;
}

.cabecera-categoria-box p {
    margin: 5px 0 0;
    color: #7b626b;
}

.contador-categoria-box {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 10px 15px;
    white-space: nowrap;
    border-radius: 14px;
    background: #f7e6eb;
    color: #681831;
}

.contador-categoria-box.completo {
    background: #dff2e5;
    color: #23683b;
}

.contador-categoria-box.excedido {
    background: #fde2e2;
    color: #9d2424;
}

.grilla-items-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tarjeta-item-box {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 15px;
    padding: 14px;
    align-items: center;
    border: 1px solid #ead5dc;
    border-radius: 20px;
    background: #ffffff;
    transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.tarjeta-item-box.seleccionado {
    border-color: #9a3c60;
    box-shadow: 0 8px 24px rgba(99, 22, 51, 0.1);
}

.tarjeta-item-box.no-disponible {
    display: none;
}

.tarjeta-item-box img,
.imagen-item-vacia {
    width: 82px;
    height: 82px;
    grid-row: span 2;
    border-radius: 15px;
    object-fit: cover;
}

.imagen-item-vacia {
    display: grid;
    place-items: center;
    background:
        linear-gradient(
            135deg,
            #f2d0dc,
            #faecef
        );
    color: #782143;
    font-family: Georgia, serif;
    font-size: 1.4rem;
    font-weight: 700;
}

.informacion-item-box h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #501326;
}

.informacion-item-box p {
    margin: 0;
    color: #826b73;
    font-size: 0.86rem;
    line-height: 1.4;
}

.informacion-item-box small {
    display: inline-block;
    margin-top: 5px;
    color: #9b3159;
    font-weight: 700;
}

.selector-cantidad-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.selector-cantidad-box button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #711c3d;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
}

.selector-cantidad-box button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

.selector-cantidad-box input {
    width: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #501326;
    text-align: center;
    font-size: 1rem;
    font-weight: 800;
    appearance: textfield;
}

.selector-cantidad-box input::-webkit-outer-spin-button,
.selector-cantidad-box input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.grilla-datos-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.campo-ancho-completo {
    grid-column: 1 / -1;
}

.campo-mensaje-tortita[hidden] {
    display: none;
}

.resumen-box {
    position: sticky;
    bottom: 18px;
    z-index: 20;
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr)
        minmax(180px, 1fr)
        auto;
    gap: 20px;
    padding: 20px 24px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background: rgba(78, 13, 37, 0.96);
    box-shadow: 0 18px 45px rgba(51, 7, 24, 0.25);
    color: #ffffff;
    backdrop-filter: blur(12px);
}

.resumen-box div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resumen-box span {
    color: #e8cbd5;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.resumen-box strong {
    font-size: 1.2rem;
}

.resumen-box .boton-enviar-personalizado {
    width: auto;
    min-width: 250px;
    margin: 0;
}

.pagina-box .errorlist {
    padding: 10px 14px;
    margin: 8px 0 0;
    list-style: none;
    border-radius: 10px;
    background: #fde5e5;
    color: #9a2020;
    font-size: 0.9rem;
}

@media (max-width: 992px) {
    .grilla-tamanos-box,
    .grilla-items-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resumen-box {
        grid-template-columns: 1fr 1fr;
    }

    .resumen-box .boton-enviar-personalizado {
        width: 100%;
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .hero-box {
        padding: 52px 0 42px;
    }

    .seccion-armar-box {
        padding: 34px 0 65px;
    }

    .paso-box {
        padding: 22px 16px;
        border-radius: 20px;
    }

    .encabezado-paso-box {
        align-items: flex-start;
        gap: 13px;
    }

    .numero-paso-box {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .grilla-tamanos-box,
    .grilla-items-box,
    .grilla-datos-box {
        grid-template-columns: 1fr;
    }

    .tarjeta-tamano-box {
        min-height: 230px;
    }

    .cabecera-categoria-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .tarjeta-item-box {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .tarjeta-item-box img,
    .imagen-item-vacia {
        width: 70px;
        height: 70px;
    }

    .resumen-box {
        position: static;
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .resumen-box .boton-enviar-personalizado {
        min-width: 0;
        grid-column: auto;
    }
}
/* Producto elegido dentro del box */
.tarjeta-item-box.seleccionado {
    border-color: #8b1e46;
    background: #fff4f7;
    box-shadow: 0 8px 24px rgba(99, 22, 51, 0.12);
}

/* Botones con mejor respuesta visual */
.selector-cantidad-box button {
    cursor: pointer;
    transition:
        transform 0.15s ease,
        background-color 0.15s ease;
}

.selector-cantidad-box button:hover:not(:disabled) {
    transform: scale(1.08);
    background: #8f2850;
}

.selector-cantidad-box button:disabled {
    cursor: not-allowed;
    background: #d7b9c4;
    opacity: 0.65;
}
/* ==================================================
   NUEVA NAVEGACIÓN PRINCIPAL
================================================== */

.navegacion-contenedor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.navegacion-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.navegacion-principal .boton-navegacion {
    padding: 10px 18px;
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.navegacion-principal .boton-navegacion:hover {
    color: var(--bordo-oscuro);
    background-color: var(--rosa);
    transform: translateY(-1px);
}

.navegacion-secundaria {
    display: flex;
    align-items: center;
    gap: 14px;
}

.enlace-opiniones {
    color: #f5e7ec;
    font-size: 13px;
    text-decoration: none;
}

.enlace-opiniones:hover {
    color: var(--rosa);
}

.buscador-productos {
    width: 150px;
    padding: 8px 14px;
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border: 2px solid transparent;
    border-radius: 25px;
    font-size: 13px;
    outline: none;
}

.buscador-productos::placeholder {
    color: #8b6b76;
}

.buscador-productos:focus {
    border-color: var(--rosa);
}


/* Navegación en tablet y celular */

@media (max-width: 991px) {

    .navegacion-contenedor {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .navbar-brand {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .navegacion-principal {
        width: 100%;
        gap: 8px;
    }

    .navegacion-principal .boton-navegacion {
        flex: 1;
        padding: 9px 10px;
        font-size: 13px;
    }

    .navegacion-secundaria {
        width: 100%;
        justify-content: center;
    }

    .buscador-productos {
        width: min(210px, 58vw);
    }
}


@media (max-width: 576px) {

    .navegacion-principal .boton-navegacion {
        padding: 8px 6px;
        font-size: 11px;
        line-height: 1.2;
    }

    .enlace-opiniones {
        font-size: 12px;
    }

    .buscador-productos {
        padding: 7px 12px;
        font-size: 12px;
    }
}
#catalogo {
    scroll-margin-top: 120px;
}
/* ==================================================
   CONTROLES PARA AGREGAR PRODUCTOS AL CARRITO
================================================== */


.selector-producto-carrito {
    margin-top: 0;
    padding-top: 18px;
}

.selector-producto-carrito label,
.cantidad-producto-carrito label {
    display: block;
    margin-bottom: 6px;
    color: var(--bordo-oscuro);
    font-size: 13px;
    font-weight: bold;
}

.selector-tamano-carrito {
    width: 100%;
    padding: 10px 12px;
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border: 1px solid rgba(86, 17, 38, 0.24);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
}

.selector-tamano-carrito:focus {
    border-color: var(--bordo);
    box-shadow: 0 0 0 3px rgba(122, 40, 72, 0.12);
}

.precio-unico-producto {
    margin-top: 0;
    padding-top: 18px;
}

.acciones-producto-carrito {
    display: grid;
    grid-template-columns: 82px 1fr;
    align-items: end;
    gap: 10px;
    margin-top: 14px;
}

.cantidad-producto-carrito input {
    width: 100%;
    padding: 9px 8px;
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border: 1px solid rgba(86, 17, 38, 0.24);
    border-radius: 10px;
    text-align: center;
    outline: none;
}

.cantidad-producto-carrito input:focus {
    border-color: var(--bordo);
    box-shadow: 0 0 0 3px rgba(122, 40, 72, 0.12);
}

.boton-agregar-carrito {
    min-height: 42px;
    padding: 9px 12px;
    color: var(--blanco);
    background-color: var(--bordo-oscuro);
    border: 0;
    border-radius: 25px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.boton-agregar-carrito:hover {
    background-color: var(--bordo);
    transform: translateY(-1px);
}

.mensaje-agregado-carrito {
    min-height: 20px;
    margin: 8px 0 0;
    color: #257a43;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

@media (max-width: 600px) {

    .acciones-producto-carrito {
        grid-template-columns: 90px 1fr;
    }

    .boton-agregar-carrito {
        font-size: 14px;
    }
}
/* ==================================================
   ALINEACIÓN DE TARJETAS DEL CATÁLOGO
================================================== */

.carrusel-catalogo {
    align-items: stretch;
}

.item-catalogo {
    display: flex;
    align-self: stretch;
}

.item-catalogo .tarjeta-producto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 100%;
}

.item-catalogo .contenido-producto {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.item-catalogo .contenido-producto >
.mensaje-agregado-carrito {
    flex: 0 0 20px;
    min-height: 20px;
}

.item-catalogo .contenido-producto >
p:not(.mensaje-agregado-carrito) {
    flex: 1 1 auto;
}
/* ==================================================
   CARRITO LATERAL
================================================== */

.boton-abrir-carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--bordo-oscuro);
    background-color: var(--blanco);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.boton-abrir-carrito:hover {
    background-color: var(--rosa);
    transform: translateY(-1px);
}

.icono-carrito {
    font-size: 21px;
    line-height: 1;
}

.contador-carrito {
    position: absolute;
    top: -5px;
    right: -5px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 21px;
    height: 21px;
    padding: 0 5px;

    color: var(--blanco);
    background-color: #d6295f;
    border: 2px solid var(--bordo-oscuro);
    border-radius: 20px;

    font-size: 11px;
    font-weight: bold;
}


.fondo-carrito {
    position: fixed;
    inset: 0;
    z-index: 2990;

    background-color: rgba(34, 11, 20, 0.58);
    opacity: 0;

    transition: opacity 0.25s ease;
}

.fondo-carrito.fondo-carrito-visible {
    opacity: 1;
}


.panel-carrito {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3000;

    width: min(480px, 100%);
    height: 100dvh;

    color: #432833;
    background-color: #fffaf6;
    box-shadow: -15px 0 45px rgba(39, 11, 22, 0.24);

    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.panel-carrito.panel-carrito-abierto {
    transform: translateX(0);
}

body.carrito-abierto {
    overflow: hidden;
}


.encabezado-panel-carrito {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 22px 25px;

    color: var(--blanco);
    background-color: var(--bordo-oscuro);
}

.encabezado-panel-carrito p {
    margin: 0 0 3px;
    color: var(--rosa);
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.encabezado-panel-carrito h2 {
    margin: 0;
    color: var(--blanco);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
}

.boton-cerrar-carrito {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    padding: 0;

    color: var(--blanco);
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.boton-cerrar-carrito:hover {
    background-color: rgba(255, 255, 255, 0.22);
}


.contenido-panel-carrito {
    height: calc(100dvh - 91px);
    padding: 24px;
    overflow-y: auto;
}


.carrito-vacio {
    padding: 35px 20px;
    background-color: var(--blanco);
    border: 1px dashed rgba(86, 17, 38, 0.28);
    border-radius: 16px;
    text-align: center;
}

.carrito-vacio h3 {
    margin-bottom: 10px;
    color: var(--bordo-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.carrito-vacio p {
    margin-bottom: 20px;
    color: var(--gris);
}

.boton-volver-catalogo {
    padding: 10px 20px;
    color: var(--blanco);
    background-color: var(--bordo);
    border: 0;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
}


.lista-carrito {
    display: grid;
    gap: 12px;
}

.item-carrito {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;

    padding: 16px;

    background-color: var(--blanco);
    border: 1px solid rgba(86, 17, 38, 0.12);
    border-radius: 14px;
}

.informacion-item-carrito h3 {
    margin: 0 0 5px;
    color: var(--bordo-oscuro);
    font-size: 17px;
}

.informacion-item-carrito p {
    margin: 0 0 4px;
    color: var(--gris);
    font-size: 13px;
}

.informacion-item-carrito strong {
    color: var(--bordo);
    font-size: 15px;
}

.acciones-item-carrito {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.acciones-item-carrito button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 31px;
    height: 31px;
    padding: 0 8px;

    color: var(--bordo-oscuro);
    background-color: var(--rosa-claro);
    border: 0;
    border-radius: 8px;

    font-weight: bold;
    cursor: pointer;
}

.acciones-item-carrito .eliminar-item-carrito {
    color: #a11f41;
    background-color: #fde8ee;
}


.total-carrito {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 18px;
    padding: 18px 4px;

    border-top: 2px solid rgba(86, 17, 38, 0.15);
    border-bottom: 2px solid rgba(86, 17, 38, 0.15);
}

.total-carrito span {
    color: var(--bordo-oscuro);
    font-weight: bold;
}

.total-carrito strong {
    color: var(--bordo);
    font-size: 24px;
}


.datos-finales-carrito {
    margin-top: 28px;
    padding-top: 25px;
    border-top: 1px solid rgba(86, 17, 38, 0.15);
}

.datos-finales-carrito > h3 {
    margin-bottom: 7px;
    color: var(--bordo-oscuro);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
}

.datos-finales-carrito > p {
    margin-bottom: 22px;
    color: var(--gris);
    font-size: 14px;
}


.campo-carrito {
    margin-bottom: 17px;
}

.campo-carrito label {
    display: block;
    margin-bottom: 6px;
    color: var(--bordo-oscuro);
    font-size: 14px;
    font-weight: bold;
}

.campo-carrito .form-control {
    width: 100%;
    padding: 11px 13px;

    color: #432833;
    background-color: var(--blanco);
    border: 1px solid rgba(86, 17, 38, 0.2);
    border-radius: 10px;
}

.campo-carrito .form-control:focus {
    border-color: var(--bordo);
    box-shadow: 0 0 0 3px rgba(122, 40, 72, 0.12);
}

.error-formulario {
    margin: 5px 0 0;
    color: #b21f46;
    font-size: 12px;
}


.boton-finalizar-carrito {
    width: 100%;
    padding: 13px 18px;

    color: var(--blanco);
    background-color: #22c969;
    border: 0;
    border-radius: 28px;

    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.boton-finalizar-carrito:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.aviso-final-carrito {
    margin: 11px 0 0;
    color: var(--gris);
    font-size: 12px;
    text-align: center;
}


@media (max-width: 991px) {

    .navegacion-secundaria {
        flex-wrap: wrap;
    }

    .boton-abrir-carrito {
        width: 42px;
        height: 42px;
    }
}


@media (max-width: 576px) {

    .panel-carrito {
        width: 100%;
    }

    .encabezado-panel-carrito {
        padding: 18px 20px;
    }

    .contenido-panel-carrito {
        height: calc(100dvh - 83px);
        padding: 18px;
    }
}
.mensaje-agregado-carrito.mensaje-error-carrito {
    color: #b21f46;
}
.pagina-redireccion-whatsapp {
    display: grid;
    min-height: 100vh;
    margin: 0;
    padding: 25px;
    place-items: center;
    background-color: #fff8f3;
}

.mensaje-redireccion-whatsapp {
    width: min(520px, 100%);
    padding: 40px 30px;
    background-color: var(--blanco);
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(86, 17, 38, 0.14);
    text-align: center;
}

.mensaje-redireccion-whatsapp h1 {
    margin-bottom: 15px;
    color: var(--bordo-oscuro);
    font-family: Georgia, "Times New Roman", serif;
}

.mensaje-redireccion-whatsapp p {
    margin-bottom: 25px;
    color: var(--gris);
}

.mensaje-redireccion-whatsapp a {
    display: inline-block;
    padding: 13px 24px;
    color: var(--blanco);
    background-color: #22c969;
    border-radius: 28px;
    font-weight: bold;
    text-decoration: none;
}
/* ==================================================
   AVISO INICIAL ANTES DE PEDIR
================================================== */

.fondo-aviso-pedidos {
    position: fixed;
    inset: 0;
    z-index: 4000;

    display: grid;
    padding: 18px;
    place-items: center;

    background-color: rgba(39, 11, 22, 0.67);
    backdrop-filter: blur(3px);

    opacity: 0;
    transition: opacity 0.25s ease;
}

.fondo-aviso-pedidos.aviso-pedidos-visible {
    opacity: 1;
}

.aviso-pedidos {
    width: min(650px, 100%);
    max-height: calc(100dvh - 36px);
    padding: 24px 26px;

    overflow-y: auto;

    background-color: #fffaf6;
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(39, 11, 22, 0.3);

    transform: translateY(18px) scale(0.98);
    transition: transform 0.25s ease;
}

.aviso-pedidos-visible .aviso-pedidos {
    transform: translateY(0) scale(1);
}


/* ENCABEZADO */

.encabezado-aviso-pedidos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 16px;
}

.encabezado-aviso-pedidos h2 {
    margin: 0;

    color: var(--bordo-oscuro);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    line-height: 1.1;
}


/* BOTÓN CERRAR */

.cerrar-aviso-pedidos {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    color: var(--bordo-oscuro);
    background-color: transparent;

    border: 2px solid var(--bordo-oscuro);
    border-radius: 50%;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}


/* LISTA DE AVISOS */

.lista-aviso-pedidos {
    display: grid;
    gap: 10px;
}

.item-aviso-pedidos {
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 14px;

    padding: 13px 16px;

    background-color: #f8dce5;
    border-radius: 15px;
}


/* CÍRCULOS 24H / 7/7 / 50% / WA */

.icono-aviso-pedidos {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    color: var(--blanco);
    background-color: var(--bordo);
    border-radius: 50%;

    font-size: 12px;
    font-weight: bold;
}


/* TEXTO */

.item-aviso-pedidos p {
    margin: 0;

    color: #572038;

    font-size: 14px;
    line-height: 1.42;
}

.item-aviso-pedidos a {
    color: var(--bordo);
    font-weight: bold;
}


/* BOTÓN IR AL CATÁLOGO */

.boton-ir-catalogo-aviso {
    width: 100%;

    margin-top: 16px;
    padding: 11px 18px;

    color: var(--blanco);
    background-color: var(--bordo-oscuro);

    border: 0;
    border-radius: 28px;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}

.boton-ir-catalogo-aviso:hover {
    background-color: var(--bordo);
}


/* ==================================================
   CELULAR
================================================== */

@media (max-width: 576px) {

    .fondo-aviso-pedidos {
        padding: 8px;
    }

    .aviso-pedidos {
        max-height: calc(100dvh - 16px);
        padding: 16px 14px;

        border-radius: 17px;
    }

    .encabezado-aviso-pedidos {
        margin-bottom: 12px;
    }

    .encabezado-aviso-pedidos h2 {
        font-size: 29px;
    }

    .cerrar-aviso-pedidos {
        width: 38px;
        height: 38px;

        border-width: 1px;

        font-size: 24px;
    }

    .lista-aviso-pedidos {
        gap: 8px;
    }

    .item-aviso-pedidos {
        grid-template-columns: 41px 1fr;

        gap: 10px;
        padding: 11px 12px;

        border-radius: 13px;
    }

    .icono-aviso-pedidos {
        width: 39px;
        height: 39px;

        font-size: 10px;
    }

    .item-aviso-pedidos p {
        font-size: 13px;
        line-height: 1.38;
    }

    .boton-ir-catalogo-aviso {
        margin-top: 13px;
        padding: 11px 18px;

        font-size: 14px;
    }
}
/* Botones que finalizan pedidos por WhatsApp */

.boton-enviar-personalizado.boton-finalizar-whatsapp {
    color: var(--blanco);
    background-color: #22c969;
}

.boton-enviar-personalizado.boton-finalizar-whatsapp:hover {
    color: var(--blanco);
    background-color: #18ad58;
}

.boton-enviar-personalizado.boton-finalizar-whatsapp:disabled {
    cursor: wait;
    opacity: 0.7;
}
/* =========================================
   PORTADAS DE PÁGINAS INTERNAS
========================================= */

.hero-personalizado.hero-con-imagen,
.hero-box.hero-con-imagen {
    display: flex;
    align-items: center;
    min-height: 500px;
    color: #ffffff;
    background-image:
        linear-gradient(
            rgba(62, 10, 29, 0.68),
            rgba(62, 10, 29, 0.68)
        ),
        var(--imagen-portada),
        var(--imagen-portada);
    background-color: #5c102c;
    background-position: center;
    background-size: cover, contain, cover;
    background-repeat: no-repeat;
}

.hero-personalizado.hero-con-imagen h1,
.hero-box.hero-con-imagen h1,
.hero-personalizado.hero-con-imagen .subtitulo-seccion,
.hero-box.hero-con-imagen .subtitulo-seccion,
.hero-personalizado.hero-con-imagen .descripcion-hero-personalizado,
.hero-box.hero-con-imagen .descripcion-hero-box {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
    .hero-personalizado.hero-con-imagen,
    .hero-box.hero-con-imagen {
        min-height: 430px;
        background-position: center;
        background-size: cover, contain, cover;
    }
}
/* =====================================================
   PANEL LATERAL DE SABORES - SHOTS
===================================================== */

.fondo-sabores {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(45, 10, 26, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.fondo-sabores.fondo-sabores-visible {
    opacity: 1;
}

.panel-sabores {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;

    width: min(480px, 92vw);
    height: 100vh;

    background: #fffaf7;

    transform: translateX(100%);
    transition: transform 0.25s ease;

    display: flex;
    flex-direction: column;

    box-shadow: -10px 0 35px rgba(45, 10, 26, 0.18);
}

.panel-sabores.panel-sabores-abierto {
    transform: translateX(0);
}

body.selector-sabores-abierto {
    overflow: hidden;
}


/* ENCABEZADO */

.encabezado-panel-sabores {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding: 28px 30px 22px;

    border-bottom: 1px solid #ead8dd;
}

.subtitulo-panel-sabores {
    margin: 0 0 4px;

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #9b3155;
}

.encabezado-panel-sabores h2 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 2rem;

    color: #5b102c;
}

.precio-panel-sabores {
    margin: 6px 0 0;

    font-weight: 700;
    color: #9b3155;
}

.boton-cerrar-sabores {
    width: 42px;
    height: 42px;

    border: 1px solid #d8b8c2;
    border-radius: 50%;

    background: transparent;
    color: #5b102c;

    font-size: 1.7rem;
    line-height: 1;

    cursor: pointer;
}


/* CONTENIDO */

.contenido-panel-sabores {
    flex: 1;
    overflow-y: auto;

    padding: 24px 30px;
}

.contenido-panel-sabores h3 {
    margin: 0 0 8px;

    font-size: 1.15rem;
    color: #5b102c;
}

.ayuda-panel-sabores {
    margin: 0 0 24px;

    color: #806b72;
    line-height: 1.5;
}


/* FILAS DE SABORES */

.lista-sabores-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fila-sabor-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    min-height: 48px;
}

.nombre-sabor-panel {
    flex: 1;

    font-size: 0.98rem;
    line-height: 1.3;

    color: #5b102c;
}

.contador-sabor-panel {
    flex-shrink: 0;

    display: grid;
    grid-template-columns: 34px 38px 34px;
    align-items: center;

    border: 1px solid #e7c3ce;
    border-radius: 12px;

    overflow: hidden;
}

.contador-sabor-panel button {
    height: 36px;

    border: 0;
    background: transparent;

    color: #9b3155;
    font-size: 1.2rem;

    cursor: pointer;
}

.contador-sabor-panel button:hover {
    background: #f9e8ee;
}

.contador-sabor-panel span {
    text-align: center;

    font-weight: 700;
    color: #5b102c;
}


/* PIE FIJO */

.pie-panel-sabores {
    flex-shrink: 0;

    padding: 18px 30px 24px;

    background: #fffaf7;
    border-top: 1px solid #ead8dd;
}

.resumen-panel-sabores {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;

    color: #5b102c;
}

.resumen-panel-sabores > strong {
    font-size: 1.3rem;
    color: #9b3155;
}

.boton-agregar-shots {
    width: 100%;
    min-height: 52px;

    border: 0;
    border-radius: 15px;

    background: #5b102c;
    color: white;

    font-weight: 700;
    font-size: 1rem;

    cursor: pointer;
}

.boton-agregar-shots:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* CELULAR */

@media (max-width: 600px) {

    .panel-sabores {
        width: 100%;
    }

    .encabezado-panel-sabores {
        padding: 22px 20px 18px;
    }

    .contenido-panel-sabores {
        padding: 20px;
    }

    .pie-panel-sabores {
        padding: 16px 20px 20px;
    }
}
/* Ocultar WhatsApp flotante mientras está abierto
   el selector lateral de sabores */

body.selector-sabores-abierto .boton-whatsapp {
    display: none !important;
}
/* =====================================================
   BOTÓN ELEGIR SABORES - SHOTS
===================================================== */

.boton-elegir-sabores {
    width: 100%;
    min-height: 48px;

    padding: 12px 20px;

    border: 1px solid #8f2348;
    border-radius: 14px;

    background: #ffffff;
    color: #6b1633;

    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.boton-elegir-sabores:hover {
    background: #6b1633;
    color: #ffffff;

    box-shadow: 0 6px 16px rgba(91, 16, 44, 0.15);
}

.boton-elegir-sabores:active {
    transform: scale(0.98);
}
/* =====================================================
   SELECTOR DE SABOR - BUDINES
===================================================== */

.selector-sabor-carrito {
    width: 100%;
    min-height: 48px;

    padding: 10px 42px 10px 16px;

    border: 1px solid #dfc3cc;
    border-radius: 12px;

    background-color: #ffffff;
    color: #5b102c;

    font-family: inherit;
    font-size: 0.95rem;

    cursor: pointer;
    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.selector-sabor-carrito:hover {
    border-color: #b96b84;
}

.selector-sabor-carrito:focus {
    border-color: #8f2348;
    box-shadow: 0 0 0 3px rgba(143, 35, 72, 0.10);
}
/* ==================================================
   AJUSTE FINAL DE ESCALA - ESCRITORIO
   Mantiene intacta la experiencia responsive existente.
================================================== */
@media (min-width: 993px) {
    /* Ritmo general */
    .seccion-book,
    .seccion-como-pedir,
    .seccion-pedido,
    .seccion-formulario-personalizado {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    /* Book */
    .titulo-book {
        max-width: 680px;
        margin-bottom: 34px;
    }

    .titulo-book h2 {
        font-size: clamp(38px, 4vw, 52px);
    }

    .titulo-book > p:last-child {
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.5;
    }

    /* Cómo pedir */
    .titulo-como-pedir {
        margin-bottom: 34px;
    }

    .titulo-como-pedir h2 {
        font-size: clamp(38px, 4vw, 52px);
    }

    .paso {
        padding: 26px;
    }

    .paso span {
        margin-bottom: 18px;
        font-size: 36px;
    }

    .paso h3 {
        font-size: 23px;
    }

    .paso p {
        font-size: 15px;
        line-height: 1.55;
    }

    /* Pedido principal */
    .seccion-pedido h2 {
        font-size: clamp(38px, 4vw, 52px);
    }

    .descripcion-pedido {
        margin: 18px 0 25px;
        font-size: 16px;
        line-height: 1.55;
    }

    .datos-pedido p {
        padding: 13px 0;
        font-size: 15px;
    }

    .contenedor-formulario {
        padding: 30px;
    }

    form p {
        margin-bottom: 15px;
    }

    /* Footer principal */
    .pie-pagina {
        padding: 45px 0 20px;
    }

    .pie-pagina h2 {
        margin-bottom: 12px;
        font-size: 27px;
    }

    .pie-pagina h3 {
        margin-bottom: 12px;
        font-size: 16px;
    }

    .pie-pagina p {
        font-size: 14px;
        line-height: 1.55;
    }

    .pie-pagina hr {
        margin-top: 28px;
    }

    /* Página de tortas personalizadas */
    .navbar-personalizada {
        padding: 14px 0;
    }

    .marca-personalizada {
        font-size: 27px;
    }

    .volver-inicio {
        padding: 10px 19px;
        font-size: 14px;
    }

    .hero-personalizado {
        padding: 68px 0 62px;
    }

    .hero-personalizado h1 {
        max-width: 900px;
        margin-bottom: 18px;
        font-size: clamp(44px, 5.5vw, 68px);
    }

    .descripcion-hero-personalizado {
        max-width: 700px;
        font-size: 17px;
        line-height: 1.55;
    }

    .distribucion-personalizada {
        gap: 48px;
    }

    .informacion-personalizada {
        top: 105px;
    }

    .informacion-personalizada h2 {
        margin-bottom: 18px;
        font-size: clamp(36px, 4vw, 50px);
    }

    .informacion-personalizada > p {
        margin-bottom: 25px;
        font-size: 16px;
        line-height: 1.55;
    }

    .dato-personalizado {
        padding: 15px 0;
    }

    .tarjeta-formulario-personalizado {
        padding: 36px;
        border-radius: 20px;
    }

    .tarjeta-formulario-personalizado > h2 {
        font-size: 34px;
    }

    .campos-obligatorios {
        margin-bottom: 25px;
    }

    .campo-personalizado {
        margin-bottom: 20px;
    }

    .campo-personalizado .form-control,
    .campo-personalizado .form-select {
        min-height: 50px;
        padding: 11px 14px;
        font-size: 15px;
    }

    .footer-personalizado {
        padding: 40px 0;
    }

    .footer-personalizado strong {
        font-size: 26px;
    }

    /* Página para armar box */
    .hero-box {
        padding-top: 58px;
        padding-bottom: 48px;
    }

    .hero-box h1 {
        font-size: clamp(46px, 5.5vw, 72px);
    }

    .seccion-armar-box {
        padding-top: 60px;
        padding-bottom: 70px;
    }

    .encabezado-paso-box h2 {
        font-size: clamp(32px, 3.5vw, 46px);
    }

    .tarjeta-tamano-box {
        min-height: 240px;
        padding: 22px;
    }

    /* Carrusel de producto: acompaña la escala del catálogo */
    .carrusel-producto {
        height: 320px;
    }

    /* Controles flotantes */
    .boton-whatsapp {
        right: 20px;
        bottom: 20px;
        padding: 12px 18px;
        font-size: 14px;
    }
}
/* =========================================
   AJUSTE FINAL - CARRITO MÁS COMPACTO
========================================= */

/* Tarjetas de cada producto */
.item-carrito {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Reduce un poco el espacio entre productos */
.lista-carrito {
    gap: 14px;
}


/* =========================================
   TOTAL ESTIMADO
========================================= */

.total-carrito,
.resumen-carrito {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 576px) {

    .item-carrito {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .lista-carrito {
        gap: 12px;
    }

    .total-carrito,
    .resumen-carrito {
        padding-top: 16px;
        padding-bottom: 16px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
}
/* ==================================================
   CATÁLOGO - TARJETAS COMPACTAS
================================================== */

.carrusel-catalogo {
    align-items: flex-start;
}

.item-catalogo {
    align-self: flex-start;
}

.item-catalogo .tarjeta-producto {
    height: auto;
    min-height: 0;
}

/* FOTO MÁS GRANDE */
.item-catalogo .contenedor-imagen-producto,
.item-catalogo .carrusel-producto {
    height: 210px;
}

/* La foto llena el espacio sin deformarse */
.item-catalogo .contenedor-imagen-producto img,
.item-catalogo .carrusel-producto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* CONTENIDO */
.item-catalogo .contenido-producto {
    display: flex;
    flex: none;
    flex-direction: column;

    min-height: 0;
    padding: 12px 15px 14px;
}

/* TÍTULO */
.item-catalogo .tarjeta-producto h3 {
    min-height: 40px;
    margin: 0 0 5px;

    font-size: 18px;
    line-height: 1.08;
}

/* DESCRIPCIÓN */
.item-catalogo .tarjeta-producto h3 + p {
    flex: none;

    height: auto;
    min-height: 42px;

    margin: 0 0 7px;

    font-size: 11px;
    line-height: 1.3;
}

/* Evita que la descripción se estire para llenar la tarjeta */
.item-catalogo .contenido-producto >
p:not(.mensaje-agregado-carrito) {
    flex: none;
}

/* SELECTORES */
.item-catalogo .selector-producto-carrito {
    margin: 0 0 5px;
}

.item-catalogo .selector-producto-carrito label,
.item-catalogo .cantidad-producto-carrito label {
    margin-bottom: 3px;
    font-size: 12px;
}

.item-catalogo .selector-tamano-carrito,
.item-catalogo .selector-sabor-carrito {
    min-height: 36px;
    padding: 6px 9px;

    font-size: 12px;
}

/* PRECIO */
.item-catalogo .precio-unico-producto {
    margin: 0 0 7px;
    padding: 0;
}

.item-catalogo .precio-unico-producto strong {
    font-size: 20px;
}

/* CANTIDAD + BOTÓN */
.item-catalogo .acciones-producto-carrito {
    grid-template-columns: 62px 1fr;
    gap: 7px;
    margin-top: 3px;
}

.item-catalogo .cantidad-producto-carrito input {
    min-height: 36px;
    padding: 5px;

    font-size: 13px;
}

.item-catalogo .boton-agregar-carrito {
    min-height: 36px;
    padding: 6px 8px;

    font-size: 11.5px;
}

/* SHOTS */
.item-catalogo .boton-elegir-sabores {
    margin-top: 4px;
    padding: 8px 12px;

    font-size: 12px;
}

/* Mensaje que aparece al agregar */
.item-catalogo .mensaje-agregado-carrito {
    min-height: 0;
    margin: 3px 0 0;
}


/* ==================================================
   CELULAR - NO COMPACTAR TANTO
================================================== */

@media (max-width: 600px) {

    .item-catalogo .contenedor-imagen-producto,
    .item-catalogo .carrusel-producto {
        height: 280px;
    }

    .item-catalogo .contenido-producto {
        padding: 18px;
    }

    .item-catalogo .tarjeta-producto h3 {
        min-height: auto;
        font-size: 22px;
    }

    .item-catalogo .tarjeta-producto h3 + p {
        min-height: auto;
        font-size: 14px;
    }
}