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

body {
    font-family: Arial, sans-serif;
    background: #050505;
    color: #ffffff;
    min-height: 100vh;
}

.hero {
    min-height: auto;
    aspect-ratio: 3 / 1;
    margin-top: 140px;

    display: flex;
    align-items: center;
    padding: 0;

    background-image: url("../images/banner-pc.PNG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    right: 6%;
    bottom: 5%;
    width: 48%;
    height: 110px;
    background: radial-gradient(
        ellipse,
        rgba(216, 184, 107, 0.45) 0%,
        rgba(200, 162, 77, 0.22) 35%,
        transparent 72%
    );
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.hero-content {
    max-width: 980px;
    margin-left: -20px;
}

.eyebrow {
    color: #c8a24d;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

h1 {
    font-size: 56px;
    line-height: 1.05;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    max-width: 520px;
}

.hero-text {
    max-width: 620px;
    font-size: 20px;
    line-height: 1.6;
    color: #cfcfcf;
    margin-bottom: 36px;
}

 .hero-buttons {
    position: absolute;
    left: 62%;
    top: 84%;
    z-index: 10;

    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
}

.btn {
    display: inline-block;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: 0.3s;
}

.btn-gold,
.btn-outline {
    background: rgba(12, 12, 12, 0.72);
    color: #d8b86b;

    border: 1.5px solid #c8a24d;
    border-radius: 12px;

    box-shadow: 0 0 14px rgba(200, 162, 77, 0.12);

    transition: 0.3s;
}

.btn-gold:hover,
.btn-outline:hover {
    background: #c8a24d;
    color: #090909;

    border-color: #c8a24d;

    box-shadow: 0 0 20px rgba(200, 162, 77, 0.28);

    transform: translateY(-3px);
}
/* ===== BARRA INFORMATIVA GLOBAL - PC Y MOBILE ===== */

.mobile-topbar {
    display: block;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 36px;

    overflow: hidden;

    background: #111111;
    border-bottom: 1px solid rgba(200, 162, 77, 0.45);

    color: #c8a24d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;

    z-index: 5000;
}

.topbar-marquee {
    width: 100%;
    height: 100%;

    overflow: hidden;

    display: flex;
    align-items: center;
}

.topbar-track {
    display: flex;
    align-items: center;

    width: max-content;
    min-width: max-content;

    white-space: nowrap;

    animation: topbarMovimientoDerecha 38s linear infinite;
}

.topbar-grupo {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}

.topbar-grupo span {
    display: inline-block;
    margin-right: 46px;
    white-space: nowrap;
}

@keyframes topbarMovimientoDerecha {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.mobile-topbar:hover .topbar-track {
    animation-play-state: paused;
}


/* ===== MOBILE ===== */

@media (max-width: 700px) {

    .mobile-topbar {
        height: 36px;

        font-size: 11px;
        letter-spacing: 0.7px;
    }

    .topbar-grupo span {
        margin-right: 34px;
    }

    .topbar-track {
        animation-duration: 34s;
    }

    .hero {
        padding: 145px 24px 50px;
        min-height: auto;
    }

    h1 {
        font-size: 32px;
        line-height: 1.08;
    }

    .hero-text {
        font-size: 16px;
        line-height: 1.55;
    }

}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-content {
    flex: 1;
}

.hero-image {
    flex: 1;
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    isolation: isolate;
}

.hero-image::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: 620px;
    height: 620px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(200, 162, 77, 0.65) 0%,
        rgba(200, 162, 77, 0.30) 35%,
        rgba(200, 162, 77, 0.10) 58%,
        transparent 75%
    );
    filter: blur(24px);
    z-index: 0;
    pointer-events: none;
}

.hero-image img {
    width: 100%;
    max-width: 720px;
    height: auto;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    filter:
        brightness(1.35)
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 25px 45px rgba(0, 0, 0, 0.7));
}
.features{
    padding:100px 40px;
    background:#111;
}

.container{
    max-width:1200px;
    margin:auto;
}

.section-eyebrow{
    color:#c8a24d;
    letter-spacing:3px;
    text-transform:uppercase;
    text-align:center;
    margin-bottom:15px;
}

.features h2{
    color:#fff;
    text-align:center;
    font-size:42px;
    margin-bottom:30px;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.feature-card{
    background:#111111;
    border:1px solid rgba(200, 162, 77,.4);
    border-radius:18px;
    padding:35px;
    transition:.3s;
}

.feature-card:hover{
    transform:translateY(-6px);
    border-color:#c8a24d;
    background:#151515;
}

.feature-card h3{
    color:#fff;
    margin-bottom:12px;
}

.feature-card p{
    color:#bdbdbd;
    line-height:1.7;
}
/* ===== NAVBAR - MIREKA PERFUMERÍA, ORO #C8A24D ===== */

.menu-toggle {
    display: none;
}

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    background:rgba(10,10,10,.75);
    backdrop-filter:blur(12px);
}

.nav-container{
    max-width:1200px;
    margin:auto;
    padding:11px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    color:#c8a24d;
    text-decoration:none;
    font-size:28px;
    font-weight:700;
    letter-spacing:2px;
}

.nav-links{
    display:flex;
    gap:35px;
}

.nav-links a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.nav-links a:hover{
    color:#c8a24d;
}

.nav-button{
    background:#c8a24d;
    color:black;
    text-decoration:none;
    padding:12px 22px;
    border-radius:50px;
    font-weight:bold;
    transition:.3s;
}

.nav-button:hover{
    transform:translateY(-2px);
}

.hero{
    padding-top:190px;
}
.logo{
    display:flex;
    align-items:center;
}

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


.hero-content h1 {
    max-width: 850px;
}
/* ===== MARCAS ===== */

.brands{
    padding:120px 10%;
    background:#050505;
}

.brands-text{
    max-width:700px;
    margin:20px auto 60px;
    text-align:center;
    color:#bfbfbf;
    font-size:20px;
    line-height:1.7;
}

.brands-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.brand{
    background:#111;
    border:1px solid rgba(200, 162, 77,.18);
    border-radius:18px;
    padding:28px;
    text-align:center;
    color:white;
    font-size:22px;
    font-weight:600;
    transition:.3s;
}

.brand:hover{
    border-color:#c8a24d;
    transform:translateY(-5px);
}
/* ===== PASOS ===== */

.steps{
    padding:100px 10%;
    background:#080808;
}

.steps-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:60px;
}

.step-card{
    background:#111;
    border:1px solid rgba(200, 162, 77,.18);
    border-radius:20px;
    padding:32px 30px;
    transition:.3s;
}

.step-card:hover{
    transform:translateY(-8px);
    border-color:#c8a24d;
}

.step-number{
    display:inline-block;
    font-size:42px;
    font-weight:700;
    color:#c8a24d;
    margin-bottom:25px;
}

.step-card h3{
    color:#fff;
    font-size:28px;
    margin-bottom:18px;
}

.step-card p{
    color:#bfbfbf;
    font-size:18px;
    line-height:1.7;
}
/* ===== ESTADÍSTICAS ===== */

.stats{
    padding:120px 10%;
    background:#050505;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:60px;
}

.stat-card{
    background:#111;
    border:1px solid rgba(200, 162, 77,.18);
    border-radius:20px;
    padding:40px 25px;
    text-align:center;
    transition:.3s;
}

.stat-card:hover{
    transform:translateY(-6px);
    border-color:#c8a24d;
}

.stat-card h3{
    font-size:56px;
    color:#c8a24d;
    margin-bottom:15px;
    font-weight:800;
}

.stat-card p{
    color:#f5f5f5;
    font-size:20px;
    line-height:1.5;
}
.stats .section-eyebrow,
.stats h2{
    text-align:center;
}

.stats h2{
    font-size:48px;
    margin-bottom:20px;
}

.stats-grid{
    margin-top:40px;
}

.stat-card{
    padding:28px 20px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.stats .section-eyebrow,
.stats h2{
    text-align:center;
}

.stats h2{
    font-size:48px;
    margin-bottom:20px;
}

.stats-grid{
    margin-top:40px;
}

.stat-card{
    padding:28px 20px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}.stats .section-eyebrow,
.stats h2{
    text-align:center;
}

.stats h2{
    font-size:48px;
    margin-bottom:20px;
}

.stats-grid{
    margin-top:40px;
}

.stat-card{
    padding:28px 20px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.stat-card h3{
    margin-bottom:10px;
}
/* ===== CATÁLOGO ===== */

.catalog{
    padding:120px 10%;
    background:#080808;
}

.catalog .section-eyebrow,
.catalog h2{
    text-align:center;
}

.catalog h2{
    font-size:52px;
    margin-bottom:60px;
}

.catalog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.catalog-card{
    background:#111;
    border:1px solid rgba(200, 162, 77,.20);
    border-radius:22px;
    min-height:50px;
    padding:5px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    transition:.35s;
    overflow:hidden;
    position:relative;
}

.catalog-card:hover{
    transform:translateY(-8px);
    border-color:#c8a24d;
}

.catalog-card h3{
    font-size:34px;
    margin-bottom:15px;
    color:white;
}
.catalog-card img{
    width: 240px;
    height: 240px;
    object-fit: contain;
    display: block;
    margin: 10px auto 20px;
}
.catalog-card.bharara img {
    width: 270px;
    height: 270px;
}

.catalog-card.french-avenue img {
    width: 400px;
    height: 400px;
}

.catalog-card.rasasi img {
    width: 300px;
    height: 300px;
}
.catalog-card.armaf img {
    width: 280px;
    height: 280px;
}

.catalog-card.french-avenue img {
    width: 290px;
    height: 290px;
}

.catalog-card.lattafa img {
    width: 290px;
    height: 290px;
}

.catalog-card.maison-alhambra img {
    width: 290px;
    height: 290px;
}

.catalog-card.al-wataniah img {
    transform: translateY(-10px);
}

.catalog-card a{
    color:#c8a24d;
    text-decoration:none;
    font-weight:700;
    font-size:20px;
    margin-bottom: 20px;
}
.whatsapp-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8a24d;
  border-radius: 50%;
  color: #c8a24d;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.whatsapp-icon:hover {
  transform: scale(1.08);
  background-color: rgba(200, 162, 77, 0.12);
}
@media (max-width: 768px) {

    .menu-toggle {
    display: flex;
    align-items: center;
    gap: 7px;

    font-size: 15px;
    font-weight: 700;
    color: #c8a24d;

    cursor: pointer;
}

.menu-icon {
    font-size: 25px;
    line-height: 1;
}

.menu-texto {
    font-size: 12px;
    letter-spacing: 0.8px;
    line-height: 1;
    transform: translateY(2px);
}

  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .catalog-card {
    min-height: 230px;
    padding: 10px;
    border-radius: 18px;
  }

  .catalog-card img {
    width: 140px;
    height: 140px;
    margin: 5px auto 12px;
  }

  .catalog-card a {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .nav-links {
    display: none;
}

.nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #0b0907;
    padding: 15px;
    gap: 12px;
    z-index: 1000;
    text-align: center;
}

.navbar {
    top: 34px;
    background: #050505 !important;
}

.nav-container {
    padding: 12px 18px;
    min-height: 95px;
    position: relative;
    background: #050505 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.logo img {
    width: 105px;
    height: auto;
    object-fit: contain;
    display: block;
}

.whatsapp-icon {
    width: 48px;
    height: 48px;
}
.hero-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

.hero-content {
    width: 100%;
}

.hero-image {
    width: 100%;
    margin-top: 20px;
}

.hero h1 {
    font-size: 48px;
    line-height: 1.1;
}
.hero {
    overflow: hidden;
    padding: 0;
    width: 100%;
    aspect-ratio: 9 / 16;

    background-image: url("images/portada-mobile.webp.PNG");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-container {
    width: 100%;
    max-width: 100%;
    gap: 25px;
    flex-direction: column;
    justify-content: flex-start;
}

.hero-content {
    width: 100%;
    max-width: 100%;
}

.hero-image {
    width: 100%;
    max-width: 100%;
    margin-top: -70px;
    display: none;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 430px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero h1 {
    font-size: 42px;
    line-height: 1.05;
    overflow-wrap: break-word;
}
}
.feature-icon{
    display:block;
    margin-bottom:18px;
    color:#c8a24d;
    width:32px;
    height:32px;
}
.feature-icon svg{
    width:100%;
    height:100%;
    display:block;
}
@media (min-width: 769px) {
    .titulo-segunda-linea {
        white-space: nowrap;
    }
}
#marcas {
    scroll-margin-top: 170px;
}
#como-comprar {
    scroll-margin-top: 170px;
}
#contacto {
    scroll-margin-top: 170px;
}

.contacto {
    min-height: 420px;
    padding: 100px 24px;
    display: flex;
    align-items: center;
    text-align: center;
    background: linear-gradient(
        180deg,
        #0b0b0b 0%,
        #050505 100%
    );
    border-top: 1px solid rgba(200, 162, 77, 0.25);
}

.contacto .container {
    max-width: 700px;
}

.contacto h2 {
    color: #ffffff;
    font-size: 42px;
    margin-bottom: 16px;
}

.contacto p {
    color: #cfcfcf;
    font-size: 20px;
    margin-bottom: 28px;
}

.contacto a {
    display: inline-block;
    padding: 16px 28px;
    border-radius: 999px;
    background: #c8a24d;
    color: #090909;
    text-decoration: none;
    font-weight: 700;
}
.contacto-boton {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.contacto-boton svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0;
}
#categorias {
    scroll-margin-top: 220px;
}

.categorias {
    padding: 45px 40px 100px;
    background: #0a0a0a;
}

.categorias h2 {
    color: #ffffff;
    text-align: center;

    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.5px;

    width: fit-content;
    margin: 0 auto 45px auto;

    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.categorias-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.categoria-card {
    min-height: 320px;
    padding: 20px;
    box-sizing: border-box;
    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.35);
    border-radius: 18px;
    transition: 0.3s;
}

.categoria-card img {
    width: 100%;
    height: 205px;
    object-fit: contain;
    display: block;
    margin-bottom: 22px;
}

.categoria-card h3 {
    margin: 0;
    text-align: center;
}

.categoria-card:hover {
    transform: translateY(-6px);
    border-color: #c8a24d;
}

.categoria-card h3 {
    color: #c8a24d;
    font-size: 22px;
    margin-bottom: 14px;
}

.categoria-card p {
    color: #cfcfcf;
    font-size: 16px;
    line-height: 1.6;
}
.categoria-card:nth-child(2) img {
    transform: scale(1.25);
}
.categoria-card:nth-child(1) img {
    transform: scale(1.12);
}
.categoria-card:nth-child(3) img {
    transform: scale(1.12);
}
.categoria-card:nth-child(4) img {
    transform: scale(1.12);
}
.categoria-card {
    position: relative;
    overflow: hidden;
}

.categoria-card::before {
    content: "";
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 280px;
    background: radial-gradient(
        circle,
        rgba(200, 162, 77, 0.28) 0%,
        rgba(200, 162, 77, 0.10) 42%,
        transparent 72%
    );
    filter: blur(12px);
    pointer-events: none;
}

.categoria-card img,
.categoria-card h3 {
    position: relative;
    z-index: 1;
}
.feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: -55px;
    left: -40px;
    width: 300px;
    height: 260px;
    background: radial-gradient(
        circle,
        rgba(200, 162, 77, 0.20) 0%,
        rgba(200, 162, 77, 0.08) 45%,
        transparent 72%
    );
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

.feature-card > * {
    position: relative;
    z-index: 1;
}
.step-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.step-card::before {
    content: "";
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 260px;
    background: radial-gradient(
        circle,
        rgba(200, 162, 77, 0.20) 0%,
        rgba(200, 162, 77, 0.08) 45%,
        transparent 72%
    );
    filter: blur(12px);
    pointer-events: none;
    z-index: 0;
}

.step-card > * {
    position: relative;
    z-index: 1;
}
.catalog-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.catalog-card::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 210px;
    background: radial-gradient(
        circle,
        rgba(200, 162, 77, 0.22) 0%,
        rgba(200, 162, 77, 0.08) 45%,
        transparent 72%
    );
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
}

.catalog-card img,
.catalog-card a {
    position: relative;
    z-index: 1;
}
.catalog-card::before,
.catalog-card::after {
    pointer-events: none;
}

.catalog-card a {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}
/* PÁGINA DE PRODUCTOS */

.productos-header {
    padding: 30px 5%;
    text-align: center;
    background: #080808;
    border-bottom: 1px solid rgba(200, 162, 77, 0.35);
}

