/* ========================= */
/* TABLET */
/* ========================= */

@media (max-width:1024px){

    /* HEADER */

    /* HERO */

    #hero{

        padding-top:100px;

    }

    .hero-container{

        gap:28px;

    }

    .hero-content{

        max-width:440px;

    }

    .hero-content h2{

        font-size:2rem;

        margin-bottom:14px;

    }

    .hero-content p{

        max-width:100%;

        margin-bottom:22px;

    }

    .hero-trust{

        margin-bottom:24px;

    }

    .hero-image{

        max-width:400px;

    }

    .hero-image img{

        width:360px;

    }

    /* CATEGORÍAS */

    .category-buttons{

        display:grid;

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

        justify-items:center;

    }

    .category-btn{

        width:100%;
        max-width:280px;

    }

    .category-btn:last-child{

        grid-column:1 / -1;

    }

    /* PRODUCTOS */

    .products-grid{

        gap:22px;

    }

    /* MODAL DETALLE PRODUCTO */

    .pd-modal{

        width:92vw;
        max-width:820px;

    }

    .pd-layout{

        grid-template-columns:1fr 1fr;

    }

    .pd-gallery{

        padding:24px;

    }

    .pd-image-wrap{

        height:340px;

    }

    .pd-image{

        max-width:320px;
        max-height:340px;

    }

    .pd-body{

        padding:24px;

    }

    /* COTIZACIÓN */

}


/* ========================= */
/* CELULAR */
/* ========================= */

