/* ==========================================================================
   FreshTec — capa visual de la tienda

   Se carga después de style.css y manda sobre él: acá viven la paleta y los
   componentes nuevos (portada, tarjetas, listados y ficha de producto).
   ========================================================================== */

:root{
    /* Marca */
    --marca:#4f46e5;
    --marca-fuerte:#4338ca;
    --marca-suave:#eef2ff;

    /* Ofertas y urgencia */
    --acento:#ea580c;
    --acento-suave:#fff7ed;

    /* Estados */
    --exito:#15803d;
    --exito-suave:#f0fdf4;
    --alerta:#b45309;

    /* Tinta y superficies */
    --tinta:#0f172a;
    --tinta-media:#475569;
    --tinta-suave:#94a3b8;
    --fondo:#f5f6fa;
    --superficie:#fff;
    --borde:#e5e7eb;

    --sombra:0 1px 3px rgba(15,23,42,.08);
    --sombra-alta:0 12px 28px -12px rgba(15,23,42,.28);

    --radio:14px;
    --radio-chico:10px;
    --ancho:1200px;
}

body{
    background:var(--fondo);
    color:var(--tinta);
}

.container{
    max-width:var(--ancho);
    padding:28px 20px 10px;
}

/* ==========================================================================
   Cinta de avisos (guincha)
   ========================================================================== */

.guincha{
    overflow:hidden;
    background:var(--marca-fuerte);
    color:#fff;
    padding:9px 0;
    font-size:14px;
    font-weight:600;
    letter-spacing:.01em;
}

.guincha-pista{
    display:flex;
    width:max-content;
    animation:guincha-correr 22s linear infinite;
}

/* min-width:100% evita el hueco cuando el aviso es más corto que la pantalla:
   cada copia ocupa al menos el ancho completo, así el bucle nunca se ve vacío. */
.guincha-texto{
    flex:0 0 auto;
    min-width:100%;
    padding-right:64px;
    white-space:nowrap;
}

/* Con dos copias iguales, correr media pista deja la segunda justo donde
   estaba la primera: el salto al reiniciar es invisible. */
@keyframes guincha-correr{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.guincha:hover .guincha-pista{
    animation-play-state:paused;
}

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

    .guincha-pista{
        animation:none;
    }

    /* Sin movimiento, la segunda copia sobra y el aviso se centra. */
    .guincha-texto{
        padding-right:0;
        text-align:center;
        white-space:normal;
    }

    .guincha-texto[aria-hidden="true"]{
        display:none;
    }
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera{
    position:sticky;
    top:0;
    z-index:60;
    background:var(--superficie);
    border-bottom:1px solid var(--borde);
    padding:14px 24px;
    box-shadow:var(--sombra);
}

/* Un <header> dentro del contenido es solo un encabezado de sección: no
   hereda nada de la barra superior (ni el amarillo que traía style.css). */
.container header{
    position:static;
    background:none;
    border:0;
    box-shadow:none;
    padding:0;
}

.nav{
    max-width:var(--ancho);
    margin:auto;
    gap:18px;
}

.logo{
    color:var(--marca);
    font-size:25px;
    font-weight:800;
    letter-spacing:-.02em;
    white-space:nowrap;
}

.menu-toggle{
    color:var(--marca);
}

.search input{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--borde);
    border-radius:999px;
    background:var(--fondo);
    font-size:15px;
    transition:.2s;
}

.search input:focus{
    outline:none;
    border-color:var(--marca);
    background:var(--superficie);
    box-shadow:0 0 0 4px var(--marca-suave);
}

.cart a,
.carrito-enlace{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    background:var(--marca);
    color:#fff !important;
    font-weight:600;
    white-space:nowrap;
    transition:.2s;
}

.cart a:hover{
    background:var(--marca-fuerte);
}

.carrito--pulso{
    animation:pulso .5s ease;
}

@keyframes pulso{
    0%{transform:scale(1)}
    40%{transform:scale(1.08)}
    100%{transform:scale(1)}
}

/* Menú de categorías */

.categories-menu{
    background:var(--superficie);
    border-bottom:1px solid var(--borde);
    box-shadow:none;
}

.categories-menu ul{
    max-width:var(--ancho);
}

.categories-menu li{
    padding:13px 18px;
    font-size:15px;
    font-weight:500;
    color:var(--tinta-media);
}

.categories-menu li:hover{
    background:var(--marca-suave);
    color:var(--marca);
}

