/* ═══════════════════════════════════════════════════════════════
   FLORERÍA DAJAR — styles.css
   Archivo único de estilos para todo el proyecto
   ───────────────────────────────────────────────────────────────
   ÍNDICE
   1. Variables globales (paleta, tipografía)
   2. Reset & base
   3. Header (logo)
   4. Navbar
   5. Hero
   6. Sección 3 columnas (info-tres)
   7. Secciones generales (títulos, subtítulos)
   8. Tabs (sugeridos)
   9. Carrusel tarjetas de productos
  10. Carrusel de fotos
  11. Modal Sign In
  12. Página: Comprar (grid de categorías)
  13. Página: Productos (se completará)
  14. Página: Carrito (se completará)
  15. Página: Checkout (se completará)
  16. Responsive / Media queries
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. VARIABLES GLOBALES
═══════════════════════════════════════════════════════════════ */
:root {
    /* Paleta de colores */
    --rosa-oscuro:  #D45E5E;
    --rosa-medio:   #F08080;
    --rosa-suave:   #F4978E;
    --durazno:      #F8AD9D;
    --crema-rosa:   #FBC4AB;
    --crema-claro:  #FFDAB9;

    /* checkout y auth  */
    --rose:      #c9849a;
    --rose-lt:   #f5e8ed;
    --rose-dk:   #a5627a;
    --ink:       #2d2020;
    --border:    #e8d8de;
    --bg:        #fdfaf9;
    --radius:    12px;
    --shadow:    0 2px 16px rgba(180,100,120,.10);

    /* Texto */
    --texto-oscuro: #2c2c2c;
    --texto-muted:  #888;

    /* Fuentes */
    --font-body:    'Poppins', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
    --font-raleway: 'Raleway', sans-serif;
    --font-josefin: 'Josefin Sans', sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   2. RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: #fff;
    color: var(--texto-oscuro);
}


/* ═══════════════════════════════════════════════════════════════
   3. HEADER — logo centrado
═══════════════════════════════════════════════════════════════ */
.site-header {
    background: #fff;
    text-align: center;
    padding: 1.8rem 1rem 1.2rem;   /* menos padding, más compacto */
}

.logo-img-principal {
    width: 480px;          /* más chico */
    max-width: 75vw;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Botón flotante/carrito del header */
.header-carrito {
    position: fixed;
    top: 22px;
    right: 26px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: #2f2d2d;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.header-carrito:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.header-carrito i {
    font-size: 1rem;
    line-height: 1;
}

#carrito-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e74c3c;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.carrito-resumen-texto {
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .header-carrito {
        top: 14px;
        right: 14px;
        padding: 0.65rem 0.85rem;
    }

    .carrito-resumen-texto {
        font-size: 0.82rem;
    }
}
/* ═══════════════════════════════════════════════════════════════
   4. NAVBAR
═══════════════════════════════════════════════════════════════ */
.site-nav {
    background: #ffffff;
    padding: .6rem 0;
}

.site-nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.site-nav a {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-oscuro);
    text-decoration: none;
    padding: .5rem .6rem;
    border-radius: 999px;
    transition: color .2s, background .2s;
    white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.activo {
    color: var(--rosa-oscuro);
}

.nav-divider {
    display: none;
}

.btn-nav-signin {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-oscuro);
    background: none;
    border: none;
    padding: .5rem .6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: color .2s;
    white-space: nowrap;
}

.btn-nav-signin:hover {
    color: var(--rosa-oscuro);
}

.carrito-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.carrito-badge .badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--rosa-oscuro);
    color: #fff;
    border-radius: 999px;
    font-size: .65rem;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-cliente-nombre {
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .8rem;
    color: var(--rosa-oscuro, #a5627a);
    letter-spacing: .04em;
    margin-right: 6px;
}
.btn-nav-salir {
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .78rem;
    color: var(--rosa-oscuro, #a5627a);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity .2s;
}
.btn-nav-salir:hover { opacity: .7; }
.modal-error-msg {
    background: #fdf0f2;
    color: #a5324a;
    border: 1px solid #f0bbc6;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .85rem;
    margin-bottom: 14px;
}


/*SING IN*/

/* ═══════════════════════════════════════════════════════════════
   5. HERO — imagen full-width
═══════════════════════════════════════════════════════════════ */
.hero {
    background: #fff;
    padding: 0 1.5rem;
}

.hero img {
    width: 100%;
    max-width: 1080px;
    max-height: 1200px;
    height: auto;
    object-fit: cover;
    object-position: center 170%;
    display: block;
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   6. SECCIÓN 3 COLUMNAS (info-tres)
═══════════════════════════════════════════════════════════════ */
.info-tres {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 950px;
    
    /* MODIFICACIÓN: Cambiamos 'margin: 0 auto;' por esto para darle espacio arriba y abajo */
    margin: 4rem auto; 
    
    padding: 2rem 1.5rem;
    border-top: 1.5px solid #ad9d9d;
    border-bottom: 1.5px solid #ad9d9d;
    gap: 0;
}

.info-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .5rem 2rem;
    gap: .3rem;
}

.info-col-centro {
    border-left: 1.5px solid #ad9d9d;
    border-right: 1.5px solid #ad9d9d;
}

.info-script {
    font-family: var(--font-raleway);
    font-weight: 200;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.info-ciudad {
    font-family: var(--font-josefin);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #c9908a;
}

.info-sub {
    font-size: .76rem;
    font-style: italic;
    font-family: var(--font-display);
    color: var(--texto-muted);
}

.info-col p {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    color: var(--texto-oscuro);
    line-height: 1.7;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   7. SECCIONES GENERALES
═══════════════════════════════════════════════════════════════ */
.section-pad {
    padding: 4rem 0;
}

.section-titulo {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--texto-oscuro);
    margin-bottom: .25rem;
}

.section-sub {
    font-size: .82rem;
    color: var(--texto-muted);
    margin-bottom: 1.6rem;
}

.page-titulo {
    text-align: center;
    padding-top: 2.5rem;
    font-family: var(--font-display);
    font-size: 2rem;
    letter-spacing: 0.1em;
}


/* ═══════════════════════════════════════════════════════════════
   8. TABS (sugeridos)
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   GALERÍA MOMENTOS DAJAR
═══════════════════════════════════════════════════════════════ */
.divisor-seccion {
    border: none;
    border-top: 1px solid #e8ddd8;
    margin: 3rem auto;
    max-width: 900px;
}

.galeria-momentos {
    max-width: 82%;
    margin: 0 auto;
    padding: 0.5rem;/* para subir la seccion en general*/
    text-align: center;
}

.galeria-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    color: var(--rosa-oscuro);
    margin-bottom: 1.5rem;
    letter-spacing: .05em;

    
}

.galeria-principal {
    width: 100%;
    margin-bottom: 1.2rem;
    position: relative;
}

#foto-grande {
    width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 0px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: opacity 0.3s ease;
}

.galeria-desc {
    position: absolute;        /* ← cambia a absolute */
    bottom: 1rem;              /* ← distancia desde abajo */
    left: 1.5rem;              /* ← distancia desde la izquierda */
    margin: 0;
    font-size: .95rem;
    color: #fff;               /* ← blanco para que se vea sobre la foto */
    letter-spacing: .06em;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);  /* ← sombra para legibilidad */
    padding: .3rem .8rem;
    border-radius: 4px;
}

