/* Crystal Power */

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

body{
    font-family:'Poppins',sans-serif;
    background:white;;
}
/* =========================
   VARIABLES
========================= */

:root{

    --primary:#0B6DFF;
    --dark:#2D2D2D;
    --light:#FFFFFF;
    --whatsapp:#25D366;

    --container:1280px;

    --radius:16px;

}

/* =========================
   SCROLL SUAVE
========================= */

@media (prefers-reduced-motion: no-preference){

    html{
        scroll-behavior:smooth;
    }

}

/* =========================
   CONTENEDOR
========================= */

.container{

    width:min(90%, var(--container));

    margin:auto;

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

#header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: transparent;

padding-top:18px;

    transform:translateY(0);

    transition: all .35s ease, transform .35s ease;
}

#header.header-hidden{

    transform:translateY(-140%);

}

@media (prefers-reduced-motion: reduce){

    #header{
        transition:background .35s ease;
    }

    #header.header-hidden{
        transform:translateY(0);
    }

}

.navbar{

    width:88%;

    max-width:1400px;

    height:86px;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 28px;

    background:#FFFFFF;

    border-radius:24px;

    box-shadow:
    0 8px 24px rgba(15,23,42,.05),
    0 2px 6px rgba(15,23,42,.03);

    border:1px solid #EEF3F8;

    transition:all .35s ease;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{
    width:105px;
    height:auto;
    display:block;
}

.logo-shine{

    display:inline-block;
    line-height:0;

}

.logo-shine img{

    animation:logo-glow-pulse 4.2s ease-in-out infinite;

}

@keyframes logo-glow-pulse{

    0%, 75%, 100%{
        filter:
            drop-shadow(0 0 2px rgba(110,175,255,.3))
            drop-shadow(0 0 6px rgba(70,140,255,.2));
    }

    40%{
        filter:
            drop-shadow(0 0 8px rgba(90,165,255,.85))
            drop-shadow(0 0 18px rgba(170,215,255,.6))
            drop-shadow(0 0 28px rgba(60,130,255,.35));
    }

}

@media (prefers-reduced-motion: reduce){

    .logo-shine img{
        animation:none;
        filter:
            drop-shadow(0 0 5px rgba(100,170,255,.5))
            drop-shadow(0 0 12px rgba(170,215,255,.3));
    }

}
.brand h1{
    font-size:1.8rem;
    font-weight:700;
    color:#1E1E1E;
    margin:0;
}

.brand p{
    margin-top:4px;
    color:#444;
    font-size:0.95rem;
    font-weight:500;
}

.menu{

    display:flex;

    align-items:center;

    gap:30px;

    list-style:none;

}

.menu a{

    display: inline-block;

    text-decoration: none;

    color: var(--dark);

    font-weight: 600;

    transition:
        transform .25s ease,
        color .25s ease;

}
.menu a:hover{

    transform: translateY(-3px);

    color: var(--primary);

}

.menu-toggle{

    display:none;

}

.btn-whatsapp{

    background:var(--whatsapp);

    color:white !important;

    padding:12px 22px;

    border-radius:50px;
transition:
    transform .25s ease,
    box-shadow .25s ease,
    background-color .25s ease;
}
.btn-whatsapp:hover{

    transform: translateY(-4px);

    background: #2BD66A;

    box-shadow: 0 12px 28px rgba(37,211,102,.30);

}
/* =========================
   HERO
========================= */

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

    padding-bottom:30px;

    background:
linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)),
url("../assets/Fondo/Fondo\ v1.png");
    overflow:hidden;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
    position:relative;
    isolation:isolate;

}

.hero-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:48px;

}

.hero-content{

    flex:1;

    max-width:600px;

}

.hero-tag{

    display:inline-block;

    background:#EAF4FF;

    color:#0B6DFF;

    padding:9px 18px;

    border-radius:50px;

    font-weight:600;

    box-shadow:0 6px 16px rgba(11,109,255,.14);

    margin-bottom:22px;

}

.hero-content h2{

    font-size:2.4rem;

    line-height:1.24;

    letter-spacing:-0.015em;

    color:#1E1E1E;

    margin-bottom:18px;

}