.categories-menu .submenu{
    border-radius:0 0 var(--radio-chico) var(--radio-chico);
    box-shadow:var(--sombra-alta);
    padding:8px 0;
}

/* ==========================================================================
   Piezas comunes
   ========================================================================== */

.boton{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
    border:1px solid transparent;
    border-radius:var(--radio-chico);
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    transition:.2s;
    text-align:center;
}

.boton--principal{
    background:var(--marca);
    color:#fff;
}

.boton--principal:hover{
    background:var(--marca-fuerte);
    transform:translateY(-1px);
}

.boton--claro{
    background:var(--marca-suave);
    color:var(--marca-fuerte);
    border-color:#c7d2fe;
}

.boton--claro:hover{
    background:#e0e7ff;
}

.boton--suave{
    background:var(--superficie);
    color:var(--tinta-media);
    border-color:var(--borde);
}

.boton--suave:hover{
    border-color:var(--tinta-suave);
}

.boton--grande{
    padding:15px 26px;
    font-size:16px;
}

.boton--listo{
    background:var(--exito) !important;
    color:#fff !important;
}

.boton[disabled]{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}

.etiqueta{
    display:inline-block;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
}

.etiqueta--oferta{
    background:var(--acento);
    color:#fff;
}

.etiqueta--nuevo{
    background:var(--marca);
    color:#fff;
}

.etiqueta--grande{
    font-size:15px;
    padding:8px 14px;
}

.precio-antes{
    color:var(--tinta-suave);
    text-decoration:line-through;
    font-size:14px;
}

.miga{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    font-size:13px;
    color:var(--tinta-suave);
}

.miga a{
    color:var(--tinta-media);
}

.miga a:hover{
    color:var(--marca);
}

.chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}

.chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 14px;
    border:1px solid var(--borde);
    border-radius:999px;
    background:var(--superficie);
    font-size:14px;
    color:var(--tinta-media) !important;
    transition:.2s;
}

.chip:hover{
    border-color:var(--marca);
    color:var(--marca) !important;
    background:var(--marca-suave);
}

.chip-cuenta{
    color:var(--tinta-suave);
    font-size:12px;
}

.chips--compacto{
    margin:16px 0 0;
}

/* ==========================================================================
   Portada — oferta destacada
   ========================================================================== */

.portada-hero{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:40px;
    margin-bottom:34px;
    padding:44px;
    border-radius:22px;
    background:linear-gradient(130deg,#4f46e5 0%,#6d28d9 55%,#7c3aed 100%);
    color:#fff;
    box-shadow:var(--sombra-alta);
}

.hero-pill{
    display:inline-block;
    padding:7px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(4px);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
}

.hero-titulo{
    margin:16px 0 18px;
    font-size:36px;
    line-height:1.15;
    letter-spacing:-.02em;
}

.hero-precio{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:12px;
}

.hero-precio .precio-antes{
    color:rgba(255,255,255,.7);
    font-size:18px;
}

.hero-monto{
    font-size:42px;
    font-weight:800;
    letter-spacing:-.03em;
}

.hero-ahorro{
    margin-top:6px;
    color:#fde68a;
    font-weight:600;
}

.hero-acciones{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:26px;
}

.portada-hero .boton--principal{
    background:#fff;
    color:var(--marca-fuerte);
}

.portada-hero .boton--principal:hover{
    background:#f8fafc;
}

.portada-hero .boton--claro{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.35);
    color:#fff;
}

.portada-hero .boton--claro:hover{
    background:rgba(255,255,255,.26);
}

.hero-urgencia{
    margin-top:16px;
    font-weight:600;
    color:#fed7aa;
}

.hero-foto{
    display:block;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    aspect-ratio:4/3;
}

.hero-foto img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:18px;
    transition:.35s;
}

.hero-foto:hover img{
    transform:scale(1.04);
}

/* Rotador de destacados: las fichas comparten lugar y solo se ve una. */
.hero-rotador{
    margin-bottom:34px;
}

.hero-rotador .portada-hero{
    margin-bottom:0;
}

.portada-hero[hidden]{
    display:none;
}

/* Entrada de la ficha que toma el turno: se desliza desde la derecha y va
   apareciendo, para que el cambio se note sin tocar el diseño de la ficha. */