.galeria-miniaturas {
    display: flex;
    justify-content: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.miniatura {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 0px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color .2s, transform .2s, opacity .2s;
    opacity: 0.75;
}

.miniatura:hover {
    opacity: 1;
    transform: scale(1.05);
}

.miniatura.activa {
    border-color: var(--rosa-oscuro);
    opacity: 1;
}
.divisor-seccion {
    border: none;
    border-top: 2px solid #c9a89a;   /* ← grosor: 1px/2px/3px | color: el que quieras */
    margin: 3rem auto; /*si agregamos el tercer valor del margin (1rem) es el espacio entre la línea y el título — entre más chico, más pegado queda.*/
    max-width: 900px;
}


/* ═══════════════════════════════════════════════════════════════
   11. MODAL SIGN IN
═══════════════════════════════════════════════════════════════ */
.modal-dajar { max-width: 420px; }

.modal-dajar-content {
    border: none;
    border-radius: 16px;
    padding: 40px 36px 32px;
    position: relative;
    font-family: 'Jost', 'Poppins', sans-serif;
}
.modal-dajar-close {
    position: absolute;
    top: 16px; right: 20px;
    background: none; border: none;
    font-size: 1rem; color: #aaa;
    cursor: pointer; line-height: 1;
    padding: 4px; transition: color .2s;
}
.modal-dajar-close:hover { color: #555; }

.modal-dajar-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem; font-weight: 300;
    color: #2d2020; margin: 0 0 24px;
    line-height: 1.25; letter-spacing: .02em;
}
.modal-dajar-error {
    background: #fdf0f2; color: #a5324a;
    border: 1px solid #f0bbc6;
    border-radius: 2px;
    padding: 9px 13px; font-size: .83rem;
    margin-bottom: 14px;
}
.modal-dajar-form { display: flex; flex-direction: column; gap: 0; }

.modal-dajar-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
.modal-dajar-field { position: relative; }

.modal-dajar-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    padding: 13px 36px 13px 0;
    font-size: .92rem;
    font-family: 'Jost', 'Poppins', sans-serif;
    color: #4e4b4b;; background: transparent;
    outline: none; transition: border-color .2s;
    box-sizing: border-box;
}
.modal-dajar-input::placeholder { color: #bbb; font-size: .87rem; }
.modal-dajar-input:focus { border-bottom-color: #4e4b4b; }

.modal-pass-wrap { position: relative; }
.modal-dajar-eye {
    position: absolute; right: 4px; bottom: 12px;
    background: none; border: none; color: #bbb;
    cursor: pointer; padding: 0;
    display: flex; align-items: center;
    transition: color .2s;
}
.modal-dajar-eye:hover { color: #69535a; }

.modal-dajar-btn {
    margin-top: 24px; width: 100%;
    padding: 14px;
    background: #4e4b4b; color: #fff;
    border: none; border-radius: 8px;
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .88rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; transition: background .2s;
}
.modal-dajar-btn:hover { background: #383737; }

.modal-dajar-switch {
    text-align: center; margin-top: 18px;
    font-size: .83rem; color: #888;
}
.modal-dajar-link {
    background: none; border: none;
    color: #4e4b4b;font-size: .83rem;
    font-family: inherit; cursor: pointer;
    padding: 0; text-decoration: underline;
    transition: color .2s;
}
.modal-dajar-link:hover { color: #383737;}

.modal-dajar-match {
    font-size: .75rem; min-height: 16px;
    margin: 2px 0 0; padding: 0;
}
.modal-dajar-match.ok  { color: #2a7a47; }
.modal-dajar-match.err { color: #a5324a; }

/* ═══════════════════════════════════════════════════════════════
   DRAWER — Mi Cuenta (panel lateral derecho)
═══════════════════════════════════════════════════════════════ */
 
/* Overlay oscuro que cubre los 2/3 izquierdos */
.cuenta-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 8500;
    transition: opacity .3s;
}
.cuenta-overlay.visible { display: block; }
 
/* El drawer en sí */
.cuenta-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 33vw;
    min-width: 280px;
    max-width: 420px;
    height: 100vh;
    background: #fff;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);          /* Oculto fuera de pantalla */
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
}
.cuenta-drawer.abierto { transform: translateX(0); }
 
/* Cabecera del drawer */
.cuenta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0e8e8;
    flex-shrink: 0;
}
.cuenta-header-titulo {
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #2d2020;
}
.cuenta-close {
    background: none; border: none;
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    padding: 0;
    transition: color .2s;
}
.cuenta-close:hover { color: #2d2020; }
 
/* Saludo */
.cuenta-saludo {
    padding: 28px 24px 20px;
    border-bottom: 1px solid #f0e8e8;
    flex-shrink: 0;
}
.cuenta-hola {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: #2d2020;
    letter-spacing: .02em;
    margin-bottom: 8px;
    line-height: 1.2;
}
.cuenta-signout {
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .8rem;
    color: #888;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    transition: color .2s, border-color .2s;
}
.cuenta-signout:hover { color: #a5627a; border-color: #a5627a; }
 
/* Secciones */
.cuenta-secciones { flex: 1; padding: 8px 0; }
 
.cuenta-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #f5f0f0;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
    cursor: pointer;
}
.cuenta-seccion:hover { background: #fdfaf9; }
.cuenta-seccion-inactiva { cursor: default; }
.cuenta-seccion-inactiva:hover { background: transparent; }
 
.cuenta-sec-titulo {
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: #2d2020;
    margin-bottom: 3px;
    letter-spacing: .02em;
}
.cuenta-sec-sub {
    font-family: 'Jost', 'Poppins', sans-serif;
    font-size: .78rem;
    color: #aaa;
}
.cuenta-seccion svg { color: #ccc; flex-shrink: 0; }
 
/* Responsive — en móvil ocupa 80% */
@media (max-width: 600px) {
    .cuenta-drawer { width: 80vw; }
}
 

/* ═══════════════════════════════════════════════════════════════
   12. PÁGINA: COMPRAR — Grid de categorías
═══════════════════════════════════════════════════════════════ */
.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
    padding: 3rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.categoria-card {
    text-decoration: none;
    text-align: center;
    color: inherit;
    transition: transform 0.2s;
}

.categoria-card:hover {
    transform: translateY(-4px);
}

.categoria-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0px;
}

.categoria-card .cat-nombre {
    margin-top: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: #f7eeea;
    padding: 0.5rem 1rem;
    border-radius: 0px;
}
/* ═══════════════════════════════════════════════════════════════
   BANNER TIENDA EN LÍNEA — comprar.php
═══════════════════════════════════════════════════════════════ */
.tienda-banner {
    max-width: 700px;
    margin: 2.5rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}

.tienda-titulo {
    font-family: var(--font-display);   /* misma del subtítulo del logo */
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #b49185;
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.tienda-info {
    font-family: var(--font-display);    /* misma tipografía de "Capital" */
    font-size: 0.88rem;
    color: #7a6e6a;
    line-height: 1.75;
    letter-spacing: 0.03em;
    margin-bottom: 0.8rem;
    max-width: 60ch;
    margin-inline: auto;
}

.tienda-contacto {
    font-family: var(--font-display);    /* misma tipografía de "Capital" */
    font-size: 0.88rem;
    color: #7a6e6a;
    line-height: 1.75;
    letter-spacing: 0.03em;
    max-width: 60ch;
    margin-inline: auto;
}

.tienda-contacto a {
    color: #b49185;
    text-decoration: none;
    font-weight: 600;
}

.tienda-contacto a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   PÁGINA: PRODUCTOS
═══════════════════════════════════════════════════════════════ */
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
    padding: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
}

.producto-card {
    display: block;               /* necesario porque ahora es <a> */
    text-decoration: none;        /* quita el subrayado del link */
    color: inherit;
    background: #fff;
    border-radius: 12px;
    padding: .9rem;
    text-align: center;
    transition: transform .2s;
    border: 0px solid #f0e8e4;
    overflow: hidden;
}

.producto-card:hover {
    transform: translateY(-5px);
}

.producto-card img {
    width: 100%;
    height: 260px;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
    border-radius: 0px;
    margin-bottom: .9rem;
    display: block;
    background: #f7eeea;
}

/* Nombre del ramo — tipografía navbar, más grande */
.producto-card h3 {
    font-family: var(--font-nav);       /* misma fuente que la navbar */
    font-size: 1rem;                    /* más grande que antes (.9rem) */
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4a4a4a;
    margin: .6rem 0;
    height: 2.4em;
    overflow: hidden;
}

/* Precio — misma tipografía, un poco más pequeño */
.precio {
    font-family: var(--font-nav);       /* misma fuente que la navbar */
    font-size: .88rem;                  /* más pequeño que el nombre */
    font-weight: 700;
    color: #4a4a4a;
    letter-spacing: 0.08em;
    margin-bottom: .9rem;
}

@media (max-width: 600px) {
    .productos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
        padding: .75rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   14. PÁGINA: CARRITO 
═══════════════════════════════════════════════════════════════ */
.carrito-contenedor {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
}

.carrito-contenedor h1 {
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 25px;
    font-size: 1.5rem;
    color: #333;
}

.carrito-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #ddd;
}

.carrito-item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
}

.carrito-info {
    flex: 1;
}

.carrito-info h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #222;
}

.carrito-info p {
    margin: 5px 0;
    color: #555;
}

.carrito-total {
    margin-top: 30px;
    text-align: right;
}

.carrito-total h2 {
    font-size: 1.8rem;
    color: #222;
}

.btn-checkout {
    display: inline-block;
    margin-top: 15px;
    background: #686463;
    color: #fff;
    padding: 12px 24px;
    border-radius: 1px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.btn-checkout:hover {
    background: #413d3b;
}

.carrito-vacio {
    text-align: center;
    padding: 60px 20px;
}

.carrito-vacio p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #666;
}
/* ═══════════════════════════════════════════════════════════
   CARRITO — controles — número + ✕
═══════════════════════════════════════════════════════════ */

/* Fila de cada producto */
.carrito-item {
    display: flex;              /* Imagen | info | controles en fila */
    align-items: center;        /* Centra verticalmente */
    gap: 1.2rem;                /* Espacio entre cada bloque */
    padding: 1rem 0;            /* Espacio arriba y abajo de la fila */
}

/* Imagen del producto en el carrito */
.carrito-item img {
    width: 90px;                /* Ancho fijo pequeño */
    height: 90px;               /* Alto igual al ancho */
    object-fit: cover;          /* Recorta sin distorsionar */
    border-radius: 6px;         /* Esquinas suaves */
    flex-shrink: 0;             /* No encoge aunque el espacio sea poco */
}

/* Bloque de texto (nombre, precio, subtotal) */
.carrito-item-info {
    flex: 1;                    /* Ocupa todo el espacio disponible */
}

.carrito-item-info h3 {
    font-family: var(--font-nav);   /* Tipografía coherente */
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4a4a4a;
    margin-bottom: 4px;
}

.item-precio,
.item-subtotal {
    font-size: 0.85rem;         /* Texto pequeño para precio y subtotal */
    color: #7a6e6a;
    margin: 2px 0;
}

/* Bloque de controles: — qty + ✕ */
.carrito-controles {
    display: flex;              /* Botones en fila */
    align-items: center;
    gap: 0.4rem;                /* Espacio entre cada control */
    flex-shrink: 0;             /* No encoge */
}

/* Estilo base de todos los botones de control */
.ctrl-btn {
    width: 30px;                /* Ancho fijo cuadrado */
    height: 30px;               /* Alto igual */
    border: 0px solid #ddd;     /* Borde gris suave */
    border-radius: 6px;         /* Esquinas redondeadas */
    background: #fff;           /* Fondo blanco */
    color: #4a4a4a;             /* Color del ícono */
    font-size: 1rem;            /* Tamaño del + − ✕ */
    cursor: pointer;            /* Cursor de mano */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1;
}

/* Hover de − y + */
.ctrl-restar:hover,
.ctrl-sumar:hover {
    background: #f7eeea;        /* Fondo rosado suave */
    border-color: #c9a89a;      /* Borde rosa DAJAR */
    color: #c9a89a;
}

/* El ✕ es más grande y rojo al hacer hover */
.ctrl-eliminar {
    font-size: 0.85rem;
    color: #aaa;                /* Gris por defecto */
    border-color: #eee;
    margin-left: 0.3rem;        /* Separación extra del grupo — + */
}

.ctrl-eliminar:hover {
    background: #fff0f0;        /* Fondo rojo muy suave */
    border-color: #e0a0a0;
    color: #c0392b;             /* Rojo al hacer hover */
}

/* Número de cantidad entre los botones */
.ctrl-cantidad {
    min-width: 24px;            /* Ancho mínimo para que no brinque con 2 dígitos */
    text-align: center;
    font-size: 0.9rem;
    color: #4a4a4a;
    font-variant-numeric: tabular-nums;  /* Los números no cambian de ancho */
}

/* Botones deshabilitados mientras espera la respuesta del servidor */
.ctrl-btn:disabled {
    opacity: 0.4;               /* Se ven apagados */
    cursor: not-allowed;        /* Cursor de prohibido */
}

/* Separador entre productos */
.carrito-divider {
    border: none;
    border-top: 1px solid #f0e8e4;  /* Línea rosa muy suave */
    margin: 0;
}

/* Estado vacío del carrito */
.carrito-vacio {
    text-align: center;
    padding: 3rem 1rem;
    color: #7a6e6a;
}

.carrito-vacio p {
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* ===== RESPONSIVE CARRITO ===== */

@media (max-width: 768px) {
    .carrito-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .carrito-item img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .carrito-total {
        text-align: left;
    }
}


/* ═══════════════════════════════════════════════════════════════
   15. PÁGINA: CHECKOUT
═══════════════════════════════════════════════════════════════ */
/* ── Variables que respetan el sistema de color existente ── */
:root {
    --rose:      #c9849a;
    --rose-lt:   #f5e8ed;
    --rose-dk:   #a5627a;
    --ink:       #2d2020;
    --muted:     #8a7070;
    --border:    #e8d8de;
    --bg:        #fdfaf9;
    --white:     #ffffff;
    --radius:    12px;
    --shadow:    0 2px 16px rgba(180,100,120,.10);
}

/* ── Layout principal ── */
.ck-wrap {
    max-width: 1060px;
    margin: 48px auto 80px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 820px) {
    .ck-wrap { grid-template-columns: 1fr; }
}

/* ── Encabezado de página ── */
.ck-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: .04em;
    margin-bottom: 32px;
    grid-column: 1 / -1;
}
.ck-titulo span { color: var(--rose); font-style: italic; }

/* ── Tarjeta genérica ── */
.ck-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.ck-card-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--rose-dk);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ck-card-titulo .num {
    width: 24px; height: 24px;
    background: var(--rose);
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-family: 'Jost', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Campos del formulario ── */
.ck-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 520px) {
    .ck-grid-2, .ck-grid-3 { grid-template-columns: 1fr; }
}
.ck-field { display: flex; flex-direction: column; gap: 5px; }
.ck-field.full { grid-column: 1 / -1; }
.ck-label {
    font-family: 'Jost', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ck-input, .ck-select, .ck-textarea {
    font-family: 'Jost', sans-serif;
    font-size: .92rem;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
}
.ck-input:focus, .ck-select:focus, .ck-textarea:focus {
    outline: none;
    border-color: var(--rose);
    box-shadow: 0 0 0 3px rgba(201,132,154,.15);
}
.ck-textarea { resize: vertical; min-height: 80px; }
.ck-hint {
    font-size: .72rem;
    color: var(--muted);
    font-family: 'Jost', sans-serif;
    margin-top: -3px;
}

/* ── Bloque de calcular envío ── */
.ck-envio-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.ck-envio-row .ck-input { flex: 1; }
.btn-calcular {
    font-family: 'Jost', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--white);
    background: var(--rose);
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    flex-shrink: 0;
}
.btn-calcular:hover { background: var(--rose-dk); }
.btn-calcular:disabled { opacity: .6; cursor: not-allowed; }

#envio-resultado {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    display: none;
}
#envio-resultado.ok  { background: #f0faf3; color: #2a7a47; border: 1px solid #b5e0c5; }
#envio-resultado.err { background: #fdf0f2; color: #a5324a; border: 1px solid #f0bbc6; }

/* ── Resumen de productos ── */
.ck-producto {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--rose-lt);
}
.ck-producto:last-child { border-bottom: none; }
.ck-prod-img {
    width: 56px; height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--rose-lt);
}
.ck-prod-info { flex: 1; }
.ck-prod-nombre {
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 3px;
}
.ck-prod-extras {
    list-style: none;
    padding: 0; margin: 3px 0 0;
    font-size: .76rem;
    color: var(--muted);
    font-family: 'Jost', sans-serif;
}
.ck-prod-extras li::before { content: '✦ '; color: var(--rose); }
.ck-prod-cant {
    font-size: .76rem;
    color: var(--muted);
    font-family: 'Jost', sans-serif;
    margin-top: 2px;
}
.ck-prod-precio {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Panel derecho de costos ── */
.ck-resumen-panel {
    position: sticky;
    top: 20px;
}
.ck-costos { padding: 0; }
.ck-costo-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-family: 'Jost', sans-serif;
    font-size: .9rem;
    color: var(--ink);
    border-bottom: 1px solid var(--rose-lt);
}
.ck-costo-fila:last-child { border-bottom: none; }
.ck-costo-fila .etiq { color: var(--muted); font-size: .85rem; }
.ck-costo-fila.total-fila {
    padding-top: 14px;
    margin-top: 4px;
}
.ck-costo-fila.total-fila .etiq {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .04em;
}
.ck-costo-fila.total-fila .val {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--rose-dk);
}
.val-envio-pendiente {
    font-size: .78rem;
    color: var(--muted);
    font-style: italic;
}

