/* ================================================
   FRAGANCIA URBANA — mobile.css
   Breakpoint principal: max-width 768px
   ================================================ */

@media (max-width: 768px) {

  /* ── ZOOM AUTOMÁTICO EN INPUTS (iOS) ─────────────
     Safari en iPhone hace zoom automático al enfocar un input/select/
     textarea con font-size menor a 16px, y no siempre vuelve solo a la
     escala original al desenfocar. Forzamos 16px en todos los campos
     para que el buscador (y cualquier otro campo) no dispare ese zoom. */
  input, select, textarea {
    font-size: var(--fs-16) !important;
  }

  /* ── NAV ──────────────────────────────────────── */
  .nav-inner {
    padding: 0 var(--space-16);
  }

  .nav-links {
    display: none;
  }

  .nav-logo img {
    height: 28px;
  }

  /* ── TICKER ───────────────────────────────────── */
  .ticker-track span {
    font-size: var(--fs-12);
    padding: 0 var(--space-24);
  }

  /* ── HERO PRINCIPAL ───────────────────────────── */
  .hero-content {
    /* padding-bottom con margen extra + safe-area: en iPhone, Safari
       muestra una barra de navegación abajo (atrás/adelante/pestañas)
       que a veces tapa o dificulta ver el botón "Ver catálogo" si el
       hero termina justo en el borde inferior de la pantalla. */
    padding: 2rem 1.25rem calc(2.25rem + env(safe-area-inset-bottom, 0px));
  }

  .hero-content h1,
  .hero-content h2 {
    font-size: var(--fs-32);
    line-height: 1.2;
  }

  .hero-content em {
    font-size: var(--fs-28);
  }

  .hero-sub {
    font-size: var(--fs-14);
  }

  .hero-cta {
    flex-direction: column;
    gap: var(--space-8);
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── HERO SHORT (catálogo/nosotros/faq/promociones/términos) ──── */
  .hero-short {
    height: auto;
    min-height: 240px;
    padding-bottom: var(--space-24);
  }

  .hero-short-content h1 {
    font-size: var(--fs-24);
  }

  .hero-short-content-wide {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }

  .hero-short-content-wide h1 {
    font-size: var(--fs-28);
  }

  /* ── SECTIONS ─────────────────────────────────── */
  .section-inner {
    padding: 0 var(--space-20);
  }

  section {
    padding: var(--space-40) 0;
  }

  .section-title {
    font-size: var(--fs-28);
  }

  /* ── COLLECTION CARDS ─────────────────────────── */
  .collection-card {
    height: 260px;
    aspect-ratio: unset;
  }

  /* ── PRODUCTS GRID (index.html) ───────────────── */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }

  .product-card-body {
    padding: var(--space-12);
  }

  .product-card-name {
    font-size: var(--fs-14);
    --name-lh: 18px;                     /* alto de linea en px enteros (font 14px) */
    --name-lines: 3;                     /* 3 lineas = 54px exactos: solo ~6% del catalogo se corta (con 2 se cortaba el 51%) */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: var(--name-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-format-select {
    font-size: var(--fs-12);
  }

  .product-qty-wrap {
    flex-wrap: wrap;
    gap: var(--space-8);
  }

  /* ── VALUE PROP ───────────────────────────────── */
  .value-prop {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  /* ── CATALOG LAYOUT (hombre / mujer) ─────────── */
  .catalog-layout {
    grid-template-columns: 1fr;
    padding: var(--space-16) var(--space-20);
  }

  .catalog-sidebar {
    position: static;
  }

  .filter-tabs {
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
  }

  .filter-tab {
    flex: 0 0 auto;
    font-size: var(--fs-12);
    padding: var(--space-4) var(--space-12);
  }

  .catalog-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-20) var(--space-12);
  }

  .catalog-sort {
    width: 100%;
    margin-left: 0;
  }

  .catalog-sort select {
    width: 100%;
  }

  /* ── CATALOG CARDS (tienda.html) ──────────────── */
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }

  .catalog-card {
    display: flex;
    flex-direction: row;
    height: 120px;
  }

  .catalog-card-img {
    width: 120px;
    flex-shrink: 0;
    height: 100%;
    aspect-ratio: unset;
  }

  /* ── PROMO CARDS ──────────────────────────────── */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }

  /* ── HOW STEPS ────────────────────────────────── */
  .how-steps {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .how-step-connector {
    display: none;
  }

  /* ── FOOTER ───────────────────────────────────── */
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-16);
    text-align: center;
  }

  .footer-legal {
    font-size: var(--fs-10);
  }

  /* ── CARRITO ──────────────────────────────────── */
  .cart-main-grid {
    grid-template-columns: 1fr;
  }

  /* En vez de mover toda la columna derecha (eso ponia el Resumen antes
     que la lista de productos, muy arriba de todo), usamos display:contents
     para que cada bloque de la columna izquierda y de la derecha compitan
     en el mismo eje de "order" — asi el Resumen queda justo antes de
     "Realizar pedido", sin importar si el metodo es envio o retiro. */
  .cart-left,
  .cart-right {
    display: contents;
  }
  .cart-summary-card {
    order: 5;
    margin-top: var(--space-24);
  }
  .cart-sinpe-card {
    order: 6;
  }

  .cart-items-head {
    display: none;
  }

  .cart-item {
    flex-wrap: wrap;
    gap: var(--space-12);
  }

  .cart-item-price {
    display: none;
  }

  /* Subtotal en tiempo real debajo de la lista de productos. En mobile el
     "Resumen" completo (con Subtotal, Envío, Total) queda reordenado más
     abajo (order:5, justo antes de "Realizar pedido"), así que sin esto
     el cliente no ve cuánto lleva acumulado hasta bajar toda la página.
     Fondo blanco para que se note clarito, aparte del resto (que es todo
     oscuro). */
  .cart-mobile-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white, #faf7f2);
    color: #17171a;
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-16);
    margin: var(--space-16) 0;
    font-size: var(--fs-16);
    font-weight: 600;
  }
  .cart-mobile-subtotal span:last-child {
    color: #8a6d1f;
  }

  .cart-form-row {
    grid-template-columns: 1fr;
  }

  /* ── SINPE ────────────────────────────────────── */
  .sinpe-card {
    padding: var(--space-24) var(--space-20);
  }

  .sinpe-number-big {
    font-size: var(--fs-36);
  }

  /* ── VALUES GRID ──────────────────────────────── */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* ── INTRO SCREEN ─────────────────────────────── */
  #fu-intro-logo svg {
    width: 160px;
  }

}

