/* ================================================================
   LANGUIS — style.css
   Sistema de diseño: "taller cálido / editorial artesanal"
   Base blanco + negro cálido · acento terracota · neutros arena
   Logotipo: TAN Astoria Display (no se modifica)
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'Astoria';
    src: url('Astoria.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   VARIABLES
================================================================ */
:root {
    /* --- BASE --- */
    --negro:            #12100E;   /* negro cálido, no negro puro */
    --negro-800:        #1C1917;
    --negro-700:        #2A2521;
    --blanco:           #FFFFFF;
    --crema:            #FAF6F1;   /* fondo de secciones alternas */

    /* --- NEUTROS ARENA (reemplazan la escala gris azulada) --- */
    --arena-100:        #F3EDE6;
    --arena-200:        #E4DAD0;
    --arena-300:        #D2C4B6;
    --arena-400:        #B8AA9C;
    --arena-600:        #7A6E63;
    --arena-800:        #3A332D;

    /* Alias heredados: el resto de la hoja sigue usando --gris-* */
    --gris-100:         var(--arena-100);
    --gris-200:         var(--arena-200);
    --gris-400:         var(--arena-400);
    --gris-600:         var(--arena-600);
    --gris-800:         var(--arena-800);

    /* --- ACENTO CÁLIDO: TERRACOTA ---
       Cada variante tiene un uso fijo, verificado contra WCAG AA:
       --terracota          superficies, bordes, subrayados, íconos sobre oscuro (4.21:1 s/blanco → solo texto grande)
       --terracota-solido   relleno de botones con texto blanco encima (6.16:1) ✔ AA
       --terracota-dark     hover de los sólidos (7.57:1 con blanco) ✔ AA
       --terracota-texto    texto y links sobre fondo claro (6.16:1) ✔ AA
       --terracota-claro    texto e íconos sobre fondo oscuro (7.99:1) ✔ AA           */
    --terracota:        #C75B39;
    --terracota-solido: #A34527;
    --terracota-dark:   #8F3A22;
    --terracota-texto:  #A34527;
    --terracota-claro:  #E08A63;
    --terracota-velo:   rgba(199, 91, 57, 0.10);
    --terracota-halo:   rgba(199, 91, 57, 0.28);

    /* Compatibilidad: --acento = superficie. Para TEXTO usar las variantes. */
    --acento:           var(--terracota);
    --acento-dark:      var(--terracota-dark);

    /* --- SECUNDARIO: ÁMBAR (solo destacados sobre oscuro) --- */
    --ambar:            #E9A23B;
    --ambar-dark:       #C97F1E;

    /* --- FUNCIONAL --- */
    --wsp:              #25D366;
    --wsp-dark:         #1EBE57;

    /* --- TIPOGRAFÍA --- */
    --fuente-logo:      'Astoria', Georgia, serif;
    --fuente-titulos:   'Archivo', system-ui, -apple-system, sans-serif;
    --fuente-texto:     'Inter', system-ui, -apple-system, sans-serif;

    /* --- ESPACIADO (una sola escala para toda la hoja) --- */
    --e-1: 8px;
    --e-2: 16px;
    --e-3: 24px;
    --e-4: 40px;
    --e-5: 64px;
    --e-6: 96px;

    /* --- SOMBRAS CÁLIDAS (base marrón, no negro puro) --- */
    --sombra-sm: 0 1px 2px rgba(58,51,45,0.06), 0 2px 8px rgba(58,51,45,0.06);
    --sombra-md: 0 4px 16px rgba(58,51,45,0.10);
    --sombra-lg: 0 12px 40px rgba(58,51,45,0.14);

    /* --- RADIOS: una sola escala, esquina corta = taller, no SaaS --- */
    --radio-sm: 3px;
    --radio:    4px;
    --radio-lg: 8px;

    /* --- MOVIMIENTO --- */
    --transicion:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
    --nav-height: 70px;
    --nav-height-hero: 100dvh;
}

/* ================================================================
   RESET Y BASE
================================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--fuente-texto);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--arena-800);
    background: var(--blanco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: var(--fuente-texto);
    cursor: pointer;
}

/* ================================================================
   TIPOGRAFÍA
   Regla de la marca: el logotipo es un serif display de alto contraste
   (TAN Astoria). Todo lo demás va en un grotesco neutro para que el
   logo sea el protagonista y no compitan entre sí.
================================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    line-height: 1.15;
    color: var(--negro);
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Mayúsculas solo en los dos niveles superiores; de h3 para abajo
   se usa capitalización normal para no aplanar la jerarquía. */
h1, h2 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

h3, h4, h5, h6 {
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 600;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: var(--e-3); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin-bottom: var(--e-2); }
h4 { font-size: clamp(0.9rem, 2vw, 1.1rem); margin-bottom: var(--e-1); }

p {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    color: var(--arena-600);
    line-height: 1.7;
    max-width: 65ch;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Los párrafos centrados necesitan el margen automático para que
   el max-width no los empuje a la izquierda. */
.section-padding p,
.cta-content p { margin-left: auto; margin-right: auto; }

/* Precios y cantidades: cifras de ancho fijo para que las columnas
   del catálogo queden alineadas. */
.precio,
.producto-precio-grande,
.cantidad-num,
.carrito-total h3 {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ================================================================
   ACCESIBILIDAD — salto al contenido
================================================================ */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 3000;
    background: var(--blanco);
    color: var(--negro);
    padding: 12px 20px;
    border-radius: var(--radio);
    font-weight: 600;
    font-size: 0.9rem;
    transition: top 0.2s var(--ease-salida);
}

.skip-link:focus { top: 16px; }

/* ================================================================
   HEADER — HERO (solo index.html con clase .page-hero)
   Split: marca y promesa a la izquierda, producto real a la derecha.
================================================================ */
header.page-hero {
    background-color: var(--negro);
    color: var(--blanco);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 3vw, 32px) clamp(16px, 5vw, 56px) clamp(32px, 5vw, 56px);
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* --- Fondo: la plancha de corte ---
   Retícula de diseños anidados con cruces de registro y guías de corte:
   es la hoja de transfer que arman en Corel antes de imprimir, con
   varios pedidos en la misma plancha. Reemplaza al halo difuminado,
   que no salía de ningún lado y era el efecto por defecto de cualquier
   página generada. */
.hero-plancha {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.28;
}

/* Velo diagonal: hunde la retícula detrás del texto de la izquierda y
   la deja respirar en el centro, donde no compite con nada. */
header.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
        rgba(18, 16, 14, 0.88) 0%,
        rgba(18, 16, 14, 0.55) 46%,
        rgba(18, 16, 14, 0.90) 100%);
}

header.page-hero > *:not(.hero-plancha) { position: relative; z-index: 1; }

/* --- Nav del héroe: una sola línea en escritorio --- */
header.page-hero .nav-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    max-width: 1320px;
    padding: 0;
    flex-wrap: wrap;
}