@keyframes hero-entrada{
    from{
        opacity:0;
        transform:translateX(34px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.portada-hero--entra{
    animation:hero-entrada .45s ease-out both;
}

/* La foto entra apenas después que el texto, así el bloque no se desplaza
   todo de una pieza. */
.portada-hero--entra .hero-foto{
    animation:hero-entrada .55s .08s ease-out both;
}

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

    .portada-hero--entra,
    .portada-hero--entra .hero-foto{
        animation:none;
    }
}

.hero-puntos{
    display:flex;
    justify-content:center;
    gap:9px;
    margin-top:14px;
}

.hero-punto{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:999px;
    background:#cbd5e1;
    cursor:pointer;
    transition:.25s;
}

.hero-punto:hover{
    background:#94a3b8;
}

.hero-punto--activo{
    width:26px;
    background:var(--marca-fuerte);
}

/* ==========================================================================
   Portada — motivos de compra
   ========================================================================== */

.garantias{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin-bottom:38px;
}

.garantia{
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px 18px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
}

.garantia-icono{
    font-size:24px;
    line-height:1;
}

.garantia strong{
    display:block;
    font-size:14px;
}

.garantia span{
    font-size:13px;
    color:var(--tinta-media);
}

.garantia a{
    color:var(--marca) !important;
    text-decoration:underline;
}

/* ==========================================================================
   Secciones y carruseles
   ========================================================================== */

.seccion{
    margin-bottom:44px;
}

.seccion-cabecera{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
}

.seccion-titulo{
    font-size:24px;
    letter-spacing:-.02em;
}

.seccion-bajada{
    margin-top:4px;
    color:var(--tinta-media);
    font-size:14px;
}

.seccion-controles{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
}

.seccion-vermas{
    color:var(--marca) !important;
    font-weight:600;
    font-size:14px;
}

.seccion-vermas:hover{
    text-decoration:underline !important;
}

.carrusel-flechas{
    display:flex;
    gap:8px;
}

.carrusel-flecha{
    width:38px;
    height:38px;
    border:1px solid var(--borde);
    border-radius:50%;
    background:var(--superficie);
    color:var(--tinta-media);
    font-size:15px;
    cursor:pointer;
    transition:.2s;
}

.carrusel-flecha:hover{
    border-color:var(--marca);
    color:var(--marca);
    background:var(--marca-suave);
}

.carrusel{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,1fr);
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 4px 14px;
    scrollbar-width:thin;
}

.carrusel > *{
    scroll-snap-align:start;
}

.rejilla{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:18px;
    margin-bottom:40px;
}

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */

.tarjeta{
    display:flex;
    flex-direction:column;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:var(--radio);
    overflow:hidden;
    transition:.25s;
}

.tarjeta:hover{
    transform:translateY(-4px);
    border-color:#c7d2fe;
    box-shadow:var(--sombra-alta);
}

.tarjeta-foto{
    position:relative;
    display:block;
    background:#fff;
    aspect-ratio:1/1;
    overflow:hidden;
}

.tarjeta-foto img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:14px;
    transition:.35s;
}

.tarjeta:hover .tarjeta-foto img{
    transform:scale(1.05);
}

.tarjeta-etiquetas{
    position:absolute;
    top:10px;
    left:10px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.tarjeta-velo{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.55);
    color:#fff;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:14px;
}

.tarjeta-cuerpo{
    display:flex;
    flex-direction:column;
    gap:7px;
    padding:15px 16px 17px;
    flex:1;
}

.tarjeta-nombre{
    font-size:14px;
    font-weight:500;
    line-height:1.4;
    color:var(--tinta-media);
    /* Dos líneas fijas: así todas las tarjetas alinean su precio */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:2.8em;
}

.tarjeta-nombre a:hover{
    color:var(--marca) !important;
}

.tarjeta-precio{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:9px;
}

.precio-ahora{
    font-size:24px;
    font-weight:800;
    color:var(--tinta);
    letter-spacing:-.02em;
}

.tarjeta-ahorro{
    font-size:13px;
    font-weight:600;
    color:var(--acento);
}

.tarjeta-cuotas{
    font-size:13px;
    color:var(--tinta-media);
}

.tarjeta-stock{
    font-size:13px;
    font-weight:500;
}

.tarjeta-stock--ok{
    color:var(--exito);
}

.tarjeta-stock--bajo{
    color:var(--acento);
    font-weight:600;
}

.tarjeta-stock--cero{
    color:var(--tinta-suave);
}

.tarjeta-cuerpo .boton{
    margin-top:auto;
    width:100%;
}

