:root {
    --ab-brown: #3a2722;
    --ab-dark-brown: #261d1a;
    --ab-terracotta: #7a4a3d;
    --ab-rust: #a96d4b;
    --ab-bronze: #c49a6d;
    --ab-ivory: #f6efe9;
    --ab-sand: #e5d3c3;
    --ab-blush: #d8b8a8;
    --ab-rose: #c78670;
    --ab-mocha: #5b3c35;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(180deg, #f1e8df 0%, #f8f2ee 100%);
    color: var(--ab-dark-brown);
}

.hero-intro {
    margin: 0 auto;
    max-width: 1100px;
    padding: 34px 20px 12px;
    text-align: center;
}

.hero-intro h1,
.hero-intro h2 {
    color: var(--ab-brown);
    font-size: clamp(2rem, 2vw + 1rem, 3rem);
    letter-spacing: 0.04em;
    margin: 0 0 12px;
}

.hero-intro p {
    color: rgba(58, 39, 34, 0.8);
    font-size: 1.06rem;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 880px;
}

.promociones-section {
    max-width: 1100px;
    margin: 28px auto 10px;
    padding: 0 20px 10px;
}

.promociones-header {
    text-align: center;
    margin-bottom: 22px;
}

.supertitulo-promociones {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ab-terracotta);
    font-weight: 700;
    margin-bottom: 10px;
}

.promociones-header h2 {
    margin: 0;
    color: var(--ab-brown);
    font-size: clamp(1.8rem, 2vw + 0.8rem, 2.8rem);
}

.promociones-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 20px;
    align-items: stretch;
}

