:root {
    --color-bg:      #F7F5F1; /* marfil suave, fondo general */
    --color-dark:    #2C3A2E; /* verde follaje, header/footer y textos fuertes */
    --color-accent:  #A9647A; /* rosa apagado, detalles y hover */
    --color-gold:    #C9A365; /* dorado tenue, acentos puntuales (botones, focus) */
    --color-text:    #2B2B28; /* texto principal */

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Source Sans 3', Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    /* "Sticky footer": la página ocupa como mínimo toda la altura de
       la pantalla, en columna. El <main> crece para llenar el espacio
       sobrante (flex: 1), así el footer siempre queda pegado abajo,
       tenga la página mucho o poco contenido. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Red de seguridad: cualquier desborde horizontal accidental (de
       cualquier elemento, por cualquier motivo) queda oculto en vez
       de generar una barra de scroll horizontal que corre toda la
       página de costado. */
    overflow-x: hidden;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ---------- Header ---------- */
.site-header {
    background: var(--color-dark);
    flex-shrink: 0;
}

.site-header .container {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

.site-header__fila-superior {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.nav-superior {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.nav-superior a {
    margin-left: 0 !important;
}

@media (max-width: 700px) {
    .site-header__fila-superior {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .nav-superior {
        justify-content: center;
    }
}

.nav-inferior {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 1.6rem;
    margin-top: 0.9rem;
}

.nav-inferior a {
    margin-left: 0 !important;
}

/* En pantallas angostas, el centrado absoluto puede pisar el logo/
   botones — ahí el buscador pasa a ir debajo, ocupando todo el ancho. */
@media (max-width: 780px) {
    .buscador-header {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 0.8rem;
    }
}

.site-header .logo {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--color-bg);
    text-decoration: none;
}

/* ---------- Barra de búsqueda del header ---------- */
.buscador-header {
    display: flex;
    align-items: center;
    width: 320px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.3rem 0.3rem 0.3rem 1rem;
}

.buscador-header input[type="search"] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
}

.buscador-header input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.buscador-header button {
    background: var(--color-gold);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.buscador-header button:hover {
    background: var(--color-accent);
    color: #fff;
}

@media (max-width: 640px) {
    .site-header__acciones-superior {
        width: 100%;
    }

    .buscador-header {
        width: 100%;
    }
}

.site-header nav a {
    position: relative;
    color: var(--color-bg);
    text-decoration: none;
    margin-left: 1.8rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding-bottom: 5px;
    transition: color 0.25s ease;
}

.site-header nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1.5px;
    background: var(--color-gold);
    transition: width 0.25s ease;
}

.site-header nav a:hover,
.site-header nav a:focus {
    color: var(--color-gold);
}

.site-header nav a:hover::after,
.site-header nav a:focus::after {
    width: 100%;
}

/* ---------- Botones del nav (Ingresar / Salir) ----------
   Se diferencian a propósito del resto de los links: no tienen el
   efecto de subrayado, y sí un fondo/borde propio, para llamar la
   atención más rápido que un link de texto plano. */
.nav-boton {
    padding: 0.4rem 1.1rem !important;
    border-radius: 999px;
    margin-left: 1.2rem !important;
}

.nav-boton::after {
    display: none;
}

.nav-boton--primario {
    background: #3e5642;
    color: white !important;
    font-weight: 600;
}

.nav-boton--primario:hover,
.nav-boton--primario:focus {
    background: #426b48;
    color: #fff !important;
}
.nav-boton--primario:active {
        background: #2c4830;
}

.nav-boton--secundario {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--color-bg) !important;
}

.nav-boton--secundario:hover,
.nav-boton--secundario:focus {
    border-color: var(--color-gold);
    color: var(--color-gold) !important;
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- Contenido principal ---------- */
main.container {
    /* flex: 1 hace que este <main> "empuje" el footer hacia abajo,
       ocupando todo el espacio sobrante de la pantalla (ver sticky
       footer en body, arriba). width: 100% explícito evita cualquier
       ambigüedad de cómo el navegador calcula el "stretch" por
       defecto de un ítem flex, para que el centrado (margin: 0 auto,
       heredado de .container) sea siempre consistente. */
    flex: 1 0 auto;
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

.hero p {
    font-size: 1.1rem;
    max-width: 60ch;
}

.hero-cta {
    display: inline-block;
    margin-top: 1.2rem;
    background: var(--color-gold);
    color: var(--color-dark);
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
}

.hero-cta:hover {
    background: var(--color-accent);
    color: #fff;
}

.destacados {
    margin-top: 3rem;
}

.destacados h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-dark);
    margin-bottom: 1.2rem;
}

/* ---------- Tabla reutilizable (panel de admin + Mis Pedidos) ---------- */
.admin-tabla-wrapper {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #ece7dc;
    border-radius: 10px;
}

.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-tabla th,
.admin-tabla td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid #ece7dc;
    vertical-align: top;
    white-space: nowrap;
}

.admin-tabla th {
    background: #faf8f3;
    font-weight: 700;
    color: var(--color-dark);
}

.admin-detalle-items {
    list-style: none;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #555;
    white-space: normal;
}

.admin-notas {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #777;
    white-space: normal;
}

/* Selector editable de estado (panel de admin) */
.admin-select-estado {
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid #ddd8cd;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Etiqueta de solo lectura (página "Mis pedidos" del cliente) */
.badge-estado {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Mismos colores para ambas variantes (selector editable y etiqueta fija) */
.admin-select-estado--pendiente,      .badge-estado--pendiente      { background: #fff6db; color: #8a6d00; }
.admin-select-estado--confirmado,     .badge-estado--confirmado     { background: #e2f3e8; color: #1f6d3d; }
.admin-select-estado--en_preparacion, .badge-estado--en_preparacion { background: #e4ecfb; color: #29498c; }
.admin-select-estado--enviado,        .badge-estado--enviado        { background: #ece1fb; color: #5a2f9c; }
.admin-select-estado--entregado,      .badge-estado--entregado      { background: #dcefe6; color: #17694a; }
.admin-select-estado--cancelado,      .badge-estado--cancelado      { background: #fbe2e2; color: #8a2020; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--color-dark);
    color: var(--color-bg);
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 500;
    transition: transform 0.2s ease;
}

.whatsapp-flotante:hover {
    transform: scale(1.08);
}

.whatsapp-flotante svg {
    width: 30px;
    height: 30px;
    fill: #fff;
}

@media (max-width: 500px) {
    .whatsapp-flotante {
        width: 50px;
        height: 50px;
        bottom: 1rem;
        right: 1rem;
    }
    .whatsapp-flotante svg {
        width: 26px;
        height: 26px;
    }
}

/* ---------- Catálogo ---------- */
.catalogo h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.filtros-categoria {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.filtros-categoria a {
    text-decoration: none;
    color: var(--color-dark);
    background: #fff;
    border: 1px solid #ddd8cd;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.9rem;
}

.filtros-categoria a:hover,
.filtros-categoria a.activo {
    background: var(--color-dark);
    color: var(--color-bg);
    border-color: var(--color-dark);
}

.filtros-subcategoria {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -1.2rem 0 2rem;
    padding-left: 0.2rem;
}

#campo-nueva-subcategoria {
    color: rgb(21, 160, 51);
}

.filtros-subcategoria a {
    text-decoration: none;
    color: var(--color-dark);
    background: transparent;
    border: 1px solid #ddd8cd;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    opacity: 0.85;
}

.filtros-subcategoria a:hover,
.filtros-subcategoria a.activo {
    background: #ddd8cd;
    color: var(--color-dark);
    border-color: #ddd8cd;
    opacity: 1;
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.tarjeta-producto {
    background: #fff;
    border: 1px solid #ece7dc;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Sin esto, una foto sin redimensionar (ej. 4000px de ancho) fuerza
       a la tarjeta a crecer más allá de su columna del grid, aunque la
       imagen tenga width:100% — es el mínimo por defecto de los items
       de grid/flex, que usa el tamaño natural del contenido. */
    min-width: 0;
    transition: all 0.25s;
}

.tarjeta-producto:hover {
  transform: translateY(-4px);
  transition: all 0.25s;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.071);
}

.tarjeta-producto img {
    display: block;
    width: 100%;
    max-width: 100%;
      box-shadow: 0 -5px 80px 5px rgba(0, 0, 0, 0.084);
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: white;
    box-sizing: border-box;
}
/* #f4f1ea;*/

.tarjeta-producto__info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tarjeta-producto__categoria {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.tarjeta-producto h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-dark);
}

.tarjeta-producto__precio {
    font-weight: 600;
    color: var(--color-dark);
    margin-top: 0.2rem;
}

.tarjeta-producto__codigo,
.producto-detalle__codigo {
    font-size: 0.78rem;
    color: #888;
    margin-top: -0.1rem;
}

.tarjeta-producto__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tarjeta-producto__acciones {
    padding: 0 1rem 1rem;
}

/* ---------- Detalle de producto ---------- */
.producto-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .producto-detalle {
        grid-template-columns: 1fr;
    }
}

.producto-detalle__galeria {
    /* Mismo motivo que en .tarjeta-producto: sin esto, una foto sin
       redimensionar puede empujar esta columna del grid más ancha que
       su 1fr, sacando la imagen (y el layout) fuera del área visible. */
    min-width: 0;
}

.producto-detalle__imagen-principal {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    /* Mismo criterio que en .tarjeta-producto: "contain" en vez de "cover"
       para que la foto del producto se muestre completa, sin recortar
       partes de la composición. */
    object-fit: contain;
    border-radius: 10px;
    background: white;
    box-sizing: border-box;
}

.producto-detalle__miniaturas {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}

.miniatura {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.65;
}

.miniatura:hover {
    opacity: 1;
}

.miniatura--activa {
    border-color: var(--color-gold);
    opacity: 1;
}

.producto-detalle__info h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-dark);
    margin: 0.3rem 0 0.6rem;
}

.producto-detalle__precio {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.producto-detalle__descripcion {
    margin-bottom: 1.5rem;
    line-height: 1.7;
    color: var(--color-text);
}

.selector-cantidad-agregar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---------- Admin: galería de fotos existentes ---------- */
.admin-galeria-existente {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: -0.4rem;
}

.admin-galeria-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.btn-agregar {
    margin-top: 0.6rem;
    background: var(--color-gold);
    color: var(--color-dark);
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
}

.btn-agregar:hover {
    background: var(--color-accent);
    color: #fff;
}

.sin-resultados {
    color: #666;
}

.precio-oculto {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
}

.precio-oculto a {
    color: var(--color-accent);
    font-style: normal;
    font-weight: 600;
}

.precio-oculto--grande {
    font-size: 1rem;
    margin-top: 0.5rem;
}

/* =========================================================
   Carrusel genérico (usado por el principal y el de categorías)
   ========================================================= */
.carousel {
    position: relative;
}

.carousel-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    scroll-snap-align: start;
    flex-shrink: 0;
}

.carousel-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-flecha:hover {
    background: rgba(0, 0, 0, 0.7);
}

.carousel-flecha--prev { left: 1rem; }
.carousel-flecha--next { right: 1rem; }

.carousel-puntos {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.carousel-punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    padding: 0;
    cursor: pointer;
}

.carousel-punto--activo {
    background: #fff;
}

/* ---------- Carrusel principal (fotos del negocio, a todo el ancho) ---------- */
.hero-carousel {
    /* Técnica para "escapar" del <main class="container"> (ancho máximo
       1100px) sin tener que tocar el layout compartido de las demás
       páginas: centra el elemento en el viewport completo. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    /* El main tiene padding-top: 3rem para separar el contenido del
       header en el resto del sitio — acá lo cancelamos con un margen
       negativo, para que el carrusel quede pegado justo debajo del
       header, sin ese espacio de por medio. */
    margin-top: -3rem;
    margin-right: -50vw;
    margin-bottom: 2.5rem;
}

.hero-carousel .carousel-slide {
    width: 100vw;
    height: 440px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-carousel .carousel-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
}

.hero-carousel .carousel-slide__contenido {
    position: relative;
    z-index: 1;
    max-width: 640px;
    padding: 0 1.5rem;
    text-align: center;
    color: #fff;
}

.hero-carousel .carousel-slide__contenido h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 0.7rem;
}

.hero-carousel .carousel-slide__contenido p {
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}

@media (max-width: 640px) {
    .hero-carousel .carousel-slide {
        height: 360px;
    }
}

/* ---------- Sección de eslogan ---------- */
.slogan-seccion {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 3rem;
    padding: 0 1rem;
}

.slogan-seccion h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--color-dark);
    margin-bottom: 0.8rem;
}

.slogan-seccion p {
    color: #555;
    margin-bottom: 1.3rem;
    line-height: 1.7;
}

/* ---------- Carrusel de categorías ---------- */
.categorias-seccion {
    margin-bottom: 3rem;
}

.categorias-seccion h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--color-dark);
    margin-bottom: 1.2rem;
}