/* ── Dedicatoria toggle ── */
.ck-toggle-dedicatoria {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: 'Jost', sans-serif;
    font-size: .9rem;
    color: var(--rose-dk);
    margin-bottom: 14px;
}
.ck-toggle-dedicatoria input[type=checkbox] { accent-color: var(--rose); width: 16px; height: 16px; cursor: pointer; }
#bloque-dedicatoria { display: none; }
#bloque-dedicatoria.visible { display: grid; }

.ck-contador {
    font-size: .72rem;
    color: var(--muted);
    font-family: 'Jost', sans-serif;
    text-align: right;
    margin-top: -8px;
}

/* ── Botón confirmar ── */
.btn-confirmar {
    width: 100%;
    padding: 16px;
    background: var(--rose-dk);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .25s, transform .15s;
    margin-top: 16px;
}
.btn-confirmar:hover { background: var(--rose); transform: translateY(-1px); }
.btn-confirmar:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ck-aviso {
    font-family: 'Jost', sans-serif;
    font-size: .74rem;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

/* ── Validación visual ── */
.ck-input.invalido, .ck-select.invalido, .ck-textarea.invalido {
    border-color: #e57373;
    box-shadow: 0 0 0 3px rgba(229,115,115,.12);
}
.ck-error-msg {
    font-size: .72rem;
    color: #c62828;
    font-family: 'Jost', sans-serif;
    display: none;
}
.ck-error-msg.visible { display: block; }

/* ═══════════════════════════════════════════════════════════════
   16. RESPONSIVE / MEDIA QUERIES
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .card-producto  { flex: 0 0 72vw; }
    .foto-item      { flex: 0 0 75vw; }
    .scroll-arrow   { display: none; }
    .site-nav a,
    .btn-nav-signin { font-size: .72rem; padding: .35rem .6rem; }
}

@media (max-width: 600px) {
    .info-tres {
        grid-template-columns: 1fr;
    }
    .info-col-centro {
        border: none;
        border-top: 1px solid #e0d0d0;
        border-bottom: 1px solid #e0d0d0;
        padding: 1rem 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.footer-dajar {
    background: #faf7f5;
    border-top: 1px solid #e8ddd8;
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    margin-top: 3rem;
}

.footer-redes {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    margin-bottom: 1.2rem;
}

.footer-redes a {
    color: #b08878;
    transition: color .2s, transform .2s;
    display: inline-flex;
    align-items: center;
}

.footer-redes a:hover {
    color: var(--rosa-oscuro);
    transform: translateY(-3px);
}

.footer-nombre {
    font-family: var(--fuente-titulo, serif);
    font-size: 1.1rem;
    color: var(--rosa-oscuro);
    letter-spacing: .08em;
    margin-bottom: .5rem;
}

.footer-direccion {
    font-size: .82rem;
    color: #9a8880;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-bottom: .6rem;
}

.footer-copy {
    font-size: .75rem;
    color: #bbb0aa;
    letter-spacing: .03em;
}

/* ═══════════════════════════════════════════════════════════════
   17. DETALLE.PHP
═══════════════════════════════════════════════════════════════ */

/* Contenedor principal: flexbox con imagen a la izquierda e info a la derecha */
.detalle-contenedor {
    display: flex;
    gap: 50px;                  /* Espacio entre la imagen y la info */
    max-width: 1100px;          /* Ancho máximo del bloque completo */
    margin: 40px auto;          /* Centrado horizontal, espacio arriba/abajo */
    padding: 0 2rem;            /* Padding lateral para no pegar a los bordes */
    align-items: flex-start;    /* Alinea ambas columnas desde arriba */
    flex-wrap: wrap;            /* En móvil, las columnas se apilan */
}

/* ── Columna imagen ── */
.detalle-imagen {
    flex: 1 1 420px;            /* Crece y encoge, base de 420px de ancho */
}

/* La imagen del producto */
.detalle-imagen img {
    width: 100%;                /* Ocupa todo el ancho de su columna */
    max-width: 520px;           /* No crece más de 520px */
    border-radius: 0;           /* Sin bordes redondeados */
    object-fit: cover;          /* Recorta sin distorsionar */
    display: block;             /* Elimina el espacio inferior de img inline */
    cursor: zoom-in;            /* Muestra cursor de lupa para indicar que amplía */
    transition: opacity 0.2s;   /* Transición suave al hacer hover */
}

/* Efecto hover en la imagen: ligeramente transparente para indicar que es clickeable */
.detalle-imagen img:hover {
    opacity: 0.9;               /* Se vuelve un poco translúcida al pasar el cursor */
}

/* ── Columna info ── */
.detalle-info {
    flex: 1 1 380px;            /* Crece y encoge, base de 380px */
    padding-top: 0.5rem;        /* Pequeño espacio arriba para alinear con la imagen */
}

/* Título del ramo — tipografía y tamaño igual a la navbar */
.detalle-info h1 {
    font-family: var(--font-nav); 
    font-size: 1.3rem;
    font-weight: 600;                   /* Semi-negrita para destacar */
    letter-spacing: 0.18em;             /* Espaciado de letras como la navbar */
    text-transform: uppercase;
    color: #4a4a4a;                     /* Gris oscuro, igual que los links de la navbar */
    margin-bottom: 12px;                /* Separación debajo del título */
    line-height: 1.4;                   /* Interlineado cómodo */
}

/* Precio del producto */
.precio-grande {
    font-family: var(--font-nav);       /* Misma fuente que el título y la navbar */
    font-size: 1rem;                  /* Un poco más grande que el título */
    color: #4a4a4a;                   /* Rosa DAJAR */
    margin: 16px 0;                     /* Espacio arriba y abajo */
    letter-spacing: 0.08em;             /* Espaciado de letras moderado */
}

/* Texto de descripción del ramo */
.descripcion {
    font-size: 0.9rem;                  
    color: #7a6e6a;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 45ch;
}

/* Formulario agregar al carrito */
.form-carrito {
    display: flex;                      /* Apila sus hijos verticalmente */
    flex-direction: column;             /* Label → input → botón, uno debajo del otro */
    gap: 12px;                          /* Espacio entre cada elemento del form */
    max-width: 200px;                   /* El form no ocupa todo el ancho */
}

/* Etiqueta de cantidad */
.form-carrito label {
    font-family: var(--font-nav);      
    font-size: 0.8rem;                  /* Texto pequeño */
    letter-spacing: 0.12em;             /* Espaciado ligero */
    text-transform: uppercase;          /* Mayúsculas como el resto */
    color: #7a6e6a;                     /* Color gris suave */
}

/* Input numérico de cantidad */
.form-carrito input[type="number"] {
    padding: 10px;                      /* Relleno interno cómodo */
    border: 1px solid #ddd;             /* Borde gris muy suave */
    border-radius: 6px;                 /* Esquinas ligeramente redondeadas */
    width: 100%;                        /* Ocupa todo el ancho del form */
    font-size: 0.9rem;                  /* Tamaño de texto del input */
    color: #4a4a4a;                     /* Color del número escrito */
}

/* Botón Agregar al carrito */
.btn-comprar {
    background: #696564;
    color: white;                      
    padding: 13px 20px;                 
    border: none;                      
    border-radius: 2px;                 
    cursor: pointer;                    
    font-family: var(--font-nav);       
    font-size: 0.82rem;                 
    letter-spacing: 0.14em;             
    text-transform: uppercase;         
    transition: background 0.25s ease;  
}

/* Hover del botón:  más oscuro */
.btn-comprar:hover {
    background:  #423f3e; 
}

/* ── LIGHTBOX ── */

/* Overlay oscuro que cubre toda la pantalla */
#lightbox {
    display: none;                      /* Oculto por defecto */
    position: fixed;                    /* Fijo sobre todo el contenido */
    inset: 0;                           /* Ocupa toda la pantalla (top/right/bottom/left: 0) */
    background: rgba(0, 0, 0, 0.88);   /* Fondo casi negro semitransparente */
    z-index: 9999;                      /* Por encima de todo */
    align-items: center;                /* Centra la imagen verticalmente */
    justify-content: center;            /* Centra la imagen horizontalmente */
    cursor: zoom-out;                   /* Cursor indica que al hacer clic se cierra */
}