.hero-divider{

    display:block;

    width:56px;

    height:4px;

    border-radius:4px;

    background:linear-gradient(135deg,#0B6DFF,#3E8BFF);

    margin:0 0 22px;

}

.hero-highlight{

    background:linear-gradient(135deg,#0B6DFF,#3E8BFF);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

}

.hero-content p{

    font-size:1.05rem;

    max-width:480px;

    color:#444;

    font-weight:500;

    line-height:1.6;

    margin-bottom:30px;

}

.hero-mobile-brand,
.hero-title-mobile,
.hero-mobile-tagline{

    display:none;

}

.hero-trust{

    display:grid;

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

    column-gap:16px;

    list-style:none;

    margin-bottom:34px;

}

.hero-trust li{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:8px;

    font-size:.82rem;

    font-weight:600;

    color:#3A3A3A;

    line-height:1.25;

}

.hero-trust-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    background:#EAF3FF;

    color:#0B6DFF;

}

.hero-trust-icon svg{

    width:20px;

    height:20px;

}

.cristal-divisor,
.cristal-fragmento,
.cristalino-seccion,
.cristalino-mensaje-permanente{

    display:none;

}

.hero-buttons{

     display:flex;

    gap:18px;

    margin-top:0;

    align-items:stretch;

    flex-wrap:wrap;

}

.btn-primary{

    background:linear-gradient(135deg,#0B6DFF,#3E8BFF);

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    border:2px solid transparent;

    box-shadow:0 8px 20px rgba(11,109,255,.18);

    transition:all .3s ease;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(11,109,255,.28);

}

.hero-btn-icon-arrow{

    transition:transform .3s ease;

}

.btn-primary:hover .hero-btn-icon-arrow{

    transform:translateX(4px);

}

.btn-secondary{

    background:#fff;

    color:var(--primary);

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    border:2px solid var(--primary);

    box-shadow:0 4px 14px rgba(11,109,255,.08);

    transition:all .3s ease;

    display:inline-flex;

    align-items:center;

    gap:10px;

}

.hero-btn-icon{

    width:20px;

    height:20px;

    flex-shrink:0;

}

.btn-secondary:hover{

    transform:translateY(-3px);

    background:#EAF4FF;

}

.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-left:0;

}

.hero-image img{

    width:490px;

    max-width:100%;

    height:auto;

}
/*=========================
  CATÁLOGO
=========================*/

#categorias{

    margin-top:0;

    padding:140px 0 80px;

    text-align:center;

    background:#fff;

    position:relative;

    z-index:1;

    scroll-margin-top: 8px;
}

.section-title h2{
    font-size:clamp(2.5rem,5vw,4rem);
    font-weight:800;
    margin-bottom:0;
}

.section-title .cat-titulo-destacado{
    color:var(--primary);
}

.section-title-divider{

    display:block;

    width:64px;

    height:4px;

    border-radius:4px;

    background:linear-gradient(135deg,#0B6DFF,#3E8BFF);

    margin:18px auto 20px;

}

.section-title-divider-movil{

    display:none;

}

.section-subtitle{

    color:#555;

    font-size:1.05rem;

    font-weight:500;

    margin-bottom:54px;

}

.section-subtitle-movil{

    display:none;

}

.category-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:28px;

}

.category-btn{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    width:260px;

    padding:36px 26px 30px;

    background:#fff;

    border:1px solid rgba(11,109,255,.10);

    border-radius:24px;

    text-decoration:none;

    color:#222;

    box-shadow:0 10px 25px rgba(15,23,42,.05);

    transition:.35s ease;

}

.category-btn img{

    width:130px;

    height:130px;

    object-fit:contain;

    margin-bottom:20px;

    filter:drop-shadow(0 8px 14px rgba(11,109,255,.18));

}

.category-btn-title{

    font-size:1.15rem;

    font-weight:700;

    color:#1A1A1A;

    margin-bottom:10px;

}

.category-btn-desc{

    font-size:.92rem;

    color:#666;

    font-weight:500;

    line-height:1.5;

    margin:0 0 22px;

}