.carousel--categorias .categorias-pagina {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.categoria-card {
    display: block;
    text-decoration: none;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ece7dc;
}

.categoria-card__imagen {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: #eee;
}

.categoria-card__imagen--vacia {
    background: linear-gradient(135deg, var(--color-dark), var(--color-accent));
}

.categoria-card__nombre {
    display: block;
    padding: 0.8rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-dark);
    text-align: center;
}

/* ---------- Badge del carrito (nav) ---------- */
.nav-carrito {
    position: relative;
}

.carrito-badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.2rem;
}

/* ---------- Página del carrito ---------- */
.carrito-pagina h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.lista-carrito {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.item-carrito {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #ece7dc;
    border-radius: 10px;
    padding: 0.8rem;
}

.item-carrito img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    background: #eee;
}

.item-carrito__info h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--color-dark);
}

.item-carrito__precio-unitario {
    font-size: 0.85rem;
    color: #777;
}

.item-carrito__cantidad {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-cantidad {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd8cd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.btn-cantidad:hover {
    background: var(--color-dark);
    color: #fff;
}

.input-cantidad {
    width: 44px;
    text-align: center;
    border: 1px solid #ddd8cd;
    border-radius: 6px;
    padding: 0.3rem 0.2rem;
}

.item-carrito__subtotal {
    font-weight: 600;
    color: var(--color-dark);
    min-width: 90px;
    text-align: right;
}

.btn-eliminar {
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: 1.1rem;
    cursor: pointer;
}

.btn-eliminar:hover {
    color: #7a1f34;
}

.carrito-resumen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd8cd;
    padding-top: 1.2rem;
}

.carrito-resumen .btn-whatsapp {
    margin-left: auto;
}

.carrito-resumen__total {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark);
}

