/* =========================
   RESET
========================= */
:root{

    --color-principal:#C96A7A;

    --color-secundario:#25D366;

    --font-family:'Poppins', sans-serif;

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

/* =========================
   BODY
========================= */

body{
    font-family:var(--font-family);
    background:#f6f6f6;
    padding:20px;
}

/* =========================
   HEADER
========================= */

.header{
    max-width:500px;
    margin:0 auto 24px auto;
}
.topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;
}

.logo{
    text-align:center;
    margin-bottom:20px;
}

#logo-empresa{
    max-width:220px;
    width:100%;
    height:auto;
}

#btn-menu{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:22px;

    cursor:pointer;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

#whatsapp-top{

    width:42px;
    height:42px;

    display:flex;

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

    text-decoration:none;

    border-radius:50%;

    background:white;

    font-size:22px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* =========================
   BUSCADOR
========================= */

#buscador-container{
    position:relative;
    margin-bottom:18px;
}

#buscador{
    width:100%;

    padding:16px;
    padding-right:50px;

    border:none;
    border-radius:30px;

    background:white;

    font-size:16px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

#buscador:focus{
    outline:none;
}

#icono-busqueda{
    position:absolute;
    right:18px;
    top:50%;

    transform:translateY(-50%);
    pointer-events:none;
}

/* =========================
   CATEGORIAS
========================= */

#estilos{
    display:flex;
    gap:10px;

    overflow-x:auto;

    margin-bottom:12px;
    padding-bottom:4px;
}

#estilos::-webkit-scrollbar{
    display:none;
}

/* =========================
   CONTADOR
========================= */

#contador-productos{
    margin-bottom:16px;
    color:#666;
    font-size:14px;
}

/* =========================
   BOTONES
========================= */

#estilos button,
#vista-selector button{

    -webkit-appearance:none;
    appearance:none;

    border:none !important;

    background:#ffffff !important;

    padding:12px 18px;

    border-radius:999px;

    cursor:pointer;

    white-space:nowrap;

    font-size:16px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    transition:.2s;
}

#estilos button:hover,
#vista-selector button:hover{

    transform:translateY(-2px);

    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

#vista-selector{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

/* =========================
   SKELETON / CARGA
========================= */

@keyframes shimmer{
    0%{ background-position:-400px 0 }
    100%{ background-position:400px 0 }
}

.catalogo-skeleton{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    max-width:500px;
    margin:0 auto;
}

.skeleton-card{
    aspect-ratio:1/1.4;
    border-radius:4px;
    background:linear-gradient(90deg,#ececec 25%,#f8f8f8 50%,#ececec 75%);
    background-size:800px 100%;
    animation:shimmer 1.4s infinite linear;
}

/* =========================
   SIN RESULTADOS
========================= */

.sin-resultados{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:48px 24px;
    text-align:center;
    max-width:500px;
    margin:0 auto;
}

.sin-resultados p{
    font-size:18px;
    font-weight:600;
    color:#555;
    margin:0;
}

.sin-resultados span{
    font-size:14px;
    color:#999;
}

/* =========================
   IMAGEN PLACEHOLDER
========================= */

.img-placeholder{
    object-fit:contain !important;
    background:#f5f5f5;
    padding:12px;
}

/* =========================
   CATALOGO
========================= */

#catalogo{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:4px;

    max-width:500px;

    margin:0 auto;
}

/* =========================
   TARJETAS
========================= */

.producto{
    background:white;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    transition:.3s;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
}

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

.producto-imagen{

    width:100%;

    aspect-ratio:1/1.25;

    object-fit:cover;

    display:block;
}

.producto h3{

    padding:10px;

    font-size:10px;

    line-height:1.3;

    font-weight:600;
}

/* =========================
   MODAL
========================= */

#modal{

    position:fixed;
    inset:0;

    display:none;

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

    background:rgba(0,0,0,.8);

    z-index:9999;
}

#modal-contenido{
    position:relative;
    width:90%;
    max-width:500px;
    background:white;
    border-radius:5px;
    padding:10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
}

#cerrar-modal{

    position:absolute;

    top:-12px;
    right:-12px;

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:18px;

    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

#modal-imagen{
    display:none;
}

#modal-referencia{

    font-size:28px;

    font-weight:700;

    margin-bottom:8px;
}

#modal-sabor,
#modal-estilo{

    font-size:16px;

    color:#555;

    margin-bottom:6px;
}

#modal-precio{

    font-size:22px;

    font-weight:700;

    color:var(--color-principal);

    margin-bottom:12px;
}

#modal-descripcion{

    color:#333;

    margin-bottom:16px;

    line-height:1.5;
}

#modal-whatsapp{

    display:block;

    width:100%;

    text-align:center;

    text-decoration:none;

    padding:14px;

    border-radius:10px;

    background:var(--color-secundario);

    color:white;

    font-weight:bold;

    transition:.2s;
}

#modal-whatsapp:hover{
    opacity:.9;
}

#estilos button.estilo-activo{

    background:var(--color-principal) !important;

    color:white !important;

    box-shadow:0 4px 14px rgba(0,0,0,.18);

}

