/* ============================================================
   CEREZA MAKEUP — Mobile-First Responsive CSS
   Optimizado para celular (dispositivo principal de compra)
   ============================================================ */

/* ════════════════════════════════════
   VARIABLES MÓVIL
════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --s-3xl: 3.5rem;
    --s-2xl: 2rem;
    --s-xl:  1.5rem;
  }
  .container { padding: 0 1rem; }
  .section { padding: var(--s-3xl) 0; }
}

/* ════════════════════════════════════
   NAV — menú hamburguesa móvil
════════════════════════════════════ */
@media (max-width: 768px) {
  .nav { padding: 0 1rem; height: 64px; }
  .nav-inner { gap: 0; }
  .nav-logo { font-size: 1.25rem; }
  .cherry-logo-icon { width: 28px; height: 28px; }
  .cherry-logo-icon svg { width: 22px; height: 22px; }

  /* Ocultar links desktop */
  .nav-links { display: none; }

  /* Ocultar texto del carrito, solo icono+badge */
  .btn-cart {
    padding: .5rem .75rem;
    font-size: 0;          /* oculta texto */
    gap: 0;
  }
  .btn-cart i { font-size: .95rem; }
  .btn-cart::after { display: none; }
  /* Mantener el badge visible */
  .cart-badge { font-size: .6rem; top: -5px; right: -5px; }

  /* Botón Admin compacto */
  .btn-nav-ghost { padding: .4rem .65rem; font-size: .72rem; }
  .btn-nav-ghost span { display: none; } /* si hubiera texto extra */

  /* Menú móvil desplegable — activado desde JS con clase .mobile-open */
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(160deg, #3d0a28 0%, #7a0d55 50%, #c4197a 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 90px 2rem 2rem;
    z-index: 99;
    gap: 0;
    animation: mobileNavIn 0.3s cubic-bezier(0.34,1.3,0.64,1) both;
  }
  @keyframes mobileNavIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-links.mobile-open a {
    padding: 1.1rem 1rem;
    font-size: 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    color: rgba(255,255,255,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    letter-spacing: .04em;
    transition: color .2s, padding-left .2s;
  }
  .nav-links.mobile-open a:hover { color: #fff; padding-left: 1.5rem; }
  .nav-links.mobile-open a:last-child { border-bottom: none; }
  .nav-links.mobile-open a.active { color: #ffb3e6; font-weight: 400; }
  .nav-links.mobile-open a::after { display: none; }

  /* Botón hamburguesa */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px; height: 38px;
    background: none; border: none;
    cursor: pointer; padding: 4px;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px;
    background: #e91e8c; border-radius: 2px;
    transition: transform .3s, opacity .3s, width .3s;
    transform-origin: center;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Transparente: ícono blanco */
  .nav.transparent .nav-hamburger span { background: #fff; }
}

@media (min-width: 769px) {
  .nav-hamburger { display: none; }
}

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    padding-top: 64px;
    display: flex;
    align-items: center;
  }
  .hero-content {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 10rem;
    gap: 0;
    text-align: center;
  }
  .hero-right { display: none; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.2rem); margin-bottom: 1rem; }
  .hero-sub { font-size: .9rem; max-width: 100%; margin: 0 auto 1.5rem; }
  .hero-badge-wrap { justify-content: center; margin-bottom: 1rem; }
  .hero-ctas {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
  }
  .hero-ctas .btn { width: 100%; max-width: 300px; justify-content: center; }
  .hero-text { padding-bottom: 0; }

  /* Stats bar más compacta */
  .hero-stats-inner {
    gap: 1rem; padding: 1rem;
    justify-content: space-around; flex-wrap: nowrap;
  }
  .hero-stat { flex-direction: column; align-items: center; text-align: center; gap: 4px; }
  .hero-stat-icon { width: 32px; height: 32px; font-size: .8rem; }
  .hero-stat-num { font-size: 1rem; }
  .hero-stat-label { font-size: .58rem; }
  .hero-stat-divider { display: none; }

  /* Botón "Descubre más" */
  .hero-scroll { bottom: 8rem; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero-stats-inner { gap: .5rem; padding: .75rem .5rem; }
  .hero-stat-label { display: none; }
}

/* ════════════════════════════════════
   MARQUEE
════════════════════════════════════ */
@media (max-width: 768px) {
  .marquee-item { font-size: .72rem; }
}

/* ════════════════════════════════════
   CATEGORÍAS (MOSAIC)
════════════════════════════════════ */
@media (max-width: 768px) {
  .mosaic-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: .6rem;
  }
  .mosaic-cell.featured {
    grid-column: 1 / 3;
    min-height: 160px;
  }
  .mosaic-cell { min-height: 110px; }
  .mosaic-cell.tall { grid-row: auto; }
  .mosaic-label h3 { font-size: 1.1rem; }
  .mosaic-cell.featured .mosaic-label h3 { font-size: 1.5rem; }
  .mosaic-label p { display: none; }
  .mosaic-arrow { display: none; }
  .mosaic-cell-icon { font-size: 2.5rem !important; opacity: .2; }
  .mosaic-cell.featured .mosaic-cell-icon { font-size: 4rem !important; }
  .section-header { margin-bottom: 1.25rem; }
}

/* ════════════════════════════════════
   PRODUCTOS SLIDER
════════════════════════════════════ */
@media (max-width: 768px) {
  .slider-track .product-card {
    flex: 0 0 72vw;
    min-width: 0;
  }
  .slider-btn { display: none; }
  .slider-track-container { cursor: grab; }
  .slider-dots { margin-top: 1rem; }
}

/* ════════════════════════════════════
   PRODUCTOS GRID (sección Tienda)
════════════════════════════════════ */
@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    gap: .6rem;
    padding: .85rem;
    border-radius: 12px;
    margin-bottom: 1.25rem;
  }
  .search-wrap { min-width: 0; width: 100%; }
  .filter-bar select,
  .filter-bar .form-field { width: 100%; font-size: .85rem; }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
  }
  .product-img { height: 150px; }
  .product-info { padding: .75rem; }
  .product-name { font-size: .85rem; }
  .product-price { font-size: 1rem; }
  .add-btn { font-size: .75rem; padding: .5rem .85rem; }
}