.btn-checkout {
    background: var(--color-dark);
    color: #fff;
    border: none;
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-checkout:hover:not(:disabled) {
    background: var(--color-accent);
}

.btn-checkout:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .item-carrito {
        grid-template-columns: 60px 1fr;
        row-gap: 0.6rem;
    }
    .item-carrito__cantidad,
    .item-carrito__subtotal,
    .btn-eliminar {
        grid-column: 2;
    }
}

/* ---------- Checkout ---------- */
.checkout-pagina h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.alerta-error {
    background: #fbe9e7;
    border: 1px solid #e0a8a0;
    color: #7a1f1f;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.alerta-error ul {
    margin: 0;
    padding-left: 1.2rem;
}

.checkout-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 560px;
}

.checkout-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--color-dark);
    font-weight: 600;
}

.fila-campos {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.fila-campos label {
    flex: 1;
    min-width: 140px;
}

.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form input[type="email"],
.checkout-form input[type="password"],
.checkout-form input[type="number"],
.checkout-form textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #ddd8cd;
    border-radius: 6px;
    font-weight: 400;
}

.fieldset-entrega {
    border: 1px solid #ddd8cd;
    border-radius: 8px;
    padding: 0.8rem 1rem;
}

.fieldset-entrega legend {
    font-weight: 600;
    color: var(--color-dark);
    padding: 0 0.4rem;
}