header.page-hero .logo {
    align-items: flex-start;
    text-align: left;
    padding: 0;
    font-size: clamp(2.1rem, 5.5vw, 3.6rem);
    letter-spacing: 1px;
}

header.page-hero .nav-links { padding-bottom: 0; }

/* --- Grilla del héroe --- */
.hero-split {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-top: clamp(28px, 5vw, 56px);
}

.hero-texto { max-width: 38rem; }

/* El tamaño está calculado para que el titular entre en 2 líneas
   en escritorio dentro de esta columna. Si se alarga el texto hay
   que bajar el máximo, no dejar que caiga a 3 líneas. */
.hero-texto h1 {
    color: var(--blanco);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.05;
    margin-bottom: var(--e-3);
}

.hero-texto p {
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    max-width: 46ch;
    margin-bottom: var(--e-4);
}

.hero-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

/* --- Collage de producto --- */
/* El collage se limita también por altura: si solo se limitara por
   ancho, en pantallas bajas (portátiles de 720px) el héroe se pasaba
   del viewport y los botones quedaban por debajo del pliegue. */
.hero-collage {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: min(520px, 56dvh);
    margin-left: auto;
}

/* Bloque terracota que sostiene la composición por detrás */
.collage-bloque {
    position: absolute;
    inset: 14% 4% 18% 20%;
    background: var(--terracota);
    border-radius: var(--radio-lg);
}

.collage-img {
    position: absolute;
    overflow: hidden;
    border-radius: var(--radio-lg);
    box-shadow: 0 18px 50px rgba(18, 16, 14, 0.45);
    margin: 0;
    background: var(--arena-100);
}

.collage-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-img--grande { inset: 4% 26% 26% 0; }
.collage-img--media  { inset: 44% 0 8% 46%; }
.collage-img--chica  { inset: 6% 0 62% 62%; }

/* --- Secuencia de entrada del héroe ---
   Motivo: establecer jerarquía de lectura (titular → promesa → acción)
   la primera vez que se carga la página. No se repite. */
@keyframes heroEntrada {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-entra {
    opacity: 0;
    animation: heroEntrada 0.75s var(--ease-salida) forwards;
    animation-delay: var(--retardo, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .hero-entra { opacity: 1; animation: none; }
}

@media (max-width: 900px) {
    header.page-hero { min-height: auto; }

    .hero-split {
        grid-template-columns: 1fr;
        padding-top: clamp(20px, 5vw, 40px);
        gap: clamp(20px, 4vw, 40px);
    }

    .hero-texto { max-width: none; }

    .hero-collage {
        max-width: min(340px, 42dvh);
        margin: 0 auto;
        order: -1;
    }
}

/* En móvil casi todo el tráfico llega de Instagram: el objetivo es
   que el titular, la promesa y los dos botones entren sin scroll.
   Por eso acá se comprime el collage y el nav, no el texto. */
@media (max-width: 560px) {
    header.page-hero { padding-top: 16px; }

    header.page-hero .nav-container {
        justify-content: center;
        gap: 10px;
    }

    header.page-hero .logo {
        align-items: center;
        text-align: center;
        font-size: clamp(1.9rem, 11vw, 2.6rem);
    }

    header.page-hero .logo span { letter-spacing: 3px; margin-top: 4px; }

    header.page-hero .nav-links { gap: 14px; }

    .hero-collage { max-width: min(260px, 32dvh); }

    .hero-texto h1 { margin-bottom: var(--e-2); }
    .hero-texto p { margin-bottom: var(--e-3); font-size: 0.98rem; }

    .hero-acciones { gap: 10px; }

    .hero-acciones .btn-primary,
    .hero-acciones .btn-fantasma {
        flex: 1 1 100%;
        text-align: center;
        justify-content: center;
        padding: 14px 20px;
    }
}

/* ================================================================
   HEADER — COMPACTO (páginas internas)
================================================================ */
header.page-compact {
    background-color: var(--negro);
    color: var(--blanco);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 500;
    border-bottom: 1px solid #1a1a1a;
}

header.page-compact .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(12px, 3vw, 40px);
    min-height: var(--nav-height);
    height: auto;
    gap: clamp(6px, 1.5vw, 20px);
    flex-wrap: wrap;
}

header.page-compact .logo {
    font-size: clamp(1rem, 3vw, 2rem);
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    letter-spacing: 1px;
    flex-shrink: 0;
    white-space: nowrap;
}

header.page-compact .logo span {
    font-size: clamp(0.48rem, 1vw, 0.72rem) !important;
    letter-spacing: 2px;
    margin-top: 0 !important;
    white-space: nowrap;
}

header.page-compact .nav-links {
    gap: clamp(2px, 1vw, 20px);
    padding-bottom: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

header.page-compact .nav-links li a {
    font-size: clamp(0.58rem, 1.1vw, 0.85rem);
    letter-spacing: clamp(0.5px, 0.4vw, 4px);
    padding: 5px clamp(3px, 0.6vw, 10px);
    white-space: nowrap;
}

header.page-compact .search-container {
    margin-top: 0;
    flex: 1 1 100px;
    min-width: 70px;
    max-width: 220px;
    padding: 0;
}

header.page-compact .search-container input {
    max-width: 100%;
    width: 100%;
    font-size: 0.7rem;
    padding: 8px 10px;
}

/* Pantallas estrechas: buscador pasa a segunda fila */
@media (max-width: 560px) {
    header.page-compact .nav-container {
        padding: 0 12px;
        gap: 0;
        row-gap: 0;
    }

    header.page-compact .logo {
        font-size: clamp(0.95rem, 5vw, 1.3rem);
        padding: 12px 0;
    }

    header.page-compact .logo span {
        display: none !important;
    }

    header.page-compact .nav-links {
        gap: 2px;
    }

    header.page-compact .nav-links li a {
        font-size: 0.62rem;
        letter-spacing: 0.5px;
        padding: 5px 5px;
    }

    header.page-compact .search-container {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        border-top: 1px solid #1a1a1a;
        padding: 8px 12px;
        background: var(--negro);
        margin: 0;
    }

    header.page-compact .search-container input {
        max-width: 100%;
        border-color: rgba(255,255,255,0.2);
    }
}

/* ================================================================
   LOGO
================================================================ */
.logo {
    color: var(--blanco);
    font-family: var(--fuente-logo);
    font-weight: lighter;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    letter-spacing: 2px;
    padding: 15px clamp(10px, 4vw, 40px);
    font-size: clamp(3rem, 10vw, 8rem);
    text-decoration: none;
    transition: opacity var(--transicion);
}

.logo:hover { opacity: 0.85; }

.logo span {
    display: block;
    font-family: var(--fuente-titulos);
    font-weight: 500;
    /* Sobre fondo negro: variante clara, 7.99:1 */
    color: var(--terracota-claro);
    font-size: clamp(0.65rem, 1.8vw, 1rem) !important;
    letter-spacing: 5px;
    margin-top: 10px;
    text-transform: uppercase;
}

/* ================================================================
   NAVEGACIÓN
================================================================ */
.nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(15px, 4vw, 40px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: clamp(10px, 3vw, 40px);
    position: relative;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.nav-links li a {
    color: var(--blanco);
    text-decoration: none;
    font-family: var(--fuente-texto);
    font-weight: 500;
    font-size: clamp(0.72rem, 1.5vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: color var(--transicion);
    padding: 5px 10px;
    display: block;
    position: relative;
}

/* Sobre el header negro se usa siempre la variante clara (7.99:1) */
.nav-links li a:hover { color: var(--terracota-claro); }

.nav-links li a.active {
    color: var(--terracota-claro);
}

.linea-seguidora {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--acento);
    width: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

/* ================================================================
   BARRA DE BÚSQUEDA
================================================================ */
.search-container {
    margin-top: clamp(20px, 4vw, 40px);
    display: flex;
    justify-content: center;
    padding: 0 16px;
    width: 100%;
    max-width: 500px;
}

.search-container input {
    padding: 10px 15px;
    width: 100%;
    max-width: 300px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
    color: var(--blanco);
    font-family: var(--fuente-texto);
    outline: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    min-width: 0;
    border-radius: 4px;
    transition: border-color var(--transicion), background var(--transicion);
}

.search-container input:focus {
    border-color: var(--terracota);
    background: rgba(224, 138, 99, 0.12);
}

.search-container input::placeholder { color: rgba(255,255,255,0.4); }

/* ================================================================
   SECCIONES GENERALES
================================================================ */
.section-padding {
    padding: clamp(40px, 7vw, 80px) clamp(16px, 8%, 10%);
    text-align: center;
}

.section-padding h2,
.section-padding h3 {
    position: relative;
    display: inline-block;
    margin-bottom: 40px;
    padding-bottom: 16px;
}

/* Single decorative line under section headings */
.section-padding h2::after,
.section-padding h3::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background: var(--acento);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Suppress duplicate ::after line on headings that already have border-bottom decoration */
.titulo-categoria::after {
    display: none;
}

/* ================================================================
   ETIQUETA DE SECCIÓN
   Se usa como máximo dos veces en toda la home: si aparece en cada
   sección deja de señalar nada.
================================================================ */
.etiqueta {
    font-family: var(--fuente-titulos);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--terracota-texto);
    margin-bottom: var(--e-2);
}

/* ================================================================
   BANDA DE CONFIANZA
================================================================ */
.banda-confianza {
    background: var(--crema);
    border-bottom: 1px solid var(--arena-200);
    padding: clamp(32px, 5vw, 56px) clamp(16px, 5vw, 56px);
}

.confianza-lista {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 48px);
    max-width: 1320px;
    margin: 0 auto;
}

.confianza-item i {
    font-size: 1.15rem;
    color: var(--terracota-texto);
    margin-bottom: var(--e-2);
    display: block;
}

.confianza-item h3 {
    font-size: 0.98rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--negro);
}

.confianza-item p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--arena-600);
    margin: 0;
}

