/*
 * main.css — Hoja de estilos global del tema SticTag
 * Versión: 2.0
 * ÚNICA fuente de verdad: reemplaza todos los <style> inline de cada template.
 *
 * ÍNDICE
 * 1.  Variables CSS
 * 2.  Reset / Base
 * 3.  Tipografía global
 * 4.  Top Banner
 * 5.  Header & Navegación
 * 6.  Menú Móvil
 * 7.  Popup Modal
 * 8.  Barra Envío Gratis
 * 9.  Hero Section (front-page)
 * 10. Category Grid
 * 11. Featured Products / Product Cards
 * 12. Benefits Section
 * 13. How It Works
 * 14. Social Proof / Reviews
 * 15. Comparison Table
 * 16. CTA Section
 * 17. Footer
 * 18. WooCommerce — Estilos Globales
 * 19. Páginas de Contenido (legal, info)
 * 20. Utilidades
 * 21. Responsive (breakpoints unificados)
 */

/* ============================================================
   1. VARIABLES CSS
   ============================================================ */

:root {
    /* Paleta principal */
    --rainbow-pink:   #FF69B4;
    --rainbow-coral:  #FFB5A0;
    --rainbow-orange: #FFB366;
    --rainbow-yellow: #FFF4B0;
    --rainbow-mint:   #A0E7E5;

    --primary:        #FF69B4;
    --primary-light:  #FFB5D9;
    --primary-dark:   #E85A9F;

    --secondary:      #FFF4B0;
    --accent:         #FFB366;
    --accent-bright:  #FFA64D;

    --cream:          #FFF9E6;
    --cream-dark:     #FFF0CC;
    --cloud-cream:    #FFF9E6;

    --white:          #FFFFFF;
    --text-dark:      #4A4A4A;
    --text-medium:    #6B6B6B;
    --text-light:     #9B9B9B;
    --success:        #7FD8BE;
    --error:          #E85A5A;

    /* Tipografías */
    --font-display:   'Fredoka', sans-serif;
    --font-body:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Sombras */
    --shadow-soft:    0 4px 20px rgba(255, 105, 180, 0.12);
    --shadow-medium:  0 8px 30px rgba(255, 105, 180, 0.20);
    --shadow-strong:  0 16px 50px rgba(255, 105, 180, 0.25);
    --shadow-hover:   0 20px 60px rgba(255, 105, 180, 0.30);

    /* Radios */
    --radius-sm:   12px;
    --radius-md:   20px;
    --radius-lg:   30px;
    --radius-full: 9999px;

    /* Easing */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Layout */
    --section-padding: 5rem 2rem;
    --container-max:   1400px;
    --nav-height:      70px;
    --banner-height:   50px;
    --header-full-height: 120px; /* banner + nav */
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

body {
    font-family:  var(--font-body);
    color:        var(--text-dark);
    line-height:  1.65;
    background:   var(--white);
    overflow-x:   hidden;
    padding-bottom: 58px;
}

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

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

ul,
ol {
    list-style: none;
}

button {
    cursor:      pointer;
    border:      none;
    background:  none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size:   inherit;
}

/* Skip link accesibilidad */
.skip-link {
    position:   absolute;
    top:        -40px;
    left:       0;
    background: var(--primary);
    color:      var(--white);
    padding:    0.5rem 1rem;
    z-index:    99999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* ============================================================
   3. TIPOGRAFÍA GLOBAL
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    line-height: 1.2;
    color:       var(--text-dark);
}

.section-title {
    font-family:   var(--font-display);
    font-size:     2.5rem;
    text-align:    center;
    margin-bottom: 1rem;
    color:         var(--text-dark);
}

.section-title .highlight {
    background:            linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:       text;
}

.section-subtitle {
    font-size:     1.1rem;
    text-align:    center;
    color:         var(--text-medium);
    margin-bottom: 3rem;
    max-width:     600px;
    margin-left:   auto;
    margin-right:  auto;
}

/* ============================================================
   4. TOP BANNER
   ============================================================ */

.top-banner {
    background:  linear-gradient(135deg, var(--rainbow-pink) 0%, var(--rainbow-coral) 50%, var(--rainbow-orange) 100%);
    color:       var(--white);
    padding:     0.65rem 1rem;
    font-size:   0.85rem;
    font-weight: 600;
    position:    relative;
    z-index:     1002;
    overflow:    hidden;
    min-height:  50px;
}

.banner-content {
    max-width:       var(--container-max);
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             2rem;
    flex-wrap:       wrap;
}

.banner-message {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    transition:  opacity 0.5s ease;
}

.banner-message.hidden {
    display: none;
}

.banner-icon {
    font-size: 1.2rem;
}

.banner-divider {
    width:      2px;
    height:     18px;
    background: rgba(255, 255, 255, 0.3);
}

.banner-cta-btn {
    padding:       0.45rem 1.2rem;
    background:    var(--white);
    color:         var(--rainbow-pink);
    border-radius: var(--radius-full);
    font-weight:   700;
    font-size:     0.8rem;
    white-space:   nowrap;
    transition:    all 0.3s var(--ease);
}

.banner-cta-btn:hover {
    transform:  scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   5. HEADER & NAVEGACIÓN
   ============================================================ */

.header {
    background:  var(--white);
    box-shadow:  var(--shadow-soft);
    position:    sticky;
    top:         0;
    z-index:     1000;
    transition:  all 0.3s var(--ease);
}

.header.scrolled {
    box-shadow: var(--shadow-medium);
}

.nav-container {
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0.75rem 2rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2rem;
}

/* Logo */
.logo {
    flex-shrink: 0;
    transition:  transform 0.3s var(--ease);
}

.logo:hover {
    transform: scale(1.05);
}

.logo-image {
    height: 55px !important;
    width:  auto !important;
}

/* Menú principal */
.nav-menu {
    display:     flex;
    list-style:  none;
    gap:         0.3rem;
    align-items: center;
    margin:      0;
    padding:     0;
}

.nav-item {
    position: relative;
}

.nav-item.has-dropdown {
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.nav-item > a {
    text-decoration: none;
    color:           var(--text-dark);
    font-weight:     600;
    font-size:       0.9rem;
    transition:      all 0.3s var(--ease);
    padding:         0.6rem 1rem;
    border-radius:   var(--radius-sm);
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    white-space:     nowrap;
}

.nav-item > a:hover {
    background: var(--cream);
    color:      var(--primary);
}

/* Ítem destacado PACKS AHORRO */
.nav-item.highlight-menu > a {
    background:    linear-gradient(135deg, var(--accent), var(--accent-bright));
    color:         var(--white);
    padding:       0.65rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight:   700;
    font-size:     0.85rem;
    box-shadow:    0 4px 12px rgba(255, 179, 102, 0.25);
    animation:     pulse-badge 3s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.nav-item.highlight-menu > a:hover {
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 179, 102, 0.35);
    animation:  none;
}

/* Dropdown */
.dropdown-arrow {
    font-size:  0.75rem;
    transition: transform 0.3s var(--ease);
}

.nav-item.has-dropdown.dropdown-open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position:      absolute;
    top:           100%;
    left:          0;
    background:    var(--white);
    min-width:     260px;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-strong);
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(0);
    transition:    opacity 0.25s ease, visibility 0.25s ease;
    list-style:    none;
    padding:       0.75rem 0;
    margin:        0;
    z-index:       100;
    border:        1px solid var(--cream-dark);
}

.nav-item.has-dropdown.dropdown-open .dropdown-menu {
    opacity:    1;
    visibility: visible;
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display:     flex;
    align-items: center;
    gap:         0.85rem;
    padding:     0.85rem 1.25rem;
    color:       var(--text-dark);
    transition:  all 0.3s var(--ease);
    border-left: 3px solid transparent;
}

.dropdown-menu a:hover {
    background:        linear-gradient(90deg, var(--cream) 0%, transparent 100%);
    border-left-color: var(--primary);
}

.dropdown-icon {
    font-size:   1.8rem;
    flex-shrink: 0;
}

.dropdown-text {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.dropdown-text strong {
    font-size:   0.95rem;
    color:       var(--text-dark);
    font-weight: 600;
}

.dropdown-text small {
    font-size: 0.8rem;
    color:     var(--text-light);
}

/* Nav actions */
.nav-actions {
    display:     flex;
    gap:         0.4rem;
    align-items: center;
}

/* Búsqueda */
.search-wrapper {
    position: relative;
}

/* Override del formulario de búsqueda de WordPress */
.search-wrapper .search-form {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.search-wrapper .search-field,
.search-input {
    padding:       0.6rem 1rem;
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-full);
    width:         160px;
    transition:    all 0.3s var(--ease);
    font-size:     0.9rem;
}

.search-wrapper .search-field:focus,
.search-input:focus {
    outline:    none;
    border-color: var(--primary);
    width:      200px;
    box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.1);
}

.search-wrapper .search-submit {
    display: none; /* Búsqueda al pulsar Enter */
}

/* Links de cuenta y carrito */
.account-link,
.cart-link {
    text-decoration:  none;
    font-weight:      600;
    padding:          0.65rem;
    border-radius:    var(--radius-full);
    transition:       all 0.3s var(--ease);
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              0.4rem;
    font-size:        0.9rem;
    position:         relative;
    min-width:        48px;
    min-height:       48px;
}

.account-link {
    color: var(--text-dark);
}

.account-link:hover {
    background: var(--cream);
    color:      var(--primary);
    transform:  translateY(-2px);
}

.icon-account,
.icon-cart {
    font-size: 1.5rem;
}

.cart-link {
    background:  linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    color:       var(--white);
    box-shadow:  0 4px 12px rgba(255, 105, 180, 0.25);
}

.cart-link:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 6px 16px rgba(255, 105, 180, 0.35);
    transform:  translateY(-2px);
}

.cart-count {
    position:      absolute;
    top:           0.15rem;
    right:         0.15rem;
    background:    var(--white);
    color:         var(--primary);
    font-size:     0.7rem;
    padding:       0.2rem 0.45rem;
    border-radius: var(--radius-full);
    font-weight:   800;
    min-width:     18px;
    text-align:    center;
    line-height:   1;
}

/* Botón hamburguesa */
.menu-toggle {
    display:    none;
    font-size:  1.5rem;
    color:      var(--text-dark);
    padding:    0.5rem;
    min-width:  48px;
    min-height: 48px;
}

.hamburger-icon {
    font-size: 1.8rem;
}

/* ============================================================
   6. MENÚ MÓVIL
   ============================================================ */

.nav-menu.active {
    display:        flex !important;
    flex-direction: column;
    position:       fixed;
    top:            120px; /* fallback — JS lo sobreescribe */
    left:           0;
    right:          0;
    background:     var(--white);
    box-shadow:     var(--shadow-strong);
    padding:        1.5rem;
    gap:            0.75rem;
    z-index:        999;
    max-height:     calc(100vh - 120px); /* fallback — JS lo sobreescribe */
    overflow-y:     auto;
    animation:      slideDown 0.3s ease;
}

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

.nav-menu.active .nav-item {
    width: 100%;
}

.nav-menu.active .nav-item > a {
    display:       flex;
    width:         100%;
    padding:       1rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size:     1rem;
}

.nav-menu.active .nav-item.highlight-menu > a {
    justify-content: center;
    padding:         1rem 2rem;
}

.nav-menu.active .dropdown-menu {
    position:   static;
    opacity:    1;
    visibility: visible;
    transform:  none;
    box-shadow: none;
    border:     none;
    padding:    0.5rem 0 0 1rem;
    margin:     0;
    display:    none;
}

.nav-menu.active .nav-item.has-dropdown.open .dropdown-menu {
    display: block;
}

.nav-menu.active .dropdown-menu a {
    padding: 0.75rem 1rem;
}

/* "Ver todos" — enlace a categoría padre dentro del desplegable */
.dropdown-view-all a {
    font-weight: 700 !important;
    color: var(--primary) !important;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 105, 180, 0.15);
    padding-bottom: 0.6rem !important;
    margin-bottom: 0.25rem;
    display: block;
}
.dropdown-view-all a:hover {
    color: var(--primary-dark) !important;
    background: var(--primary-light) !important;
}
/* En desktop: ocultar, ya que el padre es clickable */
@media (min-width: 1025px) {
    .dropdown-view-all { display: none; }
}

/* Overlay oscuro del menú móvil */
.menu-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
    z-index:    998;
    display:    none;
    opacity:    0;
    transition: opacity 0.3s ease;
}

.menu-overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================================
   7. POPUP MODAL
   ============================================================ */

.popup-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.7);
    display:         none;
    align-items:     center;
    justify-content: center;
    z-index:         10000;
    opacity:         0;
    transition:      opacity 0.3s var(--ease);
}