.opcion-radio {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
    font-weight: 400 !important;
    margin-bottom: 0.4rem;
}

.oculto {
    display: none !important;
}

.nota-envio {
    font-size: 0.82rem;
    color: #7a6a4f;
    background: #fff8e6;
    border: 1px solid #f0e3bd;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    margin-top: -0.5rem;
}

.nota-cuenta-pendiente {
    margin-top: 0;
    margin-bottom: 1.8rem;
}

/* ---------- Admin: listado de productos ---------- */
.admin-titulo-accion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.admin-titulo-accion h1 {
    margin-bottom: 0;
}

/* ---------- Lightbox: clic en una miniatura para verla grande ---------- */
.clic-para-agrandar {
    cursor: zoom-in;
}

.admin-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.admin-lightbox--visible {
    display: flex;
}

.admin-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.admin-lightbox__cerrar {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-lightbox__cerrar:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ---------- Previsualización de fotos en el formulario de producto ---------- */
.admin-preview-imagen {
    display: block;
    max-width: 160px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 6px;
    margin-top: 0.6rem;
    border: 1px solid #ece7dc;
}

.admin-preview-galeria {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.admin-preview-galeria__item {
    position: relative;
    width: 80px;
    height: 80px;
}

.admin-preview-galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #ece7dc;
}

.admin-preview-galeria__quitar {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.admin-preview-galeria__quitar:hover {
    background: #7a1f34;
}

.admin-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    background: #eee;
}

.admin-thumb--grande {
    width: 140px;
    height: 105px;
    margin-top: -0.6rem;
}

.admin-acciones {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    white-space: nowrap;
}

.admin-acciones a {
    color: var(--color-accent);
    font-size: 0.85rem;
}

.admin-link-boton {
    background: none;
    border: none;
    padding: 0;
    color: #777;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.admin-link-boton--aprobar {
    color: #1f6d3d;
    font-weight: 600;
}

.admin-link-boton--eliminar {
    color: #b3261e;
}

.admin-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.admin-paginacion a {
    color: var(--color-dark);
    font-weight: 600;
    text-decoration: none;
}

.admin-paginacion a:hover {
    color: var(--color-accent);
}

/* ---------- Botón de WhatsApp chico (usado en "Mis pedidos") ---------- */
.btn-whatsapp--chico {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    min-width: auto;
}

/* ---------- Contacto ---------- */
.contacto-pagina h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.contacto-info {
    margin-top: 1.5rem;
}

.contacto-info p {
    margin-bottom: 0.8rem;
}

.contacto-info a {
    color: var(--color-accent);
    font-weight: 600;
}

/* ---------- Sobre Nosotros ---------- */
.sobre-nosotros-pagina {
    max-width: 780px;
    margin: 0 auto;
}

.sobre-nosotros-pagina h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    color: var(--color-dark);
    margin-bottom: 1.2rem;
    text-align: center;
}