/* ================================================
   TIENDA — buscador primero, categorías y filtros de marca como "Filtros"
   Breakpoint: max-width 1279px (antes 900px): el panel lateral se esconde
   detras del boton Filtros para darle el ancho a las tarjetas. Antes: para calzar con el punto en el que
   css/global.css apila .catalog-layout a una sola columna (ver
   @media (max-width:900px) ahí). Antes esto estaba atado a 768px y
   quedaba una "zona muerta" entre 769-900px con el layout apilado
   pero sin el tratamiento mobile (buscador arriba + Filtros).
   ================================================ */
@media (max-width: 1279px) {

  /* Panel lateral (genero / marca / limpiar) como desplegable oscuro bajo el boton Filtros.
     Lo mueve tienda.html al lado de #category-tabs; abierto con .filtros-open */
  .catalog-sidebar.filtros-collapsible {
    display: none;
    margin-top: var(--space-8);
    padding: var(--space-16);
    background: var(--dark-2);
    border: 1px solid rgba(201,168,76,0.25);
    border-radius: var(--radius);
  }
  .catalog-sidebar.filtros-collapsible.filtros-open {
    display: block;
  }

  #category-tabs-desktop-wrap {
    display: none;
  }

  .mobile-filters-toggle {
    margin-bottom: var(--space-12);
  }

  .filtros-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--dark-3, #1c1912);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--white, #faf7f2);
    padding: var(--space-12) var(--space-16);
    font-size: var(--fs-12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--radius);
  }

  .filtros-toggle-btn .filtros-chevron {
    transition: transform 0.2s ease;
    flex: 0 0 auto;
  }

  .filtros-toggle-btn.active .filtros-chevron {
    transform: rotate(180deg);
  }

  /* Desplegable "común y corriente", estilo lista de filtros de un
     buscador de reservas: fondo blanco, texto oscuro, por encima del
     resto del contenido. */
  #category-tabs.filtros-collapsible {
    display: none;
    margin-top: var(--space-8);
    padding: var(--space-12);
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  }

  #category-tabs.filtros-collapsible.filtros-open {
    display: flex;
  }

  #category-tabs.filtros-collapsible .filter-tab {
    color: #4a4536;
  }

  #category-tabs.filtros-collapsible .filter-tab:hover {
    background: rgba(23,20,15,0.06);
  }

  #category-tabs.filtros-collapsible .filter-tab.active {
    background: var(--gold);
    color: #17140f;
  }

  #category-tabs.filtros-collapsible .cat-count {
    opacity: 1; /* 0.55 no cumplia contraste AA (4.5:1) */
  }

  /* El buscador principal (y toda la columna de resultados) debe verse
     de una, antes que los filtros de la barra lateral. */
  .catalog-main {
    order: -1;
    margin-bottom: var(--space-24);
  }

}