.productos-header a {
    display: inline-block;
    margin-bottom: 20px;
    color: #c8a24d;
    text-decoration: none;
}

.productos-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: 42px;
}

.productos {
    padding: 60px 5%;
    min-height: 70vh;
}

.productos h2 {
    margin-bottom: 35px;
    text-align: center;
    color: #c8a24d;
    font-size: 32px;
}

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    justify-content: center;
    align-items: start;
    gap: 30px;
}

.productos .container {
    max-width: 1250px;
}

.producto-card {
    width: 250px;
    padding: 30px 14px 14px;
    text-align: center;
    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.35);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}
.producto-card .boton-producto {
    margin-top: auto;
}

.producto-card img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    display: block;
    margin-bottom: 18px;

    background: radial-gradient(
        ellipse at center,
        rgba(200, 162, 77, 0.38) 0%,
        rgba(200, 162, 77, 0.20) 32%,
        rgba(200, 162, 77, 0.08) 55%,
        transparent 75%
    );

    border-radius: 18px;
    transform: scale(1.22);
}

.producto-card h3 {
    margin: 5px 0 8px;
    color: #ffffff;
    font-size: 22px;
}

.producto-precio {
    margin: 4px 0;
    color: #ffffff;
}

.producto-precio.mayorista {
    color: #c8a24d;
    font-weight: 700;

    padding: 0 !important;
    margin: 4px 0 !important;
}

.producto-precio span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
}

.boton-producto {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 22px;
    color: #111111;
    background: #c8a24d;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}
/* DETALLE DEL PRODUCTO */

.producto-detalle-header {
    padding: 25px 5% 38px;
    text-align: center;
    background: #080808;
    border-bottom: 1px solid rgba(200, 162, 77, 0.35);
}

.producto-detalle-header a {
    color: #c8a24d;
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
}

.producto-detalle {
    padding: 60px 5%;
    min-height: 80vh;
    background: #080808;
    color: #ffffff;
}

.producto-detalle-contenido {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.producto-detalle-imagen {
    width: 100%;
    max-width: 430px;
    padding: 20px;
    box-sizing: border-box;
    justify-self: center;
    text-align: center;
    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.35);
    border-radius: 18px;
}

.producto-detalle-imagen img {
    width: 100%;
    max-width: 360px;
    height: 360px;
    object-fit: contain;

    background: radial-gradient(
        ellipse at center,
        rgba(200, 162, 77, 0.38) 0%,
        rgba(200, 162, 77, 0.20) 32%,
        rgba(200, 162, 77, 0.08) 55%,
        transparent 75%
    );

    border-radius: 18px;
}

.producto-detalle-info {
    color: #ffffff;
}

.producto-marca {
    display: none;
    margin: 0 0 8px;
    color: #c8a24d;
    font-size: 18px;
    font-weight: 700;
}

.producto-detalle-info h1 {
    margin: 0 0 25px;
    color: #ffffff;
    font-size: 42px;
}

.detalle-precio {
    margin: 2px 0;
    font-size: 20px;
}

.detalle-precio.mayorista {
    color: #c8a24d;
    font-weight: 700;
    padding: 0;
}

.condicion-mayorista {
    margin: 5px 0 8px;
    color: #bbbbbb;
    font-size: 14px;
}

.producto-descripcion,
.notas-olfativas {
    margin-top: 28px;
}

.producto-descripcion h2,
.notas-olfativas h2 {
    margin-bottom: 12px;
    color: #c8a24d;
    font-size: 23px;
}

.producto-descripcion p,
.notas-olfativas p {
    color: #dddddd;
    line-height: 1.7;
}

.producto-compra {
    margin-top: 30px;
}

.producto-compra label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: 600;
}

.producto-compra input {
    width: 70px;
    padding: 12px;
    margin-right: 10px;
    border: 1px solid #c8a24d;
    border-radius: 8px;
    font-size: 16px;
}

.agregar-carrito {
    padding: 13px 22px;
    color: #111111;
    background: #c8a24d;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

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

    .producto-detalle-imagen img {
        height: 300px;
    }

    .producto-detalle-info h1 {
        font-size: 32px;
    }
}
.producto-card .boton-producto,
.producto-card .agregar-carrito-card {
    width: 180px;
    min-height: 46px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.producto-card .boton-producto {
    display: flex;
    align-items: center;
    justify-content: center;
}

.producto-card .boton-producto,
.producto-card .agregar-carrito-card {
    width: 180px;
    min-height: 46px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.producto-card .boton-producto {
    display: flex;
    align-items: center;
    justify-content: center;
}

.agregar-carrito-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
}

.icono-carrito {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.boton-carrito {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 1000;

    width: 58px;
    height: 58px;

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

    color: #111111;
    background: #c8a24d;

    border: none;
    border-radius: 50%;
    cursor: pointer;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
}

.boton-carrito svg {
    width: 27px;
    height: 27px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

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

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

    color: #ffffff;
    background: #111111;
    border: 2px solid #c8a24d;
    border-radius: 50%;

    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
}
/* PANEL DEL CARRITO */

.carrito-overlay {
    position: fixed;
    inset: 0;
    z-index: 1998;

    background: rgba(0, 0, 0, 0.7);

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.carrito-overlay.activo {
    opacity: 1;
    visibility: visible;
}

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

    width: 390px;
    max-width: 90%;
    height: 100vh;

    display: flex;
    flex-direction: column;

    color: #ffffff;
    background: #111111;
    border-left: 1px solid rgba(200, 162, 77, 0.45);

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

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

.carrito-encabezado {
    padding: 22px;

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

    border-bottom: 1px solid rgba(200, 162, 77, 0.35);
}

.carrito-encabezado h2 {
    margin: 0;
    color: #c8a24d;
    font-size: 26px;
}

.cerrar-carrito {
    width: 40px;
    height: 40px;

    color: #ffffff;
    background: transparent;

    border: none;
    cursor: pointer;

    font-size: 32px;
    line-height: 1;
}

.carrito-productos {
    position: relative;

    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.carrito-vacio {
    margin-top: 40px;
    color: #bbbbbb;
    text-align: center;
}

.carrito-resumen {
    padding: 20px;
    background: #0a0a0a;
    border-top: 1px solid rgba(200, 162, 77, 0.35);
}

#mensaje-mayorista {
    margin: 0 0 18px;
    color: #c8a24d;
    font-size: 14px;
    line-height: 1.5;
}

.carrito-total {
    margin-bottom: 18px;

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

    color: #ffffff;
    font-size: 20px;
}

.carrito-total strong {
    color: #c8a24d;
    font-size: 23px;
}

.finalizar-pedido {
    width: 100%;
    padding: 15px;

    color: #111111;
    background: #c8a24d;

    border: none;
    border-radius: 9px;
    cursor: pointer;

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

@media (max-width: 480px) {
    .carrito-panel {
        width: 85%;
        max-width: 85%;
    }
}
/* PRODUCTOS DENTRO DEL CARRITO */

.carrito-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;

    padding: 16px 0;

    color: #ffffff;
    border-bottom: 1px solid rgba(200, 162, 77, 0.25);
}

.carrito-item img {
    width: 90px;
    height: 110px;

    display: block;
    object-fit: contain;

    background: #161616;
    border: 1px solid rgba(200, 162, 77, 0.3);
    border-radius: 10px;
}

.carrito-item-info {
    min-width: 0;
}

.carrito-item-info h3 {
    margin: 0 0 7px;

    color: #ffffff;
    font-size: 17px;
}

.carrito-item-info p {
    margin: 0 0 12px;

    color: #c8a24d;
    font-size: 15px;
    font-weight: 700;
}

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

    margin-bottom: 10px;
}

.carrito-cantidad button {
    width: 32px;
    height: 32px;

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

    color: #111111;
    background: #c8a24d;

    border: none;
    border-radius: 6px;
    cursor: pointer;

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

.carrito-cantidad span {
    min-width: 25px;

    color: #ffffff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
}

.eliminar-producto {
    padding: 0;

    color: #e78383;
    background: transparent;

    border: none;
    cursor: pointer;

    font-size: 14px;
    text-decoration: underline;
}
.producto-card img {
    margin-bottom: 20px;
}
.producto-card h3 {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {

    .hero {
        margin-top: 100px !important;
        padding: 0 !important;

        width: 100% !important;
        aspect-ratio: 3 / 4 !important;

        position: relative !important;
        overflow: visible !important;

        background-image: url("/images/portada-mobile.webp.PNG") !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        background-color: #000 !important;
    }

}

    .hero-buttons {
    position: absolute;
    left: 58%;
    top: auto;
    bottom: 18px;
    z-index: 10;

    display: flex;
    gap: 16px;
    flex-wrap: nowrap;

    padding: 10px 14px;

    background: rgba(0, 0, 0, 0.38);
    border: none;
    border-radius: 14px;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}
.categorias-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.categoria-card {
    min-height: 300px;
    padding: 14px;
}

.categoria-card img {
    height: 200px;
    margin-bottom: 12px;
    transform: scale(1.35);
}
.categoria-card h3 {
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0;
}

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

.catalogo-intro {
    text-align: center;
    margin-bottom: 28px;
}

.catalogo-intro h2 {
    color: #c8a24d;
    font-size: 34px;
    margin-bottom: 10px;
}

.catalogo-intro p {
    color: #e5e5e5;
    font-size: 16px;
}

.catalogo-buscador {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 24px;
}

.catalogo-buscador input {
    width: 100%;
    padding: 16px 20px;
    background: #111111;
    color: #ffffff;
    border: 1px solid rgba(200, 162, 77, 0.55);
    border-radius: 12px;
    font-size: 16px;
    outline: none;
}

.catalogo-buscador input:focus {
    border-color: #c8a24d;
}

.catalogo-buscador input::placeholder {
    color: #8f8f8f;
}

.catalogo-categorias {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.catalogo-filtro {
    padding: 12px 20px;
    background: #111111;
    color: #c8a24d;
    border: 1px solid #c8a24d;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.catalogo-filtro:hover,
.catalogo-filtro.activo {
    background: #c8a24d;
    color: #050505;
}

@media (max-width: 700px) {

    .catalogo-intro h2 {
        font-size: 27px;
    }

    .catalogo-intro p {
        font-size: 14px;
        line-height: 1.5;
    }

    .catalogo-buscador input {
        padding: 14px 16px;
        font-size: 15px;
    }

    .catalogo-categorias {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 30px;
    }

    .catalogo-filtro {
        width: 100%;
        padding: 12px 8px;
        font-size: 12px;
    }
    }
    .catalogo-info-precios {
    max-width: 720px;
    margin: 0 auto 35px;
    padding: 20px 24px;
    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 14px;
    text-align: center;
}

.catalogo-info-precios h3 {
    color: #c8a24d;
    font-size: 20px;
    margin-bottom: 8px;
}

.catalogo-info-precios p {
    color: #e5e5e5;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 700px) {
    .catalogo-info-precios {
        padding: 16px;
        margin-bottom: 28px;
    }

    .catalogo-info-precios h3 {
        font-size: 18px;
    }

    .catalogo-info-precios p {
    font-size: 13px;
}

}
.catalogo-stock-filtro {
    display: flex;
    justify-content: center;
    margin: 0 0 22px;
}

.catalogo-stock-filtro label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #e5e5e5;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.catalogo-stock-filtro input {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    background: #0b0b0b;
    border: 1px solid rgba(200, 162, 77, 0.75);
    border-radius: 6px;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: 0.25s ease;
}

.catalogo-stock-filtro input::before {
    content: "✓";
    color: #080808;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    transform: scale(0);
    transition: 0.2s ease;
}

.catalogo-stock-filtro input:checked {
    background: #c8a24d;
    border-color: #c8a24d;
    box-shadow: 0 0 12px rgba(200, 162, 77, 0.25);
}

.catalogo-stock-filtro input:checked::before {
    transform: scale(1);
}

.catalogo-stock-filtro label:hover {
    color: #c8a24d;
}
.catalogo-controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0 0 24px;
}

.catalogo-controles .catalogo-stock-filtro {
    margin: 0;
}

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

.catalogo-orden label {
    color: #e5e5e5;
    font-size: 14px;
    font-weight: 600;
}

.catalogo-orden select {
    padding: 9px 34px 9px 14px;
    background: #0b0b0b;
    color: #c8a24d;
    border: 1px solid rgba(200, 162, 77, 0.75);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.catalogo-orden select:focus {
    border-color: #c8a24d;
}

@media (max-width: 700px) {
    .catalogo-controles {
        flex-direction: column;
        gap: 14px;
    }
}
/* =========================
   PÁGINA MAYORISTA
========================= */

.mayorista {
    padding: 70px 20px 90px;
}

.mayorista .container {
    max-width: 1150px;
    margin: 0 auto;
}

.mayorista-intro {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.mayorista-etiqueta {
    display: inline-block;
    margin-bottom: 14px;
    color: #c8a24d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.mayorista-intro h2 {
    color: #c8a24d;
    font-size: 38px;
    line-height: 1.15;
    margin-bottom: 18px;
}

.mayorista-intro p {
    color: #e5e5e5;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.mayorista-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 70px;
}

.mayorista-paso {
    padding: 30px 24px;
    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.35);
    border-radius: 18px;
    text-align: center;
}

.mayorista-numero {
    width: 42px;
    height: 42px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: #c8a24d;
    color: #080808;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 900;
}

.mayorista-paso h3,
.mayorista-categoria h3,
.mayorista-importante h3 {
    color: #c8a24d;
}

.mayorista-paso h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.mayorista-paso p,
.mayorista-categoria p,
.mayorista-importante p {
    color: #d7d7d7;
    line-height: 1.6;
    margin: 0;
}

.mayorista-condiciones {
    margin-bottom: 45px;
}

.mayorista-condiciones > h2 {
    text-align: center;
    color: #c8a24d;
    font-size: 30px;
    margin-bottom: 30px;
}

.mayorista-categorias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.mayorista-categoria {
    padding: 24px;
    background: #0f0f0f;
    border: 1px solid rgba(200, 162, 77, 0.28);
    border-radius: 14px;
}

.mayorista-categoria h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.mayorista-importante {
    max-width: 850px;
    margin: 0 auto 50px;
    padding: 22px 26px;
    background: rgba(200, 162, 77, 0.06);
    border: 1px solid rgba(200, 162, 77, 0.55);
    border-radius: 14px;
    text-align: center;
}

.mayorista-importante h3 {
    margin-bottom: 8px;
}

.mayorista-beneficios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 45px;
}

.mayorista-beneficios div {
    text-align: center;
    padding: 20px;
}

.mayorista-beneficios strong {
    display: block;
    color: #c8a24d;
    font-size: 17px;
    margin-bottom: 7px;
}

.mayorista-beneficios span {
    color: #cfcfcf;
    font-size: 14px;
    line-height: 1.5;
}

.mayorista-acciones {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 700px) {

    .mayorista {
        padding: 45px 18px 65px;
    }

    .mayorista-intro {
        margin-bottom: 38px;
    }

    .mayorista-intro h2 {
        font-size: 30px;
    }

    .mayorista-intro p {
        font-size: 14px;
    }

    .mayorista-pasos {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 50px;
    }

    .mayorista-condiciones > h2 {
        font-size: 25px;
    }

    .mayorista-categorias {
        grid-template-columns: 1fr;
    }

    .mayorista-beneficios {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .mayorista-acciones {
        flex-direction: column;
    }

    .mayorista-acciones .btn {
        width: 100%;
        text-align: center;
    }
}
    




/* ACCESOS PERFUMES / DECANTS */


















/* DISEÑADORES */










/* MOBILE */


#categorias {
    scroll-margin-top: 140px;
}

.categorias .categoria-card {
    height: 310px !important;
    min-height: 310px !important;
    padding: 22px 24px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.35);
    border-radius: 18px;
    transition: 0.3s;
}

.categorias .categoria-card img {
    width: 100% !important;
    height: 210px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 18px auto !important;
}

.categorias .categoria-card h3 {
    margin: 0 !important;
    text-align: center !important;
}
.categorias .categoria-card:nth-child(2) img {
    height: 190px !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
}
.categorias .categoria-card:nth-child(2) h3 {
    margin-top: 12px !important;
}
.boton-buscador {
    height: 42px;
    padding: 0 16px;

    border: 1px solid #c8a24d;
    border-radius: 10px;

    background: transparent;
    color: #c8a24d;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 15px;
    font-weight: 600;
    font-family: inherit;

    align-self: center;

    transition: 0.3s;
}

.boton-buscador svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.boton-buscador:hover {
    background: #c8a24d;
    color: #000000;
}
.nav-links {
    display: flex;
    align-items: center;
}

.boton-buscador {
    margin: 0 !important;
    position: relative;
    top: 0 !important;
    align-self: center !important;
}
.buscador-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.78);

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

    padding-top: 120px;

    z-index: 9999;
}

.buscador-overlay.activo {
    display: flex;
}

.buscador-panel {
    width: min(760px, 90%);
    background: #111111;

    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 18px;

    padding: 34px;

    position: relative;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.buscador-panel h2 {
    margin: 0 0 8px 0;

    color: #ffffff;
    font-size: 30px;
}

.buscador-panel p {
    margin: 0 0 24px 0;

    color: #b8b8b8;
    font-size: 15px;
}

.cerrar-buscador {
    position: absolute;

    top: 16px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: none;
    background: transparent;

    color: #c8a24d;

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

    cursor: pointer;
}

.buscador-input-contenedor {
    width: 100%;

    height: 58px;

    border: 1px solid rgba(200, 162, 77, 0.6);
    border-radius: 12px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    background: #0a0a0a;
}

.buscador-input-contenedor svg {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    fill: none;
    stroke: #c8a24d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.buscador-input-contenedor input {
    width: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 17px;

    padding: 0 14px;
}

.buscador-input-contenedor input::placeholder {
    color: #777777;
}

.resultados-buscador {
    margin-top: 18px;
}
.buscador-panel .resultado-buscador-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;

    width: 100% !important;
    min-height: 72px !important;

    padding: 10px 14px !important;

    text-decoration: none !important;
    box-sizing: border-box !important;
}

.buscador-panel .resultado-buscador-item img {
    width: 52px !important;
    height: 52px !important;

    max-width: 52px !important;
    max-height: 52px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    flex-shrink: 0 !important;
}

.buscador-panel .resultado-buscador-item div {
    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 4px !important;
}
.buscador-panel .resultado-buscador-item,
.buscador-panel .resultado-buscador-item:visited {
    color: #ffffff !important;
    text-decoration: none !important;
}

.buscador-panel .resultado-buscador-item strong {
    color: #ffffff !important;
}

.buscador-panel .resultado-buscador-item div span {
    color: #c8a24d !important;
}

.buscador-panel .resultado-buscador-flecha {
    color: #c8a24d !important;
}
.buscador-panel {
    max-height: calc(100vh - 160px) !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
}

.resultados-buscador {
    max-height: 340px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-right: 6px;
}
.buscador-panel .resultado-buscador-categoria {
    display: block;

    margin-bottom: 3px;

    color: #c8a24d;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;

    text-transform: uppercase;
}
.buscador-panel .resultado-buscador-agotado {
    display: inline-block;
    margin-top: 3px;

    color: #c96d6d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.buscador-panel .resultado-buscador-stock {
    display: inline-block;
    margin-top: 3px;

    color: #8fcf8f;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.categorias .categoria-card:nth-child(2) img {
    transform: scale(1.15) !important;
    transform-origin: center center !important;
}
/* TÍTULO SECCIÓN MARCAS */
.catalog h2 {
    color: #ffffff;
    text-align: center;

    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.5px;

    width: fit-content;
    margin: 0 auto 45px auto;

    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    position: relative;
    top: -120px;
}

/* MARCAS - 5 POR FILA */
@media (min-width: 901px) {

    .catalog .catalog-grid {
        position: relative;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 18px !important;
        top: -105px;
    }

    .catalog .catalog-card {
        min-height: 270px !important;
        height: 270px !important;

        padding: 16px !important;

        box-sizing: border-box !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .catalog .catalog-card img {
        width: 100% !important;
        height: 185px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
    }

    .catalog .catalog-card a {
        font-size: 15px !important;
        margin-top: 8px !important;
    }
}
/* =============================
   CONTACTO
============================= */

.contacto {
    min-height: auto !important;
    height: auto !important;

    padding: 60px 0 70px !important;

    scroll-margin-top: 120px;
}

.contacto .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-height: 0 !important;
    height: auto !important;
}

/* TÍTULO CONTACTO */
.contacto h2 {
    color: #ffffff;
    text-align: center;

    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.5px;

    width: fit-content;

    margin: 0 auto 28px auto !important;
    padding: 0;

    border: none;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    position: static !important;
    top: auto !important;
    transform: none !important;
}

/* TEXTO */
.contacto p {
    margin: 0 0 24px 0 !important;

    text-align: center;
    font-size: 18px;

    position: static !important;
    top: auto !important;
    transform: none !important;
}

/* BOTONES */
.contacto-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 14px !important;

    margin: 0 !important;

    position: static !important;
    top: auto !important;
    transform: none !important;
}
/* HEADER CATÁLOGO */
.catalogo-header {
    min-height: auto !important;
    padding: 26px 0 12px !important;
}