@media (max-width:768px){

    /* MINI-CARRITO FLOTANTE: siempre visible en móvil, sin depender del
       menú hamburguesa. Reutiliza el mismo drawer/lógica que #quote-button. */

    .mobile-quote-fab{

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

        position:fixed;
        right:18px;
        bottom:18px;
        z-index:998;

        width:58px;
        height:58px;
        border-radius:50%;
        border:none;

        background:#0B6DFF;
        color:#fff;
        font-size:1.5rem;

        box-shadow:0 10px 25px rgba(11,109,255,.4);
        transition:transform .2s ease;

    }

    .mobile-quote-fab:active{
        transform:scale(.94);
    }

    .mobile-quote-fab-count{

        position:absolute;
        top:-4px;
        right:-4px;

        width:24px;
        height:24px;
        display:flex;
        align-items:center;
        justify-content:center;

        background:#FF5252;
        color:#fff;
        border-radius:50%;
        border:2px solid #fff;

        font-size:.75rem;
        font-weight:700;

    }

    /* FONDO PREMIUM (protección de overflow, no oculta errores de diseño).
       Antes overflow-x:hidden estaba en html Y body a la vez — esa combinación
       es una causa conocida de scroll "pegajoso"/que necesita repetir el gesto
       en Safari/Chrome de iOS y Android reales (crea dos contextos de scroll
       encimados). El emulador móvil de Chrome no lo reproduce, por eso no se
       detectó antes. Con overflow-x:hidden solo en body alcanza para seguir
       recortando el fondo fijo (más abajo) sin crear ese conflicto. */

    html{

        overflow-x:visible;

    }

    body{

        position:relative;

        overflow-x:hidden;

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

    }

    /* Textura oficial de cristal: capa fija detrás de todo el contenido */

    body::before{

        content:"";
        position:fixed;
        top:-3%;
        left:-3%;
        width:106%;
        height:106%;
        z-index:-1;
        background-image:url("../assets/Fondo/fondo-cristal-movil.png");
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        opacity:.5;
        pointer-events:none;
        animation:cristal-fondo-vivo 50s ease-in-out infinite;
        will-change:transform;

    }

    @keyframes cristal-fondo-vivo{

        0%, 100%{ transform:translate(0,0); opacity:.46; }
        50%{ transform:translate(-4px,4px); opacity:.58; }

    }

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

        body::before{

            animation:none;

        }

    }

    /* HEADER */

    #header{

        padding-top:10px;

    }

    .navbar{

        height:auto;

        flex-wrap:nowrap;

        justify-content:space-between;

        position:relative;

        padding:10px 14px;

        border-radius:16px;

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

        backdrop-filter:blur(14px);

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

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

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

    }

    .logo img{

        width:56px;

    }

    .brand p{

        display:none;

    }

    .brand h1{

        font-size:1rem;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:40px;

        height:40px;

        flex-shrink:0;

        border:none;

        border-radius:12px;

        background:#F3F6FB;

        color:#1E1E1E;

        font-size:1.3rem;

        line-height:1;

        cursor:pointer;

    }

    .menu{

        position:absolute;

        top:calc(100% + 10px);

        right:0;

        flex-direction:column;

        align-items:stretch;

        gap:6px;

        width:min(240px, 80vw);

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

        backdrop-filter:blur(16px);

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

        border-radius:16px;

        box-shadow:0 20px 45px rgba(0,0,0,.16);

        padding:12px;

        max-height:0;

        overflow:hidden;

        opacity:0;

        pointer-events:none;

        transition:max-height .3s ease, opacity .25s ease;

        z-index:10;

    }

    .menu.menu-abierto{

        max-height:420px;

        opacity:1;

        pointer-events:auto;

    }

    .menu li{

        width:100%;

    }

    .menu a{

        display:block;

        padding:10px 12px;

        border-radius:10px;

    }

    .menu a:hover{

        background:#EAF3FF;

        transform:none;

    }

    .btn-whatsapp{

        display:block;

        text-align:center;

        padding:10px 12px;

        font-size:.9rem;

    }

    .btn-quote{

        width:100%;

        justify-content:center;

    }

    /* HERO */

    #hero{

        padding-top:110px;

        padding-bottom:100px;

        background-image:url("../assets/Fondo/Fondo Celular.png");
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        animation:fondo-celular-vivo 16s ease-in-out infinite;

    }

    @keyframes fondo-celular-vivo{

        0%, 100%{ background-position:50% 35%; }
        50%{ background-position:50% 65%; }

    }

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

        #hero,
        #categorias{

            animation:none;

        }

    }

    .category-hero{

        padding-top:130px;

    }

    .hero-container{

        flex-direction:column;

        text-align:center;

        gap:36px;

    }

    .hero-content{

        max-width:100%;

        transform:none;

        position:relative;

    }

    .hero-content::before{

        content:"";
        position:absolute;
        top:-30px;
        left:50%;
        width:260px;
        height:260px;
        transform:translateX(-50%);
        background:radial-gradient(circle, rgba(11,109,255,.10), rgba(11,109,255,0) 70%);
        z-index:-1;
        pointer-events:none;

    }

    .hero-tag{

        display:none;

    }

    .hero-mobile-brand{

        display:block;

        color:#0B6DFF;

        font-weight:700;

        font-size:1.12rem;

        letter-spacing:.04em;

        text-transform:uppercase;

        margin-bottom:14px;

    }

    .hero-content > h2:not(.hero-title-mobile){

        display:none;

    }

    .hero-content h2.hero-title-mobile{

        display:block;

        font-size:2.35rem;

        line-height:1.2;

        letter-spacing:-0.01em;

        color:#1E1E1E;

        margin-bottom:18px;

    }

    .hero-divider{

        display:none;

    }

    .hero-content p.hero-mobile-tagline{

        display:inline-block;

        background:#EAF4FF;

        color:#0B6DFF;

        padding:9px 20px;

        border-radius:50px;

        font-weight:600;

        font-size:.96rem;

        margin-bottom:22px;

    }

    .hero-content p{

        font-size:1.14rem;

        line-height:1.65;

        margin-bottom:30px;

    }

    .hero-trust{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:22px;

        margin-bottom:30px;

    }

    .hero-trust-icon{

        width:46px;

        height:46px;

    }

    .hero-trust li{

        font-size:.8rem;

        max-width:90px;

    }

    .hero-buttons{

        justify-content:center;

        margin-top:0;

    }

    .hero-buttons .btn-primary{

        font-size:1.1rem;

        padding:19px 40px;

    }

    .hero-image{

        display:none;

    }

    @keyframes crystal-drift{

        0%, 100%{ transform:translateY(0) scale(1); opacity:.4; }
        50%{ transform:translateY(-10px) scale(1.15); opacity:.85; }

    }

    /* CRISTALINO POR SECCIÓN (pertenece a cada sección, sin tarjeta alrededor del personaje) */

    #hero,
    #categorias,
    #contacto{

        position:relative;

    }

    .cristalino-seccion{

        display:flex;

        align-items:flex-end;

        gap:6px;

        position:absolute;

        right:10px;

        bottom:16px;

        z-index:5;

        opacity:0;

        transform:translateY(12px);

        transition:opacity .4s ease-out, transform .4s ease-out;

        pointer-events:none;

    }

    .cristalino-seccion.visible{

        opacity:1;

        transform:translateY(0);

    }

    /* Cristalino de Categorías: a diferencia del resto (que aparece flotando
       encima del contenido unos segundos y luego se esconde), este queda
       fijo dentro del flujo normal de la sección — igual que en Contacto —
       para no competir nunca por espacio con el header ni con el título,
       sin importar el punto de scroll. Por eso ignora la clase .visible
       (siempre opacity:1) y el position:absolute del resto de instancias. */
    .cristalino-seccion-arriba{

        top:auto;

        bottom:auto;

    }

    #cristalino-categorias{

        position:static;

        justify-content:center;

        margin:0 auto 24px;

        opacity:1;

        transform:none;

        pointer-events:auto;

    }

    /* Escala fluida basada solo en el ancho de viewport (vw), no en la
       altura: la versión anterior mezclaba vw+dvh para que el tamaño
       también creciera con el alto disponible, pero eso hacía que dos
       teléfonos con el mismo ancho pero distinto alto (ej. iPhone SE
       375x667, más bajo) mostraran a Cristalino visiblemente más chico
       que en teléfonos más altos del mismo ancho — justo la
       inconsistencia reportada. Al depender solo de vw, el tamaño queda
       determinado únicamente por el ancho real del dispositivo y escala
       de forma continua y predecible entre los anchos móviles comunes
       (~360-430px), sin saltos entre modelos. */
    .cristalino-seccion-img{

        display:block;

        width:clamp(84px, 25vw, 112px);

        height:auto;

        max-height:none;

        flex-shrink:0;

        object-fit:contain;

        animation:cristalino-seccion-float 6s ease-in-out infinite;

        pointer-events:none;

    }

    /* Cristalino Call Center (Categorías): personaje de cuerpo entero,
       proporción más alta que ancha, así que se reduce el ancho (misma
       lógica fluida, a menor escala) para que quepa completo sin recortar
       ninguna parte. */
    .cristalino-seccion-img-completo{

        width:clamp(100px, 30vw, 140px);

    }

    @keyframes cristalino-seccion-float{

        0%, 100%{ transform:translateY(0); }
        50%{ transform:translateY(-4px); }

    }

    .cristalino-seccion-burbuja{

        position:relative;

        max-width:clamp(170px, 50vw, 220px);

        margin-bottom:28px;

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

        backdrop-filter:blur(10px);

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

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

        border-radius:16px 16px 4px 16px;

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

        padding:12px 16px 12px 14px;

        pointer-events:auto;

    }

    .cristalino-seccion-burbuja p{

        margin:0;

        font-size:.8rem;

        font-weight:500;

        line-height:1.45;

        color:#1E1E1E;

    }

    /* Bocadillo de Categorías: mismo estilo, más horizontal para no
       quedar apretado ni tapar el título "Explora nuestro Catálogo". */
    #cristalino-categorias-burbuja{

        max-width:clamp(210px, 60vw, 260px);
        padding:14px 18px 14px 16px;

    }

    #cristalino-categorias-burbuja p{

        font-size:.9rem;

    }

    /* Bocadillo de Hero: mismo estilo, más ancho/horizontal y con más
       espacio interno, sin tocar el bocadillo de Categorías ni el de
       Contacto (cada uno tiene su propio selector). */
    #cristalino-hero-burbuja{

        max-width:clamp(190px, 53vw, 235px);
        padding:16px 20px 16px 18px;
        transform:translateY(16px);

    }

    .cristalino-seccion-cerrar{

        position:absolute;

        top:1px;

        right:3px;

        border:none;

        background:none;

        font-size:.8rem;

        line-height:1;

        color:#B7C2D0;

        cursor:pointer;

        padding:3px;

    }

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

        .cristalino-seccion-img{

            animation:none;

        }

        .cristalino-seccion{

            transition:opacity .2s ease;

        }

    }

    /* TRANSICIÓN CURVA ENTRE SECCIONES (efecto cristal) */

    .cristal-divisor{

        display:block;
        position:relative;
        height:34px;
        overflow:hidden;
        pointer-events:none;

    }

    .cristal-divisor::before{

        content:"";
        position:absolute;
        left:50%;
        top:-186px;
        width:150%;
        height:220px;
        transform:translateX(-50%);
        border-radius:50%;
        background:linear-gradient(180deg, rgba(234,244,255,.6), rgba(255,255,255,0) 70%);

    }

    .cristal-divisor-invertido::before{

        top:auto;
        bottom:-186px;
        background:linear-gradient(0deg, rgba(234,244,255,.6), rgba(255,255,255,0) 70%);

    }

    /* PEQUEÑOS FRAGMENTOS DE CRISTAL DECORATIVOS */

    .cristal-fragmento{

        display:inline-block;
        position:absolute;
        color:#0B6DFF;
        font-size:.85rem;
        opacity:.35;
        pointer-events:none;
        animation:crystal-drift 7s ease-in-out infinite;

    }

    .cristal-fragmento-categorias{

        top:-6px;
        right:14%;

    }

    .cristal-fragmento-contacto{

        top:-4px;
        right:8%;
        font-size:.75rem;
        animation-delay:1.4s;

    }

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

        .cristal-fragmento{

            animation:none;

        }

    }

    .section-title{

        position:relative;

    }

    .contacto-info{

        position:relative;

    }

    /* BORDE CRISTALINO SUTIL (reflejo, no caja) */

    #categorias::before,
    #contacto::before{

        content:"";
        position:absolute;
        top:0;
        left:12%;
        width:76%;
        height:1px;
        background:linear-gradient(90deg, rgba(11,109,255,0), rgba(11,109,255,.22), rgba(11,109,255,0));
        pointer-events:none;

    }

    /* MANCHAS DE CRISTAL DECORATIVAS (fondo, nunca sobre el contenido) */

    #categorias::after,
    #contacto::after{

        content:"";
        position:absolute;
        top:-30px;
        right:0;
        width:200px;
        height:200px;
        background:radial-gradient(circle, rgba(11,109,255,.09), rgba(11,109,255,0) 70%);
        z-index:-1;
        pointer-events:none;

    }

    #contacto::after{

        top:auto;
        bottom:-30px;
        right:auto;
        left:0;

    }

    /* CATEGORÍAS */

    #categorias,
    #contacto{

        scroll-margin-top:90px;

    }

    #categorias{

        padding-top:100px;

        background-image:url("../assets/Fondo/Fondo Celular.png");
        background-size:cover;
        background-position:center;
        background-repeat:no-repeat;
        animation:fondo-celular-vivo 16s ease-in-out infinite;

    }

    .section-title-divider,
    .section-subtitle{

        display:none;

    }

    .section-title h2{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:8px;

    }

    .cat-titulo-eyebrow{

        display:block;

        font-size:.8rem;

        font-weight:700;

        letter-spacing:.15em;

        text-transform:uppercase;

        color:var(--primary);

    }

    .cat-titulo-destacado{

        display:block;

        font-size:2.8rem;

        line-height:1.05;

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

    }

    .section-title-divider-movil{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:10px;

        margin:18px 0 20px;

        color:var(--primary);

    }

    .section-title-divider-movil-linea{

        width:34px;

        height:2px;

        background:linear-gradient(90deg, rgba(11,109,255,0), rgba(11,109,255,.55));

    }

    .section-title-divider-movil-linea:last-child{

        background:linear-gradient(90deg, rgba(11,109,255,.55), rgba(11,109,255,0));

    }

    .section-title-divider-movil-diamante{

        font-size:.75rem;

    }

    .section-subtitle-movil{

        display:block;

        color:#555;

        font-size:1rem;

        font-weight:500;

        line-height:1.5;

        margin-bottom:36px;

    }

    .category-buttons{

        display:grid;

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

        justify-items:stretch;

        gap:16px;

    }

    .category-btn{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        text-align:center;

        width:100%;

        height:auto;

        padding:18px 16px 16px;

        gap:10px;

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

        backdrop-filter:blur(6px);

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

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

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

        transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;

    }

    .category-btn:active{

        transform:scale(.97);

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

    }

    .category-btn img{

        width:76px;

        height:76px;

        margin-bottom:0;

    }

    .category-btn-desc{

        display:none;

    }

    .category-btn-arrow{

        display:flex;

        align-items:center;

        justify-content:center;

        margin-top:0;

        width:46px;

        height:46px;

        border-radius:50%;

        background:rgba(11,109,255,.12);

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

    }

    .category-btn-arrow svg{

        width:18px;

        height:18px;

    }

    .category-btn-title{

        font-size:.9rem;

        font-weight:700;

        margin-bottom:0;

        line-height:1.3;

    }

    .category-btn:last-child{

        grid-column:1 / -1;

        max-width:none;

    }

    .category-btn:last-child img{

        width:auto;

        height:76px;

        margin-bottom:0;

    }

    /* PRODUCTOS */

    .products-grid{

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

        gap:14px;

    }

    .cp-card-image{

        height:160px;

        padding:18px;

    }

    .cp-card-image img{

        width:85%;

    }

    /* En touch no hay hover: las flechitas del carrusel de fotos quedan
       siempre visibles (más chicas) como respaldo del gesto de swipe. */
    .cp-card-image.cp-tiene-galeria .cp-galeria-flecha{

        opacity:1;
        width:26px;
        height:26px;

    }

    .cp-card-body{

        padding:16px 14px 18px;

    }

    .cp-category{

        padding:5px 10px;

        font-size:.75rem;

        margin-bottom:10px;

    }

    .cp-card-body h3{

        font-size:1.05rem;

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

    }

    .cp-ver-detalle{

        font-size:.82rem;

    }

    .cp-precio{

        font-size:1.05rem;

        margin-bottom:10px;

    }

    .cp-field{

        margin-bottom:10px;

    }

    .cp-field label{

        font-size:.8rem;

        margin-bottom:5px;

    }

    .cp-field select{

        height:38px;

        padding:0 10px;

        font-size:.82rem;

    }

    .cp-quantity button{

        width:36px;

        height:36px;

        font-size:1.1rem;

    }

    .cp-quantity span{

        font-size:.85rem;

    }

    .cp-btn{

        height:42px;

        font-size:.9rem;

    }

    /* MODAL DETALLE PRODUCTO */

    .pd-modal{

        width:94vw;
        max-width:560px;
        max-height:92vh;

    }

    .pd-layout{

        grid-template-columns:1fr;
        overflow-y:auto;

    }

    .pd-gallery{

        border-right:none;
        border-bottom:1px solid #EEF3F8;
        padding:20px;
        overflow:visible;

    }

    .pd-image-wrap{

        height:260px;

    }

    .pd-image{

        max-width:280px;
        max-height:260px;

    }

    .pd-body{

        padding:20px;
        overflow-y:visible;

    }

    /* COTIZACIÓN */

    /* CONTACTO */

    #contacto{

        padding:110px 0 60px;

        background:linear-gradient(180deg, rgba(244,249,255,.65) 0%, rgba(238,247,255,.65) 100%);

    }

    .contacto-wrap{

        grid-template-columns:1fr;

        gap:24px;

    }

    .contacto-info{

        min-width:0;

    }

    .contacto-info h2{

        font-size:1.6rem;

    }

    .contacto-info > p{

        font-size:.95rem;

        margin-bottom:20px;

    }

    .contacto-list{

        gap:10px;

    }

    .contacto-card{

        max-width:100%;

        padding:14px 16px;

        gap:12px;

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

        backdrop-filter:blur(10px);

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

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

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

    }

    .contacto-card:active{

        transform:translateY(-1px) scale(.98);
        border-color:rgba(11,109,255,.35);
        box-shadow:0 10px 22px rgba(11,109,255,.16);

    }

    .contacto-icon{

        width:40px;

        height:40px;

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

    }

    .contacto-icon svg{

        width:19px;

        height:19px;

    }

    .contacto-value{

        font-size:.94rem;

        /* La base tiene overflow-wrap:anywhere, que corta a mitad de palabra
           en vez de usar el <wbr> puesto después del "@" del correo. Se
           desactiva aquí para que el único punto de corte válido sea ese. */
        overflow-wrap:normal;
        word-break:normal;

    }

    .contacto-mascota{

        display:flex;
        align-items:flex-end;
        gap:12px;
        width:100%;
        margin-top:24px;

    }

    .contacto-mascota img{

        width:auto;
        /* Antes 160px fijo (130px en ≤430px): no había overflow/max-height
           recortando nada, pero al no depender del alto real del viewport,
           en teléfonos bajos el personaje quedaba grande respecto al
           espacio visible sin poder reducirse. dvh con fallback a vh. */
        height:clamp(118px, 5vw + 16vh, 180px);
        height:clamp(118px, 5vw + 16dvh, 180px);
        max-width:42%;
        max-height:38vh;
        object-fit:contain;
        flex-shrink:0;

    }

    .cristalino-mensaje-permanente{

        display:block;
        position:relative;
        flex:1 1 auto;
        min-width:0;
        margin-bottom:28px;
        background:rgba(255,255,255,.88);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        border:1.5px solid rgba(11,109,255,.28);
        border-radius:20px;
        box-shadow:0 14px 32px rgba(11,109,255,.16);
        padding:16px 18px 14px 16px;
        opacity:0;
        transform:translateY(8px);
        animation:cristalino-mensaje-in .6s ease forwards .15s;

    }

    .cristalino-mensaje-permanente::after{

        content:"";
        position:absolute;
        right:-8px;
        bottom:20px;
        width:16px;
        height:16px;
        background:rgba(255,255,255,.88);
        border-right:1.5px solid rgba(11,109,255,.28);
        border-bottom:1.5px solid rgba(11,109,255,.28);
        border-radius:0 0 3px 0;
        transform:rotate(-45deg);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);

    }

    .cristalino-mensaje-cerrar{

        position:absolute;
        top:8px;
        right:10px;
        border:none;
        background:none;
        font-size:.95rem;
        line-height:1;
        color:#8a93a3;
        cursor:pointer;
        padding:2px;

    }

    .cristalino-mensaje-principal{

        margin:0;
        font-size:1rem;
        line-height:1.4;
        font-weight:600;
        color:#1E1E1E;
        padding-right:14px;

    }

    .cristalino-mensaje-azul{

        color:#0B6DFF;

    }

    .cristalino-mensaje-divisor{

        display:block;
        height:1px;
        margin:10px 0;
        background:rgba(11,109,255,.18);

    }

    .cristalino-mensaje-secundario{

        margin:0;
        font-size:.74rem;
        line-height:1.45;
        font-weight:400;
        color:#5b6472;

    }

    @keyframes cristalino-mensaje-in{

        from{ opacity:0; transform:translateY(8px); }
        to{ opacity:1; transform:translateY(0); }

    }

}