.popup-overlay.active {
    display: flex;
    opacity: 1;
}

.popup-content {
    background:    var(--white);
    padding:       3rem 2.5rem;
    border-radius: var(--radius-lg);
    max-width:     500px;
    width:         90%;
    position:      relative;
    box-shadow:    var(--shadow-strong);
    transform:     scale(0.7);
    transition:    transform 0.3s var(--ease-bounce);
}

.popup-overlay.active .popup-content {
    transform: scale(1);
}

.popup-close {
    position:    absolute;
    top:         1rem;
    right:       1rem;
    font-size:   2rem;
    color:       var(--text-light);
    width:       40px;
    height:      40px;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  color 0.3s var(--ease);
    line-height: 1;
}

.popup-close:hover {
    color: var(--primary);
}

.popup-icon {
    font-size:     4rem;
    text-align:    center;
    margin-bottom: 1rem;
}

.popup-title {
    font-family:   var(--font-display);
    font-size:     2rem;
    color:         var(--text-dark);
    text-align:    center;
    margin-bottom: 0.5rem;
}

.popup-subtitle {
    text-align:    center;
    color:         var(--text-medium);
    margin-bottom: 2rem;
    font-size:     1.05rem;
}

.popup-form {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.popup-input {
    padding:       1rem 1.25rem;
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    font-size:     1rem;
    transition:    all 0.3s var(--ease);
}

.popup-input:focus {
    outline:       none;
    border-color:  var(--primary);
    box-shadow:    0 0 0 3px rgba(255, 105, 180, 0.1);
}

.popup-submit {
    padding:       1.1rem 2rem;
    background:    linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:         var(--white);
    border-radius: var(--radius-full);
    font-weight:   700;
    font-size:     1.05rem;
    min-height:    48px;
    box-shadow:    var(--shadow-medium);
    transition:    all 0.3s var(--ease);
}

.popup-submit:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-strong);
}

.popup-trust {
    text-align:  center;
    font-size:   0.85rem;
    color:       var(--text-light);
    margin-top:  1rem;
}

/* ============================================================
   8. BARRA ENVÍO GRATIS
   ============================================================ */

.free-shipping-bar {
    background: linear-gradient(135deg, var(--rainbow-mint) 0%, #7FD8BE 100%);
    padding:    0.9rem 2rem;
    text-align: center;
    /* Fija en la parte inferior — SIEMPRE visible, encima de cualquier
       otra barra sticky (add-to-cart, finalizar compra, etc.).
       El offset lo calcula assets/js/main.js -> positionShippingBar() */
    position:   fixed;
    bottom:     var(--shipping-bar-offset, 0px);
    left:       0;
    right:      0;
    z-index:    99990;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    transition: bottom 0.2s ease;
}

.shipping-bar-inner {
    max-width:   600px;
    margin:      0 auto;
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    flex-wrap:   wrap;
    justify-content: center;
}

.shipping-bar-text {
    color:       var(--white);
    font-weight: 600;
    font-size:   0.95rem;
}

.shipping-bar-track {
    flex:          1;
    min-width:     150px;
    height:        8px;
    background:    rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    overflow:      hidden;
}

.shipping-bar-fill {
    height:        100%;
    background:    var(--white);
    border-radius: var(--radius-full);
    transition:    width 0.5s var(--ease);
}

/* ============================================================
   9. HERO SECTION
   ============================================================ */

.hero {
    background:  linear-gradient(135deg, #FFF4F0 0%, #FFF9F5 50%, var(--cream) 100%);
    padding:     2rem 2rem;
    min-height:  auto;
    position:    relative;
    overflow:    hidden;
    display:     flex;
    align-items: center;
}

.hero::before {
    content:       '';
    position:      absolute;
    top:           -30%;
    right:         -5%;
    width:         700px;
    height:        700px;
    background:    radial-gradient(circle, rgba(255, 105, 180, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation:     float-slow 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-30px) scale(1.05); }
}

.hero-container {
    max-width:             var(--container-max);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   2rem;
    align-items:           center;
    position:              relative;
    z-index:               1;
    width:                 100%;
}

.hero-content {
    padding-right: 1rem;
}

.hero h1 {
    font-family:   var(--font-display);
    font-size:     2.4rem;
    color:         var(--text-dark);
    margin-bottom: 0.75rem;
    line-height:   1.15;
    animation:     fadeInUp 0.8s var(--ease);
}

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

.hero h1 .highlight {
    background:              linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    display:                 block;
}

.hero-subtitle {
    font-size:     1.05rem;
    color:         var(--text-medium);
    margin-bottom: 1.25rem;
    font-weight:   500;
    line-height:   1.6;
    animation:     fadeInUp 0.8s var(--ease) 0.2s both;
}

.cta-group {
    margin-bottom: 1.25rem;
    display:       flex;
    gap:           0.9rem;
    flex-wrap:     wrap;
    animation:     fadeInUp 0.8s var(--ease) 0.4s both;
}

/* Botones globales */
.btn {
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    gap:            0.5rem;
    padding:        1rem 2.2rem;
    border-radius:  var(--radius-full);
    font-weight:    800;
    font-size:      0.95rem;
    transition:     all 0.3s var(--ease);
    border:         none;
    cursor:         pointer;
    position:       relative;
    overflow:       hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-height:     52px;
}

.btn-primary {
    background:  linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:       var(--white);
    box-shadow:  var(--shadow-medium);
}

.btn-primary::before {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    width:         0;
    height:        0;
    background:    rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform:     translate(-50%, -50%);
    transition:    width 0.6s, height 0.6s;
}

.btn-primary:hover::before {
    width:  300px;
    height: 300px;
}

.btn-primary:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-strong);
    color:      var(--white);
}

.btn-secondary {
    background: var(--white);
    color:      var(--primary);
    border:     2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color:      var(--white);
    transform:  translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* Trust signals */
.hero-trust-signals {
    display:     flex;
    gap:         1.25rem;
    align-items: center;
    flex-wrap:   wrap;
    animation:   fadeInUp 0.8s var(--ease) 0.6s both;
}

.trust-signal {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.85rem;
    color:       var(--text-medium);
    font-weight: 600;
}

.trust-signal-icon {
    font-size: 1.3rem;
}

/* Imagen hero */
.hero-image-container {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    animation:       fadeInRight 1s var(--ease);
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}

.hero-image {
    width:         100%;
    max-width:     480px;
    height:        auto;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-strong);
    object-fit:    cover;
    transition:    transform 0.3s var(--ease);
}

.hero-image:hover {
    transform: scale(1.02);
}

.floating-badge {
    position:      absolute;
    top:           1rem;
    right:         1rem;
    background:    var(--white);
    padding:       0.85rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-medium);
    text-align:    center;
    animation:     float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.floating-badge-number {
    font-family: var(--font-display);
    font-size:   1.4rem;
    color:       var(--primary);
    font-weight: 700;
    display:     block;
    line-height: 1;
}

.floating-badge-text {
    font-size:  0.75rem;
    color:      var(--text-medium);
    font-weight: 600;
    margin-top: 0.25rem;
}

/* ============================================================
   10. CATEGORY GRID
   ============================================================ */

.category-section {
    padding:    2rem 2rem;
    display:    none; /* Solo visible en tablet/móvil */
}

.category-grid {
    max-width:             var(--container-max);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   1rem;
}

.category-card {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.75rem;
    padding:         1.25rem 1rem;
    background:      var(--white);
    border-radius:   var(--radius-md);
    box-shadow:      var(--shadow-soft);
    text-decoration: none;
    color:           var(--text-dark);
    transition:      all 0.3s var(--ease);
    border:          2px solid transparent;
    text-align:      center;
}

.category-card:hover {
    border-color: var(--primary);
    transform:    translateY(-5px);
    box-shadow:   var(--shadow-medium);
}

.category-icon {
    font-size:     2rem;
    line-height:   1;
}

.category-name {
    font-weight: 700;
    font-size:   0.85rem;
    color:       var(--text-dark);
    line-height: 1.2;
}

/* ============================================================
   11. FEATURED PRODUCTS / PRODUCT CARDS
   ============================================================ */

.featured-products,
.products-section {
    padding: var(--section-padding);
    background: var(--white);
}

.products-container {
    max-width: var(--container-max);
    margin:    0 auto;
}

.products-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
    margin-bottom:         3rem;
}

.product-card {
    background:    var(--white);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-soft);
    overflow:      hidden;
    position:      relative;
    transition:    all 0.4s var(--ease);
    display:       flex;
    flex-direction: column;
    border:        2px solid transparent;
}

.product-card:hover {
    transform:    translateY(-8px);
    box-shadow:   var(--shadow-hover);
    border-color: var(--primary-light);
}

.product-badge {
    position:      absolute;
    top:           1rem;
    left:          1rem;
    padding:       0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size:     0.8rem;
    font-weight:   700;
    z-index:       2;
    background:    linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:         var(--white);
    box-shadow:    0 4px 10px rgba(255, 105, 180, 0.3);
}

.product-image-wrapper {
    background: linear-gradient(135deg, #FFF4F0, #FFF9F5);
    padding:    1.5rem;
    overflow:   hidden;
}

.product-image {
    width:         100%;
    height:        220px;
    object-fit:    cover;
    border-radius: var(--radius-md);
    transition:    transform 0.5s var(--ease);
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-content {
    padding: 1.5rem;
    flex:    1;
    display: flex;
    flex-direction: column;
    gap:     0.75rem;
}

.product-title {
    font-family: var(--font-display);
    font-size:   1.3rem;
    color:       var(--text-dark);
    line-height: 1.2;
}

.product-rating {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.stars {
    font-size: 0.9rem;
    color:     #FFD700;
}

.reviews-count {
    font-size: 0.85rem;
    color:     var(--text-light);
}

.product-description {
    font-size:  0.9rem;
    color:      var(--text-medium);
    line-height: 1.5;
    flex:       1;
}

.product-price {
    font-family: var(--font-display);
    font-size:   1.75rem;
    color:       var(--primary);
    font-weight: 700;
    display:     flex;
    align-items: baseline;
    gap:         0.5rem;
}

.price-note {
    font-size:       1rem;
    color:           var(--text-light);
    text-decoration: line-through;
    font-weight:     400;
    font-family:     var(--font-body);
}

.btn-product {
    display:         block;
    text-align:      center;
    padding:         1rem 1.5rem;
    background:      linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:           var(--white);
    border-radius:   var(--radius-full);
    font-weight:     700;
    font-size:       0.95rem;
    transition:      all 0.3s var(--ease);
    margin-top:      auto;
    box-shadow:      var(--shadow-soft);
    min-height:      48px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.btn-product:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-medium);
    color:      var(--white);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
}

.products-cta {
    text-align: center;
    padding-top: 1rem;
}

/* ============================================================
   12. BENEFITS SECTION
   ============================================================ */

.benefits {
    padding:    var(--section-padding);
    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
}

.benefits-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin-top:            2rem;
}

.benefit-card {
    background:    var(--white);
    padding:       2rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-soft);
    text-align:    center;
    transition:    all 0.3s var(--ease);
}

.benefit-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.benefit-icon {
    font-size:     3rem;
    margin-bottom: 1rem;
    display:       block;
}

.benefit-title {
    font-family:   var(--font-display);
    font-size:     1.2rem;
    color:         var(--text-dark);
    margin-bottom: 0.75rem;
}

.benefit-description {
    font-size: 0.9rem;
    color:     var(--text-medium);
    line-height: 1.6;
}

/* ============================================================
   13. HOW IT WORKS
   ============================================================ */

.how-it-works {
    padding: var(--section-padding);
    background: var(--white);
}

.steps-container {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
    margin-top:            2rem;
    position:              relative;
}

.steps-container::before {
    content:    '';
    position:   absolute;
    top:        35px;
    left:       calc(16.66% + 1rem);
    right:      calc(16.66% + 1rem);
    height:     2px;
    background: linear-gradient(90deg, var(--primary-light), var(--accent));
    z-index:    0;
}

.step {
    text-align: center;
    position:   relative;
    z-index:    1;
}

.step-number {
    width:           70px;
    height:          70px;
    background:      linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:           var(--white);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-display);
    font-size:       1.75rem;
    font-weight:     700;
    margin:          0 auto 1.25rem;
    box-shadow:      var(--shadow-medium);
    position:        relative;
    z-index:         2;
}

.step h3 {
    font-family:   var(--font-display);
    font-size:     1.2rem;
    margin-bottom: 0.75rem;
    color:         var(--text-dark);
}

.step p {
    font-size:  0.9rem;
    color:      var(--text-medium);
    line-height: 1.6;
}