.category-btn-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    background:#EAF3FF;

    color:#0B6DFF;

    transition:background .3s ease, color .3s ease, transform .3s ease;

}

.category-btn-arrow svg{

    width:18px;

    height:18px;

}

.category-btn:hover{

    transform:translateY(-6px);

    border-color:rgba(11,109,255,.3);

    box-shadow:0 16px 34px rgba(15,23,42,.10);

}

.category-btn:hover .category-btn-arrow{

    background:#0B6DFF;

    color:#fff;

    transform:translateX(3px);

}

.cristalino-stage {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background: transparent;
    overflow: visible;
  }

  .cristalino-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: auto;
    transform-origin: 50% 50%;
    animation: fly-wave 3.2s ease-in-out infinite;
  }

  @keyframes fly-wave {
    0%   { transform: translate(-50%, -50%) translateY(0px)   rotate(-2.5deg); }
    25%  { transform: translate(-50%, -50%) translateY(-14px) rotate(1.5deg); }
    50%  { transform: translate(-50%, -50%) translateY(0px)   rotate(-1.5deg); }
    75%  { transform: translate(-50%, -50%) translateY(-10px) rotate(2.5deg); }
    100% { transform: translate(-50%, -50%) translateY(0px)   rotate(-2.5deg); }
  }

  /* Sparkles orbiting around him */
  .sparkle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #bcd9ff 45%, transparent 75%);
    opacity: 0;
    animation: twinkle 2.6s ease-in-out infinite;
    pointer-events: none;
  }

  .sparkle.s1 { width: 10px; height: 10px; top: 15%; left: 18%; animation-delay: 0s; }
  .sparkle.s2 { width: 7px;  height: 7px;  top: 28%; left: 80%; animation-delay: 0.6s; }
  .sparkle.s3 { width: 12px; height: 12px; top: 70%; left: 12%; animation-delay: 1.2s; }
  .sparkle.s4 { width: 8px;  height: 8px;  top: 78%; left: 78%; animation-delay: 1.8s; }
  .sparkle.s5 { width: 6px;  height: 6px;  top: 8%;  left: 55%; animation-delay: 2.2s; }

  @keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4); }
    50%      { opacity: 0.9; transform: scale(1.15); }
  }

  /* Soft motion trail lines behind him */
  .trail {
    position: absolute;
    top: 58%;
    left: -6%;
    width: 42%;
    height: 3px;
    background: linear-gradient(90deg, rgba(30,90,220,0) 0%, rgba(30,90,220,0.35) 100%);
    border-radius: 3px;
    animation: trail-move 3.2s ease-in-out infinite;
    pointer-events: none;
  }
  .trail.t2 { top: 66%; width: 30%; opacity: 0.6; animation-delay: 0.15s; }
  .trail.t3 { top: 50%; width: 24%; opacity: 0.4; animation-delay: 0.3s; }

  @keyframes trail-move {
    0%   { transform: translateX(0) translateY(0);   opacity: 0; }
    15%  { opacity: 0.7; }
    50%  { transform: translateX(-10px) translateY(-10px); opacity: 0.5; }
    100% { transform: translateX(-22px) translateY(0px); opacity: 0; }
  }
  /*========================================
  CATEGORY HERO
========================================*/

.category-hero{
    padding: 150px 0 40px;
}

.category-header{
    max-width: 750px;
}

.category-badge{
    display:inline-flex;
    align-items:center;

    padding:8px 18px;

    background:#EAF3FF;

    color:#0B6DFF;

    border-radius:999px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:20px;
}

.category-header h2{

    font-size:3.2rem;

    font-weight:700;

    line-height:1.1;

    color:#111;

    margin-bottom:18px;

}

.category-header h2 span{

    color:#0B6DFF;

}

.category-header p{

    max-width:620px;

    font-size:1.08rem;

    line-height:1.8;

    color:#666;

}
/*========================================
  PRODUCTOS
========================================*/