/* Cuando el JS añade la clase .activo, el lightbox se muestra */
#lightbox.activo {
    display: flex;                      /* Flex activa el centrado del lightbox */
}

/* La imagen ampliada dentro del lightbox */
#lightbox-img {
    max-width: 90vw;                    /* No más ancho que el 90% de la pantalla */
    max-height: 90vh;                   /* No más alto que el 90% de la pantalla */
    object-fit: contain;                /* Muestra la imagen completa sin recortar */
    border-radius: 4px;                 /* Bordes muy sutiles */
    box-shadow: 0 8px 40px rgba(0,0,0,0.5); /* Sombra para darle profundidad */
}

/* Botón de cerrar (X) en la esquina superior derecha */
.lightbox-cerrar {
    position: absolute;                 /* Posición libre dentro del lightbox */
    top: 1.2rem;                        /* Separación desde arriba */
    right: 1.5rem;                      /* Separación desde la derecha */
    background: none;                   /* Sin fondo */
    border: none;                       /* Sin borde */
    color: white;                       /* Color blanco del icono */
    font-size: 1.6rem;                  /* Tamaño del icono X */
    cursor: pointer;                    /* Cursor de mano */
    opacity: 0.7;                       /* Un poco transparente */
    transition: opacity 0.2s;           /* Transición suave */
    z-index: 10000;                     /* Por encima de la imagen del lightbox */
}