@media (max-width: 900px) {
    .confianza-lista { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .confianza-lista { grid-template-columns: 1fr; gap: var(--e-3); }
    .confianza-item { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; }
    .confianza-item i { margin-bottom: 0; padding-top: 3px; }
    .confianza-item h3 { grid-column: 2; }
    .confianza-item p { grid-column: 2; }
}

/* ================================================================
   SUBLIMACIÓN vs DTF
================================================================ */
.tecnicas-seccion {
    padding: clamp(56px, 8vw, 104px) clamp(16px, 5vw, 56px);
    max-width: 1320px;
    margin: 0 auto;
}

.tecnicas-intro { max-width: 52ch; margin-bottom: clamp(32px, 5vw, 56px); }

.tecnicas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

.tecnica-card {
    border: 1px solid var(--arena-200);
    border-radius: var(--radio);
    padding: clamp(24px, 3.5vw, 40px);
    background: var(--blanco);
    transition: background var(--transicion), transform var(--transicion);
}

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

/* La tarjeta destacada se distingue por superficie, no por una barra
   de color en el borde. */
.tecnica-card--destacada {
    background: var(--crema);
    border-color: var(--arena-300);
}

.tecnica-card--destacada h3 { color: var(--terracota-texto); }

.tecnica-card h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    margin-bottom: var(--e-1);
}

.tecnica-def {
    color: var(--arena-800);
    font-size: 0.98rem;
    margin-bottom: var(--e-3);
}

.tecnica-card ul {
    list-style: none;
    display: grid;
    gap: 12px;
    border-top: 1px solid var(--arena-200);
    padding-top: var(--e-3);
}

.tecnica-card li {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--arena-600);
}

.tecnica-card li strong {
    color: var(--negro);
    font-weight: 600;
}

@media (max-width: 760px) {
    .tecnicas-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   SOBRE NOSOTROS — editorial asimétrico
================================================================ */
.nosotros-seccion {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(28px, 6vw, 80px);
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 96px) clamp(16px, 5vw, 56px);
}

.nosotros-texto h2 { margin-bottom: var(--e-3); }

.nosotros-texto p { margin-bottom: var(--e-2); }

.nosotros-foto {
    margin: 0;
    position: relative;
    border-radius: var(--radio-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--arena-100);
}

.nosotros-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Velo terracota: unifica la temperatura del material heredado
   sin volver a fotografiar nada. */
.nosotros-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--terracota);
    mix-blend-mode: multiply;
    opacity: 0.08;
    pointer-events: none;
}

@media (max-width: 860px) {
    .nosotros-seccion { grid-template-columns: 1fr; }
    .nosotros-foto { aspect-ratio: 16 / 10; }
}

/* ================================================================
   EMPRESAS Y EQUIPOS (B2B)
================================================================ */
.empresas-seccion {
    background: var(--negro);
    color: var(--blanco);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    padding: clamp(48px, 8vw, 104px) clamp(16px, 5vw, 56px);
}

.empresas-contenido { max-width: 42rem; margin-left: auto; width: 100%; }

.empresas-seccion .etiqueta { color: var(--terracota-claro); }

.empresas-seccion h2 {
    color: var(--blanco);
    margin-bottom: var(--e-3);
}

.empresas-seccion p {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--e-4);
    max-width: 46ch;
}

.empresas-lista {
    list-style: none;
    max-width: 30rem;
    width: 100%;
}

.empresas-lista li {
    display: flex;
    align-items: baseline;
    gap: var(--e-2);
    padding: 14px 0;
    border-bottom: 1px solid var(--negro-700);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.86);
}

.empresas-lista li:first-child { border-top: 1px solid var(--negro-700); }

.empresas-lista span {
    font-family: var(--fuente-titulos);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--terracota-claro);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
    .empresas-seccion { grid-template-columns: 1fr; }
    .empresas-contenido { margin-left: 0; }
}

/* ================================================================
   PRUEBA SOCIAL
================================================================ */
.social-seccion {
    text-align: center;
    padding: clamp(48px, 7vw, 96px) clamp(16px, 5vw, 56px);
    background: var(--crema);
    border-top: 1px solid var(--arena-200);
}