#productos{

    padding: 20px 0 80px;

}

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

}
.cp-card{

    width:100%;

    min-width:0;

    background:#fff;

    border:1px solid #E6EEF8;

    border-radius:24px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    overflow:hidden;

    transition:.3s;

    display:flex;

    flex-direction:column;

}

.cp-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}
.cp-card-image{

    height:240px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

    overflow:hidden;

    position:relative;

   background:linear-gradient(
180deg,
#FFFFFF 0%,
#F7FBFF 100%
);

border-bottom:1px solid #EEF3F8;

}

.cp-card-image img{

    width:95%;

    height:auto;

    object-fit:contain;

    opacity:1;

    transform:scale(1);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.cp-galeria-flecha{

    display:none;

    align-items:center;

    justify-content:center;

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:30px;

    height:30px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    color:#0B6DFF;

    font-size:1.2rem;

    line-height:1;

    cursor:pointer;

    box-shadow:0 4px 12px rgba(15,23,42,.12);

    opacity:0;

    transition:opacity .2s ease, background .2s ease;

    z-index:2;

}

.cp-galeria-flecha-prev{ left:8px; }
.cp-galeria-flecha-next{ right:8px; }

.cp-galeria-flecha:hover{

    background:#0B6DFF;
    color:#fff;

}

.cp-card-image.cp-tiene-galeria .cp-galeria-flecha{

    display:flex;

}

.cp-card-image.cp-tiene-galeria:hover .cp-galeria-flecha{

    opacity:1;

}

.cp-card-body{

    padding:20px 24px 24px;

    display:flex;

    flex-direction:column;

    flex:1;

    min-height:0;
}

.cp-category{

    display:inline-block;

    padding:7px 14px;

    background:#EAF3FF;

    color:#0B6DFF;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:16px;

}

.cp-card-body h3{

    font-size:1.45rem;

    line-height:1.3;

    color:#1A1A1A;

    margin:0;

    overflow-wrap:anywhere;

    word-break:break-word;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:calc(1.45rem * 1.3 * 3);

}
.cp-divider{

    height:1px;

    background:#EEF2F7;

    margin:15px 0;

}

.cp-precio{

    font-size:1.25rem;

    font-weight:700;

    color:#0B6DFF;

    margin-bottom:16px;

}

.cp-variantes-resumen{

    display:flex;

    flex-direction:column;

    gap:2px;

    margin-bottom:14px;

}

.cp-variantes-resumen-label{

    font-size:.78rem;

    font-weight:600;

    color:#8b93a1;

    text-transform:uppercase;

    letter-spacing:.02em;

}

.cp-variantes-resumen-detalle{

    font-size:.9rem;

    font-weight:600;

    color:#334155;

}

.cp-card-footer{

    margin-top:auto;

}

.cp-btn:disabled{

    background:#B7C6DA;

    cursor:not-allowed;

}

.cp-productos-cargando,
.cp-productos-vacio,
.cp-productos-error{

    color:#5B6B7C;

    font-size:1rem;

}

.cp-field{

    margin-bottom:14px;

}

.cp-field label{

    display:block;

    margin-bottom:8px;

    font-size:.95rem;

    font-weight:600;

    color:#444;

}

.cp-field select{

    width:100%;

    height:44px;

    padding:0 16px;

    border:1px solid #D8E5F3;

    border-radius:14px;

    background:#fff;

    font-size:.95rem;

    font-family:inherit;

    outline:none;

    transition:.25s;

}

.cp-field select:focus{

    border-color:#0B6DFF;

}

.cp-quantity{

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #D8E5F3;

    border-radius:14px;

    overflow:hidden;

}

.cp-quantity button{

    width:44px;

    height:44px;

    border:none;

    background:#fff;

    font-size:1.3rem;

    cursor:pointer;

}

.cp-quantity span{

    flex:1;

    text-align:center;

    font-weight:600;

}

.cp-btn{

    width:100%;

    height:48px;

    border:none;

    border-radius:16px;

    background:#0B6DFF;

    color:#fff;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    margin-top:10px;

    transition:.25s;

}

.cp-btn:hover{

    background:#0959d8;

}

.cp-btn-outline{

    width:100%;

    height:52px;

    margin-top:14px;

    border:2px solid #0B6DFF;

    border-radius:16px;

    background:#fff;

    color:#0B6DFF;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.cp-btn-outline:hover{

    background:#0B6DFF;

    color:#fff;

}
/* ==========================================
   BOTÓN COTIZACIÓN
========================================== */

.btn-quote{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:48px;

    padding:0 20px;

    border:none;

    border-radius:999px;

    background:#EEF5FF;

    color:#0B6DFF;

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

    font-size:.95rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 8px 20px rgba(11,109,255,.08);

}

.btn-quote:hover{

    background:#DDEBFF;

    transform:translateY(-2px);

}

#quote-count{

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0B6DFF;

    color:#fff;

    border-radius:50%;

    font-size:.8rem;

    font-weight:700;

}