/*PERSONALIZACION DEL RAMO*/
.extras-dropdown {
    margin-top: 1.5rem;
    border-radius: 4px;
    border: 1px solid #d8d4d6;
    background: #ffffff;
    padding: 0.75rem 1rem 1rem;
}

/* Quitar el triángulo default del summary */
.extras-dropdown summary {
    list-style: none;
}
.extras-dropdown summary::-webkit-details-marker {
    display: none;
}

/* Cabecera del summary */
.extras-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.25rem 0;
}

/* Pastilla con resumen */
.extras-pill {
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    background: #ffffff;
    border: 1px solid #e7b3cf;
    color: #c0446a;
}

/* Texto extra */
.extras-ayuda {
    margin-top: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #555;
}

/* Lista de extras */
.extras-grid {
    display: grid;
    gap: 0.5rem;
    max-height: 170px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Tarjeta de cada extra */
.extra-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 4px;
    border: 1px solid #eee;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s;
}

.extra-item:hover {
    border-color: #423f3e;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    background: #ffffff;
}

.extra-item input[type="checkbox"] {
    margin-top: 0.2rem;
}

.extra-info { line-height: 1.35; }

.extra-nombre {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.extra-precio {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c0446a;
    margin-right: 0.25rem;
}

.extra-unidad {
    font-size: 0.8rem;
    color: #777;
}
/* Hover del botón cerrar: se vuelve completamente opaco */
.lightbox-cerrar:hover {
    opacity: 1;
}

/* ── RESPONSIVE móvil ── */
@media (max-width: 768px) {
    .detalle-contenedor {
        flex-direction: column;         /* Apila imagen arriba e info abajo */
        gap: 20px;                      /* Menos espacio entre ambas en móvil */
        margin: 20px auto;              /* Menos margen vertical en pantallas pequeñas */
        padding: 0 1rem;                /* Padding lateral reducido */
    }

    .detalle-info h1 {
        font-size: 1.1rem;              /* Título un poco más pequeño en móvil */
    }

    .precio-grande {
        font-size: 1.2rem;              /* Precio un poco más pequeño en móvil */
    }
}

/* ═══════════════════════════════════════════════════════════════
   WIDGET FLOTANTE DEL CARRITO
   Siempre en la esquina superior derecha, incluso al hacer scroll
═══════════════════════════════════════════════════════════════ */

/* El widget es un <a> fijo en pantalla */
#carrito-widget {
    position: fixed;              
    top: 1rem;                   
    right: 1.2rem;                
    z-index: 8000;                

    display: none;              
    align-items: center;
    gap: 0.55rem;             

    background: #2b2b2b;          
    color: #fff;                  
    text-decoration: none;        
    padding: 0.55rem 1rem;   
    border-radius: 999px;         
    font-size: 0.82rem;        
    letter-spacing: 0.06em;      
    font-family: var(--font-nav); 
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    transition: background 0.2s, transform 0.2s;  
    cursor: pointer;             
    white-space: nowrap;          
}