.tarjeta--agotada .tarjeta-foto img{
    filter:grayscale(.6);
}

/* ==========================================================================
   Categorías
   ========================================================================== */

.categorias-rejilla{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:14px;
}

.categoria-ficha{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:20px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
    transition:.22s;
}

.categoria-ficha:hover{
    border-color:var(--marca);
    background:var(--marca-suave);
    transform:translateY(-3px);
}

.categoria-nombre{
    font-weight:700;
    color:var(--tinta);
}

.categoria-cuenta{
    font-size:13px;
    color:var(--tinta-media);
}

/* ==========================================================================
   Listados (búsqueda y categoría)
   ========================================================================== */

.categoria-portada,
.listado-cabecera{
    margin-bottom:20px;
}

.listado-titulo{
    font-size:30px;
    letter-spacing:-.02em;
}

.listado-cuenta{
    margin-top:6px;
    color:var(--tinta-media);
    font-size:14px;
}

.listado-barra{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px;
    margin-bottom:22px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
}

.listado-barra .listado-cuenta{
    margin:0;
}

.orden{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--tinta-media);
}

.orden select{
    padding:9px 12px;
    border:1px solid var(--borde);
    border-radius:var(--radio-chico);
    background:var(--superficie);
    font-family:inherit;
    font-size:14px;
    color:var(--tinta);
    cursor:pointer;
}

.orden select:focus{
    outline:none;
    border-color:var(--marca);
    box-shadow:0 0 0 3px var(--marca-suave);
}

/* Estado vacío */

.vacio{
    padding:64px 26px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
    text-align:center;
    margin-bottom:40px;
}

.vacio-icono{
    font-size:46px;
    margin-bottom:14px;
}

.vacio h3{
    margin-bottom:8px;
}

.vacio p{
    color:var(--tinta-media);
    margin-bottom:22px;
}

.vacio-categorias{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin-bottom:24px;
}

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.ficha{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:36px;
    padding:28px;
    margin-bottom:26px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
}

.ficha-visor{
    position:relative;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:#fff;
    aspect-ratio:1/1;
    overflow:hidden;
}

.ficha-visor img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:22px;
}

.ficha-visor .etiqueta{
    position:absolute;
    top:16px;
    left:16px;
}

.visor-flecha{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:1px solid var(--borde);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:var(--tinta-media);
    font-size:17px;
    cursor:pointer;
    transition:.2s;
}

.visor-flecha:hover{
    background:#fff;
    color:var(--marca);
    border-color:var(--marca);
}

.visor-flecha--izq{ left:12px; }
.visor-flecha--der{ right:12px; }

.ficha-miniaturas{
    display:flex;
    gap:10px;
    margin-top:14px;
    overflow-x:auto;
    padding-bottom:4px;
}

.miniatura{
    flex:0 0 74px;
    height:74px;
    padding:0;
    border:2px solid var(--borde);
    border-radius:var(--radio-chico);
    background:#fff;
    cursor:pointer;
    overflow:hidden;
    transition:.2s;
}

.miniatura img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:5px;
}

.miniatura:hover{
    border-color:var(--tinta-suave);
}

.miniatura--activa{
    border-color:var(--marca);
}

/* Columna de compra */

.ficha-meta{
    font-size:13px;
    color:var(--tinta-suave);
    margin-bottom:10px;
}

.ficha-meta a{
    color:var(--marca) !important;
}

.ficha-titulo{
    font-size:27px;
    line-height:1.25;
    letter-spacing:-.02em;
    margin-bottom:18px;
}

.ficha-precio{
    padding:18px 20px;
    border-radius:var(--radio);
    background:var(--fondo);
    margin-bottom:16px;
}

.ficha-precio-antes{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}

.ficha-monto{
    font-size:40px;
    font-weight:800;
    letter-spacing:-.03em;
    line-height:1.1;
}

.ficha-ahorro{
    margin-top:6px;
    color:var(--acento);
    font-weight:700;
}

.ficha-cuotas{
    margin-top:8px;
    color:var(--tinta-media);
    font-size:14px;
}

.ficha-stock{
    margin-bottom:18px;
}

.senal{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
}

.senal--ok{
    background:var(--exito-suave);
    color:var(--exito);
}

.senal--baja{
    background:var(--acento-suave);
    color:var(--acento);
}

.senal--cero{
    background:#f1f5f9;
    color:var(--tinta-media);
}

.ficha-acciones{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:22px;
}

