/* ============================================================
   ENIGME · RESPONSIVE GLOBAL
   Archivo único linkeado en todos los HTML públicos.
   NO toca colores, tipografías, branding ni layouts.
   Solo añade reglas DEFENSIVAS que garantizan que nada rompa
   en 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440.
   Todas las reglas están pensadas para no pisar nada existente
   salvo donde sea imprescindible para que no rompa la web.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1.  RESET DEFENSIVO — nada desborda, nada se sale
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* evita que iOS haga zoom raro cuando el user rota */
}

html, body {
  max-width: 100%;
  overflow-x: hidden;     /* PROHIBIDO scroll horizontal */
  overscroll-behavior-x: none;
}

body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Contenido muy largo (URLs, emails, códigos) no rompe el layout */
p, li, span, a, td, th, label, figcaption, small, strong, em, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ─────────────────────────────────────────────────────────────
   2.  MEDIA — imágenes, vídeo, iframe jamás desbordan
   ───────────────────────────────────────────────────────────── */
img,
video,
svg,
canvas,
iframe,
embed,
object,
picture {
  max-width: 100%;
  height: auto;
}
/* iframe: respetar ratio si existe */
iframe {
  border: 0;
  max-width: 100%;
}
/* Hero images: mantener cover pero nunca desbordar (excluye revista.html .mag__) */
.hero-img,
.image-hero img,
[class*="hero"]:not([class*="mag__"]) img:not([class*="logo"]):not([class*="icon"]):not([class*="mag__"]) {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────
   3.  TIPOGRAFÍA FLUIDA — jerarquía estable de 320 a 1440+
   Se aplica SOLO si el elemento no tiene font-size inline.
   Usa clamp() para que nunca se vea micro ni desborde.
   ───────────────────────────────────────────────────────────── */
:where(h1):not([style*="font-size"]) {
  font-size: clamp(1.5rem, 3.2vw + 0.6rem, 2.6rem);
  line-height: 1.18;
}
:where(h2):not([style*="font-size"]) {
  font-size: clamp(1.25rem, 2.2vw + 0.55rem, 2rem);
  line-height: 1.22;
}
:where(h3):not([style*="font-size"]) {
  font-size: clamp(1.05rem, 1.3vw + 0.55rem, 1.5rem);
  line-height: 1.3;
}
:where(h4):not([style*="font-size"]) {
  font-size: clamp(0.95rem, 0.8vw + 0.55rem, 1.15rem);
  line-height: 1.35;
}

/* Letter-spacing Cinzel: si es muy grande (≥0.3em) en 320-360px
   desborda. En móvil chico lo reducimos levemente. */
@media (max-width: 400px) {
  [class*="brand"],
  [class*="logo"],
  [class*="cinzel"],
  [class*="magazine"] h1,
  [class*="magazine"] h2 {
    letter-spacing: 0.12em !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   4.  CONTENEDORES — max-width: 100% por si alguien dejó 1200px
   ───────────────────────────────────────────────────────────── */
.container,
.wrap,
.shell,
.page,
.section,
main,
main > *,
header,
footer,
nav,
section,
article,
aside {
  max-width: 100%;
}

/* Anchuras fijas peligrosas (style="width:1200px;") quedan acotadas */
[style*="width:"][style*="px"] {
  max-width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   5.  BOTONES y FORMULARIOS — táctil-friendly en móvil
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  button,
  .btn,
  a.btn,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
  }
  /* Selects e inputs: 16px mínimo para NO activar zoom iOS */
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  select,
  textarea {
    min-height: 44px;
    font-size: max(16px, 1rem);
  }
  /* checkbox y radio: mantener tamaño original pero cómodos */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
    transform: translateY(1px);
  }
}

/* Todo <form> fluido */
form {
  max-width: 100%;
}
fieldset { min-width: 0; }  /* bug histórico de fieldset en Firefox */
legend { max-width: 100%; white-space: normal; }

/* ─────────────────────────────────────────────────────────────
   6.  TABLAS — nunca rompen el viewport
   ───────────────────────────────────────────────────────────── */
table {
  max-width: 100%;
  border-collapse: collapse;
}
/* Wrap scrollable en mobile: si la tabla no está dentro de un wrap,
   le damos scroll horizontal touch. Desktop sin cambio. */
@media (max-width: 700px) {
  table:not(.no-responsive) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table:not(.no-responsive) tbody,
  table:not(.no-responsive) thead,
  table:not(.no-responsive) tr {
    /* no rompemos filas, dejamos scroll natural */
  }
}

/* ─────────────────────────────────────────────────────────────
   7.  MODALES / OVERLAYS / LOGIN-BOXES — nunca se salen
   ───────────────────────────────────────────────────────────── */
.modal,
.modal-box,
.login-box,
.login-overlay .login-box,
.panel-modal__box,
[role="dialog"] > *,
dialog {
  max-width: min(560px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.modal-box,
.login-box {
  width: min(560px, calc(100vw - 24px)) !important;
}
@media (max-width: 480px) {
  .modal-box,
  .login-box,
  .panel-modal__box {
    padding: 24px 18px !important;
  }
}
/* Overlays de pantalla completa */
.modal,
.login-overlay,
.panel-modal,
[role="dialog"] {
  padding: 12px;
}

/* ─────────────────────────────────────────────────────────────
   8.  NAVBAR / MENÚ MÓVIL — nunca desborda, dropdown cabe
   ───────────────────────────────────────────────────────────── */
nav,
.navbar,
.nav,
.topbar {
  flex-wrap: wrap;
  max-width: 100%;
}
/* Dropdown de menú: que nunca se salga del viewport */
.dropdown-content,
.menu-dropdown,
.nav-dropdown {
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .dropdown-content,
  .menu-dropdown,
  .nav-dropdown {
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    min-width: 0 !important;
  }
}
.brand-nav,
.brand {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   9.  FLOAT BUTTONS (WhatsApp, Chat, Abril bot)
   ───────────────────────────────────────────────────────────── */
.whatsapp-float,
[class*="whatsapp"][class*="float"],
.abril-float,
.chat-float,
#abrilButton {
  max-width: 68px;
  max-height: 68px;
}
@media (max-width: 480px) {
  .whatsapp-float,
  .abril-float,
  .chat-float,
  #abrilButton {
    bottom: 18px !important;
    right: 18px !important;
    width: 56px !important;
    height: 56px !important;
  }
}
/* Tooltip del bot no debe taparse ni salirse */
.abril-tooltip,
[class*="tooltip"] {
  max-width: calc(100vw - 40px);
  white-space: normal;
  overflow-wrap: break-word;
}

/* ─────────────────────────────────────────────────────────────
   10.  GRIDS y CARDS — defensivos
   Solo se aplica si el elemento usa `display:grid` con
   grid-template-columns fija que podría romper en móvil chico.
   NO pisamos grids personalizados con clase específica.
   ───────────────────────────────────────────────────────────── */
/* Grid de productos — auto-fit defensivo si no hay custom */
.product-grid:not(.custom),
.grid-productos:not(.custom),
.cards-grid:not(.custom) {
  display: grid;
  gap: clamp(10px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
@media (max-width: 540px) {
  .product-grid:not(.custom),
  .grid-productos:not(.custom),
  .cards-grid:not(.custom) {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 340px) {
  .product-grid:not(.custom),
  .grid-productos:not(.custom),
  .cards-grid:not(.custom) {
    grid-template-columns: 1fr;
  }
}

/* Cards nunca desbordan */
.card,
.product-card,
.vip-card,
[class*="-card"]:not([class*="carousel"]):not([class*="background"]) {
  max-width: 100%;
}

/* Carousels y sliders horizontales */
.carousel-wrapper,
.carousel-track,
[class*="slider"] {
  max-width: 100%;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   11.  BANNERS / HERO / SECCIONES — padding fluido
   ───────────────────────────────────────────────────────────── */
section[class*="banner"],
section[class*="hero"],
.cert-banner-link,
[class*="cta-section"] {
  padding-left: clamp(16px, 5vw, 60px);
  padding-right: clamp(16px, 5vw, 60px);
}

/* ─────────────────────────────────────────────────────────────
   12.  FOOTER — wraps limpios
   ───────────────────────────────────────────────────────────── */
footer {
  flex-wrap: wrap;
}
footer ul,
footer nav {
  flex-wrap: wrap;
  gap: 10px 16px;
}
@media (max-width: 600px) {
  footer .footer-cols,
  footer .cols,
  footer [class*="grid"] {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
}

/* ─────────────────────────────────────────────────────────────
   13.  CARRITO — que se pueda pagar en 320px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  [class*="cart"] .summary,
  [class*="carrito"] .summary,
  [class*="resumen"] {
    position: static !important;
    width: 100% !important;
  }
  .stripe-form,
  #stripe-form,
  [id*="stripe"] {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────────────────
   14.  IMAGEN DE PRODUCTO / LIGHTBOX — no sale del viewport
   ───────────────────────────────────────────────────────────── */
.lightbox,
[class*="lightbox"],
#lightbox {
  padding: 16px;
}
.lightbox img,
[class*="lightbox"] img {
  max-width: min(100%, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────
   15.  MISCELÁNEOS — detalles de calidad
   ───────────────────────────────────────────────────────────── */
/* Scroll bars invisibles en carruseles touch */
@media (max-width: 700px) {
  .carousel-track,
  .carousel-wrapper,
  .scroll-x {
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar,
  .carousel-wrapper::-webkit-scrollbar,
  .scroll-x::-webkit-scrollbar {
    display: none;
  }
}

/* Focus visible para accesibilidad */
:focus-visible {
  outline: 2px solid #CBAA63;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Respeto del usuario con prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
  }
}

/* Utilidades que algún HTML puede pedir */
.no-scroll-x { overflow-x: hidden !important; }
.full-w-mobile { width: 100% !important; }
@media (max-width: 600px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 601px) {
  .only-mobile { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────
   16. PRODUCTO — HERO (producto.html)
   Garantiza que las imágenes se vean completas y grandes en mobile
   cuando llegan desde una card o desde el carrito.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .product-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-image-wrap {
    min-height: 60vh !important;
    max-height: 75vh !important;
    aspect-ratio: auto;
    width: 100%;
  }
  .hero-image-wrap img,
  .hero-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}
@media (max-width: 768px) {
  .hero-image-wrap {
    min-height: 55vh !important;
    max-height: 65vh !important;
  }
}
@media (max-width: 480px) {
  .hero-image-wrap {
    min-height: 50vh !important;
    max-height: 60vh !important;
  }
  .hero-ref-badge {
    top: 14px !important;
    left: 14px !important;
    padding: 6px 12px !important;
    font-size: 0.55rem !important;
  }
  .manifesto-actions {
    gap: 10px !important;
  }
}
@media (max-width: 360px) {
  .hero-image-wrap {
    min-height: 45vh !important;
    max-height: 55vh !important;
  }
  .manifesto-title {
    font-size: 1.35rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   17. CARDS DE PRODUCTO — joyeria, plata, sets, bolsos, intima,
   liquidación, favoritos, catálogo. Evita deformación de fotos.
   ───────────────────────────────────────────────────────────── */
.product-card .carousel-wrapper,
.product-card .product-media-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}
.product-card .carousel-wrapper .product-media,
.product-card .carousel-track .product-media,
.product-card img.product-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 480px) {
  .product-card .product-name,
  .product-name {
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
    line-height: 1.35 !important;
  }
  .product-card .product-price,
  .product-price {
    font-size: 0.9rem !important;
  }
  .btn-cart, .btn-fav, .card-btn-cart, .card-btn-fav {
    min-height: 40px;
  }
}
@media (max-width: 360px) {
  .product-grid,
  .grid-productos,
  .cards-grid,
  .catalog-grid,
  .category-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .product-card .carousel-wrapper,
  .product-card .product-media-wrap {
    aspect-ratio: 4 / 5;
  }
}

/* ─────────────────────────────────────────────────────────────
   18. LIGHTBOX / GALERÍA FULLSCREEN — touch friendly
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lightbox,
  .enigme-lightbox,
  [class*="lightbox-overlay"] {
    padding: 12px !important;
  }
  .lightbox img,
  .enigme-lightbox img,
  [class*="lightbox"] img {
    max-width: 100vw !important;
    max-height: 85dvh !important;
    object-fit: contain !important;
  }
  .lightbox-close,
  .enigme-lightbox-close,
  [class*="lightbox"] [class*="close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    top: 12px !important;
    right: 12px !important;
  }
  .lightbox-dots,
  .enigme-lightbox-dots,
  [class*="lightbox"] [class*="dots"] {
    bottom: 18px !important;
    gap: 8px !important;
  }
  .lightbox-prev, .lightbox-next,
  [class*="lightbox"] [class*="prev"],
  [class*="lightbox"] [class*="next"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   19. CART ITEM — unificación definitiva de layout mobile
   Sustituye las reglas duplicadas que había en carrito.html.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cart-item-enhanced {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 14px !important;
    padding: 16px 0 !important;
    align-items: start;
    flex-direction: row !important;
  }
  .cart-item-enhanced > a:first-child {
    grid-row: 1 / span 2;
    width: 110px;
  }
  .cart-item-enhanced .item-img {
    width: 110px !important;
    height: 140px !important;
    object-fit: cover !important;
    border: 1px solid rgba(0,0,0,0.08);
  }
  .cart-item-enhanced .item-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cart-item-enhanced .item-name {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    word-break: break-word;
  }
  .cart-item-enhanced .item-ref {
    font-size: 0.55rem !important;
  }
  .cart-item-enhanced .item-actions {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px;
    margin-top: 6px !important;
  }
  .cart-item-enhanced .qty-control-enhanced {
    height: 36px;
  }
  .cart-item-enhanced .qty-control-enhanced button {
    width: 36px;
    min-height: 36px;
  }
  .cart-item-enhanced .remove-item-btn {
    padding: 8px 14px;
    min-height: 36px;
  }
}
@media (max-width: 360px) {
  .cart-item-enhanced {
    grid-template-columns: 90px 1fr !important;
    gap: 10px !important;
  }
  .cart-item-enhanced > a:first-child { width: 90px; }
  .cart-item-enhanced .item-img {
    width: 90px !important;
    height: 115px !important;
  }
  .cart-item-enhanced .item-name { font-size: 0.85rem !important; }
}

/* ─────────────────────────────────────────────────────────────
   20. SIZE EDIT — selector de talla dentro del carrito (HIGHLIGHTED)
   Se muestra solo cuando el item viene con sufijo -TS/-TM/-TL/-TXL.
   Diseño destacado: fondo dorado suave + borde dorado + label grande.
   ───────────────────────────────────────────────────────────── */
.size-edit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--dorado, #CBAA63);
  background: linear-gradient(135deg, rgba(203,170,99,0.10), rgba(203,170,99,0.02));
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(203,170,99,0.08);
}
.size-edit-wrap .size-edit-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dorado, #CBAA63);
  font-weight: 700;
}
.size-edit {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 8px 32px 8px 14px;
  min-height: 38px;
  min-width: 95px;
  border: 1.5px solid var(--dorado, #CBAA63);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23CBAA63'><path d='M7 10l5 5 5-5z'/></svg>")
    no-repeat right 8px center;
  background-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  color: var(--carbon, #1C1C1C);
  cursor: pointer;
  text-align: center;
  text-align-last: center;
  transition: all 0.25s ease;
}
.size-edit:hover,
.size-edit:focus {
  background-color: rgba(203,170,99,0.08);
  border-color: var(--carbon, #1C1C1C);
  outline: none;
  box-shadow: 0 0 0 3px rgba(203,170,99,0.2);
}
@media (max-width: 480px) {
  .size-edit-wrap {
    margin: 10px 0 6px;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
  }
  .size-edit { font-size: 0.85rem; min-height: 36px; flex: 1; max-width: 150px; }
}