/* ============================================================
   14. SOCIAL PROOF / REVIEWS
   ============================================================ */

.social-proof {
    padding:    var(--section-padding);
    background: linear-gradient(135deg, #FFF4F0, #FFF9F5);
}

.reviews-wrapper {
    max-width: var(--container-max);
    margin:    0 auto;
}

.reviews-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin-top:            2rem;
}

.review-card {
    background:    var(--white);
    padding:       2rem;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-soft);
    border-left:   4px solid var(--primary-light);
    transition:    all 0.3s var(--ease);
}

.review-card:hover {
    transform:        translateY(-4px);
    box-shadow:       var(--shadow-medium);
    border-left-color: var(--primary);
}

.review-header {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    margin-bottom: 1rem;
}

.review-avatar {
    font-size:       2rem;
    width:           50px;
    height:          50px;
    background:      var(--cream);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.review-name {
    font-weight:  700;
    color:        var(--text-dark);
    margin-bottom: 0.2rem;
}

.review-stars {
    font-size: 0.85rem;
}

.review-text {
    font-size:   0.95rem;
    color:       var(--text-medium);
    line-height: 1.6;
    font-style:  italic;
}

/* ============================================================
   15. COMPARISON TABLE
   ============================================================ */

.comparison-section {
    padding:    var(--section-padding);
    background: var(--white);
}

.comparison-table-wrapper {
    overflow-x:    auto;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-soft);
    margin-top:    2rem;
}

.comparison-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.95rem;
}

.comparison-table thead th {
    background:  linear-gradient(135deg, var(--cream), var(--cream-dark));
    padding:     1.5rem 1.25rem;
    font-family: var(--font-display);
    font-size:   1.1rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.comparison-table thead th.featured {
    background:  linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:       var(--white);
}

.comparison-table tbody td {
    padding:     1.25rem;
    border-top:  1px solid var(--cream-dark);
    color:       var(--text-medium);
    text-align:  center;
}

.comparison-table tbody td:first-child {
    text-align:  left;
    font-weight: 600;
    color:       var(--text-dark);
}

.comparison-table tbody td.featured {
    background: rgba(255, 105, 180, 0.04);
    color:      var(--text-dark);
}

.price-cell {
    font-weight: 700;
}

.price-amount {
    font-family: var(--font-display);
    font-size:   1.5rem;
    color:       var(--primary);
    display:     block;
}

.price-amount.featured {
    font-size: 2rem;
}

.price-old {
    color:           var(--text-light);
    text-decoration: line-through;
    font-size:       0.9rem;
    font-weight:     400;
}

.price-badge {
    display:       inline-block;
    background:    var(--primary);
    color:         var(--white);
    padding:       0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size:     0.75rem;
    font-weight:   700;
    margin-top:    0.5rem;
}

.btn-table,
.btn-table-primary {
    display:         block;
    padding:         0.85rem 1.5rem;
    border-radius:   var(--radius-full);
    font-weight:     700;
    font-size:       0.9rem;
    transition:      all 0.3s var(--ease);
    text-align:      center;
    min-height:      48px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
}

.btn-table {
    background: var(--cream);
    color:      var(--text-dark);
    border:     2px solid var(--cream-dark);
}

.btn-table:hover {
    background:   var(--primary);
    color:        var(--white);
    border-color: var(--primary);
    transform:    translateY(-2px);
}

.btn-table-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:      var(--white);
    box-shadow: var(--shadow-medium);
}

.btn-table-primary:hover {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-strong);
    color:      var(--white);
}

/* Tarjetas comparativa móvil */
.comparison-cards-mobile {
    display: none;
}

.comparison-card-mobile {
    background:    var(--white);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-soft);
    padding:       2rem;
    margin-bottom: 1.5rem;
    border:        2px solid var(--cream-dark);
}

.comparison-card-mobile.featured {
    border-color: var(--primary);
    box-shadow:   var(--shadow-medium);
}

.comparison-card-mobile h3 {
    font-family:   var(--font-display);
    font-size:     1.5rem;
    color:         var(--text-dark);
    margin-bottom: 1.5rem;
    text-align:    center;
}

.comparison-feature {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0.75rem 0;
    border-bottom:   1px solid var(--cream-dark);
    gap:             1rem;
}

.feature-label {
    color:     var(--text-medium);
    font-size: 0.9rem;
}

.feature-value {
    font-weight:  600;
    color:        var(--text-dark);
    text-align:   right;
}

.comparison-note {
    background:    linear-gradient(135deg, var(--cream), var(--cream-dark));
    padding:       2rem;
    border-radius: var(--radius-lg);
    text-align:    center;
    margin-top:    2rem;
}

/* ============================================================
   16. CTA SECTION
   ============================================================ */

.cta-section {
    padding:    var(--section-padding);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    text-align: center;
    color:      var(--white);
}

.cta-section h2 {
    font-family:   var(--font-display);
    font-size:     2.5rem;
    color:         var(--white);
    margin-bottom: 1rem;
}

.cta-section p {
    font-size:     1.15rem;
    color:         rgba(255, 255, 255, 0.9);
    margin-bottom: 2.5rem;
}

.cta-section .btn-primary {
    background:  var(--white);
    color:       var(--primary);
    font-size:   1.05rem;
    padding:     1.25rem 3rem;
    box-shadow:  0 8px 30px rgba(0, 0, 0, 0.2);
}

.cta-section .btn-primary:hover {
    transform:   translateY(-3px);
    box-shadow:  0 12px 40px rgba(0, 0, 0, 0.3);
    color:       var(--primary);
}

/* ============================================================
   17. FOOTER
   ============================================================ */

.footer {
    background: var(--text-dark);
    color:      var(--white);
    padding:    3rem 2rem 1.5rem;
}

.footer-container {
    max-width: var(--container-max);
    margin:    0 auto;
}

.footer-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:                   3rem;
    margin-bottom:         2rem;
}

.footer-logo-image {
    height:        60px;
    width:         auto;
    margin-bottom: 1rem;
    filter:        none; /* logo con colores originales */
}

.footer-tagline {
    color:       rgba(255, 255, 255, 0.75);
    font-size:   0.9rem;
    line-height: 1.6;
    margin-top:  0.75rem;
}

.footer-badges {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.footer-badge {
    background:    rgba(255, 255, 255, 0.1);
    color:         rgba(255, 255, 255, 0.9);
    padding:       0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size:     0.78rem;
    font-weight:   600;
    border:        1px solid rgba(255, 255, 255, 0.15);
}

.footer-heading {
    font-family:   var(--font-display);
    font-size:     1.2rem;
    color:         var(--white);
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding:    0;
    margin:     0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color:       rgba(255, 255, 255, 0.75);
    font-size:   0.9rem;
    transition:  color 0.3s var(--ease);
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--primary-light);
}

.footer-contact .footer-contact-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    color:       rgba(255, 255, 255, 0.75);
    font-size:   0.9rem;
}

.footer-contact-icon {
    font-size:   1.2rem;
    flex-shrink: 0;
}

.footer-contact a {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.footer-bottom {
    border-top:  1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align:  center;
    color:       rgba(255, 255, 255, 0.5);
    font-size:   0.85rem;
    display:     flex;
    justify-content: center;
    gap:         2rem;
    flex-wrap:   wrap;
}

.footer-payments {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   18. WOOCOMMERCE — ESTILOS GLOBALES
   ============================================================ */

.stictag-woocommerce-wrapper {
    max-width: var(--container-max);
    margin:    2rem auto;
    padding:   0 2rem;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
    font-size:     0.9rem;
    color:         var(--text-light);
    margin-bottom: 1.5rem;
}

.woocommerce-breadcrumb a {
    color:      var(--text-medium);
    transition: color 0.3s var(--ease);
}

.woocommerce-breadcrumb a:hover {
    color: var(--primary);
}

/* Botón añadir al carrito de WooCommerce */
.woocommerce .button,
.woocommerce button.button {
    background:    linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color:         var(--white) !important;
    border-radius: var(--radius-full) !important;
    border:        none !important;
    font-weight:   700 !important;
    font-family:   var(--font-body) !important;
    padding:       1rem 2rem !important;
    transition:    all 0.3s var(--ease) !important;
    min-height:    48px !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
    transform:  translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    color:      var(--white) !important;
}

/* Mensajes de WooCommerce */
.woocommerce-message,
.woocommerce-info {
    background:    var(--cream) !important;
    border-color:  var(--primary) !important;
    border-radius: var(--radius-sm) !important;
    color:         var(--text-dark) !important;
}

.woocommerce-error {
    background:    #FFF5F5 !important;
    border-color:  var(--error) !important;
    border-radius: var(--radius-sm) !important;
}

/* ============================================================
   19. PÁGINAS DE CONTENIDO (legal, info)
   ============================================================ */

.content-page {
    max-width: var(--container-max);
    margin:    2rem auto;
    padding:   0 2rem;
}

.content-page-header {
    background:    linear-gradient(135deg, var(--cream), var(--cream-dark));
    padding:       3rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
    text-align:    center;
}

.content-page-header h1 {
    font-family: var(--font-display);
    font-size:   2.5rem;
    color:       var(--text-dark);
    margin-bottom: 0.5rem;
}

.content-page-header p {
    color:    var(--text-medium);
    font-size: 1rem;
}

.content-page-body {
    background:    var(--white);
    padding:       2.5rem;
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-soft);
    line-height:   1.8;
}

.content-page-body h2 {
    font-family:   var(--font-display);
    font-size:     1.5rem;
    color:         var(--primary);
    margin:        2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--cream-dark);
}

.content-page-body h3 {
    font-family:   var(--font-display);
    font-size:     1.2rem;
    color:         var(--text-dark);
    margin:        1.5rem 0 0.75rem;
}

.content-page-body p {
    margin-bottom: 1rem;
    color:         var(--text-medium);
}

.content-page-body ul,
.content-page-body ol {
    padding-left:  1.5rem;
    margin-bottom: 1rem;
}

.content-page-body li {
    margin-bottom:  0.5rem;
    color:          var(--text-medium);
    list-style-type: disc;
}

.content-page-body a {
    color:      var(--primary);
    text-decoration: underline;
}

/* ============================================================
   19C. PÁGINA DE PRODUCTO — ETIQUETAS TERMOADHESIVAS
   ============================================================ */

.product-breadcrumbs {
    background: var(--cream);
    padding:    0.75rem 0;
    margin:     0;
}

.product-page-container {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   3rem;
    padding:               3rem 2rem;
    max-width:             1200px;
    margin:                0 auto;
    align-items:           start;
}

/* ── Galería ── */
.product-gallery-col {
    position:  sticky;
    top:       calc(var(--nav-height) + 1rem);
    display:   flex;
    flex-direction: column;
    gap:       1.25rem;
}