.social-seccion p {
    margin: 0 auto var(--e-4);
    max-width: 48ch;
}

/* ================================================================
   OFERTAS DEL MES
   Antes era una franja negra a sangre con un carrusel panorámico de
   auto-avance: lenguaje de home de banco, ajeno al resto de la página.
   Ahora es una fila que se desplaza con el dedo, en el mismo crema
   editorial que las otras secciones. El formato vertical 4:5 es el que
   usan de verdad para armar las placas.
================================================================ */
.ofertas-seccion {
    background: var(--crema);
    border-top: 1px solid var(--arena-200);
    border-bottom: 1px solid var(--arena-200);
    padding: clamp(40px, 6vw, 80px) 0;

    --oferta-gutter: clamp(16px, 5vw, 56px);
    /* La cabecera vive dentro del contenedor de 1320px, pero la fila
       tiene que sangrar hasta el borde derecho para que se vea que
       sigue. El margen izquierdo se calcula para que ambas arranquen
       en la misma línea. */
    --oferta-margen: max(
        var(--oferta-gutter),
        calc((100% - 1320px) / 2 + var(--oferta-gutter))
    );
    /* Alto común de la fila: todas las placas miden lo mismo de alto y
       lo que varía es el ancho. Así conviven las verticales nuevas con
       las horizontales viejas sin recortar ninguna. */
    --oferta-alto: clamp(280px, 38vh, 420px);
}

.ofertas-cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-3);
    flex-wrap: wrap;
    max-width: 1320px;
    margin: 0 auto clamp(24px, 4vw, 40px);
    padding: 0 var(--oferta-gutter);
}

.ofertas-cabecera h2 { margin-bottom: 0; }

.ofertas-control {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.ofertas-control[hidden] { display: none; }

/* Reemplaza a los puntitos: además de marcar dónde estás, dice cuántas
   ofertas hay, que es la mitad de la información que faltaba. */
.ofertas-indice {
    font-family: var(--fuente-titulos);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--arena-600);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.ofertas-flechas { display: flex; gap: 6px; }

.ofertas-flecha {
    width: 38px;
    height: 38px;
    border: 1px solid var(--arena-300);
    background: transparent;
    color: var(--negro);
    border-radius: var(--radio);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion), opacity var(--transicion);
}

.ofertas-flecha:disabled { opacity: 0.32; cursor: default; }

@media (hover: hover) and (pointer: fine) {
    .ofertas-flecha:not(:disabled):hover {
        background: var(--arena-100);
        border-color: var(--arena-400);
    }
}

.ofertas-flecha:not(:disabled):active { transform: scale(0.94); }

/* En móvil se desliza con el dedo: las flechas no aportan y ocupan. */
@media (max-width: 700px) {
    .ofertas-flechas { display: none; }
}

.ofertas-fila {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px var(--oferta-gutter) 4px var(--oferta-margen);
    scroll-padding-left: var(--oferta-margen);
    scrollbar-width: none;
}

.ofertas-fila::-webkit-scrollbar { display: none; }

.ofertas-fila:focus-visible { outline: 2px solid var(--terracota); outline-offset: 2px; }

/* La tarjeta se ajusta al ancho de su imagen: es la propia <img> la que
   define la proporción. Antes el marco imponía 4:5 y recortaba por la
   mitad las placas horizontales que ya tenían cargadas. */
.oferta-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.oferta-marco {
    display: block;
    position: relative;
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--arena-100);
    border: 1px solid var(--arena-200);
    text-decoration: none;
    width: fit-content;
}

/* Dos topes y medidas automáticas: la imagen se acomoda entera dentro
   del alto y el ancho máximos, conservando su proporción. Ni se recorta
   (que era el problema con las placas apaisadas viejas) ni queda
   flotando entre bandas vacías. Las tarjetas se alinean por arriba, así
   que alturas distintas se leen como una fila pareja. */
.oferta-marco img {
    display: block;
    max-height: var(--oferta-alto);
    max-width: min(84vw, 700px);
    height: auto;
    width: auto;
    transition: transform 0.5s var(--ease-salida);
}

/* Con una sola oferta cargada, la fila no tiene nada más para mostrar
   al lado y el tope de altura (pensado para que quepan varias placas
   en la misma fila) la deja chica y con medio ancho de página vacío.
   Se sube el tope de alto y de ancho para que ocupe el espacio. Con
   dos o más ofertas esto no aplica: ahí el espacio vacío es lo que
   insinúa que hay más para deslizar. */
.oferta-card:only-child .oferta-marco img {
    max-height: clamp(280px, 52vh, 560px);
    max-width: min(90vw, 1000px);
}

@media (hover: hover) and (pointer: fine) {
    a.oferta-marco:hover img { transform: scale(1.04); }
}

.oferta-num {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-family: var(--fuente-titulos);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    color: var(--blanco);
    background: rgba(18, 16, 14, 0.72);
    padding: 5px 9px;
    border-radius: var(--radio-sm);
}

.oferta-pie {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--terracota-texto);
    transition: gap var(--transicion);
}

.oferta-pie i { font-size: 0.7rem; }

@media (hover: hover) and (pointer: fine) {
    .oferta-card:hover .oferta-pie { gap: 12px; }
}

/* --- Estado vacío --- */
.ofertas-vacio {
    text-align: center;
    padding: 0 clamp(16px, 5vw, 40px);
    max-width: 44rem;
    margin: 0 auto;
}

.ofertas-vacio p { margin: 0 auto var(--e-3); }

.ofertas-vacio[hidden] { display: none; }

/* ================================================================
   PERSONALIZACIÓN CTA
================================================================ */
.personalizacion-cta {
    background-color: var(--negro);
    padding: clamp(50px, 8vw, 90px) clamp(16px, 5vw, 20px);
    text-align: center;
    border-top: 1px solid var(--negro-700);
    border-bottom: 1px solid var(--negro-700);
    position: relative;
    overflow: hidden;
}

/* Halo terracota apenas perceptible: da temperatura al bloque negro
   sin introducir un degradado visible. */
.personalizacion-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(199,91,57,0.16), transparent 70%);
    pointer-events: none;
}

.personalizacion-cta > * { position: relative; }

.cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: var(--fuente-titulos);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--blanco);
    margin-bottom: 20px;
}

.cta-content p {
    font-family: var(--fuente-texto);
    /* Mismo patrón que .hero-texto p y .empresas-seccion p: blanco con
       alfa, no un gris frío suelto — así el texto sobre negro sigue
       siendo parte de la familia cálida en vez de un gris de sistema. */
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    margin-bottom: 40px;
    line-height: 1.8;
}

.btn-cta-wsp {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Relleno sólido + texto blanco = 6.16:1 ✔ AA con texto chico en negrita */
    background-color: var(--terracota-solido);
    color: var(--blanco);
    padding: clamp(14px, 2vw, 18px) clamp(24px, 4vw, 40px);
    border-radius: var(--radio);
    text-decoration: none;
    font-family: var(--fuente-texto);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    text-transform: uppercase;
    transition: all var(--transicion);
    text-align: center;
}