.sobre-nosotros__intro {
    font-size: 1.05rem;
    color: #555;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.sobre-nosotros__imagen {
    margin-bottom: 2.5rem;
    border-radius: 10px;
    overflow: hidden;
}

.sobre-nosotros__imagen img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    display: block;
}

.sobre-nosotros__seccion {
    margin-bottom: 2rem;
}

.sobre-nosotros__seccion h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

.sobre-nosotros__seccion p {
    color: #555;
    line-height: 1.8;
}

.sobre-nosotros__valores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2.5rem 0;
    text-align: center;
}

@media (max-width: 640px) {
    .sobre-nosotros__valores {
        grid-template-columns: 1fr;
    }
}

.sobre-nosotros__valor .contacto-dato__icono {
    margin: 0 auto 0.8rem;
}

.sobre-nosotros__valor h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-bottom: 0.4rem;
}

.sobre-nosotros__valor p {
    font-size: 0.9rem;
    color: #666;
}

.sobre-nosotros__cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ---------- Contacto: layout de dos columnas ---------- */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 2.5rem;
    margin-top: 2rem;
}

@media (max-width: 700px) {
    .contacto-grid {
        grid-template-columns: 1fr;
    }
}

.contacto-info-columna h2,
.contacto-form-columna h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-dark);
    margin-bottom: 1.5rem;
}