/* Mini-carrito flotante: oculto por defecto (solo aparece en móvil,
   activado en responsive.css) */
.mobile-quote-fab{

    display:none;

}

/* ==========================================
   ANIMACIONES DE SCROLL (fade-in / slide-up)
   Solo transform + opacity (compositor, sin repaint costoso).
   Se activan una vez vía IntersectionObserver (ver script.js) y no se
   revierten al salir de pantalla, para no "parpadear" al subir/bajar.
========================================== */

.cp-reveal{

    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
    will-change:opacity, transform;

}

.cp-reveal.cp-reveal-visible{

    opacity:1;
    transform:translateY(0);

}

/* Las tarjetas de producto combinan reveal-al-scroll (opacity/transform
   lento) con hover de elevación (transform/box-shadow rápido). Con
   .cp-reveal.cp-reveal-visible empatando en especificidad con
   .cp-card:hover, el transform:translateY(0) del reveal ganaba por orden
   de cascada y cancelaba la elevación del hover. Esta regla, más
   específica, separa los tiempos de transición (opacity lento para el
   reveal, transform/box-shadow rápido para el hover) y asegura que el
   hover siempre gane sobre el estado de reveal ya visible. */
.cp-card.cp-reveal{

    transition:opacity .6s cubic-bezier(.16,.84,.44,1),
               transform .3s ease,
               box-shadow .3s ease;

}

.cp-card.cp-reveal:hover{

    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

/* Mismo conflicto que en .cp-card: .category-btn también recibe
   registrarReveal() (scroll reveal), y .cp-reveal.cp-reveal-visible
   empataba en especificidad con .category-btn:hover, ganando por orden
   de cascada y cancelando la elevación (solo quedaba el cambio de color
   del borde/sombra base). Misma solución: transición separada por
   velocidad y hover con mayor especificidad que el estado de reveal. */
.category-btn.cp-reveal{

    transition:opacity .6s cubic-bezier(.16,.84,.44,1),
               transform .3s ease,
               border-color .3s ease,
               box-shadow .3s ease;

}

.category-btn.cp-reveal:hover{

    transform:translateY(-6px);
    border-color:rgba(11,109,255,.3);
    box-shadow:0 16px 34px rgba(15,23,42,.10);

}

@media (hover:none){

    .cp-card:active{

        transform:translateY(-2px) scale(.99);
        box-shadow:0 14px 32px rgba(0,0,0,.09);

    }

}

@media (prefers-reduced-motion: reduce){

    .cp-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

}

/* ==========================================
   COTIZACIÓN
========================================== */

.catalog-layout{

    display:grid;
    grid-template-columns: 1fr 340px;
    gap:32px;
    align-items:start;

}

.quote-panel{

    background:#fff;
    border-radius:24px;
    padding:24px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);

    position:sticky;
    top:120px;

}

.quote-panel h3{

    margin-bottom:20px;
    color:#0B6DFF;

}

.quote-empty{

    color:#8b8b8b;
    line-height:1.6;

}
/* ==========================================
   DRAWER
========================================== */

#drawer-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1998;

}

#drawer-overlay.active{

    opacity:1;

    visibility:visible;

}

#quote-drawer{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    max-width:100%;

    height:100vh;

    background:#fff;

    box-shadow:-10px 0 35px rgba(0,0,0,.12);

    transition:right .35s ease;

    z-index:1999;

    display:flex;

    flex-direction:column;

}