/* Cuando el JS añade la clase .visible, el widget aparece */
#carrito-widget.visible {
    display: flex;               
}

/* Hover: fondo un poco más claro */
#carrito-widget:hover {
    background: #3d3d3d;          
    transform: translateY(-1px);  
}

/* Animación de pulso cuando se agrega un producto */
@keyframes pulsoWidget {
    0%   { transform: scale(1); } 
    40%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}

#carrito-widget.pulso {
    animation: pulsoWidget 0.35s ease-out;
}

/* Ícono SVG dentro del widget */
#carrito-widget svg {
    flex-shrink: 0;  
    opacity: 0.85; 
}    

/*====CHECKOUT=======*/
/* ── Variables que respetan el sistema de color existente ── */
:root {
    --rose:      #c9849a;
    --rose-lt:   #f5e8ed;
    --rose-dk:   #a5627a;
    --ink:       #2d2020;
    --muted:     #8a7070;
    --border:    #e2e1e1;
    --bg:        #fdfaf9;
    --white:     #ffffff;
    --radius:    12px;
    --shadow:    0 2px 16px rgba(180,100,120,.10);
}

/* ── Layout principal ── */
.ck-wrap {
    max-width: 1060px;
    margin: 48px auto 80px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}
@media (max-width: 820px) {
    .ck-wrap { grid-template-columns: 1fr; }
}

/* ── Encabezado de página ── */
.ck-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: .04em;
    margin-bottom: 32px;
    grid-column: 1 / -1;
}
.ck-titulo span { color: var(--rose); font-style: italic; }

/* ── Tarjeta genérica ── */
.ck-card {
    background: var(--white);
    border: 1px solid #8e8787;
    border-radius: 2px;
    padding: 28px 28px 24px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}
.ck-card-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: #2b2b2b;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ck-card-titulo .num {
    width: 24px; height: 24px;
    background: #6b6a6a;
    border-radius: 50%;
    color: #fff;
    font-size: .72rem;
    font-family: 'Jost', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Campos del formulario ── */
.ck-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 520px) {
    .ck-grid-2, .ck-grid-3 { grid-template-columns: 1fr; }
}
.ck-field { display: flex; flex-direction: column; gap: 5px; }
.ck-field.full { grid-column: 1 / -1; }
.ck-label {
    font-family: 'Jost', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: #232222;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ck-input, .ck-select, .ck-textarea {
    font-family: 'Jost', sans-serif;
    font-size: .92rem;
    color: #232222;
    background: var(--bg);
    border: 1px solid #767272;
    border-radius: 2px;
    padding: 10px 14px;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
}
.ck-input:focus, .ck-select:focus, .ck-textarea:focus {
    outline: none;
    border-color: #2b2b2b;
    box-shadow: 0 0 0 3px rgba(128, 127, 127, 0.15);
}
.ck-textarea { resize: vertical; min-height: 80px; }
.ck-hint {
    font-size: .72rem;
    color: #8a8f8d;
    font-family: 'Jost', sans-serif;
    margin-top: -3px;
}

/* ── Bloque de calcular envío ── */
.ck-envio-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.ck-envio-row .ck-input { flex: 1; }
.btn-calcular {
    font-family: 'Jost', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--white);
    background: #484848;
    border: none;
    border-radius: 2px;
    padding: 10px 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    flex-shrink: 0;
}
.btn-calcular:hover { background: #2b2b2b; }
.btn-calcular:disabled { opacity: .6; cursor: not-allowed; }

#envio-resultado {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 2px;
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    display: none;
}
#envio-resultado.ok  { background: #e3f5e8; color: #3c3b3d; border: .5px solid #b5e0c5; }
#envio-resultado.err { background: #fdf0f2; color: #9e4357; border: 1px solid #f0bbc6; }

/* ── Resumen de productos ── */
.ck-producto {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #800000;
}
.ck-producto:last-child { border-bottom: none; }
.ck-prod-img {
    width: 56px; height: 56px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--rose-lt);
}
.ck-prod-info { flex: 1; }
.ck-prod-nombre {
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: #232222;
    margin: 0 0 3px;
}
.ck-prod-extras {
    list-style: none;
    padding: 0; margin: 3px 0 0;
    font-size: .76rem;
    color: #232222;
    font-family: 'Jost', sans-serif;
}
.ck-prod-extras li::before { content: '✦ '; color: var(--rose); }
.ck-prod-cant {
    font-size: .76rem;
    color: #232222;
    font-family: 'Jost', sans-serif;
    margin-top: 2px;
}
.ck-prod-precio {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: #232222;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 4px;
}