@media (max-width: 380px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .product-img { height: 130px; }
  .product-info { padding: .6rem; }
  .product-name { font-size: .78rem; }
}

/* ════════════════════════════════════
   TARJETA DE PRODUCTO — card
════════════════════════════════════ */
@media (max-width: 768px) {
  .product-card { border-radius: 12px; }
  .product-wish-btn {
    width: 30px; height: 30px;
    top: .4rem; right: .4rem;
    font-size: .8rem;
  }
  .badge {
    font-size: .55rem;
    padding: .1rem .5rem;
    top: .4rem; left: .4rem;
  }
}

/* ════════════════════════════════════
   MODAL DE PRODUCTO
════════════════════════════════════ */
@media (max-width: 768px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
    width: 100%;
    max-width: 100%;
  }
  .modal-img { height: 220px; border-radius: 20px 20px 0 0; }
  .modal-body { padding: 1.25rem 1rem 2rem; }
  .modal-price { font-size: 1.7rem; }
  .modal-close { top: .75rem; right: .75rem; }
  .modal-actions { flex-direction: column; gap: .6rem; }
  .modal-actions .btn { width: 100%; justify-content: center; }
  .modal-qty { justify-content: center; }
}

/* ════════════════════════════════════
   CARRITO LATERAL
════════════════════════════════════ */
@media (max-width: 768px) {
  .cart-sidebar {
    width: 100%;
    right: -100%;
  }
  .cart-sidebar.open { right: 0; }
  .cart-header { padding: 1rem 1.25rem; }
  .cart-items { padding: .75rem 1.25rem; }
  .cart-footer { padding: 1rem 1.25rem; }
  .cart-item-thumb { width: 52px; height: 52px; }
}

/* ════════════════════════════════════
   LIFESTYLE SPLITS
════════════════════════════════════ */
@media (max-width: 768px) {
  .lifestyle-split,
  .lifestyle-split.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .lifestyle-img { height: 220px; }
  .lifestyle-img-fill { border-radius: 0; }
  .lifestyle-content { padding: 2rem 1.25rem; }
  .lifestyle-content h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .lifestyle-content p { font-size: .875rem; margin-bottom: 1.25rem; }
  .lifestyle-tags { gap: .4rem; margin-bottom: 1.25rem; }
  .lifestyle-tag { font-size: .72rem; padding: .3rem .7rem; }
}

/* ════════════════════════════════════
   CAMPAIGN DUO
════════════════════════════════════ */
@media (max-width: 768px) {
  .campaign-duo { grid-template-columns: 1fr; gap: .75rem; }
  .campaign-card { min-height: 200px; }
  .campaign-content h3 { font-size: 1.4rem; }
  .campaign-content p { font-size: .8rem; }
}

/* ════════════════════════════════════
   VALORES
════════════════════════════════════ */
@media (max-width: 768px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .value-icon-ring { width: 48px; height: 48px; font-size: 1.1rem; }
  .value-title { font-size: .88rem; }
  .value-desc { font-size: .78rem; }
}

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

/* ════════════════════════════════════
   INSTAGRAM GRID
════════════════════════════════════ */
@media (max-width: 768px) {
  .insta-grid { grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .insta-grid .insta-cell:nth-child(4),
  .insta-grid .insta-cell:nth-child(5) { display: none; }
  .insta-cell { aspect-ratio: 1; }
}

/* ════════════════════════════════════
   TESTIMONIALES
════════════════════════════════════ */
@media (max-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: 1rem; }
  .testimonial-card { padding: 1.25rem; }
  .testimonial-text { font-size: .88rem; }
}