.contacto-dato {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.6rem;
    align-items: flex-start;
}

.contacto-dato__icono {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacto-dato__icono svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.contacto-dato strong {
    display: block;
    color: var(--color-dark);
    margin-bottom: 0.2rem;
}

.contacto-dato p {
    color: #555;
    margin: 0;
}

.contacto-dato a {
    color: #555;
    text-decoration: none;
}

.contacto-dato a:hover {
    color: var(--color-accent);
}

/* Campo honeypot: invisible para una persona, presente en el HTML
   para que un bot automático lo complete y así lo detectemos. */
.campo-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alerta-exito {
    background: #e2f3e8;
    border: 1px solid #b8dfc7;
    color: #1f6d3d;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.checkout-resumen {
    background: #fff;
    border: 1px solid #ece7dc;
    border-radius: 10px;
    padding: 1rem 1.2rem;
}

.checkout-resumen h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}

.resumen-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.resumen-lista li {
    display: flex;
    justify-content: space-between;
}

.resumen-total {
    font-weight: 700;
    color: var(--color-dark);
    text-align: right;
    border-top: 1px solid #ece7dc;
    padding-top: 0.6rem;
}

.checkout-botones {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Los colores de estos dos botones son a propósito los colores de marca
   de Mercado Pago y WhatsApp: ayudan a reconocer al instante qué hace
   cada botón, más que cualquier paleta propia del sitio. */
.btn-mercadopago,
.btn-whatsapp {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding: 0.9rem 1.2rem;
    border-radius: 8px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-mercadopago {
    background: #009ee3;
    color: #fff;
}

.btn-mercadopago:hover {
    background: #0087c4;
}

.btn-mercadopago--bloqueado {
    background: #a9c9d6;
    cursor: not-allowed;
}

.btn-mercadopago--bloqueado:hover {
    background: #a9c9d6;
}

.btn-whatsapp {
    background: #25d366;
    color: #fff;
}

.btn-whatsapp:hover {
    background: #1ebe5a;
}

.btn-whatsapp--grande {
    font-size: 1.05rem;
    padding: 1rem 2rem;
    margin-top: 1rem;
}

/* ---------- Páginas de resultado (pago-exitoso/fallido/pendiente, pedido-confirmado) ---------- */
.pagina-resultado {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.pagina-resultado h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.pagina-resultado p {
    margin-bottom: 0.8rem;
}

.pagina-resultado .btn-checkout,
.pagina-resultado .btn-whatsapp {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
}

/* ---------- Accesibilidad ---------- */
a:focus,
button:focus {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ---- Catálogo en 2 columnas en celular (en vez de 1 apilada) ---- */
@media (max-width: 640px) {
    .grid-productos {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .tarjeta-producto__info {
        padding: 0.7rem;
    }

    .tarjeta-producto h3 {
        font-size: 1rem;
    }

    .tarjeta-producto__categoria {
        font-size: 0.68rem;
    }

    .tarjeta-producto__codigo {
        font-size: 0.7rem;
    }

    .tarjeta-producto__acciones {
        padding: 0 0.7rem 0.7rem;
    }

    .tarjeta-producto__acciones .btn-agregar {
        width: 100%;
        padding: 0.55rem 0.5rem;
        font-size: 0.82rem;
    }
}