#estilos button.estilo-activo:hover{

    transform:none;

    box-shadow:0 4px 14px rgba(0,0,0,.18);

}

#menu-lateral{

    position:fixed;

    top:0;
    left:0;

    width:280px;
    height:100vh;
    height:100dvh;

    background:white;

    padding:24px;
    padding-bottom:max(24px, env(safe-area-inset-bottom));

    display:flex;
    flex-direction:column;

    overflow-y:auto;

    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    will-change:transform;

    box-shadow:8px 0 30px rgba(0,0,0,.15);

    z-index:10001;
}

#menu-lateral.abierto{

    transform:translateX(0);
}

#menu-lateral a{

    text-decoration:none;

    color:#333;

    font-size:18px;

    padding:10px 0;
}

#cerrar-menu{

    align-self:flex-end;

    width:36px;
    height:36px;

    border:none;

    background:#f5f5f5;

    border-radius:50%;

    cursor:pointer;

    margin-bottom:16px;
}

#overlay-menu{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.5);

    display:none;

    z-index:10000;
}

#overlay-menu.abierto{

    display:block;
}

#menu-header{

    text-align:center;

    margin-bottom:24px;
}

#menu-logo{

    width:140px;

    max-width:100%;

    margin-bottom:12px;
}

#menu-header h3{

    font-size:22px;

    margin-bottom:4px;
}

#menu-header p{

    color:#888;

    font-size:14px;
}

.menu-separador{

    height:1px;

    background:#ececec;

    margin-bottom:20px;
}

#menu-links{

    display:flex;

    flex-direction:column;

    gap:8px;
}

#menu-links a{

    text-decoration:none;

    color:#333;

    padding:14px 12px;

    border-radius:12px;

    transition:.2s;
}

#menu-links a:hover{

    background:#f5f5f5;
}

.menu-footer{

    margin-top:auto;
    padding-top:16px;
    flex-shrink:0;
}

#menu-whatsapp{

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

    text-decoration:none;

    color:white;

    background:#25D366;

    padding:14px;

    border-radius:12px;

    font-weight:bold;
}

#menu-whatsapp img{
    width:20px;
    height:20px;
    filter:brightness(0) invert(1);
}

/* =========================
   GALERÍA CARRUSEL
========================= */

#contenedor-galeria{
    position:relative;
    margin-bottom:14px;
    border-radius:8px;
    overflow:hidden;
}

#galeria-track-wrapper{
    overflow:hidden;
    border-radius:8px;
    width:100%;
    aspect-ratio:1/1.1;
}

#galeria-track{
    display:flex;
    height:100%;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

#galeria-track img{
    flex:0 0 100%;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

#anterior-imagen,
#siguiente-imagen{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border:none;
    background:none;
    cursor:pointer;
    z-index:10;
    color:white;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
    transition:opacity .2s;
}

#anterior-imagen:hover,
#siguiente-imagen:hover{
    opacity:.7;
}

#anterior-imagen{
    left:8px;
}

#siguiente-imagen{
    right:8px;
}

#anterior-imagen svg,
#siguiente-imagen svg{
    width:28px;
    height:28px;
}

#galeria-dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    z-index:10;
}

.galeria-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:background .25s, transform .25s;
    cursor:pointer;
}

.galeria-dot.activo{
    background:white;
    transform:scale(1.3);
}

#btn-compartir{
    width:100%;

    margin-top:10px;

    padding:12px;

    border:none;

    border-radius:10px;

    background:#f1f1f1;

    color:#333;

    font-weight:600;

    cursor:pointer;
}

#btn-compartir:hover{
    background:#e5e5e5;
}

.producto-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:6px 8px;
}

.cta-producto{
    font-size:9px;
    color:#555;
}

.producto-footer-derecha{
    display:flex;
    align-items:center;
    gap:6px;
}

.producto-ref{
    font-size:9px;
    color:#999;
    font-weight:500;
}

.producto-footer .icono-mini{
    width:16px;
    height:16px;
}

/* =========================
   ICONOS SVG
========================= */

.icono-mini{
    width:18px;
    height:18px;
    display:block;
    object-fit:contain;
}

/* =========================
   ICONO BUSCADOR
========================= */

#icono-busqueda img{
    width:22px;
    height:22px;
    display:block;
}

/* =========================
   FOOTER
========================= */

.site-footer{
    max-width:500px;
    margin:32px auto 0 auto;
    padding:0 0 24px 0;
}

.site-footer-inner{
    background:white;
    border-radius:16px;
    padding:20px;
    text-align:center;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.footer-ubicacion{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#555;
    font-size:14px;
    line-height:1.4;
    margin-bottom:18px;
    transition:color .2s;
}

.footer-ubicacion:hover{
    color:var(--color-principal);
}

.footer-icono{
    width:18px;
    height:18px;
    flex-shrink:0;
}

.footer-redes{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-bottom:16px;
}

.footer-redes a{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f6f6f6;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:transform .2s, box-shadow .2s;
}

.footer-redes a:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.footer-icono-red{
    width:22px;
    height:22px;
    display:block;
    object-fit:contain;
}

.footer-copy{
    font-size:12px;
    color:#999;
    margin:0;
}