.btn-cta-wsp i { font-size: 1.3rem; flex-shrink: 0; }

.btn-cta-wsp:hover {
    /* No usar --terracota acá: con texto blanco chico da 4.21:1, no
       cumple AA. -dark sí (7.57:1) y de paso el hover queda más oscuro
       que el reposo, la progresión esperada. */
    background-color: var(--terracota-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px var(--terracota-halo);
}

.btn-cta-wsp:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 4px 12px var(--terracota-halo);
}

/* ================================================================
   CONTACTO
================================================================ */
.contacto-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 4vw, 40px);
    margin-top: 50px;
    width: 100%;
    justify-items: center;
}

.contacto-item {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 20px;
    border-radius: var(--radio);
    text-align: center;
    transition: transform var(--transicion), background var(--transicion);
}

.contacto-item:hover {
    transform: translateY(-6px);
    background: var(--gris-100);
}

.contacto-item i {
    font-size: 2rem;
    color: var(--acento);
    margin: 0 auto 12px;
    display: block;
    text-align: center;
    width: 100%;
}

.contacto-item h3,
.contacto-item h4 {
    font-family: var(--fuente-titulos);
    font-size: 0.9rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--negro);
    /* Reset overrides from .section-padding h3 */
    display: block;
    position: static;
    padding-bottom: 0;
    text-align: center;
}

.contacto-item h3::after,
.contacto-item h4::after {
    display: none;
}

.contacto-item p {
    font-size: 0.9rem;
    color: var(--gris-600);
    margin: 0;
}

/* ================================================================
   PÁGINA CATÁLOGO — PAGE HEADER COMPACTO
================================================================ */
.page-header-compacto {
    background: var(--negro);
    color: var(--blanco);
    padding: clamp(24px, 4vw, 40px) clamp(16px, 6%, 8%);
    text-align: center;
    border-bottom: 1px solid #1a1a1a;
}

.page-header-compacto h1 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--blanco);
    margin-bottom: 8px;
}

.page-header-compacto p {
    /* Sobre fondo negro: variante clara, 7.99:1 */
    color: var(--terracota-claro);
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* ================================================================
   GRILLA DE PRODUCTOS
================================================================ */
#contenedor-productos {
    display: block;
    width: 100%;
}

.seccion-catalogo {
    display: block;
    width: 100%;
    clear: both;
    margin-bottom: 70px;
}

.titulo-categoria {
    display: inline-block;
    border-bottom: 3px solid var(--acento);
    padding-bottom: 10px;
    margin-bottom: 36px;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--negro);
    text-align: center;
    width: auto;
}

.flex-productos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 3vw, 28px);
    width: 100%;
}

/* ================================================================
   TARJETAS DE PRODUCTO
================================================================ */
.producto-card {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    text-align: center;
    transition: transform var(--transicion), box-shadow var(--transicion);
    flex: 0 1 clamp(140px, 28%, 260px);
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid var(--gris-200);
}

.producto-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sombra-md);
}

.producto-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Contenedor imagen con skeleton */
.producto-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--gris-100);
}

.producto-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* El scale necesitaba su propia transición: sin esto el zoom del
       hover saltaba de golpe en lugar de acompañar la tarjeta. */
    transition: opacity 0.4s ease, transform 0.5s var(--ease-salida);
}

.producto-img-wrap img.img-loaded { opacity: 1; }

.producto-card:hover .producto-img-wrap img { transform: scale(1.05); }