.product-gallery-main {
    position:      relative;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    background:    linear-gradient(135deg, #FFF0F5 0%, #FFE8F5 100%);
    aspect-ratio:  1 / 1;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.product-main-image {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
    transition: transform 0.4s var(--ease);
}

.product-gallery-main:hover .product-main-image {
    transform: scale(1.03);
}

.gallery-badge {
    position:      absolute;
    top:           1rem;
    left:          1rem;
    background:    linear-gradient(135deg, var(--rainbow-pink), var(--rainbow-coral));
    color:         var(--white);
    padding:       0.4rem 1rem;
    border-radius: var(--radius-full);
    font-size:     0.8rem;
    font-weight:   700;
    z-index:       2;
    box-shadow:    var(--shadow-soft);
}

.product-gallery-placeholder {
    text-align: center;
    padding:    3rem 2rem;
    color:      var(--primary);
}

.gallery-placeholder-icon {
    font-size:     5rem;
    display:       block;
    margin-bottom: 1rem;
}

.product-gallery-placeholder p {
    font-family: var(--font-display);
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--primary);
    margin:      0 0 0.25rem;
}

.product-gallery-placeholder small {
    font-size: 0.9rem;
    color:     var(--text-medium);
}

.product-gallery-thumbs {
    display: flex;
    gap:     0.75rem;
    flex-wrap: wrap;
}

.gallery-thumb {
    width:         72px;
    height:        72px;
    border-radius: var(--radius-sm);
    overflow:      hidden;
    border:        2px solid var(--cream-dark);
    cursor:        pointer;
    padding:       0;
    background:    none;
    transition:    border-color 0.2s;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    border-color: var(--primary);
}

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

.product-trust-badges {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.75rem;
}

.trust-badge {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    background:    var(--cream);
    border-radius: var(--radius-sm);
    padding:       0.65rem 0.85rem;
    font-size:     0.8rem;
    color:         var(--text-dark);
    font-weight:   500;
}

/* ── Info del producto ── */
.product-info-col {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

.product-page-title {
    font-family:   var(--font-display);
    font-size:     1.75rem;
    font-weight:   700;
    color:         var(--text-dark);
    line-height:   1.25;
    margin:        0;
}

.product-rating {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    margin-top:  0.5rem;
}

.product-rating .stars {
    color:     #f59e0b;
    font-size: 1.1rem;
}

.rating-text {
    font-size: 0.875rem;
    color:     var(--text-medium);
}

.product-pricing {
    display:     flex;
    align-items: baseline;
    gap:         0.75rem;
    padding:     1.25rem;
    background:  linear-gradient(135deg, #FFF0F5, #FFE8F5);
    border-radius: var(--radius-md);
}

.price-current {
    font-family: var(--font-display);
    font-size:   2rem;
    font-weight: 700;
    color:       var(--primary);
}

.price-current .woocommerce-Price-amount {
    font-family: inherit;
    font-size:   inherit;
    font-weight: inherit;
    color:       inherit;
}

.price-original {
    font-size:       1.1rem;
    color:           var(--text-light);
    text-decoration: line-through;
}

.price-badge-discount {
    background:    var(--primary);
    color:         var(--white);
    padding:       0.25rem 0.65rem;
    border-radius: var(--radius-full);
    font-size:     0.8rem;
    font-weight:   700;
}

.product-quick-benefits p {
    color:         var(--text-dark);
    margin-bottom: 0.75rem;
    font-size:     0.95rem;
}

.quick-benefits-list {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-direction: column;
    gap:        0.5rem;
}

.quick-benefits-list li {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    font-size:   0.9rem;
    color:       var(--text-dark);
    list-style:  none;
}

.qb-check {
    color:       var(--success);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Personalizador ── */
.customizer-section {
    background:    var(--white);
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           1.25rem;
}

.customizer-header h2 {
    font-family:   var(--font-display);
    font-size:     1.25rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin:        0 0 0.25rem;
}

.customizer-header p {
    font-size: 0.875rem;
    color:     var(--text-medium);
    margin:    0;
}

.label-preview {
    background:     linear-gradient(135deg, #F0F4FF, #E8EEFF);
    border-radius:  var(--radius-md);
    padding:        1.5rem;
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.preview-label {
    background:    var(--white);
    border-radius: var(--radius-sm);
    padding:       0.6rem 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    box-shadow:    var(--shadow-soft);
    min-width:     160px;
    justify-content: center;
}

.preview-icon {
    font-size: 1.4rem;
}

.preview-text {
    font-family:  'Fredoka', sans-serif;
    font-size:    1.1rem;
    font-weight:  600;
    color:        var(--text-dark);
    transition:   font-family 0.2s;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
    max-width:    150px;
}

.customizer-form {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.form-group {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    position:       relative;
}

.form-label {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       0.85rem;
    font-weight:     600;
    color:           var(--text-dark);
}

.form-required {
    font-size:  0.75rem;
    color:      var(--primary);
    font-weight: 500;
}

.form-selected-value {
    font-size:  0.75rem;
    color:      var(--text-medium);
    font-weight: 400;
}

.form-input {
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    padding:       0.75rem 1rem;
    font-size:     1rem;
    font-family:   var(--font-body);
    color:         var(--text-dark);
    width:         100%;
    transition:    border-color 0.2s, box-shadow 0.2s;
    background:    var(--white);
}

.form-input:focus {
    outline:      none;
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(255, 105, 180, 0.15);
}

.form-counter {
    position:   absolute;
    right:      0.75rem;
    bottom:     0.65rem;
    font-size:  0.7rem;
    color:      var(--text-light);
}

.typography-selector {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
}

.typography-option {
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    padding:       0.5rem 0.75rem;
    cursor:        pointer;
    text-align:    center;
    background:    var(--white);
    transition:    all 0.2s;
    flex:          1;
    min-width:     60px;
}

.typography-option:hover {
    border-color: var(--primary);
}

.typography-option.active {
    border-color: var(--primary);
    background:   rgba(255, 105, 180, 0.08);
}

.typography-name {
    font-size:   0.7rem;
    color:       var(--text-medium);
    margin-bottom: 0.25rem;
}

.typography-sample {
    font-size:   1.2rem;
    font-weight: 600;
    color:       var(--text-dark);
}

.design-selector {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.5rem;
}

.design-option {
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    padding:       0.65rem 0.5rem;
    cursor:        pointer;
    text-align:    center;
    background:    var(--white);
    transition:    all 0.2s;
}

.design-option:hover {
    border-color: var(--primary);
    transform:    translateY(-2px);
}

.design-option.active {
    border-color: var(--primary);
    background:   rgba(255, 105, 180, 0.08);
    box-shadow:   0 0 0 3px rgba(255, 105, 180, 0.15);
}

.design-emoji {
    font-size:     1.75rem;
    display:       block;
    margin-bottom: 0.25rem;
}

.design-name {
    font-size: 0.65rem;
    color:     var(--text-medium);
}

/* ── Add to cart ── */
.add-to-cart-section {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.quantity-selector {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.quantity-label {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--text-dark);
    white-space: nowrap;
}

.quantity-controls {
    display:     flex;
    align-items: center;
    gap:         0;
    border:      2px solid var(--cream-dark);
    border-radius: var(--radius-sm);
    overflow:    hidden;
}

.quantity-btn {
    width:      42px;
    height:     42px;
    background: var(--cream);
    border:     none;
    font-size:  1.4rem;
    font-weight: 700;
    cursor:     pointer;
    color:      var(--text-dark);
    transition: background 0.2s;
    padding:    0;
    line-height: 1;
}

.quantity-btn:hover:not(:disabled) {
    background: var(--cream-dark);
}

.quantity-btn:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

.quantity-input {
    width:      52px;
    height:     42px;
    border:     none;
    text-align: center;
    font-size:  1rem;
    font-weight: 700;
    color:      var(--text-dark);
    background: var(--white);
    padding:    0;
}

.btn-add-to-cart {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.75rem;
    padding:         1.1rem 2rem;
    background:      linear-gradient(135deg, var(--rainbow-pink), var(--rainbow-coral));
    color:           var(--white);
    border:          none;
    border-radius:   var(--radius-full);
    font-family:     var(--font-display);
    font-size:       1.15rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      all 0.3s var(--ease);
    width:           100%;
    box-shadow:      var(--shadow-medium);
}

.btn-add-to-cart:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: var(--shadow-hover);
    filter:     brightness(1.05);
}

.btn-add-to-cart:disabled {
    opacity: 0.7;
    cursor:  not-allowed;
}

.btn-out-of-stock {
    background: var(--text-light);
}

.stock-notice {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.85rem;
    color:       var(--success);
    margin:      0;
}

.stock-dot {
    width:         8px;
    height:        8px;
    background:    var(--success);
    border-radius: 50%;
    flex-shrink:   0;
    animation:     stockPulse 2s infinite;
}

@keyframes stockPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.product-guarantees {
    display:  flex;
    gap:      1rem;
    flex-wrap: wrap;
    padding:  1rem;
    background: var(--cream);
    border-radius: var(--radius-sm);
}

.guarantee-item {
    display:   flex;
    align-items: center;
    gap:       0.4rem;
    font-size: 0.8rem;
    color:     var(--text-dark);
    font-weight: 500;
}

/* ── Características detalladas ── */
.product-features-section {
    background: var(--cream);
    padding:    var(--section-padding);
    margin-top: 2rem;
}

.features-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin-top:            2.5rem;
}

.feature-detail-card {
    background:    var(--white);
    border-radius: var(--radius-md);
    padding:       1.75rem 1.5rem;
    text-align:    center;
    transition:    box-shadow 0.3s, transform 0.3s;
}

.feature-detail-card:hover {
    box-shadow: var(--shadow-medium);
    transform:  translateY(-4px);
}

.feature-detail-icon {
    font-size:     2.5rem;
    display:       block;
    margin-bottom: 0.75rem;
}

.feature-detail-card h3 {
    font-family:   var(--font-display);
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 0.5rem;
}

.feature-detail-card p {
    font-size:  0.875rem;
    color:      var(--text-medium);
    line-height: 1.6;
    margin:     0;
}

/* ── Reviews del producto ── */
.product-reviews-section {
    padding: var(--section-padding);
}

/* Responsive producto */
@media (max-width: 1024px) {
    .product-page-container {
        grid-template-columns: 1fr;
        gap:                   2rem;
        padding:               2rem 1.5rem;
    }

    .product-gallery-col {
        position: static;
    }

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

@media (max-width: 767px) {
    .product-page-title {
        font-size: 1.3rem;
    }

    .price-current {
        font-size: 1.6rem;
    }

    .design-selector {
        grid-template-columns: repeat(4, 1fr);
    }

    .product-trust-badges {
        grid-template-columns: 1fr 1fr;
    }

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

    .product-guarantees {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .design-selector {
        grid-template-columns: repeat(4, 1fr);
    }

    .typography-selector {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .typography-option {
        flex: 0 0 70px;
    }
}


/* ── Benefit pills del producto ── */
.product-benefit-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.benefit-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    background:    linear-gradient(135deg, #FFF0F5, #FFE8F5);
    border:        1.5px solid rgba(255, 105, 180, 0.25);
    border-radius: var(--radius-full);
    padding:       0.4rem 0.9rem;
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--text-dark);
    white-space:   nowrap;
}

/* ── Descripción larga del producto ── */
.product-long-desc-section {
    background: var(--white);
    padding:    var(--section-padding);
    border-top: 2px solid var(--cream-dark);
}

.product-long-desc {
    max-width:   800px;
    margin:      2rem auto 0;
    color:       var(--text-dark);
    line-height: 1.8;
    font-size:   1rem;
}

.product-long-desc h2,
.product-long-desc h3 {
    font-family:   var(--font-display);
    font-weight:   700;
    color:         var(--text-dark);
    margin:        2.5rem 0 1rem;
}

.product-long-desc h2 { font-size: 1.6rem; }
.product-long-desc h3 { font-size: 1.25rem; }

.product-long-desc p  { margin-bottom: 1.25rem; }

.product-long-desc ul,
.product-long-desc ol {
    padding-left:  1.5rem;
    margin-bottom: 1.25rem;
}

.product-long-desc li { margin-bottom: 0.6rem; }

.product-long-desc strong { color: var(--text-dark); }

.product-long-desc table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.5rem 0;
    font-size:       0.95rem;
    border-radius:   var(--radius-md);
    overflow:        hidden;
    border:          1px solid var(--cream-dark);
}

.product-long-desc table td {
    padding:        0.75rem 1rem;
    border-bottom:  1px solid var(--cream-dark);
    vertical-align: top;
}

.product-long-desc table td:first-child {
    font-weight: 600;
    white-space: nowrap;
    width:       140px;
    background:  var(--cream);
    color:       var(--text-dark);
}

.product-long-desc table tr:last-child td {
    border-bottom: none;
}

/* ═══ PRODUCTOS RECOMENDADOS / COLECCIÓN ═══ */
.product-related-section {
    background: var(--cream);
    padding:    var(--section-padding);
    border-top: 2px solid var(--cream-dark);
}

.related-products-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
    margin-top:            1rem;
}

.related-product-card {
    background:    var(--white);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    text-decoration: none;
    transition:    transform 0.3s, box-shadow 0.3s;
    box-shadow:    var(--shadow-soft);
}

.related-product-card:hover {
    transform:  translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.related-product-img {
    aspect-ratio: 1 / 1;
    overflow:     hidden;
    background:   linear-gradient(135deg, #FFF0F5 0%, #FFE8F5 100%);
}

.related-product-img img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    transition: transform 0.3s;
}

.related-product-card:hover .related-product-img img {
    transform: scale(1.05);
}

.related-product-info {
    padding: 1rem;
}

.related-product-name {
    font-family: var(--font-display);
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--text-dark);
    margin:      0 0 0.5rem;
    line-height: 1.3;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

.related-product-price {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--rainbow-coral);
}

@media (max-width: 1024px) {
    .related-products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .related-products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .related-product-info { padding: 0.75rem; }
    .related-product-name { font-size: 0.85rem; }
}

@media (max-width: 767px) {
    .benefit-pill { font-size: 0.75rem; padding: 0.35rem 0.75rem; }
}

/* ============================================================
   19B. ESTILOS ESPECÍFICOS — PÁGINAS LEGALES
   ============================================================ */

.legal-breadcrumbs {
    font-size:      0.9rem;
    color:          var(--text-medium);
    margin-bottom:  2rem;
    padding-bottom: 1rem;
    border-bottom:  1px solid rgba(0, 0, 0, 0.08);
    display:        flex;
    gap:            0.4rem;
    align-items:    center;
    flex-wrap:      wrap;
}

.legal-breadcrumbs a {
    color:      var(--primary);
    transition: opacity 0.2s;
}

.legal-breadcrumbs a:hover {
    opacity: 0.75;
}

.legal-data-box {
    background:    linear-gradient(135deg, #FFF0F5 0%, #FFE4F1 100%);
    border-left:   5px solid var(--primary);
    padding:       1.75rem 2rem;
    border-radius: var(--radius-md);
    margin:        1.5rem 0 2rem;
    box-shadow:    0 4px 20px rgba(255, 105, 180, 0.08);
}

.legal-data-box ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.legal-data-box li {
    margin-bottom: 0.85rem;
    line-height:   1.8;
    color:         var(--text-dark);
    list-style:    none;
}

.legal-data-box li:last-child {
    margin-bottom: 0;
}

.legal-data-box a {
    color:       var(--primary);
    font-weight: 600;
}

.legal-data-box a:hover {
    text-decoration: underline;
}

.legal-accent-box {
    background:    linear-gradient(135deg, #FFF9E6 0%, #FFF0CC 100%);
    border-left:   5px solid var(--accent);
    padding:       1.25rem 1.5rem;
    border-radius: var(--radius-md);
    margin:        1.5rem 0;
    font-weight:   600;
    color:         var(--text-dark);
    line-height:   1.7;
}

/* ── Envíos y Devoluciones — tarjetas ── */
.info-cards-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
    margin-bottom:         2.5rem;
}

.info-card {
    background:    var(--white);
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-lg);
    padding:       2rem;
    transition:    box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.info-card:hover {
    box-shadow: var(--shadow-medium);
    transform:  translateY(-4px);
}

.info-card-icon {
    font-size:     3rem;
    margin-bottom: 1rem;
    display:       block;
}

.info-card h2 {
    font-size:     1.5rem;
    margin-bottom: 0.75rem;
    color:         var(--text-dark);
    border:        none;
    padding:       0;
}

.info-card h2::before { display: none; }

.info-card p {
    color:         var(--text-medium);
    line-height:   1.7;
    margin-bottom: 1rem;
    font-size:     0.95rem;
}

.info-card ul {
    list-style: none;
    padding:    0;
    margin:     0;
}

.info-card ul li {
    padding:    0.4rem 0;
    display:    flex;
    gap:        0.5rem;
    font-size:  0.9rem;
    color:      var(--text-dark);
    list-style: none;
}

/* ── Banner CTA de envíos ── */
.info-cta-banner {
    background:    linear-gradient(135deg, var(--rainbow-pink) 0%, var(--rainbow-coral) 50%, var(--rainbow-orange) 100%);
    border-radius: var(--radius-lg);
    padding:       3rem 2rem;
    text-align:    center;
    color:         var(--white);
    margin-top:    1rem;
}

.info-cta-banner h2 {
    font-size:     2rem;
    font-weight:   700;
    margin-bottom: 0.75rem;
    color:         var(--white);
    border:        none;
    padding:       0;
}

.info-cta-banner h2::before { display: none; }

.info-cta-banner p {
    font-size:     1.05rem;
    margin-bottom: 1.75rem;
    opacity:       0.95;
}

.info-cta-banner .btn-primary {
    background: var(--white);
    color:      var(--primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.info-cta-banner .btn-primary:hover {
    background: var(--cream);
    transform:  translateY(-2px);
}

.legal-info-box {
    background:    rgba(255, 179, 102, 0.12);
    border-left:   4px solid var(--accent);
    padding:       1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin:        1.5rem 0;
    font-size:     0.95rem;
    color:         var(--text-dark);
    line-height:   1.7;
}

.legal-success-box {
    background:    linear-gradient(135deg, #E8F8F5 0%, #D4F1F4 100%);
    border-left:   5px solid var(--success);
    padding:       1.25rem 1.5rem;
    border-radius: var(--radius-md);
    margin:        1.5rem 0;
}

.legal-success-box p {
    margin:      0;
    font-size:   0.95rem;
    line-height: 1.8;
    color:       var(--text-dark);
}

.legal-success-box a {
    color:       var(--primary);
    font-weight: 600;
}

.legal-updated {
    font-size:   0.9rem;
    color:       var(--text-light);
    font-style:  italic;
    margin-top:  3rem;
    padding-top: 1.5rem;
    border-top:  2px solid rgba(0, 0, 0, 0.06);
    text-align:  center;
}

/* ============================================================
   20. UTILIDADES
   ============================================================ */

.container {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 2rem;
}

.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;
}

/* Notificación toast añadir al carrito */
.stictag-toast {
    position:      fixed;
    bottom:        2rem;
    right:         2rem;
    background:    var(--white);
    border-radius: var(--radius-md);
    box-shadow:    var(--shadow-strong);
    padding:       1.25rem 1.5rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    z-index:       9999;
    max-width:     380px;
    border-left:   4px solid var(--primary);
    transform:     translateX(500px);
    transition:    transform 0.4s var(--ease);
}

.stictag-toast.visible {
    transform: translateX(0);
}

.stictag-toast-icon {
    font-size: 1.75rem;
    flex-shrink: 0;
}

.stictag-toast-message {
    font-weight: 600;
    color:       var(--text-dark);
    font-size:   0.95rem;
}

.stictag-toast-sub {
    font-size:  0.85rem;
    color:      var(--text-medium);
    margin-top: 0.2rem;
}

/* ============================================================
   21. RESPONSIVE — BREAKPOINTS UNIFICADOS
   ============================================================
   Breakpoints:
   - Desktop grande:  > 1200px   (sin media query, estilos base)
   - Desktop normal:  1025–1200px (sin media query, estilos base)
   - Tablet:          768–1024px  @media (max-width: 1024px)
   - Móvil grande:    481–767px   @media (max-width: 767px)
   - Móvil pequeño:   ≤ 480px     @media (max-width: 480px)
   ============================================================ */

/* ============================================================
   TABLET — ≤ 1024px
   Dispositivos: iPad, iPad Air, Surface Pro, Android tablets
   ============================================================ */
@media (max-width: 1024px) {

    /* ---------- VARIABLES ---------- */
    :root {
        --section-padding: 4rem 1.5rem;
        --nav-height:      65px;
        --header-full-height: 110px;
    }

    /* ---------- BANNER ---------- */
    .top-banner {
        min-height: 44px;
    }

    .banner-content {
        gap: 1.25rem;
    }

    /* ---------- HEADER / NAV ---------- */
    .nav-container {
        padding: 0.75rem 1.5rem;
        gap:     1rem;
    }

    /* Ocultar menú desktop, mostrar hamburguesa */
    .nav-menu {
        display: none;
    }

    .menu-toggle {
        display:     block;
        order:       3;   /* Que quede a la derecha de nav-actions */
    }

    /* Búsqueda en tablet: más estrecha */
    .search-input,
    .search-wrapper .search-field {
        width: 130px;
    }

    .search-input:focus,
    .search-wrapper .search-field:focus {
        width: 170px;
    }

    /* ---------- MENÚ MÓVIL (activo en tablet también) ---------- */
    .nav-menu.active {
        top:        var(--header-full-height);
        max-height: calc(100vh - var(--header-full-height));
        padding:    1.25rem 1.5rem;
    }

    /* ---------- CATEGORY SECTION ---------- */
    .category-section {
        display: block;
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ---------- HERO ---------- */
    .hero {
        padding: 2.5rem 1.5rem;
    }

    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap:                   1.5rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-content {
        padding-right: 0;
    }

    .floating-badge {
        padding:    0.6rem 0.9rem;
    }

    .floating-badge-number {
        font-size: 1.2rem;
    }

    /* ---------- PRODUCTS ---------- */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   1.5rem;
    }

    /* ---------- BENEFITS ---------- */
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   1.25rem;
    }

    /* ---------- HOW IT WORKS ---------- */
    .steps-container {
        grid-template-columns: 1fr;
        gap:                   1.5rem;
        max-width:             480px;
        margin-left:           auto;
        margin-right:          auto;
    }

    .steps-container::before {
        display: none;
    }

    /* ---------- REVIEWS ---------- */
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   1.25rem;
    }

    /* ---------- COMPARISON ---------- */
    .comparison-table {
        font-size: 0.85rem;
    }

    .comparison-table thead th,
    .comparison-table tbody td {
        padding: 1rem 0.85rem;
    }

    /* ---------- FOOTER ---------- */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap:                   2rem;
    }

    .footer-brand {
        grid-column: 1 / -1; /* La marca ocupa todo el ancho */
    }

    /* ---------- PÁGINAS DE CONTENIDO ---------- */
    .content-page {
        padding: 0 1.5rem;
    }

    .content-page-header h1 {
        font-size: 2rem;
    }

    /* ---------- WOOCOMMERCE ---------- */
    .stictag-woocommerce-wrapper {
        padding: 0 1.5rem;
    }
}

/* ============================================================
   MÓVIL — ≤ 767px
   Dispositivos: iPhone, Android, todos los smartphones
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- VARIABLES ---------- */
    :root {
        --section-padding: 3rem 1rem;
        --nav-height:      60px;
        --header-full-height: 100px;
    }

    /* ---------- BANNER ---------- */
    .top-banner {
        padding:    0.5rem 0.75rem;
        min-height: 42px;
        font-size:  0.8rem;
    }

    .banner-content {
        justify-content: center;
        gap:             0;
    }

    .banner-divider {
        display: none;
    }

    .banner-message {
        font-size:       0.78rem;
        gap:             0.35rem;
        justify-content: center;
    }

    .banner-icon {
        font-size: 1rem;
    }

    .banner-cta-btn {
        padding:   0.35rem 0.85rem;
        font-size: 0.72rem;
    }

    /* ---------- HEADER ---------- */
    .nav-container {
        padding: 0.6rem 1rem;
        gap:     0.5rem;
    }

    .logo-image {
        height: 42px !important;
    }

    /* Ocultar búsqueda en móvil */
    .search-wrapper {
        display: none;
    }

    .nav-actions {
        gap: 0.25rem;
    }

    .account-link,
    .cart-link {
        padding:    0.5rem;
        min-width:  42px;
        min-height: 42px;
    }

    .icon-account,
    .icon-cart {
        font-size: 1.25rem;
    }

    .cart-count {
        font-size: 0.65rem;
        padding:   0.15rem 0.35rem;
        min-width: 16px;
    }

    .menu-toggle {
        padding:    0.4rem;
        min-width:  42px;
        min-height: 42px;
    }

    .hamburger-icon {
        font-size: 1.6rem;
    }

    /* ---------- MENÚ MÓVIL ---------- */
    .nav-menu.active {
        top:        var(--nav-height);
        padding:    1rem;
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
        gap:        0.4rem;
    }

    .nav-menu.active .nav-item > a {
        padding:   0.85rem 1rem;
        font-size: 0.95rem;
    }

    .nav-menu.active .nav-item.highlight-menu > a {
        padding: 0.85rem 1.5rem;
    }

    .nav-menu.active .dropdown-menu a {
        padding:   0.6rem 0.85rem;
        font-size: 0.9rem;
    }

    /* ---------- BARRA ENVÍO ---------- */
    .free-shipping-bar {
        padding: 0.65rem 1rem;
    }

    .shipping-bar-inner {
        flex-direction: column;
        gap:            0.5rem;
        align-items:    stretch;
    }

    .shipping-bar-text {
        font-size:  0.85rem;
        text-align: center;
    }

    .shipping-bar-track {
        min-width: auto;
        width:     100%;
    }

    /* ---------- HERO ---------- */
    .hero {
        padding: 1.5rem 1rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap:                   1.5rem;
        text-align:            center;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    .hero h1 .highlight {
        display: inline; /* En móvil no salto de línea */
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .hero-content {
        padding-right: 0;
        order:         1;
    }

    .hero-image-container {
        order:     2;
        max-width: 360px;
        margin:    0 auto;
        width:     100%;
    }

    .hero-image {
        max-width: 100%;
        border-radius: var(--radius-md);
    }

    .floating-badge {
        top:   0.5rem;
        right: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .floating-badge-number {
        font-size: 1rem;
    }

    .floating-badge-text {
        font-size: 0.65rem;
    }

    .cta-group {
        flex-direction: column;
        align-items:    stretch;
    }

    .btn {
        width:        100%;
        padding:      0.95rem 1.5rem;
        font-size:    0.9rem;
        justify-content: center;
    }

    .hero-trust-signals {
        justify-content: center;
        gap:             0.75rem;
    }

    .trust-signal {
        font-size: 0.8rem;
    }

    /* ---------- TITLES ---------- */
    .section-title {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size:     0.95rem;
        margin-bottom: 2rem;
    }

    /* ---------- CATEGORY ---------- */
    .category-section {
        display:  block;
        padding:  1.5rem 0 1.5rem 1rem; /* Sin padding derecho para scroll */
    }

    .category-grid {
        grid-template-columns: none;
        display:               flex;
        overflow-x:            auto;
        gap:                   0.75rem;
        padding-right:         1rem;
        padding-bottom:        0.5rem;
        scroll-snap-type:      x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Ocultar barra de scroll */
        scrollbar-width:       none;
    }

    .category-grid::-webkit-scrollbar {
        display: none;
    }

    .category-card {
        flex:              0 0 120px;
        scroll-snap-align: start;
        padding:           1rem 0.75rem;
    }

    .category-icon {
        font-size: 1.75rem;
    }

    .category-name {
        font-size: 0.8rem;
    }

    /* ---------- PRODUCTS ---------- */
    .products-grid {
        grid-template-columns: 1fr;
        gap:                   1.5rem;
    }

    .product-image {
        height: 200px;
    }

    .product-content {
        padding: 1.25rem;
        gap:     0.6rem;
    }

    .product-title {
        font-size: 1.15rem;
    }

    .product-price {
        font-size: 1.5rem;
    }

    .products-cta {
        text-align: center;
    }

    /* ---------- BENEFITS ---------- */
    .benefits-grid {
        grid-template-columns: 1fr;
        gap:                   1rem;
    }

    .benefit-card {
        padding: 1.5rem 1.25rem;
        display: flex;
        text-align: left;
        gap: 1rem;
        align-items: flex-start;
    }

    .benefit-icon {
        font-size:     2rem;
        margin-bottom: 0;
        flex-shrink:   0;
    }

    .benefit-title {
        font-size:     1.05rem;
        margin-bottom: 0.35rem;
    }

    .benefit-description {
        font-size: 0.85rem;
    }

    /* ---------- HOW IT WORKS ---------- */
    .steps-container {
        grid-template-columns: 1fr;
        gap:                   1.5rem;
        max-width:             100%;
    }

    .step {
        display:     flex;
        text-align:  left;
        gap:         1.25rem;
        align-items: flex-start;
    }

    .step-number {
        width:         52px;
        height:        52px;
        font-size:     1.4rem;
        margin:        0;
        flex-shrink:   0;
    }

    .step h3 {
        font-size:     1.05rem;
        margin-bottom: 0.35rem;
    }

    .step p {
        font-size: 0.85rem;
    }

    /* ---------- REVIEWS ---------- */
    .reviews-grid {
        grid-template-columns: 1fr;
        gap:                   1rem;
    }

    .review-card {
        padding: 1.5rem 1.25rem;
    }

    .review-text {
        font-size: 0.9rem;
    }

    /* ---------- COMPARISON ---------- */
    .comparison-table-wrapper {
        display: none;
    }

    .comparison-cards-mobile {
        display: block;
    }

    .comparison-card-mobile {
        padding: 1.5rem 1.25rem;
    }

    .comparison-card-mobile h3 {
        font-size:     1.25rem;
        margin-bottom: 1rem;
    }

    .comparison-feature {
        padding: 0.6rem 0;
    }

    .feature-label {
        font-size: 0.85rem;
    }

    .feature-value {
        font-size: 0.85rem;
    }

    /* ---------- CTA ---------- */
    .cta-section h2 {
        font-size: 1.75rem;
    }

    .cta-section p {
        font-size: 1rem;
    }

    /* ---------- POPUP ---------- */
    .popup-content {
        padding:       1.75rem 1.25rem;
        border-radius: var(--radius-md);
        width:         95%;
    }

    .popup-icon {
        font-size:     3rem;
        margin-bottom: 0.75rem;
    }

    .popup-title {
        font-size: 1.5rem;
    }

    .popup-subtitle {
        font-size:     0.95rem;
        margin-bottom: 1.5rem;
    }

    .popup-input {
        padding: 0.85rem 1rem;
    }

    /* ---------- FOOTER ---------- */
    .footer {
        padding: 2.5rem 1rem 1.25rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap:                   1.75rem;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-tagline {
        font-size: 0.85rem;
    }

    .footer-badges {
        flex-wrap: wrap;
    }

    .footer-heading {
        font-size: 1.1rem;
    }

    .footer-links a,
    .footer-contact .footer-contact-item {
        font-size: 0.875rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap:            0.35rem;
        font-size:      0.8rem;
    }

    /* ---------- CONTENT PAGES (legal, etc.) ---------- */
    .content-page {
        padding:   0 1rem;
        margin:    1.5rem auto;
    }

    .content-page-header {
        padding: 2rem 1.25rem;
    }

    .content-page-header h1 {
        font-size: 1.75rem;
    }

    .content-page-body {
        padding: 1.5rem 1.25rem;
    }

    .content-page-body h2 {
        font-size: 1.25rem;
    }

    .content-page-body h3 {
        font-size: 1.1rem;
    }

    /* ---------- WOOCOMMERCE ---------- */
    .stictag-woocommerce-wrapper {
        padding: 0 1rem;
        margin:  1.5rem auto;
    }

    /* ---------- ENVÍOS Y DEVOLUCIONES ---------- */
    .info-cards-grid {
        grid-template-columns: 1fr;
    }

    .info-cta-banner {
        padding: 2rem 1.25rem;
    }

    .info-cta-banner h2 {
        font-size: 1.5rem;
    }

    /* ---------- TOAST ---------- */
    .stictag-toast {
        bottom:    0.75rem;
        right:     0.75rem;
        left:      0.75rem;
        max-width: 100%;
        padding:   1rem 1.25rem;
    }
}

/* ============================================================
   MÓVIL PEQUEÑO — ≤ 480px
   Dispositivos: iPhone SE, Galaxy A03, pantallas < 5"
   ============================================================ */
@media (max-width: 480px) {

    /* ---------- VARIABLES ---------- */
    :root {
        --section-padding: 2.5rem 1rem;
    }

    /* ---------- BANNER ---------- */
    .top-banner {
        font-size: 0.73rem;
    }

    /* ---------- HEADER ---------- */
    .logo-image {
        height: 38px !important;
    }

    .nav-container {
        padding: 0.4rem 0.75rem;
        min-height: 54px;
    }

    /* ---------- HERO ---------- */
    .hero {
        padding: 1.25rem 0.75rem;
    }

    .hero h1 {
        font-size: 1.55rem;
    }

    .hero-trust-signals {
        gap: 0.5rem;
    }

    .trust-signal {
        font-size: 0.75rem;
    }

    /* ---------- TITLES ---------- */
    .section-title {
        font-size: 1.5rem;
    }

    /* ---------- CATEGORY ---------- */
    .category-section {
        padding: 1.25rem 0 1.25rem 0.75rem;
    }

    .category-card {
        flex:    0 0 105px;
        padding: 0.85rem 0.6rem;
    }

    .category-icon {
        font-size: 1.5rem;
    }

    .category-name {
        font-size: 0.73rem;
    }

    /* ---------- PRODUCTS ---------- */
    .product-image {
        height: 180px;
    }

    .product-content {
        padding: 1rem;
    }

    .product-title {
        font-size: 1.05rem;
    }

    .product-price {
        font-size: 1.35rem;
    }

    /* ---------- BENEFITS ---------- */
    .benefit-card {
        padding: 1.25rem 1rem;
    }

    /* ---------- STEP ---------- */
    .step-number {
        width:     44px;
        height:    44px;
        font-size: 1.2rem;
    }

    /* ---------- FOOTER ---------- */
    .footer {
        padding: 2rem 0.75rem 1rem;
    }

    .footer-grid {
        gap: 1.5rem;
    }

    /* ---------- POPUP ---------- */
    .popup-content {
        padding: 1.5rem 1rem;
        width:   98%;
    }

    .popup-title {
        font-size: 1.35rem;
    }

    /* ---------- CONTENT PAGES ---------- */
    .content-page-body {
        padding: 1.25rem 1rem;
    }

    .content-page-header {
        padding: 1.5rem 1rem;
    }

    .content-page-header h1 {
        font-size: 1.5rem;
    }
}

/* ============================================================
   ALTA RESOLUCIÓN — ≥ 1400px
   Ajustes opcionales para pantallas muy anchas
   ============================================================ */
@media (min-width: 1400px) {

    .hero h1 {
        font-size: 2.75rem;
    }

    .hero-image {
        max-width: 540px;
    }

    .section-title {
        font-size: 2.75rem;
    }
}

/* ============================================================
   ACCESIBILIDAD — Preferencia de movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
        scroll-behavior:      auto !important;
    }
}

/* ============================================================
   PRINT — Estilos de impresión
   ============================================================ */
@media print {

    .top-banner,
    .header,
    .menu-toggle,
    .menu-overlay,
    .popup-overlay,
    .free-shipping-bar,
    .stictag-toast,
    .footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color:     #000;
    }

    a::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}
/* ============================================================
   PÁGINA CATEGORÍA PACKS AHORRO
   ============================================================ */

.category-hero-section {
    background:  linear-gradient(135deg, #FFF4F0 0%, #FFF0F9 50%, #F0F9FF 100%);
    padding:     2.5rem 0 2rem;
    border-bottom: 2px solid var(--cream-dark);
}

.category-hero-content {
    max-width: 800px;
}

.category-hero-title {
    font-family: var(--font-display);
    font-size:   2.5rem;
    font-weight: 800;
    color:       var(--text-dark);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.category-hero-text {
    font-size:   1rem;
    color:       var(--text-mid);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.category-hero-badges {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.5rem;
}

.category-badge {
    background:    linear-gradient(135deg, #FFF0F5, #FFE8F5);
    border:        1.5px solid rgba(255, 105, 180, 0.25);
    border-radius: var(--radius-full);
    padding:       0.4rem 0.9rem;
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--text-dark);
    white-space:   nowrap;
}

.category-products-section {
    padding: var(--section-padding);
    background: var(--cream);
}

.products-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
    margin-bottom:         3rem;
}

.pack-card .product-image-placeholder {
    display:     flex;
    align-items: center;
    justify-content: center;
    height:      220px;
    font-size:   4rem;
    background:  linear-gradient(135deg, #FFF4F0, #FFF9F5);
    border-radius: var(--radius-md);
}

.btn-product-detail {
    display:         block;
    text-align:      center;
    background:      linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:           var(--white);
    padding:         0.75rem 1.5rem;
    border-radius:   var(--radius-full);
    font-weight:     700;
    font-size:       0.9rem;
    transition:      all 0.3s var(--ease);
    text-decoration: none;
    margin-top:      auto;
}

.btn-product-detail:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.35);
}

.category-pagination {
    display:         flex;
    justify-content: center;
    gap:             0.5rem;
    flex-wrap:       wrap;
}

.category-pagination a,
.category-pagination span {
    padding:       0.5rem 1rem;
    border-radius: var(--radius-md);
    border:        2px solid var(--primary-light);
    color:         var(--primary);
    font-weight:   600;
    transition:    all 0.2s;
}

.category-pagination .current {
    background: var(--primary);
    color:      var(--white);
    border-color: var(--primary);
}

/* SEO SECTION */
.category-seo-section {
    background: var(--white);
    padding:    var(--section-padding);
    border-top: 2px solid var(--cream-dark);
}

.category-seo-content {
    max-width:     800px;
    margin:        0 auto 3rem;
    color:         var(--text-dark);
    line-height:   1.8;
}

.category-seo-content h2 {
    font-family:  var(--font-display);
    font-size:    1.6rem;
    font-weight:  700;
    margin:       2.5rem 0 1rem;
    color:        var(--text-dark);
}

.category-seo-content h2:first-child { margin-top: 0; }

.category-seo-content h3 {
    font-family:  var(--font-display);
    font-size:    1.2rem;
    font-weight:  700;
    margin:       1.5rem 0 0.75rem;
    color:        var(--primary-dark);
}

.category-seo-content p  { margin-bottom: 1rem; }

.seo-benefits-list {
    list-style:    none;
    padding:       0;
    margin:        1rem 0 1.5rem;
    display:       flex;
    flex-direction: column;
    gap:           0.75rem;
}

.seo-benefits-list li {
    padding:       0.75rem 1rem 0.75rem 1.25rem;
    background:    linear-gradient(135deg, #FFF4F0, #FFF9F5);
    border-left:   4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* FAQs ACORDEÓN */
.category-faqs {
    max-width: 800px;
    margin:    0 auto;
}

.category-faqs h2 {
    font-family:  var(--font-display);
    font-size:    1.6rem;
    font-weight:  700;
    color:        var(--text-dark);
    margin-bottom: 1.5rem;
}

.faq-list {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.faq-item {
    background:    var(--white);
    border:        2px solid var(--cream-dark);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    border-color 0.2s;
}

.faq-item[open] {
    border-color: var(--primary-light);
}

.faq-question {
    list-style:      none;
    padding:         1.1rem 1.5rem;
    font-weight:     700;
    font-size:       1rem;
    color:           var(--text-dark);
    cursor:          pointer;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    gap:             1rem;
    transition:      background 0.2s;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content:     '+';
    font-size:   1.4rem;
    font-weight: 300;
    color:       var(--primary);
    flex-shrink: 0;
    transition:  transform 0.3s;
}

.faq-item[open] .faq-question::after {
    transform: rotate(45deg);
}

.faq-question:hover {
    background: #FFF4F0;
}

.faq-answer {
    padding:     0 1.5rem 1.25rem;
    color:       var(--text-mid);
    line-height: 1.7;
    font-size:   0.95rem;
}

.no-products {
    text-align: center;
    padding:    3rem;
    color:      var(--text-mid);
    font-size:  1.1rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .category-hero-title { font-size: 2rem; }
}

@media (max-width: 600px) {
    .products-grid { grid-template-columns: 1fr; }
    .category-hero-title { font-size: 1.6rem; }
    .category-hero-badges { gap: 0.4rem; }
    .category-badge { font-size: 0.75rem; }
    .category-seo-content h2 { font-size: 1.3rem; }
}
/* ============================================================
   CATEGORÍA PACKS — Estilos completos
   ============================================================ */

/* HERO */
.cat-hero {
    background:    linear-gradient(135deg, #FFF0F8 0%, #FFF4EC 60%, #F0F8FF 100%);
    padding:       1.25rem 0 1rem;
    border-bottom: 2px solid #F5E0F0;
}

.cat-breadcrumbs-inline {
    font-size:     0.75rem;
    color:         var(--text-light);
    margin-bottom: 0.5rem;
}

.cat-breadcrumbs-inline a {
    color:           var(--text-light);
    text-decoration: none;
}

.cat-breadcrumbs-inline a:hover {
    color:           var(--primary);
    text-decoration: underline;
}

.cat-hero-inner {
    display:     grid;
    grid-template-columns: 1fr auto;
    gap:         1.5rem;
    align-items: center;
}

.cat-hero-label {
    display:       inline-block;
    background:    linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:         white;
    padding:       0.25rem 0.85rem;
    border-radius: var(--radius-full);
    font-size:     0.75rem;
    font-weight:   700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.cat-hero-title {
    font-family:   var(--font-display);
    font-size:     2rem;
    font-weight:   800;
    color:         var(--text-dark);
    line-height:   1.1;
    margin-bottom: 0.5rem;
}

.cat-hero-desc {
    font-size:     0.9rem;
    color:         var(--text-mid);
    line-height:   1.6;
    margin-bottom: 0.75rem;
    max-width:     580px;
}

.cat-hero-pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.4rem;
}

.cat-pill {
    background:    white;
    border:        2px solid rgba(255, 105, 180, 0.2);
    border-radius: var(--radius-full);
    padding:       0.25rem 0.7rem;
    font-size:     0.78rem;
    font-weight:   600;
    color:         var(--text-dark);
    box-shadow:    0 2px 8px rgba(255, 105, 180, 0.08);
}

.cat-hero-stats {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    background:     white;
    border-radius:  var(--radius-lg);
    padding:        1.25rem 1.5rem;
    box-shadow:     var(--shadow-soft);
    border:         2px solid rgba(255, 105, 180, 0.1);
    min-width:      160px;
    text-align:     center;
}

.cat-stat-num {
    display:     block;
    font-family: var(--font-display);
    font-size:   1.6rem;
    font-weight: 800;
    color:       var(--primary);
    line-height: 1;
}

.cat-stat-label {
    display:   block;
    font-size: 0.72rem;
    color:     var(--text-mid);
    font-weight: 600;
    margin-top: 0.15rem;
}

/* PRODUCTOS */
/* Subcategorías — pills horizontales */
.cat-subcategories {
    padding: 0.5rem 0;
    background: var(--white);
}

.cat-subcat-nav {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.75rem;
    justify-content: center;
}

.cat-subcat-pill {
    display:        inline-flex;
    align-items:    center;
    padding:        0.6rem 1.4rem;
    background:     var(--cream);
    color:          var(--text-dark);
    border-radius:  var(--radius-full);
    font-size:      0.9rem;
    font-weight:    600;
    text-decoration: none;
    transition:     all 0.3s ease;
    border:         2px solid transparent;
}

.cat-subcat-pill:hover {
    background:   var(--primary-light);
    color:        var(--primary-dark);
    border-color: var(--primary);
    transform:    translateY(-2px);
}

/* Categorías relacionadas — grid de tarjetas */
.cat-related-categories {
    padding:    2rem 0;
    background: var(--white);
}

.cat-related-title {
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 1.25rem;
    text-align:    center;
}

.cat-related-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   1rem;
}

.cat-related-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    padding:         1.25rem 0.75rem;
    background:      var(--cream);
    border-radius:   var(--radius-md);
    text-decoration: none;
    transition:      all 0.3s ease;
    border:          2px solid transparent;
}

.cat-related-item:hover {
    background:   var(--primary-light);
    border-color: var(--primary);
    transform:    translateY(-3px);
    box-shadow:   0 4px 12px rgba(255, 105, 180, 0.15);
}

.cat-related-icon {
    font-size:     2rem;
    margin-bottom: 0.5rem;
}

.cat-related-name {
    font-size:   0.85rem;
    font-weight: 700;
    color:       var(--text-dark);
    line-height: 1.3;
}

.cat-related-desc {
    font-size:  0.75rem;
    color:      var(--text-light);
    margin-top: 0.25rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .cat-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cat-subcat-nav {
        justify-content: center;
    }
    .cat-subcat-pill {
        font-size: 0.8rem;
        padding:   0.5rem 1rem;
    }
}

@media (max-width: 480px) {
    .cat-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

.cat-products-section {
    padding:    1rem 0 2rem;
    background: #FAFAFA;
}

.cat-products-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
}

.cat-product-card {
    background:     white;
    border-radius:  var(--radius-lg);
    overflow:       hidden;
    box-shadow:     var(--shadow-soft);
    position:       relative;
    transition:     all 0.35s var(--ease);
    border:         2px solid transparent;
    display:        flex;
    flex-direction: column;
}

.cat-product-card:hover {
    transform:    translateY(-6px);
    box-shadow:   var(--shadow-hover);
    border-color: var(--primary-light);
}

.cat-product-badge {
    position:      absolute;
    top:           1rem;
    left:          1rem;
    background:    linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:         white;
    padding:       0.35rem 0.9rem;
    border-radius: var(--radius-full);
    font-size:     0.75rem;
    font-weight:   700;
    z-index:       2;
}

.sale-badge {
    background: linear-gradient(135deg, #FF6B35, #FF4500);
}

.cat-product-img-wrap {
    display:    block;
    background: linear-gradient(135deg, #FFF4F0, #FFF9F5);
    padding:    1.5rem;
    overflow:   hidden;
}

.cat-product-img {
    width:         100%;
    height:        200px;
    object-fit:    cover;
    border-radius: var(--radius-md);
    transition:    transform 0.5s var(--ease);
}

.cat-product-card:hover .cat-product-img {
    transform: scale(1.04);
}

.cat-product-img-placeholder {
    height:          200px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       4rem;
}

.cat-product-body {
    padding:        1.25rem 1.5rem 1.5rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            0.6rem;
}

.cat-product-title {
    font-family:  var(--font-display);
    font-size:    1.15rem;
    font-weight:  700;
    line-height:  1.3;
    color:        var(--text-dark);
}

.cat-product-title a {
    color: inherit;
}

.cat-product-rating {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.85rem;
    color:       var(--text-mid);
}

.cat-product-price {
    font-size:   1.3rem;
    font-weight: 800;
    color:       var(--primary-dark);
}

.cat-product-price .woocommerce-Price-amount { color: var(--primary-dark); }
.cat-product-price ins { text-decoration: none; }
.cat-product-price del { font-size: 0.9rem; color: var(--text-light); font-weight: 400; margin-right: 0.5rem; }

.cat-product-btn {
    display:         block;
    text-align:      center;
    background:      linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:           white !important;
    padding:         0.8rem 1.5rem;
    border-radius:   var(--radius-full);
    font-weight:     700;
    font-size:       0.9rem;
    transition:      all 0.3s var(--ease);
    text-decoration: none;
    margin-top:      auto;
}

.cat-product-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 105, 180, 0.35);
}

.cat-no-products {
    text-align:  center;
    padding:     4rem 2rem;
    color:       var(--text-mid);
}

.cat-no-products span { font-size: 3rem; display: block; margin-bottom: 1rem; }

.cat-pagination {
    display:         flex;
    justify-content: center;
    gap:             0.5rem;
    margin-top:      3rem;
    flex-wrap:       wrap;
}

.cat-pagination a,
.cat-pagination span {
    padding:       0.5rem 1rem;
    border-radius: var(--radius-md);
    border:        2px solid var(--primary-light);
    color:         var(--primary);
    font-weight:   600;
    transition:    all 0.2s;
}

.cat-pagination .current {
    background:   var(--primary);
    color:        white;
    border-color: var(--primary);
}

/* SEO SECTION */
.cat-seo-section {
    background:  white;
    padding:     var(--section-padding);
    border-top:  2px solid #F0E8F5;
}

.cat-seo-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   4rem;
    align-items:           start;
}

.cat-seo-text h2 {
    font-family:  var(--font-display);
    font-size:    1.5rem;
    font-weight:  700;
    color:        var(--text-dark);
    margin:       2rem 0 0.75rem;
}

.cat-seo-text h2:first-child { margin-top: 0; }

.cat-seo-text h3 {
    font-family:  var(--font-display);
    font-size:    1.1rem;
    font-weight:  700;
    color:        var(--primary-dark);
    margin:       1.5rem 0 0.5rem;
}

.cat-seo-text p {
    color:       var(--text-mid);
    line-height: 1.8;
    margin-bottom: 0.75rem;
    font-size:   0.95rem;
}

.cat-seo-list {
    list-style:     none;
    padding:        0;
    margin:         1rem 0;
    display:        flex;
    flex-direction: column;
    gap:            0.65rem;
}

.cat-seo-list li {
    padding:       0.75rem 1rem 0.75rem 1.25rem;
    background:    linear-gradient(135deg, #FFF4F0, #FFF9F5);
    border-left:   4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size:     0.9rem;
    color:         var(--text-dark);
    line-height:   1.6;
}

/* FAQs */
.cat-faqs h2 {
    font-family:   var(--font-display);
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 1.5rem;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .cat-hero-inner        { grid-template-columns: 1fr; }
    .cat-hero-stats        { flex-direction: row; justify-content: space-around; padding: 0.75rem 1rem; }
    .cat-products-grid     { grid-template-columns: repeat(2, 1fr); }
    .cat-seo-grid          { grid-template-columns: 1fr; gap: 2rem; }
    .cat-hero-title        { font-size: 1.8rem; }
    .cat-hero-desc         { display: none; }
    .cat-hero              { padding: 1rem 0 0.75rem; }
}

@media (max-width: 600px) {
    .cat-products-grid     { grid-template-columns: 1fr; }
    .cat-hero-title        { font-size: 1.3rem; margin-bottom: 0.25rem; }
    .cat-hero-stats        { flex-direction: row; gap: 0.5rem; padding: 0.5rem 0.75rem; }
    .cat-hero-pills        { gap: 0.25rem; }
    .cat-pill              { font-size: 0.65rem; padding: 0.15rem 0.4rem; }
    .cat-stat-num          { font-size: 1.1rem; }
    .cat-stat-label        { font-size: 0.6rem; }
    .cat-hero              { padding: 0.5rem 0 0.5rem; }
    .cat-hero-desc         { display: none; }
    .cat-hero-label        { font-size: 0.65rem; padding: 0.2rem 0.6rem; margin-bottom: 0.25rem; }
    .cat-hero-inner        { gap: 0.75rem; }
    .cat-subcategories     { padding: 0.25rem 0; }
    .cat-subcat-pill       { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
    .cat-breadcrumbs-inline { font-size: 0.65rem; margin-bottom: 0.25rem; }
}
/* ============================================================
   CATEGORÍA MOCHILAS — 3 cajas subcategorías
   ============================================================ */

.mochilas-subcats-section {
    background:    #FAFAFA;
    padding:       2.5rem 0 3rem;
    border-bottom: 2px solid #F0E8F5;
}

.mochilas-subcats-title {
    font-family:   var(--font-display);
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--text-dark);
    text-align:    center;
    margin-bottom: 1.75rem;
}

.mochilas-subcats-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}

.mochila-subcat-card {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    background:     white;
    border-radius:  var(--radius-lg);
    padding:        2.5rem 1.5rem 2rem;
    box-shadow:     var(--shadow-soft);
    border:         2px solid transparent;
    transition:     all 0.35s var(--ease);
    text-decoration: none;
    color:           inherit;
    gap:            1rem;
}

.mochila-subcat-card:hover {
    transform:    translateY(-6px);
    box-shadow:   var(--shadow-hover);
    border-color: var(--primary-light);
}

.mochila-subcat-card--guarderia { background: linear-gradient(160deg, #FFF4F0 0%, white 60%); }
.mochila-subcat-card--escolares { background: linear-gradient(160deg, #F0F8FF 0%, white 60%); }
.mochila-subcat-card--sacos     { background: linear-gradient(160deg, #F0FFF4 0%, white 60%); }

.mochila-subcat-emoji {
    font-size:      3.5rem;
    line-height:    1;
    filter:         drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    transition:     transform 0.3s var(--ease);
}

.mochila-subcat-card:hover .mochila-subcat-emoji {
    transform: scale(1.15) rotate(-5deg);
}

.mochila-subcat-title {
    font-family:  var(--font-display);
    font-size:    1.2rem;
    font-weight:  700;
    color:        var(--text-dark);
    margin:       0;
}

.mochila-subcat-desc {
    font-size:  0.85rem;
    color:      var(--text-mid);
    line-height: 1.5;
    margin:     0;
}

.mochila-subcat-btn {
    display:       inline-block;
    background:    linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:         white;
    padding:       0.5rem 1.25rem;
    border-radius: var(--radius-full);
    font-size:     0.85rem;
    font-weight:   700;
    margin-top:    0.5rem;
    transition:    all 0.2s;
}

.mochila-subcat-card:hover .mochila-subcat-btn {
    box-shadow: 0 6px 16px rgba(255, 105, 180, 0.35);
}

.cat-products-heading {
    font-family:   var(--font-display);
    font-size:     1.5rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 1.75rem;
    text-align:    center;
}

@media (max-width: 768px) {
    .mochilas-subcats-grid { grid-template-columns: 1fr; gap: 1rem; }
    .mochila-subcat-card   { flex-direction: row; text-align: left; padding: 1.25rem; gap: 1rem; }
    .mochila-subcat-emoji  { font-size: 2.5rem; flex-shrink: 0; }
    .mochila-subcat-body   { display: flex; flex-direction: column; gap: 0.25rem; }
}
/* ============================================================
   PILLS DE SUBCATEGORÍAS — Justo debajo de breadcrumbs
   ============================================================ */

.subcat-pills-bar {
    background:     white;
    padding:        0.75rem 0;
    border-bottom:  1px solid #F0E8F5;
}

.subcat-pills-inner {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    flex-wrap:       nowrap;
    overflow-x:      auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding:         0 0.5rem;
}

.subcat-pills-inner::-webkit-scrollbar { display: none; }

.subcat-pill-label {
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--text-mid);
    white-space: nowrap;
    flex-shrink: 0;
}

.subcat-pill-link {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.3rem;
    text-decoration: none;
    flex-shrink:     0;
    transition:      transform 0.2s;
}

.subcat-pill-link:hover { transform: translateY(-2px); }

.subcat-pill-circle {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #FFF0F8, #FFE4F5);
    border:          2px solid rgba(255,105,180,0.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.4rem;
    transition:      all 0.2s;
    box-shadow:      0 2px 8px rgba(255,105,180,0.1);
}

.subcat-pill-link:hover .subcat-pill-circle,
.subcat-pill-link.active .subcat-pill-circle {
    background:  linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    box-shadow:  0 4px 12px rgba(255,105,180,0.35);
}

.subcat-pill-name {
    font-size:   0.68rem;
    font-weight: 600;
    color:       var(--text-dark);
    text-align:  center;
    white-space: nowrap;
    max-width:   60px;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.subcat-pill-link.active .subcat-pill-name { color: var(--primary); }

@media (max-width: 600px) {
    .subcat-pill-circle { width: 46px; height: 46px; font-size: 1.2rem; }
    .subcat-pill-name   { font-size: 0.62rem; }
}
/* ============================================================
   BLOG — Estilos para artículos individuales (single post)
   Selectores específicos para NO afectar categorías/productos
   ============================================================ */

body.single-post .entry-content,
body.single-post .post-content,
body.single-post #page-content {
    max-width:  780px;
    margin:     0 auto;
    padding:    2rem 1.5rem 3rem;
}

body.single-post .entry-content p,
body.single-post .post-content p {
    margin-bottom:  1.25rem;
    line-height:    1.75;
    font-size:      1rem;
    color:          var(--text-mid);
}

body.single-post .entry-content h2,
body.single-post .post-content h2 {
    font-family:    var(--font-display);
    font-size:      1.6rem;
    font-weight:    700;
    color:          var(--text-dark);
    margin-top:     2.5rem;
    margin-bottom:  1rem;
    line-height:    1.2;
}

body.single-post .entry-content h3,
body.single-post .post-content h3 {
    font-family:    var(--font-display);
    font-size:      1.25rem;
    font-weight:    700;
    color:          var(--text-dark);
    margin-top:     2rem;
    margin-bottom:  0.75rem;
}

body.single-post .entry-content ul,
body.single-post .post-content ul {
    margin:         1rem 0 1.5rem 1.5rem;
    padding:        0;
    list-style:     disc;
}

body.single-post .entry-content ul li,
body.single-post .post-content ul li {
    margin-bottom:  0.5rem;
    line-height:    1.65;
    color:          var(--text-mid);
}

body.single-post .entry-content a,
body.single-post .post-content a {
    color:           var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.single-post .entry-content a:hover,
body.single-post .post-content a:hover {
    color: var(--primary);
}

/* Tablas en blog (solo single post) */
body.single-post .entry-content table,
body.single-post .post-content table {
    width:           100%;
    border-collapse: collapse;
    margin:          1.5rem 0 2rem;
    font-size:       0.9rem;
    background:      white;
    border-radius:   var(--radius-md);
    overflow:        hidden;
    box-shadow:      0 2px 8px rgba(0,0,0,0.06);
}

body.single-post .entry-content table thead,
body.single-post .post-content table thead {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:      white;
}

body.single-post .entry-content table th,
body.single-post .post-content table th {
    padding:     0.75rem 1rem;
    font-weight: 700;
    text-align:  left;
    font-size:   0.82rem;
}

body.single-post .entry-content table td,
body.single-post .post-content table td {
    padding:       0.65rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    color:         var(--text-mid);
}

body.single-post .entry-content table tbody tr:hover,
body.single-post .post-content table tbody tr:hover {
    background: var(--cream);
}

body.single-post .entry-content table strong,
body.single-post .post-content table strong {
    color: var(--text-dark);
}

@media (max-width: 600px) {
    body.single-post .entry-content table,
    body.single-post .post-content table {
        font-size:  0.78rem;
        display:    block;
        overflow-x: auto;
    }
    body.single-post .entry-content table th,
    body.single-post .entry-content table td {
        padding:     0.5rem 0.6rem;
        white-space: nowrap;
    }
}

/* ============================================================
   CATEGORÍA — Sección Blog (tarjetas "Guías y consejos")
   ============================================================ */

.cat-blog-section {
    padding:    2.5rem 0 3rem;
    background: var(--white);
}

.cat-blog-heading {
    font-family:   var(--font-display);
    font-size:     1.4rem;
    font-weight:   700;
    color:         var(--text-dark);
    margin-bottom: 1.5rem;
    text-align:    center;
}

.cat-blog-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:                   1.5rem;
}

.cat-blog-card {
    display:         block;
    background:      var(--cream);
    border-radius:   var(--radius-md);
    overflow:        hidden;
    text-decoration: none;
    transition:      all 0.3s ease;
    border:          2px solid transparent;
}

.cat-blog-card:hover {
    border-color: var(--primary);
    transform:    translateY(-3px);
    box-shadow:   0 6px 16px rgba(255, 105, 180, 0.12);
}

.cat-blog-img {
    width:      100%;
    height:     160px;
    object-fit: cover;
    display:    block;
}

.cat-blog-title {
    font-family: var(--font-display);
    font-size:   0.95rem;
    font-weight: 700;
    color:       var(--text-dark);
    padding:     1rem;
    line-height: 1.35;
    margin:      0;
}

@media (max-width: 768px) {
    .cat-blog-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .cat-blog-card {
        display:               grid;
        grid-template-columns: 120px 1fr;
    }
    .cat-blog-img {
        height: 100%;
    }
    .cat-blog-title {
        font-size: 0.85rem;
        padding:   0.75rem;
    }
}


/* ═══════════════════════════════════════════════════
   WOOCOMMERCE — PRODUCT DESCRIPTION TAB
   ═══════════════════════════════════════════════════ */

.woocommerce-Tabs-panel h2 {
    color:          var(--primary-dark) !important;
    font-size:      1.4em;
    border-bottom:  2px solid var(--primary-light);
    padding-bottom: 0.4em;
    margin-top:     0.5em;
}

.woocommerce-Tabs-panel h3 {
    color:       var(--primary-dark);
    font-size:   1.15em;
    margin-top:  1.5em;
    font-family: var(--font-body);
}

.woocommerce-Tabs-panel ul {
    line-height: 1.8;
    padding-left: 1.5em;
}

.woocommerce-Tabs-panel ul li {
    margin-bottom: 0.6em;
}

.woocommerce-Tabs-panel a {
    color:           var(--primary) !important;
    text-decoration: underline !important;
    font-weight:     600;
    transition:      color 0.2s;
}

.woocommerce-Tabs-panel a:hover {
    color:           var(--primary-dark) !important;
    text-decoration: underline !important;
}

/* Description short (below price) */
.woocommerce-product-details__short-description a {
    color:           var(--primary) !important;
    text-decoration: underline !important;
    font-weight:     600;
}

.woocommerce-product-details__short-description a:hover {
    color: var(--primary-dark) !important;
}
/* ═══════════════════════════════════════════════════════
   BUSCADOR DE PRODUCTOS — SticTag
   Añadir al final de /assets/css/main.css
   O copiar en Apariencia → Personalizar → CSS adicional
   ═══════════════════════════════════════════════════════ */

/* --- Contenedor del buscador en desktop --- */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- Formulario --- */
.st-search-form {
    display: flex;
    align-items: center;
    position: relative;
    background: #f5f5f7;
    border: 2px solid transparent;
    border-radius: 50px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.st-search-form:focus-within {
    background: #fff;
    border-color: var(--color-brand, #6c5ce7);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
}

/* --- Input --- */
.st-search-input {
    border: none;
    background: transparent;
    padding: 9px 14px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    color: #333;
    width: 200px;
    outline: none;
    transition: width 0.3s ease;
}

.st-search-input::placeholder {
    color: #999;
    font-size: 13px;
}

.st-search-input:focus {
    width: 260px;
}

/* --- Botón buscar --- */
.st-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
    flex-shrink: 0;
}

.st-search-btn:hover {
    color: var(--color-brand, #6c5ce7);
}

.st-search-btn svg {
    display: block;
}

/* --- Responsive: Tablet --- */
@media (max-width: 1024px) {
    .st-search-input {
        width: 150px;
        font-size: 13px;
        padding: 8px 12px;
    }

    .st-search-input:focus {
        width: 180px;
    }
}

/* --- Responsive: Móvil --- */
@media (max-width: 768px) {
    .search-wrapper {
        /* En móvil, el buscador ocupa todo el ancho bajo el header */
        order: 10;
        width: 100%;
        padding: 0 16px 12px;
    }

    .st-search-form {
        width: 100%;
    }

    .st-search-input {
        width: 100% !important;
        font-size: 15px;
        padding: 11px 16px;
    }

    .st-search-btn {
        padding: 10px 14px;
    }
}

/* --- Ocultar label accesibilidad (visible solo para screen readers) --- */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- Página de resultados de búsqueda --- */
.woocommerce-result-count {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
}

/* Estilos para cuando no hay resultados */
.woocommerce-info {
    padding: 20px;
    background: #f8f9fa;
    border-left: 4px solid var(--color-brand, #6c5ce7);
    border-radius: 8px;
    margin: 20px 0;
}