.promo-card {
    background: linear-gradient(180deg, #fffafa 0%, #f8f0ee 100%);
    border: 1px solid rgba(122, 74, 61, 0.12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(58, 39, 34, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.promo-card-principal {
    grid-column: span 1;
}

.promo-imagen {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.promo-imagen img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.promo-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #8b3f32;
    color: #fff;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.promo-contenido {
    padding: 22px 20px 20px;
}

.promo-categoria {
    display: inline-block;
    font-size: 0.76rem;
    color: var(--ab-terracotta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.promo-card h3 {
    margin: 0 0 10px;
    color: var(--ab-dark-brown);
    font-size: 1.5rem;
}

.promo-card p {
    color: rgba(38, 29, 26, 0.8);
    margin: 0 0 18px;
    line-height: 1.6;
}

.promo-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.promo-precio {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ab-brown);
}

.promo-cta {
    display: inline-block;
    background: var(--ab-brown);
    color: #fff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 600;
}

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

    .promo-card-principal {
        grid-column: auto;
    }
}

.foto-form input[type="file"] { display: none; }
.foto-form label.btn { display: inline-block; }
.campo-password { position: relative; }
.campo-password input { padding-right: 44px; }
.campo-password .ver-password { background: transparent; color: #525252; font-size: 17px; padding: 0; position: absolute; right: 10px; top: 18px; width: auto; }
.campo-password .ver-password:hover { background: transparent; color: var(--ab-rust); }
.oculto { display: none; }
.notificacion-modal { border-radius: 8px; color: #fff; font-weight: 600; margin: 0 auto 15px; padding: 11px 14px; text-align: center; width: 100%; box-sizing: border-box; }
.notificacion-modal.roja { background: #c62828; }
.notificacion-modal.amarilla { background: #d99a00; color: #221900; }
.notificacion-modal.verde { background: #2e8b57; }

/* CONTENEDOR */
.login-container {
    display: flex;
    height: 100vh;
}

/* LADO IZQUIERDO */
.left {
    width: 50%;
    
    /* IMAGEN DE FONDO */
    background-image: url("IMG/logo.png"); /* AJUSTA LA RUTA */

    background-size: cover;       /* llena todo */
    background-position: center;  /* centrada */
    background-repeat: no-repeat;

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

    /* CAPA ROSADA ENCIMA */
    position: relative;
}

/* CAPA ROSADA SUAVE (como prototipo) */
.left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(255, 153, 204, 0); /* rosado transparente */
}

/* TEXTO ENCIMA DE TODO */
.left h1,
.left p {
    position: relative;
    z-index: 1;
    color: #ec81b7;
}

.left img {
    width: 150px;
    margin-bottom: 20px;
}

.left h1 {
    font-size: 28px;
}

.left p {
    font-size: 16px;
}

/* LADO DERECHO */
.right {
    width: 50%;
    background: rgb(255, 222, 242);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.form-wrapper {
    width: 300px;
    text-align: center;
    padding-top: 20px;
    position: relative;
}

form {
    width: 100%;
    text-align: center;
}

.error-box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: calc(100% - 40px);
    max-width: 300px;
    background: #ff6b6b;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    box-sizing: border-box;
    z-index: 2;
}

.error-box p {
    margin: 0;
    font-weight: 600;
}

h2 {
    color: #000000;
}

/* INPUTS */
input, select {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ffcce0;
}

/* BOTÓN */
button {
    width: 100%;
    padding: 10px;
    background: #ff66a3;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

button:hover {
    background: #ffd0e3;
}

a {
    color: #ff66a3;
    text-decoration: none;
}

body {
    margin: 0;
    font-family: Arial;
}

/* HEADER */
.header {
    background: #ebc9d9;
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 10;
}

/* TITULO */
.titulo {
    font-family: serif;
    font-size: 50px;
    color: #6e6e6e;
    letter-spacing: 3px;
}

/* CARRITO */
.carrito {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 30px;
    cursor: pointer;
    z-index: 2;
}

/* MENU */
.menu {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    position: relative;
    z-index: 11;
}

/* BOTONES */
.item {
    background: #d9d9d9;
    padding: 10px 20px;
    border-radius: 30px;
    border: 2px solid black;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

/* HOVER */
.item:hover {
    background: #e6b3cc;
}

/* SUBMENU */
.submenu {
    display: none;
    position: absolute;
    z-index: 20;
    
    top: 100%; /* CLAVE: justo debajo */
    left: 50%;
    transform: translateX(-50%);

    background: #d9d9d9;
    border-radius: 15px;
    padding: 10px;

    width: 220px;
    text-align: center;
}

.submenu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black;
}

.submenu a:hover {
    background: #e6b3cc;
}

/* ACTIVAR */

.dropdown {
    position: relative; /* CLAVE */
}

.dropdown.active .submenu {
    display: block;
}

.submenu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: black;
}

.submenu a:hover {
    background: #e6b3cc;
    border-radius: 10px;
}

/* CABECERA ESTILO PLATAFORMA */
.header {
    background: linear-gradient(135deg, #2a1f1d 0%, #5b3e36 26%, #8a5d4d 55%, #d9b79c 100%);
    border: 0;
    border-radius: 32px;
    box-shadow: 0 12px 24px rgba(58, 39, 34, .18);
    color: #fff;
    margin: 26px 30px 0;
    overflow: visible;
    padding: 0 30px;
    position: relative;
    text-align: left;
}

.barra-principal { align-items: flex-start; display: flex; margin: 0 auto; max-width: 1380px; min-height: 128px; position: relative; }
.marca { align-items: center; color: #fff; display: flex; flex: 0 0 auto; gap: 10px; position: relative; top: 12px; z-index: 2; }
.logo-header { background: transparent; border-radius: 0; height: 84px; object-fit: contain; padding: 0; width: 112px; }
.nombre-marca { display: none; }
.header .menu { align-items: center; display: flex; gap: 4px; justify-content: flex-start; left: 132px; margin: 0; min-width: max-content; position: absolute; top: 50px; z-index: 3; }
.header .item { align-items: center; background: transparent; border: 0; border-radius: 5px; color: #fff; display: flex; font-size: 20px; font-weight: 700; gap: 4px; letter-spacing: 0; padding: 12px 8px; text-transform: none; }
.header .item:hover, .header .dropdown.active .item-trigger { background: rgba(255,255,255,.12); color: #fff; }
.item-trigger { background: transparent; color: inherit; font: inherit; padding: 0; width: auto; }
.item-trigger:hover { background: transparent; }
.menu-icon { border: 2px solid rgba(255,255,255,.8); border-radius: 50%; display: inline-block; height: 25px; margin-right: 2px; object-fit: cover; vertical-align: middle; width: 25px; }
.header .submenu { background: rgba(255,255,255,.18); backdrop-filter: blur(8px); border: 0; border-radius: 0 0 28px 28px; box-shadow: 0 8px 18px rgba(32, 20, 17, .18); left: 50%; padding: 6px 10px 16px; top: 100%; transform: translateX(-50%); width: 192px; }
.header .submenu a { border-radius: 0; color: #fff; font-size: 15px; padding: 7px 4px; text-align: center; }
.header .submenu a:hover { background: rgba(255,255,255,.14); color: #fff; }
.acciones-header { align-items: center; display: contents; }
.acceso-cuenta { align-items: center; display: flex; gap: 10px; }
.header:not(.header-admin) .acceso-cuenta { position: absolute; right: 0; top: 14px; z-index: 4; }
.saludo { color: #f9eee9; font-size: 12px; }
.acceso-link { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.acceso-link:hover { color: #f9dccd; }
.boton-link { background: transparent; padding: 0; width: auto; }
.boton-link:hover { background: transparent; }
.carrito { bottom: 12px; color: #f7e8df; font-size: 22px; position: absolute; right: 12px; z-index: 4; }
.carrito:hover { color: #f9dccd; }
.contador-carrito { background: #c77a59; border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 5px; position: absolute; right: -11px; top: -8px; }
.perfil-menu { position: relative; }
.header-admin > .barra-principal > .perfil-menu { position: absolute; right: 0; top: 14px; z-index: 4; }
.perfil-trigger { align-items: center; background: rgba(255,255,255,.18); border: 0; border-radius: 50%; box-sizing: border-box; color: #fff; display: flex; height: 58px; justify-content: center; overflow: hidden; padding: 0; width: 58px; }
.perfil-trigger:hover { background: rgba(255,255,255,.24); }
.perfil-trigger img { height: 100%; object-fit: cover; width: 100%; }
.avatar-generico { color: #f8eef3; font-size: 33px; line-height: 1; }
.visitante-trigger { margin-left: 2px; }
.perfil-submenu { background: #2b201e; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; box-shadow: 0 12px 28px rgba(0,0,0,.25); display: none; min-width: 180px; padding: 12px; position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; }
.perfil-menu.active .perfil-submenu { display: block; }
.perfil-submenu strong { color: #fff; display: block; font-size: 13px; margin-bottom: 8px; }
.perfil-submenu a { border-radius: 4px; color: #f5eaf2; display: block; font-size: 13px; padding: 9px; }
.perfil-submenu a:hover { background: rgba(255,255,255,.08); color: #fff; }
.perfil-submenu .contador-respuestas { background: #c77a59; border-radius: 10px; color: #fff; display: inline-block; font-size: 11px; font-weight: 700; line-height: 1; margin-left: 5px; min-width: 16px; padding: 3px 5px; text-align: center; }
.header-admin .menu { gap: 5px; }
.header-admin .menu a { align-items: center; color: #fff; display: flex; font-size: 16px; font-weight: 700; gap: 4px; padding: 12px 8px; }
.header-admin .menu a:hover { background: rgba(255,255,255,.14); border-radius: 5px; color: #fff; }
.admin-etiqueta { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .7px; margin-right: 8px; text-transform: uppercase; white-space: nowrap; }
.admin-usuario { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }

@media (max-width: 900px) {
    .header { margin: 20px 16px 0; padding: 0 16px; }
    .barra-principal { min-height: 144px; padding: 10px 0; }
    .header .menu { left: 112px; justify-content: flex-start; max-width: calc(100% - 112px); overflow-x: auto; top: 50px; transform: none; width: calc(100% - 112px); }
    .header:not(.header-admin) .acceso-cuenta { right: 0; top: 10px; }
    .header-admin > .barra-principal > .perfil-menu { right: 0; top: 10px; }
    .saludo { display: none; }
    .logo-header { height: 76px; width: 100px; }
    .nombre-marca { font-size: 17px; }
}

@media (max-width: 560px) {
    .nombre-marca { display: none; }
    .logo-header { height: 68px; width: 88px; }
    .header .menu { left: 92px; max-width: calc(100% - 92px); top: 48px; transform: none; width: calc(100% - 92px); }
    .header .item, .header-admin .menu a { font-size: 14px; padding: 10px 5px; }
    .menu-icon { height: 20px; width: 20px; }
    .acceso-link { font-size: 10px; }
    .header-admin .menu { gap: 0; }
    .admin-etiqueta { display: none; }
}

/* CONTENEDOR */
.slider {
    height: 520px;
    margin: 20px auto 40px;
    overflow: hidden;
    position: relative;
    width: min(82%, 1200px);
    border-radius: 30px;
    box-shadow: 0 24px 40px rgba(58, 39, 34, .14);
    background: linear-gradient(135deg, rgba(107, 72, 60, .1), rgba(197, 155, 116, .08));
}

    .inicio-sesion-titulo {
        color: #481b18;
        font-size: 1.35rem;
        margin: 18px auto 8px;
        max-width: 1180px;
        padding: 0 20px;
    }

    .inicio-collage-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        margin: 0 auto 24px;
        max-width: 1180px;
        padding: 0 20px;
    }

    .inicio-collage-grid img {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        object-fit: cover;
        width: 100%;
    }

    .estilo-slider-2 .slider-centro {
        transform: scale(1.08);
    }

    .estilo-slider-3 .slider-pista {
        gap: 12px;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .estilo-slider-3 .slider-pista img {
        flex: 0 0 30%;
    }

.slider-pista {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: 100%;
    transition: grid-template-columns .8s ease, gap .8s ease;
}

.slider img {
    border-radius: 28px;
    display: block;
    height: 520px;
    min-width: 0;
    object-fit: cover;
    transition: opacity .8s ease, transform .8s ease, filter .8s ease;
    width: 100%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    filter: saturate(0.9) contrast(1.02);
}

.slider-enfocado .slider-pista {
    gap: 0;
    grid-template-columns: 0fr minmax(0, 1fr) 0fr;
}

.slider-enfocado .slider-pista img:not(.slider-centro) {
    opacity: 0;
    transform: translateY(-110%);
}

.slider-enfocado .slider-centro {
    border-radius: 24px;
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.08);
}

@media (max-width: 700px) {
    .slider {
        height: 360px;
        width: 92%;
    }

    .slider img {
        height: 360px;
    }

    .slider-pista {
        gap: 10px;
    }
}

/* TEMA MINIMALISTA DE LUJO */
:root {
    --ab-carbon: #403834;
    --ab-taupe: #75665d;
    --ab-ivory: #f8f5f0;
    --ab-beige: #cdbfb3;
    --ab-pink: #d5b7b1;
    --ab-rose: #a97878;
    --ab-bronze: #b99a70;
    --ab-wine: #481b18;
    --ab-terracotta-deep: #743629;
    --ab-copper: #b87552;
    --ab-clay: #b9957d;
}

body {
    background: linear-gradient(145deg, #f8f3ed 0%, #eadbd0 52%, #f7eee9 100%);
    color: var(--ab-carbon);
}

a {
    color: var(--ab-bronze);
}

button {
    background: var(--ab-carbon);
    color: var(--ab-ivory);
}

button:hover {
    background: var(--ab-bronze);
}

input,
select,
textarea {
    background: var(--ab-ivory);
    border-color: var(--ab-beige);
    color: var(--ab-carbon);
}

.header,
.header-admin {
    background: linear-gradient(115deg, var(--ab-wine) 0%, var(--ab-terracotta-deep) 48%, #9b6248 100%);
    border-color: var(--ab-wine);
    box-shadow: 0 8px 18px rgba(37, 35, 34, .18);
}

.header .item,
.header .item-trigger,
.header .menu a,
.nombre-marca,
.acceso-link,
.admin-etiqueta,
.admin-usuario {
    color: var(--ab-ivory);
}

.header .item:hover,
.header .dropdown.active .item-trigger {
    background: rgba(224, 174, 143, .24);
    color: var(--ab-ivory);
}

.header .submenu {
    background: rgba(116, 54, 41, .96);
}

.header .submenu a {
    color: var(--ab-ivory);
}

.header .submenu a:hover {
    background: var(--ab-copper);
    color: #fffaf5;
}

.perfil-trigger {
    background: var(--ab-taupe);
}

.perfil-trigger:hover,
.carrito:hover,
.acceso-link:hover {
    color: var(--ab-pink);
}

.perfil-submenu {
    background: var(--ab-carbon);
    border-color: var(--ab-taupe);
}

.slider-pista img {
    border-color: var(--ab-beige);
}

.mejores-descuentos,
.producto-presentacion,
.formulario-reseña,
.aviso-reseña,
.mensaje-reseña,
.reseñas-vacias {
    background: var(--ab-pink);
    border-color: var(--ab-beige);
}

.descuento-card,
.reseña-item {
    background: var(--ab-ivory);
    border-color: var(--ab-beige);
}

.descuento-imagen,
.producto-foto-detalle {
    background: var(--ab-beige);
}

.supertitulo-descuentos,
.categoria-descuento,
.categoria-detalle,
.enlace-detalle {
    color: var(--ab-bronze);
}

.encabezado-descuentos h2,
.descuento-contenido h3,
.producto-info-detalle h1,
.producto-info-detalle h2,
.encabezado-reseñas h2,
.formulario-reseña h3 {
    color: var(--ab-carbon);
}

.encabezado-descuentos p,
.descripcion-detalle,
.beneficio-detalle,
.reseña-contenido p {
    color: var(--ab-taupe);
}

.insignia-descuento,
.precio-descuento,
.precio-detalle,
.estrellas-detalle,
.estrellas-reseña {
    color: var(--ab-bronze);
    display: inline-flex;
    gap: 4px;
    letter-spacing: 1px;
}

.estrellas-detalle .estrella,
.estrellas-reseña .estrella {
    color: #c9beb8;
    font-size: 1.1rem;
}

.estrellas-detalle .estrella.filled,
.estrellas-reseña .estrella.filled {
    color: var(--ab-bronze);
}

.insignia-descuento {
    background: var(--ab-carbon);
    color: var(--ab-ivory);
}

.descuento-contenido button,
.boton-detalle,
.formulario-reseña button {
    background: var(--ab-carbon);
}

.descuento-contenido button:hover,
.boton-detalle:hover,
.formulario-reseña button:hover {
    background: var(--ab-bronze);
}

.avatar-reseña {
    background: var(--ab-beige);
    color: var(--ab-carbon);
}

.acciones-reseña button {
    background: var(--ab-ivory);
    border-color: var(--ab-beige);
    color: var(--ab-carbon);
}

.acciones-reseña button:hover {
    background: var(--ab-pink);
}

.acciones-reseña .boton-reportar {
    background: transparent;
    color: var(--ab-bronze);
}

/* DESCUENTOS DEL INICIO */
.mejores-descuentos {
    background: linear-gradient(135deg, rgba(255, 250, 245, .9), rgba(232, 210, 198, .78));
    border-top: 1px solid rgba(184, 117, 82, .45);
    border-bottom: 1px solid rgba(184, 117, 82, .45);
    margin: 70px auto 50px;
    max-width: 1180px;
    padding: 42px 24px 48px;
}

.encabezado-descuentos {
    margin-bottom: 30px;
    text-align: center;
}

.supertitulo-descuentos {
    color: var(--ab-terracotta-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.encabezado-descuentos h2 {
    color: var(--ab-wine);
    font-family: Georgia, serif;
    font-size: 36px;
    margin: 8px 0;
    text-transform: capitalize;
}

.encabezado-descuentos p {
    color: var(--ab-taupe);
    margin: 0;
}

.descuentos-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.descuento-card {
    background: rgba(255, 251, 247, .94);
    border: 1px solid rgba(184, 117, 82, .42);
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(72, 27, 24, .13);
    overflow: hidden;
}

.descuento-card:nth-child(2) {
    background: rgba(247, 237, 229, .96);
}

.descuento-card:nth-child(3) {
    background: rgba(239, 222, 211, .96);
}

.descuento-imagen {
    background: linear-gradient(145deg, #f8eee7, var(--ab-clay));
    height: 240px;
    position: relative;
}

.descuento-imagen img {
    height: 100%;
    object-fit: contain;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
}

.insignia-descuento {
    background: var(--ab-wine);
    border-radius: 0 0 12px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    left: 0;
    padding: 11px 15px;
    position: absolute;
    top: 0;
    z-index: 1;
}

.descuento-contenido {
    padding: 20px 22px 24px;
    text-align: center;
}

.categoria-descuento {
    color: var(--ab-terracotta-deep);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.descuento-contenido h3 {
    color: var(--ab-wine);
    font-size: 18px;
    min-height: 43px;
    margin: 9px 0;
}

.precio-anterior {
    color: #958a90;
    margin: 0;
    text-decoration: line-through;
}

.precio-descuento {
    color: var(--ab-terracotta-deep);
    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    margin: 4px 0 14px;
}

.descuento-contenido button {
    background: var(--ab-wine);
    border-radius: 30px;
    font-size: 13px;
    padding: 11px 18px;
    width: auto;
}

.descuento-contenido button:hover {
    background: var(--ab-copper);
}

.nombre-producto {
    color: inherit;
}

.enlace-detalle {
    color: var(--ab-copper);
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    text-decoration: underline;
}

.enlace-detalle:hover,
.nombre-producto:hover {
    color: var(--ab-terracotta-deep);
}

/* DETALLE Y RESEÑAS */
.detalle-producto {
    margin: 0 auto;
    max-width: 1100px;
    padding: 30px 24px 70px;
}

.volver-productos {
    color: #525252;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 22px;
}

.volver-productos:hover {
    color: #ff66a3;
}

.producto-presentacion {
    background: #fff0f5;
    border: 1px solid #ebc9d9;
    border-radius: 20px;
    display: grid;
    gap: 48px;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    padding: 38px;
}

.producto-foto-detalle {
    align-items: center;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    min-height: 390px;
}

.producto-foto-detalle img {
    height: 100%;
    max-height: 370px;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.producto-info-detalle {
    align-self: center;
}

.categoria-detalle {
    color: #b35b7a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.producto-info-detalle h1 {
    color: #525252;
    font-family: Georgia, serif;
    font-size: 42px;
    line-height: 1.1;
    margin: 12px 0;
}

.valoracion-detalle {
    align-items: center;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.estrellas-detalle,
.estrellas-reseña {
    color: #ff66a3;
    letter-spacing: 2px;
}

.precio-detalle {
    color: #ff66a3;
    font-family: Georgia, serif;
    font-size: 30px;
    font-weight: 700;
    margin: 20px 0 12px;
}

.descripcion-detalle,
.beneficio-detalle {
    color: #5f555b;
    line-height: 1.7;
}

.producto-info-detalle h2 {
    color: #525252;
    font-family: Georgia, serif;
    font-size: 23px;
    margin: 26px 0 6px;
}

.boton-detalle {
    background: #525252;
    border-radius: 30px;
    margin-top: 14px;
    max-width: 230px;
}

.boton-detalle:hover {
    background: #ff66a3;
}

.reseñas-producto {
    margin-top: 55px;
}

.encabezado-reseñas {
    margin-bottom: 22px;
}

.encabezado-reseñas h2 {
    color: #525252;
    font-family: Georgia, serif;
    font-size: 32px;
    margin: 8px 0 0;
}

.reseña-item {
    background: #fff;
    border-bottom: 1px solid #ebc9d9;
    display: grid;
    gap: 25px;
    grid-template-columns: 220px 1fr;
    padding: 24px 10px;
}

.reseña-autor {
    align-items: center;
    display: flex;
    gap: 12px;
}

.avatar-reseña {
    align-items: center;
    background: #ebc9d9;
    border-radius: 50%;
    color: #525252;
    display: flex;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.reseña-autor small {
    color: #8b7f85;
    display: block;
    margin-top: 4px;
}

.reseña-contenido p {
    color: #5f555b;
    line-height: 1.6;
    margin: 8px 0 0;
}

.formulario-reseña {
    background: #fff0f5;
    border: 1px solid #ebc9d9;
    border-radius: 15px;
    margin-bottom: 20px;
    padding: 22px;
}

.formulario-reseña h3 {
    color: #525252;
    font-family: Georgia, serif;
    margin: 0 0 15px;
}

.formulario-reseña label {
    color: #525252;
    display: block;
    font-weight: 700;
    margin-bottom: 6px;
}

.formulario-reseña select,
.formulario-reseña textarea {
    border: 1px solid #d9b4c5;
    border-radius: 8px;
    box-sizing: border-box;
    color: #525252;
    display: block;
    font-family: inherit;
    margin: 0 0 12px;
    padding: 11px;
    width: 100%;
}

.formulario-reseña textarea {
    resize: vertical;
}

.formulario-reseña button {
    border-radius: 30px;
    max-width: 190px;
}

.aviso-reseña,
.mensaje-reseña,
.reseñas-vacias {
    background: #fff0f5;
    border-left: 4px solid #ff66a3;
    color: #525252;
    margin: 0 0 15px;
    padding: 13px 16px;
}

.reseñas-vacias {
    border-left-color: #d9b4c5;
    color: #8b7f85;
}

.mensaje-reseña.error {
    border-color: #b35b7a;
}

.mensaje-reseña.exito {
    border-color: #65a77a;
}

.acciones-reseña {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.acciones-reseña form {
    margin: 0;
    width: auto;
}

.acciones-reseña button {
    background: #fff0f5;
    border: 1px solid #ebc9d9;
    border-radius: 20px;
    color: #525252;
    font-size: 12px;
    padding: 6px 10px;
    width: auto;
}

.acciones-reseña button:hover {
    background: #ebc9d9;
}

.acciones-reseña .boton-reportar {
    background: transparent;
    border: 0;
    color: #b35b7a;
    font-size: 11px;
    text-decoration: underline;
}

.acciones-reseña .boton-reportar:hover {
    background: transparent;
    color: #ff66a3;
}

@media (max-width: 700px) {
    .mejores-descuentos {
        margin-top: 50px;
        padding: 0 16px;
    }

    .encabezado-descuentos h2 {
        font-size: 30px;
    }

    .descuentos-grid {
        grid-template-columns: 1fr;
    }

    .detalle-producto {
        padding: 22px 16px 50px;
    }

    .producto-presentacion {
        gap: 24px;
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .producto-foto-detalle {
        min-height: 280px;
    }

    .producto-info-detalle h1 {
        font-size: 32px;
    }

    .reseña-item {
        gap: 12px;
        grid-template-columns: 1fr;
    }
}



/* BIENVENIDA */
.bienvenida {
    text-align: center;
    padding: 30px;
    background: #fff0f5;
}

.bienvenida h2 {
    color: #ff66a3;
}

/* TITULO */
.titulo-seccion {
    text-align: center;
    margin: 20px;
}

/* CONTENEDOR */
/* CONTENEDOR (TIPO CUADRÍCULA) */
.contenedor-productos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 40px;
    padding: 40px;
}

/* TARJETAS GRANDES */
.card {
    background: #f3c6d3; /* rosado suave */
    padding: 25px;
    border-radius: 30px;
    text-align: center;
}

/* IMAGEN */
.card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* TITULO */
.card h3 {
    margin: 10px 0;
}

/* LINEA DECORATIVA */
.card h3::after {
    content: "";
    display: block;
    width: 70%;
    height: 4px;
    background: gray;
    margin: 8px auto;
}

/* PRECIO */
.precio {
    font-size: 22px;
    margin: 10px 0;
}

/* BOTON */
.card button {
    background: #525252;
    border: 2px solid #525252;
    padding: 8px 8px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    margin: 15px 0 0 0;
    font-size: 13px;
    color: white;
}

.card button:hover {
    background: #555;
}

@media (max-width: 900px) {
    .contenedor-productos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .contenedor-productos {
        grid-template-columns: 1fr;
    }
}

.card {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.imagen-producto {
    position: relative;
}

.informacion-producto {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.etiqueta-producto {
    background: #525252;
    color: white;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 5px 10px;
    border-radius: 12px;
}

.descripcion-producto {
    min-height: 42px;
    margin: 4px 0 8px;
}

.valoracion-producto {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 10px;
}

.estrellas-cards {
    color: #c9beb8;
    font-size: 1.1rem;
    letter-spacing: 2px;
}

.estrellas-cards .filled {
    color: var(--ab-bronze);
}

.enlace-detalle-producto {
    display: inline-block;
    margin-top: 12px;
    text-align: center;
}

.valoracion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.estrellas {
    color: #d8799c;
    letter-spacing: 2px;
}

.numero-valoracion {
    color: #525252;
    font-size: 13px;
}

/* ACCESO Y MODAL DE AUTENTICACION */
.acceso-cuenta {
    position: absolute;
    top: 16px;
    right: 102px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.acceso-link {
    background: #d9d9d9;
    border: 2px solid #525252;
    border-radius: 18px;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    padding: 7px 12px;
    text-decoration: none;
    width: auto;
}

.boton-link:hover,
.acceso-link:hover {
    background: #e6b3cc;
}

.saludo {
    color: #525252;
    font-size: 13px;
}

.modal-auth {
    align-items: center;
    background: rgba(50, 35, 43, 0.62);
    display: none;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 20;
}

.modal-auth.visible {
    display: flex;
}

.modal-auth-contenido {
    background: #fff8fb;
    border: 2px solid #ebc9d9;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(50, 35, 43, 0.28);
    max-height: 94vh;
    max-width: 390px;
    overflow-y: auto;
    padding: 28px 30px 30px;
    position: relative;
    text-align: center;
    width: 100%;
}

.modal-cerrar {
    background: transparent;
    color: #525252;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 12px;
    top: 10px;
    width: auto;
}

.modal-cerrar:hover {
    background: transparent;
    color: #ff66a3;
}

.modal-logo {
    height: 84px;
    object-fit: contain;
    width: 120px;
}

.auth-tabs {
    border-bottom: 1px solid #ebc9d9;
    display: flex;
    gap: 8px;
    margin: 10px 0 18px;
}

.auth-tab {
    background: transparent;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #777;
    padding: 9px 4px;
    width: 50%;
}

.auth-tab.activo {
    border-bottom-color: #ff66a3;
    color: #333;
}

.auth-panel.oculto {
    display: none;
}

.modal-auth input {
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .header {
        padding-top: 78px;
    }

    .titulo {
        font-size: 34px;
    }

    .acceso-cuenta {
        left: 12px;
        right: 12px;
        top: 12px;
        justify-content: center;
    }

    .saludo {
        display: none;
    }

    .carrito {
        right: 14px;
        top: 88px;
    }

    .menu {
        flex-wrap: wrap;
    }
}

/* TITULO */
.titulo-seccion {
    text-align: center;
    margin: 20px;
}


/* CONTENEDOR (TIPO CUADRÍCULA) */
.contenedor-Accesorios {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 40px;
    padding: 40px;
}

/* TARJETAS GRANDES */
.card {
    background: #f3c6d3; /* rosado suave */
    padding: 25px;
    border-radius: 30px;
    text-align: center;
}

/* IMAGEN */
.card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* TITULO */
.card h3 {
    margin: 10px 0;
}

/* LINEA DECORATIVA */
.card h3::after {
    content: "";
    display: block;
    width: 70%;
    height: 4px;
    background: gray;
    margin: 8px auto;
}

/* PRECIO */
.precio {
    font-size: 22px;
    margin: 10px 0;
}

/* BOTON */
.card button {
    background: #6e6c6c;
    border: 2px solid #525252;
    padding: 8px 8px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    margin: 15px 0 0 0;
    font-size: 13px;
    color: rgb(226, 215, 215);
}

.card button:hover {
    background: #555;
}

@media (max-width: 900px) {
    .contenedor-Accesorios {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .contenedor-Accesorios {
        grid-template-columns: 1fr;
    }
}

/* APLICACION FINAL DE LA PALETA */
body,
.login-container {
    background: #f8f5f0;
    color: #403834;
}

.header,
.header-admin {
    background: linear-gradient(180deg, #f8f5f0 0%, #d5b7b1 48%, #75665d 100%);
    border-color: #cdbfb3;
    box-shadow: 0 8px 18px rgba(64, 56, 52, .14);
}

.header .marca,
.header-admin .marca {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.header .menu .item,
.header .menu .item-trigger {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #403834;
}

.header .menu .item:hover,
.header .menu .dropdown.active .item-trigger {
    background: rgba(169, 120, 120, .22);
    border-color: transparent;
    color: #f8f5f0;
}

.item,
.card,
.contenedor-productos .card,
.contenedor-Cabello .card,
.contenedor-Piel .card,
.contenedor-Accesorios .card {
    background: #cdbfb3;
    border-color: #b99a70;
}

.header .item,
.header .item-trigger,
.header .menu a,
.header .submenu a,
.item,
.card h3,
.card p,
h1,
h2,
h3 {
    color: #403834;
}

.header .item,
.header .item-trigger,
.header .menu a,
.admin-etiqueta,
.admin-usuario,
.acceso-link {
    color: #403834;
}

.header .item:hover,
.header .dropdown.active .item-trigger,
.header .submenu a:hover {
    background: #a97878;
    color: #f8f5f0;
}

.header .perfil-trigger,
.header-admin .perfil-trigger,
.header .visitante-trigger {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.header .perfil-trigger:hover,
.header-admin .perfil-trigger:hover,
.header .visitante-trigger:hover {
    background: rgba(185, 154, 112, .2);
}

.header .submenu {
    background: #cdbfb3;
}

button,
.card button,
.boton-detalle,
.descuento-contenido button,
.formulario-reseña button {
    background: #403834;
    border-color: #403834;
    color: #f8f5f0;
}

button:hover,
.card button:hover,
.boton-detalle:hover,
.descuento-contenido button:hover,
.formulario-reseña button:hover {
    background: #b99a70;
    border-color: #b99a70;
    color: #f8f5f0;
}

.enlace-detalle,
.categoria-descuento,
.categoria-detalle,
.supertitulo-descuentos {
    color: #a97878;
}

a:hover,
.enlace-detalle:hover,
.nombre-producto:hover {
    color: #75665d;
}

.mejores-descuentos,
.producto-presentacion,
.formulario-reseña,
.aviso-reseña,
.mensaje-reseña,
.reseñas-vacias {
    background: #d5b7b1;
    border-color: #cdbfb3;
}

.descuento-card,
.reseña-item,
.producto-foto-detalle,
.descuento-imagen {
    background: #f8f5f0;
    border-color: #cdbfb3;
}

.insignia-descuento {
    background: #403834;
    color: #f8f5f0;
}

.precio-descuento,
.precio-detalle,
.estrellas-detalle,
.estrellas-reseña {
    color: #b99a70;
}

.precio-anterior,
.descripcion-detalle,
.beneficio-detalle,
.reseña-contenido p,
.encabezado-descuentos p {
    color: #75665d;
}

.avatar-reseña,
.acciones-reseña button {
    background: #cdbfb3;
    border-color: #b99a70;
    color: #403834;
}

.modal-auth .modal-auth-contenido,
.form-wrapper,
.right {
    background: #f8f5f0;
}

.modal-auth {
    background: rgba(64, 56, 52, .48);
}

.modal-auth .modal-auth-contenido {
    background: linear-gradient(145deg, #f8f5f0 0%, #d5b7b1 100%);
    border-color: #b99a70;
    box-shadow: 0 18px 45px rgba(64, 56, 52, .24);
}

.modal-logo {
    background: rgba(248, 245, 240, .6);
    border-radius: 50%;
    padding: 8px;
}

.auth-tabs {
    border-bottom-color: #cdbfb3;
}

.auth-tab {
    color: #75665d;
}

.auth-tab.activo {
    border-bottom-color: #a97878;
    color: #403834;
}

.left {
    background-color: #d5b7b1;
}

.left h1,
.left p,
.titulo,
.titulo-seccion {
    color: #403834;
}

/* MODULOS PRINCIPALES DEL MENU */
.header .modulo-nosotros,
.header .modulo-blog,
.header .modulo-politicas {
    position: relative;
}

.header .modulo-nosotros .submenu,
.header .modulo-blog .submenu,
.header .modulo-politicas .submenu {
    left: 50%;
    min-width: 190px;
    text-align: center;
    transform: translateX(-50%);
}

.header .modulo-nosotros .submenu {
    background: #d5b7b1;
}

.header .modulo-blog .submenu {
    background: #cdbfb3;
}

.header .modulo-politicas .submenu {
    background: #b99a70;
}

.header .modulo-nosotros .submenu a,
.header .modulo-blog .submenu a,
.header .modulo-politicas .submenu a {
    color: #403834;
    font-weight: 600;
}

.header .modulo-nosotros .submenu a:hover,
.header .modulo-blog .submenu a:hover,
.header .modulo-politicas .submenu a:hover {
    background: #a97878;
    color: #f8f5f0;
}

/* SUBMENUS EN GRIS CLARO UNIFORME */
.header .submenu,
.header .modulo-nosotros .submenu,
.header .modulo-blog .submenu,
.header .modulo-politicas .submenu {
    background: #d9d9d9;
}

.header .submenu a,
.header .modulo-nosotros .submenu a,
.header .modulo-blog .submenu a,
.header .modulo-politicas .submenu a {
    color: #403834;
}

.header .submenu a:hover,
.header .modulo-nosotros .submenu a:hover,
.header .modulo-blog .submenu a:hover,
.header .modulo-politicas .submenu a:hover {
    background: #c8c8c8;
    color: #403834;
}

.card {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    transform: translateY(-3px);
}

/* PALETA FINAL: ROSA EMPOLVADO, TERRACOTA Y CREMA */
body,
.login-container {
    background: linear-gradient(145deg, #fbf5ef 0%, #eedbd2 55%, #f8ebe7 100%);
    color: #481b18;
}

.header,
.header-admin {
    background: linear-gradient(115deg, #b87552 0%, #a8664d 32%, #743629 68%, #c58a6c 100%);
    border-color: #743629;
    box-shadow: 0 10px 24px rgba(72, 27, 24, .2);
}

.header .menu .item,
.header .menu .item-trigger,
.header .menu a,
.header .admin-etiqueta,
.header .admin-usuario,
.header .acceso-link,
.header .saludo {
    color: #fff8f2;
}

.header .item:hover,
.header .dropdown.active .item-trigger,
.header .submenu a:hover {
    background: rgba(229, 181, 154, .3);
    color: #fff8f2;
}

.header .submenu,
.header .modulo-nosotros .submenu,
.header .modulo-blog .submenu,
.header .modulo-politicas .submenu {
    background: #743629;
    border: 1px solid rgba(255, 248, 242, .2);
}

.header .submenu a,
.header .modulo-nosotros .submenu a,
.header .modulo-blog .submenu a,
.header .modulo-politicas .submenu a {
    color: #fff8f2;
}

.item,
.card,
.contenedor-productos .card,
.contenedor-Cabello .card,
.contenedor-Piel .card,
.contenedor-Accesorios .card {
    background: linear-gradient(145deg, #f7e8df, #e2c1b1);
    border-color: #b87552;
}

.card h3::after {
    background: #b87552;
}

.pie-pagina {
    background: #2b211f;
    color: #fbf4ed;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    margin-top: 64px;
}

.pie-contenido {
    align-items: start;
    display: grid;
    gap: clamp(32px, 6vw, 88px);
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, .8fr) minmax(230px, 1fr);
    margin: 0 auto;
    max-width: 1200px;
    padding: 54px 28px 48px;
}

.pie-identidad {
    max-width: 380px;
}

.pie-contacto {
    display: grid;
    gap: 16px;
}

.pie-contacto-item {
    align-items: center;
    display: flex;
    gap: 13px;
    min-width: 0;
    text-decoration: none;
}

.pie-icono {
    align-items: center;
    background: rgba(255, 248, 242, .1);
    border: 1px solid rgba(255, 248, 242, .14);
    border-radius: 50%;
    color: #f0c5ad;
    display: inline-flex;
    flex: 0 0 42px;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.pie-icono svg {
    fill: none;
    height: 20px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 20px;
}

.pie-contacto-item > span:last-child {
    color: #f7eee8;
    font-size: .96rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pie-contacto-item:hover > span:last-child {
    color: #f0c5ad;
}

.pie-logo {
    display: inline-flex;
    margin: 0 0 20px;
    max-width: 175px;
}

.pie-logo img {
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.pie-identidad h2,
.pie-navegacion h2,
.pie-contacto h2 {
    color: #fff8f2;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 16px;
}

.pie-identidad p {
    color: #d3c4bb;
    font-size: .98rem;
    line-height: 1.75;
    margin: 0;
    max-width: 340px;
}

.pie-navegacion ul {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pie-navegacion a,
.pie-politicas a {
    color: #d3c4bb;
    font-size: .94rem;
    text-decoration: none;
    transition: color .18s ease;
}

.pie-navegacion a:hover,
.pie-politicas a:hover {
    color: #f0c5ad;
}

.pie-enlace-contacto {
    align-items: center;
    color: #f0c5ad;
    display: inline-flex;
    font-size: .95rem;
    font-weight: 700;
    gap: 8px;
    margin-top: 2px;
    text-decoration: none;
    width: fit-content;
}

.pie-enlace-contacto:hover {
    color: #fff8f2;
}

.pie-copyright {
    align-items: center;
    background: rgba(0, 0, 0, .16);
    border-top: 1px solid rgba(255, 248, 242, .12);
    color: #cbbdb5;
    display: flex;
    flex-wrap: wrap;
    font-size: .84rem;
    gap: 12px 24px;
    justify-content: space-between;
    padding: 18px max(28px, calc((100% - 1200px) / 2));
}

.pie-derechos {
    font-size: inherit;
    line-height: 1.5;
}

.pie-politicas {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: center;
}

.pie-creditos {
    align-items: start;
    display: grid;
    gap: 3px;
    line-height: 1.4;
    max-width: 100%;
    text-align: right;
}

.pie-creditos-titulo {
    color: #e6d8cf;
}

.pie-creditos-nombres {
    color: #bcaea6;
    max-width: 420px;
}

@media (max-width: 820px) {
    .pie-contenido {
        gap: 36px 28px;
        grid-template-columns: minmax(0, 1fr) minmax(180px, 1fr);
        padding: 42px 24px 36px;
    }

    .pie-contacto {
        grid-column: 1 / -1;
    }

    .pie-copyright {
        padding: 18px 24px;
    }

    .pie-creditos {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .pie-pagina {
        margin-top: 42px;
    }

    .pie-contenido {
        gap: 32px;
        grid-template-columns: minmax(0, 1fr);
        padding: 36px 22px 32px;
    }

    .pie-contacto {
        grid-column: auto;
    }

    .pie-copyright {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 18px 22px;
    }

    .pie-politicas {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        justify-content: flex-start;
    }

    .pie-creditos {
        text-align: left;
    }
}

.mejores-descuentos,
.producto-presentacion,
.formulario-reseña,
.aviso-reseña,
.mensaje-reseña,
.reseñas-vacias {
    background: rgba(255, 248, 242, .78);
    border-color: rgba(184, 117, 82, .5);
}

.descuento-card,
.reseña-item,
.producto-foto-detalle,
.descuento-imagen {
    background: #fffaf5;
    border-color: rgba(184, 117, 82, .5);
}

.descuento-card:nth-child(2) {
    background: #fffaf5;
}

.descuento-card:nth-child(3) {
    background: #fffaf5;
}

.descuento-imagen {
    background: linear-gradient(145deg, #f9eee7, #c99b83);
}

button,
.card button,
.boton-detalle,
.descuento-contenido button,
.formulario-reseña button,
.insignia-descuento {
    background: #481b18;
    border-color: #481b18;
    color: #fff8f2;
}

button:hover,
.card button:hover,
.boton-detalle:hover,
.descuento-contenido button:hover,
.formulario-reseña button:hover {
    background: #b87552;
    border-color: #b87552;
}

.enlace-detalle,
.categoria-descuento,
.categoria-detalle,
.supertitulo-descuentos,
.precio-descuento,
.precio-detalle,
.estrellas-detalle,
.estrellas-reseña,
.estrellas {
    color: #743629;
}

.nombre-producto,
.encabezado-descuentos h2,
.descuento-contenido h3,
.titulo-seccion,
.bienvenida h2 {
    color: #481b18;
}

.pasarela-pago {
    background: #fffdf9;
    border: 1px solid #d8c8ad;
    border-top: 4px solid #27675d;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(49, 43, 33, .09);
    color: #302f2a;
    margin: 30px auto 48px;
    max-width: 520px;
    padding: clamp(20px, 4vw, 32px);
}

.pago-encabezado,
.pago-metodo,
.pago-total {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.pago-etiqueta {
    color: #27675d;
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 6px;
}

.pasarela-pago h2 {
    color: #302f2a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 500;
    margin: 0;
}

.pago-modo {
    background: #e8f1e9;
    border-radius: 3px;
    color: #27675d;
    font-size: 10px;
    font-weight: 700;
    padding: 7px 9px;
}

.pago-metodo {
    border: 1px solid #27675d;
    border-radius: 6px;
    gap: 12px;
    justify-content: flex-start;
    margin: 24px 0 18px;
    padding: 14px;
}

.pago-icono-tarjeta {
    align-items: center;
    background: #edf2eb;
    border-radius: 4px;
    color: #27675d;
    display: inline-flex;
    font-size: 20px;
    height: 38px;
    justify-content: center;
    width: 42px;
}

.pago-metodo strong,
.pago-metodo small {
    display: block;
}

.pago-metodo strong { font-size: 14px; }
.pago-metodo small { color: #6a6b63; font-size: 12px; margin-top: 3px; }
.pago-seleccionado { color: #27675d; font-weight: 700; margin-left: auto; }

.pago-total {
    border-bottom: 1px solid #e6dfd2;
    border-top: 1px solid #e6dfd2;
    padding: 16px 0;
}

.pago-total > span { color: #5f5e56; font-size: 14px; }
.pago-total strong { color: #302f2a; font-size: 23px; }
.pago-total small { color: #6a6b63; font-size: 12px; }
.pago-aviso { color: #5c625b; font-size: 12px; margin: 14px 0; }

.pasarela-pago .btn-pagar {
    background: #27675d;
    border: 1px solid #27675d;
    border-radius: 5px;
    color: #fffdf9;
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin: 16px 0 0;
    min-height: 48px;
    width: 100%;
}

.pasarela-pago .btn-pagar:hover:not(:disabled) { background: #1d5149; }
.pasarela-pago .btn-pagar:disabled { cursor: not-allowed; opacity: .58; }

.pago-configuracion { color: #7a3e32; font-size: 12px; line-height: 1.5; }

.pago-datos-prueba {
    border-top: 1px solid #e6dfd2;
    margin-top: 20px;
    padding-top: 15px;
}

.pago-datos-prueba summary { color: #27675d; cursor: pointer; font-size: 13px; font-weight: 700; }
.pago-datos-prueba dl { margin: 12px 0; }
.pago-datos-prueba dl div { align-items: center; display: flex; justify-content: space-between; padding: 5px 0; }
.pago-datos-prueba dt { color: #6a6b63; font-size: 12px; }
.pago-datos-prueba dd { font-size: 12px; margin: 0; }
.pago-datos-prueba code { background: #f0eee7; border-radius: 3px; padding: 3px 5px; }
.pago-datos-prueba p { color: #6a6b63; font-size: 11px; line-height: 1.5; margin: 8px 0 0; }

@media (max-width: 520px) {
    .pago-encabezado { align-items: flex-start; gap: 10px; }
    .pasarela-pago h2 { font-size: 24px; }
    .pago-total strong { font-size: 21px; }
}

.resultado-pago {
    background: #fff8fb;
    border: 1px solid #ebc9d9;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    margin: 12vh auto;
    max-width: 520px;
    padding: 35px;
    text-align: center;
    width: calc(100% - 70px);
}

.resultado-pago.pedido-pendiente {
    border: 1px solid #d8c8ad;
    border-top: 4px solid #27675d;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(49, 43, 33, .13);
    max-width: 520px;
    padding: 30px 34px 24px;
    text-align: left;
}

.pedido-pendiente h1 { color: #302f2a; font: 500 30px Georgia, "Times New Roman", serif; margin: 0 0 10px; }
.pedido-pendiente > p:not(.pedido-etiqueta) { color: #68675f; font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.pedido-etiqueta { color: #27675d; font-size: 10px; font-weight: 700; margin: 0 0 7px; }
.pedido-productos { border-bottom: 1px solid #e6dfd2; border-top: 1px solid #e6dfd2; margin: 0; max-height: 240px; overflow-y: auto; padding: 8px 0; }
.pedido-producto { align-items: flex-start; color: #45443e; display: flex; font-size: 14px; gap: 16px; justify-content: space-between; padding: 9px 0; }
.pedido-producto span { overflow-wrap: anywhere; }
.pedido-producto strong { color: #27675d; flex: 0 0 auto; }
.pedido-resumen-total { align-items: flex-end; display: flex; justify-content: space-between; padding: 17px 0 19px; }
.pedido-resumen-total > span { color: #68675f; font-size: 13px; }
.pedido-resumen-total > strong { color: #302f2a; font-size: 22px; white-space: nowrap; }
.pedido-resumen-total small { color: #68675f; font-size: 11px; }
.pedido-acciones { align-items: flex-end; display: flex; flex-direction: column; }
.resultado-pago.pedido-pendiente .pedido-acciones .btn-pagar { background: #27675d; border: 1px solid #27675d; border-radius: 5px; box-sizing: border-box; cursor: pointer; display: block; font: 700 15px Arial, sans-serif; min-height: 48px; padding: 12px 24px; width: 100%; }
.resultado-pago.pedido-pendiente .pedido-acciones .btn-pagar:hover { background: #1d5149; }
.pedido-volver { color: #68675f; font-size: 12px; margin-top: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pedido-volver:hover { color: #27675d; }

@media (max-width: 540px) {
    .resultado-pago.pedido-pendiente { padding: 24px 20px 20px; width: calc(100% - 40px); }
    .pedido-pendiente h1 { font-size: 26px; }
    .pedido-resumen-total > strong { font-size: 19px; }
}

.resultado-pago .btn-pagar {
    background: #525252;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
}

.modal-entrega {
    border: 1px solid #d8c8ad;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(33, 29, 24, .28);
    color: #302f2a;
    max-height: min(90vh, 760px);
    max-width: 560px;
    overflow-y: auto;
    padding: 28px;
    width: calc(100% - 32px);
}

.modal-entrega::backdrop { background: rgba(31, 29, 26, .56); }
.modal-entrega-encabezado { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 20px; }
.modal-entrega-encabezado p { color: #27675d; font-size: 10px; font-weight: 700; margin: 0 0 6px; }
.modal-entrega-encabezado h2 { color: #302f2a; font: 500 25px Georgia, "Times New Roman", serif; margin: 0; }
.modal-entrega-cerrar { background: transparent; border: 0; color: #5f5e56; cursor: pointer; font-size: 25px; line-height: 1; }
.formulario-entrega { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.formulario-entrega label { color: #45443e; display: grid; font-size: 12px; font-weight: 700; gap: 6px; min-width: 0; }
.formulario-entrega input { border: 1px solid #cfc8ba; border-radius: 4px; box-sizing: border-box; font: inherit; font-size: 14px; min-height: 42px; padding: 9px 10px; width: 100%; }
.formulario-entrega input:focus { border-color: #27675d; outline: 2px solid rgba(39, 103, 93, .2); }
.campo-direccion-completo, .aviso-datos-pago { grid-column: 1 / -1; }
.aviso-datos-pago { color: #65665f; font-size: 12px; margin: 0; }
.formulario-entrega .btn-pagar { grid-column: 1 / -1; margin: 0; }

.notificacion-pago {
    align-items: center;
    background: #e8f1e9;
    border: 1px solid #9bb9a1;
    border-left: 5px solid #27675d;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(34, 48, 37, .16);
    color: #23483d;
    display: flex;
    font-weight: 700;
    gap: 12px;
    justify-content: center;
    margin: 18px auto;
    max-width: calc(100% - 40px);
    padding: 12px 16px;
    width: max-content;
}
.notificacion-pago span { flex: 0 1 auto; white-space: nowrap; }
.notificacion-pago button { background: transparent; border: 0; color: inherit; cursor: pointer; flex: 0 0 auto; font-size: 20px; line-height: 1; margin: 0; padding: 0 2px; width: auto; }

@media (max-width: 540px) {
    .notificacion-pago { box-sizing: border-box; max-width: calc(100% - 24px); }
    .notificacion-pago span { font-size: 14px; }
}

@media (max-width: 540px) {
    .modal-entrega { padding: 20px; }
    .formulario-entrega { grid-template-columns: minmax(0, 1fr); }
    .campo-direccion-completo, .aviso-datos-pago, .formulario-entrega .btn-pagar { grid-column: auto; }
}

/* TITULO */
.titulo-seccion {
    text-align: center;
    margin: 20px;
}


/* CONTENEDOR (TIPO CUADRÍCULA) */
.contenedor-Cabello {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 40px;
    padding: 40px;
}

/* TARJETAS GRANDES */
.card {
    background: #f3c6d3; /* rosado suave */
    padding: 25px;
    border-radius: 30px;
    text-align: center;
}

/* IMAGEN */
.card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* TITULO */
.card h3 {
    margin: 10px 0;
}

/* LINEA DECORATIVA */
.card h3::after {
    content: "";
    display: block;
    width: 70%;
    height: 4px;
    background: gray;
    margin: 8px auto;
}

/* PRECIO */
.precio {
    font-size: 22px;
    margin: 10px 0;
}

/* BOTON */
.card button {
    background: #525252;
    border: 2px solid #525252;
    padding: 4px 4px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    margin: 10px 0 0 0;
    font-size: 10px;
    color: white;
}

.card button:hover {
    background: #555;
}

@media (max-width: 900px) {
    .contenedor-Cabello {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .contenedor-Cabello {
        grid-template-columns: 1fr;
    }
}

.card {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* TITULO */
.titulo-seccion {
    text-align: center;
    margin: 20px;
}


/* CONTENEDOR (TIPO CUADRÍCULA) */
.contenedor-Piel {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 40px;
    padding: 40px;
}

/* TARJETAS GRANDES */
.card {
    background: #f3c6d3; /* rosado suave */
    padding: 25px;
    border-radius: 30px;
    text-align: center;
}

/* IMAGEN */
.card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* TITULO */
.card h3 {
    margin: 10px 0;
}

/* LINEA DECORATIVA */
.card h3::after {
    content: "";
    display: block;
    width: 70%;
    height: 4px;
    background: gray;
    margin: 8px auto;
}

/* PRECIO */
.precio {
    font-size: 22px;
    margin: 10px 0;
}

/* BOTON */
.card button {
    background: #525252;
    border: 2px solid #525252;
    padding: 8px 8px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    margin: 15px 0 0 0;
    font-size: 13px;
    color: white;
}

.card button:hover {
    background: #555;
}

@media (max-width: 900px) {
    .contenedor-Piel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .contenedor-Piel {
        grid-template-columns: 1fr;
    }
}

.card {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* TARJETAS DE PRODUCTOS */
.contenedor-productos,
.contenedor-Cabello,
.contenedor-Piel,
.contenedor-Accesorios {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    padding: 8px 0 24px;
}

.contenedor-productos .card,
.contenedor-Cabello .card,
.contenedor-Piel .card,
.contenedor-Accesorios .card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 12px 22px 24px;
    position: relative;
    background: #fff;
    border: 1px solid #f1dfe7;
    border-radius: 28px;
    box-shadow: 0 3px 10px rgba(69, 43, 54, 0.08);
}

.contenedor-productos .imagen-producto,
.contenedor-Cabello .imagen-producto,
.contenedor-Piel .imagen-producto,
.contenedor-Accesorios .imagen-producto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 252px;
}

.contenedor-productos .card img,
.contenedor-Cabello .card img,
.contenedor-Piel .card img,
.contenedor-Accesorios .card img {
    width: 100%;
    height: 242px;
    margin: 0;
    object-fit: contain;
}

.contenedor-productos .informacion-producto,
.contenedor-Cabello .informacion-producto,
.contenedor-Piel .informacion-producto,
.contenedor-Accesorios .informacion-producto {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.contenedor-productos .etiqueta-producto,
.contenedor-Cabello .etiqueta-producto,
.contenedor-Piel .etiqueta-producto,
.contenedor-Accesorios .etiqueta-producto {
    margin: 17px 0 6px;
    padding: 0;
    background: transparent;
    color: #404040;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}

.contenedor-productos .card h3,
.contenedor-Cabello .card h3,
.contenedor-Piel .card h3,
.contenedor-Accesorios .card h3 {
    width: 100%;
    margin: 0;
    color: #111;
    font-size: 20px;
    line-height: 1.25;
}

.contenedor-productos .card h3::after,
.contenedor-Cabello .card h3::after,
.contenedor-Piel .card h3::after,
.contenedor-Accesorios .card h3::after {
    width: 84%;
    height: 4px;
    margin: 8px auto 12px;
    background: #888;
}

.contenedor-productos .descripcion-producto,
.contenedor-Cabello .descripcion-producto,
.contenedor-Piel .descripcion-producto,
.contenedor-Accesorios .descripcion-producto {
    height: 41px;
    min-height: 41px;
    margin: 0;
    color: #888;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    overflow: hidden;
}

.contenedor-productos .valoracion,
.contenedor-Cabello .valoracion,
.contenedor-Piel .valoracion,
.contenedor-Accesorios .valoracion {
    align-self: stretch;
    height: 28px;
    justify-content: flex-start;
    margin: 3px 0 2px;
}

.contenedor-productos .estrellas,
.contenedor-Cabello .estrellas,
.contenedor-Piel .estrellas,
.contenedor-Accesorios .estrellas {
    color: #d6a000;
    font-size: 19px;
    letter-spacing: 0;
}

.contenedor-productos .numero-valoracion,
.contenedor-Cabello .numero-valoracion,
.contenedor-Piel .numero-valoracion,
.contenedor-Accesorios .numero-valoracion {
    color: #777;
    font-size: 14px;
}

.contenedor-productos .precio,
.contenedor-Cabello .precio,
.contenedor-Piel .precio,
.contenedor-Accesorios .precio {
    margin: 3px 0 0;
    color: #111;
    font-size: 23px;
    font-weight: 700;
}

.contenedor-productos .contador,
.contenedor-Cabello .contador,
.contenedor-Piel .contador,
.contenedor-Accesorios .contador {
    position: absolute;
    top: 12px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #5a5a5a;
    color: #fff;
    font-size: 13px;
}

.contenedor-productos .card form,
.contenedor-Cabello .card form,
.contenedor-Piel .card form,
.contenedor-Accesorios .card form {
    width: 100%;
    margin-top: 8px;
}

.contenedor-productos .card button,
.contenedor-Cabello .card button,
.contenedor-Piel .card button,
.contenedor-Accesorios .card button {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px 8px;
    border: 0;
    border-radius: 24px;
    background: #5a5a5a;
    font-size: 16px;
}

@media (max-width: 1100px) {
    .contenedor-productos,
    .contenedor-Cabello,
    .contenedor-Piel,
    .contenedor-Accesorios {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 20px;
    }
}

@media (max-width: 800px) {
    .contenedor-productos,
    .contenedor-Cabello,
    .contenedor-Piel,
    .contenedor-Accesorios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 520px) {
    .contenedor-productos,
    .contenedor-Cabello,
    .contenedor-Piel,
    .contenedor-Accesorios {
        grid-template-columns: 1fr;
        padding: 12px;
    }
}

.carrito-container {
    width: 60%;
    margin: 40px auto;
    padding: 62px 30px 30px;
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.contenedor-productos .card,
.contenedor-Cabello .card,
.contenedor-Piel .card,
.contenedor-Accesorios .card {
    background: #fffaf5;
    border: 1px solid rgba(184, 117, 82, .42);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(72, 27, 24, .1);
    overflow: hidden;
    padding: 0 22px 24px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.contenedor-productos .card:hover,
.contenedor-Cabello .card:hover,
.contenedor-Piel .card:hover,
.contenedor-Accesorios .card:hover {
    box-shadow: 0 14px 28px rgba(72, 27, 24, .18);
    transform: translateY(-6px);
}

.contenedor-productos .imagen-producto,
.contenedor-Cabello .imagen-producto,
.contenedor-Piel .imagen-producto,
.contenedor-Accesorios .imagen-producto {
    background: linear-gradient(145deg, #f8e9df, #d8ad98);
    margin: 0 -22px;
    padding: 12px 22px;
}

.contenedor-productos .etiqueta-producto,
.contenedor-Cabello .etiqueta-producto,
.contenedor-Piel .etiqueta-producto,
.contenedor-Accesorios .etiqueta-producto {
    align-self: center;
    background: #ead1c4;
    border-radius: 20px;
    color: #743629;
    font-size: 11px;
    letter-spacing: 1.5px;
    margin: 18px 0 9px;
    padding: 6px 10px;
}

.contenedor-productos .card h3,
.contenedor-Cabello .card h3,
.contenedor-Piel .card h3,
.contenedor-Accesorios .card h3 {
    color: #481b18;
}

.contenedor-productos .card h3::after,
.contenedor-Cabello .card h3::after,
.contenedor-Piel .card h3::after,
.contenedor-Accesorios .card h3::after {
    background: #d09a7d;
    border-radius: 4px;
    height: 3px;
}

.contenedor-productos .descripcion-producto,
.contenedor-Cabello .descripcion-producto,
.contenedor-Piel .descripcion-producto,
.contenedor-Accesorios .descripcion-producto {
    color: #806d64;
}

.contenedor-productos .precio,
.contenedor-Cabello .precio,
.contenedor-Piel .precio,
.contenedor-Accesorios .precio {
    color: #743629;
}

.contenedor-productos .contador,
.contenedor-Cabello .contador,
.contenedor-Piel .contador,
.contenedor-Accesorios .contador {
    background: #b87552;
}

.contenedor-productos .card button,
.contenedor-Cabello .card button,
.contenedor-Piel .card button,
.contenedor-Accesorios .card button {
    background: #481b18;
    border-radius: 12px;
}

.contenedor-productos .card button:hover,
.contenedor-Cabello .card button:hover,
.contenedor-Piel .card button:hover,
.contenedor-Accesorios .card button:hover {
    background: #b87552;
}

/* PAGINAS INFORMATIVAS */
.quienes-container,
.historia-container,
.mision-container,
.vision-container {
    align-items: center;
    animation: aparecer-contenido .65s ease both;
    background: linear-gradient(135deg, rgba(255, 250, 245, .96), rgba(238, 216, 205, .9));
    border: 1px solid rgba(184, 117, 82, .45);
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(72, 27, 24, .12);
    display: grid;
    gap: 10px 42px;
    grid-template-columns: 250px minmax(0, 1fr);
    max-width: 1000px;
    padding: 42px 48px;
    text-align: left;
}

.quienes-container h1,
.quienes-container h2,
.historia-container h1,
.historia-container h2,
.mision-container h1,
.mision-container h2,
.vision-container h1,
.vision-container h2 {
    align-self: end;
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    grid-column: 2;
    margin: 0 0 8px;
}

.quienes-container p,
.historia-container p,
.mision-container p,
.vision-container p {
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    grid-column: 2;
    line-height: 1.7;
    margin: 0 0 12px;
}

.quienes-container br,
.historia-container br,
.mision-container br,
.vision-container br {
    display: none;
}

.quienes-img,
.historia-img,
.mision-img,
.vision-img {
    border: 8px solid rgba(255, 250, 245, .8);
    border-radius: 22px;
    box-shadow: 0 10px 22px rgba(72, 27, 24, .18);
    grid-column: 1;
    grid-row: 1 / span 5;
    margin: 0;
    object-fit: cover;
    width: 100%;
}

.valores-container {
    animation: aparecer-contenido .65s ease both;
    background: linear-gradient(135deg, rgba(255, 250, 245, .96), rgba(238, 216, 205, .9));
    border: 1px solid rgba(184, 117, 82, .45);
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(72, 27, 24, .12);
    margin: 48px auto;
    max-width: 1000px;
    padding: 42px 48px;
}

.valores-container h1,
.valores-container h2,
.articulos-container h2 {
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
}

.valor {
    background: #fffaf5;
    border: 1px solid rgba(184, 117, 82, .35);
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(72, 27, 24, .08);
    transition: transform .25s ease, box-shadow .25s ease;
}

.valor:hover {
    box-shadow: 0 12px 24px rgba(72, 27, 24, .15);
    transform: translateY(-5px);
}

.valor h3 {
    color: #743629;
    font-family: Georgia, "Times New Roman", serif;
}

.valor p {
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.55;
}

/* ARTICULOS */
.articulos-container {
    animation: aparecer-contenido .65s ease both;
    margin: 38px auto 72px;
    max-width: 1120px;
    padding: 0 24px;
}

.articulos-encabezado { margin: 0 auto 32px; max-width: 660px; text-align: center; }
.articulos-eyebrow { color: var(--ab-copper); font-size: 12px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; }
.articulos-encabezado h1 { color: var(--ab-wine); font: 700 36px Georgia, "Times New Roman", serif; margin: 0 0 10px; }
.articulos-encabezado > p:last-child { color: var(--ab-taupe); line-height: 1.6; margin: 0; }
.articulos-grid { align-items: stretch; display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.articulo-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fffaf5;
    border: 1px solid rgba(184, 117, 82, .4);
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(72, 27, 24, .1);
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: hidden;
}

.articulo-card:hover {
    box-shadow: 0 16px 30px rgba(72, 27, 24, .18);
    transform: translateY(-7px);
}

.articulo-card img {
    aspect-ratio: 1.55 / 1;
    display: block;
    filter: saturate(.85);
    height: auto;
    object-fit: cover;
    transition: filter .3s ease, transform .3s ease;
    width: 100%;
}

.articulo-card-imagen { display: block; overflow: hidden; }
.articulo-card .contenido { align-items: flex-start; display: flex; flex: 1; flex-direction: column; padding: 20px; }
.articulo-card .articulo-categoria { color: var(--ab-copper); font-size: 11px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; }

.articulo-card:hover img {
    filter: saturate(1.05);
    transform: scale(1.04);
}

.articulo-card h3 {
    color: #743629;
    font-family: Georgia, "Times New Roman", serif;
}

.articulo-card h2 { color: var(--ab-terracotta-deep); font: 700 20px Georgia, "Times New Roman", serif; margin: 0 0 10px; }

.articulo-card p {
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.55;
}

.articulo-card .contenido > p:not(.articulo-categoria) { margin: 0 0 18px; }

.articulo-card .articulo-enlace,
.legal-container .btn {
    align-items: center;
    background: #481b18;
    border-radius: 5px;
    color: #fffaf5;
    display: inline-flex;
    font-family: Georgia, "Times New Roman", serif;
    gap: 9px;
    margin-top: auto;
    padding: 10px 13px;
    text-decoration: none;
    transition: background .25s ease, transform .25s ease;
}

.articulo-card .articulo-enlace:hover,
.legal-container .btn:hover {
    background: #b87552;
    transform: translateY(-2px);
}

.articulo-container {
    animation: aparecer-contenido .65s ease both;
    background: linear-gradient(135deg, rgba(255, 250, 245, .97), rgba(238, 216, 205, .92));
    border: 1px solid rgba(184, 117, 82, .45);
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(72, 27, 24, .12);
    margin: 42px auto 72px;
    max-width: 940px;
    padding: 34px 54px 50px;
}

.articulo-volver { align-items: center; color: var(--ab-terracotta-deep); display: inline-flex; font-size: 14px; font-weight: 700; gap: 8px; margin-bottom: 26px; text-decoration: none; }
.articulo-volver:hover { color: var(--ab-copper); }
.articulo-portada {
    align-items: center;
    column-gap: 34px;
    display: grid;
    grid-template-areas: "imagen categoria" "imagen titulo" "imagen bajada";
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1fr);
    margin: 0 auto;
    max-width: 820px;
    row-gap: 0;
}
.articulo-portada > .articulo-categoria { grid-area: categoria; }
.articulo-portada > h1 { grid-area: titulo; }
.articulo-portada > .articulo-bajada { grid-area: bajada; }
.articulo-portada > img { grid-area: imagen; }
.articulo-container .articulo-categoria { color: var(--ab-copper); font-size: 12px; font-weight: 700; margin: 0 0 10px; text-transform: uppercase; }
.articulo-container h1 {
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    line-height: 1.15;
    margin: 0 0 10px;
}

.articulo-bajada { color: var(--ab-taupe); font-size: 17px; line-height: 1.55; margin: 0; }

.articulo-container > .articulo-portada > img {
    aspect-ratio: 1 / 1;
    background: rgba(255, 250, 245, .72);
    border: 1px solid var(--ab-beige);
    border-radius: 8px;
    box-sizing: border-box;
    display: block;
    height: 250px;
    margin: 0;
    object-fit: contain;
    padding: 8px;
    transition: transform .35s ease, box-shadow .35s ease;
    width: 100%;
}

.articulo-container > .articulo-portada > img:hover { box-shadow: 0 12px 24px rgba(72, 27, 24, .14); transform: translateY(-3px); }

.articulo-container > img {
    border: 6px solid #fffaf5;
    box-shadow: 0 10px 22px rgba(72, 27, 24, .15);
    transition: transform .35s ease, filter .35s ease;
}

.articulo-container > img:hover {
    filter: saturate(1.05);
    transform: scale(1.015);
}

.articulo-cuerpo { margin: 0 auto; max-width: 720px; padding-top: 24px; }
.articulo-cuerpo > p,
.articulo-container .pasos p {
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
}

.articulo-cuerpo > p { font-size: 16px; margin: 0 0 16px; }

.articulo-container .pasos { display: grid; gap: 9px; grid-template-columns: 1fr; margin: 28px 0; }
.articulo-container .pasos details { background: rgba(255, 250, 245, .78); border: 1px solid var(--ab-beige); border-radius: 6px; min-width: 0; transition: border-color .2s ease, background .2s ease; }
.articulo-container .pasos details[open] { background: #fffaf5; border-color: var(--ab-copper); }
.articulo-container .pasos summary { align-items: center; color: var(--ab-wine); cursor: pointer; display: flex; font: 700 16px Georgia, "Times New Roman", serif; gap: 12px; list-style: none; min-height: 54px; padding: 10px 14px; text-align: left; }
.articulo-container .pasos summary::-webkit-details-marker { display: none; }
.articulo-container .pasos summary::after { color: var(--ab-copper); content: "+"; font: 400 22px Georgia, "Times New Roman", serif; margin-left: auto; }
.articulo-container .pasos details[open] summary::after { content: "−"; }
.articulo-container .pasos summary:focus-visible { border-radius: 5px; outline: 2px solid var(--ab-copper); outline-offset: 2px; }
.articulo-container .pasos summary > span { align-items: center; background: #f3e7dd; border-radius: 50%; color: var(--ab-terracotta-deep); display: inline-flex; flex: 0 0 30px; font: 700 11px Georgia, "Times New Roman", serif; height: 30px; justify-content: center; width: 30px; }
.articulo-container .pasos details > p { margin: 0 16px 16px 56px; }
.articulo-consejo { background: #f3e7dd; border-left: 3px solid var(--ab-copper); margin: 26px 0; padding: 16px 18px; }
.articulo-consejo strong { color: var(--ab-wine); }
.articulo-consejo p { color: var(--ab-taupe); line-height: 1.6; margin: 6px 0 0; }
.articulo-volver-final { border-top: 1px solid var(--ab-beige); margin: 20px 0 0; padding-top: 20px; }

@media (max-width: 800px) {
    .articulos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .articulo-container { margin: 30px 20px 56px; padding: 28px 28px 38px; }
    .articulo-portada { column-gap: 22px; grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr); }
    .articulo-container > .articulo-portada > img { height: 210px; }
}

@media (max-width: 560px) {
    .articulos-container { margin-top: 28px; padding: 0 16px; }
    .articulos-encabezado h1 { font-size: 30px; }
    .articulos-grid { grid-template-columns: 1fr; }
    .articulo-container { margin: 24px 12px 44px; padding: 22px 18px 30px; }
    .articulo-portada { column-gap: 0; grid-template-areas: "imagen" "categoria" "titulo" "bajada"; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .articulo-container h1 { font-size: 31px; }
    .articulo-bajada { font-size: 16px; margin-bottom: 16px; }
    .articulo-container > .articulo-portada > img { height: 180px; margin-top: 2px; }
    .articulo-container .pasos summary { font-size: 15px; gap: 10px; padding: 9px 11px; }
    .articulo-container .pasos details > p { margin: 0 12px 14px 51px; }
}

/* FORMULARIO Y AVISO DE ACCESO */
.formulario-container {
    max-width: 720px;
    margin: 0 auto 50px;
    padding: 4px 20px 50px;
    position: relative;
}

.formulario-contacto {
    background: linear-gradient(135deg, #fffaf5 0%, #f8eee7 58%, #ead1c4 100%);
    border: 1px solid rgba(184, 117, 82, .45);
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(72, 27, 24, .13);
    padding: 40px;
}

.formulario-contacto h2 {
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
}

.formulario-contacto input,
.formulario-contacto textarea {
    border: 1px solid #d1a994;
    font-family: Georgia, "Times New Roman", serif;
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus {
    border-color: #b87552;
    box-shadow: 0 0 0 3px rgba(184, 117, 82, .15);
}

.formulario-contacto button {
    background: #481b18;
    font-family: Georgia, "Times New Roman", serif;
}

.formulario-contacto button:hover {
    background: #b87552;
}

.mensaje-contenedor {
    position: relative;
}

.mensaje-contenedor textarea {
    min-height: 180px;
    padding-bottom: 52px;
    overflow-y: auto;
    resize: none;
}

.foto-mensaje {
    align-items: center;
    background: #f1d8c9;
    border: 1px solid #c99b83;
    border-radius: 10px;
    bottom: 18px;
    color: #743629;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 6px;
    padding: 7px 10px;
    position: absolute;
    right: 10px;
}

.foto-mensaje:hover {
    background: #e3bda9;
}

.foto-mensaje input {
    display: none;
}

.notificacion-contacto {
    background: #f1d8c9;
    border: 1px solid #b87552;
    border-left: 4px solid #743629;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(72, 27, 24, .12);
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
    margin: 0 0 14px auto;
    max-width: 330px;
    padding: 12px 15px;
}

.formulario-container > .aviso-registro {
    position: fixed;
    top: 160px;
    right: 22px;
    z-index: 9;
}

.formulario-contacto input,
.formulario-contacto textarea {
    background: rgba(255, 250, 245, .88);
    color: #481b18;
}

.formulario-contacto input::placeholder,
.formulario-contacto textarea::placeholder {
    color: #9b7a6c;
}

.mensaje-enviado {
    animation: aparecer-contenido .6s ease both;
    background: linear-gradient(135deg, #fffaf5, #f1d8c9);
    border: 1px solid #b87552;
    border-radius: 22px;
    box-shadow: 0 14px 30px rgba(72, 27, 24, .14);
    margin: 120px auto;
    max-width: 520px;
    padding: 38px;
    text-align: center;
}

.mensaje-enviado h2 {
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
}

.mensaje-enviado p {
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
}

/* ADMINISTRACION CON LA MISMA PALETA DEL SITIO */
.admin-container,
.usuarios-container,
.productos-container,
.ventas-container,
.reportes-container,
.mensajes-container {
    background: linear-gradient(145deg, #fbf5ef 0%, #eedbd2 55%, #f8ebe7 100%) !important;
    color: #481b18 !important;
    font-family: Georgia, "Times New Roman", serif !important;
}

.header-admin {
    background: linear-gradient(115deg, #b87552 0%, #a8664d 32%, #743629 68%, #c58a6c 100%) !important;
    border-color: #743629 !important;
}

.header-admin .menu a,
.header-admin .admin-etiqueta,
.header-admin .admin-usuario {
    color: #fff8f2 !important;
}

.header-admin .menu a:hover {
    background: rgba(229, 181, 154, .3) !important;
    color: #fff8f2 !important;
}

.header-admin .menu a[href*="usuarios.php"],
.header-admin .menu a[href*="productos.php"],
.header-admin .menu a[href*="mensajes.php"],
.header-admin .menu a[href*="ventas.php"],
.header-admin .menu a[href*="reportes.php"] {
    color: #fff8f2 !important;
}

.header-admin .perfil-trigger {
    background: rgba(255, 248, 242, .22) !important;
    border-color: #fff8f2 !important;
}

.header-admin .perfil-submenu {
    background: #743629 !important;
    border: 1px solid rgba(255, 248, 242, .25) !important;
}

.header-admin .perfil-submenu strong,
.header-admin .perfil-submenu a {
    color: #fff8f2 !important;
}

.tarjeta,
.stat-card,
.reporte-card,
.formulario-producto,
.tabla-productos,
.tabla-usuarios,
.tabla-ventas,
.mensajes-tabla,
.resumen-general,
.sin-mensajes,
.sin-usuarios,
.sin-ventas {
    background: rgba(255, 250, 245, .94) !important;
    border-color: rgba(184, 117, 82, .45) !important;
    box-shadow: 0 10px 24px rgba(72, 27, 24, .1) !important;
}

.tarjeta::before {
    background: rgba(184, 117, 82, .1) !important;
}

.tarjeta h3,
.reporte-titulo,
.mensajes-header h2,
.admin-container h2,
.usuarios-container h2,
.productos-container h2,
.ventas-container h2,
.reportes-container h2 {
    color: #481b18 !important;
}

.tarjeta-numero,
.reporte-numero,
.stat-numero,
.info-valor,
.mensaje-nombre,
.mensaje-asunto strong {
    color: #743629 !important;
}

.tarjeta-subtitulo,
.info-label,
.mensaje-correo,
.mensaje-fecha,
.detalle-campo label,
.detalle-campo p {
    color: #806d64 !important;
}

.tarjeta-usuarios,
.tarjeta-productos,
.tarjeta-mensajes,
.tarjeta-ventas,
.tarjeta-actividades,
.stat-card,
.reporte-card {
    border-left-color: #b87552 !important;
}

.btn-ver,
.btn-responder,
.btn-eliminar,
.filtro-btn,
.mensajes-container button,
.productos-container button,
.usuarios-container button,
.ventas-container button {
    background: #481b18 !important;
    border-color: #481b18 !important;
    color: #fff8f2 !important;
}

.btn-ver:hover,
.btn-responder:hover,
.btn-eliminar:hover,
.filtro-btn:hover,
.mensajes-container button:hover,
.productos-container button:hover,
.usuarios-container button:hover,
.ventas-container button:hover {
    background: #b87552 !important;
    border-color: #b87552 !important;
}

.modal-content,
.detalle-campo p {
    background: #fffaf5 !important;
}

.modal-header,
.mensajes-header {
    border-color: #b87552 !important;
}

.modal-header h3,
.detalle-campo label {
    color: #743629 !important;
}

/* AJUSTES DE ALINEACION DEL PANEL ADMINISTRATIVO */
.header-admin .menu a,
.header-admin .menu a[href*="usuarios.php"],
.header-admin .menu a[href*="productos.php"],
.header-admin .menu a[href*="mensajes.php"],
.header-admin .menu a[href*="ventas.php"],
.header-admin .menu a[href*="reportes.php"] {
    color: #fff !important;
}

.header-admin .menu a:hover {
    color: #fff !important;
}

.admin-container > h2,
.productos-container > h2,
.usuarios-container > h2,
.ventas-container > h2,
.reportes-container > h2,
.mensajes-header h2 {
    text-align: center !important;
}

.tarjetas-grid,
.tarjeta-contenido,
.tarjeta,
.seccion-resumen,
.seccion-resumen h3,
.formulario-producto h3 {
    text-align: center !important;
}

.productos-container > h2 {
    width: 100%;
}

.productos-container .formulario-producto {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.productos-container .formulario-producto h3 {
    text-align: center !important;
}

.foto-adjunta-detalle {
    border: 1px solid #c99b83;
    border-radius: 10px;
    display: block;
    margin-top: 8px;
    max-height: 260px;
    max-width: 100%;
    object-fit: contain;
}

.aviso-registro {
    background: #f1d8c9;
    border: 1px solid rgba(184, 117, 82, .4);
    border-left: 4px solid #b87552;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(72, 27, 24, .1);
    color: #743629;
    font-family: Georgia, "Times New Roman", serif;
    margin: 0;
    padding: 12px 15px;
    position: absolute;
    right: 20px;
    text-align: left;
    top: 12px;
    width: 245px;
}

.aviso-registro a {
    color: #481b18;
}

/* UBICACION Y PAGINAS LEGALES */
.ubicacion-container,
.legal-container {
    animation: aparecer-contenido .65s ease both;
    background: linear-gradient(135deg, rgba(255, 250, 245, .96), rgba(238, 216, 205, .9));
    border: 1px solid rgba(184, 117, 82, .45);
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(72, 27, 24, .12);
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
    max-width: 980px;
    padding: 42px 48px;
}

.ubicacion-container h1,
.ubicacion-container h2,
.legal-container h2 {
    color: #481b18;
    font-family: Georgia, "Times New Roman", serif;
}

.ubicacion-container p,
.legal-container p,
.legal-container .respuesta {
    color: #806d64;
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
}

.legal-container h3,
.legal-container .pregunta {
    color: #743629;
    font-family: Georgia, "Times New Roman", serif;
}

/* PAGINAS LEGALES Y CENTRO DE AYUDA */
.legal-page {
    animation: aparecer-contenido .55s ease both;
    margin: 38px auto 72px;
    max-width: 1120px;
    padding: 0 24px;
}

.legal-hero {
    margin: 0 auto 30px;
    max-width: 720px;
    text-align: center;
}

.legal-eyebrow {
    color: var(--ab-copper);
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.legal-hero h1 {
    color: var(--ab-wine);
    font: 700 36px Georgia, "Times New Roman", serif;
    margin: 0 0 10px;
}

.legal-hero > p:last-child {
    color: var(--ab-taupe);
    line-height: 1.65;
    margin: 0;
}

.legal-layout {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: 220px minmax(0, 1fr);
}

.legal-indice {
    background: rgba(255, 250, 245, .76);
    border: 1px solid var(--ab-beige);
    border-radius: 7px;
    display: grid;
    gap: 4px;
    padding: 16px;
    position: sticky;
    top: 18px;
}

.legal-indice h2 {
    color: var(--ab-wine);
    font: 700 14px Georgia, "Times New Roman", serif;
    margin: 0 0 8px;
}

.legal-indice a {
    border-radius: 4px;
    color: var(--ab-taupe);
    font-size: 13px;
    line-height: 1.4;
    padding: 7px 8px;
    text-decoration: none;
}

.legal-indice a:hover,
.legal-indice a:focus-visible { background: #f3e7dd; color: var(--ab-wine); outline: none; }

.legal-secciones {
    background: rgba(255, 250, 245, .8);
    border: 1px solid var(--ab-beige);
    border-radius: 7px;
    padding: 26px 32px;
}

.legal-introduccion {
    border-bottom: 1px solid var(--ab-beige);
    color: var(--ab-taupe);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 8px;
    padding: 0 0 18px;
}

.legal-seccion {
    align-items: start;
    border-bottom: 1px solid rgba(203, 191, 179, .65);
    display: grid;
    gap: 16px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 18px 0;
    scroll-margin-top: 24px;
}

.legal-seccion > span {
    align-items: center;
    background: #f3e7dd;
    border-radius: 50%;
    color: var(--ab-terracotta-deep);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.legal-seccion h2 {
    color: var(--ab-wine);
    font: 700 18px Georgia, "Times New Roman", serif;
    margin: 3px 0 7px;
}

.legal-seccion p {
    color: var(--ab-taupe);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.legal-seccion a,
.faq-item a { color: var(--ab-terracotta-deep); font-weight: 700; text-underline-offset: 3px; }
.legal-seccion a:hover,
.faq-item a:hover { color: var(--ab-copper); }

.legal-volver {
    align-items: center;
    color: var(--ab-terracotta-deep);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 9px;
    margin-top: 22px;
    text-decoration: none;
}

.legal-volver:hover { color: var(--ab-copper); }

.faq-lista {
    background: rgba(255, 250, 245, .8);
    border: 1px solid var(--ab-beige);
    border-radius: 7px;
    margin: 0 auto;
    max-width: 840px;
    padding: 26px 30px;
}

.faq-categoria {
    color: var(--ab-copper);
    font-size: 11px;
    font-weight: 700;
    margin: 22px 0 9px;
    text-transform: uppercase;
}

.faq-categoria:first-child { margin-top: 0; }

.faq-item {
    background: rgba(255, 255, 255, .56);
    border: 1px solid var(--ab-beige);
    border-radius: 5px;
    margin: 8px 0;
    transition: background .2s ease, border-color .2s ease;
}

.faq-item[open] { background: #fffaf5; border-color: var(--ab-copper); }

.faq-item summary {
    align-items: center;
    color: var(--ab-wine);
    cursor: pointer;
    display: flex;
    font: 700 15px Georgia, "Times New Roman", serif;
    gap: 14px;
    justify-content: space-between;
    list-style: none;
    min-height: 50px;
    padding: 10px 15px;
    text-align: left;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { color: var(--ab-copper); content: "+"; font: 400 21px Georgia, "Times New Roman", serif; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible { border-radius: 4px; outline: 2px solid var(--ab-copper); outline-offset: 2px; }
.faq-item > p { color: var(--ab-taupe); font-size: 14px; line-height: 1.65; margin: 0; padding: 0 15px 15px; }

.mapa {
    border: 1px solid #c99b83;
    box-shadow: 0 8px 18px rgba(72, 27, 24, .12);
}

@keyframes aparecer-contenido {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 700px) {
    .quienes-container,
    .historia-container,
    .mision-container,
    .vision-container {
        display: block;
        margin: 30px 16px;
        padding: 28px 24px;
    }

    .quienes-img,
    .historia-img,
    .mision-img,
    .vision-img {
        display: block;
        margin: 0 auto 24px;
        max-width: 260px;
    }

    .quienes-container h1,
    .quienes-container h2,
    .historia-container h1,
    .historia-container h2,
    .mision-container h1,
    .mision-container h2,
    .vision-container h1,
    .vision-container h2 {
        font-size: 29px;
    }

    .valores-container,
    .ubicacion-container,
    .legal-container {
        margin: 30px 16px;
        padding: 28px 24px;
        width: auto;
    }

    .legal-page { margin: 28px auto 52px; padding: 0 16px; }
    .legal-hero h1 { font-size: 30px; }
    .legal-layout { grid-template-columns: 1fr; gap: 14px; }
    .legal-indice { gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
    .legal-indice h2 { grid-column: 1 / -1; }
    .legal-secciones,
    .faq-lista { padding: 20px 17px; }
    .legal-seccion { gap: 11px; grid-template-columns: 30px minmax(0, 1fr); }
    .legal-seccion > span { height: 27px; width: 27px; }
    .faq-item summary { font-size: 14px; padding: 10px 12px; }
    .faq-item > p { padding: 0 12px 13px; }

    .formulario-container {
        margin: 0 auto 40px;
        padding: 4px 16px 40px;
    }

    .aviso-registro {
        left: 16px;
        right: 16px;
        width: auto;
    }

    .formulario-container > .aviso-registro {
        left: 16px;
        right: 16px;
        top: 174px;
    }

    .formulario-contacto {
        padding: 28px 22px;
    }
}

/* TIPOGRAFIA UNIFICADA Y ELEGANTE */
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
p,
a,
.titulo,
.titulo-seccion,
.hero-intro,
.supertitulo-descuentos,
.categoria-descuento,
.etiqueta-producto,
.descripcion-producto,
.enlace-detalle {
    font-family: Georgia, "Times New Roman", serif;
}

.hero-intro h2,
.encabezado-descuentos h2,
.titulo-seccion,
.card h3,
.descuento-contenido h3,
.producto-info-detalle h1,
.producto-info-detalle h2 {
    letter-spacing: .01em;
}

.hero-intro p,
.encabezado-descuentos p,
.descripcion-producto,
.descripcion-detalle,
.beneficio-detalle,
.reseña-contenido p {
    line-height: 1.6;
}

.titulo-carrito {
    text-align: center;
    color: var(--ab-wine);
}

.item {
    display: flex;
    align-items: center;
    background: #f8d7da;
    margin: 15px 0;
    padding: 15px;
    border-radius: 15px;
}

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

.info {
    margin-left: 20px;
}

.cantidad {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cantidad a {
    background: #e6a4b4;
    padding: 5px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: black;
}

.eliminar {
    display: inline-block;
    margin-top: 5px;
    color: red;
}

.total {
    text-align: center;
    margin-top: 20px;
}

.contenedor-pagar {
    text-align: center;
    margin-top: 30px;
}

.btn-pagar {
    display: inline-block;
    padding: 12px 40px;
    background: #525252;
    color: white;
    border-radius: 20px;
    text-decoration: none;
    font-size: 14px;
}

.btn-pagar:hover{
    background: #6e6c6c;
}

.carrito{
    position: absolute;
    right: 30px;
    top: 30px;
    font-size: 28px;
    text-decoration: none;
    color: black;
}

.contador-carrito{
    background: red;
    color: white;
    border-radius: 50%;
    padding: 3px 8px;
    font-size: 14px;
    margin-left: 5px;
}


/* CONTENEDOR FORMULARIO */
.formulario-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

/* CAJA FORMULARIO */
.formulario {
    background: #f3c6d3;
    padding: 30px;
    border-radius: 25px;
    width: 350px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
}

/* TITULO */
.formulario h2 {
    margin-bottom: 20px;
    color: #6e6e6e;
}

/* INPUTS */
.formulario input,
.formulario textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    border: none;
}

/* TEXTAREA */
.formulario textarea {
    height: 100px;
    resize: none;
}

/* BOTON */
.formulario button {
    width: auto;
    padding: 10px 25px;
    background: #ff66a3;
    color: white;
    border-radius: 20px;
    border: none;
    cursor: pointer;
}

.formulario button:hover {
    background: #e0558f;
}

/* COLOR DE TEXTO COMPARTIDO ENTRE MODULOS */
body {
    color: var(--ab-carbon);
}

h1,
h2,
h3,
h4 {
    color: var(--ab-wine);
}

p,
li,
label,
td,
th,
legend,
summary {
    color: var(--ab-carbon);
}

input,
select,
textarea {
    color: var(--ab-carbon);
}

/* CARRITO */
.carrito-container {
    background: var(--ab-ivory);
    color: var(--ab-carbon);
}

.puntos-carrito { align-items: center; background: #27623a; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 3px 10px rgba(35, 65, 42, .2); color: #fff; display: inline-flex; font-size: 13px; font-weight: 700; gap: 6px; min-height: 34px; padding: 0 14px; position: absolute; right: 18px; top: 14px; }
.puntos-carrito span { color: #ffe28a; }

.carrito-container .item {
    background: #fffaf5;
    border: 1px solid var(--ab-beige);
    color: var(--ab-carbon);
}

.carrito-container .info h3,
.titulo-carrito,
.total {
    color: var(--ab-wine);
}

.carrito-container .cantidad a {
    background: var(--ab-terracotta-deep);
    color: var(--ab-ivory);
}

.carrito-container .cantidad a:hover {
    background: var(--ab-copper);
}

.carrito-container .eliminar {
    color: var(--ab-terracotta-deep);
}

.carrito-container .eliminar:hover {
    color: var(--ab-wine);
}

.carrito-container .precio,
.carrito-container .vacio {
    color: var(--ab-carbon);
}

.carrito-categoria { color: #806b63; font-size: 13px; margin: -4px 0 8px; }
.etiqueta-descuento-carrito { background: #f5e2e6; border: 1px solid #dfb9c1; border-radius: 999px; color: #834e5a; display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; margin: 4px 0; padding: 5px 9px; text-transform: uppercase; }
.precio-original-carrito { color: #766b66; font-size: 13px; margin: 5px 0 2px; }
.precio-final-carrito { color: #27623a; font-size: 16px; font-weight: 700; margin: 2px 0 5px; }
.resumen-descuento-carrito { color: #27623a; font-size: 14px; font-weight: 700; margin: -8px auto 20px; text-align: center; }

/* FORMULARIO DE CONTACTO */
.formulario-container.contacto-layout {
    align-items: start;
    display: grid;
    gap: 44px;
    grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr);
    height: auto;
    margin: 48px auto 72px;
    max-width: 1200px;
    padding: 24px;
    width: calc(100% - 32px);
}

.contacto-intro {
    align-self: start;
    max-width: 460px;
    padding: 0;
}

.contacto-eyebrow,
.contacto-formulario-kicker {
    color: var(--ab-copper);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.contacto-intro h1 {
    color: var(--ab-wine);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 1.12;
    margin: 0 0 18px;
    max-width: 450px;
}

.contacto-intro > p:not(.contacto-eyebrow) {
    color: var(--ab-taupe);
    font-size: 17px;
    line-height: 1.65;
    margin: 0;
    max-width: 430px;
}

.contacto-destino {
    align-items: center;
    border-top: 1px solid var(--ab-beige);
    color: var(--ab-carbon);
    display: flex;
    gap: 14px;
    margin-top: 34px;
    max-width: 390px;
    padding-top: 20px;
    text-decoration: none;
}

.contacto-destino:hover strong {
    color: var(--ab-copper);
}

.contacto-destino-icono {
    align-items: center;
    background: var(--ab-wine);
    border-radius: 50%;
    color: var(--ab-ivory);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: 20px;
    height: 42px;
    justify-content: center;
}

.contacto-destino strong,
.contacto-destino small {
    display: block;
}

.contacto-destino strong {
    color: var(--ab-wine);
    font-size: 15px;
}

.contacto-destino small {
    color: var(--ab-taupe);
    font-size: 13px;
    margin-top: 4px;
}

.contacto-formulario-columna {
    min-width: 0;
}

.formulario-container.contacto-layout .formulario-contacto {
    background: #fffaf5;
    border: 1px solid var(--ab-beige);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(64, 56, 52, .13);
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    padding: 38px;
    width: 100%;
}

.contacto-formulario-header {
    margin-bottom: 24px;
}

.contacto-formulario-header h2 {
    color: var(--ab-wine);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    margin: 0 0 8px;
    text-align: center;
}

.contacto-formulario-header > p:last-child {
    color: var(--ab-taupe);
    font-size: 14px;
    margin: 0;
}

.contacto-campos-identidad {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contacto-campo {
    color: var(--ab-mocha);
    display: grid;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    margin: 0 0 18px;
    text-align: left;
}

.formulario-container.contacto-layout .contacto-campo input,
.formulario-container.contacto-layout .contacto-campo textarea {
    background: #fff;
    border: 1px solid var(--ab-beige);
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--ab-carbon);
    font: 400 15px Georgia, "Times New Roman", serif;
    margin: 0;
    min-height: 46px;
    padding: 12px 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
    width: 100%;
}

.formulario-container.contacto-layout .contacto-campo textarea {
    min-height: 195px;
    padding: 14px;
    resize: vertical;
}

.formulario-container.contacto-layout .contacto-campo input:focus,
.formulario-container.contacto-layout .contacto-campo textarea:focus {
    border-color: var(--ab-copper);
    box-shadow: 0 0 0 3px rgba(184, 117, 82, .14);
    outline: none;
}

.formulario-container.contacto-layout .contacto-campo input::placeholder,
.formulario-container.contacto-layout .contacto-campo textarea::placeholder {
    color: #9b877c;
}

.contacto-identidad {
    background: #f3e7dd;
    border-left: 3px solid var(--ab-copper);
    border-radius: 4px;
    color: var(--ab-carbon);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
    padding: 12px 14px;
}

.contacto-identidad strong {
    color: var(--ab-wine);
}

.formulario-container.contacto-layout .mensaje-contenedor {
    display: grid;
    gap: 10px;
}

.formulario-container.contacto-layout .foto-mensaje {
    background: #f3e7dd;
    border: 1px solid var(--ab-beige);
    border-radius: 5px;
    color: var(--ab-wine);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    padding: 9px 12px;
    position: static;
    width: fit-content;
}

.formulario-container.contacto-layout .foto-mensaje:hover {
    background: #eadbd0;
}

.formulario-container.contacto-layout .foto-mensaje input {
    display: none;
}

.foto-mensaje-vista {
    align-items: center;
    background: #fffaf6;
    border: 1px solid var(--ab-beige);
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 8px;
}

.foto-mensaje-vista[hidden] {
    display: none;
}

.foto-mensaje-vista img {
    background: #f3e7dd;
    border-radius: 4px;
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 80px !important;
    height: 80px !important;
    max-height: 80px !important;
    max-width: 80px !important;
    min-height: 80px !important;
    min-width: 80px !important;
    object-fit: contain !important;
    width: 80px !important;
}

.foto-mensaje-detalles {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.foto-mensaje-detalles span {
    color: var(--ab-carbon);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.formulario-container.contacto-layout .foto-mensaje-detalles button {
    background: transparent;
    border: 1px solid var(--ab-beige);
    border-radius: 4px;
    color: var(--ab-wine);
    cursor: pointer;
    font: inherit;
    padding: 4px 8px;
    width: auto;
}

.formulario-container.contacto-layout .foto-mensaje-detalles button:hover {
    background: var(--ab-wine);
    border-color: var(--ab-wine);
    color: var(--ab-ivory);
}

.contacto-ayuda-archivo {
    color: var(--ab-taupe);
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}

.formulario-container.contacto-layout .formulario-contacto > button {
    align-items: center;
    background: var(--ab-wine);
    border: 0;
    border-radius: 5px;
    color: var(--ab-ivory);
    display: flex;
    font: 700 15px Georgia, "Times New Roman", serif;
    gap: 12px;
    justify-content: center;
    margin: 24px 0 0;
    min-height: 48px;
    padding: 12px 20px;
    transition: background .2s ease, transform .2s ease;
    width: 100%;
}

.formulario-container.contacto-layout .formulario-contacto > button:hover {
    background: var(--ab-copper);
    box-shadow: none;
    transform: translateY(-1px);
}

.contacto-notificacion {
    border-radius: 5px;
    line-height: 1.5;
    margin-bottom: 16px;
    padding: 13px 16px;
}

.contacto-notificacion.es-exito {
    background: #e8f1e8;
    border-left: 4px solid #507a55;
    color: #315638;
}

.contacto-notificacion.es-error {
    background: #f7e9e5;
    border-left: 4px solid #a34d3f;
    color: #71382f;
}

/* BANDEJA DE RESPUESTAS DEL USUARIO */
.bandeja-respuestas {
    margin: 34px auto 60px;
    max-width: 980px;
    padding: 0 22px;
}

.bandeja-encabezado {
    align-items: flex-start;
    border-bottom: 1px solid var(--ab-beige);
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 17px;
}

.bandeja-encabezado > div {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
}

.bandeja-eyebrow {
    color: var(--ab-copper);
    font-size: 10px;
    font-weight: 700;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.bandeja-encabezado h1 {
    color: var(--ab-wine);
    font: 700 32px/1.12 Georgia, "Times New Roman", serif;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
}

.bandeja-encabezado > div > p:last-child {
    color: var(--ab-taupe);
    font-size: 13px;
    line-height: 1.5;
    max-width: none;
    margin: 0;
}

.bandeja-accion { align-self: flex-start; flex: 0 0 auto; margin: 0; }

.bandeja-accion button,
.bandeja-vacia a {
    background: var(--ab-wine);
    border: 0;
    border-radius: 5px;
    color: var(--ab-ivory);
    cursor: pointer;
    display: inline-block;
    font: 700 11px/1.25 Georgia, "Times New Roman", serif;
    padding: 6px 9px;
    text-decoration: none;
    white-space: nowrap;
}

.bandeja-accion button:hover,
.bandeja-vacia a:hover { background: var(--ab-copper); }

.lista-respuestas { display: grid; gap: 13px; }

.respuesta-item {
    background: linear-gradient(145deg, #fffaf5, #fff7f1);
    border: 1px solid var(--ab-beige);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(72, 27, 24, .06);
    padding: 20px 21px;
}

.respuesta-item.respuesta-nueva { border-color: #c58b69; box-shadow: 0 10px 28px rgba(72, 27, 24, .1); }

.respuesta-meta {
    align-items: start;
    border-bottom: 1px solid #eadbd0;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding-bottom: 16px;
}

.respuesta-meta h2 {
    color: var(--ab-wine);
    font: 700 18px/1.25 Georgia, "Times New Roman", serif;
    margin: 0 0 5px;
    overflow-wrap: anywhere;
}

.respuesta-meta p,
.respuesta-fecha { color: var(--ab-taupe); font-size: 12px; margin: 0; }
.respuesta-fecha { align-items: end; display: flex; flex-direction: column; gap: 7px; white-space: nowrap; }
.respuesta-fecha span { background: #f1d8c9; border-radius: 3px; color: var(--ab-wine); font-size: 11px; font-weight: 700; padding: 4px 7px; }
.respuesta-contenido { padding-top: 16px; }
.respuesta-contenido h3 { color: var(--ab-terracotta-deep); font-size: 13px; margin: 0 0 6px; }
.respuesta-contenido p { background: #f8f1eb; border-radius: 4px; color: var(--ab-carbon); font-size: 14px; line-height: 1.55; margin: 0 0 13px; overflow-wrap: anywhere; padding: 10px 12px; }
.respuesta-contenido p:last-child { background: #f3e7dd; margin-bottom: 0; }

.mensaje-hilo { margin: 15px 0; max-width: min(88%, 700px); }
.mensaje-hilo-usuario { margin-left: auto; }
.mensaje-hilo-admin { margin-right: auto; }
.mensaje-hilo-encabezado { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 7px; }
.mensaje-hilo-encabezado h3 { color: var(--ab-wine); font-size: 12px; margin: 0 auto 0 0; }
.mensaje-hilo-encabezado time { color: var(--ab-taupe); font-size: 10px; }
.mensaje-hilo > p { border: 1px solid #eadbd0; border-radius: 2px 9px 9px; color: var(--ab-carbon); font-size: 14px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; padding: 11px 13px; white-space: pre-wrap; }
.mensaje-hilo-usuario > p { background: #f3e7dd; }
.mensaje-hilo-admin > p { background: #fff; border-color: #d7b8a7; }
.mensaje-hilo-nuevo > p { background: #fff8f1; border-color: #b87552; box-shadow: 0 5px 16px rgba(72, 27, 24, .08); }
.mensaje-hilo-insignia { background: #743629; border-radius: 3px; color: #fffaf5; font-size: 10px; font-weight: 700; padding: 4px 7px; text-transform: uppercase; }

.respuesta-acciones { align-items: end; border-top: 1px solid #eadbd0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; margin-top: 20px; padding-top: 16px; }
.formulario-replica { background: #f8f1eb; border: 1px solid #eadbd0; border-radius: 6px; display: grid; gap: 10px; min-width: 0; padding: 12px; }
.formulario-replica-encabezado { align-items: center; display: flex; gap: 11px; }
.formulario-replica-encabezado > span { align-items: center; background: var(--ab-wine); border-radius: 50%; color: var(--ab-ivory); display: inline-flex; flex: 0 0 30px; font-size: 16px; height: 30px; justify-content: center; }
.formulario-replica-encabezado div { display: grid; gap: 3px; }
.formulario-replica label { color: var(--ab-wine); font-size: 12px; font-weight: 700; text-align: left; }
.formulario-replica-encabezado small,
.formulario-replica-pie small { color: var(--ab-taupe); font-size: 11px; line-height: 1.4; }
.formulario-replica textarea { background: #fff; border: 1px solid var(--ab-beige); border-radius: 5px; box-sizing: border-box; color: var(--ab-carbon); font: 13px/1.55 Georgia, "Times New Roman", serif; min-height: 92px; padding: 10px 11px; resize: vertical; width: 100%; }
.formulario-replica textarea:focus { border-color: var(--ab-copper); box-shadow: 0 0 0 3px rgba(184, 117, 82, .14); outline: 0; }
.formulario-replica-pie { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.formulario-replica button,
.formulario-eliminar-conversacion button { align-self: start; border: 0; border-radius: 5px; cursor: pointer; font: 700 12px Georgia, "Times New Roman", serif; min-height: 35px; padding: 8px 11px; }
.formulario-replica button { background: var(--ab-wine); color: var(--ab-ivory); justify-self: start; }
.formulario-replica button:hover { background: var(--ab-copper); }
.formulario-eliminar-conversacion { align-self: end; }
.formulario-eliminar-conversacion button { background: transparent; border: 1px solid #c58d80; color: #8a4438; }
.formulario-eliminar-conversacion button:hover { background: #f7e9e5; }

.bandeja-vacia {
    background: #fffaf5;
    border: 1px solid var(--ab-beige);
    border-radius: 7px;
    padding: 54px 24px;
    text-align: center;
}

.bandeja-vacia > span { color: var(--ab-copper); font-size: 32px; }
.bandeja-vacia h2 { color: var(--ab-wine); font: 700 22px Georgia, "Times New Roman", serif; margin: 12px 0 8px; }
.bandeja-vacia p { color: var(--ab-taupe); margin: 0 0 20px; }
.bandeja-confirmacion { background: #e8f1e8; border-left: 4px solid #507a55; color: #315638; margin: 0 0 18px; padding: 12px 15px; }

@media (max-width: 600px) {
    .bandeja-respuestas { margin-top: 28px; padding: 0 16px; }
    .bandeja-encabezado { align-items: flex-start; flex-direction: column; gap: 12px; }
    .bandeja-encabezado h1 { font-size: 25px; }
    .bandeja-accion button { font-size: 10px; padding: 6px 8px; }
    .respuesta-item { padding: 18px 16px; }
    .respuesta-meta { flex-direction: column; }
    .respuesta-fecha { align-items: start; }
    .respuesta-acciones { grid-template-columns: 1fr; }
    .formulario-eliminar-conversacion { justify-self: start; }
    .mensaje-hilo { max-width: 96%; }
    .respuesta-item { padding: 18px 16px; }
    .respuesta-fecha { white-space: normal; }
    .formulario-replica-pie { align-items: stretch; flex-direction: column; }
    .formulario-replica-pie button { width: 100%; }
}

@media (max-width: 800px) {
    .formulario-container.contacto-layout {
        gap: 30px;
        grid-template-columns: 1fr;
        margin-top: 32px;
        max-width: 620px;
    }

    .contacto-intro {
        max-width: 560px;
    }

    .contacto-intro h1 {
        font-size: 38px;
    }
}

@media (max-width: 520px) {
    .formulario-container.contacto-layout {
        padding: 12px;
        width: calc(100% - 24px);
    }

    .formulario-container.contacto-layout .formulario-contacto {
        padding: 22px 18px;
    }

    .contacto-campos-identidad {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contacto-intro h1 {
        font-size: 32px;
    }
}

/* POSICION FINAL DEL HEADER */
.header .carrito {
    bottom: 12px;
    right: 12px;
    top: auto;
}

.header .accesos-beneficios { align-items: center; bottom: 12px; display: flex; gap: 10px; position: absolute; right: 12px; z-index: 4; }
.header .accesos-beneficios .carrito { bottom: auto; position: relative; right: auto; top: auto; }
.acceso-avisos { color: #fff3e9; font-size: 19px; line-height: 1; position: relative; text-decoration: none; }
.contador-avisos { background: #c62828; border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; min-width: 13px; padding: 2px 4px; position: absolute; right: -9px; text-align: center; top: -9px; }
.saldo-puntos { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.38); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 8px; text-decoration: none; white-space: nowrap; }
.acceso-avisos:hover, .saldo-puntos:hover { color: #ffe0cc; }
.canje-puntos { align-items: center; background: #f3f8f3; border: 1px solid #c8dec9; border-radius: 4px; color: #275b37; display: flex; gap: 10px; margin: 14px 0; padding: 11px 13px; }
.canje-puntos input { accent-color: #27623a; height: 18px; width: 18px; }
.canje-puntos span { display: grid; gap: 3px; }
.canje-puntos small { color: #5a6e5d; }
.canje-puntos-aviso { color: #75665d; font-size: 13px; margin: 12px 0; }
.pedido-descuento { color: #27623a; font-weight: 700; margin: 12px 0 0; text-align: right; }

.beneficios-cliente { box-sizing: border-box; color: #352c29; margin: 34px auto 70px; max-width: 1180px; padding: 0 24px; width: 100%; }
.beneficios-cabecera { align-items: end; background: linear-gradient(115deg, #24543f 0%, #327052 100%); border-radius: 8px; box-shadow: 0 12px 28px rgba(35, 75, 55, .14); color: #fff; display: flex; justify-content: space-between; gap: 20px; padding: 26px 30px; }
.beneficios-etiqueta { color: #c9e2d0; font-size: 11px; font-weight: 700; margin: 0 0 8px; }
.beneficios-cabecera h1 { color: #fff; font: 700 34px Georgia, serif; margin: 0; }
.beneficios-subtitulo { color: #e4eee6; font-size: 13px; margin: 7px 0 0; }
.beneficios-saldo { align-items: baseline; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 6px; color: #fff; display: flex; gap: 8px; padding: 10px 14px; }
.beneficios-saldo strong { font-size: 30px; }
.beneficios-saldo span { font-size: 13px; }
.reglas-puntos { border-bottom: 1px solid #e6ddd6; display: grid; gap: 10px; padding: 20px 4px; }
.reglas-puntos p { color: #645750; font-size: 15px; line-height: 1.5; margin: 0; }
.reglas-puntos strong { color: #492c24; display: inline-block; font-size: 16px; min-width: 105px; }
.centro-notificaciones { margin: 34px auto 0; max-width: 1020px; }
.notificaciones-cabecera { align-items: end; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 16px; }
.notificaciones-cabecera h2 { color: #492c24; font: 700 20px Georgia, serif; margin: 0; }
.notificaciones-cabecera form { flex: 0 0 auto; margin: 0; }
.notificaciones-marcar-leidas { align-items: center; background: transparent; border: 1px solid #d9bec1; border-radius: 4px; color: #7d4d56; cursor: pointer; display: inline-flex; font: 600 12px Arial, sans-serif; gap: 7px; padding: 8px 11px; width: auto; }
.notificaciones-marcar-leidas:hover { background: #f7ecec; border-color: #b9858c; }
.notificaciones-marcar-leidas:focus-visible { outline: 2px solid #9a5d68; outline-offset: 2px; }
.solicitud-beneficios { background: #fff; border: 1px solid #eadfd8; border-radius: 8px; box-sizing: border-box; margin-top: 18px; padding: 28px; width: 100%; }
.solicitud-beneficios h2, .historial-solicitudes h2 { color: #492c24; font: 700 20px Georgia, serif; margin: 0 0 14px; }
.solicitud-beneficios-acciones { align-items: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; }
.solicitud-beneficios-acciones form { align-content: start; background: #f7f8f4; border: 1px solid #e2e9df; border-radius: 6px; box-sizing: border-box; display: grid; gap: 9px; min-height: 150px; min-width: 0; padding: 18px; width: 100%; }
.solicitud-beneficios-acciones input { display: none; }
.solicitud-beneficios-acciones label { color: #554b44; font-size: 13px; font-weight: 700; }
.solicitud-beneficios-acciones select { background: #fff; border: 1px solid #cfc7be; border-radius: 4px; box-sizing: border-box; color: #352c29; font: inherit; min-height: 42px; padding: 8px 10px; width: 100%; }
.solicitud-beneficios-acciones button { background: #27623a; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-weight: 700; min-height: 42px; padding: 11px 14px; width: 100%; }
.solicitud-beneficios-acciones button:disabled { background: #aaa39d; cursor: not-allowed; }
.solicitud-beneficios-acciones small { color: #645750; font-size: 12px; }
.beneficios-mensaje { background: #e4f2e8; border-left: 4px solid #27623a; color: #275b37; margin: 16px 0; padding: 12px 14px; }
.historial-solicitudes { border-bottom: 1px solid #e6ddd6; padding: 18px 0; }
.historial-solicitudes p { color: #645750; font-size: 13px; margin: 8px 0; }
.canje-puntos-activo { background: #f3f8f3; border-left: 3px solid #27623a; padding: 10px 12px; }
.canje-puntos-aviso a { color: #27623a; font-weight: 700; }
.notificaciones-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notificacion-tarjeta { --notificacion-acento: #9b6670; background: #fff; border: 1px solid #eadfd8; border-left: 3px solid #d8c9c2; border-radius: 6px; box-shadow: 0 3px 12px rgba(67, 45, 37, .045); box-sizing: border-box; min-width: 0; padding: 13px 15px; transition: box-shadow .18s ease, transform .18s ease; }
.notificacion-tarjeta:hover { box-shadow: 0 7px 18px rgba(67, 45, 37, .09); transform: translateY(-1px); }
.notificacion-tarjeta.pendiente-lectura { background: #fffdfc; border-left-color: #bd7d88; }
.notificacion-tarjeta.tipo-obsequio { --notificacion-acento: #b45d76; }
.notificacion-tarjeta.tipo-descuento { --notificacion-acento: #a87548; }
.notificacion-tarjeta.tipo-promocion { --notificacion-acento: #9a697e; }
.notificacion-tarjeta.tipo-canje { --notificacion-acento: #55816b; }
.notificacion-tarjeta-cabecera { align-items: center; display: flex; gap: 8px; min-width: 0; }
.notificacion-icono { align-items: center; background: color-mix(in srgb, var(--notificacion-acento) 12%, white); border-radius: 5px; color: var(--notificacion-acento); display: inline-flex; flex: 0 0 30px; font-size: 15px; font-weight: 700; height: 30px; justify-content: center; width: 30px; }
.notificacion-categoria { color: var(--notificacion-acento); font-size: 10px; font-weight: 700; }
.notificacion-pendiente { background: #f7e8ea; border-radius: 10px; color: #874c58; font-size: 9px; font-weight: 700; padding: 3px 7px; }
.notificacion-tarjeta-cabecera time { color: #897a73; font-size: 10px; margin-left: auto; white-space: nowrap; }
.notificacion-tarjeta-cuerpo { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 9px; min-width: 0; }
.notificacion-tarjeta-cuerpo.con-imagen { grid-template-columns: 88px minmax(0, 1fr); }
.notificacion-tarjeta-cuerpo img { aspect-ratio: 1 / 1; background: #f5f0ec; border-radius: 4px; height: 88px; object-fit: cover; width: 88px; }
.notificacion-beneficio-contenido { min-width: 0; overflow-wrap: anywhere; }
.notificacion-beneficio-contenido h3 { color: #492c24; font-size: 15px; line-height: 1.3; margin: 0 0 5px; }
.notificacion-beneficio-contenido p { color: #645750; font-size: 12px; line-height: 1.45; margin: 0; }
.notificacion-precio { color: #27623a; display: block; font-size: 12px; margin-top: 6px; }
.beneficios-vacio { background: #fff; border: 1px solid #eadfd8; border-radius: 6px; color: #71655e; font-size: 13px; margin: 0; padding: 22px; }

.producto-destacado-inicio { border: 0; border-radius: 0; margin: 16px 0 8px; max-width: none; padding: 12px max(24px, calc((100% - 1180px) / 2)); width: 100%; }
.producto-destacado-foto img { max-height: 120px; }
.producto-destacado-sin-imagen { min-height: 110px; }
.producto-destacado-titulo { font-size: 1.8rem; }
.producto-destacado-inicio > .decoracion-titulo { margin: 3px auto; }
.producto-destacado-texto .producto-destacado-meta { font-size: .72rem; margin: 0; }
.producto-destacado-texto h2 { font-size: 1.55rem; margin: 3px 0 5px; }
.producto-destacado-descripcion { max-height: 1.5em; }
.producto-destacado-descripcion p { line-height: 1.5; margin-bottom: .35em; }
.producto-destacado-precio { font-size: 1rem; margin: 3px 0 5px; }
.producto-destacado-boton { font-size: 13px; padding: 6px 11px; }
.mejores-descuentos { border-radius: 12px; margin: 28px auto 0; max-width: none; padding: 34px max(20px, calc((100% - 1360px) / 2)); width: calc(100% - clamp(32px, 8vw, 112px)); }

@media (max-width: 760px) {
    .producto-destacado-inicio { padding: 14px 24px; }
    .producto-destacado-foto img { max-height: 90px; }
    .producto-destacado-sin-imagen { min-height: 80px; }
    .producto-destacado-inicio > .decoracion-titulo { margin: 2px auto; }
    .producto-destacado-descripcion { max-height: 1.5em; }
    .mejores-descuentos { padding: 30px 20px; width: calc(100% - 40px); }
    .notificaciones-grid { grid-template-columns: minmax(0, 1fr); }
    .notificaciones-cabecera { align-items: flex-start; flex-direction: column; gap: 12px; }
}

@media (max-width: 540px) {
    .producto-destacado-inicio { padding: 14px; }
    .producto-destacado-foto img { max-height: 80px; }
    .producto-destacado-titulo { font-size: 1.6rem; }
    .mejores-descuentos { padding: 24px 14px; width: calc(100% - 28px); }
}

@media (max-width: 560px) {
    .header .accesos-beneficios { bottom: 8px; gap: 7px; right: 8px; }
    .saldo-puntos { font-size: 11px; padding: 5px 6px; }
    .beneficios-cliente { margin-top: 20px; padding: 0 16px; }
    .beneficios-cabecera { align-items: start; flex-direction: column; }
    .beneficios-cabecera h1 { font-size: 29px; }
    .reglas-puntos { display: grid; gap: 8px; }
    .solicitud-beneficios-acciones { grid-template-columns: minmax(0, 1fr); }
    .solicitud-beneficios { padding: 18px 14px; }
    .centro-notificaciones { margin-top: 28px; }
    .notificaciones-cabecera { align-items: flex-start; flex-direction: column; gap: 12px; }
    .notificaciones-grid { grid-template-columns: minmax(0, 1fr); }
    .notificacion-tarjeta { padding: 12px; }
    .notificacion-tarjeta-cuerpo.con-imagen { grid-template-columns: 72px minmax(0, 1fr); }
    .notificacion-tarjeta-cuerpo img { height: 72px; width: 72px; }
}

.header:not(.header-admin) .acceso-cuenta {
    left: auto;
    right: 0;
    top: 14px;
}

.header .menu {
    flex-wrap: nowrap;
    left: 132px;
    top: 50px;
    width: auto;
}

@media (max-width: 900px) {
    .header .menu {
        left: 112px;
        max-width: calc(100% - 112px);
        min-width: 0;
        top: 50px;
        width: calc(100% - 112px);
    }
}

@media (max-width: 560px) {
    .header .menu {
        left: 92px;
        max-width: calc(100% - 92px);
        min-width: 0;
        top: 48px;
        width: calc(100% - 92px);
        scrollbar-width: none;
    }

    .header .menu::-webkit-scrollbar {
        display: none;
    }
}

/* CENTRAR FORMULARIO EN TODA LA PANTALLA */
.formulario-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh; /* centra verticalmente */
}

/* CAJA DEL FORMULARIO */
.formulario {
    background: #f3c6d3;
    padding: 30px;
    border-radius: 25px;
    width: 350px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
}

/* INPUTS */
.formulario input,
.formulario textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 10px;
    border: none;
}

/* TEXTAREA */
.formulario textarea {
    height: 100px;
    resize: none;
}

/* BOTON */
.formulario button {
    width: auto;
    padding: 10px 25px;
    background: #ff66a3;
    color: white;
    border-radius: 20px;
    border: none;
    cursor: pointer;
}

.formulario button:hover {
    background: #e0558f;
}

.etiqueta-agotado {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: #dc2626;
    color: #ffffff;
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
}