.producto-card-body {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.producto-card h4 {
    font-size: clamp(0.78rem, 1.5vw, 0.95rem);
    font-weight: 600;
    overflow-wrap: break-word;
    line-height: 1.3;
    margin-bottom: 0;
    color: var(--negro);
}

.producto-card .precio {
    font-weight: 700;
    color: var(--negro);
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    font-family: var(--fuente-titulos);
}

.producto-card .btn-add {
    margin-top: auto;
}

/* ================================================================
   SKELETON LOADING
================================================================ */
.skeleton-card {
    background: var(--blanco);
    border-radius: var(--radio);
    border: 1px solid var(--gris-200);
    flex: 0 1 clamp(140px, 28%, 260px);
    min-width: 0;
    overflow: hidden;
}

.skeleton-img {
    aspect-ratio: 1/1;
    background: linear-gradient(90deg, var(--arena-100) 25%, var(--arena-200) 50%, var(--arena-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
}

.skeleton-body {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-line {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--arena-100) 25%, var(--arena-200) 50%, var(--arena-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
}

.skeleton-line.short { width: 50%; }
.skeleton-line.medium { width: 70%; margin: 0 auto; }
.skeleton-line.btn { height: 36px; border-radius: 5px; margin-top: 4px; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade-in de productos */
.producto-fade-in {
    animation: fadeInUp 0.4s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   BOTONES
================================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--negro);
    color: var(--blanco);
    border: 2px solid var(--negro);
    padding: 15px 30px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    transition: all var(--transicion);
    text-decoration: none;
    border-radius: var(--radio);
    font-family: var(--fuente-texto);
}

/* Variante de relleno terracota: la que va sobre fondo oscuro,
   donde el botón negro sería invisible. Blanco sobre #A34527 = 6.16:1 */
.btn-primary--acento {
    background-color: var(--terracota-solido);
    border-color: var(--terracota-solido);
    color: var(--blanco);
}

.btn-primary--acento:hover {
    /* Mismo motivo que .btn-cta-wsp:hover: --terracota con texto blanco
       chico no cumple AA. */
    background-color: var(--terracota-dark);
    border-color: var(--terracota-dark);
}

/* Botón secundario de contorno: solo para fondos oscuros */
.btn-fantasma {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1.5px solid rgba(255, 255, 255, 0.38);
    border-radius: var(--radio);
    color: var(--blanco);
    background: transparent;
    font-family: var(--fuente-texto);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transicion);
}

.btn-fantasma:hover {
    border-color: var(--blanco);
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.btn-fantasma:active { transform: translateY(0) scale(0.985); }

.btn-primary:hover {
    background-color: var(--terracota-solido);
    border-color: var(--terracota-solido);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--terracota-halo);
}

.btn-primary:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 2px 8px var(--terracota-halo);
}

/* Botón de guardar del Admin/Login: era azul de Bootstrap, ajeno al
   sistema. Pasa a negro cálido — es el botón primario del sistema en
   cualquier otro lado del sitio, así que un guardado usa la misma
   jerarquía visual que "confirmar" en el resto de la página. */
.btn-save {
    display: inline-block;
    background-color: var(--negro);
    color: white !important;
    padding: 12px 25px;
    border-radius: var(--radio-lg);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transicion);
    border: none;
    cursor: pointer;
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
}

.btn-save:hover {
    background-color: var(--negro-800);
    transform: translateY(-2px);
    box-shadow: var(--sombra-sm);
}

/* Rojo cálido, no el rojo de Bootstrap: se mantiene distinto del resto
   de la paleta a propósito. El color en una acción destructiva es
   información, no decoración — cancelar/eliminar tienen que seguir
   leyéndose como la opción peligrosa aunque el resto del sitio sea
   cálido. */
.btn-cancel {
    flex: 1;
    background: #B3261E;
    color: white;
    padding: 15px;
    border: none;
    border-radius: var(--radio-lg);
    font-weight: bold;
    cursor: pointer;
    font-family: var(--fuente-texto);
    transition: background var(--transicion);
}

.btn-cancel:hover { background: #8C1D17; }

.btn-whatsapp {
    background-color: #25d366;
    color: white;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: all var(--transicion);
    width: 100%;
    max-width: 380px;
    font-family: var(--fuente-texto);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-whatsapp:hover {
    background-color: #1ebe57;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}

.btn-add {
    font-family: var(--fuente-texto);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: clamp(0.62rem, 1.1vw, 0.75rem);
    width: 100%;
    padding: 11px 8px;
    background: var(--negro);
    color: var(--blanco);
    border: none;
    border-radius: 0;
    transition: background var(--transicion);
    cursor: pointer;
}

.btn-add:hover { background: var(--terracota-solido); }
.btn-add:active { background: var(--terracota-dark); }

/* Mismo rojo cálido que .btn-cancel: wash tenue en reposo, sólido al
   pasar el mouse. Coherente con la regla de que lo destructivo se
   mantiene en su propia familia de color en todo el sitio. */
.btn-delete {
    background: rgba(179, 38, 30, 0.08);
    color: #B3261E;
    border: none;
    padding: 8px 12px;
    border-radius: var(--radio);
    cursor: pointer;
    transition: all var(--transicion);
    font-size: 0.85rem;
    font-family: var(--fuente-texto);
}

.btn-delete:hover {
    background: #B3261E;
    color: white;
}

/* ================================================================
   MAIN
================================================================ */
main {
    background-color: var(--blanco);
    position: relative;
    z-index: 2;
    flex: 1 0 auto;
}

/* ================================================================
   FOOTER
================================================================ */
footer {
    background-color: var(--negro);
    color: var(--blanco);
    text-align: center;
    padding: 20px 16px;
    width: 100%;
    border-top: 1px solid var(--negro-700);
    flex-shrink: 0;
}

footer p {
    font-size: 0.85rem;
    color: var(--gris-400);
    margin-bottom: 6px;
}

footer a {
    color: var(--gris-400);
    font-size: 0.78rem;
    text-decoration: none;
    transition: color var(--transicion);
    display: inline-block;
    margin-top: 6px;
}

footer a:hover { color: var(--terracota-claro); }

/* ================================================================
   BARRA DE PEDIDO
   Reemplaza el botón burbuja flotante. Solo existe cuando hay algo
   en el carrito: si está vacío no ocupa pantalla ni dice nada.
   Informa cuánto llevás y cuánto sale, en vez de solo señalar.
================================================================ */
.barra-pedido {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 20px;
    background: var(--negro);
    color: var(--blanco);
    border-radius: var(--radio);
    box-shadow: 0 10px 34px rgba(18, 16, 14, 0.34);
    font-family: var(--fuente-texto);
    font-size: 0.88rem;
    text-decoration: none;
    /* Estado oculto. Se anima solo transform y opacity: ambas
       corren en la GPU y no disparan layout. */
    transform: translateY(140%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.16s cubic-bezier(0.4, 0, 1, 1),
                opacity   0.16s linear;
}

/* Entrada más lenta que la salida: entrar es un aviso, salir es
   quitarse del camino. */
.barra-pedido.pedido-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.24s var(--ease-salida),
                opacity   0.18s linear;
}

.barra-pedido-items { color: rgba(255, 255, 255, 0.72); white-space: nowrap; }

.barra-pedido-items strong {
    color: var(--blanco);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.barra-pedido-sep {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.barra-pedido-total {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 1rem;
    /* Cifras de ancho fijo: sin esto el total salta de ancho cada vez
       que cambia una cifra. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.barra-pedido-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--terracota-solido);
    color: var(--blanco);
    padding: 10px 16px;
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background var(--transicion);
}

.barra-pedido-cta i { font-size: 0.72rem; }

@media (hover: hover) and (pointer: fine) {
    /* Mismo motivo: --terracota con texto blanco chico no cumple AA. */
    .barra-pedido:hover .barra-pedido-cta { background: var(--terracota-dark); }
}

.barra-pedido:active { transform: translateY(0) scale(0.985); }

/* Al sumar un producto la barra da un pulso corto: confirma que el
   clic llegó, sin mover nada de sitio. */
@keyframes pedidoPulso {
    0%   { box-shadow: 0 10px 34px rgba(18,16,14,.34), 0 0 0 0 var(--terracota-halo); }
    100% { box-shadow: 0 10px 34px rgba(18,16,14,.34), 0 0 0 12px rgba(199,91,57,0); }
}

.barra-pedido.pedido-pulso { animation: pedidoPulso 0.45s ease-out; }

@media (max-width: 640px) {
    .barra-pedido {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 10px 10px 10px 16px;
        gap: 10px;
    }
    .barra-pedido-items { font-size: 0.8rem; }
    .barra-pedido-cta { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .barra-pedido { transition: opacity 0.15s linear; transform: none; }
    .barra-pedido.pedido-visible { transform: none; }
    .barra-pedido.pedido-pulso { animation: none; }
}

/* ================================================================
   CARRITO FLOTANTE — versión anterior, se conserva por si alguna
   página todavía la usa. La home y el catálogo ya migraron a
   .barra-pedido.
================================================================ */
.cart-float {
    position: fixed;
    bottom: 28px;
    right: 20px;
    width: 58px;
    height: 58px;
    background-color: var(--negro);
    border: 2px solid var(--acento);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(18,16,14,0.35);
    z-index: 2000;
    transition: all var(--transicion);
}

.cart-float:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px var(--terracota-halo);
    background-color: var(--negro-800);
}

.cart-float:active { transform: scale(0.96); }

.cart-icon-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#icon-display {
    font-size: 22px;
    color: var(--blanco);
}

/* Badge de cantidad */
.cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--acento);
    color: var(--negro);
    font-size: 13px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-titulos);
    transform: scale(0);
    /* Desaceleración exponencial en vez de rebote elástico: el rebote
       hace que el badge parezca de goma en lugar de aparecer. */
    transition: transform 0.28s var(--ease-salida);
    pointer-events: none;
    border: 2px solid var(--negro);
    line-height: 1;
}

.cart-badge.badge-visible {
    transform: scale(1);
}

.cart-badge.badge-bump {
    animation: badgeBump 0.3s ease;
}

@keyframes badgeBump {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ================================================================
   ANIMACIONES REVEAL
================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease-salida), transform 0.6s var(--ease-salida);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Escalonado interno: los ítems de una lista entran uno detrás de
   otro para que la vista los recorra en orden, en vez de aparecer
   los cuatro de golpe. Máximo 6 pasos para no alargar la espera. */
.reveal .confianza-item,
.reveal .tecnica-card,
.reveal .empresas-lista li,
.reveal .contacto-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-salida), transform 0.5s var(--ease-salida);
}