.ficha-acciones .boton{
    flex:1 1 190px;
}

.cantidad{
    display:flex;
    align-items:center;
    border:1px solid var(--borde);
    border-radius:var(--radio-chico);
    overflow:hidden;
    flex:0 0 auto;
}

.cantidad-boton{
    width:42px;
    height:48px;
    border:none;
    background:var(--fondo);
    font-size:19px;
    color:var(--tinta-media);
    cursor:pointer;
    transition:.2s;
}

.cantidad-boton:hover{
    background:var(--marca-suave);
    color:var(--marca);
}

.cantidad input{
    width:52px;
    height:48px;
    border:none;
    text-align:center;
    font-size:16px;
    font-family:inherit;
    font-weight:600;
    color:var(--tinta);
    -moz-appearance:textfield;
}

.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.cantidad input:focus{
    outline:none;
}

.ficha-garantias{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:11px;
    padding:18px 20px;
    border:1px dashed var(--borde);
    border-radius:var(--radio);
    font-size:14px;
    color:var(--tinta-media);
}

.ficha-garantias a{
    color:var(--marca) !important;
    text-decoration:underline;
}

/* Descripción y detalles */

.ficha-detalle{
    display:grid;
    grid-template-columns:1.6fr .9fr;
    gap:22px;
    margin-bottom:44px;
}

.panel{
    padding:26px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
}

.panel-titulo{
    font-size:19px;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--borde);
}

.panel-texto{
    color:var(--tinta-media);
    line-height:1.75;
    overflow-wrap:anywhere;
}

.panel-texto img{
    max-width:100%;
    height:auto;
    border-radius:var(--radio-chico);
}

.datos{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px 18px;
    font-size:14px;
}

.datos dt{
    color:var(--tinta-suave);
}

.datos dd{
    color:var(--tinta);
    font-weight:500;
    text-align:right;
}

/* ==========================================================================
   Avisos de formulario (contacto)
   ========================================================================== */

.aviso{
    margin:0 0 22px;
    padding:14px 18px;
    border-radius:var(--radio-chico);
    border-left:3px solid;
    font-size:15px;
    line-height:1.5;
}

.aviso--exito{
    border-color:var(--exito);
    background:var(--exito-suave);
    color:var(--exito);
}

.aviso--error{
    border-color:var(--acento);
    background:var(--acento-suave);
    color:var(--alerta);
}

.aviso a{
    color:inherit;
    font-weight:600;
}

.contact-captcha{
    margin:22px 0 0;
}

/* Trampa para bots: fuera de la vista, pero sin display:none ni
   visibility:hidden, que son justo lo que los bots aprendieron a saltarse. */
.campo-trampa{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* ==========================================================================
   Pie
   ========================================================================== */

.footer{
    margin-top:60px;
    background:#111827;
}

.footer-container{
    max-width:var(--ancho);
}

/* ==========================================================================
   Barra de compra fija (solo móvil, en la ficha de producto)
   ========================================================================== */

.barra-compra{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    display:none;
    align-items:center;
    gap:14px;
    padding:10px 14px;
    /* Deja libre la franja del gesto de inicio en los teléfonos actuales */
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--superficie);
    border-top:1px solid var(--borde);
    box-shadow:0 -8px 24px -12px rgba(15,23,42,.35);
    transform:translateY(115%);
    transition:transform .25s ease;
}

.barra-compra.visible{
    transform:none;
}