/* ========================= */
/* CELULAR PEQUEÑO (360–430px aprox.) */
/* ========================= */

@media (max-width:430px){

    /* HERO */

    .hero-content h2.hero-title-mobile{

        font-size:1.95rem;

    }

    /* Tamaños de Cristalino (Hero y Categorías) y de sus bocadillos ya
       quedan resueltos por las fórmulas clamp() fluidas definidas arriba
       — escalan de forma continua, sin necesitar un valor fijo aparte
       para pantallas pequeñas. */

    .cristalino-seccion-burbuja{

        margin-bottom:24px;

    }

    .contacto-mascota img{

        max-width:38%;

    }

    .cristalino-mensaje-permanente{

        padding:13px 14px 12px 13px;

    }

    .cristalino-mensaje-principal{

        font-size:.88rem;
        padding-right:12px;

    }

    .cristalino-mensaje-secundario{

        font-size:.7rem;

    }

    /* CATEGORÍAS */

    .cat-titulo-destacado{

        font-size:2.3rem;

    }

    .category-buttons{

        gap:10px;

    }

    .category-btn{

        padding:14px 10px 12px;

        gap:8px;

    }

    .category-btn img{

        width:58px;

        height:58px;

        margin-bottom:0;

    }

    .category-btn-title{

        font-size:.82rem;

    }

    .category-btn-arrow{

        width:42px;

        height:42px;

        margin-top:0;

    }

    .category-btn-arrow svg{

        width:16px;

        height:16px;

    }

    .category-btn:last-child img{

        width:auto;

        height:58px;

    }

    /* PRODUCTOS */

    .products-grid{

        gap:10px;

    }

    .cp-card-image{

        height:130px;

        padding:12px;

    }

    .cp-card-image img{

        width:82%;

    }

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

        width:22px;
        height:22px;

    }

    .cp-card-body{

        padding:12px 10px 14px;

    }

    .cp-card-body h3{

        font-size:.95rem;

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

    }

    .cp-precio{

        font-size:.95rem;

    }

    .cp-field select{

        height:36px;

        font-size:.78rem;

        padding:0 8px;

    }

    .cp-quantity button{

        width:32px;

        height:32px;

        font-size:1rem;

    }

}