/* ════════════════════════════════════
   WISHLIST
════════════════════════════════════ */
@media (max-width: 768px) {
  #section-wishlist .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════
   CONTACTO
════════════════════════════════════ */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-item { gap: .75rem; }
  .contact-icon { width: 40px; height: 40px; font-size: .9rem; flex-shrink: 0; }
  .contact-item-value { font-size: .85rem; }
  .form-field { font-size: .9rem; }
  .btn-wa { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-inner { padding: 0 1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-brand-logo { font-size: 1.25rem; margin-bottom: .75rem; }
  .footer-top { padding: 2.5rem 0 1.5rem; }
  footer p { font-size: .8rem; }
  footer h4 { font-size: .8rem; }
  footer ul li a { font-size: .78rem; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4) { display: none; } /* hide menos importantes en móvil pequeño */
  .footer-bottom {
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    padding: 1rem 0;
  }
  .footer-payment-icons { justify-content: center; flex-wrap: wrap; gap: .4rem; }
}

/* ════════════════════════════════════
   SECCIÓN HERO SHAPES
════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-shape { display: none; }
}

/* ════════════════════════════════════
   BOTONES GENERALES
════════════════════════════════════ */
@media (max-width: 480px) {
  .btn { font-size: .85rem; padding: .7rem 1.2rem; }
  .btn-lg { padding: .85rem 1.5rem; font-size: .9rem; }
}

/* ════════════════════════════════════
   TEXTO / TIPOGRAFÍA
════════════════════════════════════ */
@media (max-width: 768px) {
  h2 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
  .section-header { margin-bottom: 1.25rem; }
  .eyebrow { font-size: .65rem; }
}

/* ════════════════════════════════════
   CURSOR GLOW — desactivar en touch
════════════════════════════════════ */
@media (hover: none) {
  .cursor-glow { display: none; }
}

/* ════════════════════════════════════
   ADMIN — mejoras móvil
════════════════════════════════════ */
@media (max-width: 768px) {
  .admin-main { padding: 0; }
  .admin-topbar { padding: .75rem 1rem; }
  .admin-topbar-title { font-size: .9rem; }
  .admin-content { padding: 1rem; }
  .admin-card { padding: 1rem; border-radius: 12px; }
  .admin-card-header { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .admin-card-actions { flex-wrap: wrap; gap: .4rem; width: 100%; }
  .admin-search { width: 100%; }
  .admin-search input { width: 100%; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .kpi-card { padding: .85rem; }
  .kpi-value { font-size: 1.4rem; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; font-size: .78rem; }
  .sell-grid { grid-template-columns: 1fr; }
  .sell-sticky { position: static; }
  .settings-card { padding: 1rem; }
  .form-row { grid-template-columns: 1fr; }

  /* Sidebar admin horizontal scroll en móvil */
  .admin-sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-sidebar-logo { display: none; }
  .admin-nav {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav-section { display: none; }
  .admin-nav-item {
    padding: .6rem 1rem;
    flex-direction: column;
    gap: 2px;
    font-size: .68rem;
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-nav-item.active {
    border-left: none;
    border-bottom-color: #e91e8c;
    color: #e91e8c;
  }
  .admin-sidebar-footer { display: none; }
  .admin-layout { flex-direction: column; }
}

/* ════════════════════════════════════
   LOGIN PAGE MÓVIL
════════════════════════════════════ */
@media (max-width: 480px) {
  .login-card {
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 20px;
    margin: 1rem;
  }
  .login-cherry { width: 60px; height: 60px; }
  .login-cherry svg { width: 34px; height: 34px; }
  .login-title { font-size: 1.6rem; }
}

/* ════════════════════════════════════
   SAFE AREA — notch / home indicator
════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .cart-sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .cart-footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  .wa-fab {
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
  .nav {
    padding-top: env(safe-area-inset-top);
  }
}

/* ════════════════════════════════════
   TOUCH — áreas de tap más grandes
════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .qty-btn { width: 34px; height: 34px; }
  .cart-close { width: 40px; height: 40px; }
  .modal-close { width: 40px; height: 40px; }
  .product-wish-btn { width: 36px; height: 36px; }
  .nav-links a { padding: .9rem 1.5rem; }
  .add-btn { padding: .6rem 1rem; min-height: 40px; }
  .btn-login { min-height: 50px; }
}

/* ════════════════════════════════════
   SCROLL SUAVE NATIVO
════════════════════════════════════ */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(233,30,140,0.08); }


/* ── Ocultar textos nav en móvil ── */
@media (max-width: 768px) {
  .cart-label { display: none; }
  .admin-label { display: none; }
  .btn-nav-ghost { padding: .45rem .7rem; }
}
@media (min-width: 769px) {
  .nav-hamburger { display: none !important; }
}