.catalogo-header .volver-inicio {
    font-size: 19px !important;
    font-weight: 700 !important;
}
.catalogo-intro {
    margin-top: -35px !important;
}

.catalogo-marca {
    grid-column: 1 / -1;
    width: 100%;
}

.catalogo-marca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    justify-content: center;
    align-items: start;
    gap: 30px;
}
.volver-categorias {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.volver-marcas {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}
.marca-solapas {
    display: flex;
    justify-content: center;
    margin: 0 0 30px;
}

.marca-solapa {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #c8a24d;
    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.55);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.25s;
}

.marca-solapa:hover {
    background: rgba(200, 162, 77, 0.12);
}
.mayorista-etiqueta {
    display: block;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 14px;
}
.volver-inicio-mayorista {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.titulo-dorado-seccion {
    width: fit-content;
    margin: 0 auto 30px;
    padding: 0;
    color: #c8a24d;
    border: none;
    border-radius: 0;
    background: transparent;
    text-align: center;
}







/* =============================
   PAGO POR TRANSFERENCIA
============================= */

.carrito-pago-transferencia {
    margin-bottom: 20px;
    padding: 18px;
    background: #0d0d0d;
    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 14px;
}

.carrito-pago-transferencia h3 {
    margin: 0 0 8px;
    color: #c8a24d;
    font-size: 18px;
    line-height: 1.2;
}

.carrito-pago-texto {
    margin: 0 0 14px;
    color: #d0d0d0;
    font-size: 13px;
    line-height: 1.4;
}

.carrito-dato-pago {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

.carrito-dato-pago span {
    color: #999999;
    flex-shrink: 0;
}

.carrito-dato-pago strong {
    color: #ffffff;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.carrito-alias-fila {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.copiar-alias {
    padding: 5px 9px;
    color: #111111;
    background: #c8a24d;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.carrito-reserva-aviso {
    margin: 14px 0;
    color: #aaaaaa;
    font-size: 12px;
    line-height: 1.4;
}

.enviar-comprobante {
    width: 100%;
    padding: 11px 12px;
    color: #c8a24d;
    background: transparent;
    border: 1px solid #c8a24d;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.enviar-comprobante:hover {
    color: #111111;
    background: #c8a24d;
}
.catalogo-marca-titulo {
    width: 100%;
    margin: 5px 0 0;
    text-align: center;
    color: #c8a24d;
}






.producto-disenador {
    margin: -8px 0 38px;
    color: #c8a24d;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
}
/* Marca arriba de perfumes y decants árabes */
body[data-categoria="perfumes-grandes"] .producto-disenador,
body[data-categoria="decants"] .producto-disenador {
    margin: -8px 0 24px;
    font-size: 22px;
    font-weight: 700;
    color: #c8a24d;
    text-align: center;
}
/* Ocultar títulos grandes de marca en catálogo árabe */
body[data-categoria="perfumes-grandes"] .catalogo-marca-titulo,
body[data-categoria="decants"] .catalogo-marca-titulo {
    display: none;
}
/* Separación extra solo para Decants árabes */
body[data-categoria="decants"] .producto-disenador {
    margin: -8px 0 38px;
}




















/* Fondo dorado - Perfumes 60 ml y Decants 5 ml */

.producto-card:has(.agregar-carrito[data-categoria="decants"])
.producto-disenador {
    margin-bottom: 46px;
}

/* Precio dorado para todos los Decants */
.producto-card:has(.agregar-carrito[data-categoria="decants"])
.producto-precio.minorista {
    color: #c8a24d;
    font-weight: 700;
}
/* ===== HEADER MOBILE ===== */
@media (max-width: 768px) {

    .nav-links {
        display: none;
    }

    .nav-links.active {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    background: #050505;

    padding: 18px;
    gap: 18px 10px;

    text-align: center;
    align-items: center;

    z-index: 2000;
}

.nav-links.active > a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 10px 8px;

    background: #0d0d0d;
    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 12px;

    color: #ffffff;
    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: 0.25s ease;
}

.nav-links.active > a:active {
    border-color: #c8a24d;
    background: #14110a;
}

.nav-links.active .boton-buscador {
    grid-column: auto;
    justify-self: stretch;
    align-self: stretch !important;
    width: 100%;
    height: auto !important;
    min-height: 48px;
    padding: 10px 8px;
    box-sizing: border-box;
    background: #0d0d0d;
    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 12px;
    color: #c8a24d;
    font-size: 16px;
    font-weight: 600;
}

}
@media (max-width: 768px) {

    .boton-carrito {
        top: 58px;
        right: 18px;

        width: 44px;
        height: 44px;

        z-index: 2100;
    }

    .boton-carrito svg {
        width: 22px;
        height: 22px;
    }

    #contador-carrito {
        min-width: 19px;
        height: 19px;
        font-size: 10px;
    }

}