#quote-drawer.active{

    right:0;

}

.drawer-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid #EEF2F7;

}

.drawer-header h2{

    color:#0B6DFF;

    font-size:1.4rem;

}

#close-drawer{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#F3F6FB;

    cursor:pointer;

    font-size:1.2rem;

}

.drawer-body{

    padding:24px;

}
.drawer-body{

    flex:1;

    overflow-y:auto;

    padding:24px;

}

.drawer-empty{

    color:#888;

    line-height:1.7;

}

.drawer-footer{

    padding:24px;

    border-top:1px solid #EEF2F7;

    background:#fff;

}

.drawer-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.drawer-total span{

    color:#666;

    font-weight:600;

}

.drawer-total strong{

    color:#0B6DFF;

    font-size:1.4rem;

}
/*=========================================
DRAWER PRODUCTOS
=========================================*/

.drawer-card{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px;

    margin-bottom:18px;

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:18px;

    box-shadow:0 8px 18px rgba(0,0,0,.04);

}

.drawer-image{

    width:72px;

    height:72px;

    object-fit:contain;

    flex-shrink:0;

}

.drawer-info{

    flex:1;

}

.drawer-info h4{

    margin:0 0 6px;

    color:#222;

    font-size:1rem;

}

.drawer-info p{

    margin:0 0 6px;

    color:#666;

    font-size:.9rem;

}

.drawer-info span{

    color:#0B6DFF;

    font-weight:600;

}

.drawer-qty{

    display:flex;
    align-items:center;
    gap:10px;
    margin-top:4px;

}

.drawer-qty-minus,
.drawer-qty-plus{

    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    background:#F3F6FB;
    color:#0B6DFF;
    font-size:1rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:.2s;

}

.drawer-qty-minus:hover,
.drawer-qty-plus:hover{

    background:#DDEBFF;

}

.drawer-qty-value{

    min-width:18px;
    text-align:center;
    color:#0B6DFF;
    font-weight:600;

}

.drawer-delete{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#F3F6FB;

    cursor:pointer;

    transition:.25s;

    font-size:1.1rem;

}

.drawer-delete:hover{

    background:#FFEAEA;

    transform:scale(1.08);

}

/*=========================================
VER DETALLES (TARJETA)
=========================================*/

.cp-ver-detalle{

    background:none;
    border:none;
    padding:0;
    margin:2px 0 14px;
    color:#0B6DFF;
    font-weight:600;
    font-size:.9rem;
    text-decoration:underline;
    cursor:pointer;
    display:inline-block;
    font-family:inherit;

}

.cp-card-image img,
.cp-card-body h3{

    cursor:pointer;

}

/*=========================================
DETALLE PRODUCTO (MODAL)
=========================================*/

.pd-overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:2100;

}

.pd-overlay.active{

    opacity:1;
    visibility:visible;

}

.pd-modal{

    background:#fff;
    border-radius:24px;
    width:85vw;
    max-width:1000px;
    min-width:0;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    box-shadow:0 20px 60px rgba(0,0,0,.25);

}

.pd-close{

    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    font-size:1.3rem;
    line-height:1;
    cursor:pointer;
    z-index:3;

}

.pd-layout{

    display:grid;
    grid-template-columns:1.1fr 1fr;
    min-height:0;

}

.pd-gallery{

    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,#FFFFFF 0%,#F7FBFF 100%);
    border-right:1px solid #EEF3F8;
    padding:32px;
    box-sizing:border-box;
    overflow:hidden;

}

.pd-image-wrap{

    height:460px;
    flex-shrink:0;
    display:flex;
    justify-content:center;
    align-items:center;

}

.pd-image{

    width:100%;
    max-width:420px;
    max-height:460px;
    object-fit:contain;

}

.pd-thumbs{

    display:flex;
    justify-content:center;
    flex-shrink:0;
    gap:10px;
    padding-top:20px;
    overflow-x:auto;
    overflow-y:hidden;
    max-width:100%;
    box-sizing:border-box;

}