/* ── Panel derecho de costos ── */
.ck-resumen-panel {
    position: sticky;
    top: 20px;
}
.ck-costos { padding: 0; }
.ck-costo-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-family: 'Jost', sans-serif;
    font-size: .9rem;
    color: #232222;
    border-bottom: 1px solid #232222;
}
.ck-costo-fila:last-child { border-bottom: none; }
.ck-costo-fila .etiq { color: #232222; font-size: .85rem; }
.ck-costo-fila.total-fila {
    padding-top: 14px;
    margin-top: 4px;
}
.ck-costo-fila.total-fila .etiq {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #232222;
    letter-spacing: .04em;
}
.ck-costo-fila.total-fila .val {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #232222;
}
.val-envio-pendiente {
    font-size: .78rem;
    color: var(--muted);
    font-style: italic;
}

/* ── Dedicatoria toggle ── */
.ck-toggle-dedicatoria {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: 'Jost', sans-serif;
    font-size: .9rem;
    color: #232222;
    margin-bottom: 14px;
}
.ck-toggle-dedicatoria input[type=checkbox] { accent-color: #131313; width: 16px; height: 16px; cursor: pointer; }
#bloque-dedicatoria { display: none; }
#bloque-dedicatoria.visible { display: grid; }

.ck-contador {
    font-size: .72rem;
    color: var(--muted);
    font-family: 'Jost', sans-serif;
    text-align: right;
    margin-top: -8px;
}

/* ── Botón confirmar ── */
.btn-confirmar {
    width: 100%;
    padding: 16px;
    background: #363636;
    color: var(--white);
    border: none;
    border-radius: 2px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .25s, transform .15s;
    margin-top: 16px;
}
.btn-confirmar:hover { background: #232222; transform: translateY(-1px); }
.btn-confirmar:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ck-aviso {
    font-family: 'Jost', sans-serif;
    font-size: .74rem;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
    line-height: 1.5;
}

/* ── Validación visual ── */
.ck-input.invalido, .ck-select.invalido, .ck-textarea.invalido {
    border-color: #e57373;
    box-shadow: 0 0 0 3px rgba(229,115,115,.12);
}
.ck-error-msg {
    font-size: .72rem;
    color: #c62828;
    font-family: 'Jost', sans-serif;
    display: none;
}
.ck-error-msg.visible { display: block; }

/* ═══ Auth: login.php y registro.php ═══ */
.auth-wrap {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    background: #fdfaf9;
}
.auth-card {
    background: #fff;
    border: 1px solid #e8d8de;
    border-radius: 16px;
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 24px rgba(180,100,120,.10);
    text-align: center;
}
.auth-flor { font-size: 1.8rem; color: #c9849a; }
.auth-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    font-weight: 300;
    color: #2d2020;
    margin: 10px 0 4px;
    letter-spacing: .04em;
}
.auth-sub {
    font-family: 'Jost', sans-serif;
    font-size: .82rem;
    color: #8a7070;
    margin-bottom: 24px;
}
.auth-alerta {
    background: #fdf0f2;
    color: #a5324a;
    border: 1px solid #f0bbc6;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: 'Jost', sans-serif;
    font-size: .85rem;
    margin-bottom: 18px;
    text-align: left;
}
.auth-form { text-align: left; }
.auth-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.auth-label {
    font-family: 'Jost', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    color: #8a7070;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.auth-input {
    font-family: 'Jost', sans-serif;
    font-size: .92rem;
    color: #2d2020;
    background: #fdfaf9;
    border: 1px solid #e8d8de;
    border-radius: 8px;
    padding: 11px 14px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
}
.auth-input:focus {
    outline: none;
    border-color: #c9849a;
    box-shadow: 0 0 0 3px rgba(201,132,154,.15);
}
.auth-pass-wrap { position: relative; }
.auth-pass-wrap .auth-input { padding-right: 42px; }
.auth-eye {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #8a7070;
    padding: 0;
    display: flex;
    align-items: center;
}
.auth-eye:hover { color: #c9849a; }
.auth-btn {
    width: 100%;
    padding: 13px;
    background: #a5627a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .1em;
    cursor: pointer;
    margin-top: 6px;
    transition: background .2s, transform .15s;
}
.auth-btn:hover { background: #c9849a; transform: translateY(-1px); }
.auth-link-txt {
    font-family: 'Jost', sans-serif;
    font-size: .84rem;
    color: #8a7070;
    margin-top: 22px;
}
.auth-link {
    color: #a5627a;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #e8d8de;
    transition: color .2s, border-color .2s;
}
.auth-link:hover { color: #c9849a; border-color: #c9849a; }

/*==================================================
                CONFIRMACION.PHP                    
===================================================*/
        body {
            font-family: Arial, sans-serif;
            background: #f8f8f8;
            margin: 0;
            padding: 0;
            color: #333;
        }

        .conf-wrap {
            max-width: 850px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .conf-badge {
            display: inline-block;
            padding: 10px 16px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .conf-badge.ok {
            background: #d1fae5;
            color: #065f46;
        }

        .conf-badge.err {
            background: #fee2e2;
            color: #991b1b;
        }

        .conf-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin-top: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
        }

        .conf-card h3 {
            margin-top: 0;
            margin-bottom: 16px;
        }

        .conf-table {
            width: 100%;
            border-collapse: collapse;
        }

        .conf-table th,
        .conf-table td {
            padding: 10px;
            border-bottom: 1px solid #e5e7eb;
            text-align: left;
            font-size: 14px;
        }

        .conf-total td {
            font-weight: bold;
        }

        .conf-actions {
            margin-top: 30px;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn-primary,
        .btn-outline {
            display: inline-block;
            text-decoration: none;
            padding: 12px 18px;
            border-radius: 2px;
            font-size: 14px;
            transition: .2s ease;
        }

        .btn-primary {
            background: #524f50;
            color: white;
        }

        .btn-primary:hover {
            background: #5e5b5c;
        }

        .btn-outline {
            border: 1px solid #ccc;
            color: #333;
            background: white;
        }

        .btn-outline:hover {
            background: #f3f4f6;
        }

.sobre-nosotros {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sobre-nosotros .contenedor {
    display: flex;
    flex-direction: row;      
    align-items: center;      
    justify-content: space-between;
    margin-bottom: 90px;      
    gap: 60px;                
}

.sobre-nosotros .contenedor.reverse {
    flex-direction: row-reverse;
}

.sobre-nosotros .texto,
.sobre-nosotros .imagen {
    flex: 1;
    width: 50%;
}

.sobre-nosotros .texto h2 {
    font-size: 2.8rem;        
    color: #bfa396;           
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;   
}

.sobre-nosotros .texto p {
    font-size: 1.1rem;
    line-height: 1.8;         
    color: #555;              
}

.sobre-nosotros .imagen img {
    width: 100%;
    max-width: 380px;         
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;      
    box-shadow: 0 10px 25px rgba(191, 163, 150, 0.15); 
    transition: transform 0.3s ease; 
}

@media (max-width: 768px) {
    .sobre-nav-container,
    .sobre-nosotros .contenedor,
    .sobre-nosotros .contenedor.reverse {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        margin-bottom: 60px;
    }
    .sobre-nosotros .texto,
    .sobre-nosotros .imagen {
        width: 100%;
    }
    .sobre-nosotros .texto h2 {
        font-size: 2.2rem;    
    }
}
.sobre-nosotros-bienvenida {
    text-align: center;
    padding: 60px 20px 20px 20px;
}
.sobre-nosotros-bienvenida h1 {
    font-size: 3.5rem;
    color: #bfa396;
    margin-bottom: 10px;
    font-family: 'Playfair Display', Georgia, serif; /* O una letra elegante */
}
.sobre-nosotros-bienvenida p {
    font-size: 1.3rem;
    color: #888;
    font-style: italic;
}

/*=========================
    mis pedidos
    =========================*/
    /* ── Variables ── */
:root {
    --mp-rose:   #a5627a;
    --mp-rose-lt:#f5e8ed;
    --mp-ink:    #afacac;
    --mp-muted:  #8a7070;
    --mp-border: #dadada;
    --mp-bg:     #fdfaf9;
}

/* ── Layout ── */
.mp-wrap {
    max-width: 780px;
    margin: 44px auto 80px;
    padding: 0 20px;
}

/* ── Encabezado ── */
.mp-header { margin-bottom: 32px; }
.mp-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 300;
    color: var(--mp-ink);
    margin: 0 0 6px;
    letter-spacing: .03em;
}
.mp-sub {
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    color: var(--mp-muted);
}

/* ── Sin pedidos ── */
.mp-vacio {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid var(--mp-border);
    border-radius: 16px;
}
.mp-vacio-icono {
    font-size: 2.5rem;
    color: var(--mp-rose);
    margin-bottom: 16px;
}
.mp-vacio-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--mp-ink);
    margin: 0 0 6px;
}
.mp-vacio-sub {
    font-family: 'Jost', sans-serif;
    font-size: .85rem;
    color: var(--mp-muted);
    margin-bottom: 24px;
}
.mp-btn-comprar {
    display: inline-block;
    padding: 12px 28px;
    background: var(--mp-rose);
    color: #fff;
    border-radius: 8px;
    font-family: 'Jost', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: .06em;
    transition: background .2s;
}
.mp-btn-comprar:hover { background: #7d4560; }

/* ── Lista de tarjetas ── */
.mp-lista { display: flex; flex-direction: column; gap: 16px; }

.mp-card {
    background: #fff;
    border: 1px solid var(--mp-ink);
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.mp-card:hover { box-shadow: 0 4px 20px rgba(180,100,120,.13); }

/* Cabecera de tarjeta */
.mp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--mp-border);
    background: #e2e2e2;
}
.mp-folio {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #424040;
    letter-spacing: .03em;
}
.mp-fecha {
    font-family: 'Jost', sans-serif;
    font-size: .76rem;
    color: #424040;
    margin-top: 2px;
    display: block;
}
.mp-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Badges de estado */
.mp-badge {
    font-family: 'Jost', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.mp-badge-pendiente   { background: #e4c97e; color: #ffffff; }
.mp-badge-confirmado  { background: #57a875; color: #ffffff; }
.mp-badge-preparado   { background: #4c79ce; color: #ffffff; }
.mp-badge-camino      { background: #c07b3b; color: #ffffff; }
.mp-badge-entregado   { background: #33ad62; color: #ffffff; }
.mp-badge-cancelado   { background: #7a2121; color: #ffffff; }
.mp-badge-pagado          { background: #2a7a47; color: #ffffff; }
.mp-badge-pendiente-pago  { background: #b08000; color: #ffffff; }

/* Cuerpo de tarjeta */
.mp-card-body { padding: 16px 20px; }
.mp-datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
@media (max-width: 520px) {
    .mp-datos { grid-template-columns: 1fr 1fr; }
}
.mp-dato { display: flex; flex-direction: column; gap: 3px; }
.mp-dato-label {
    font-family: 'Jost', sans-serif;
    font-size: .7rem;
    color: var(--mp-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mp-dato-val {
    font-family: 'Jost', sans-serif;
    font-size: .85rem;
    color: var(--mp-ink);
}

/* Footer de tarjeta */
.mp-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--mp-border);
}
.mp-total {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--mp-ink);
}
.mp-btn-ver {
    font-family: 'Jost', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: #7e7b7b;
    text-decoration: none;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--mp-ink);
    padding-bottom: 1px;
    transition: color .2s, border-color .2s;
}
.mp-btn-ver:hover { color: rgb(80, 73, 76); border-color: #7e7278; }

/*=========================
 mis pedido ver
 ===========================
 */
 /* Reutiliza variables de mis_pedidos.php */
.mp-volver {
    font-family: 'Jost', sans-serif;
    font-size: .84rem;
    color: #2c2c2c;
    text-decoration: none;
    transition: color .2s;
}
.mp-volver:hover { color: var(--mp-rose); }

/* Grid de detalle */
.mpv-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    margin-top: 20px;
}
@media (max-width: 720px) { .mpv-grid { grid-template-columns: 1fr; } }

/* Tarjetas */
.mpv-card {
    background: #fff;
    border: 1px solid var(--mp-ink);
    border-radius: 2px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(180,100,120,.07);
}
.mpv-card-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-weight: 600;
    color:  var(--mp-ink);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mp-border);
}

/* Producto */
.mpv-producto {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #faf0f0;
}
.mpv-producto:last-of-type { border-bottom: none; }
.mpv-prod-img {
    width: 50px; height: 50px;
    border-radius: 3px; object-fit: cover;
    background: #f5e8ed; flex-shrink: 0;
}
.mpv-prod-nombre {
    font-family: 'Jost', sans-serif;
    font-size: .88rem; font-weight: 500;
    color: var(--mp-ink); margin: 0 0 3px;
}
.mpv-prod-det { font-size: .76rem; color: var(--mp-muted); margin: 0; }
.mpv-prod-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem; font-weight: 600;
    color: var(--mp-ink); white-space: nowrap;
}

/* Datos de entrega y resumen */
.mpv-dato-fila {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f5eef0;
    font-family: 'Jost', sans-serif;
    font-size: .85rem;
    gap: 12px;
}
.mpv-dato-fila:last-of-type { border-bottom: none; }
.mpv-dato-label { color: var(--mp-muted); font-size: .82rem; flex-shrink: 0; }
.mpv-dato-val   { text-align: right; color: var(--mp-ink); }
.mpv-total-fila {
    padding-top: 12px; margin-top: 4px;
    border-top: 1px solid var(--mp-border);
    font-weight: 600; font-size: .95rem;
    border-bottom: none;
}
.mpv-estado-pago {
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-family: 'Jost', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    margin-top: 14px;
}
.mpv-estado-ok   { background: #57a875; color: #ffffff; }
.mpv-estado-pend { background: #e4c97e; color: #ffffff; }