.reveal.active .confianza-item,
.reveal.active .tecnica-card,
.reveal.active .empresas-lista li,
.reveal.active .contacto-item {
    opacity: 1;
    transform: translateY(0);
}

.reveal.active .confianza-item:nth-child(1),
.reveal.active .tecnica-card:nth-child(1),
.reveal.active .empresas-lista li:nth-child(1),
.reveal.active .contacto-item:nth-child(1) { transition-delay: 60ms; }

.reveal.active .confianza-item:nth-child(2),
.reveal.active .tecnica-card:nth-child(2),
.reveal.active .empresas-lista li:nth-child(2),
.reveal.active .contacto-item:nth-child(2) { transition-delay: 130ms; }

.reveal.active .confianza-item:nth-child(3),
.reveal.active .empresas-lista li:nth-child(3),
.reveal.active .contacto-item:nth-child(3) { transition-delay: 200ms; }

.reveal.active .confianza-item:nth-child(4),
.reveal.active .empresas-lista li:nth-child(4),
.reveal.active .contacto-item:nth-child(4) { transition-delay: 270ms; }

.reveal.active .empresas-lista li:nth-child(5) { transition-delay: 340ms; }
.reveal.active .empresas-lista li:nth-child(6) { transition-delay: 410ms; }

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal .confianza-item,
    .reveal .tecnica-card,
    .reveal .empresas-lista li,
    .reveal .contacto-item {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }
}

/* ================================================================
   CARRITO (página Carrito.html)
================================================================ */
#carrito-con-items, #carrito-vacio {
    max-width: 860px;
    margin: 36px auto;
    background: var(--blanco);
    padding: clamp(20px, 4vw, 36px);
    border-radius: 12px;
    box-shadow: var(--sombra-sm);
    border: 1px solid var(--gris-200);
}

.carrito-tabla-container {
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--gris-200);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 400px;
}

th {
    background-color: var(--gris-100);
    color: var(--gris-800);
    padding: 14px 12px;
    border-bottom: 2px solid var(--gris-200);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    font-family: var(--fuente-titulos);
}

td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--gris-100);
    vertical-align: middle;
    font-size: 0.9rem;
}

tr:last-child td { border-bottom: none; }

.carrito-total {
    text-align: right;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--gris-200);
}

.carrito-total h3 {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: var(--negro);
}

.checkout-container {
    text-align: center;
    margin-top: 28px;
}

.checkout-container small {
    display: block;
    margin-top: 12px;
    color: var(--gris-600);
    font-size: 0.82rem;
}

/* ================================================================
   FORMULARIO ADMIN
================================================================ */
.admin-form {
    background: var(--gris-100);
    padding: clamp(20px, 4vw, 36px);
    border-radius: 14px;
    box-shadow: var(--sombra-sm);
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    border: 1px solid var(--gris-200);
}

/* Las 4 secciones del Admin (Configuración, Carrusel, Cargar producto,
   Productos en venta) son hermanas bajo el h1 del panel: todas van en
   h2, no una mezcla de h2/h3, para no saltear un nivel de encabezado. */
.admin-form h2 {
    font-size: 1.2rem;
    margin-bottom: 24px;
    color: var(--negro);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gris-800);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--gris-200);
    border-radius: 8px;
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
    transition: border-color var(--transicion);
    outline: none;
    max-width: 100%;
    background: var(--blanco);
    color: var(--gris-800);
}

.form-group textarea {
    min-height: 90px;
    resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--terracota-velo);
}

.form-hint {
    font-size: 0.78rem;
    color: var(--gris-600);
    margin-top: 5px;
    display: block;
}

/* Tags de talles y colores */
.tags-input-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 2px solid var(--gris-200);
    border-radius: 8px;
    background: var(--blanco);
    min-height: 50px;
    transition: border-color var(--transicion);
}

.tags-input-wrap:focus-within {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--terracota-velo);
}

.tag-item {
    background: var(--negro);
    color: var(--blanco);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tag-item .tag-remove {
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0.7;
    transition: opacity var(--transicion);
    background: none;
    border: none;
    color: white;
    padding: 0;
    line-height: 1;
}

.tag-item .tag-remove:hover { opacity: 1; }

.tags-input-field {
    border: none !important;
    outline: none !important;
    padding: 4px 6px !important;
    min-width: 80px;
    flex: 1;
    font-size: 0.85rem;
    box-shadow: none !important;
}

/* Imágenes múltiples admin */
.multi-img-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.multi-img-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gris-200);
}

.multi-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.multi-img-thumb .remove-img {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(18,16,14,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* Checkbox destacado */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--acento);
}

.botones-container {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* Confirmar un producto usa el acento de marca, no el verde de
   Bootstrap: terracota es la respuesta visual a "esto vale la pena
   hacer clic" en todo el resto del sitio, guardar un producto no es
   una excepción. */
.botones-container .btn-save {
    flex: 1;
    min-width: 120px;
    background: var(--terracota-solido);
    padding: 15px;
    border: none;
    border-radius: var(--radio-lg);
    font-weight: 700;
    font-size: 0.9rem;
}

.botones-container .btn-save:hover { background: var(--terracota-dark); }

/* ================================================================
   ARCHIVO PERSONALIZADO
================================================================ */
input[type="file"] {
    display: none;
}

.custom-file-upload {
    display: block;
    border: 2px dashed var(--terracota);
    border-radius: var(--radio-lg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background: var(--terracota-velo);
    transition: all var(--transicion);
    /* Texto chico sobre fondo claro: variante de texto, 6.16:1 */
    color: var(--terracota-texto);
    font-weight: 500;
    font-size: 0.9rem;
}

.custom-file-upload:hover {
    background: rgba(199, 91, 57, 0.16);
    border-color: var(--terracota-dark);
}

/* ================================================================
   SELECT CATEGORÍA ADMIN
================================================================ */
.select-diseno {
    position: relative;
    width: 100%;
}

#prod-categoria {
    width: 100% !important;
    padding: 12px 40px 12px 15px !important;
    border-radius: 8px !important;
    border: 2px solid var(--gris-200) !important;
    background-color: var(--blanco) !important;
    font-size: 0.9rem !important;
    color: var(--gris-800) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    transition: border-color var(--transicion);
    max-width: 100%;
    font-family: var(--fuente-texto) !important;
}

#prod-categoria:focus {
    border-color: var(--acento) !important;
    box-shadow: 0 0 0 3px var(--terracota-velo) !important;
}

.select-diseno::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--acento);
    pointer-events: none;
}