.pd-thumb{

    flex:0 0 auto;
    width:56px;
    height:56px;
    padding:0;
    border:2px solid transparent;
    border-radius:12px;
    background:#F7FBFF;
    overflow:hidden;
    cursor:pointer;
    transition:border-color .2s ease;

}

.pd-thumb img{

    width:100%;
    height:100%;
    object-fit:contain;
    display:block;

}

.pd-thumb-activa,
.pd-thumb:hover{

    border-color:#0B6DFF;

}

@media (prefers-reduced-motion: reduce){

    .pd-thumb{
        transition:none;
    }

}

.pd-body{

    padding:32px;
    min-width:0;
    min-height:0;
    max-width:100%;
    box-sizing:border-box;
    overflow-y:auto;

}

.pd-descripcion{

    color:#5B6B7C;
    line-height:1.6;
    white-space:pre-line;
    margin-bottom:6px;
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;

}

body.pd-lock-scroll{

    overflow:hidden;

}

/*=========================================
CONTACTO
=========================================*/

#contacto{

    padding:140px 0 90px;
    background:#F7FBFF;
    scroll-margin-top:8px;

}

.contacto-wrap{

    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    gap:50px;

}

.contacto-info{

    min-width:280px;

}

.contacto-info .cp-category{

    margin-bottom:18px;

}

.contacto-info h2{

    font-size:clamp(2rem,4vw,2.8rem);
    font-weight:800;
    color:#1A1A1A;
    margin-bottom:14px;

}

.contacto-info h2 span{

    color:var(--primary);

}

.contacto-info > p{

    color:#5B6B7C;
    line-height:1.7;
    max-width:520px;
    margin-bottom:30px;

}

.contacto-list{

    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;

}

.contacto-card{

    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid #E6EEF8;
    border-radius:16px;
    padding:16px 20px;
    max-width:420px;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;

}

.contacto-card::before{

    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:35%;
    height:100%;
    background:linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    opacity:0;
    pointer-events:none;

}

.contacto-card:hover{

    transform:translateY(-3px);
    border-color:rgba(11,109,255,.35);
    box-shadow:0 12px 26px rgba(11,109,255,.14);

}

.contacto-card:hover::before{

    opacity:1;
    animation:contacto-shine-sweep .8s ease forwards;

}

@keyframes contacto-shine-sweep{

    from{ left:-60%; }
    to{ left:120%; }

}

.contacto-icon{

    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex-shrink:0;
    border-radius:50%;
    background:#EAF3FF;
    color:#0B6DFF;
    transition:background .3s ease, color .3s ease;

}

.contacto-icon svg{

    width:22px;
    height:22px;

}

.contacto-card:hover .contacto-icon{

    background:#0B6DFF;
    color:#fff;

}

.contacto-card-text{

    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;

}

.contacto-label{

    font-weight:700;
    color:#1A1A1A;
    font-size:.85rem;

}

.contacto-value{

    color:var(--primary);
    font-weight:600;
    overflow-wrap:anywhere;

}

@media (prefers-reduced-motion: reduce){

    .contacto-card{
        transition:border-color .2s ease;
    }

    .contacto-card:hover{
        transform:none;
    }

    .contacto-card:hover::before{
        animation:none;
        opacity:0;
    }

}

.contacto-mascota{

    position:relative;
    min-width:240px;
    display:flex;
    align-items:center;
    justify-content:center;

}

.contacto-mascota::after{

    content:"";
    position:absolute;
    bottom:6%;
    width:55%;
    height:26px;
    background:radial-gradient(closest-side, rgba(11,109,255,.22), rgba(11,109,255,0) 75%);
    border-radius:50%;
    z-index:0;

}

.contacto-mascota img{

    position:relative;
    z-index:1;
    max-width:400px;
    width:100%;
    height:auto;
    object-fit:contain;
    animation:cristalino-float 5.5s ease-in-out infinite;

}

@keyframes cristalino-float{

    0%, 100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-10px) rotate(1deg); }

}

@media (prefers-reduced-motion: reduce){

    .contacto-mascota img{
        animation:none;
    }

}