.barra-compra-precio{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.barra-compra-monto{
    font-size:20px;
    font-weight:800;
    letter-spacing:-.02em;
}

.barra-compra .boton{
    flex:1;
    padding:14px 18px;
}

/* ==========================================================================
   Pantallas chicas
   ========================================================================== */

@media(max-width:1000px){

    .portada-hero{
        grid-template-columns:1fr;
        gap:26px;
        padding:30px;
    }

    .hero-foto{
        order:-1;
        aspect-ratio:16/10;
    }

    .hero-titulo{
        font-size:28px;
    }

    .hero-monto{
        font-size:34px;
    }

    .garantias{
        grid-template-columns:repeat(2,1fr);
    }

    .ficha{
        grid-template-columns:1fr;
        gap:24px;
    }

    .ficha-detalle{
        grid-template-columns:1fr;
    }
}

@media(max-width:768px){

    /* Cabecera compacta: en el teléfono ocupa dos filas (marca/carrito y
       buscador), así que cada píxel de alto se nota. */
    .cabecera{
        padding:9px 14px;
    }

    .nav{
        gap:10px;
    }

    .logo{
        font-size:21px;
    }

    .menu-toggle{
        /* Área de toque cómoda para el pulgar */
        min-width:44px;
        min-height:44px;
        display:flex !important;
        align-items:center;
        justify-content:center;
        margin-left:-8px;
    }

    .nav{
        flex-wrap:wrap;
    }

    /* Base 100%: el buscador siempre baja a su propia fila. Dejarlo al criterio
       del ancho sobrante hace que se desborde cuando el carrito se encoge. */
    .search{
        order:3;
        flex:1 0 100%;
        min-width:0;
    }

    .search input{
        padding:10px 14px;
        font-size:16px; /* menos de 16px hace que iOS haga zoom al enfocar */
    }

    .cart a{
        padding:9px 14px;
    }

    .container{
        padding:18px 15px 6px;
    }

    /* Menú de categorías desplegado */
    .categories-menu.active{
        max-height:72vh;
        overflow-y:auto;
        box-shadow:var(--sombra-alta);
    }

    /* El toque abre el submenú desde cualquier punto de la fila: el relleno
       pasa del <li> a la etiqueta, que es la que lleva el manejador. */
    .categories-menu li{
        padding:0;
        color:var(--tinta);
        font-weight:600;
    }

    .categories-menu .group-label{
        padding:15px 16px;
        justify-content:space-between;
    }

    .categories-menu .submenu{
        background:var(--fondo);
    }

    .categories-menu .submenu li{
        padding:0;
        font-weight:400;
    }

    .categories-menu .submenu li a{
        display:block;
        padding:13px 16px 13px 28px;
    }

    .portada-hero{
        padding:20px;
        border-radius:18px;
    }

    /* Un título de catálogo puede tener 12 palabras: en móvil se corta a
       tres líneas para que el precio y los botones queden a la vista. */
    .hero-titulo{
        font-size:21px;
        margin:14px 0 14px;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .hero-foto{
        aspect-ratio:16/11;
    }

    .hero-precio{
        gap:10px;
    }

    .hero-acciones{
        margin-top:18px;
        gap:10px;
    }

    .barra-compra{
        display:flex;
    }

    /* Que la barra fija no tape el pie ni el último bloque */
    body.con-barra-compra .footer-bottom{
        padding-bottom:72px;
    }

    .hero-acciones .boton{
        flex:1 1 100%;
    }

    .seccion-cabecera{
        align-items:flex-start;
    }

    /* Con el pulgar se desliza: las flechas sobran */
    .carrusel-flechas{
        display:none;
    }

    .carrusel{
        grid-auto-columns:minmax(165px,72%);
        gap:12px;
    }

    .rejilla{
        grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
        gap:12px;
    }

    .tarjeta-foto img{
        padding:10px;
    }

    .tarjeta-cuerpo{
        padding:12px 13px 14px;
    }

    .precio-ahora{
        font-size:20px;
    }

    .seccion-titulo{
        font-size:20px;
    }

    .listado-titulo{
        font-size:24px;
    }

    .ficha{
        padding:16px;
    }

    .ficha-titulo{
        font-size:22px;
    }

    .ficha-monto{
        font-size:32px;
    }

    .ficha-acciones .boton{
        flex:1 1 100%;
    }

    .cantidad{
        width:100%;
        justify-content:space-between;
    }

    .cantidad input{
        flex:1;
    }

    .panel{
        padding:18px;
    }

    .garantias{
        grid-template-columns:1fr;
        gap:10px;
    }

    .listado-barra{
        padding:12px 14px;
    }

    .orden{
        width:100%;
        justify-content:space-between;
    }

    .miga{
        font-size:12px;
        margin-bottom:14px;
    }
}

/* Teléfonos angostos: el carrito deja solo el ícono y el número, y el botón
   de la tarjeta se queda en una línea. */
@media(max-width:480px){

    .carrito-texto{
        display:none;
    }

    .texto-largo{
        display:none;
    }

    .cart a{
        padding:9px 12px;
        gap:5px;
    }

    .logo{
        font-size:19px;
    }

    .rejilla{
        grid-template-columns:repeat(2,1fr);
    }

    .carrusel{
        grid-auto-columns:minmax(150px,76%);
    }

    .tarjeta-cuerpo .boton{
        padding:11px 12px;
        font-size:14px;
    }

    .barra-compra-monto{
        font-size:18px;
    }
}