/* ================================================================
   TABLA ADMIN
================================================================ */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.admin-table th, .admin-table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gris-200);
    vertical-align: middle;
}

.admin-table th {
    background-color: var(--gris-100);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--gris-800);
}

.admin-table tbody tr:hover { background: var(--crema); }

.admin-list > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    border: 1px solid var(--gris-200);
    background: var(--blanco);
    box-shadow: var(--sombra-sm);
}

/* ================================================================
   LOGIN
================================================================ */
.login-box {
    max-width: 420px;
    margin: 80px auto;
    padding: clamp(24px, 5vw, 44px);
    background: var(--blanco);
    border-radius: 14px;
    box-shadow: var(--sombra-lg);
    text-align: center;
    border: 1px solid var(--gris-200);
}

.login-box h2 {
    margin-bottom: 28px;
    font-size: 1.5rem;
}

.login-box input {
    width: 100%;
    padding: 13px 15px;
    margin: 8px 0;
    border: 2px solid var(--gris-200);
    border-radius: 8px;
    max-width: 100%;
    font-family: var(--fuente-texto);
    font-size: 0.9rem;
    transition: border-color var(--transicion);
    outline: none;
}

.login-box input:focus {
    border-color: var(--acento);
}

/* ================================================================
   PÁGINA DE PRODUCTO INDIVIDUAL
================================================================ */
.producto-page-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 4%, 32px);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--gris-600);
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--gris-600);
    text-decoration: none;
    transition: color var(--transicion);
}

.breadcrumb a:hover { color: var(--terracota-texto); }

.breadcrumb span { color: var(--gris-400); }

.producto-detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 5vw, 60px);
    align-items: start;
    margin-bottom: 60px;
}

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

/* Galería */
.producto-galeria {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.galeria-principal {
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--gris-100);
    border: 1px solid var(--gris-200);
}

.galeria-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.galeria-principal:hover img { transform: scale(1.03); }

.galeria-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.galeria-thumb {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transicion);
    background: var(--gris-100);
    flex-shrink: 0;
}

.galeria-thumb:hover,
.galeria-thumb.thumb-active { border-color: var(--acento); }

.galeria-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info del producto */
.producto-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.producto-info h1 {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--negro);
    margin-bottom: 0;
}

.producto-precio-grande {
    font-family: var(--fuente-titulos);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--negro);
}

.producto-descripcion {
    color: var(--gris-600);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* Selector de opción (talle/color/cantidad) */
.selector-grupo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selector-grupo label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--negro);
}

.opciones-btn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.opcion-btn {
    padding: 8px 16px;
    border: 2px solid var(--gris-200);
    border-radius: 6px;
    background: var(--blanco);
    color: var(--negro);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transicion);
    font-family: var(--fuente-texto);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.opcion-btn:hover { border-color: var(--negro); }

.opcion-btn.selected {
    background: var(--negro);
    color: var(--blanco);
    border-color: var(--negro);
}

.color-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all var(--transicion);
    padding: 0;
}

.color-btn.selected {
    border-color: var(--negro);
    transform: scale(1.15);
}

/* Cantidad */
.cantidad-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 2px solid var(--gris-200);
    border-radius: 8px;
    width: fit-content;
    overflow: hidden;
}

.cantidad-btn {
    width: 40px;
    height: 44px;
    background: var(--gris-100);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background var(--transicion);
    font-family: var(--fuente-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--negro);
    letter-spacing: 0;
    text-transform: none;
    font-weight: normal;
}

.cantidad-btn:hover { background: var(--gris-200); }

.cantidad-num {
    width: 50px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    outline: none;
    padding: 0;
    background: var(--blanco);
    font-family: var(--fuente-titulos);
    color: var(--negro);
}

/* Botón añadir al carrito en producto page */
.btn-add-producto {
    width: 100%;
    padding: 18px;
    background: var(--negro);
    color: var(--blanco);
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transicion);
    font-family: var(--fuente-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-add-producto:hover {
    background: var(--terracota-solido);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--terracota-halo);
}

.btn-add-producto:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 10px var(--terracota-halo);
}

/* Info de envío */
.envio-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--gris-100);
    border-radius: 8px;
    border: 1px solid var(--gris-200);
}

.envio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--gris-600);
}

.envio-item i { color: var(--acento); font-size: 1rem; width: 18px; }

/* Especificaciones */
.especificaciones-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.especificaciones-tabla td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--gris-100);
}

.especificaciones-tabla td:first-child {
    font-weight: 600;
    color: var(--negro);
    width: 40%;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

/* Productos relacionados */
.relacionados-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--gris-200);
}

.relacionados-section h2 {
    font-size: 1.3rem;
    margin-bottom: 28px;
    text-align: center;
}

/* ================================================================
   TOAST NOTIFICATION
================================================================ */
#languis-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background-color: var(--negro-800);
    color: var(--blanco);
    /* Sin barra de color a la izquierda: contorno completo, más sobrio. */
    border: 1px solid rgba(224, 138, 99, 0.32);
    padding: 14px 22px;
    border-radius: var(--radio);
    font-family: var(--fuente-texto);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    box-shadow: 0 8px 28px rgba(18,16,14,0.3);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#languis-toast.toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ================================================================
   ACCESIBILIDAD
================================================================ */
:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 480px) {
    .flex-productos { gap: 10px; }
    .producto-card {
        flex: 0 1 calc(50% - 6px);
        min-width: 0;
    }
    .skeleton-card {
        flex: 0 1 calc(50% - 6px);
    }
    .btn-add { font-size: 0.58rem; letter-spacing: 1px; padding: 9px 4px; }

    .cart-float { width: 52px; height: 52px; right: 12px; bottom: 20px; }
    #icon-display { font-size: 19px; }

    .section-padding { padding: 32px 16px; }

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

    #carrito-con-items, #carrito-vacio { margin: 16px 12px; padding: 16px; }
    .btn-whatsapp { font-size: 0.9rem; padding: 14px 20px; }

    .admin-form { padding: 16px; }
    .botones-container { flex-direction: column; }
    .login-box { margin: 32px 16px; }

    #languis-toast { font-size: 0.78rem; padding: 11px 14px; bottom: 80px; }

    .page-header-compacto { padding: 18px 16px; }
    
    .producto-detalle-grid { gap: 20px; }
    .galeria-thumb { width: 56px; height: 56px; }
}

@media (min-width: 481px) and (max-width: 767px) {
    .producto-card { flex: 0 1 calc(50% - 10px); }
    .skeleton-card { flex: 0 1 calc(50% - 10px); }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .contacto-container { grid-template-columns: repeat(2, 1fr); }

    header.page-compact .search-container { max-width: 220px; }
}

@media (min-width: 1025px) {
    .producto-card { flex: 0 1 clamp(200px, 24%, 260px); }
}

@media (min-width: 1441px) {
    .section-padding { padding: 80px 12%; }
    .flex-productos { gap: 32px; }
    .producto-card { flex: 0 1 260px; }
    .contacto-container { grid-template-columns: repeat(4, 1fr); }
}