/* ================================================
   TIENDA en telefonos (<= 480px): el control de cantidad no cabia
   En 2 columnas cada tarjeta tenia relleno de la tarjeta (~21px por lado) MAS el del cuerpo (12px por lado):
   a 375px quedaban 92px utiles y el control (98px) se recortaba; a 320px quedaban 64px.
   Se quita el relleno del cuerpo (la tarjeta ya lo da) y el control se reparte todo el ancho disponible.
   ================================================ */
@media (max-width: 480px) {
  .product-card-body {
    padding-left: 0;
    padding-right: 0;
  }
  .product-qty-controls {
    width: 100%;
  }
  .product-qty-controls .qty-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .product-qty-controls .qty-value {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
  }
}


/* ================================================
   ZONAS DE TOQUE (celular / pantallas tactiles)
   Guia WCAG 2.5.5 / Apple HIG: minimo ~44x44px. Los botones-icono median 26-38px.
   No se cambia el tamano ni la posicion VISIBLE de nada: se agranda el area de toque con un ::after
   invisible centrado en cada boton. Se aplica en tactil o hasta 768px, asi en escritorio con mouse no cambia.
   ================================================ */
@media (pointer: coarse), (max-width: 768px) {

  /* elementos "static": necesitan ser el contenedor del ::after (los absolute/relative/fixed ya lo son) */
  #nav-hamburger, .nav-lang-toggle, .nav-a11y-toggle, .footer-social-btn,
  #back-to-top-inline, #cart-back-link, .hero-dot {
    position: relative;
  }

  .wishlist-btn::after, .scroller-arrow::after, .hero-arrow::after, .nav-mobile-close::after,
  #hero-search-btn::after, #catalog-search-btn::after, #nav-cart-mobile::after,
  #nav-hamburger::after, .nav-lang-toggle::after, .nav-a11y-toggle::after, .footer-social-btn::after,
  #back-to-top-inline::after, #cart-back-link::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }

  /* Los puntos del hero estan muy juntos (8px): 24px de area (minimo AA), 44px se solaparian entre si */
  .hero-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
  }

  /* Botones - / + de cantidad: estan dentro de un contenedor con overflow:hidden (recortaria el ::after),
     asi que aca si crece la altura real; el ancho ya se reparte solo (ver bloque de telefonos). */
  .qty-btn { height: 44px; }
  /* entre 481px y 768px hay espacio: el control ocupa todo el ancho y cada boton mide al menos 44px de ancho */
  .product-qty-controls { width: 100%; }
  .product-qty-controls .qty-btn { flex: 1 1 44px; min-width: 44px; width: auto; }
  .product-qty-controls .qty-value { flex: 1 1 0; min-width: 0; }

  /* Filtros y orden: ya son anchos, solo les falta altura */
  #filtros-toggle-btn { min-height: 44px; }
  #sort-select { min-height: 44px; }
}


/* ================================================
   PENDIENTES DE ZONAS DE TOQUE
   ================================================ */

/* Cantidad en telefonos (<= 480px): con tarjetas de 2 columnas no caben 3 botones de 44px, asi que se
   usa un desplegable nativo (44px de alto, ancho completo). Mas grande que 480px siguen los botones -/+.
   Los botones quedan en el DOM (ocultos) porque el contador .qty-value es el que leen los botones de compra. */
.qty-select { display: none; }
@media (max-width: 480px) {
  .product-qty-controls { display: none; }
  .qty-select {
    display: block;
    width: 100%;
    min-height: 44px;
    font-size: var(--fs-14);
  }
}

/* Puntos del hero (tactil o <= 768px): cada punto ocupa 44x44px de verdad (separacion incluida) y el circulo
   visible de 8px pasa a dibujarse con ::before. Reemplaza la zona de 24px de antes. */
@media (pointer: coarse), (max-width: 768px) {
  .hero-dots { gap: 0; }
  .hero-dots .hero-dot,
  .hero-dots .hero-dot.active {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    transform: none;
  }
  .hero-dot::after { display: none; }
  .hero-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.6);
    background: transparent;
    transition: all 0.3s;
  }
  .hero-dots .hero-dot.active::before {
    background: var(--gold);
    border-color: var(--gold);
    transform: scale(1.3);
  }
}

/* Footer en celular: cada fila de link mide 44px (mismo paso 44px para tagline, links y contacto, asi el
   ritmo sigue siendo uno solo). En escritorio se mantiene el paso de 30px. */
@media (max-width: 768px) {
  :root { --footer-line: 44px; --footer-gap: 0px; }
  .footer-col ul li a { display: block; }
  .footer-contact-item { min-height: 44px; }
}