/* ===== CARRITO FLOTANTE MOBILE ===== */
@media (max-width: 768px) {

    .boton-carrito {
        top: auto !important;
        bottom: 85px !important;
        right: 18px !important;

        width: 54px;
        height: 54px;

        z-index: 3000;
    }

    .boton-carrito svg {
        width: 25px;
        height: 25px;
    }

    #contador-carrito {
        min-width: 20px;
        height: 20px;
        font-size: 10px;
    }

}
/* ===== AJUSTE HEADER MOBILE ===== */
@media (max-width: 768px) {

    .nav-container {
        min-height: 114px;
        padding: 10px 16px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .menu-toggle {
        width: 76px;
        justify-content: flex-start;
        flex-shrink: 0;
    }

    .menu-icon {
        font-size: 24px;
    }

    .menu-texto {
        font-size: 11px;
    }

    .logo {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .logo img {
        width: 112px;
        height: auto;
    }

    .whatsapp-icon {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .whatsapp-icon svg {
        width: 25px;
        height: 25px;
    }

}
/* ===== BOTONES HERO MOBILE ===== */
@media (max-width: 768px) {

    .hero-buttons {
        position: absolute !important;

        left: 0 !important;
        right: 0 !important;

        top: 100% !important;
        bottom: auto !important;

        width: 100% !important;

        display: flex !important;
        justify-content: center !important;
        align-items: stretch !important;

        padding: 10px 12px !important;
        gap: 10px !important;

        background: #050505 !important;

        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .hero-buttons .btn {
        width: 155px !important;
        min-height: 52px !important;

        padding: 8px 10px !important;

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

        font-size: 17px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

}
/* ===== CATEGORÍAS MOBILE ===== */
@media (max-width: 768px) {

    .categorias {
        margin-top: 80px !important;
        padding: 30px 14px 50px !important;
    }

    .categorias h2 {
        font-size: 25px !important;
        line-height: 1.15;
        padding: 10px 16px !important;
        margin: 0 auto 25px auto !important;
        width: fit-content;
        max-width: 92%;
    }

    .categorias-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .categorias .categoria-card {
        height: 230px !important;
        min-height: 230px !important;
        padding: 12px 10px !important;
        border-radius: 15px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .categorias .categoria-card img {
        width: 100% !important;
        height: 155px !important;
        margin: 0 auto 8px auto !important;
        object-fit: contain !important;
        transform: scale(1.08) !important;
    }

    .categorias .categoria-card h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* Decants: la imagen necesita un poco más de tamaño */
    .categorias .categoria-card:nth-child(2) img {
    height: 155px !important;
    margin: 8px auto 0 auto !important;
    transform: scale(1.22) !important;
}

    .categorias .categoria-card:nth-child(2) h3 {
        margin: 0 !important;
    }

}
/* ===== MARCAS MOBILE ===== */
@media (max-width: 768px) {

    .catalog {
        padding: 6px 14px 45px !important;
    }

    .catalog h2 {
        position: relative !important;
        top: -15px !important;

        font-size: 25px !important;
        line-height: 1.15;

        padding: 10px 16px !important;
        margin: 0 auto 25px auto !important;

        width: fit-content;
        max-width: 92%;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .catalog .catalog-card {
        height: 165px !important;
        min-height: 165px !important;

        padding: 8px 8px 10px !important;
        border-radius: 15px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .catalog .catalog-card img {
        width: 100% !important;
        height: 120px !important;

        object-fit: contain !important;
        object-position: center !important;

        margin: 0 auto !important;

        transform: scale(1.15) !important;
        transform-origin: center center !important;
    }

    .catalog .catalog-card a {
        font-size: 13px !important;
        line-height: 1 !important;

        margin: 0 !important;

        text-align: center !important;
        width: 100%;
    }
    .catalog .catalog-card.armaf img {
    position: relative;
    top: 8px !important;
}

}
/* ===== CONTACTO MOBILE ===== */
@media (max-width: 768px) {

    .contacto {
    margin-top: 18px !important;
    padding: 25px 14px 30px !important;
}

    .contacto h2 {
        font-size: 25px !important;
        line-height: 1.15;

        padding: 10px 16px !important;
        margin: 0 auto 18px auto !important;

        width: fit-content;
        max-width: 92%;
    }

    .contacto p {
        font-size: 15px !important;
        line-height: 1.4;
        margin: 0 0 20px 0 !important;
    }

    .contacto-links {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100%;
    }

    .contacto .contacto-boton {
        width: 250px !important;
        min-height: 50px !important;

        padding: 10px 14px !important;

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

        font-size: 15px !important;
        border-radius: 30px !important;
    }

    .contacto-boton svg {
        width: 19px !important;
        height: 19px !important;
    }

}
/* ===== AJUSTES MAYORISTA MOBILE ===== */
@media (max-width: 768px) {

    /* Achicar el encabezado para subir la línea */
    .pagina-mayorista .productos-header {
        padding-bottom: 35px !important;
    }

    /* Volver al inicio vuelve a su posición normal */
    .pagina-mayorista .volver-inicio-mayorista {
        position: relative !important;
        top: 10px !important;
        left: -8px !important;
        margin-bottom: 0 !important;
    }

    /* Carrito flotante SOLO en Mayorista */
    .pagina-mayorista .boton-carrito {
        top: 30px !important;
        bottom: auto !important;
        right: 18px !important;

        width: 48px !important;
        height: 48px !important;

        z-index: 3000;
    }

    .pagina-mayorista .boton-carrito svg {
        width: 23px !important;
        height: 23px !important;
    }
    .pagina-mayorista .mayorista-etiqueta {
    position: relative !important;
    top: -15px !important;
}

}
/* ===== BENEFICIOS MAYORISTA MOBILE ===== */
@media (max-width: 768px) {

    .pagina-mayorista .mayorista-importante {
        margin-bottom: 22px !important;
    }

    .pagina-mayorista .mayorista-beneficios {
        gap: 4px !important;
        margin-bottom: 25px !important;
    }

    .pagina-mayorista .mayorista-beneficios div {
        padding: 8px 10px !important;
    }

    .pagina-mayorista .mayorista-beneficios strong {
        margin-bottom: 4px !important;
        font-size: 18px !important;
    }

    .pagina-mayorista .mayorista-beneficios span {
        font-size: 15px !important;
        line-height: 1.3 !important;
    }
}
/* ===== AJUSTES CATÁLOGO MOBILE ===== */
@media (max-width: 768px) {

    /* Misma altura de encabezado que Mayorista */
    .pagina-catalogo .productos-header {
        padding-bottom: 35px !important;
    }

    /* Volver al inicio */
    .pagina-catalogo .volver-inicio {
        display: block;
        width: max-content;
        position: relative !important;
        top: 10px !important;
        left: -8px !important;
        margin: 0 auto !important;
    }

    /* Carrito flotante SOLO en Catálogo */
    .pagina-catalogo .boton-carrito {
        top: 30px !important;
        bottom: auto !important;
        right: 18px !important;

        width: 48px !important;
        height: 48px !important;

        z-index: 3000;
    }

    .pagina-catalogo .boton-carrito svg {
        width: 23px !important;
        height: 23px !important;
    }

    /* Subir título e introducción del catálogo */
    .pagina-catalogo .catalogo-intro {
        position: relative !important;
        top: -15px !important;
    }
        .pagina-catalogo .catalogo-buscador {
        margin-top: -35px !important;
    }

}
/* ===== FICHAS DE PRODUCTOS COMPACTAS MOBILE ===== */
@media (max-width: 768px) {

    /* 2 productos por fila */
    .productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    /* Tarjeta */
    .producto-card {
        width: 100% !important;
        padding: 16px 6px 8px !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    /* Imagen */
    .producto-card img {
        width: 100% !important;
        height: 95px !important;
        object-fit: contain !important;
        margin-bottom: 0 !important;
        transform: scale(1.28) !important;
    }

    /* Nombre del perfume */
    .producto-card h3 {
        font-size: 16px !important;
        line-height: 1.15 !important;
        margin: 5px 0 7px !important;
    }

    /* Precio minorista */
.producto-precio {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin: 3px 0 !important;
}

/* Precio mayorista */
.producto-precio.mayorista {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin: 3px 0 !important;
    padding: 0 !important;
}

    /* Texto "desde 3 perfumes..." */
    .producto-precio span {
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
    }

    /* Estado agotado */
    .producto-card .agotado {
        font-size: 13px !important;
        margin: 5px 0 !important;
    }

    /* Ver producto + agregar al carrito + agotado */
    .producto-card .boton-producto,
    .producto-card button {
        width: 100% !important;
        min-height: 36px !important;
        padding: 8px 4px !important;
        margin-top: 6px !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* Ocultar marca superior: ahora va junto al nombre */
    .producto-card .producto-disenador {
        display: none !important;
    }
    




/* ===== DECANTS MÁS COMPACTOS MOBILE ===== */

.producto-card:has(.agregar-carrito[data-categoria="decants"]) {
    padding-top: 20px !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Foto: un poco más abajo y sin ocupar tanto alto */
.producto-card:has(.agregar-carrito[data-categoria="decants"]) img {
    height: 88px !important;
    transform: scale(1.18) !important;
    margin-bottom: 2px !important;
}

/* Nombre */
.producto-card:has(.agregar-carrito[data-categoria="decants"]) h3 {
    margin: 3px 0 8px !important;
}

/* Precio único */
.producto-card:has(.agregar-carrito[data-categoria="decants"]) .producto-precio {
    margin: 4px 0 !important;
    font-size: 15px !important;
}

/* Stock: es el elemento que viene después del precio */
.producto-card:has(.agregar-carrito[data-categoria="decants"]) .producto-precio + * {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

/* Evitar que "Ver producto" se vaya al fondo de la tarjeta */
.producto-card:has(.agregar-carrito[data-categoria="decants"]) .boton-producto {
    margin-top: 6px !important;
}

/* Botones un poco más bajos */
.producto-card:has(.agregar-carrito[data-categoria="decants"]) .boton-producto,
.producto-card:has(.agregar-carrito[data-categoria="decants"]) button {
    min-height: 32px !important;
    padding: 7px 4px !important;
}




/* Zona de imagen más baja */


/* Diseñador + nombre */


/* Precio único */


/* Stock */


/* Botones */

}
/* ===== FICHAS DE PRODUCTOS COMPACTAS PC ===== */
@media (min-width: 769px) {

    .productos-grid {
        gap: 20px !important;
        align-items: stretch !important;
    }

    .producto-card {
        width: 250px !important;
        padding: 16px 12px 12px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .producto-card img {
        width: 100% !important;
        height: 155px !important;
        object-fit: contain !important;
        margin-bottom: 6px !important;
        transform: scale(1.12) !important;
    }

    .producto-card h3 {
        font-size: 19px !important;
        line-height: 1.15 !important;
        margin: 6px 0 9px !important;
    }

    .producto-precio {
        font-size: 16px !important;
        line-height: 1.25 !important;
        margin: 4px 0 !important;
    }

    .producto-precio.mayorista {
        font-size: 16px !important;
        line-height: 1.2 !important;
        margin: 4px 0 !important;
        padding: 0 !important;
    }

    .producto-precio span {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-top: 3px !important;
    }

    .producto-card .agotado {
        font-size: 14px !important;
        margin: 6px 0 !important;
    }

    .producto-card .boton-producto,
    .producto-card button {
        width: 100% !important;
        min-height: 38px !important;
        padding: 9px 6px !important;
        margin-top: 7px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
/* Ocultar marca superior en perfumes árabes PC */
body[data-categoria="perfumes-grandes"] .producto-card .producto-disenador {
    display: none !important;
}
/* ===== DECANTS ÁRABES COMPACTOS PC ===== */

body[data-categoria="decants"] .producto-card {
    padding: 18px 10px 10px !important;
    min-height: 0 !important;
    height: auto !important;
}

body[data-categoria="decants"] .producto-card img {
    height: 135px !important;
    transform: scale(1.10) !important;
    margin-bottom: 4px !important;
}

body[data-categoria="decants"] .producto-card .producto-precio {
    font-size: 16px !important;
    margin: 4px 0 !important;
}

body[data-categoria="decants"] .producto-card .boton-producto {
    margin-top: 7px !important;
}

body[data-categoria="decants"] .producto-card .boton-producto,
body[data-categoria="decants"] .producto-card button {
    min-height: 36px !important;
    padding: 8px 5px !important;
}
/* Ocultar marca superior en Decants árabes PC */
body[data-categoria="decants"]
.producto-card .producto-disenador {
    display: none !important;
}
/* ===== MAISON ALHAMBRA 30 ML COMPACTO PC ===== */

body[data-categoria="maison-30ml"] .producto-card {
    padding: 16px 10px 10px !important;
    min-height: 0 !important;
    height: auto !important;
}

body[data-categoria="maison-30ml"] .producto-card img {
    height: 145px !important;
    transform: scale(1.10) !important;
    margin-bottom: 5px !important;
}

body[data-categoria="maison-30ml"] .producto-card h3 {
    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 5px 0 8px !important;
}

body[data-categoria="maison-30ml"] .producto-precio {
    font-size: 16px !important;
    margin: 4px 0 !important;
}

body[data-categoria="maison-30ml"] .producto-precio.mayorista {
    font-size: 16px !important;
    margin: 4px 0 !important;
}

body[data-categoria="maison-30ml"] .producto-card .boton-producto,
body[data-categoria="maison-30ml"] .producto-card button {
    min-height: 36px !important;
    padding: 8px 5px !important;
    margin-top: 7px !important;
}

/* Ocultar marca superior */
body[data-categoria="maison-30ml"] .producto-card .producto-disenador {
    display: none !important;
}














/* Ocultar diseñador superior: ahora va junto al nombre */













/* Ocultar diseñador superior: ahora va junto al nombre */

}
/* ===== VOLVER + ENCABEZADOS UNIFICADOS PC ===== */
@media (min-width: 769px) {

    /* Encabezado y línea dorada */
    .productos-header {
        padding: 30px 5% !important;
        text-align: center !important;
    }

    /* Todos los "Volver" dentro del encabezado */
    .productos-header a {
        display: block !important;
        width: max-content !important;

        margin: 0 auto !important;

        position: relative !important;
        left: -8px !important;

        color: #c8a24d !important;
        text-decoration: none !important;
    }

    /* Subir el contenido que empieza debajo de la línea */
    .productos {
        padding-top: 35px !important;
    }




/* Mayorista: misma distancia debajo de la línea */
.pagina-mayorista .mayorista {
    padding-top: 35px !important;
}

.pagina-mayorista .mayorista-intro {
    margin-top: 0 !important;
}
/* Catálogo: dar más aire entre la línea y el título */
.pagina-catalogo .productos {
    padding-top: 35px !important;
}

.pagina-catalogo .catalogo-intro {
    margin-top: 0 !important;
}
/* Mismo tamaño para TODOS los enlaces Volver en PC */
.productos-header a,
.producto-detalle-header a {
    font-size: 18px !important;
    font-weight: 700 !important;
}
}
/* ===== DETALLE DE PRODUCTO MOBILE ===== */
@media (max-width: 768px) {

    /* Encabezado + línea dorada */
    .pagina-producto .producto-detalle-header {
        padding: 30px 5% 35px !important;
        text-align: center !important;
    }

    /* Volver centrado visualmente */
    .pagina-producto .producto-detalle-header a {
        display: block !important;
        width: max-content !important;
        margin: 0 auto !important;
        position: relative !important;
        top: 10px !important;
        left: -8px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    /* Carrito SOLO en la página de producto */
    .pagina-producto .boton-carrito {
        top: 30px !important;
        bottom: auto !important;
        right: 18px !important;
        width: 48px !important;
        height: 48px !important;
        z-index: 3000;
    }

    .pagina-producto .boton-carrito svg {
        width: 23px !important;
        height: 23px !important;
    }

    /* Subir el contenido del producto */
    .pagina-producto .producto-detalle {
        padding-top: 35px !important;
    }

}
/* ===== ENCABEZADOS INTERNOS UNIFICADOS MOBILE ===== */
@media (max-width: 768px) {

    /* Misma altura + misma línea dorada */
    body:has(.productos-header) .productos-header,
    body:has(.producto-detalle-header) .producto-detalle-header {
        padding: 30px 5% 35px !important;
        text-align: center !important;
    }

    /* Todos los "Volver" centrados visualmente */
    body:has(.productos-header) .productos-header a,
    body:has(.producto-detalle-header) .producto-detalle-header a {
        display: block !important;
        width: max-content !important;
        margin: 0 auto !important;

        position: relative !important;
        top: 10px !important;
        left: -8px !important;

        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        color: #c8a24d !important;
        text-decoration: none !important;
    }

    /* Carrito igual en todas las páginas internas */
    body:has(.productos-header) .boton-carrito,
    body:has(.producto-detalle-header) .boton-carrito {
        top: 30px !important;
        bottom: auto !important;
        right: 18px !important;

        width: 48px !important;
        height: 48px !important;

        z-index: 3000 !important;
    }

    body:has(.productos-header) .boton-carrito svg,
    body:has(.producto-detalle-header) .boton-carrito svg {
        width: 23px !important;
        height: 23px !important;
    }

}






/* ===== CARRITO INICIO MOBILE ===== */
@media (max-width: 700px) {

    body:has(.mobile-topbar) .carrito-panel {
    top: 36px !important;
    height: calc(100dvh - 36px) !important;
}

}


/* ===== OCULTAR CARRITO FLOTANTE CUANDO EL PANEL ESTÁ ABIERTO ===== */

@media (max-width: 768px) {

    body:has(.carrito-panel.activo) .boton-carrito {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

}


/* ===== CARRITO UNIFICADO EN TODA LA WEB MOBILE ===== */

@media (max-width: 480px) {

    .carrito-panel {
        top: 0 !important;
        right: 0 !important;

        width: 88% !important;
        max-width: 88% !important;

        height: 100dvh !important;
    }

    /* Todas las páginas: respetar la barra superior de 36px */
    body:has(.mobile-topbar) .carrito-panel {
        top: 36px !important;
        height: calc(100dvh - 36px) !important;
    }

}
/* ===== VACIAR CARRITO - PC Y MOBILE ===== */

.vaciar-carrito {
    width: 100%;
    margin: 10px 0 14px;
    padding: 10px 14px;

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;

    color: #bdbdbd;

    font-size: 14px;
    font-weight: 600;
    font-family: inherit;

    cursor: pointer;

    transition: 0.25s ease;
}

.vaciar-carrito:hover {
    color: #ffffff;
    border-color: rgba(200, 162, 77, 0.65);
    background: rgba(200, 162, 77, 0.06);
}

.vaciar-carrito:active {
    transform: scale(0.98);
}


/* ===== VACIAR CARRITO MOBILE ===== */

@media (max-width: 768px) {

    .vaciar-carrito {
        margin: 8px 0 12px;
        padding: 9px 12px;

        font-size: 13px;
        border-radius: 9px;
    }

}
/* ===== ANIMACIÓN CARRITO AL AGREGAR PRODUCTO - PC Y MOBILE ===== */

.boton-carrito.carrito-agregado {
    animation: carritoAgregado 0.7s ease;
}

.boton-carrito.carrito-agregado #contador-carrito {
    animation: contadorCarritoAgregado 0.7s ease;
}

@keyframes carritoAgregado {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(1.18);
        box-shadow: 0 0 0 5px rgba(200, 162, 77, 0.18);
    }

    65% {
        transform: scale(0.96);
    }

    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes contadorCarritoAgregado {

    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.45);
    }

    100% {
        transform: scale(1);
    }
}
/* ===== AVISO FLOTANTE PRODUCTO AGREGADO - PC Y MOBILE ===== */

.aviso-carrito-agregado {
    position: fixed;
    left: 50%;
    bottom: 28px;

    transform: translate(-50%, 20px) scale(0.96);

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

    padding: 12px 16px;

    background: rgba(12, 12, 12, 0.96);
    border: 1px solid rgba(200, 162, 77, 0.65);
    border-radius: 12px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    color: #ffffff;

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 5000;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.aviso-carrito-agregado.visible {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, 0) scale(1);
}

.aviso-carrito-check {
    color: #c8a24d;
    font-size: 18px;
    font-weight: 800;
}

.aviso-carrito-cantidad {
    color: #c8a24d;
    font-size: 16px;
    font-weight: 800;
}


/* ===== AVISO FLOTANTE MOBILE ===== */

@media (max-width: 768px) {

    .aviso-carrito-agregado {
        bottom: 22px;

        width: calc(100% - 36px);
        max-width: 340px;

        justify-content: center;

        padding: 11px 14px;

        font-size: 13px;
    }

    .aviso-carrito-check {
        font-size: 17px;
    }

    .aviso-carrito-cantidad {
        font-size: 15px;
    }
}
/* ===== VOLVER FLOTANTE GLOBAL - PC Y MOBILE ===== */

.volver-flotante-global {
    position: fixed;
    left: 24px;
    bottom: 70px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 11px 18px;

    background: rgba(10, 10, 10, 0.94);
    border: 1px solid rgba(200, 162, 77, 0.65);
    border-radius: 999px;

    color: #c8a24d;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(200, 162, 77, 0.08);

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(12px) scale(0.96);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

    z-index: 1800;
}

.volver-flotante-global.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0) scale(1);
}

.volver-flotante-global:hover {
    background: #15120b;
    border-color: #c8a24d;
}

.volver-flotante-global:active {
    transform: scale(0.96);
}

.volver-flotante-flecha {
    font-size: 19px;
    line-height: 1;
}


/* ===== VOLVER FLOTANTE MOBILE ===== */

@media (max-width: 768px) {

    .volver-flotante-global {
        left: 16px;
        bottom: 70px;

        padding: 10px 15px;

        gap: 7px;

        font-size: 14px;
    }

    .volver-flotante-flecha {
        font-size: 18px;
    }

}
/* ===== ESPACIO GLOBAL PARA BARRA SUPERIOR ===== */

/* Todas las páginas reservan los 36px de la barra */
body {
    padding-top: 36px;
}


/* Inicio móvil ya tenía espacio reservado para la barra */
@media (max-width: 768px) {

    body:has(.navbar) {
        padding-top: 0;
    }

}


/* ===== NAVBAR DEBAJO DE LA BARRA GLOBAL ===== */

.navbar {
    top: 36px !important;
}


/* ===== AJUSTE GLOBAL CARRITO POR BARRA SUPERIOR ===== */

/* Carrito general en PC */
@media (min-width: 769px) {

    .boton-carrito {
        top: 51px !important;
    }

}


/* ===== CARRITO PÁGINAS INTERNAS ===== */

/* PC */
@media (min-width: 769px) {

    .pagina-mayorista .boton-carrito,
    body:has(.productos-header) .boton-carrito,
    body:has(.producto-detalle-header) .boton-carrito {
        top: 48px !important;
        bottom: auto !important;
    }

}


/* MOBILE */
@media (max-width: 768px) {

    .pagina-mayorista .boton-carrito,
    body:has(.productos-header) .boton-carrito,
    body:has(.producto-detalle-header) .boton-carrito {
        top: 66px !important;
        bottom: auto !important;
    }

}
/* ===== ENCABEZADO INTERNO MOBILE SIMÉTRICO Y COMPACTO ===== */

@media (max-width: 768px) {

    /* Todas las páginas internas excepto Inicio */
    body:not(:has(.navbar)) .productos-header,
    body:not(:has(.navbar)) .producto-detalle-header {
        height: 72px !important;
        min-height: 72px !important;

        padding: 0 5% !important;

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

        box-sizing: border-box !important;
    }

    /* Volver centrado */
    body:not(:has(.navbar)) .productos-header a,
    body:not(:has(.navbar)) .producto-detalle-header a {
        top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Carrito centrado entre las dos líneas */
    body:not(:has(.navbar)) .boton-carrito {
        top: 48px !important;
        bottom: auto !important;
    }

}
/* ===== AJUSTE GLOBAL DE ANCLAS POR BARRA SUPERIOR ===== */

html {
    scroll-padding-top: 36px;
}
/* ===== PANEL DEL CARRITO DEBAJO DE LA BARRA GLOBAL ===== */

body:has(.mobile-topbar) .carrito-panel {
    top: 36px !important;
    height: calc(100dvh - 36px) !important;
}
/* ===== AJUSTE ANCLAS INICIO MOBILE ===== */

@media (max-width: 768px) {

    #categorias {
        scroll-margin-top: 60px !important;
    }

    #marcas {
        scroll-margin-top: 120px !important;
    }

}


/* Ocultar títulos grandes en perfumes y decants */



/* Dejar parejo el cambio Perfumes / Decants */



/* Igualar el comienzo del contenido en ambas páginas */

/* ===== AVISO DE SCROLL EN EL CARRITO - PC Y MOBILE ===== */

.aviso-scroll-carrito {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 8px 12px;

    background: rgba(17, 17, 17, 0.96);
    border-top: 1px solid rgba(200, 162, 77, 0.28);

    color: #c8a24d;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(4px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    pointer-events: none;
}

.aviso-scroll-carrito.visible {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.aviso-scroll-flecha {
    display: inline-block;

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

    animation: avisoScrollFlecha 1.1s ease-in-out infinite;
}

@keyframes avisoScrollFlecha {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(4px);
    }

}


/* ===== AVISO SCROLL CARRITO MOBILE ===== */

@media (max-width: 768px) {

    .aviso-scroll-carrito {
        padding: 7px 10px;

        font-size: 11px;
    }

    .aviso-scroll-flecha {
        font-size: 15px;
    }

}
/* ===== RESULTADOS INSTANTÁNEOS BUSCADOR CATÁLOGO - PC Y MOBILE ===== */

.catalogo-buscador {
    position: relative;
}

.catalogo-buscador-resultados {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 100%;
    max-height: 420px;

    overflow-y: auto;

    background: #111111;
    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 12px;

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-6px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 4500;
}

.catalogo-buscador-resultados.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.catalogo-resultados-lista {
    display: flex;
    flex-direction: column;
}

.catalogo-resultado-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;

    padding: 11px 14px;

    color: #ffffff;
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);

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

.catalogo-resultado-item:hover {
    background: rgba(200, 162, 77, 0.06);
}

.catalogo-resultado-item img {
    width: 56px;
    height: 56px;

    object-fit: contain;

    background: #ffffff;
    border-radius: 8px;
}

.catalogo-resultado-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 3px;
}

.catalogo-resultado-info small {
    color: #c8a24d;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.catalogo-resultado-info strong {
    overflow: hidden;

    color: #ffffff;

    font-size: 14px;
    line-height: 1.25;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalogo-resultado-info span {
    overflow: hidden;

    color: #a9a9a9;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalogo-resultado-flecha {
    color: #c8a24d;

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

.catalogo-ver-resultados {
    width: 100%;

    padding: 12px 14px;

    background: #0c0c0c;
    border: none;
    border-top: 1px solid rgba(200, 162, 77, 0.3);

    color: #c8a24d;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.catalogo-ver-resultados:hover {
    background: #15120b;
}

.catalogo-resultado-vacio {
    padding: 18px;

    color: #bdbdbd;

    font-size: 13px;
    text-align: center;
}


/* ===== BUSCADOR CATÁLOGO MOBILE ===== */

@media (max-width: 768px) {

    .catalogo-buscador-resultados {
        top: calc(100% + 6px);

        max-height: min(420px, 55dvh);

        border-radius: 10px;
    }

    .catalogo-resultado-item {
        grid-template-columns: 48px 1fr auto;
        gap: 10px;

        padding: 10px 11px;
    }

    .catalogo-resultado-item img {
        width: 48px;
        height: 48px;
    }

    .catalogo-resultado-info small {
        font-size: 9px;
    }

    .catalogo-resultado-info strong {
        font-size: 13px;
    }

    .catalogo-resultado-info span {
        font-size: 11px;
    }

    .catalogo-ver-resultados {
        padding: 11px 12px;

        font-size: 12px;
    }
}
/* ===== CARRITO SOLO INICIO MOBILE ===== */

@media (max-width: 768px) {

    body:has(.navbar) .boton-carrito {
        top: 120px !important;
        bottom: auto !important;

        left: 14px !important;
        right: auto !important;

        width: 42px !important;
        height: 42px !important;

        z-index: 3000 !important;
    }

    body:has(.navbar) .boton-carrito svg {
        width: 20px !important;
        height: 20px !important;
    }

}
/* ===== OCULTAR CARRITO DEL INICIO CUANDO EL MENÚ ESTÁ ABIERTO ===== */

@media (max-width: 768px) {

    body:has(.nav-links.active) .boton-carrito {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

}

/* =============================
   DATOS DEL CLIENTE - PEDIDO WEB
   Modal al finalizar el pedido
============================= */

.modal-cliente-web {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(3px);
    box-sizing: border-box;
}

.modal-cliente-web[hidden] {
    display: none;
}

.modal-cliente-web-contenido {
    position: relative;
    width: min(460px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 26px;
    color: #ffffff;
    background: #101010;
    border: 1px solid rgba(200, 162, 77, 0.58);
    border-radius: 16px;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.modal-cliente-web-cerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #ffffff;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.modal-cliente-web-encabezado {
    padding-right: 34px;
    margin-bottom: 18px;
}

.modal-cliente-web-paso {
    display: inline-block;
    margin-bottom: 7px;
    color: #c8a24d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal-cliente-web-encabezado h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 23px;
    line-height: 1.2;
}

.modal-cliente-web-encabezado p {
    margin: 0;
    color: #b8b8b8;
    font-size: 13px;
    line-height: 1.45;
}

.modal-cliente-web-recordado {
    display: grid;
    gap: 5px;
    padding: 16px;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
}

.modal-cliente-web-recordado span,
.modal-cliente-web-recordado small {
    color: #a8a8a8;
    font-size: 12px;
}

.modal-cliente-web-recordado strong {
    color: #ffffff;
    font-size: 17px;
}

.modal-cliente-web-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-cliente-web-campos label {
    display: grid;
    gap: 6px;
}

.modal-cliente-web-campos label > span {
    color: #d8d8d8;
    font-size: 12px;
    font-weight: 700;
}

.modal-cliente-web-whatsapp {
    grid-column: 1 / -1;
}

.modal-cliente-web-telefono {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    box-sizing: border-box;
}

.modal-cliente-web-prefijo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 12px;
    color: #c8a24d;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    font-weight: 800;
}

.modal-cliente-web-telefono:focus-within {
    border-color: #c8a24d;
    box-shadow: 0 0 0 2px rgba(200, 162, 77, 0.12);
}

.modal-cliente-web-ayuda-whatsapp {
    color: #8f8f8f;
    font-size: 11px;
    line-height: 1.35;
}

.modal-cliente-web-campos input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    color: #ffffff;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px;
    outline: none;
    box-sizing: border-box;
    font-size: 14px;
}

.modal-cliente-web-campos input:focus {
    border-color: #c8a24d;
    box-shadow: 0 0 0 2px rgba(200, 162, 77, 0.12);
}

.modal-cliente-web-telefono input {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
}

.modal-cliente-web-telefono input:focus {
    border: 0;
    box-shadow: none;
}

.modal-cliente-web-mensaje {
    margin: 10px 0 0;
    color: #ef7d7d;
    font-size: 12px;
    line-height: 1.4;
}

.modal-cliente-web-acciones {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.modal-cliente-web-principal,
.modal-cliente-web-secundario {
    width: 100%;
    min-height: 43px;
    padding: 10px 14px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}

.modal-cliente-web-principal {
    color: #080808;
    background: #c8a24d;
    border: 1px solid #c8a24d;
}

.modal-cliente-web-secundario {
    color: #c8a24d;
    background: transparent;
    border: 1px solid rgba(200, 162, 77, 0.60);
}

@media (max-width: 520px) {
    .modal-cliente-web {
        align-items: flex-end;
        padding: 12px;
    }

    .modal-cliente-web-contenido {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 22px 18px 18px;
        border-radius: 16px;
    }

    .modal-cliente-web-campos {
        grid-template-columns: 1fr;
    }

    .modal-cliente-web-whatsapp {
        grid-column: auto;
    }
}
/* =============================
   MERCADO PAGO
============================= */

.boton-mercado-pago {
    width: 100%;
    height: 48px;
    margin-top: 18px;
    margin-bottom: 14px;
    padding: 0 15px;

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

    background: #009ee3;
    color: #ffffff;

    border: none;
    border-radius: 9px;

    cursor: pointer;
    transition: 0.2s ease;
}

.boton-mercado-pago:hover {
    background: #008ed0;
    transform: translateY(-1px);
}

.mercado-pago-logo {
    width: 128px;
    height: auto;
    max-height: 32px;
    display: block;
    object-fit: contain;
}

.boton-mercado-pago[hidden] {
    display: none;
}

#mensaje-mercado-pago {
    margin: 0 0 18px;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
}

/* =========================================================
   PRECIO DE LISTA + 20% OFF + MEDIO DE PAGO DEL CARRITO
   ========================================================= */

.producto-precio.precio-lista {
    color: #ffffff;
    font-weight: 700;
}

.producto-precio.efectivo-transferencia,
.detalle-precio.efectivo-transferencia {
    color: #c8a24d;
    font-weight: 700;
}

.producto-precio.efectivo-transferencia {
    font-size: 14px;
    line-height: 1.3;
}

.detalle-precio.efectivo-transferencia {
    margin-top: 6px;
    line-height: 1.35;
}

.carrito-medio-pago {
    margin: 14px 0 18px;
    padding: 14px;
    background: #0d0d0d;
    border: 1px solid rgba(200, 162, 77, 0.45);
    border-radius: 14px;
}

.carrito-medio-pago h3 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.25;
}

.carrito-medio-pago-opcion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
    padding: 11px 12px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    cursor: pointer;
}

.carrito-medio-pago-opcion:first-of-type {
    margin-top: 0;
}

.carrito-medio-pago-opcion:has(input:checked) {
    border-color: #c8a24d;
    background: rgba(200, 162, 77, 0.08);
}

.carrito-medio-pago-opcion input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: #c8a24d;
}

.carrito-medio-pago-opcion > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.carrito-medio-pago-opcion strong {
    color: #ffffff;
    font-size: 14px;
}

.carrito-medio-pago-opcion small {
    color: #c8a24d;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.carrito-medio-pago[hidden],
.carrito-pago-transferencia[hidden],
.finalizar-pedido[hidden],
.boton-mercado-pago[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .producto-precio.efectivo-transferencia {
        font-size: 12px !important;
    }

    .carrito-medio-pago {
        padding: 12px;
    }

    .carrito-medio-pago-opcion {
        padding: 10px;
    }

    .carrito-medio-pago-opcion > span {
        gap: 8px;
    }

    .carrito-medio-pago-opcion strong {
        font-size: 13px;
    }

    .carrito-medio-pago-opcion small {
        font-size: 11px;
    }
}

/* =========================================================
   TARJETAS DE PRODUCTO - PRECIOS ORDENADOS
   Opción 2: efectivo destacado + tarjeta + mayorista
   ========================================================= */

.producto-precios-ordenados {
    display: grid;
    gap: 8px;
    width: 100%;
    margin: 10px 0 8px;
}

.precio-efectivo-destacado {
    width: 100%;
    padding: 10px 12px;
    background: rgba(200, 162, 77, 0.10);
    border: 1px solid rgba(200, 162, 77, 0.55);
    border-left: 4px solid #c8a24d;
    border-radius: 11px;
    box-sizing: border-box;
    text-align: left;
}

.precio-efectivo-etiqueta {
    display: block;
    margin-bottom: 3px;
    color: #c8a24d;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
}

.precio-efectivo-destacado strong {
    display: block;
    color: #c8a24d;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
}

.precio-secundario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 3px 2px;
    text-align: left;
}

.precio-secundario-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}

.precio-secundario strong {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.precio-tarjeta,
.precio-tarjeta .precio-secundario-etiqueta,
.precio-tarjeta strong {
    color: #55c985;
}

.icono-tarjeta-precio {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.precio-mayorista-nuevo,
.precio-mayorista-nuevo .precio-secundario-etiqueta,
.precio-mayorista-nuevo strong {
    color: #ffffff;
}

.precio-mayorista-nuevo {
    margin: 0 0 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* Anula reglas antiguas de precio en tarjetas sin afectar detalle/carrito */
.producto-card > .producto-precio.precio-lista,
.producto-card > .producto-precio.efectivo-transferencia,
.producto-card > .producto-precio.mayorista {
    display: none !important;
}

@media (max-width: 768px) {
    .producto-precios-ordenados {
        gap: 6px;
        margin: 7px 0 6px;
    }

    .precio-efectivo-destacado {
        padding: 8px 8px;
        border-radius: 9px;
        border-left-width: 3px;
    }

    .precio-efectivo-etiqueta {
        font-size: 10px;
    }

    .precio-efectivo-destacado strong {
        font-size: 17px;
    }

    .precio-secundario {
        gap: 6px;
        padding: 2px 0;
        align-items: flex-start;
    }

    .precio-secundario-etiqueta {
        gap: 4px;
        font-size: 12px;
        line-height: 1.18;
    }

    .precio-secundario strong {
        font-size: 13px;
    }

    .icono-tarjeta-precio {
        width: 14px;
        height: 14px;
    }

    .precio-mayorista-nuevo {
        margin-bottom: 5px;
        padding-top: 5px;
    }
}


/* =========================================================
   BANDERITA 20% OFF - LLAMADO VISUAL
   ========================================================= */

.producto-card {
    overflow: hidden;
}

.producto-card::before {
    content: "20% OFF";
    position: absolute;
    top: 16px;
    left: -28px;
    z-index: 8;
    width: 118px;
    padding: 7px 0;
    box-sizing: border-box;
    background: linear-gradient(135deg, #e1c27a 0%, #c8a24d 58%, #97712b 100%);
    color: #090909;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.35px;
    text-align: center;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.26);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 16px rgba(200, 162, 77, 0.30);
    transform: rotate(-38deg);
    transform-origin: center;
    pointer-events: none;
}

.producto-card::after {
    content: "";
    position: absolute;
    top: 16px;
    left: -28px;
    z-index: 9;
    width: 118px;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.12) 43%,
        rgba(255, 255, 255, 0.78) 50%,
        rgba(255, 255, 255, 0.16) 57%,
        transparent 62%,
        transparent 100%
    );
    transform: rotate(-38deg) translateX(-150%);
    transform-origin: center;
    animation: brilloBanderaOffDiagonal 3.2s ease-in-out infinite;
}

@keyframes brilloBanderaOffDiagonal {
    0%, 56% {
        transform: rotate(-38deg) translateX(-150%);
        opacity: 0;
    }

    62% {
        opacity: 1;
    }

    82% {
        transform: rotate(-38deg) translateX(135%);
        opacity: 1;
    }

    83%, 100% {
        transform: rotate(-38deg) translateX(135%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .producto-card::before {
        top: 14px;
        left: -22px;
        width: 104px;
        padding: 6px 0;
        font-size: 10px;
        letter-spacing: 0.2px;
        transform: rotate(-38deg);
    }

    .producto-card::after {
        top: 14px;
        left: -22px;
        width: 104px;
        height: 24px;
        transform: rotate(-38deg) translateX(-150%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .producto-card::after {
        animation: none;
        display: none;
    }
}


/* =========================================================
   DETALLE DE PRODUCTO - PRECIOS ORDENADOS
   Misma jerarquía visual que las tarjetas
   ========================================================= */

.detalle-precio-legacy {
    display: none !important;
}

.producto-precios-detalle {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 500px;
    margin: 0 0 14px;
}

.detalle-precio-mayorista-principal,
.detalle-precio-efectivo {
    width: 100%;
    padding: 13px 15px;
    box-sizing: border-box;
    background: rgba(200, 162, 77, 0.10);
    border: 1px solid rgba(200, 162, 77, 0.55);
    border-left: 4px solid #c8a24d;
    border-radius: 12px;
    text-align: left;
}

.detalle-precio-mayorista-principal {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detalle-precio-mayorista-principal .detalle-mayorista-titulo,
.detalle-precio-efectivo span {
    display: block;
    color: #c8a24d;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 850;
}

.detalle-precio-mayorista-principal small {
    display: block;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}

.detalle-precio-mayorista-principal strong,
.detalle-precio-efectivo strong {
    display: block;
    margin-top: 4px;
    color: #c8a24d;
    font-size: 27px;
    line-height: 1.08;
    font-weight: 850;
}

.detalle-precio-secundario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 7px 2px;
    box-sizing: border-box;
}

.detalle-precio-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 750;
}

.detalle-precio-secundario strong {
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 850;
    white-space: nowrap;
}

.detalle-precio-minorista,
.detalle-precio-minorista .detalle-precio-etiqueta,
.detalle-precio-minorista strong {
    color: #ffffff;
}

.detalle-precio-tarjeta,
.detalle-precio-tarjeta .detalle-precio-etiqueta,
.detalle-precio-tarjeta strong {
    color: #55c985;
}

.detalle-precio-tarjeta {
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.producto-precios-detalle .icono-tarjeta-precio {
    width: 19px;
    height: 19px;
}

@media (max-width: 768px) {
    .producto-precios-detalle {
        gap: 8px;
        max-width: none;
        margin-bottom: 12px;
    }

    .detalle-precio-mayorista-principal,
    .detalle-precio-efectivo {
        padding: 11px 13px;
    }

    .detalle-precio-mayorista-principal .detalle-mayorista-titulo,
    .detalle-precio-efectivo span {
        font-size: 14px;
    }

    .detalle-precio-mayorista-principal small {
        font-size: 13px;
    }

    .detalle-precio-mayorista-principal strong,
    .detalle-precio-efectivo strong {
        font-size: 24px;
    }

    .detalle-precio-etiqueta {
        font-size: 14px;
    }

    .detalle-precio-secundario strong {
        font-size: 17px;
    }

    .producto-precios-detalle .icono-tarjeta-precio {
        width: 17px;
        height: 17px;
    }
}

/* =========================================================
   DETALLE DE PRODUCTO - BANDERITA 20% OFF DIAGONAL IZQUIERDA
   ========================================================= */

.producto-detalle-imagen {
    position: relative;
    overflow: hidden;
}

.producto-detalle-imagen::before {
    content: "20% OFF";
    position: absolute;
    top: 22px;
    left: -34px;
    z-index: 8;
    width: 132px;
    padding: 8px 0;
    box-sizing: border-box;
    background: linear-gradient(135deg, #e1c27a 0%, #c8a24d 58%, #97712b 100%);
    color: #090909;
    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.35px;
    text-align: center;
    white-space: nowrap;
    border-top: 1px solid rgba(255, 255, 255, 0.26);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 16px rgba(200, 162, 77, 0.30);
    transform: rotate(-38deg);
    transform-origin: center;
    pointer-events: none;
}

.producto-detalle-imagen::after {
    content: "";
    position: absolute;
    top: 22px;
    left: -34px;
    z-index: 9;
    width: 132px;
    height: 30px;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 255, 255, 0.12) 43%,
        rgba(255, 255, 255, 0.78) 50%,
        rgba(255, 255, 255, 0.16) 57%,
        transparent 62%,
        transparent 100%
    );
    transform: rotate(-38deg) translateX(-150%);
    transform-origin: center;
    animation: brilloBanderaDetalleOff 3.2s ease-in-out infinite;
}

@keyframes brilloBanderaDetalleOff {
    0%, 56% {
        transform: rotate(-38deg) translateX(-150%);
        opacity: 0;
    }

    62% {
        opacity: 1;
    }

    82% {
        transform: rotate(-38deg) translateX(135%);
        opacity: 1;
    }

    83%, 100% {
        transform: rotate(-38deg) translateX(135%);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .producto-detalle-imagen::before {
        top: 17px;
        left: -22px;
        width: 112px;
        padding: 6px 0;
        font-size: 10px;
    }

    .producto-detalle-imagen::after {
        top: 17px;
        left: -22px;
        width: 112px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .producto-detalle-imagen::after {
        animation: none;
        display: none;
    }
}

/* =========================================================
   CHECKOUT POR PASOS - CARRITO LIMPIO
   ========================================================= */

/* El carrito solo muestra productos + subtotal + continuar. */
.carrito-medio-pago,
.carrito-pago-transferencia,
#pagar-mercado-pago,
#mensaje-mercado-pago {
    display: none !important;
}

.carrito-productos {
    padding: 14px 18px;
}

.carrito-item {
    grid-template-columns: 76px 1fr;
    gap: 12px;
    padding: 13px 0;
}

.carrito-item img {
    width: 76px;
    height: 94px;
}

.carrito-item-info h3 {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.25;
}

.carrito-item-categoria {
    display: block;
    margin-bottom: 6px;
    color: #989898;
    font-size: 11px;
    line-height: 1.2;
}

.carrito-item-precio {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 8px !important;
    color: #c8a24d !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.carrito-item-mayorista {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.carrito-stock {
    margin: 0 0 8px !important;
    font-size: 11px !important;
}

.carrito-item-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.carrito-cantidad {
    gap: 8px;
    margin-bottom: 0;
}

.carrito-cantidad button {
    width: 29px;
    height: 29px;
    font-size: 18px;
}

.carrito-cantidad span {
    min-width: 20px;
    font-size: 15px;
}

.eliminar-producto {
    font-size: 12px;
}

.carrito-resumen {
    padding: 13px 18px 18px;
}

#mensaje-mayorista {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.35;
}

.vaciar-carrito {
    width: auto;
    margin: 0 0 9px auto;
    padding: 3px 0;
    display: block;
    color: #969696;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vaciar-carrito:hover {
    color: #ffffff;
    background: transparent;
    border: 0;
}

.carrito-total {
    margin: 0 0 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 17px;
}

.carrito-total strong {
    font-size: 21px;
}

.finalizar-pedido {
    min-height: 48px;
    padding: 13px 15px;
    font-size: 15px;
}

/* Paso 2: forma de pago */
.checkout-pago-encabezado {
    margin-bottom: 15px;
}

.checkout-metodos-pago {
    display: grid;
    gap: 9px;
}

.checkout-metodo-pago {
    width: 100%;
    min-height: 66px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #ffffff;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.checkout-metodo-pago:hover {
    border-color: rgba(200, 162, 77, 0.55);
    background: rgba(200, 162, 77, 0.04);
}

.checkout-metodo-pago.seleccionado {
    border-color: #c8a24d;
    background: rgba(200, 162, 77, 0.08);
    box-shadow: 0 0 0 1px rgba(200, 162, 77, 0.10) inset;
}

.checkout-metodo-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.checkout-metodo-info strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
}

.checkout-metodo-info small {
    color: #c8a24d;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.checkout-metodo-mp .checkout-metodo-info small {
    color: #50d88b;
}

.checkout-metodo-precio {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    white-space: nowrap;
}

.checkout-metodo-pago.seleccionado .checkout-metodo-precio {
    color: #c8a24d;
}

.checkout-icono-tarjeta,
.checkout-mp-icono {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.checkout-metodo-tarjeta {
    color: #50d88b !important;
}

.checkout-pago-detalle {
    margin-top: 14px;
}

.checkout-pago-ayuda {
    margin: 0;
    padding: 13px 14px;
    color: #a9a9a9;
    background: #090909;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

.checkout-total-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    background: rgba(200, 162, 77, 0.08);
    border: 1px solid rgba(200, 162, 77, 0.42);
    border-radius: 11px;
}

.checkout-total-final span {
    color: #d6d6d6;
    font-size: 12px;
    font-weight: 700;
}

.checkout-total-final strong {
    color: #c8a24d;
    font-size: 20px;
    white-space: nowrap;
}

.checkout-total-mp {
    background: rgba(80, 216, 139, 0.06);
    border-color: rgba(80, 216, 139, 0.35);
}

.checkout-total-mp strong {
    color: #50d88b;
}

.checkout-pago-nota {
    margin: 11px 2px 13px;
    color: #b5b5b5;
    font-size: 12px;
    line-height: 1.45;
}

.checkout-pago-nota-mp {
    color: #c3c3c3;
}

.checkout-transferencia-datos {
    margin-top: 10px;
    padding: 4px 13px;
    background: #090909;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 11px;
}

.checkout-transferencia-datos > div {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.checkout-transferencia-datos > div:last-child {
    border-bottom: 0;
}

.checkout-transferencia-datos > div > span:first-child {
    color: #8f8f8f;
    font-size: 11px;
}

.checkout-transferencia-datos strong {
    color: #ffffff;
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
}

.checkout-alias-linea {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

#checkout-copiar-alias {
    padding: 5px 8px;
    color: #0a0a0a;
    background: #c8a24d;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 900;
}

.checkout-finalizar {
    margin-top: 0;
}

.checkout-pagar-mp {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: #009ee3;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
}

.checkout-pagar-mp:hover {
    background: #008ed0;
}

.checkout-pagar-mp:disabled {
    opacity: 0.65;
    cursor: wait;
}

.checkout-volver-datos {
    margin-top: 12px;
}

@media (min-width: 700px) {
    .modal-cliente-web-contenido:has(.checkout-metodos-pago) {
        width: min(520px, 100%);
    }
}

@media (max-width: 520px) {
    .carrito-productos {
        padding: 10px 14px;
    }

    .carrito-resumen {
        padding: 11px 14px 14px;
    }

    .carrito-item {
        grid-template-columns: 66px 1fr;
        gap: 10px;
        padding: 11px 0;
    }

    .carrito-item img {
        width: 66px;
        height: 82px;
    }

    .carrito-item-info h3 {
        font-size: 14px;
    }

    .checkout-metodo-pago {
        min-height: 62px;
        padding: 11px 12px;
        gap: 10px;
    }

    .checkout-metodo-info strong {
        font-size: 13px;
    }

    .checkout-metodo-precio {
        font-size: 14px;
    }

    .checkout-transferencia-datos > div {
        align-items: flex-start;
        padding: 8px 0;
    }
}

/* =========================================================
   CHECKOUT - AJUSTE COMPACTO PARA QUE ENTRE COMPLETO
   Especialmente en Transferencia, sin quitar información.
   ========================================================= */

.modal-cliente-web-contenido:has(.checkout-metodos-pago) {
    max-height: calc(100dvh - 28px);
    padding: 18px 24px;
    overflow-y: auto;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-cerrar {
    top: 8px;
    right: 11px;
    width: 30px;
    height: 30px;
    font-size: 25px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado,
.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pago-encabezado {
    margin-bottom: 10px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-paso {
    margin-bottom: 4px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado h3 {
    margin-bottom: 4px;
    font-size: 22px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado p {
    font-size: 12px;
    line-height: 1.35;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodos-pago {
    gap: 7px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-pago {
    min-height: 57px;
    padding: 9px 14px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pago-detalle {
    margin-top: 9px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-total-final {
    padding: 10px 14px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-total-final strong {
    font-size: 19px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-transferencia-datos {
    margin-top: 7px;
    padding: 2px 13px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-transferencia-datos > div {
    min-height: 34px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pago-nota {
    margin: 8px 2px 9px;
    font-size: 11.5px;
    line-height: 1.35;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-principal,
.modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-secundario,
.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pagar-mp {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-volver-datos {
    margin-top: 8px;
}

@media (max-height: 720px) and (min-width: 521px) {
    .modal-cliente-web {
        padding: 10px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) {
        max-height: calc(100dvh - 20px);
        padding: 14px 22px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-paso {
        font-size: 10px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado h3 {
        font-size: 20px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-pago {
        min-height: 52px;
        padding: 8px 13px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-info strong {
        font-size: 13px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-info small {
        font-size: 10px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-precio {
        font-size: 14px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-transferencia-datos > div {
        min-height: 31px;
    }
}

@media (max-width: 520px) {
    .modal-cliente-web-contenido:has(.checkout-metodos-pago) {
        max-height: calc(100dvh - 16px);
        padding: 16px 15px 14px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-pago {
        min-height: 55px;
        padding: 9px 11px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-transferencia-datos > div {
        min-height: 0;
        padding: 7px 0;
    }
}

/* =========================================================
   CHECKOUT - TAMAÑO INTERMEDIO
   Más cómodo y legible, manteniendo el modal dentro de pantalla.
   ========================================================= */

@media (min-width: 521px) and (min-height: 721px) {
    .modal-cliente-web-contenido:has(.checkout-metodos-pago) {
        padding: 21px 24px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado,
    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pago-encabezado {
        margin-bottom: 12px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-paso {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado h3 {
        margin-bottom: 5px;
        font-size: 24px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-encabezado p {
        font-size: 13px;
        line-height: 1.4;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodos-pago {
        gap: 8px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-pago {
        min-height: 62px;
        padding: 11px 14px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-info strong {
        font-size: 14px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-info small {
        font-size: 11px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-metodo-precio {
        font-size: 15px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pago-detalle {
        margin-top: 11px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-total-final {
        padding: 12px 14px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-total-final span {
        font-size: 12px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-total-final strong {
        font-size: 20px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-transferencia-datos {
        margin-top: 8px;
        padding: 3px 13px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-transferencia-datos > div {
        min-height: 36px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pago-nota {
        margin: 9px 2px 10px;
        font-size: 12px;
        line-height: 1.4;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-principal,
    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .modal-cliente-web-secundario,
    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-pagar-mp {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 13px;
    }

    .modal-cliente-web-contenido:has(.checkout-metodos-pago) .checkout-volver-datos {
        margin-top: 9px;
    }
}

/* =========================================================
   CHECKOUT MOBILE - EVITAR ZOOM AUTOMATICO EN IOS / SAFARI
   Mantiene el modal centrado y dentro del ancho visible al
   completar WhatsApp y al pasar al paso de forma de pago.
   ========================================================= */
@media (max-width: 520px) {
    .modal-cliente-web {
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .modal-cliente-web-contenido {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .modal-cliente-web-campos,
    .modal-cliente-web-campos label,
    .modal-cliente-web-whatsapp,
    .modal-cliente-web-telefono {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* iOS Safari hace zoom automático al enfocar inputs menores a 16px. */
    .modal-cliente-web-campos input,
    .modal-cliente-web-telefono input {
        font-size: 16px !important;
    }

    /* El prefijo +54 comparte fila con el input: evitamos que el 100% heredado desborde. */
    .modal-cliente-web-telefono input {
        width: 0;
        min-width: 0;
        flex: 1 1 0;
    }

    .checkout-metodos-pago,
    .checkout-metodo-pago,
    .checkout-pago-detalle,
    .checkout-total-final,
    .checkout-transferencia-datos {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* =========================================================
   MOBILE - BANDERITA 20% OFF MAS COMPACTA
   Evita que la etiqueta se superponga con frascos altos o anchos.
   Solo modifica la version movil; escritorio queda igual.
   ========================================================= */
@media (max-width: 520px) {
    .producto-card::before {
        top: 10px;
        left: -21px;
        width: 82px;
        padding: 4px 0;
        font-size: 9px;
        letter-spacing: 0.15px;
        box-shadow: 0 4px 9px rgba(200, 162, 77, 0.22);
    }

    .producto-card::after {
        top: 10px;
        left: -21px;
        width: 82px;
        height: 17px;
    }

    .producto-detalle-imagen::before {
        top: 12px;
        left: -23px;
        width: 90px;
        padding: 5px 0;
        font-size: 9px;
        letter-spacing: 0.15px;
        box-shadow: 0 4px 9px rgba(200, 162, 77, 0.22);
    }

    .producto-detalle-imagen::after {
        top: 12px;
        left: -23px;
        width: 90px;
        height: 19px;
    }
}

/* =========================================================
   TARJETAS DE PRODUCTO - JERARQUÍA MAYORISTA
   Mayorista protagonista + minorista/MP secundarios.
   No modifica carrito ni ficha individual.
   ========================================================= */

.producto-precios-con-mayorista {
    gap: 7px;
}

.precio-mayorista-destacado {
    width: 100%;
    padding: 12px 13px;
    box-sizing: border-box;
    text-align: left;
    border: 1.5px solid #c8a24d;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        rgba(200, 162, 77, 0.22) 0%,
        rgba(200, 162, 77, 0.08) 100%
    );
    box-shadow:
        0 0 0 1px rgba(200, 162, 77, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.20),
        0 0 18px rgba(200, 162, 77, 0.12);
}

.precio-mayorista-etiqueta {
    display: block;
    margin-bottom: 3px;
    color: #d8b86b;
    font-size: 12px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.precio-mayorista-destacado small {
    display: block;
    margin-bottom: 5px;
    color: #f4f4f4;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.precio-mayorista-destacado strong {
    display: block;
    color: #c8a24d;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.35px;
}

.precio-efectivo-secundario,
.precio-efectivo-secundario .precio-secundario-etiqueta,
.precio-efectivo-secundario strong {
    color: #f2f2f2;
}

.precio-efectivo-secundario {
    padding-top: 5px;
}

@media (max-width: 768px) {
    .producto-precios-con-mayorista {
        gap: 5px;
        margin-top: 7px;
    }

    .precio-mayorista-destacado {
        padding: 9px 9px;
        border-radius: 9px;
    }

    .precio-mayorista-etiqueta {
        font-size: 9px;
        letter-spacing: 0.45px;
    }

    .precio-mayorista-destacado small {
        margin-bottom: 4px;
        font-size: 10px;
    }

    .precio-mayorista-destacado strong {
        font-size: 21px;
    }

    .producto-precios-con-mayorista .precio-secundario {
        padding: 2px 0;
    }

    .producto-precios-con-mayorista .precio-secundario-etiqueta {
        font-size: 11px;
    }

    .producto-precios-con-mayorista .precio-secundario strong {
        font-size: 13px;
    }
}



/* =============== MIREKA · PRUEBA CATÁLOGO Y CARRITO INTELIGENTE =============== */
.mireka-modo-compra{max-width:610px;margin:0 auto 12px;padding:5px;display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#111;border:1px solid rgba(200,162,77,.5);border-radius:14px}
.mireka-modo-btn{padding:13px 10px;border:0;border-radius:10px;background:transparent;color:#d8d8d8;font-size:14px;font-weight:700;cursor:pointer;transition:.2s}
.mireka-modo-btn.activo{background:#c8a24d;color:#080808;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.mireka-modo-ayuda{max-width:700px;margin:0 auto 26px;color:#b7b7b7;text-align:center;font-size:13px;line-height:1.5}
.mireka-precios-tarjeta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;margin:14px 0;padding:15px 9px;background:#0b0b0b;border:1px solid rgba(200,162,77,.28);border-radius:12px;min-height:143px}
.mireka-precios-tarjeta .mireka-etiqueta-precio{color:#c8a24d;font-size:11px;line-height:1.4;font-weight:700;text-align:center}
.mireka-precios-tarjeta .mireka-precio-principal{font-size:24px;color:#fff;font-weight:800}
.mireka-precios-tarjeta small{color:#bcbcbc;font-size:11px;line-height:1.4}
.mireka-precios-tarjeta .mireka-precio-secundario{font-size:16px;color:#d6bd83}
.mireka-precios-tarjeta .mireka-pista-mayorista{font-size:10px;color:#9c9c9c}
.mireka-precio-mayorista .mireka-precio-principal{color:#c8a24d}
.mireka-tarjeta-listas{width:100%;margin-top:7px;font-size:12px;text-align:left}
.mireka-tarjeta-listas summary{color:#c8a24d;text-align:center;cursor:pointer;font-size:12px;font-weight:700;padding:7px 0}
.mireka-fila-lista{display:flex;justify-content:space-between;gap:7px;padding:7px 1px;border-top:1px solid rgba(200,162,77,.14);color:#d9d9d9;font-size:11px}
.mireka-fila-lista strong{color:#c8a24d;font-size:11px;white-space:nowrap}
.mireka-progreso-carrito{margin:0;padding:14px 18px 12px;background:#131313;border-bottom:1px solid rgba(200,162,77,.25);flex:0 0 auto}
.mireka-progreso-carrito[hidden]{display:none!important}
.mireka-progreso-cabecera{display:flex;justify-content:space-between;gap:9px;align-items:center;color:#c8a24d;font-size:13px}
.mireka-progreso-cabecera span{color:#bebebe;font-size:12px;white-space:nowrap}
.mireka-progreso-meta{margin:8px 0;color:#efefef;font-size:12px;line-height:1.35}
.mireka-progreso-barra{height:7px;background:#333;overflow:hidden;border-radius:99px}
.mireka-progreso-barra span{display:block;height:100%;background:#c8a24d;border-radius:99px;transition:width .22s ease}
.mireka-ahorro{margin:9px 0 4px;color:#e1c27b;font-size:12px;line-height:1.45;font-weight:700}
.mireka-detalle-escalones{font-size:11px;color:#d0d0d0;margin:5px 0 0}
.mireka-detalle-escalones summary{cursor:pointer;color:#c8a24d;font-size:11px;padding:6px 0}
.mireka-detalle-escalones>div{padding:4px 0;border-top:1px solid rgba(200,162,77,.12)}
.mireka-detalle-escalones small{display:block;margin-top:5px;color:#aaa;line-height:1.4}
/* Los productos se desplazan; el total y el botón permanecen visibles abajo. */
.carrito-panel{max-height:100dvh;height:100dvh}
.carrito-productos{min-height:0;flex:1 1 auto;overflow-y:auto}
.carrito-resumen{flex:0 0 auto;padding:12px 18px 18px}
.carrito-resumen #mensaje-mayorista[hidden]{display:none!important}
.carrito-resumen .carrito-total{margin-bottom:12px}
@media(max-width:600px){.mireka-modo-btn{padding:12px 7px;font-size:12px}.mireka-precios-tarjeta{padding:12px 6px}.mireka-precios-tarjeta .mireka-precio-principal{font-size:21px}.mireka-progreso-carrito{padding:11px 13px}.carrito-resumen{padding:12px 14px 15px}}


/* ============================================================
   MIREKA — ELECCIÓN INICIAL DE COMPRA · PRUEBA LOCAL
   ============================================================ */
.mireka-portal-abierto {overflow:hidden!important}
.mireka-portal-modo[hidden]{display:none!important}
.mireka-portal-modo{position:fixed;inset:0;z-index:25000;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:22px 14px;background:rgba(0,0,0,.92);backdrop-filter:blur(12px)}
.mireka-portal-contenido{width:min(720px,100%);margin:auto;text-align:center;border:1px solid rgba(200,162,77,.38);background:linear-gradient(155deg,#18150f,#080808 35%,#101010);border-radius:22px;box-shadow:0 25px 80px rgba(0,0,0,.65);padding:32px 30px 24px}
.mireka-portal-marca{color:#c8a24d;font-size:24px;font-weight:800;letter-spacing:.15em;margin-bottom:25px}
.mireka-portal-marca span{font-size:11px;display:block;letter-spacing:.22em;margin-top:2px}
.mireka-portal-eyebrow{display:block;font-size:11px;letter-spacing:.16em;color:#c8a24d;font-weight:700}
.mireka-portal-contenido h2{color:#fff;font-size:clamp(27px,5vw,37px);margin:10px 0 8px}
.mireka-portal-subtitulo{color:#c8c8c8;font-size:14px;line-height:1.5;margin:0 auto 24px;max-width:480px}
.mireka-portal-opciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;text-align:left}
.mireka-portal-opcion{font:inherit;min-width:0;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:23px 20px 20px;min-height:240px;background:#101010;color:#fff;border:1px solid #51452e;border-radius:16px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}
.mireka-portal-opcion:hover,.mireka-portal-opcion:focus-visible{transform:translateY(-3px);border-color:#c8a24d;background:#191713;outline:none}
.mireka-portal-icono{width:43px;height:43px;border:1px solid rgba(200,162,77,.55);border-radius:12px;color:#c8a24d;display:grid;place-items:center;font-size:27px;margin-bottom:8px}
.mireka-portal-opcion strong{font-size:20px;line-height:1.2}
.mireka-portal-opcion>span:not(.mireka-portal-icono){font-size:13px;color:#e5ce96;font-weight:600}
.mireka-portal-opcion small{font-size:12px;color:#b7b7b7;line-height:1.5;flex:1}
.mireka-portal-opcion em{font-size:12px;font-style:normal;color:#c8a24d;font-weight:700;margin-top:7px}
.mireka-portal-nota{font-size:12px;color:#aaa;margin:20px 0 6px}
.mireka-portal-volver{color:#a6a6a6;background:transparent;border:0;cursor:pointer;text-decoration:underline;font-size:12px;padding:10px}
.mireka-resumen-eleccion{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px auto 26px;padding:12px 16px;max-width:850px;background:#131313;border:1px solid rgba(200,162,77,.36);border-radius:13px}
.mireka-vista-actual{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-width:0}
.mireka-vista-actual strong{color:#c8a24d;font-size:14px}
.mireka-vista-actual small{color:#bbb;font-size:11px}
.mireka-punto-dorado{width:8px;height:8px;background:#c8a24d;border-radius:50%;flex:none}
.mireka-cambiar-modo{padding:8px 11px;border:1px solid rgba(200,162,77,.55);border-radius:8px;background:transparent;color:#d8b86b;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}
.mireka-cambiar-modo:hover{background:#c8a24d;color:#111}
/* Eliminamos cintas, cuadros y promociones repetidas: ya eligió modalidad */
.producto-card::before,.producto-card::after{display:none!important}
.producto-card .mireka-precios-tarjeta{border:0!important;background:transparent!important;padding:8px 2px 10px!important;min-height:108px!important;box-shadow:none!important;margin:8px 0 14px!important;gap:6px!important}
.producto-card .mireka-precio-principal{font-size:26px;color:#fff;line-height:1.15}
.producto-card .mireka-precio-mayorista .mireka-precio-principal{color:#c8a24d}
.mireka-precios-tarjeta .mireka-etiqueta-precio{color:#bdbdbd;font-size:11px;letter-spacing:.02em}
.mireka-precio-mayorista .mireka-etiqueta-precio{color:#c8a24d}
.mireka-precio-mp{border-top:1px solid rgba(200,162,77,.16);padding-top:8px;margin-top:5px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;width:100%;font-size:11px;color:#aaa}
.mireka-precio-mp strong{font-size:14px;color:#d9c08b}
.mireka-lista-condicion{font-size:11px;color:#bdbdbd}
.mireka-tarjeta-listas summary{font-size:11px;color:#d5b76d;padding:4px 0}
.mireka-fila-actual{color:#c8a24d;background:rgba(200,162,77,.08)}
.mireka-fila-actual strong{font-weight:800}
@media(max-width:600px){
 .mireka-portal-modo{padding:10px 12px}
 .mireka-portal-contenido{padding:24px 15px 16px}
 .mireka-portal-marca{margin-bottom:12px;font-size:19px}
 .mireka-portal-subtitulo{margin-bottom:16px;font-size:13px}
 .mireka-portal-opciones{gap:10px}
 .mireka-portal-opcion{padding:13px 10px;min-height:210px;gap:6px}
 .mireka-portal-opcion strong{font-size:15px}
 .mireka-portal-opcion small{font-size:11px}
 .mireka-portal-icono{width:36px;height:36px;font-size:23px}
 .mireka-resumen-eleccion{padding:10px;gap:7px;margin:0 auto 17px}
 .mireka-vista-actual small{display:none}
 .mireka-vista-actual strong{font-size:12px}
 .mireka-cambiar-modo{font-size:11px;padding:7px 9px}
 .producto-card .mireka-precio-principal{font-size:21px}
 .mireka-precio-mp strong{font-size:12px}
}
@media(max-width:420px){.mireka-portal-opciones{grid-template-columns:1fr}.mireka-portal-opcion{min-height:140px}}

/* Ficha individual: respeta selección previa y evita mezclar seis precios. */
.producto-detalle-info .mireka-resumen-eleccion{margin:0 0 16px;max-width:500px}
.producto-precios-detalle > .mireka-precios-tarjeta{width:100%;max-width:500px;text-align:left;align-items:stretch;border:1px solid rgba(200,162,77,.33);background:#101010;border-radius:14px;padding:20px 22px;gap:10px;min-height:0}
.producto-precios-detalle .mireka-precio-principal{font-size:30px;font-weight:800;color:#fff}
.producto-precios-detalle .mireka-precio-mayorista .mireka-precio-principal{color:#c8a24d}
.producto-precios-detalle .mireka-precio-mp{justify-content:space-between}
.producto-precios-detalle .mireka-precio-mp strong{font-size:17px}
.producto-precios-detalle .mireka-etiqueta-precio{font-size:13px}
.producto-precios-detalle .mireka-tarjeta-listas{font-size:13px}
.producto-precios-detalle .mireka-tarjeta-listas summary{padding:10px 0;cursor:pointer}
.producto-precios-detalle .mireka-fila-lista{display:flex;gap:10px;justify-content:space-between;padding:7px 10px;font-size:12px}
.mireka-detalle-espera{color:#c6b18a;padding:14px}
@media(max-width:600px){.producto-precios-detalle > .mireka-precios-tarjeta{padding:16px}.producto-precios-detalle .mireka-precio-principal{font-size:25px}}


/* ==========================================================
   MIREKA · MEJORA DE LEGIBILIDAD DEL SELECTOR DE COMPRA
   Más tipografía, iconos reconocibles, llamadas claras a la acción
   Solo modifica el portal inicial; no altera precios ni checkout.
   ========================================================== */
.mireka-portal-contenido{
  width:min(860px,100%);
  padding:34px 38px 28px;
}
.mireka-portal-marca{font-size:30px;margin-bottom:19px;letter-spacing:.12em}
.mireka-portal-marca span{font-size:14px;letter-spacing:.19em;margin-top:5px}
.mireka-portal-eyebrow{font-size:13px;letter-spacing:.13em}
.mireka-portal-contenido h2{font-size:clamp(32px,4vw,43px);line-height:1.17;margin:11px 0}
.mireka-portal-subtitulo{font-size:18px;line-height:1.45;max-width:650px;margin:0 auto 23px;color:#e4e4e4}
.mireka-portal-opciones{gap:18px}
.mireka-portal-opcion{padding:23px 24px 22px;min-height:278px;gap:9px;border-color:#6e5b36;border-radius:17px}
.mireka-portal-icono{width:58px;height:58px;font-size:initial;border-radius:14px;margin-bottom:3px;background:rgba(200,162,77,.09);border-color:rgba(200,162,77,.62)}
.mireka-portal-icono svg{display:block;width:34px;height:34px;stroke:currentColor;flex:none}
.mireka-portal-opcion strong{font-size:26px;line-height:1.22;letter-spacing:-.02em}
.mireka-portal-opcion>span:not(.mireka-portal-icono){font-size:17px;line-height:1.4;color:#e9cc87}
.mireka-portal-opcion small{font-size:16px;line-height:1.48;color:#d6d6d6;flex:1}
.mireka-portal-opcion em{font-size:16px;line-height:1.35;display:inline-block;margin-top:7px;padding:9px 0 2px;letter-spacing:0}
.mireka-portal-nota{font-size:15px;margin:20px 0 5px;color:#c2c2c2}
.mireka-portal-volver{font-size:15px;color:#ddd;padding:9px 12px}
.mireka-portal-opcion:focus-visible{outline:3px solid #c8a24d;outline-offset:3px}
@media (max-width:720px){
 .mireka-portal-contenido{width:min(550px,100%);padding:23px 19px 19px}
 .mireka-portal-marca{font-size:24px;margin-bottom:12px}
 .mireka-portal-marca span{font-size:12px}
 .mireka-portal-contenido h2{font-size:clamp(27px,6vw,36px)}
 .mireka-portal-subtitulo{font-size:16px;margin-bottom:19px}
 .mireka-portal-opciones{grid-template-columns:1fr;gap:11px}
 .mireka-portal-opcion{padding:17px 18px;min-height:auto;gap:5px}
 .mireka-portal-icono{width:48px;height:48px;margin-bottom:3px}
 .mireka-portal-icono svg{width:29px;height:29px}
 .mireka-portal-opcion strong{font-size:22px}
 .mireka-portal-opcion>span:not(.mireka-portal-icono){font-size:16px}
 .mireka-portal-opcion small{font-size:15px}
 .mireka-portal-opcion em{font-size:15px;margin-top:4px}
 .mireka-portal-nota{font-size:14px;margin-top:12px}
 .mireka-portal-volver{font-size:14px}
}
@media (max-width:420px){
 .mireka-portal-modo{padding:8px 10px}
 .mireka-portal-contenido{padding:19px 15px 14px}
 .mireka-portal-eyebrow{font-size:12px}
 .mireka-portal-contenido h2{font-size:28px}
 .mireka-portal-subtitulo{font-size:15px}
 .mireka-portal-opcion{padding:13px 16px}
 .mireka-portal-opcion strong{font-size:21px}
 .mireka-portal-opcion small{font-size:15px}
 .mireka-portal-icono{width:45px;height:45px}
}


/* ============================================================
   MIREKA · DISEÑO PREMIUM DE PRECIOS / CATÁLOGO Y FICHA
   Sólo presentación; usa importes calculados por script.js.
   ============================================================ */
.producto-card .mireka-precios-premium,
.producto-precios-detalle > .mireka-precios-premium {
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(200,162,77,.36) !important;
  border-radius: 14px;
  padding: 0 !important;
  min-height: 0 !important;
  margin: 12px 0 15px !important;
  background: #151411 !important;
  box-shadow: 0 9px 25px rgba(0,0,0,.17) !important;
}
.mireka-precios-premium .mireka-efectivo-panel,
.mireka-precios-premium .mireka-mayorista-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 15px 13px 14px;
  background: linear-gradient(118deg,rgba(200,162,77,.12),rgba(200,162,77,.045) 52%,rgba(0,0,0,.06));
}
.mireka-precios-premium .mireka-precio-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-bottom: 2px;
}
.mireka-precios-premium .mireka-metodo-label {
  color: #ead09b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.mireka-precios-premium .mireka-beneficio-badge {
  flex: 0 0 auto;
  color: #15110a;
  background: #d6b365;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .02em;
  padding: 5px 6px;
  white-space: nowrap;
}
.producto-card .mireka-precios-premium .mireka-precio-principal,
.producto-precios-detalle .mireka-precios-premium .mireka-precio-principal {
  color: #fff;
  font-size: clamp(24px, 2.05vw, 29px);
  font-weight: 850;
  line-height: 1.13;
  white-space: nowrap;
  letter-spacing: -.025em;
  margin: 1px 0;
  font-variant-numeric: tabular-nums;
}
.mireka-precios-premium .mireka-precio-beneficio,
.mireka-precios-premium .mireka-lista-condicion {
  color: #c9c0ab;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
}
.mireka-precios-premium .mireka-mp-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 4px;
  align-items: center;
  padding: 14px 13px;
  background: #111;
  border-top: 1px solid rgba(200,162,77,.23);
}
.mireka-precios-premium .mireka-mp-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1;
  color: #dfdfdf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .035em;
  white-space: nowrap;
}
.mireka-precios-premium .mireka-mp-titulo svg {
  width: 17px;
  height: 17px;
  color: #d6b365;
  flex: 0 0 auto;
}
.mireka-precios-premium .mireka-mp-monto {
  grid-column: 1;
  grid-row: 2;
  display: block;
  color: #f5f1e7;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.mireka-precios-premium .mireka-cuotas-label {
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 74px;
  padding: 6px 5px;
  border: 1px solid rgba(200,162,77,.42);
  border-radius: 7px;
  color: #e4c782;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  letter-spacing: .025em;
}
.mireka-precios-premium.mireka-precio-mayorista .mireka-precio-principal {
  color: #f6ead0;
}
.mireka-precios-premium .mireka-tarjeta-listas {
  margin: 0;
  padding: 0 13px;
  box-sizing: border-box;
  background: #101010;
  border-top: 1px solid rgba(200,162,77,.21);
}
.mireka-precios-premium .mireka-tarjeta-listas summary {
  padding: 11px 1px;
  color: #e0c78b;
  text-align: left;
  font-size: 12px;
  font-weight: 750;
}
.mireka-precios-premium .mireka-fila-lista {
  font-size: 11px;
  padding: 10px 2px;
}
.mireka-precios-premium .mireka-fila-lista strong{font-size: 12px}
.mireka-precios-premium.mireka-precio-sin-cargar {padding: 14px !important}

/* Ficha individual: mismo diseño pero con mejor espacio y lectura. */
.producto-precios-detalle > .mireka-precios-premium {max-width: 500px}
.producto-precios-detalle .mireka-precios-premium .mireka-efectivo-panel,
.producto-precios-detalle .mireka-precios-premium .mireka-mayorista-panel {padding: 20px 22px}
.producto-precios-detalle .mireka-precios-premium .mireka-mp-panel {padding: 17px 22px}
.producto-precios-detalle .mireka-precios-premium .mireka-precio-principal {font-size: 35px}
.producto-precios-detalle .mireka-precios-premium .mireka-mp-monto {font-size: 27px}
.producto-precios-detalle .mireka-precios-premium .mireka-metodo-label {font-size: 13px}
.producto-precios-detalle .mireka-precios-premium .mireka-mp-titulo {font-size: 13px}
.producto-precios-detalle .mireka-precios-premium .mireka-cuotas-label {max-width: 95px;font-size:11px;padding:8px}

@media(max-width: 768px) {
  .producto-card .mireka-precios-premium {margin: 9px 0 13px !important;border-radius: 10px}
  .producto-card .mireka-precios-premium .mireka-efectivo-panel,
  .producto-card .mireka-precios-premium .mireka-mayorista-panel {padding: 11px 8px 12px;gap:5px}
  .producto-card .mireka-precios-premium .mireka-precio-cabecera {flex-wrap:wrap;gap:4px}
  .producto-card .mireka-precios-premium .mireka-metodo-label {font-size: 9px;letter-spacing: 0}
  .producto-card .mireka-precios-premium .mireka-beneficio-badge {font-size: 9px;padding:3px 5px}
  .producto-card .mireka-precios-premium .mireka-precio-principal {font-size:clamp(19px,4.3vw,27px)}
  .producto-card .mireka-precios-premium .mireka-precio-beneficio,
  .producto-card .mireka-precios-premium .mireka-lista-condicion {font-size:10px}
  .producto-card .mireka-precios-premium .mireka-mp-panel {padding:11px 8px;grid-template-columns:1fr;gap:5px}
  .producto-card .mireka-precios-premium .mireka-mp-titulo {grid-column:1;grid-row:1;font-size:10px;gap:4px}
  .producto-card .mireka-precios-premium .mireka-mp-titulo svg{width:14px;height:14px}
  .producto-card .mireka-precios-premium .mireka-mp-monto{grid-column:1;grid-row:2;font-size:clamp(17px,3.9vw,23px)}
  .producto-card .mireka-precios-premium .mireka-cuotas-label{grid-column:1;grid-row:3;max-width:none;width:max-content;box-sizing:border-box;padding:4px 6px;font-size:9px}
  .producto-card .mireka-precios-premium .mireka-tarjeta-listas{padding:0 8px}
  .producto-card .mireka-precios-premium .mireka-tarjeta-listas summary{font-size:11px}
}
@media(max-width: 380px) {
  .producto-card .mireka-precios-premium .mireka-precio-principal {font-size:18px}
  .producto-card .mireka-precios-premium .mireka-mp-monto {font-size:17px}
  .producto-card .mireka-precios-premium .mireka-metodo-label {font-size:8px}
  .producto-card .mireka-precios-premium .mireka-beneficio-badge {font-size:8px}
}


/* ===========================================================
   MIREKA · CUATRO LISTAS MAYORISTAS VISIBLES SIN DESPLEGABLE
   Sólo diseño de precios: no modifica costos, niveles o pagos.
   =========================================================== */
.producto-card .mireka-precios-premium.mireka-cuatro-listas,
.producto-precios-detalle > .mireka-precios-premium.mireka-cuatro-listas {
    background: #12110e !important;
    border: 1px solid rgba(204,166,82,.42) !important;
    overflow: hidden;
}
.mireka-cuatro-listas .mireka-listas-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 13px 12px 11px;
    border-bottom: 1px solid rgba(204,166,82,.2);
    background: linear-gradient(120deg,rgba(200,162,77,.16),rgba(200,162,77,.02));
}
.mireka-cuatro-listas .mireka-listas-encabezado > span {
    font-size: 11px;
    color: #f0d8a7;
    letter-spacing: .055em;
    font-weight: 850;
}
.mireka-cuatro-listas .mireka-listas-encabezado > small {
    color: #d9b968;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .015em;
}
.mireka-cuatro-listas .mireka-listas-todas {
    padding: 5px 8px 3px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mireka-cuatro-listas .mireka-lista-visible {
    display: grid;
    grid-template-columns: minmax(0,1fr) max-content;
    align-items: center;
    gap: 7px;
    padding: 9px 7px;
    border: 1px solid transparent;
    border-bottom-color: rgba(204,166,82,.12);
    border-radius: 7px;
    min-width: 0;
}
.mireka-cuatro-listas .mireka-lista-visible:last-child {border-bottom-color: transparent}
.mireka-cuatro-listas .mireka-lista-identidad {display:flex; flex-direction:column; gap:2px; min-width:0}
.mireka-cuatro-listas .mireka-lista-identidad strong {
    color: #efdebc;
    font-size: 12px;
    line-height: 1.18;
    letter-spacing: .03em;
}
.mireka-cuatro-listas .mireka-lista-identidad small {
    color: #b7b1a6;
    font-size: 10px;
    line-height: 1.22;
    white-space: nowrap;
}
.mireka-cuatro-listas .mireka-lista-monto {
    color: #f7f5ef;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.18;
    white-space: nowrap;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}
.mireka-cuatro-listas .mireka-lista-monto-pendiente {font-size:12px;color:#b8a580}
.mireka-cuatro-listas .mireka-lista-visible-activa {
    background: linear-gradient(95deg,rgba(204,166,82,.18),rgba(204,166,82,.04));
    border-color: rgba(204,166,82,.5);
}
.mireka-cuatro-listas .mireka-lista-visible-activa .mireka-lista-identidad strong,
.mireka-cuatro-listas .mireka-lista-visible-activa .mireka-lista-monto {color:#e7bf68}
.mireka-cuatro-listas .mireka-listas-aclaracion {
    margin: 2px 0 0;
    padding: 9px 10px 11px;
    color: #c6bca9;
    text-align: center;
    font-size: 10px;
    line-height: 1.35;
    background: #10100f;
    border-top: 1px solid rgba(204,166,82,.15);
}
/* En fichas individuales más anchas, los precios se leen más grandes. */
.producto-precios-detalle .mireka-cuatro-listas .mireka-listas-encabezado {padding:17px 20px}
.producto-precios-detalle .mireka-cuatro-listas .mireka-listas-todas {padding:10px 18px}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-visible {padding:12px 10px}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-identidad strong {font-size:15px}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-identidad small {font-size:12px}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-monto {font-size:23px}
@media (max-width: 640px) {
    .producto-card .mireka-cuatro-listas .mireka-listas-encabezado {padding:10px 7px 9px;gap:2px}
    .producto-card .mireka-cuatro-listas .mireka-listas-encabezado > span {font-size:10px}
    .producto-card .mireka-cuatro-listas .mireka-listas-encabezado > small {font-size:9px}
    .producto-card .mireka-cuatro-listas .mireka-listas-todas {padding:4px 4px 2px}
    .producto-card .mireka-cuatro-listas .mireka-lista-visible {padding:9px 3px;gap:3px}
    .producto-card .mireka-cuatro-listas .mireka-lista-identidad strong {font-size:10px}
    .producto-card .mireka-cuatro-listas .mireka-lista-identidad small {font-size:9px}
    .producto-card .mireka-cuatro-listas .mireka-lista-monto {font-size:clamp(11px, 3.3vw, 16px)}
    .producto-card .mireka-cuatro-listas .mireka-lista-monto-pendiente {font-size:10px}
    .producto-card .mireka-cuatro-listas .mireka-listas-aclaracion {font-size:9px;padding:8px 3px}
}

/* ==========================================================
   MIREKA · MAYORISTA COMPACTO 2×2 · 21/10/2026
   Estilo únicamente. No altera la lógica de precios o carrito.
   ========================================================== */
.producto-card .mireka-cuatro-listas .mireka-listas-encabezado,
.producto-precios-detalle .mireka-cuatro-listas .mireka-listas-encabezado {
  padding: 11px 11px 10px;
  gap: 6px;
  border-bottom: 1px solid rgba(200,162,77,.16);
}
.mireka-cuatro-listas .mireka-listas-encabezado > span { font-size: 11px; }
.mireka-cuatro-listas .mireka-listas-encabezado > small { font-size: 10px; }
.producto-card .mireka-cuatro-listas .mireka-listas-todas,
.producto-precios-detalle .mireka-cuatro-listas .mireka-listas-todas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}
.producto-card .mireka-cuatro-listas .mireka-lista-visible,
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-visible {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 7px 10px;
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(200,162,77,.22);
  border-radius: 8px;
  background: #1e1b15;
  text-align: left;
}
.mireka-cuatro-listas .mireka-lista-visible:last-child {
  border-bottom-color: rgba(200,162,77,.22);
}
.producto-card .mireka-cuatro-listas .mireka-lista-identidad,
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-identidad {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
.producto-card .mireka-cuatro-listas .mireka-lista-identidad strong {
  font-size: 11px;
  line-height: 1.15;
}
.producto-card .mireka-cuatro-listas .mireka-lista-identidad small {
  font-size: 10px;
  line-height: 1.2;
}
.producto-card .mireka-cuatro-listas .mireka-lista-monto {
  display: block;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: -.042em;
  white-space: nowrap;
  max-width: 100%;
}
.producto-card .mireka-cuatro-listas .mireka-lista-monto-pendiente {font-size:12px;white-space:normal;}
.mireka-cuatro-listas .mireka-lista-visible-activa {
  background: linear-gradient(115deg,rgba(204,166,82,.19),rgba(204,166,82,.05));
  border-color: #c8a24d !important;
}
/* Ficha individual, más espacio disponible */
.producto-precios-detalle .mireka-cuatro-listas .mireka-listas-todas {gap: 9px; padding: 12px;}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-visible {padding: 14px 13px;gap: 10px;}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-identidad strong {font-size: 14px;}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-identidad small {font-size: 12px;}
.producto-precios-detalle .mireka-cuatro-listas .mireka-lista-monto {font-size: clamp(19px, 2vw, 24px);}
/* Móvil: catálogo de dos productos por fila. Precios exactos y visibles. */
@media (max-width: 768px) {
  .producto-card .mireka-cuatro-listas .mireka-listas-encabezado {padding: 9px 6px 8px;}
  .producto-card .mireka-cuatro-listas .mireka-listas-encabezado > span {font-size: 10px;letter-spacing:0;}
  .producto-card .mireka-cuatro-listas .mireka-listas-encabezado > small {font-size: 9px;}
  .producto-card .mireka-cuatro-listas .mireka-listas-todas {padding: 5px;gap: 4px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-visible {padding: 7px 4px; gap: 8px; border-radius: 6px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-identidad strong {font-size: 10px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-identidad small {font-size: 9px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-monto {font-size: clamp(11px, 3.15vw, 15px);letter-spacing:-.05em;}
  .producto-card .mireka-cuatro-listas .mireka-lista-monto-pendiente {font-size: 10px;}
}
@media (max-width: 360px) {
  .producto-card .mireka-cuatro-listas .mireka-listas-todas {padding: 4px 3px;gap: 3px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-visible {padding: 7px 3px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-monto {font-size: 10.5px;}
  .producto-card .mireka-cuatro-listas .mireka-lista-identidad small {font-size: 8px;}
}

/* MIREKA | progreso independiente por categoría */
.mireka-progreso-carrito .mireka-progreso-grupo + .mireka-progreso-grupo {
  margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(200,162,77,.2);
}
.mireka-progreso-carrito .mireka-progreso-cabecera strong{color:#dfbc71;}
.mireka-precios-premium .mireka-beneficio-badge {white-space: nowrap; font-size: 10px;}
@media(max-width:600px){.mireka-precios-premium .mireka-beneficio-badge {font-size: 9px;}}


/* MIREKA — Ajuste fino de portada (solo escritorio).
   La barra de navegación fija solapaba la parte superior del banner.
   Se deja un pequeño espacio y se recupera la imagen completa de arriba.
   No altera portada móvil, navegación ni precios. */
@media (min-width: 769px) {
    body:has(.navbar) .hero {
        margin-top: 208px;
    }
}