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

:root {
   --black: #1d1d1f;
   --white: #fff;
   --g1: #f5f5f7;
   --g2: #e8e8ed;
   --g3: #d2d2d7;
   --g4: #86868b;
   --g5: #515154;
   --blue: #0071e3;
   --blue-h: #0077ed;
   --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
   --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
   --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
   --fs-title: 28px;
   --fs-sub: 15px;
   --fs-info: 12px;
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font);
   color: var(--black);
   background: var(--white);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.47059;
   overflow-x: hidden;
   letter-spacing: -0.01em;
}

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

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

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

/* Utilidades globales */
[data-reveal] {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

[data-reveal].revealed {
   opacity: 1;
   transform: none;
}

/* En móvil/touch: mostrar elementos aunque IntersectionObserver no dispare */
@media (hover: none) {
   [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
   }
}

/* ==========================================================================
   2. NAVBAR & PROMO
   ========================================================================== */
.promo-bar {
   height: 40px;
   background: var(--g1);
   color: var(--black);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   letter-spacing: -0.01em;
   gap: 8px;
   text-align: center;
   font-weight: 400;
   border-bottom: 1px solid var(--g2);
}

.promo-bar a {
   color: #fff;
   text-decoration: underline;
   transition: opacity 0.2s;
}

.promo-bar a:hover {
   opacity: 0.7;
}

.apple-nav {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 300;
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   transition: background 0.3s, border-color 0.3s;
   border-bottom: 1px solid rgba(0,0,0,0.08);
   box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.apple-nav.scrolled {
   background: rgba(255, 255, 255, 0.9);
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-inner {
   max-width: 1200px;
   margin: 0 auto;
   height: 56px;
   display: flex;
   align-items: center;
   padding: 0 22px;
   position: relative;
}

.nav-logo {
   display: flex;
   align-items: center;
   font-size: var(--fs-sub);
   font-weight: 600;
   letter-spacing: -0.03em;
   color: var(--black);
   transition: opacity 0.2s;
   flex-shrink: 0;
}

.nav-logo:hover {
   opacity: 0.7;
}

.nav-logo img {
   height: 18px;
   width: auto;
}

.nav-logo svg {
   width: 18px;
   height: 22px;
   fill: var(--black);
}

.nav-links {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   flex: 1;
   gap: 0;
}

.nav-links a,
.nav-links button {
   font-size: var(--fs-sub);
   font-weight: 400;
   color: var(--black);
   padding: 0 28px;
   line-height: 56px;
   border: none;
   background: transparent;
   cursor: pointer;
   font-family: var(--font);
   white-space: nowrap;
   transition: opacity 0.2s;
   letter-spacing: -0.01em;
   opacity: 0.8;
}

.nav-links a:hover,
.nav-links button:hover {
   opacity: 1;
}

.nav-search-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--black);
   padding: 0;
   display: flex;
   align-items: center;
   transition: opacity 0.2s;
   opacity: 0.8;
}

.nav-search-btn:hover {
   opacity: 1;
}

.nav-search-bar {
   padding: 8px 20px;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   background: rgba(251, 251, 253, 0.95);
   animation: slideDown 0.2s ease;
}

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

   to {
      opacity: 1;
      transform: none;
   }
}

.nav-search-bar input {
   width: 100%;
   max-width: 480px;
   display: block;
   margin: 0 auto;
   border: 1px solid var(--g3);
   border-radius: 12px;
   padding: 10px 16px;
   font-size: 14px;
   outline: 0;
   font-family: inherit;
   transition: border 0.2s;
}

.nav-search-bar input:focus {
   border-color: var(--black);
}

.hamburger {
   display: none;
   background: transparent;
   border: none;
   padding: 4px;
   margin-left: auto;
}

.hamburger span {
   display: block;
   width: 18px;
   height: 1px;
   background: var(--black);
   margin: 5px 0;
   transition: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.hamburger.open span:first-child {
   transform: translateY(5.5px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
}

.hamburger.open span:nth-child(3) {
   transform: translateY(-5.5px) rotate(-45deg);
}

.mob-nav {
   display: none;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 500;
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   padding: 64px 24px 24px;
   flex-direction: column;
   overflow-y: auto;
   animation: fadeIn 0.3s ease;
}

.mob-nav.open {
   display: flex;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.mob-nav a,
.mob-nav button {
   font-size: var(--fs-sub);
   font-weight: 500;
   padding: 16px 0;
   border-bottom: 1px solid var(--g2);
   color: var(--black);
   background: transparent;
   border-top: none;
   border-left: none;
   border-right: none;
   text-align: left;
   font-family: var(--font);
   cursor: pointer;
   display: block;
   width: 100%;
   transition: color 0.2s;
   letter-spacing: -0.02em;
}

.mob-nav a:hover,
.mob-nav button:hover {
   color: var(--blue);
}

.mob-close {
   position: absolute;
   top: 16px;
   right: 24px;
   background: transparent;
   border: none;
   font-size: 32px;
   font-weight: 300;
   cursor: pointer;
   color: var(--black);
   transition: opacity 0.2s;
}

.mob-close:hover {
   opacity: 0.5;
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.ms-hero-wrap {
   position: relative;
   height: 45vh;
   min-height: 360px;
   max-height: 550px;
   overflow: hidden;
   background: #000;
}

.ms-slide {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   opacity: 0;
   transition: opacity 1.4s ease;
   pointer-events: none;
}

.ms-slide.active {
   opacity: 1;
   pointer-events: auto;
   position: relative;
   height: 45vh;
   min-height: 360px;
   max-height: 550px;
}

.ms-hero-bg {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   z-index: 0;
}

/* Banner de hero con imagen específica para móvil: oculta por defecto,
   se activa solo en pantallas angostas (ver @media max-width:768px) */
.hero-bg-mobile { display: none; }

/* Los banners (hero-banner-slide) deben llenar la caja recortando, no
   encogerse dejando franjas grises a los lados (eso hacía "contain") —
   la regla mobile de más abajo ya usaba cover; esto la iguala en escritorio. */
.ms-slide.hero-banner-slide .ms-hero-bg {
   object-fit: cover;
   object-position: center;
}

.ms-slide.active .ms-hero-bg {
   /* removed scale */
}

.ms-hero-overlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.ms-slide.hero-banner-slide.hero-sin-velo .ms-hero-overlay {
   display: none;
}

.ms-hero-content {
   position: relative;
   z-index: 2;
   padding: 0 24px;
   max-width: 900px;
   animation: heroIn 1.2s var(--ease) both;
}

@keyframes heroIn {
   from {
      opacity: 0;
      transform: translateY(32px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

.ms-eyebrow {
   font-size: clamp(12px, 1.5vw, 16px);
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   margin-bottom: 16px;
   opacity: 0.9;
}

.ms-hero-title {
   font-size: clamp(32px, 8vw, 96px);
   font-weight: 600;
   letter-spacing: -0.04em;
   line-height: 1.05;
   margin-bottom: 20px;
   word-break: break-word;
   overflow-wrap: break-word;
}

.ms-hero-sub {
   font-size: clamp(15px, 2.5vw, 28px);
   font-weight: 400;
   opacity: 0.85;
   margin-bottom: 40px;
   line-height: 1.4;
   letter-spacing: 0.01em;
   max-width: 680px;
   margin-left: auto;
   margin-right: auto;
}

.ms-hero-btns {
   display: flex;
   gap: 16px;
   justify-content: center;
   flex-wrap: wrap;
   animation: heroIn 1.2s var(--ease) 0.2s both;
}

.ms-dots {
   position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 10;
}

.ms-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   border: none;
   cursor: pointer;
   transition: background 0.3s var(--ease-out), width 0.3s var(--ease-out);
   padding: 0;
}

.ms-dot.active {
   background: #fff;
   width: 28px;
   border-radius: 4px;
}

/* Botones Estilo Apple */
.ms-btn-primary,
.ms-btn-ghost,
.ms-btn-outline {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 24px;
   border-radius: 980px;
   font-size: 15px;
   font-weight: 400;
   letter-spacing: -0.01em;
   cursor: pointer;
   font-family: var(--font);
   transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
   text-decoration: none;
}

.ms-btn-primary {
   background: var(--blue);
   color: #fff;
   border: 1px solid transparent;
}

.ms-btn-ghost {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.2);
}

.ms-btn-outline {
   background: transparent;
   color: var(--black);
   border: 1px solid var(--black);
}

/* Press feedback — funciona en touch y desktop */
.ms-btn-primary:active,
.ms-btn-ghost:active,
.ms-btn-outline:active {
   transform: scale(0.97);
}

/* Hover solo en dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) {
   .ms-btn-primary:hover { background: var(--blue-h); }
   .ms-btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }
   .ms-btn-outline:hover { background: var(--black); color: #fff; }
}

.ms-btn-sm {
   padding: 9px 18px;
   font-size: 14px;
}

/* ==========================================================================
   4. SHOWCASE
   ========================================================================== */
.ms-showcase {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding: 0 48px;
   overflow: hidden;
   position: relative;
   z-index: 1;
   border-bottom: 12px solid #fff;
}

.ms-light {
   background: var(--g1);
   color: var(--black);
   border-bottom-color: #fff;
}

.ms-dark {
   background: #000;
   color: #f5f5f7;
   border-bottom-color: #000;
}

.ms-showcase-horiz {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 0;
   max-width: 900px;
   width: 100%;
   margin: 0 auto;
}

.ms-showcase-reverse {
   direction: ltr;
}

.ms-showcase-reverse>* {
   direction: ltr;
}

.ms-showcase-text {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
   z-index: 3;
   padding: 56px 24px 36px;
}

.ms-showcase-title {
   font-size: clamp(48px, 7vw, 80px);
   font-weight: 600;
   letter-spacing: -0.04em;
   line-height: 1.05;
   margin: 0;
}

.ms-showcase-desc:empty {
   display: none;
}

.ms-showcase-desc {
   font-size: clamp(17px, 2vw, 21px);
   max-width: 460px;
   line-height: 1.4;
   margin: 0;
   font-weight: 400;
   opacity: 0.85;
   letter-spacing: -0.01em;
}

.ms-showcase-btns {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   justify-content: center;
}

.ms-showcase-img {
   width: 100%;
   z-index: 2;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

.ms-showcase-img img {
   width: auto;
   height: auto;
   max-width: 82%;
   max-height: clamp(280px, 38vw, 560px);
   object-fit: contain;
   display: block;
   filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.05));
   transition: transform 0.8s var(--ease-out), filter 0.8s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
   .ms-showcase:hover .ms-showcase-img img {
      transform: translateY(-8px) scale(1.01);
      filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.08));
   }
}

.ms-showcase-inner {
   max-width: 900px;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0;
}

/* ==========================================================================
   4b. CATEGORY COLLAGE GRID
   ========================================================================== */
.ms-cat-collage {
   padding: 80px 12px;
   background: #fff;
}

.ms-cat-grid {
   display: grid;
   gap: 12px;
   width: 100%;
}

/* Tarjeta base */
/* ── Tile base — estilo Apple ── */
.ms-cat-tile {
   border-radius: 20px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0;
   height: 500px;
   text-decoration: none;
   position: relative;
   background: var(--g1);
   box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 2px 16px rgba(0,0,0,0.04);
   transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
   .ms-cat-tile:hover {
      transform: scale(1.012);
      box-shadow: 0 0 0 1px rgba(0,0,0,0.07), 0 12px 40px rgba(0,0,0,0.1);
   }
   .ms-cat-tile:hover .ms-cat-tile-img img { transform: translateY(-6px) scale(1.02); }
}

/* Texto — centrado */
.ms-cat-tile-top {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   width: 100%;
   padding: 44px 28px 12px;
   gap: 8px;
   flex-shrink: 0;
   z-index: 2;
}

.ms-cat-tile-name {
   font-size: clamp(26px, 3.2vw, 52px);
   font-weight: 600;
   letter-spacing: -0.035em;
   line-height: 1.05;
   margin: 0;
}

.ms-cat-tile-desc {
   font-size: 15px;
   line-height: 1.4;
   margin: 0;
   max-width: 320px;
}

.ms-cat-tile-btn {
   width: auto !important;
   max-width: none !important;
   pointer-events: none;
   margin-top: 4px;
}

/* Imagen — ocupa el resto del tile hacia abajo */
.ms-cat-tile-img {
   flex: 1;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   width: 100%;
   min-height: 0;
   overflow: hidden;
}

.ms-cat-tile-img img {
   max-width: 82%;
   max-height: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
   display: block;
   filter: drop-shadow(0 8px 28px rgba(0,0,0,0.12));
   transition: transform 0.5s var(--ease-out);
}

/* ══════════════════════════════════════════════════════
   LAYOUT: stack  — 2 grandes + pares  (DEFAULT)
   ══════════════════════════════════════════════════════ */
[data-layout="stack"] {
   grid-template-columns: repeat(2, 1fr);
}

/* tiles grandes — ancho completo, horizontal */
[data-layout="stack"] .ms-cat-tile:nth-child(1),
[data-layout="stack"] .ms-cat-tile:nth-child(2) {
   grid-column: 1 / -1;
   height: 440px;
   flex-direction: row;
   padding: 0;
}

/* texto — posición absoluta, centrado vertical garantizado */
[data-layout="stack"] .ms-cat-tile:nth-child(1) .ms-cat-tile-top,
[data-layout="stack"] .ms-cat-tile:nth-child(2) .ms-cat-tile-top {
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 42%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   padding: 0 40px 0 64px;
   gap: 14px;
   z-index: 2;
   text-align: left;
}

/* imagen — derecha, altura completa */
[data-layout="stack"] .ms-cat-tile:nth-child(1) .ms-cat-tile-img,
[data-layout="stack"] .ms-cat-tile:nth-child(2) .ms-cat-tile-img {
   position: absolute;
   right: 0; top: 0; bottom: 0;
   width: 58%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
[data-layout="stack"] .ms-cat-tile:nth-child(1) .ms-cat-tile-img img,
[data-layout="stack"] .ms-cat-tile:nth-child(2) .ms-cat-tile-img img {
   max-height: 92%; max-width: 90%;
}

/* ══════════════════════════════════════════════════════
   LAYOUT: showcase  — todos full-width, centrado (diseño original)
   ══════════════════════════════════════════════════════ */
[data-layout="showcase"] {
   grid-template-columns: 1fr;
}
[data-layout="showcase"] .ms-cat-tile {
   height: 480px;
}

/* ══════════════════════════════════════════════════════
   LAYOUT: bento  — hero arriba + 3 columnas abajo
   ══════════════════════════════════════════════════════ */
[data-layout="bento"] {
   grid-template-columns: repeat(3, 1fr);
   row-gap: 140px;
   column-gap: 12px;
}
[data-layout="bento"] .ms-cat-tile:nth-child(1) {
   grid-column: 1 / -1;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   height: 500px;
   padding: 0 60px;
   gap: 56px;
}
[data-layout="bento"] .ms-cat-tile:nth-child(1) .ms-cat-tile-top {
   flex: 0 0 auto;
   width: auto;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   text-align: left;
   padding: 0;
   gap: 16px;
}
[data-layout="bento"] .ms-cat-tile:nth-child(1) .ms-cat-tile-img {
   flex: 0 0 56%;
   max-width: 56%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}
[data-layout="bento"] .ms-cat-tile:nth-child(1) .ms-cat-tile-img img { max-height:95%; max-width:100%; object-fit:contain; }

/* ══════════════════════════════════════════════════════
   LAYOUT: mosaic  — 2 grandes + 3 pequeñas abajo
   ══════════════════════════════════════════════════════ */
[data-layout="mosaic"] {
   grid-template-columns: repeat(6, 1fr);
}
[data-layout="mosaic"] .ms-cat-tile:nth-child(1),
[data-layout="mosaic"] .ms-cat-tile:nth-child(2) {
   grid-column: span 3;
   height: 460px;
}
[data-layout="mosaic"] .ms-cat-tile:nth-child(n+3) {
   grid-column: span 2;
   height: 360px;
}

/* ══════════════════════════════════════════════════════
   LAYOUT: asymmetric  — grande izquierda + 2 apiladas
   ══════════════════════════════════════════════════════ */
[data-layout="asymmetric"] {
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 224px 224px;
   grid-auto-rows: 360px;
}
[data-layout="asymmetric"] .ms-cat-tile:nth-child(1) {
   grid-row: span 2;
   height: 100%;
   min-height: 460px;
}
[data-layout="asymmetric"] .ms-cat-tile:nth-child(2),
[data-layout="asymmetric"] .ms-cat-tile:nth-child(3) {
   height: 100%;
}
[data-layout="asymmetric"] .ms-cat-tile:nth-child(n+4) {
   grid-column: 1 / -1;
   flex-direction: row;
   align-items: center;
   height: 360px;
   padding: 40px 56px;
   gap: 32px;
}
[data-layout="asymmetric"] .ms-cat-tile:nth-child(n+4) .ms-cat-tile-img { flex:1; margin-top:0; align-items:center; height:100%; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE — todos colapsan a vertical en móvil
   ══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
   [data-layout="stack"],
   [data-layout="bento"],
   [data-layout="mosaic"],
   [data-layout="asymmetric"] {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: unset;
      grid-auto-rows: unset;
   }
   .ms-cat-tile {
      height: 360px;
   }
   [data-layout] .ms-cat-tile:nth-child(1),
   [data-layout="stack"] .ms-cat-tile:nth-child(2) {
      grid-column: 1 / -1;
      flex-direction: column;
      align-items: center;
      height: 420px;
      padding: 0;
      gap: 0;
   }
   [data-layout] .ms-cat-tile:nth-child(1) .ms-cat-tile-top,
   [data-layout="stack"] .ms-cat-tile:nth-child(2) .ms-cat-tile-top {
      flex: 0 0 auto;
      align-items: center;
      text-align: center;
      padding: 36px 24px 12px;
   }
   [data-layout] .ms-cat-tile:nth-child(1) .ms-cat-tile-img,
   [data-layout="stack"] .ms-cat-tile:nth-child(2) .ms-cat-tile-img { flex: 1; height: auto; align-items: flex-end; }
   [data-layout="mosaic"] .ms-cat-tile { grid-column: span 1; }
   [data-layout="asymmetric"] .ms-cat-tile:nth-child(n+4) { grid-column: span 1; flex-direction: column; height: 360px; padding: 32px 28px 0; }
   [data-layout="asymmetric"] .ms-cat-tile:nth-child(n+4) .ms-cat-tile-img { flex:unset; height:auto; margin-top:auto; }
}

@media (max-width: 560px) {
   .ms-cat-collage { padding: 48px 12px; }
   [data-layout],
   [data-layout="stack"],
   [data-layout="bento"],
   [data-layout="mosaic"],
   [data-layout="asymmetric"] {
      grid-template-columns: 1fr;
      gap: 8px;
   }
   .ms-cat-tile, [data-layout] .ms-cat-tile:nth-child(1),
   [data-layout="stack"] .ms-cat-tile:nth-child(2) {
      height: 320px;
   }
   .ms-cat-tile-btn { padding: 8px 16px; font-size: 13px; }
}

/* ==========================================================================
   5. CATALOG & CARDS
   ========================================================================== */
.ms-catalog-section {
   padding: 140px 24px;
   background: #f5f5f7;
}

.ms-section-head {
   text-align: center;
   margin-bottom: 80px;
}

.ms-section-head h2 {
   font-size: clamp(36px, 5vw, 56px);
   font-weight: 600;
   letter-spacing: -0.04em;
   line-height: 1.04;
   margin-bottom: 16px;
   color: var(--black);
}

.ms-section-head p {
   font-size: 21px;
   color: var(--g5);
   line-height: 1.5;
   max-width: 600px;
   margin: 0 auto;
   font-weight: 400;
   letter-spacing: -0.01em;
}

.ms-inner {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0;
}

.ms-catalog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 32px;
}

.ms-card {
   background: #fff;
   border-radius: 24px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: inherit;
   border: none;
   box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
   padding: 0;
   transition: box-shadow .2s;
}

.ms-card:hover {
   box-shadow: 0 4px 8px rgba(0,0,0,.1), 0 8px 28px rgba(0,0,0,.1);
}

.ms-card-img {
   height: 340px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   margin-bottom: 0;
   background: #fff;
}
.ms-card > a:first-child {
   background: #fff;
}

.ms-card-img img {
   max-height: 220px;
   max-width: 100%;
   object-fit: contain;
   position: relative;
   z-index: 1;
}

.ms-card-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   background: var(--black);
   color: #fff;
   font-size: 11px;
   font-weight: 500;
   padding: 5px 12px;
   border-radius: 20px;
   letter-spacing: 0.02em;
   z-index: 2;
}

.ms-card-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   padding: 0;
}

.ms-card-cat {
   font-size: 12px;
   color: #bf4800;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 10px;
   font-weight: 600;
}

.ms-card-name {
   font-size: var(--fs-sub);
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.2;
   margin-bottom: 12px;
   color: var(--black);
}

.ms-card-desc {
   font-size: 15px;
   color: var(--g5);
   line-height: 1.5;
   flex: 1;
   margin-bottom: 24px;
   letter-spacing: -0.01em;
}

.ms-card-foot {
   display: flex;
   align-items: baseline;
   gap: 10px;
   margin-top: auto;
}

.ms-card-price {
   font-size: var(--fs-sub);
   font-weight: 500;
   letter-spacing: -0.01em;
   color: var(--black);
}

.ms-card-orig {
   font-size: var(--fs-info);
   color: var(--g4);
   text-decoration: line-through;
}

/* Swatches */
.ms-card-swatches {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 16px;
}

.ms-card-swatch {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   display: inline-block;
   background-size: cover;
   background-position: center;
   border: 1px solid rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: transform 0.3s var(--ease), box-shadow 0.3s;
}

.ms-card-swatch:hover {
   transform: scale(1.15) !important;
   box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.ms-card-swatch.active {
   box-shadow: 0 0 0 2px var(--blue);
   border-color: transparent;
   transform: none;
}

.ms-card-swatch-more {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   background: #f0f0f0;
   color: var(--g5);
   font-size: 10px;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Card Glow Effects */
.ms-card-glow {
   display: none;
}

@keyframes glowPulse {

   0%,
   100% {
      opacity: 0.5;
      transform: scale(1);
   }

   50% {
      opacity: 0.85;
      transform: scale(1.08);
   }
}

@keyframes productGlowPulse {

   0%,
   100% {
      opacity: 0.55;
      transform: scale(1);
      filter: blur(28px);
   }

   50% {
      opacity: 0.9;
      transform: scale(1.12);
      filter: blur(32px);
   }
}

#productGlow {
   transition: opacity 0.4s ease, transform 0.4s ease;
}

#mainImg {
   filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.06));
   transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease);
}

/* ==========================================================================
   6. SUPPORT & AUTH
   ========================================================================== */
.ms-auth-section {
   background: var(--black);
   padding: 100px 24px;
   border-radius: 28px;
   margin: 60px auto;
   max-width: 1200px;
   text-align: center;
}

.ms-auth-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
}

.ms-auth-apple {
   width: 56px;
   height: 56px;
   fill: #fff;
   flex-shrink: 0;
   opacity: 0.9;
}

.ms-auth-inner h2 {
   font-size: clamp(28px, 4vw, 40px);
   font-weight: 600;
   letter-spacing: -0.03em;
   margin-bottom: 12px;
   color: #fff;
}

.ms-auth-inner p {
   font-size: 19px;
   color: rgba(255, 255, 255, 0.7);
   line-height: 1.4;
   max-width: 600px;
   margin: 0 auto;
   letter-spacing: -0.01em;
}

.ms-support-section {
   padding: 120px 24px;
   background: #fff;
}

.ms-support-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 32px;
   margin-top: 64px;
}

.ms-support-card {
   background: var(--g1);
   border-radius: 24px;
   padding: 48px 40px;
   text-align: center;
   transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
   border: none;
}

.ms-support-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 48px rgba(0, 0, 0, 0.06);
   background: #fff;
}

.ms-support-icon {
   font-size: 48px;
   margin-bottom: 24px;
   display: block;
   transition: transform 0.6s var(--ease);
}

.ms-support-card:hover .ms-support-icon {
   transform: scale(1.1);
}

.ms-support-card h3 {
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-bottom: 12px;
   color: var(--black);
}

.ms-support-card p {
   font-size: 17px;
   color: var(--g5);
   line-height: 1.5;
   letter-spacing: -0.01em;
}

/* ==========================================================================
   7. PRODUCT DETAIL & CATALOG PAGES
   ========================================================================== */
.detail-wrap {
   max-width: 1200px;
   margin: 0 auto;
   padding: 100px 24px;
   width: 100%;
}

.detail-grid {
   display: grid;
   grid-template-columns: 1.2fr 1fr;
   gap: 100px;
   align-items: start;
   width: 100%;
}

.detail-img-box {
   background: transparent;
   border-radius: 32px;
   padding: 64px;
   aspect-ratio: 1;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
}

.detail-img-box img {
   max-height: 480px;
   object-fit: contain;
   width: 100%;
   max-width: 100%;
   filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.05));
}

.detail-eyebrow {
   font-size: 13px;
   color: #bf4800;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 600;
   margin-bottom: 12px;
}

.detail-h1 {
   font-size: clamp(36px, 4vw, 56px);
   font-weight: 600;
   letter-spacing: -0.04em;
   line-height: 1.05;
   margin-bottom: 20px;
   color: var(--black);
}

.detail-tagline {
   font-size: 21px;
   color: var(--g5);
   line-height: 1.4;
   margin-bottom: 40px;
   letter-spacing: -0.01em;
}

.detail-price {
   font-size: 32px;
   font-weight: 500;
   letter-spacing: -0.02em;
   margin-bottom: 8px;
   color: var(--black);
}

.detail-orig {
   font-size: 17px;
   color: var(--g4);
   text-decoration: line-through;
   margin-bottom: 32px;
   display: block;
}

/* Fix para ocultar precios tachados duplicados */
.detail-orig+.detail-orig {
   display: none !important;
}

.detail-stock {
   font-size: 15px;
   color: #1a7f37;
   font-weight: 500;
   margin-bottom: 40px;
   display: flex;
   align-items: center;
   gap: 8px;
}

.detail-stock::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #1a7f37;
   display: inline-block;
}

.detail-ctas {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 64px;
}

.specs-title {
   font-size: 19px;
   font-weight: 600;
   margin-bottom: 20px;
   letter-spacing: -0.01em;
}

.specs-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.spec-chip {
   background: #fff;
   border: 1px solid var(--g2);
   border-radius: 16px;
   padding: 20px;
   transition: border-color 0.3s;
}

.spec-chip:hover {
   background: var(--g2);
}

.spec-k {
   font-size: 12px;
   color: var(--g4);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 6px;
   font-weight: 500;
}

.spec-v {
   font-size: 15px;
   font-weight: 500;
   color: var(--black);
}

.breadcrumb {
   display: flex;
   gap: 8px;
   font-size: 13px;
   color: var(--g4);
   margin-bottom: 40px;
   flex-wrap: wrap;
   font-weight: 400;
}

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

.breadcrumb span::before {
   content: '/';
   margin-right: 8px;
}

.cat-page,
.catalog-page {
   padding: 80px 24px 120px;
   max-width: 1200px;
   margin: 0 auto;
}

.cat-header {
   margin-bottom: 80px;
   text-align: center;
}

.cat-header h1 {
   font-size: clamp(40px, 6vw, 72px);
   font-weight: 600;
   letter-spacing: -0.04em;
   margin-bottom: 16px;
   color: var(--black);
}

.cat-header p {
   font-size: 21px;
   color: var(--g5);
   font-weight: 400;
}

.not-found {
   min-height: 60vh;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 40px;
}

.not-found h1 {
   font-size: clamp(40px, 6vw, 64px);
   font-weight: 600;
   letter-spacing: -0.04em;
   margin-bottom: 16px;
}

.not-found p {
   font-size: 21px;
   color: var(--g5);
   margin-bottom: 40px;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
footer {
   background: #f5f5f7;
   border-top: 1px solid rgba(0, 0, 0, 0.07);
   padding: 20px 0 12px;
   color: var(--black);
}

.footer-inner {
   max-width: 1024px;
   margin: 0 auto;
   padding: 0 24px;
}

.footer-brand-row {
   margin-bottom: 14px;
}

.footer-grid {
   display: grid;
   grid-template-columns: 200px 1fr;
   gap: 28px;
   margin-bottom: 0;
   align-items: start;
}

/* Anula los desplazamientos de arrastre del editor visual que se cuelan
   en el footer desde el CSS de la portada / global (p.ej.
   #i2t8dx{position:relative;left:-210px} o .footer-col{left:clamp(...)}).
   Empujaban las columnas fuera de la pantalla en tablet / vista mediana.
   Estos contenedores siempre van en el flujo. */
footer .footer-inner,
footer .footer-grid,
footer .footer-grid > div,
footer .footer-left,
footer .footer-col,
footer .footer-right,
footer .footer-cols-grid {
   position: static !important;
   left: auto !important;
   right: auto !important;
   top: auto !important;
   bottom: auto !important;
   transform: none !important;
}

/* Grilla de "También te puede interesar": 3 por fila en escritorio. Evita
   que una regla auto-fill del editor la deje con columnas vacías y un
   hueco enorme en vista mediana / iPad. */
.product-page .product-related-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
   max-width: 820px;
   margin-left: auto;
   margin-right: auto;
}
@media (max-width: 720px) {
   .product-page .product-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 430px) {
   .product-page .product-related-grid { grid-template-columns: 1fr !important; }
}

.footer-cols-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 24px;
}

.footer-logo {
   margin-bottom: 10px;
}

.footer-brand {
   font-size: var(--fs-sub);
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-bottom: 4px;
   color: var(--black);
}

.footer-brand span {
   color: var(--blue);
}

.footer-tagline {
   font-size: var(--fs-info);
   color: var(--g5);
   line-height: 1.5;
   margin-bottom: 0;
}

.footer-info-block {
   margin-bottom: 8px;
}

.footer-info-label {
   font-size: var(--fs-info);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--g4);
   margin-bottom: 3px;
}

.footer-info-text {
   font-size: var(--fs-info);
   color: var(--g5);
   line-height: 1.5;
}

.footer-contact-link {
   display: block;
   font-size: var(--fs-info);
   color: var(--g5);
   margin-bottom: 2px;
   transition: color 0.2s;
}

.footer-contact-link:hover {
   color: var(--black);
}

.footer-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 12px;
}

.footer-wa-btn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: #25d366;
   color: #fff;
   padding: 6px 12px;
   border-radius: 20px;
   font-size: var(--fs-info);
   font-weight: 600;
   white-space: nowrap;
   transition: opacity 0.2s;
}

.footer-wa-btn:hover {
   opacity: 0.88;
   color: #fff;
}

.footer-col h4 {
   font-size: var(--fs-info);
   font-weight: 600;
   margin-bottom: 8px;
   color: var(--black);
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.footer-col a {
   display: block;
   font-size: var(--fs-info);
   color: var(--g5);
   margin-bottom: 6px;
   transition: color 0.2s;
   font-weight: 400;
}

.footer-col a:hover {
   color: var(--black);
}

.footer-bottom {
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding-top: 10px;
   margin-top: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   font-size: var(--fs-info);
   color: var(--g4);
}

.footer-legal-bar {
   background: #fff;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding: 9px 24px;
}

.footer-legal-inner {
   max-width: 1024px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   font-size: var(--fs-info);
   color: #86868b;
   line-height: 1.4;
   white-space: nowrap;
   overflow: hidden;
}

.footer-legal-inner span {
   overflow: hidden;
   text-overflow: ellipsis;
}

.footer-social {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 10px;
}

.footer-social a {
   color: var(--g4);
   transition: color 0.25s, transform 0.25s;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.05);
}

.footer-social a:hover {
   color: var(--black);
   transform: translateY(-2px);
   background: rgba(0, 0, 0, 0.09);
}

.whatsapp-fab {
   position: fixed;
   bottom: 32px;
   right: 32px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25d366;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(37, 211, 102, 0.25);
   z-index: 200;
   transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
   animation: fabIn 0.8s var(--ease) 1s both;
}

@keyframes fabIn {
   from {
      opacity: 0;
      transform: scale(0.75);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }
}

@media (hover: hover) and (pointer: fine) {
   .whatsapp-fab:hover {
      transform: scale(1.07);
      box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35);
   }
}

.whatsapp-fab:active {
   transform: scale(0.94);
}

/* ==========================================================================
   9. RESPONSIVE (STOREFRONT)
   ========================================================================== */

/* Búsqueda dentro del menú móvil */
.mob-nav-search {
   display: block;
   margin-bottom: 8px;
}
.mob-nav-search form {
   display: flex;
   align-items: center;
   gap: 8px;
   background: #f5f5f7;
   border-radius: 12px;
   padding: 10px 14px;
}
.mob-nav-search input {
   flex: 1;
   border: none;
   background: transparent;
   font-size: 16px;
   font-family: var(--font);
   outline: none;
   color: var(--black);
   min-width: 0;
}
.mob-nav-search input::placeholder { color: #86868b; }
.mob-nav-search svg { flex-shrink: 0; opacity: .5; }

@media (max-width: 900px) {
   .ms-catalog-grid {
      gap: 24px;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .footer-cols-grid {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
   }

   .detail-wrap {
      padding: 64px 24px;
   }

   .detail-grid {
      gap: 48px;
      grid-template-columns: 1fr;
   }

   .detail-img-box {
      aspect-ratio: auto;
      height: 400px;
      max-height: 500px;
      padding: 40px;
   }

   .detail-img-box img {
      max-height: 380px;
   }
}

@media (max-width: 1280px) {

   .nav-links,
   .nav-search-btn {
      display: none;
   }

   .hamburger {
      display: block;
   }
}

@media (max-width: 768px) {

   .nav-inner {
      padding: 0 24px;
   }

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

   .ms-hero-wrap {
      height: 45vh;
      height: 45svh;
      min-height: 360px;
      max-height: 550px;
   }

   .ms-hero-content {
      padding: 0 24px;
   }

   .ms-hero-btns {
      gap: 16px;
   }

   .ms-hero-btns .ms-btn-ghost,
   .ms-hero-btns .ms-btn-outline,
   .ms-hero-btns .ms-btn-primary {
      padding: 14px 24px;
      font-size: 15px;
      width: 100%;
      max-width: 320px;
      justify-content: center;
   }

   .ms-showcase-btns .ms-btn-primary,
   .ms-showcase-btns .ms-btn-ghost,
   .ms-showcase-btns .ms-btn-outline {
      padding: 8px 16px;
      font-size: 13px;
      width: auto;
   }

   .ms-catalog-section {
      padding: 60px 16px;
   }

   .ms-catalog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
   }

   .ms-card {
      padding: 0;
      border-radius: 18px;
   }

   .ms-card-name {
      font-size: 15px;
   }

   .ms-card-price {
      font-size: 15px;
   }

   .ms-section-head {
      margin-bottom: 40px;
   }

   .ms-section-head h2 {
      font-size: clamp(28px, 6vw, 40px);
   }

   .ms-section-head p {
      font-size: 17px;
   }

   .ms-showcase {
      padding: 0;
      border-bottom-width: 10px;
   }

   .ms-showcase-text {
      padding: 52px 28px 28px;
      gap: 20px;
   }

   .ms-showcase-img {
      padding-bottom: 12px;
   }

   .ms-showcase-img img {
      max-width: 92%;
      max-height: clamp(240px, 55vw, 480px);
   }

   .ms-showcase-title {
      font-size: clamp(36px, 9vw, 52px);
   }

   .ms-showcase-desc {
      font-size: 16px;
      opacity: 0.75;
   }

   .ms-auth-section {
      padding: 80px 24px;
      border-radius: 24px;
      margin: 40px 16px;
   }

   .ms-auth-inner {
      flex-direction: column;
      text-align: center;
      gap: 24px;
   }

   .ms-auth-apple {
      width: 48px;
      height: 48px;
   }

   .ms-support-section {
      padding: 80px 24px;
   }

   .ms-support-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .ms-support-card {
      padding: 40px 24px;
      border-radius: 20px;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 36px;
      margin-bottom: 40px;
   }

   .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
   }

   .footer-legal-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      white-space: normal;
   }

   .detail-wrap {
      padding: 32px 20px 100px;
   }

   .detail-grid {
      gap: 32px;
      grid-template-columns: 1fr;
   }

   .detail-img-box {
      padding: 24px;
      height: 340px;
      max-height: 340px;
      border-radius: 24px;
      aspect-ratio: auto;
   }

   .detail-img-box img {
      max-height: 280px;
      width: 100%;
   }

   .detail-h1 {
      font-size: clamp(32px, 6vw, 48px);
   }

   .specs-grid {
      grid-template-columns: 1fr;
   }

   .cat-page,
   .catalog-page {
      padding: 64px 24px 80px;
   }

   .cat-header {
      margin-bottom: 48px;
   }

   .whatsapp-fab {
      bottom: 24px;
      right: 24px;
      width: 52px;
      height: 52px;
   }
}

/* Showcase compacto para todos los teléfonos */
@media (max-width: 640px) {
   .ms-showcase {
      padding: 0 16px;
      min-height: 0;
      align-items: flex-start;
      border-bottom-width: 4px;
   }

   .ms-showcase-text {
      padding: 20px 16px 14px;
      gap: 12px;
      width: 100%;
   }

   .ms-showcase-title {
      font-size: clamp(26px, 7vw, 38px);
   }

   .ms-showcase-desc {
      font-size: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .ms-showcase-img img {
      max-width: 92%;
      max-height: clamp(130px, 52vw, 280px);
   }
}

/* ── Tarjetas de producto en móvil (catálogo + categorías) ──────────
   En móvil se anula el transform:scale() por producto (está calibrado
   para el ancho de tarjeta de ESCRITORIO y en un teléfono angosto
   desborda). La imagen simplemente entra completa en su contenedor,
   respetando su proporción. El tamaño se regula con el ajuste global
   "Escala de imagen en móvil" (--mobile-card-img-scale). */
@media (max-width: 640px) {
   .catalog-grid {
      grid-template-columns: 1fr !important;
      gap: 14px !important;
      justify-items: center !important;
   }
   .catalog-grid .ms-card {
      max-width: 340px !important;
      width: 100% !important;
   }
   .catalog-grid .ms-card-img,
   .category-product-grid .ms-card-img {
      height: var(--mobile-card-img-h, 240px) !important;
   }
   .catalog-grid .ms-card-img img,
   .catalog-grid .ms-card-img video,
   .category-product-grid .ms-card-img img,
   .category-product-grid .ms-card-img video {
      transform: none !important;
      width: auto !important;
      height: auto !important;
      max-width: var(--mobile-card-img-scale, 90%) !important;
      max-height: var(--mobile-card-img-scale, 90%) !important;
      object-fit: contain !important;
      object-position: center !important;
   }
}

/* Teléfonos más chicos: contenedor un poco más bajo para que la tarjeta
   no quede tan alta con una sola columna. */
@media (max-width: 380px) {
   .catalog-grid .ms-card-img,
   .category-product-grid .ms-card-img {
      height: 210px !important;
   }
}

@media (max-width: 480px) {
   .ms-catalog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
   }

   .ms-catalog-section {
      padding: 48px 12px;
   }

   .ms-section-head {
      margin-bottom: 28px;
   }

   .ms-section-head h2 {
      font-size: clamp(24px, 7vw, 32px);
   }

   .ms-section-head p {
      font-size: 15px;
   }

   .ms-card-img {
      height: 140px !important;
   }

   .ms-card-name {
      font-size: 13px;
      letter-spacing: -0.01em;
   }

   .ms-card-price {
      font-size: 14px;
   }

   .ms-card-desc {
      display: none;
   }

   /* Hero: botones en columna y texto contenido */
   .ms-hero-content {
      padding: 0 16px;
   }

   .ms-hero-btns {
      flex-direction: column;
      align-items: center;
      gap: 10px;
   }

   .ms-hero-btns .ms-btn-primary,
   .ms-hero-btns .ms-btn-ghost,
   .ms-hero-btns .ms-btn-outline {
      width: 100%;
      max-width: 280px;
      padding: 13px 20px;
   }

   .footer-grid {
      grid-template-columns: 1fr;
      gap: 32px;
   }

   .footer-col h4 {
      font-size: 13px;
   }

   .footer-col a {
      font-size: 13px;
   }

   .ms-showcase {
      padding: 0 16px;
      min-height: 0;
      border-bottom-width: 4px;
      align-items: flex-start;
   }

   .ms-showcase-text {
      padding: 20px 16px 14px;
   }

   .ms-showcase-img img {
      max-width: 94%;
      max-height: clamp(150px, 50vw, 260px);
   }

   .ms-auth-inner h2 {
      font-size: 26px;
   }

   .detail-img-box {
      padding: 16px;
      height: 260px;
      max-height: 260px;
      aspect-ratio: auto;
   }

   .breadcrumb {
      font-size: 12px;
   }
}

/* ── Imagen principal de la página del producto en móvil ─────────────
   La foto SIEMPRE entra completa — nunca se recorta, sea iPhone vertical
   o MacBook horizontal. El "tamaño" = ANCHO de la foto como % de la
   columna, y crece de verdad (para vertical y horizontal por igual):

     ancho = 60%  (base)
           × --mobile-pdp-img-scale  (factor GLOBAL de Ajustes; 1 = no toca nada)
           × --pdp-color-scale        (factor POR COLOR; se fija inline en
             .detail-img-box y lo actualiza el JS al cambiar de color)
     …con tope de 100% (nunca se sale de la columna → nunca recorta).

   --mobile-pdp-img-h ("Alto de la caja" global) = alto mínimo del área.
   Se quita el transform:scale() por producto (calibrado para escritorio). */
@media (max-width: 640px) {
   /* el wrapper con aspect-ratio:4/5 de product.ejs se libera para que la
      foto pueda crecer sin que lo recorte su overflow:hidden */
   .product-media > div:first-child {
      aspect-ratio: auto !important;
      overflow: visible !important;
      padding: 0 !important;
      display: block !important;
   }
   #productGlow {
      display: none !important;
   }
   .detail-img-box {
      height: auto !important;
      max-height: none !important;
      min-height: var(--mobile-pdp-img-h, 300px) !important;
      aspect-ratio: auto !important;
      padding: 0 !important;
      overflow: visible !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
   }
   .detail-img-box img,
   .detail-img-box video,
   #mainImg,
   #mainVid {
      width: min(100%, calc(60% * var(--mobile-pdp-img-scale, 1) * var(--pdp-color-scale, 1))) !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: none !important;
      object-fit: contain !important;
      object-position: center !important;
      transform: none !important;
   }
}

/* Pantallas muy pequeñas (iPhone SE 1ra gen, etc.) */
@media (max-width: 360px) {
   /* Una sola columna — más usable que 2 muy pequeñas */
   .ms-catalog-grid {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .ms-catalog-section {
      padding: 36px 12px;
   }

   /* Con 1 columna hay espacio de sobra — card más generosa */
   .ms-card-img {
      height: 200px !important;
   }

   .ms-card > div:last-child {
      padding: 14px 14px 16px !important;
   }

   .ms-card .ms-card-name,
   .ms-card h3 {
      font-size: 15px !important;
      -webkit-line-clamp: 3 !important;
   }

   .ms-card .ms-card-price,
   .ms-card span[style*="font-size:17px"] {
      font-size: 16px !important;
   }

   .ms-card > div > a[href*="wa.me"],
   .ms-card > div > a[href*="/producto/"] {
      padding: 12px 0 !important;
      font-size: 15px !important;
   }

   .ms-section-head h2 {
      font-size: clamp(22px, 7vw, 28px);
   }

   .ms-section-head p {
      font-size: 14px;
   }
}

/* ==========================================================================
   MOBILE: Reset posiciones fijas aplicadas por GrapeJS (drag & drop)
   GrapeJS guarda estilos como #id{position:relative;left:-547px;top:-13px}
   que rompen el layout responsivo. Estos !important los neutralizan en móvil.
   ========================================================================== */
@media (max-width: 768px) {
   /* Resetear offsets en píxeles aplicados por GrapeJS drag-and-drop */
   footer [id],
   .ms-hero-wrap [id],
   .ms-showcase [id] {
      left: auto !important;
      top: auto !important;
      right: auto !important;
      bottom: auto !important;
   }
}

/* ==========================================================================
   10. ADMIN & SYSTEM (NO TOCAR)
   ========================================================================== */
.adm-body {
   background: #f5f5f7;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   -webkit-font-smoothing: antialiased;
}

.adm-top {
   height: 48px;
   background: rgba(29, 29, 31, 0.96);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   display: flex;
   align-items: center;
   padding: 0 22px;
   gap: 10px;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: 300;
   flex-shrink: 0;
}

.adm-brand {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -0.04em;
   color: #fff;
}

.adm-brand span {
   color: #fff;
}

.adm-tabs {
   display: flex;
   gap: 2px;
   flex: 1;
   margin-left: 10px;
}

.adm-tab {
   padding: 6px 12px;
   border-radius: 7px;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.55);
   border: none;
   background: transparent;
   font-family: var(--font);
   cursor: pointer;
   transition: all 0.15s;
   letter-spacing: -0.01em;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
}

.adm-tab:hover {
   color: #fff;
   background: rgba(255, 255, 255, 0.08);
}

.adm-tab.active {
   color: #fff;
   font-weight: 500;
}

.adm-top-r {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 10px;
}

.adm-preview {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.5);
   padding: 5px 12px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 20px;
   text-decoration: none;
   transition: all 0.15s;
}

.adm-preview:hover {
   color: #fff;
   border-color: rgba(255, 255, 255, 0.4);
}

.adm-ava {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: #0071e3;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 11px;
   font-weight: 700;
}

.adm-shell {
   display: flex;
   flex: 1;
}

.adm-side {
   width: 210px;
   background: #fff;
   border-right: 1px solid #e8e8ed;
   padding: 14px 8px;
   display: flex;
   flex-direction: column;
   gap: 1px;
   flex-shrink: 0;
}

.adm-sg {
   font-size: 10px;
   font-weight: 600;
   color: #86868b;
   padding: 0 10px;
   margin: 12px 0 4px;
   letter-spacing: 0.07em;
   text-transform: uppercase;
}

.adm-sg:first-child {
   margin-top: 0;
}

.adm-sn {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 8px 10px;
   border-radius: 7px;
   font-size: 13px;
   color: #515154;
   cursor: pointer;
   border: none;
   background: transparent;
   font-family: var(--font);
   width: 100%;
   text-align: left;
   transition: all 0.15s;
   text-decoration: none;
   letter-spacing: -0.01em;
}

.adm-sn:hover {
   background: #f5f5f7;
   color: #1d1d1f;
}

.adm-sn.active {
   background: #1d1d1f;
   color: #fff;
}

.adm-sn.active svg * {
   stroke: #fff !important;
}

.adm-sn svg {
   flex-shrink: 0;
   opacity: 0.55;
}

.adm-sn.active svg {
   opacity: 1;
}

.adm-sdiv {
   height: 1px;
   background: #e8e8ed;
   margin: 6px 0;
}

.adm-logout {
   color: #c0392b !important;
}

.adm-logout:hover {
   background: #fce8e8 !important;
   color: #c0392b !important;
}

.adm-main {
   flex: 1;
   overflow-y: auto;
   padding: 36px 40px;
   min-width: 0;
}

.adm-ph {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 32px;
   flex-wrap: wrap;
   gap: 12px;
}

.adm-ph h1 {
   font-size: 26px;
   font-weight: 700;
   letter-spacing: -0.05em;
}

.adm-ph p {
   font-size: 14px;
   color: #86868b;
   margin-top: 4px;
}

.adm-ph-r {
   display: flex;
   gap: 8px;
}

.adm-btn-p {
   background: #1d1d1f;
   color: #fff;
   border: none;
   padding: 9px 18px;
   border-radius: 980px;
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   font-family: var(--font);
   transition: all 0.15s;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.adm-btn-p:hover {
   background: #333;
}

.adm-btn-s {
   background: #fff;
   color: #1d1d1f;
   border: 1px solid #d2d2d7;
   padding: 8px 16px;
   border-radius: 980px;
   font-size: 13px;
   cursor: pointer;
   font-family: var(--font);
   transition: all 0.15s;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.adm-btn-s:hover {
   border-color: #86868b;
}

.adm-btn-danger {
   background: #fff;
   color: #c0392b;
   border: 1px solid #e8c0c0;
   padding: 6px 12px;
   border-radius: 8px;
   font-size: 12px;
   cursor: pointer;
   font-family: var(--font);
   transition: all 0.15s;
}

.adm-btn-danger:hover {
   background: #fce8e8;
}

.adm-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px;
   margin-bottom: 32px;
}

.adm-stat {
   background: #fff;
   border: 1px solid #e8e8ed;
   border-radius: 14px;
   padding: 20px 22px;
   transition: transform 0.2s, box-shadow 0.2s;
}

.adm-stat:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.adm-stat-n {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -0.065em;
   line-height: 1;
}

.adm-stat-l {
   font-size: 12px;
   color: #86868b;
   margin-top: 6px;
}

.pgrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
   gap: 16px;
}

.pc {
   background: #fff;
   border: 1px solid #e8e8ed;
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.22s;
   display: flex;
   flex-direction: column;
   cursor: default;
   position: relative;
}

.pc:hover {
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
   transform: translateY(-2px);
}

.pc-drag {
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #eef0f3;
   color: #8e8e93;
   cursor: grab;
   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
   font-size: 12px;
   letter-spacing: 2px;
   border-bottom: 1px solid #e0e2e7;
   flex-shrink: 0;
}
.pc-drag:hover { background: #e4e7ec; color: #636366; }
.pc-drag:active { cursor: grabbing; }

/* La foto de la tarjeta también sirve para arrastrar (touch incluido) */
.pc-img { touch-action: none; }
.pc.pc-dragging { cursor: grabbing; }

.pc.pc-dragging { opacity: 0.4; }

.pc-img {
   aspect-ratio: 1;
   background: #f5f5f7;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 18px;
   position: relative;
   overflow: hidden;
}

.pc-img img {
   max-height: 130px;
   object-fit: contain;
   transition: transform 0.3s;
}

.pc:hover .pc-img img {
   transform: scale(1.05);
}

.pc-badge {
   position: absolute;
   top: 8px;
   left: 8px;
   background: #1d1d1f;
   color: #fff;
   font-size: 9px;
   font-weight: 600;
   padding: 2px 7px;
   border-radius: 20px;
}

.pc-acts {
   position: absolute;
   top: 8px;
   right: 8px;
   display: flex;
   gap: 4px;
   z-index: 4;
}

.pc[data-id] { cursor: pointer; }

.pc-act {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.92);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1d1d1f;
   transition: all 0.15s;
   text-decoration: none;
}

.pc-act:hover {
   background: #fff;
   transform: scale(1.1);
}

.pc-act.del:hover {
   background: #fce8e8;
   color: #c0392b;
}

.pc-body {
   padding: 12px 14px 16px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

.pc-cat {
   font-size: 10px;
   color: #86868b;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 2px;
}

.pc-name {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.2;
}

.pc-desc {
   font-size: 11px;
   color: #86868b;
   margin-top: 3px;
   line-height: 1.35;
   flex: 1;
}

.pc-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 10px;
}

.pc-price {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: -0.02em;
}

.pc-orig {
   font-size: 10px;
   color: #86868b;
   text-decoration: line-through;
   margin-left: 4px;
}

.pc-status {
   display: flex;
   align-items: center;
   gap: 3px;
   font-size: 10px;
   color: #1a7f37;
   font-weight: 500;
}

.pc-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: #1a7f37;
}

.pc-add {
   border: 1.5px dashed #d2d2d7;
   background: transparent;
   border-radius: 16px;
   min-height: 220px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: #86868b;
   transition: all 0.18s;
   font-family: var(--font);
}

.pc-add:hover {
   border-color: #1d1d1f;
   color: #1d1d1f;
   background: #fff;
}

.pc-add-ico {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   border: 1.5px solid currentColor;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
}

.adm-fc {
   background: #fff;
   border: 1px solid #e8e8ed;
   border-radius: 16px;
   padding: 24px;
   margin-bottom: 14px;
}

.adm-fct {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-bottom: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid #e8e8ed;
}

.adm-f {
   margin-bottom: 14px;
}

.adm-f:last-child {
   margin-bottom: 0;
}

.adm-f label {
   display: block;
   font-size: 11px;
   font-weight: 500;
   color: #86868b;
   margin-bottom: 4px;
   letter-spacing: 0.01em;
   text-transform: uppercase;
}

.adm-f input,
.adm-f select,
.adm-f textarea {
   width: 100%;
   border: 1px solid #d2d2d7;
   border-radius: 9px;
   padding: 9px 12px;
   font-size: 14px;
   font-family: var(--font);
   color: #1d1d1f;
   background: #fff;
   outline: 0;
   transition: border-color 0.15s;
}

.adm-f input:focus,
.adm-f select:focus,
.adm-f textarea:focus {
   border-color: #1d1d1f;
}

.adm-f textarea {
   resize: vertical;
   min-height: 80px;
   line-height: 1.5;
}

.adm-f-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.adm-f-hint {
   font-size: 11px;
   color: #86868b;
   margin-top: 3px;
}

.adm-img-zone {
   border: 1.5px dashed #d2d2d7;
   border-radius: 12px;
   padding: 32px 20px;
   text-align: center;
   cursor: pointer;
   transition: all 0.18s;
   background: #f5f5f7;
}

.adm-img-zone:hover {
   border-color: #1d1d1f;
   background: #fff;
}

.adm-img-zone p {
   font-size: 13px;
   color: #86868b;
   margin-top: 7px;
}

.adm-img-zone span {
   font-size: 11px;
   color: #d2d2d7;
}

.spec-r {
   display: grid;
   grid-template-columns: 18px 1fr 1fr 28px;
   gap: 7px;
   margin-bottom: 7px;
   align-items: center;
}

.spec-drag {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   color: #c7c7cc;
   font-size: 14px;
   letter-spacing: -1px;
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
   font-family: var(--font);
}
.spec-drag:active { cursor: grabbing; }

.spec-r.spec-dragging {
   opacity: 0.4;
}

.color-drag {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 22px;
   margin: -14px -14px 10px;
   background: #eeeeee;
   color: #b0b0b5;
   font-size: 12px;
   letter-spacing: 3px;
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
   border-radius: 12px 12px 0 0;
}
.color-drag:active { cursor: grabbing; }

.color-variant-row.color-dragging { opacity: 0.4; }

.si {
   border: 1px solid #d2d2d7;
   border-radius: 7px;
   padding: 7px 10px;
   font-size: 13px;
   font-family: var(--font);
   color: #1d1d1f;
   width: 100%;
   outline: 0;
   background: #fff;
}

.si:focus {
   border-color: #1d1d1f;
}

.sdel {
   width: 28px;
   height: 28px;
   border: 1px solid #e8e8ed;
   border-radius: 7px;
   background: transparent;
   cursor: pointer;
   color: #86868b;
   font-size: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.15s;
}

.sdel:hover {
   background: #fce8e8;
   border-color: #f5a5a5;
   color: #c0392b;
}

.add-s-btn {
   font-size: 12px;
   color: #0071e3;
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 4px 0;
   font-family: var(--font);
}

.tog-r {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 0;
   border-bottom: 1px solid #e8e8ed;
}

.tog-r:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.tog-r .lbl {
   font-size: 14px;
   color: #1d1d1f;
}

.tog {
   position: relative;
   width: 36px;
   height: 20px;
   cursor: pointer;
   flex-shrink: 0;
}

.tog input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
}

.tog-t {
   position: absolute;
   inset: 0;
   background: #d2d2d7;
   border-radius: 10px;
   transition: all 0.22s;
}

.tog input:checked~.tog-t {
   background: #1d1d1f;
}

.tog-th {
   position: absolute;
   top: 2px;
   left: 2px;
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 50%;
   transition: all 0.22s;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.tog input:checked~.tog-t .tog-th {
   left: 18px;
}

.adm-form-layout {
   display: grid;
   grid-template-columns: 1fr 270px;
   gap: 18px;
   align-items: start;
}

.adm-back {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 13px;
   color: #86868b;
   background: transparent;
   border: none;
   cursor: pointer;
   font-family: var(--font);
   margin-bottom: 14px;
   padding: 0;
   text-decoration: none;
   transition: color 0.15s;
}

.adm-back:hover {
   color: #1d1d1f;
}

.pill {
   display: inline-flex;
   align-items: center;
   padding: 3px 9px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 500;
}

.pill-on {
   background: #e6f4ea;
   color: #1a7f37;
}

.pill-off {
   background: #f5f5f7;
   color: #86868b;
}

.adm-tbl {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
}

.adm-tbl th {
   text-align: left;
   font-size: 10px;
   font-weight: 600;
   color: #86868b;
   padding: 9px 14px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   border-bottom: 1px solid #e8e8ed;
}

.adm-tbl td {
   padding: 12px 14px;
   border-bottom: 1px solid #f0f0f2;
   vertical-align: middle;
}

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

.adm-tbl tr:hover td {
   background: #fafafa;
}

.adm-card {
   background: #fff;
   border: 1px solid #e8e8ed;
   border-radius: 14px;
   overflow: hidden;
   margin-bottom: 14px;
}

.adm-card-hdr {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 18px;
   border-bottom: 1px solid #e8e8ed;
}

.adm-card-hdr h3 {
   font-size: 14px;
   font-weight: 600;
}

.adm-card-body {
   padding: 18px;
}

.banner-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin-bottom: 24px;
}

.b-card {
   background: #fff;
   border: 1px solid #e8e8ed;
   border-radius: 14px;
   overflow: hidden;
   transition: transform 0.2s, box-shadow 0.2s;
}

.b-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.b-card-img {
   height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.04em;
   overflow: hidden;
   position: relative;
}

.b-card-img img {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.b-card-body {
   padding: 12px 16px;
}

.b-card-name {
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 5px;
}

.b-card-meta {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 11px;
   color: #86868b;
}

.b-card-acts {
   display: flex;
   gap: 7px;
   margin-top: 10px;
}

.adm-settings-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

.adm-login-wrap {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f5f5f7;
}

.adm-login-card {
   background: #fff;
   border-radius: 18px;
   box-shadow: 0 8px 36px rgba(0, 0, 0, 0.11);
   padding: 44px;
   width: 100%;
   max-width: 360px;
}

.adm-login-logo {
   text-align: center;
   font-size: 21px;
   font-weight: 700;
   letter-spacing: -0.04em;
   margin-bottom: 28px;
}

.adm-login-logo span {
   color: #0071e3;
}

.adm-login-error {
   background: #fce8e8;
   color: #c0392b;
   padding: 10px 14px;
   border-radius: 9px;
   font-size: 14px;
   margin-bottom: 16px;
}

.flash-msg {
   position: fixed;
   bottom: 22px;
   right: 22px;
   z-index: 9999;
   background: #1d1d1f;
   color: #fff;
   padding: 12px 18px;
   border-radius: 10px;
   font-size: 14px;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
   animation: fadeUp 0.25s ease;
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(8px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

.img-preview-box {
   width: 100%;
   aspect-ratio: 1;
   object-fit: contain;
   border-radius: 10px;
   background: #f5f5f7;
   padding: 14px;
   margin-bottom: 10px;
}

@media (max-width: 768px) {
   .adm-stats {
      grid-template-columns: 1fr 1fr;
   }

   .adm-form-layout {
      grid-template-columns: 1fr;
   }

   .adm-settings-grid {
      grid-template-columns: 1fr;
   }

   .banner-grid {
      grid-template-columns: 1fr;
   }

   .pgrid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   }

   .adm-main {
      padding: 16px;
   }

   .adm-tabs {
      display: none;
   }

   .adm-side {
      display: none;
   }

   /* Hero banner slide */
   .ms-hero-wrap {
      height: clamp(360px, 45vh, 550px);
      height: clamp(360px, 45svh, 550px);
      min-height: 360px;
   }

   .ms-slide.hero-banner-slide,
   .ms-slide.hero-banner-slide.active {
      min-height: 100%;
      height: 100%;
   }

   .ms-slide.hero-banner-slide {
      background: #000;
   }

   .ms-slide.hero-banner-slide .ms-hero-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.01);
   }

   .ms-slide.hero-banner-slide.active .ms-hero-bg {
      transform: scale(1);
   }

   /* Banner de hero con imagen específica para móvil (si se subió una) */
   .hero-bg-desktop { display: none; }
   .hero-bg-mobile { display: block; }

   .ms-slide.hero-banner-slide .ms-hero-overlay {
      background: linear-gradient(to bottom, rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .52) 100%);
   }

   .ms-slide.hero-banner-slide .ms-hero-content {
      max-width: 100%;
      padding: 0 16px 20px;
   }
}

@media (max-width: 480px) {
   .adm-stats {
      grid-template-columns: 1fr;
   }

   .adm-f-row {
      grid-template-columns: 1fr;
   }

   .pgrid {
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   }
}

/* ―― Home: Promos y Cuotas ―― */
.home-promos-section {
   background: #fff;
   padding: 120px 24px;
}

.home-promos-row {
   display: flex;
   flex-wrap: wrap;
   gap: 32px;
   justify-content: center;
   align-items: stretch;
   margin-top: 48px;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

.home-promos-item {
   text-align: center;
   width: min(320px, 100%);
   background: #f5f5f7;
   border-radius: 24px;
   padding: 40px 32px;
   transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.25s var(--ease-out);
}

.home-promos-item img {
   max-height: 100px;
   max-width: 100%;
   object-fit: contain;
   display: block;
   margin: 0 auto;
   transition: transform 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
   .home-promos-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
      background: #fff;
   }
   .home-promos-item:hover img {
      transform: scale(1.04);
   }
}

.home-cuotas-section {
   background: #f5f5f7;
   padding: 64px 24px;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.home-cuotas-row {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
   align-items: center;
}

.home-cuotas-item {
   background: #fff;
   border-radius: 16px;
   padding: 16px 24px;
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 120px;
   justify-content: center;
   transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
   border: none;
}

@media (hover: hover) and (pointer: fine) {
   .home-cuotas-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
   }
}


@media (max-width: 640px) {

   .home-promos-section,
   .home-cuotas-section {
      padding: 64px 20px;
   }

   .home-promos-row {
      gap: 20px;
      margin-top: 32px;
   }

   .home-promos-item {
      width: 100%;
      padding: 32px 24px;
      border-radius: 20px;
   }

   .home-promos-item img {
      max-height: 80px;
   }

   .home-cuotas-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
   }

   .home-cuotas-item {
      min-width: 0;
      width: 100%;
      padding: 10px 12px;
   }
}

@media (max-width: 420px) {
   .home-cuotas-row {
      grid-template-columns: 1fr;
      gap: 12px;
   }
}

/* Columnas del RTE (tabla) — apilan en móvil */
@media (max-width: 640px) {
   table.rte-cols tr { display: flex; flex-direction: column; }
   table.rte-cols td { width: 100% !important; display: block; padding: 8px 0 !important; }
}

/* ==========================================================================
   11. RESPONSIVE FIXES
   ========================================================================== */
html,
body {
   max-width: 100vw;
   overflow-x: hidden;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
}

body {
   word-wrap: break-word;
}

/* Prevenir overflow horizontal en cualquier elemento */
img,
video,
svg,
iframe {
   max-width: 100%;
}

.ms-card-name,
.detail-h1,
.ms-showcase-title,
.ms-section-head h2,
.cat-header h1 {
   word-break: break-word;
   overflow-wrap: break-word;
}

/* Tablas y elementos de ancho fijo */
table {
   max-width: 100%;
   overflow-x: auto;
   display: block;
}

/* Admin: evitar overflow en mobile */
@media (max-width: 768px) {
   .adm-main {
      overflow-x: hidden;
   }
   .adm-f-row {
      grid-template-columns: 1fr !important;
   }
}
/* Fix product card buttons alignment */
.ms-card > div > a:first-of-type {
  flex: none !important;
}
.ms-card > div > a:last-of-type {
  margin-top: auto !important;
}

/* Card body compacto para 2 columnas en mobile */
@media (max-width: 640px) {
  .ms-card > div:last-child {
    padding: 10px 10px 12px !important;
  }
  .ms-card .ms-card-name,
  .ms-card h3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ms-card .ms-card-price,
  .ms-card [class*="card-price"],
  .ms-card span[style*="font-size:17px"] {
    font-size: 13px !important;
  }
  .ms-card .ms-card-orig,
  .ms-card span[style*="line-through"] {
    font-size: 11px !important;
  }
  /* Buy button más compacto */
  .ms-card > div > a[href*="wa.me"],
  .ms-card > div > a[href*="/producto"] {
    padding: 8px 0 !important;
    font-size: 12px !important;
    border-radius: 980px !important;
  }
  /* Chips de variantes más pequeños */
  .card-cap {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
  /* Imagen de tarjeta: forzar escala 1 en grid (corrige productos mal encuadrados) */
  .ms-catalog-grid .ms-card-img img,
  .ms-catalog-grid .ms-card-img video {
    transform: scale(1) !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

/* ==========================================================================
   SAFARI CROSS-BROWSER FLEX COMPATIBILITY
   gap en flex no funciona en Safari < 14.1 — usamos margin como fallback
   ========================================================================== */

/* Hero buttons */
.ms-hero-btns {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 16px;
   justify-content: center;
}
.ms-hero-btns > * + * { margin-left: 0; }
@supports not (gap: 1px) {
   .ms-hero-btns { gap: 0; }
   .ms-hero-btns > * + * { margin-left: 16px; margin-top: 8px; }
}

/* Showcase buttons */
.ms-showcase-btns {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}

/* Detail CTAs */
.detail-ctas {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
@supports not (gap: 1px) {
   .detail-ctas { gap: 0; }
   .detail-ctas > * + * { margin-left: 16px; margin-top: 8px; }
}

/* Footer social */
.footer-social {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
}
@supports not (gap: 1px) {
   .footer-social { gap: 0; }
   .footer-social > * + * { margin-left: 16px; }
}

/* Footer bottom */
@supports not (gap: 1px) {
   .footer-bottom { gap: 0; }
   .footer-bottom > * + * { margin-top: 16px; }
   .footer-actions { gap: 0; }
   .footer-actions > * + * { margin-left: 12px; }
}

/* Promo bar */
@supports not (gap: 1px) {
   .promo-bar { gap: 0; }
   .promo-bar > * + * { margin-left: 8px; }
}

/* ==========================================================================
   iOS SAFE AREA — soporte para notch / Dynamic Island / Home Bar
   ========================================================================== */

/* WhatsApp FAB no quede detrás de la home bar en iPhone */
.whatsapp-fab {
   bottom: max(32px, calc(32px + env(safe-area-inset-bottom)));
   right: max(32px, calc(32px + env(safe-area-inset-right)));
}

/* Footer con padding extra en iPhone con home bar */
footer {
   padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
}

/* Menú móvil ocupa el área segura completa */
.mob-nav {
   padding-top: max(64px, calc(48px + env(safe-area-inset-top)));
   padding-bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
   padding-left: max(24px, calc(24px + env(safe-area-inset-left)));
   padding-right: max(24px, calc(24px + env(safe-area-inset-right)));
}

/* Barra de navegación respeta el notch en landscape */
@supports (padding: max(0px)) {
   .nav-inner {
      padding-left: max(22px, calc(22px + env(safe-area-inset-left)));
      padding-right: max(22px, calc(22px + env(safe-area-inset-right)));
   }
}

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

   [data-reveal] {
      opacity: 1;
      transform: none;
   }
}

/* ══ Banners del hero: tamaños configurables por banner (admin → Banners) ══ */
/* Alto: la clase va en .ms-hero-wrap (la pone el servidor con el 1er banner y
   el slider la cambia al rotar). md = el alto de siempre. */
.ms-hero-wrap { transition: height .6s ease; }
.ms-hero-wrap.hero-h-sm { height: 35vh; height: 35svh; min-height: 280px; max-height: 420px; }
.ms-hero-wrap.hero-h-lg { height: 65vh; height: 65svh; min-height: 440px; max-height: 760px; }
.ms-hero-wrap.hero-h-xl { height: 85vh; height: 85svh; min-height: 520px; max-height: 1000px; }
.ms-hero-wrap.hero-h-sm .ms-slide.active,
.ms-hero-wrap.hero-h-lg .ms-slide.active,
.ms-hero-wrap.hero-h-xl .ms-slide.active { height: 100%; min-height: 100%; max-height: none; }

/* Título y subtítulo */
.ms-slide.hero-t-sm .ms-hero-title { font-size: clamp(24px, 5vw, 56px); }
.ms-slide.hero-t-sm .ms-eyebrow    { font-size: clamp(11px, 1.1vw, 13px); }
.ms-slide.hero-t-lg .ms-hero-title { font-size: clamp(40px, 10vw, 128px); }
.ms-slide.hero-t-lg .ms-eyebrow    { font-size: clamp(14px, 2vw, 22px); }

/* Botones */
.ms-slide.hero-b-sm .ms-hero-btns a { padding: 8px 16px; font-size: 13px; }
.ms-slide.hero-b-lg .ms-hero-btns a { padding: 16px 34px; font-size: 18px; }
.ms-btn-primary.ms-btn-white { background: #fff; color: #1d1d1f; }
.ms-btn-primary.ms-btn-white:hover { background: #f0f0f2; }

/* ══ Footer: barra legal en varias líneas (antes se cortaba con "…") ══ */
.footer-legal-inner { white-space: normal; overflow: visible; flex-wrap: wrap; align-items: flex-start; }
.footer-legal-inner span { overflow: visible; text-overflow: clip; flex: 1 1 auto; } /* En columna, un basis de 320px se convertía en 320px de alto vacío. */
.footer-legal-inner span + span { text-align: right; }
@media (max-width: 767px) { .footer-legal-inner span + span { text-align: left; } }

/* WhatsApp como ícono junto a las redes (verde para reconocerlo) */
.footer-social a.footer-social-whatsapp { color: #25D366; }
.footer-social a.footer-social-whatsapp:hover { color: #1ebe57; }
.footer-social-block { margin-top: 4px; }

/* ══ Footer: proporciones como en el editor (columna izquierda más ancha,
   aire entre bloques, íconos más grandes, barra legal alineada) ══ */
footer .footer-inner { max-width: 1120px; }
footer .footer-grid { grid-template-columns: minmax(230px, 280px) 1fr; gap: 56px; }
footer .footer-left .footer-info-block { margin-bottom: 26px; }
footer .footer-left .footer-info-block:last-child { margin-bottom: 0; }
footer .footer-info-label { margin-bottom: 8px; }
footer .footer-social { gap: 12px; margin-top: 4px; }
footer .footer-social a { width: 36px; height: 36px; }
footer .footer-bottom { margin-top: 40px; }
.footer-legal-bar { padding: 14px 0; }
.footer-legal-inner { max-width: 1120px; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 900px) {
   footer .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ══ Footer compacto: menos aire vertical ══ */
footer { padding-top: 20px; padding-bottom: max(16px, calc(12px + env(safe-area-inset-bottom))); }
footer .footer-brand-row { margin-bottom: 10px; }
footer .footer-left .footer-info-block { margin-bottom: 14px; }
footer .footer-info-label { margin-bottom: 6px; }
footer .footer-social { gap: 10px; margin-top: 2px; }
footer .footer-social a { width: 32px; height: 32px; }
footer .footer-col h4 { margin-bottom: 8px; }
footer .footer-col a { margin-bottom: 4px; }
footer .footer-bottom { margin-top: 18px; padding-top: 10px; }
@media (max-width: 900px) { footer .footer-grid { gap: 22px; margin-bottom: 0; } }

/* ══ Tarjetas de producto: MISMAS medidas en toda la tienda (computadora) ══
   Cada página guardada en el editor (y cada plantilla) traía sus propios
   valores fijos: botón 15px en iPhone, 19px en Mac/iPad/Watch, catálogo con
   otro padding… Esta regla manda sobre todas, también sobre productos nuevos.
   En celular manda la regla de @media (max-width: 640px) de más arriba. */
@media (min-width: 641px) {
  .ms-card > div:last-child { padding: 16px 18px 18px !important; }
  .ms-card h3 { font-size: var(--fs-sub) !important; margin: 0 0 8px !important; }
  .ms-card a.ms-card-cta { font-size: 15px !important; font-weight: 600 !important; padding: 11px 0 !important; }
}

/* Bloques de categoría/poster con fondo blanco: imagen sin sombra (halo) */
.ms-showcase.ms-bg-white .ms-showcase-img img,
.ms-showcase.ms-bg-white:hover .ms-showcase-img img { filter: none !important; }

/* ══ Editor de especificaciones (admin → producto): varias líneas + ojito ══ */
.specs-editor .spec-r { grid-template-columns: 18px minmax(120px, 1fr) 2.4fr 34px 28px; align-items: start; }
.specs-editor .spec-drag { height: 38px; }
.specs-editor .spec-key { font-weight: 600; }
.specs-editor .spec-val { resize: none; overflow: hidden; min-height: 38px; line-height: 1.45; font-family: inherit; }
.spec-eye { width: 34px; height: 38px; border: 1.5px solid #e8e8ed; border-radius: 9px; background: #fff; color: #1d1d1f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.spec-eye:hover { background: #f5f5f7; }
.spec-r.spec-off .spec-eye { color: #c0392b; border-color: #f3c2bd; background: #fdf1f0; }
.spec-r.spec-off .spec-key, .spec-r.spec-off .spec-val { opacity: .5; }
.specs-editor .sdel { margin-top: 5px; }
@media (max-width: 640px) {
  .specs-editor .spec-r { grid-template-columns: 18px 1fr 34px 28px; }
  .specs-editor .spec-val { grid-column: 2 / -1; grid-row: 2; }
}

/* ── Carrusel del hero: cápsula discreta en la esquina inferior derecha ── */
.ms-hero-bar{position:absolute;right:24px;bottom:18px;left:auto;transform:none;z-index:12;display:flex;align-items:center;gap:12px;padding:5px 6px 5px 14px;border-radius:999px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:0 2px 10px rgba(0,0,0,.10);max-width:calc(100% - 32px)}
.ms-hero-bar:not(:has(.ms-hero-ctrls)){padding:9px 14px}
.ms-hero-bar .ms-dots{position:static;transform:none;display:flex;align-items:center;gap:6px}
.ms-hero-bar .ms-dot{position:relative;overflow:hidden;width:18px;height:6px;border-radius:4px;background:rgba(29,29,31,.22);border:none;box-shadow:none;padding:0;cursor:pointer;transition:width .3s,background .25s}
.ms-hero-bar .ms-dot:hover{background:rgba(29,29,31,.4)}
.ms-hero-bar .ms-dot.active{width:30px;background:rgba(29,29,31,.22)}
/* La píldora activa se llena durante el tiempo del banner */
.ms-hero-bar .ms-dot.active::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:#1d1d1f;animation:msDotFill var(--hero-dur,6s) linear forwards}
.ms-hero-bar.is-paused .ms-dot.active::after{animation:none;width:100%}
@keyframes msDotFill{to{width:100%}}
@media (prefers-reduced-motion:reduce){.ms-hero-bar .ms-dot.active::after{animation:none;width:100%}}
.ms-hero-ctrls{display:flex;align-items:center;gap:2px;padding-left:10px;border-left:1px solid rgba(29,29,31,.15)}
.ms-hero-ctrl{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:#1d1d1f;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.75;transition:background .2s,opacity .2s,transform .15s}
.ms-hero-ctrl svg{width:14px;height:14px}
.ms-hero-ctrl:hover{background:rgba(29,29,31,.1);opacity:1}
.ms-hero-ctrl:active{transform:scale(.9)}
.ms-hero-pause .ic-play{display:none}
.ms-hero-pause.is-paused .ic-play{display:block}
.ms-hero-pause.is-paused .ic-pause{display:none}
@media (max-width:640px){
  .ms-hero-bar{right:12px;bottom:10px;gap:8px;padding:3px 4px 3px 10px}
  .ms-hero-bar:not(:has(.ms-hero-ctrls)){padding:7px 10px}
  .ms-hero-bar .ms-dots{gap:5px}
  .ms-hero-bar .ms-dot{width:12px;height:5px}
  .ms-hero-bar .ms-dot.active{width:22px}
  .ms-hero-ctrls{padding-left:6px}
  .ms-hero-ctrl{width:24px;height:24px}
  .ms-hero-ctrl svg{width:12px;height:12px}
}

/* Footer: todos los títulos (Contacto, Conecta con nosotros, Productos, columnas) con el mismo color y estilo */
footer .footer-info-label,
footer .footer-col h4 { color: var(--black) !important; letter-spacing: 0.04em; font-weight: 600; }

/* ══ Footer simétrico (computadora): todos los bloques son columnas iguales;
   el primero pegado a la izquierda, el último a la derecha y los del medio
   centrados (con 3 bloques, "Productos" queda justo al centro). ══ */
@media (min-width: 700px) {
   footer .footer-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 40px; }
   footer .footer-cols-grid { display: contents; }
   footer .footer-grid > * { justify-self: center; }
   footer .footer-grid > .footer-left { justify-self: start; }
   footer .footer-cols-grid > .footer-col { justify-self: center; }
   footer .footer-cols-grid > .footer-col:last-child { justify-self: end; }
}

/* ══ Footer: líneas divisoras verticales entre columnas (estilo siman.com).
   Van justo a la mitad del espacio entre columnas; se calculan según cuántas
   columnas haya (2 a 5). Solo en computadora. ══ */
@media (min-width: 700px) {
   footer .footer-grid { --footer-div: rgba(0, 0, 0, .12); background-repeat: no-repeat; background-size: 1px 100%; }
   footer .footer-grid:has(> .footer-cols-grid > .footer-col:nth-child(1):last-child) { background-image: linear-gradient(var(--footer-div), var(--footer-div)); background-position: calc((100% - 40px) * 1/2 + 20px) 0; }
   footer .footer-grid:has(> .footer-cols-grid > .footer-col:nth-child(2):last-child) { background-image: linear-gradient(var(--footer-div), var(--footer-div)), linear-gradient(var(--footer-div), var(--footer-div)); background-position: calc((100% - 80px) * 1/3 + 20px) 0, calc((100% - 80px) * 2/3 + 60px) 0; }
   footer .footer-grid:has(> .footer-cols-grid > .footer-col:nth-child(3):last-child) { background-image: linear-gradient(var(--footer-div), var(--footer-div)), linear-gradient(var(--footer-div), var(--footer-div)), linear-gradient(var(--footer-div), var(--footer-div)); background-position: calc((100% - 120px) * 1/4 + 20px) 0, calc((100% - 120px) * 2/4 + 60px) 0, calc((100% - 120px) * 3/4 + 100px) 0; }
   footer .footer-grid:has(> .footer-cols-grid > .footer-col:nth-child(4):last-child) { background-image: linear-gradient(var(--footer-div), var(--footer-div)), linear-gradient(var(--footer-div), var(--footer-div)), linear-gradient(var(--footer-div), var(--footer-div)), linear-gradient(var(--footer-div), var(--footer-div)); background-position: calc((100% - 160px) * 1/5 + 20px) 0, calc((100% - 160px) * 2/5 + 60px) 0, calc((100% - 160px) * 3/5 + 100px) 0, calc((100% - 160px) * 4/5 + 140px) 0; }
}

/* Computadora: agrupar enlaces junto al contacto, sin mover logo ni contacto.
   Las divisiones siguen a las columnas en lugar de repartirse por todo el pie. */
@media (min-width: 901px) {
   footer .footer-grid {
      grid-auto-flow: row;
      grid-template-columns: max-content minmax(0, 1fr);
      gap: clamp(32px, 4vw, 64px);
      background-image: none !important;
   }
   footer .footer-cols-grid {
      display: flex;
      flex-wrap: wrap;
      justify-self: stretch;
      align-items: stretch;
      gap: 24px 48px;
   }
   footer .footer-cols-grid > .footer-col,
   footer .footer-cols-grid > .footer-col:last-child {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 100%;
      padding-left: 24px;
      border-left: 1px solid var(--footer-div);
      justify-self: start;
   }
}

/* overflow-x:hidden convierte .product-page en contenedor de scroll y el
   "sticky" de la imagen se desplazaba 90px hacia abajo. clip recorta igual
   sin romper el sticky (la imagen queda a la altura del título y se queda
   fija al bajar). */
.product-page { overflow-x: clip !important; }
/* Página de producto (computadora): la foto arranca arriba, a la altura del
   título, y su "tamaño en detalle" (zoom del producto/color) agranda el
   recuadro hacia abajo en vez de recortarla (lo aplica macstore.js).
   "html body" para ganarle al <style> propio de la página de producto. */
@media (min-width: 901px) {
   html body .product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
   html body .product-layout > .product-media > div:first-child { align-items: flex-start !important; aspect-ratio: auto !important; overflow: visible !important; padding: 0 0 24px !important; }
   html body .product-layout > .product-media .detail-img-box { display: block !important; max-height: none !important; height: 480px; padding: 0 !important; }
   html body .product-layout > .product-media #mainImg,
   html body .product-layout > .product-media #mainVid { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; margin: 0 auto !important; object-fit: contain !important; }
}

/* ══ Categorías de la portada: TODAS con el mismo espacio para la imagen.
   El tamaño de cada imagen se ajusta con zoom (propiedad "scale", la pone el
   editor al redimensionarla): agranda/achica la imagen sin mover ni agrandar
   el bloque. El ancho/alto fijo que el editor guardaba antes se ignora. ══ */
.ms-showcase .ms-showcase-img { height: clamp(280px, 38vw, 560px); }
.ms-showcase .ms-showcase-img img { width: auto !important; height: auto !important; max-width: 82% !important; max-height: 100% !important; transform-origin: center bottom; }
@media (max-width: 768px) {
   .ms-showcase .ms-showcase-img { height: clamp(240px, 55vw, 480px); }
   .ms-showcase .ms-showcase-img img { max-width: 92% !important; }
}
@media (max-width: 640px) {
   .ms-showcase .ms-showcase-img { height: clamp(130px, 52vw, 280px); }
}
@media (max-width: 480px) {
   .ms-showcase .ms-showcase-img { height: clamp(150px, 50vw, 260px); }
   .ms-showcase .ms-showcase-img img { max-width: 94% !important; }
}

/* ══ Celular: franja promocional flotante más compacta (el degradado y el
   bloque blanco eran de 190px para una imagen de ~50px) ══ */
@media (max-width: 768px) {
   #promoStripFixed > div:first-child { height: 18px !important; }
   #promoStripFixed > div:nth-child(2),
   #promoStripNatural > div { padding: 6px 12px !important; }
   #promoStripFixed img, #promoStripNatural img { height: auto !important; max-height: 70px !important; }
}

/* ══ Celular: imágenes de categoría (portada). Los movimientos X/Y que se
   hicieron en el editor para computadora no aplican aquí; el zoom sí, pero
   crece hacia abajo para no subirse sobre el título y el botón. ══ */
@media (max-width: 768px) {
   html body .ms-showcase .ms-showcase-img,
   html body .ms-showcase .ms-showcase-img img { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
   html body .ms-showcase .ms-showcase-img { align-items: center !important; margin-top: 8px; width: 100% !important; max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   MEJORAS DE INTERFAZ (cuestionario 2026-10-03)
   ══════════════════════════════════════════════════════════════════════ */
.sr-only{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}

/* a1 · Contraste: el gris de textos secundarios pasa de #86868b (3.6:1) a #6e6e73 (5:1) */
:root{--g4:#6e6e73}
[style*="color:#86868b"],[style*="color: #86868b"],[style*="color:#86868B"]{color:#6e6e73!important}
.ms-card-orig,.footer-legal-bar,.footer-legal-bar *,.footer-copy,.footer-bottom,.footer-bottom *{color:#6e6e73!important}
/* botón "Realizar pedido": verde con 5:1 de contraste; botón flotante 3:1 (ícono) */
#buyBtn,#msBuyBar .msb-btn{background:#15803d!important;box-shadow:0 4px 16px rgba(21,128,61,.28)!important}
#buyBtn:hover,#msBuyBar .msb-btn:hover{background:#166534!important}
.whatsapp-fab{background:#1da851!important}

/* c1 · Menú del celular: X visible arriba a la derecha */
.mob-nav .mob-close,.mob-nav button.mob-close{position:absolute!important;top:10px!important;right:12px!important;left:auto!important;width:44px!important;height:44px!important;min-width:0!important;padding:0!important;margin:0!important;border:none!important;border-radius:50%!important;background:#f0f0f2!important;color:#1d1d1f!important;font-size:28px!important;line-height:1!important;font-weight:300!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:5!important;cursor:pointer}
.mob-nav .mob-nav-search{margin-top:56px!important}

/* c3 · c4 · Celular y tablet: menú a la izquierda, logo centrado, lupa a la derecha */
@media (max-width:900px){
  .apple-nav .nav-inner{justify-content:space-between!important}
  .apple-nav .nav-inner .hamburger{order:-1!important;margin:0 0 0 -8px!important;padding:12px 8px!important}
  .apple-nav .nav-inner .nav-logo{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;margin:0!important}
  .apple-nav .nav-inner .nav-logo img{position:static!important;left:auto!important;top:auto!important}
  .apple-nav .nav-inner .nav-search-btn{display:flex!important;margin:0 -8px 0 auto!important;padding:12px 8px!important}
  .apple-nav .nav-inner .nav-search-btn svg{width:18px;height:18px}
}

/* d1 · Buscador con botón "Buscar" y X */
.nav-search-bar form{display:flex!important;align-items:center;gap:8px;max-width:600px;margin:0 auto!important}
.nav-search-bar form input{flex:1;max-width:none!important;margin:0!important}
.ms-search-go{border:none;background:#0071e3;color:#fff;font:inherit;font-size:14px;font-weight:600;border-radius:12px;padding:10px 16px;cursor:pointer;white-space:nowrap}
.ms-search-go:hover{background:#0077ed}
.ms-search-x{border:none;background:#f0f0f2;color:#1d1d1f;width:38px;height:38px;flex-shrink:0;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ms-search-x:hover{background:#e5e5ea}

/* d2 · Menú: la categoría actual se ve en negro pleno (estilo Apple, sin subrayado) */
.nav-links a.ms-nav-current{opacity:1!important;font-weight:500!important}

/* c6 · Controles del carrusel más fáciles de tocar en celular */
@media (max-width:640px){
  .ms-hero-bar .ms-dot{width:16px!important;height:7px!important;padding:10px 3px!important;box-sizing:content-box!important;background-clip:content-box!important}
  .ms-hero-bar .ms-dot.active{width:26px!important}
  .ms-hero-bar .ms-dot.active::after{left:3px!important;top:10px!important;bottom:10px!important;max-width:calc(100% - 6px)}
  .ms-hero-ctrl{width:34px!important;height:34px!important}
  .ms-hero-ctrl svg{width:14px!important;height:14px!important}
  .ms-hero-bar .ms-dots{gap:0!important}
}

/* c7 · Botón flotante de WhatsApp más pequeño en celular y se esconde con el botón de pedido */
@media (max-width:900px){ .whatsapp-fab{width:48px!important;height:48px!important;right:max(16px, env(safe-area-inset-right))!important;bottom:max(16px, env(safe-area-inset-bottom))} .whatsapp-fab svg{width:22px;height:22px} }
.whatsapp-fab{transition:opacity .25s,transform .25s,bottom .25s!important}
.whatsapp-fab.ms-fab-hide{opacity:0!important;pointer-events:none!important;transform:scale(.8)!important}

/* c9 · Celular: sin huecos arriba y abajo de la foto del producto */
@media (max-width:640px){
  html body .product-page{padding-top:6px!important}
  html body .product-layout > .product-media > div:first-child{padding:0 0 4px!important;aspect-ratio:auto!important;min-height:0!important}
  html body .product-layout .detail-img-box{min-height:0!important}
  html body .product-layout{gap:12px!important}
}

/* t2 · Tablet: foto y datos lado a lado */
@media (min-width:641px) and (max-width:900px){
  html body .product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important}
  html body .product-layout > .product-media{position:sticky!important;top:76px!important}
  html body .product-layout > .product-media > div:first-child{aspect-ratio:auto!important;padding:0!important;min-height:0!important}
  html body .product-layout .detail-img-box{min-height:0!important;height:auto!important}
}

/* c10 · Barra fija de pedido (celular y tablet) */
#msBuyBar{position:fixed;left:0;right:0;bottom:0;z-index:260;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -4px 20px rgba(0,0,0,.08);transform:translateY(110%);transition:transform .28s ease}
#msBuyBar.on{transform:none}
#msBuyBar .msb-info{flex:1;min-width:0}
#msBuyBar .msb-price{font-size:18px;font-weight:700;letter-spacing:-.02em;color:#1d1d1f;line-height:1.15}
#msBuyBar .msb-sub{font-size:12px;color:#6e6e73;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msBuyBar .msb-btn{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:15px;font-weight:600;padding:12px 18px;border-radius:980px;text-decoration:none;white-space:nowrap}
body.ms-buybar-on #promoStripFixed{opacity:0!important;pointer-events:none!important}
@media (min-width:901px){ #msBuyBar{display:none!important} }

/* c11 · c13 · c14 · Tarjetas: foto más grande en celular, burbujas y capacidades más fáciles de tocar */
@media (max-width:640px){
  html body .category-product-grid .ms-card,html body .catalog-grid .ms-card{max-width:380px!important;width:100%!important}
}
@media (max-width:900px){
  .ms-card .ms-card-swatch{width:28px!important;height:28px!important}
  .ms-card .card-cap{font-size:12px!important;padding:5px 11px!important;min-height:28px}
}
.ms-card [id^="caps_"]{margin-bottom:4px!important}

/* c15 · Filtros del catálogo: en celular se acomodan en dos líneas en vez de cortarse */
@media (max-width:640px){ html body .catalog-filter-row{flex-wrap:wrap!important;overflow:visible!important;justify-content:center!important} }

/* d3 · c16 · "Te sugerimos también": alineado y con botón; en celular, carrusel horizontal */
html body .product-page .product-related-grid{max-width:none!important;margin-left:0!important;margin-right:0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
html body .product-page .product-related-grid .ms-card-img{height:220px!important}
.ms-related-cta{display:block;text-align:center;background:#0071e3;color:#fff!important;padding:10px 0;border-radius:980px;font-size:14px;font-weight:600;text-decoration:none}
.ms-related-cta:hover{background:#0077ed}
@media (max-width:900px){ html body .product-page .product-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (max-width:640px){
  html body .product-page .product-related-grid{display:flex!important;overflow-x:auto!important;scroll-snap-type:x mandatory;gap:12px!important;padding:2px 2px 10px!important;-webkit-overflow-scrolling:touch}
  html body .product-page .product-related-grid > .ms-card{flex:0 0 72%!important;max-width:72%!important;scroll-snap-align:start}
  html body .product-page .product-related-grid .ms-card-img{height:190px!important}
}

/* c17 · "Ver todas las especificaciones" como botón */
#specsToggleBtn{width:100%!important;justify-content:center!important;padding:12px!important;border:1px solid #d2d2d7!important;border-radius:12px!important;background:#fff!important}

/* c18 · Textos legales: sin huecos entre palabras en celular */
@media (max-width:640px){ .info-page-body,.info-page-body *{text-align:left!important} }

/* g4 · Íconos de redes del pie más grandes y visibles */
footer .footer-social a{width:40px!important;height:40px!important;opacity:1!important;color:#1d1d1f!important;background:#e5e5ea!important}
footer .footer-social a svg{width:20px!important;height:20px!important}
footer .footer-social a:hover{background:#d2d2d7!important}

/* g1 · Botón para subir */
#msTop{position:fixed;left:20px;bottom:32px;z-index:199;width:44px;height:44px;border-radius:50%;border:none;background:rgba(29,29,31,.82);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s,bottom .25s;box-shadow:0 4px 14px rgba(0,0,0,.2)}
#msTop.on{opacity:1;pointer-events:auto;transform:none}
#msTop:hover{background:#1d1d1f}
@media (max-width:900px){ #msTop{left:auto;right:calc(max(16px, env(safe-area-inset-right)) + 2px);width:44px;height:44px} }
/* En el pie, los accesos tienen su propia fila; no flotan sobre el texto legal. */
.ms-footer-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; padding-top: 12px; }
footer .footer-bottom:has(> .ms-footer-tools) { flex-direction: column !important; align-items: stretch !important; }
.ms-footer-tools #msTop,
.ms-footer-tools .whatsapp-fab.whatsapp-fab {
   position: static !important; flex: 0 0 auto !important;
   opacity: 1 !important; pointer-events: auto !important; transform: none !important;
   margin: 0 !important; box-shadow: none !important;
}
.ms-footer-tools #msTop svg { color: #fff !important; stroke: currentColor !important; opacity: 1 !important; }

/* d8 · Franja flotante con X */
.ms-strip-x{position:absolute;top:50%;transform:translateY(-50%);right:10px;z-index:3;width:28px;height:28px;border-radius:50%;border:none;background:rgba(29,29,31,.08);color:#1d1d1f;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ms-strip-x:hover{background:rgba(29,29,31,.16)}
#promoStripFixed{position:fixed}
body.ms-strip-closed #promoStripFixed{display:none!important}

/* d5 · Foto del producto en grande */
#mainImg{cursor:zoom-in}
#msZoom{position:fixed;inset:0;z-index:1000;background:rgba(255,255,255,.97);display:none;align-items:center;justify-content:center;touch-action:pinch-zoom}
#msZoom.on{display:flex}
#msZoom img{max-width:94vw;max-height:90vh;object-fit:contain;cursor:zoom-in;transition:transform .25s ease;transform-origin:center}
#msZoom img.z{transform:scale(2.2);cursor:zoom-out}
#msZoom .msz-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:none;background:#f0f0f2;color:#1d1d1f;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
#msZoom .msz-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:13px;color:#6e6e73}

/* a2 · Foco visible en burbujas de color al usar teclado */
.ms-card-swatch:focus-visible,.color-swatch:focus-visible{outline:2px solid #0071e3!important;outline-offset:3px}
/* la barra fija de pedido no tapa el final de la página */
@media (max-width:900px){ body.ms-buybar-on{padding-bottom:78px} }

/* Franja flotante más baja y delgada en computadora (menos degradado y relleno) */
@media (min-width:769px){
  #promoStripFixed > div:first-child{height:20px!important}
  #promoStripFixed > div:nth-child(2){padding-top:8px!important;padding-bottom:8px!important}
}
/* Celular: espacio a la derecha de la franja para la X (no tapa los logos) */
@media (max-width:768px){
  #promoStripFixed > div:nth-child(2){padding-right:40px!important}
  #promoStripFixed .ms-strip-x{right:6px;width:26px;height:26px;font-size:16px}
}

/* Tarjetas en celular: precio grande y en negrita (estilo Siman); el anterior, tachado y más pequeño */
@media (max-width:640px){
  html body .ms-card .ms-card-price{font-size:21px!important;font-weight:700!important;letter-spacing:-.02em!important;line-height:1.15!important;color:#1d1d1f!important}
  html body .ms-card .ms-card-orig{font-size:14px!important;margin-right:6px!important}
  html body .ms-card h3{font-size:15px!important}
}

/* ══ iPad en vertical (2026-10-03) ══════════════════════════════════════════
   Pantallas de tablet sostenidas en vertical (641–1024 px de ancho). */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
   /* Banner principal completo, sin recortar los lados: el alto sigue la
      proporción del banner (3040×682) y se usa la imagen de computadora. */
   html body .ms-hero-wrap,
   html body .ms-hero-wrap.hero-h-sm, html body .ms-hero-wrap.hero-h-lg, html body .ms-hero-wrap.hero-h-xl,
   html body .ms-hero-wrap .ms-slide.active,
   html body .ms-hero-wrap .ms-slide.hero-banner-slide {
      height: auto !important; min-height: 0 !important; max-height: none !important;
      aspect-ratio: 3040 / 682;
   }
   html body .ms-hero-wrap .ms-slide.hero-banner-slide .ms-hero-bg { object-fit: cover !important; }
   html body .ms-hero-wrap .hero-bg-desktop { display: block !important; }
   html body .ms-hero-wrap .hero-bg-mobile { display: none !important; }

   /* Secciones del inicio: los ajustes de posición del editor están hechos
      para computadora y celular; en iPad vertical montaban la imagen sobre el
      texto y corrían el botón. Aquí todo va en orden: título, botón, imagen. */
   html body .ms-showcase .ms-showcase-inner,
   html body .ms-showcase .ms-showcase-text,
   html body .ms-showcase .ms-showcase-title,
   html body .ms-showcase .ms-showcase-btns,
   html body .ms-showcase .ms-showcase-img,
   html body .ms-showcase .ms-showcase-img img,
   html body .ms-showcase .ms-showcase-img video,
   html body .ms-showcase .ms-showcase-text * { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; }
   html body .ms-showcase .ms-showcase-btns { justify-content: center !important; }
   html body .ms-showcase .ms-showcase-img { height: 50vw !important; max-height: 520px !important; }

   /* Barra de promociones de abajo: mismo tamaño en todas las páginas (antes
      fuera del inicio la imagen se forzaba a 50 px y se veía diminuta). */
   html body #promoStripFixed img,
   html body #promoStripNatural img { height: auto !important; object-fit: contain !important; }

   /* El banner queda más bajo que en computadora: botones más compactos para
      no tapar el texto del banner. */
   html body .ms-hero-wrap .ms-hero-btns a,
   html body .ms-hero-wrap .ms-hero-btns button { font-size: 13px !important; padding: 7px 16px !important; min-height: 0 !important; }
}

/* iPad Pro 13" (y tablets de 901–1280 px): caben de sobra las categorías del
   menú; antes se escondían y quedaba la hamburguesa con el logo descentrado. */
@media (min-width: 901px) and (max-width: 1280px) {
   html body .apple-nav .nav-links { display: flex !important; }
   html body .apple-nav .nav-search-btn { display: flex !important; }
   html body .apple-nav .hamburger { display: none !important; }
}

/* Computadora: el botón para subir va encima del de WhatsApp, centrado con él */
@media (min-width:901px){ #msTop{left:auto;right:calc(max(32px, calc(32px + env(safe-area-inset-right))) + 6px)} }

/* Difuminado de la franja flotante: antes 20px lineales y se veía como un
   corte. Ahora es más largo y con curva suave (no cambia la altura de la
   franja blanca ni la posición de los botones). */
html body #promoStripFixed > div:first-child{
  height:48px!important;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,.45) 45%,rgba(255,255,255,.75) 68%,rgba(255,255,255,.93) 86%,#fff 100%)!important;
}
@media (max-width:768px){ html body #promoStripFixed > div:first-child{height:32px!important} }

/* ══ Fotos de las tarjetas más grandes en tablet / iPad (2026-10-03) ══
   El recuadro medía 340px pero la foto estaba limitada a 220px de alto. */
@media (min-width:641px) and (max-width:900px){
  html body :is(.category-product-grid,.catalog-grid) .ms-card.ms-card .ms-card-img{padding:10px !important}
  html body :is(.category-product-grid,.catalog-grid) .ms-card.ms-card .ms-card-img img,
  html body :is(.category-product-grid,.catalog-grid) .ms-card.ms-card .ms-card-img video{max-height:calc(318px / var(--img-scale, 1)) !important;max-width:calc(100% / var(--img-scale, 1)) !important;width:auto !important;height:auto !important}
}


/* ══ Celular: portadas de categorías (2026-10-04) ══
   Antes el recuadro medía ~195px de alto para todas y las fotos quedaban
   chicas y con huecos. Ahora cada foto usa todo el ancho y el recuadro toma
   el alto de la foto (con tope para las casi cuadradas). El zoom del editor
   no aplica aquí: con el ancho completo ya no hace falta. */
@media (max-width: 640px) {
   html body .ms-showcase .ms-showcase-img { height: auto !important; max-height: none !important; min-height: 0 !important; padding: 0 !important; margin-top: 14px !important; display: flex !important; justify-content: center !important; align-items: flex-end !important; overflow: visible !important; }
   html body .ms-showcase .ms-showcase-img img,
   html body .ms-showcase .ms-showcase-img video { width: auto !important; height: auto !important; max-width: 96% !important; max-height: 330px !important; scale: none !important; transform: none !important; display: block !important; }
   html body .ms-showcase .ms-showcase-text { gap: 14px !important; }
}

/* ==========================================================================
   CAJAS DE CATEGORÍA — medidas de apple.com (medidas el 2026-10-05)
   Caja: 692 / 650 / 500 px de alto, 12 px entre cajas.
   Título 56 / 48 / 32 px, subtítulo 28 / 24 / 19 px.
   Botón 17 px (44 px de alto); en celular 14 px (36 px de alto).
   Cortes de Apple: 1068 px y 734 px.
   La imagen ocupa todo el espacio libre bajo el botón, completa y centrada,
   en cualquier ancho de pantalla.
   ========================================================================== */
html body .ms-showcase { box-sizing: content-box; height: 692px; align-items: stretch; }
html body .ms-showcase .ms-showcase-inner { height: 100%; }
html body .ms-showcase .ms-showcase-text { padding: 56px 24px 0 !important; gap: 0 !important; flex: 0 0 auto; }
html body .ms-showcase .ms-showcase-desc { margin-top: 6px; }
html body .ms-showcase .ms-showcase-btns { margin-top: 16px; gap: 17px; }
html body .ms-showcase .ms-showcase-btns a { font-size: 17px; line-height: 1.17648; padding: 11px 21px; min-height: 0; }
html body .ms-showcase :is(.ms-showcase-img, #ms-x) { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin-top: 24px !important; }
/* Dentro de la caja todo se acomoda solo: los movimientos en píxeles y el
   zoom que el editor guardó para la caja anterior (p. ej. imagen de Mac
   subida 143 px, botón de Próximamente corrido 121 px) desarmaban la caja
   nueva en casi todos los anchos. :is(…, #ms-x) da a la regla peso de id
   para ganarle a esos ajustes. */
html body .ms-showcase :is(.ms-showcase-inner, .ms-showcase-text, .ms-showcase-title, .ms-showcase-desc, .ms-showcase-btns, .ms-showcase-btns a, .ms-showcase-img, #ms-x) {
   top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
   translate: none !important; scale: none !important;
}
html body .ms-showcase :is(.ms-showcase-btns, #ms-x) { justify-content: center !important; }
html body .ms-showcase .ms-showcase-img :is(img, video, #ms-x) {
   position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
   translate: none !important; scale: none !important;
   width: auto !important; height: auto !important;
   max-width: 100% !important; max-height: 100% !important;
   margin: 0 !important;
   object-fit: contain !important;
   transform-origin: center bottom !important;
}
html body .ms-showcase :is(.ms-showcase-img, #ms-x) {
   display: flex !important; align-items: flex-end !important; justify-content: center !important;
   width: 100% !important; max-width: 100% !important; overflow: hidden !important;
   padding: 0 !important;
}

.ms-showcase-title { font-size: 56px; line-height: 1.07143; font-weight: 600; letter-spacing: -0.005em; }
.ms-showcase-desc  { font-size: 28px; line-height: 1.14286; font-weight: 400; letter-spacing: 0.007em; }
.ms-cat-tile-name  { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: 0; }
.ms-cat-tile-desc  { font-size: 21px; line-height: 1.19048; font-weight: 400; letter-spacing: 0.011em; }

@media (max-width: 1068px) {
   html body .ms-showcase { height: 650px; }
   html body .ms-showcase .ms-showcase-text { padding-top: 61px !important; }
   .ms-showcase-title { font-size: 48px; line-height: 1.08349; letter-spacing: -0.002em; }
   .ms-showcase-desc  { font-size: 24px; line-height: 1.16667; letter-spacing: 0.009em; }
   .ms-cat-tile-name  { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
   .ms-cat-tile-desc  { font-size: 19px; line-height: 1.21053; letter-spacing: 0.012em; }
}

@media (max-width: 734px) {
   html body .ms-showcase { height: 500px; padding-left: 16px; padding-right: 16px; }
   html body .ms-showcase .ms-showcase-text { padding: 39px 0 0 !important; }
   html body .ms-showcase .ms-showcase-btns { margin-top: 14px; gap: 14px; }
   html body .ms-showcase .ms-showcase-btns a { font-size: 14px; line-height: 1.28577; padding: 8px 15px; }
   html body .ms-showcase :is(.ms-showcase-img, #ms-x) { margin-top: 18px !important; }
   .ms-showcase-title { font-size: 32px; line-height: 1.125; letter-spacing: 0.004em; }
   .ms-showcase-desc  { font-size: 19px; line-height: 1.21053; letter-spacing: 0.012em; }
   .ms-cat-tile-name  { font-size: 28px; line-height: 1.14286; letter-spacing: 0.007em; }
   .ms-cat-tile-desc  { font-size: 17px; line-height: 1.23536; letter-spacing: -0.022em; }
}

/* ==========================================================================
   FOTOS DE LAS TARJETAS DE PRODUCTO — como Siman / iShop (2026-10-05)
   Cada foto llega ya cuadrada, con el producto recortado y centrado siempre
   del mismo tamaño (utils/cardImage.js). Aquí el cuadro es cuadrado y la
   foto lo llena completa; el zoom por producto ya no hace falta en la
   tarjeta (la página de detalle conserva el suyo). En computadora el cuadro
   se limita a 260 px de alto para que la tarjeta entera quepa en pantalla.
   ========================================================================== */
html body .ms-card.ms-card.ms-card .ms-card-img.ms-card-img {
   width: 100% !important;
   height: auto !important;
   aspect-ratio: 1 / 1;
   max-height: 260px;
   padding: 0 !important;
   background: #fff;
}
html body .ms-card.ms-card.ms-card .ms-card-img.ms-card-img img,
html body .ms-card.ms-card.ms-card .ms-card-img.ms-card-img video {
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: contain !important;
   object-position: center !important;
   transform: none !important;
   scale: none !important;
}
@media (max-width: 640px) {
   html body .ms-card.ms-card.ms-card .ms-card-img.ms-card-img { max-height: none; }
}

/* Categorías: menos espacio arriba del título para que la fila de tarjetas
   se vea completa en pantalla completa (antes empezaban 44 px más abajo). */
@media (min-width: 641px) {
   html body .category-page,
   html body .catalog-page { padding-top: 20px !important; }
}
/* Pantallas bajas (laptops de 720–760 px de alto): cuadro de foto más bajo
   para que la fila de tarjetas quepa completa sobre la franja de promociones. */
/* (reemplazado: ver "DOS FILAS DE TARJETAS EN PANTALLA" al final) */
/* Catálogo en pantallas de hasta 820 px de alto: encabezado más compacto para
   que la primera fila de tarjetas se vea completa. */
@media (min-width: 901px) and (max-height: 820px) {
   html body .catalog-page > div > div:first-child { margin-bottom: 20px !important; }
   html body .catalog-page .catalog-filter-row { margin-bottom: 20px !important; }
}

/* Inicio (2026-10-13): las cinco categorías/posters comparten una altura.
   Una imagen vertical no agranda su bloque: conserva su proporción dentro
   del espacio disponible. Computadora y tablet mantienen sus alturas previas. */
@media (max-width: 734px) {
   html body .ms-showcase.ms-showcase {
      box-sizing: border-box !important;
      height: clamp(420px, 110vw, 500px) !important;
      min-height: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      overflow: hidden !important;
   }
   html body .ms-showcase.ms-showcase :is(.ms-showcase-inner, #ms-x) {
      height: 100% !important; min-height: 0 !important; max-height: 100% !important;
   }
   html body .ms-showcase :is(.ms-showcase-text, #ms-x) { padding: 39px 16px 0 !important; }
   html body .ms-showcase.ms-showcase :is(.ms-showcase-img, #ms-x) {
      flex: 1 1 0 !important; height: 0 !important; min-height: 0 !important;
      overflow: hidden !important; align-items: center !important;
   }
   html body .ms-showcase.ms-showcase .ms-showcase-img :is(img, video, #ms-x) {
      width: 100% !important; height: 100% !important;
      max-width: 100% !important; max-height: 100% !important;
      object-fit: contain !important;
   }
}

/* ==========================================================================
   LOGOS DE ARRIBA Y DE ABAJO (2026-10-06)
   Mismo tamaño de letra que el título de las categorías (--fs-title, el
   tamaño "título" del admin) y alineados al mismo borde izquierdo que el
   título y las tarjetas (contenido de 1320 px con 22 px de margen).
   El PNG del logo tiene las letras al 43 % de su alto y un margen
   transparente a la izquierda del 11.7 % de su alto: por eso 1.645 y 0.192.
   ========================================================================== */
:root {
   --logo-h: calc(var(--fs-title, 31px) * 1.645);
   --logo-pad: calc(var(--fs-title, 31px) * 0.192);
   /* --content-max: ancho del contenido; lo ajusta gridColsCss según las tarjetas por fila. */
   --content-left: max(22px, calc((100% - var(--content-max, 1320px)) / 2 + 22px));
}
html body .apple-nav .nav-logo img,
html body footer .footer-logo img {
   height: var(--logo-h) !important;
   width: auto !important;
   max-width: none !important;
}
/* Computadora: el logo de arriba sale del centro del menú y se alinea al
   contenido (el espacio que ocupaba se conserva para no mover el menú). */
@media (min-width: 901px) {
   html body .apple-nav .nav-inner { position: static !important; }
   html body .apple-nav .nav-inner .nav-logo { position: static !important; width: 98px !important; height: 35px !important; transform: none !important; }
   html body .apple-nav .nav-inner .nav-logo img {
      position: absolute !important;
      top: 50% !important;
      left: calc(var(--content-left) - var(--logo-pad)) !important;
      right: auto !important;
      transform: translateY(-50%) !important;
      margin: 0 !important;
   }
}
/* Pie de página: mismo ancho de contenido y mismo borde que las páginas. */
html body footer .footer-inner {
   max-width: var(--content-max, 1320px) !important;
   padding-left: 22px !important;
   padding-right: 22px !important;
   box-sizing: border-box !important;
}
html body footer .footer-logo img {
   position: relative !important;
   left: 0 !important; top: 0 !important;
   margin-left: calc(var(--logo-pad) * -1) !important;
}

/* Barra del menú fija arriba al bajar (2026-10-06). Tenía "sticky" pero no
   funcionaba: html y body con overflow-x:hidden convierten al body en
   contenedor de scroll y el sticky deja de pegarse. "clip" recorta igual lo
   que se salga por los costados sin romperlo (los navegadores viejos que no
   lo conocen se quedan con "hidden", como estaba). */
html, body { overflow-x: hidden; overflow-x: clip !important; overflow-y: visible !important; }
html body .apple-nav { position: -webkit-sticky; position: sticky !important; top: 0 !important; z-index: 300 !important; }

/* Franja de promociones (2026-10-06): mismo alto en todas las páginas para
   que su letra mida igual que la del pie (15 px). La imagen está hecha para
   mostrarse a 110 px de alto; antes el alto cambiaba con el ancho de la
   pantalla y con la página (50–110 px) y la letra salía de 8 a 14 px.
   En celular no cambia. */
@media (min-width: 641px) {
   html body div#promoStripNatural img,
   html body div#promoStripFixed img {
      height: 110px !important;
      max-height: 110px !important;
      width: auto !important;
      max-width: 100% !important;
      object-fit: contain !important;
   }
}

/* ==========================================================================
   FOTO DE LA PÁGINA DE PRODUCTO — como iShop / Siman (2026-10-06)
   La foto va dentro de un cuadro visible (borde gris claro, fondo blanco) y
   el producto ocupa ~70 % del cuadro, igual en todos los productos y
   colores: la foto ya llega recortada y centrada (utils/cardImage.js,
   detailImage) y el cuadro le deja un margen del 8 %. El zoom por producto y
   el resplandor de fondo ya no aplican aquí.
   ========================================================================== */
html body .product-layout > .product-media > div:first-child {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   aspect-ratio: 1 / 1 !important;
   height: auto !important;
   min-height: 0 !important;
   padding: 8% !important;
   background: #fff !important;
   border: 1px solid #e3e3e8 !important;
   border-radius: 18px !important;
   overflow: hidden !important;
   box-sizing: border-box !important;
}
html body .product-layout > .product-media #productGlow { display: none !important; }
html body .product-layout > .product-media .detail-img-box.detail-img-box {
   display: block !important;
   width: 100% !important;
   height: 100% !important;
   min-height: 0 !important;
   max-height: none !important;
   padding: 0 !important;
   transform: none !important;
   scale: none !important;
}
html body .product-layout > .product-media :is(#mainImg, #mainVid).detail-x,
html body .product-layout > .product-media #mainImg#mainImg,
html body .product-layout > .product-media #mainVid#mainVid {
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: contain !important;
   object-position: center !important;
   transform: none !important;
   scale: none !important;
   margin: 0 !important;
   filter: none !important;
   box-shadow: none !important;
}

/* Nombre de la categoría arriba de las tarjetas (2026-10-06): mismo tamaño
   que los nombres de la barra del menú (--fs-sub, el tamaño "subtítulo" del
   admin) y siempre en seminegrita (600: se nota que es la misma letra). */
html body .category-page h1 {
   font-size: var(--fs-sub) !important;
   font-weight: 600 !important;
   letter-spacing: -0.01em !important;
}

/* ==========================================================================
   SOLO DOS TAMAÑOS DE LETRA EN TODO EL SITIO (2026-10-06)
   Referencia: los nombres de la barra (18 px = --fs-sub, "subtítulo" en el
   admin) y la franja "Promociones válidas…" (15 px = --fs-info, "info").
   18 px: nombres y lo importante (títulos, nombre y precio del producto,
   nombre y precio en tarjetas). 15 px: todo lo demás.
   ".x.x :is(…, #ms-x)" da peso de id para ganarle a los ajustes del editor.
   ========================================================================== */
:root { --t-big: var(--fs-sub, 18px); --t-small: var(--fs-info, 15px); }

/* ---- 18 px ---- */
html body .product-layout.product-layout :is(h1, #ms-x) { font-size: var(--t-big) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; }
html body .product-layout.product-layout :is(#mainPrice, #ms-x) { font-size: var(--t-big) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; }
html body .ms-card.ms-card.ms-card :is(h3, .ms-card-name, #ms-x) { font-size: var(--t-big) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; }
html body .ms-card.ms-card.ms-card :is(.ms-card-price, #ms-x) { font-size: var(--t-big) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
html body .catalog-page.catalog-page :is(h2, #ms-x),
html body .product-page.product-page :is(h2, #ms-x),
html body .info-page-inner.info-page-inner :is(h1, .info-page-title, #ms-x) { font-size: var(--t-big) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; line-height: 1.3 !important; }

/* ---- 15 px ---- */
html body .ms-hero-wrap.ms-hero-wrap :is(.ms-hero-btns a, .ms-hero-btns button, #ms-x) { font-size: var(--t-small) !important; }
html body .ms-card.ms-card.ms-card :is(.ms-card-orig, .card-cap, .ms-card-cta, .ms-related-cta, .ms-card-cuota, p, #ms-x) { font-size: var(--t-small) !important; }
html body footer.ms-x, html body footer :is(a, h4, span, p, .footer-info-label, .footer-contact-link, #ms-x) { font-size: var(--t-small) !important; }
html body .footer-legal-bar :is(span, #ms-x) { font-size: var(--t-small) !important; }
html body .catalog-page.catalog-page > div > div:first-child :is(p, #ms-x) { font-size: var(--t-small) !important; }
html body .info-page-inner.info-page-inner :is(p, li, span, b, strong, a, td, #ms-x) { font-size: var(--t-small) !important; }
/* Página de producto: todo lo que no es nombre ni precio principal */
html body .product-layout.product-layout :is(p, label, button, a, span, small, li, .variant-btn, .variant-btn span, #buyBtn, #cuota10, #cuota6, #ms-x):not(#mainPrice):not(h1) { font-size: var(--t-small) !important; }
html body .product-layout.product-layout div:not(:has(*)):not(#mainPrice) { font-size: var(--t-small) !important; }
html body .product-layout.product-layout :is(#cuota10, #cuota6) { font-weight: 700 !important; }
/* Barra fija de compra en celular */
html body :is(.msb-sub, .msb-info, .msb-info *, #ms-x) { font-size: var(--t-small) !important; }

/* (Cajas compactas de 18 px retiradas: la portada vuelve a títulos y cajas de Apple) */

/* ==========================================================================
   DOS FILAS DE TARJETAS EN PANTALLA (computadora, 2026-10-06)
   Tarjeta más compacta (mismos tamaños de letra) y foto cuyo alto se
   calcula con el alto de la pantalla para que las dos primeras filas se vean
   completas sobre la franja de promociones, sin hacer scroll:
     alto foto = (alto pantalla − franja 118 − arriba de las tarjetas − 16 entre filas) / 2 − texto 164
   con un mínimo de 120 px y un máximo de 250 px.
   ========================================================================== */
html body .ms-card.ms-card > div:last-child { padding: 10px 12px 12px !important; }
html body .ms-card.ms-card.ms-card :is(h3, #ms-x) { margin: 0 0 4px !important; }
html body .ms-card.ms-card.ms-card :is(.card-cap, #ms-x) { margin: 0 !important; }
html body .ms-card.ms-card > div:last-child > div:has(> .ms-card-price) { padding-top: 4px !important; margin-bottom: 4px !important; }
html body .ms-card.ms-card > div:last-child > div:has(> .ms-card-swatch) { margin-bottom: 8px !important; }
/* Colores a la derecha del precio, en la misma fila (ahorra una fila).
   Cuadrícula: nombre/capacidad arriba, precio | colores, y el botón abajo
   (alineado entre tarjetas de la misma fila). */
html body .ms-card.ms-card > :is(div:last-child, #ms-x) {
   display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
   grid-auto-rows: auto !important; align-content: start !important; align-items: center !important;
   padding: 10px 12px 12px !important; row-gap: 0 !important; column-gap: 8px !important;
}
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > * { grid-column: 1 / -1 !important; min-width: 0 !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-price) { grid-column: 1 !important; padding-top: 4px !important; margin: 0 0 8px !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-swatch) { grid-column: 2 !important; justify-self: end !important; display: flex !important; gap: 5px !important; padding-top: 4px !important; margin: 0 0 8px !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > a.ms-card-cta { align-self: end !important; margin-top: auto !important; }
html body .ms-card.ms-card :is(.ms-card-price, .ms-card-orig, #ms-x) { white-space: nowrap !important; }
/* Tarjetas angostas (celular y tablet): los colores en su propia fila, como antes. */
@media (max-width: 900px) {
   html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-price) { grid-column: 1 / -1 !important; }
   html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-swatch) { grid-column: 1 / -1 !important; justify-self: start !important; padding-top: 0 !important; }
}
html body .ms-card.ms-card.ms-card :is(.ms-card-swatch, #ms-x) { width: 20px !important; height: 20px !important; }
html body .ms-card.ms-card.ms-card :is(a.ms-card-cta, #ms-x) { padding: 7px 0 !important; }
@media (min-width: 901px) {
   html body .category-page.category-page { padding-top: 16px !important; }
   html body .category-page.category-page > div:first-child { margin-bottom: 16px !important; }
   html body :is(#prodGrid, .category-product-grid, .catalog-grid, .ms-catalog-grid) .ms-card.ms-card.ms-card .ms-card-img.ms-card-img {
      height: clamp(110px, calc(50vh - 340px), 250px) !important;
      max-height: none !important;
      aspect-ratio: auto !important;
   }
}
/* Catálogo: encabezado compacto y foto calculada con su encabezado más alto. */
@media (min-width: 901px) {
   html body .catalog-page.catalog-page { padding-top: 16px !important; }
   html body .catalog-page > div > div:first-child { margin-bottom: 14px !important; }
   html body .catalog-page .catalog-filter-row { margin-bottom: 18px !important; }
   html body .catalog-page :is(#prodGrid, .catalog-grid) .ms-card.ms-card.ms-card .ms-card-img.ms-card-img { height: clamp(110px, calc(50vh - 340px), 250px) !important; }
}

/* ==========================================================================
   TARJETAS IGUALES EN TODAS LAS PÁGINAS (2026-10-06)
   Mismo ancho (catálogo con el mismo contenedor de 1320 px que las
   categorías), misma foto y mismo alto de texto: el espacio de la cajita de
   capacidad se reserva aunque el producto no la tenga, y el botón queda
   siempre abajo. Nombre en una sola línea.
   Filas del texto: 1 nombre · 2 capacidad · 3 (espacio) · 4 precio|colores · 5 botón
   ========================================================================== */
@media (min-width: 901px) {
   html body .catalog-page.catalog-page { max-width: var(--content-max, 1320px) !important; }
}
html body .ms-card.ms-card > :is(div:last-child, #ms-x) { grid-template-rows: auto auto 1fr auto auto !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > a:first-child { grid-row: 1 !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(.card-cap) { grid-row: 2 !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(.ms-card-price) { grid-row: 4 !important; grid-column: 1 / -1 !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-price) { grid-column: 1 !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-swatch) { grid-row: 4 !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > a.ms-card-cta { grid-row: 5 !important; }
html body .ms-card.ms-card.ms-card :is(h3,#ms-x){white-space:normal!important;display:block!important;min-height:3.9em!important}                     
@media (min-width: 901px) {
   html body .ms-card.ms-card > :is(div:last-child, #ms-x) { min-height: 151px !important; }
}
@media (max-width: 900px) {
   html body .ms-card.ms-card > :is(div:last-child, #ms-x) { grid-template-rows: auto auto 1fr auto auto auto !important; }
   html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-swatch) { grid-row: 5 !important; }
   html body .ms-card.ms-card > :is(div:last-child, #ms-x) > a.ms-card-cta { grid-row: 6 !important; }
}

/* ==========================================================================
   FRANJA DE PROMOCIONES (2026-10-06): comportamiento original (flota abajo y
   al llegar a su lugar, antes del pie de página, se queda fija). Para que en
   páginas con pocos productos también se vea flotando al entrar, después de
   los productos queda espacio en blanco: el contenido mide al menos lo que
   mide la pantalla, así el lugar de la franja empieza más abajo.
   ========================================================================== */
html body .category-page.category-page,
html body .catalog-page.catalog-page,
html body .info-page-wrap.info-page-wrap { min-height: calc(100vh - 40px) !important; box-sizing: border-box !important; }

/* Catálogo: encabezado compacto (computadora) para que también ahí se vean
   dos filas completas con tarjetas del mismo tamaño que en las categorías. */
@media (min-width: 901px) {
   html body .catalog-page.catalog-page { padding-top: 6px !important; }
   html body .catalog-page > div > div:first-child { margin-bottom: 6px !important; }
   html body .catalog-page > div > div:first-child :is(h2, #ms-x) { margin-bottom: 2px !important; line-height: 1.2 !important; }
   html body .catalog-page > div > div:first-child :is(p, #ms-x) { line-height: 1.3 !important; }
   html body .catalog-page .catalog-filter-row { margin-bottom: 4px !important; }
   html body .catalog-page .catalog-filter-row :is(a, #ms-x) { padding: 4px 16px !important; line-height: 20px !important; }
}

/* Página de producto (computadora): columna derecha un poco más compacta
   para que "Ver todas las especificaciones" (junto al título
   "Especificaciones") se vea sin hacer scroll (2026-10-06). */
@media (min-width: 901px) {
   html body .product-layout.product-layout > div:last-child > :is(*, #ms-x) { margin-bottom: 10px !important; }
   html body .product-layout.product-layout > div:last-child > :is(h1, #ms-x) { margin-bottom: 6px !important; }
   html body .product-layout.product-layout > div:last-child > :is(#mainPrice, #origPrice) { margin-bottom: 2px !important; }
   html body .product-layout.product-layout > div:last-child > :is(.product-cta-row, #ms-x) { margin-bottom: 10px !important; }
   html body .product-layout.product-layout > div:last-child > :is(#specsWrap, #ms-x) { margin-bottom: 0 !important; }
}
/* "Ver todas las especificaciones" junto al título: botón compacto a la derecha. */
html body #specsWrap .specs-head :is(#specsToggleBtn, #ms-x) { width: auto !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important; padding: 6px 14px !important; border: 1px solid #d2d2d7 !important; border-radius: 980px !important; background: #fff !important; min-height: 0 !important; }
/* En pantallas angostas el título y el botón no caben en una línea: el botón baja
   a la siguiente en vez de ensanchar toda la columna del producto (2026-10-13). */
html body #specsWrap .specs-head { flex-wrap: wrap !important; row-gap: 8px !important; }

/* Botones de almacenamiento / configuración (página de producto, 2026-10-06):
   el precio resalta (blanco en el seleccionado, negro en los demás) y la
   información (256GB, chip, memoria…) va en gris. */
html body .variant-btn.variant-btn > span:first-child { opacity: .7 !important; font-weight: 500 !important; }
html body .variant-btn.variant-btn > span:last-child:not(:first-child) { opacity: 1 !important; font-weight: 600 !important; }
/* Configuraciones en cuadrícula de 2 columnas (2026-10-13). Con :has para que
   también aplique a los diseños guardados del editor, que traen su propio
   display:flex en el contenedor. */
html body div:has(> .variant-btn) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 1fr !important; gap: 8px !important; }
/* Todas las cajitas del mismo tamaño (filas iguales): anchas y bajitas, con
   poco relleno lateral para que la configuración quepa en una línea. Alto de
   48 px, igual que los botones de pedido (configuración en 13 px en una línea
   + precio); si en celular el nombre no cabe, la caja crece. */
html body div:has(> .variant-btn) > .variant-btn { min-height: 48px !important; padding: 3px 10px !important; gap: 0 !important; justify-content: center !important; }
html body div:has(> .variant-btn) > .variant-btn > span:not(#_v1):not(#_v2) { line-height: 1.25 !important; }
html body div:has(> .variant-btn) > .variant-btn > span:first-child:not(:last-child):not(#_v1):not(#_v2) { font-size: 13px !important; line-height: 1.3 !important; } /* los :not(#…) le ganan a la regla general de 15 px del bloque de producto */

/* Tarjetas (2026-10-06): todo su texto en 15 px (tamaño de la franja), como
   pidió el usuario: nombre (seminegrita), capacidad, precios (el precio en
   negrita) y botón. La cajita de la capacidad, más compacta.
   (Se había borrado por error al devolver los títulos de la portada.) */
html body .ms-card.ms-card.ms-card :is(h3, .ms-card-name, .ms-card-price, #ms-x) { font-size: var(--t-small) !important; line-height: 1.3 !important; }
html body .ms-card.ms-card.ms-card :is(.card-cap, #ms-x) { padding: 2px 8px !important; line-height: 1.35 !important; border-radius: 6px !important; }

/* ==========================================================================
   ACABADO PREMIUM (2026-10-06) — referencia: apple.com (Figma "Apple website
   2024"). Mismos tamaños, colores y estructura de siempre; solo cambia la
   calidad del movimiento y de los detalles:
   · Tarjetas: sin giro 3D; se elevan suave y la foto hace un leve zoom.
   · Tarjetas blancas de una pieza, sombra muy suave (Apple casi no usa).
   · Cajita de capacidad clara y fina (antes gris oscuro).
   · Textos secundarios en los grises de Apple (#6E6E73).
   · Portada: al entrar cada caja, la foto aparece con un zoom suave.
   · Botones responden al pasar el mouse y al tocarlos.
   Nada se anima si el usuario pidió "reducir movimiento".
   ========================================================================== */
:root { --apple-ease: cubic-bezier(.25,.1,.25,1); --apple-gray: #6e6e73; }

/* ---- Tarjetas ---- */
html body .ms-card.ms-card {
   border-radius: 18px !important;
   background: #fff !important;
   box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
   transition: transform .5s var(--apple-ease), box-shadow .5s var(--apple-ease) !important;
}
html body .ms-card.ms-card > div:last-child,
html body .ms-card.ms-card > a:first-child,
html body .ms-card.ms-card .ms-card-img { background: #fff !important; }
html body .ms-card.ms-card > div:last-child { box-shadow: inset 0 1px 0 #f0f0f2 !important; }   /* línea sin ocupar alto */
html body .ms-card.ms-card .ms-card-img { overflow: hidden !important; }
html body .ms-card.ms-card .ms-card-img img { transition: transform .7s var(--apple-ease) !important; }
@media (hover: hover) and (pointer: fine) {
   /* "!important" le gana al giro 3D (que se pone en línea por JS) */
   html body .ms-card.ms-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 34px rgba(0,0,0,.10) !important; }
   html body .ms-card.ms-card:hover .ms-card-img img { transform: scale(1.04) !important; }
}
/* Cajita de capacidad: clara y fina */
html body .ms-card.ms-card.ms-card :is(.card-cap, #ms-x) {
   background: #f5f5f7 !important; color: #1d1d1f !important;
   border: 1px solid #e3e3e8 !important; font-weight: 500 !important;
}
html body .ms-card.ms-card.ms-card :is(.card-cap.active, #ms-x).active { background: #fff !important; color: #1d1d1f !important; border: 1px solid #1d1d1f !important; box-shadow: inset 0 0 0 .5px #1d1d1f !important; }
html body .ms-card.ms-card :is(.ms-card-orig, #ms-x) { color: #86868b !important; }
/* Etiquetas "Nuevo", "Oferta"… */
html body .ms-card .ms-card-badge { background: #1d1d1f !important; color: #fff !important; border: 0 !important; border-radius: 980px !important; font-weight: 600 !important; letter-spacing: .01em !important; }
@media (max-width: 768px) {
   /* En celular: más chica y pegada a la esquina, para no tapar la foto */
   html body .ms-card .ms-card-badge { top: 8px !important; left: 8px !important; font-size: 10px !important; padding: 3px 9px !important; max-width: calc(100% - 16px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
}

/* ---- Botones: respuesta al mouse y al tocar ---- */
html body :is(.ms-btn-primary, a.ms-card-cta, #buyBtn, .msb-btn, #msResBox .r-send) {
   transition: transform .2s var(--apple-ease), filter .2s var(--apple-ease), background-color .2s var(--apple-ease) !important;
}
@media (hover: hover) and (pointer: fine) {
   html body :is(.ms-btn-primary, a.ms-card-cta, #buyBtn, .msb-btn, #msResBox .r-send):hover { filter: brightness(1.08); }
}
html body :is(.ms-btn-primary, a.ms-card-cta, #buyBtn, .msb-btn, #msResBox .r-send):active { transform: scale(.97) !important; }

/* ---- Textos secundarios en el gris de Apple ---- */
html body .ms-showcase.ms-light :is(.ms-showcase-desc, #ms-x) { color: var(--apple-gray) !important; opacity: 1 !important; }
html body .product-layout.product-layout > div:last-child > p { color: var(--apple-gray) !important; }
html body .category-page > div:first-child p,
html body .catalog-page > div > div:first-child p { color: var(--apple-gray) !important; }

/* ---- Portada: la foto de cada caja entra con un zoom suave (computadora) ---- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
   html body .ms-showcase[data-reveal] .ms-showcase-img :is(img, video) {
      opacity: 0; transform: scale(1.06);
      transition: opacity 1.1s var(--apple-ease) .15s, transform 1.4s var(--apple-ease) .15s !important;
   }
   html body .ms-showcase[data-reveal].revealed .ms-showcase-img :is(img, video) { opacity: 1; transform: scale(1); }
   html body .ms-showcase[data-reveal] { transition: opacity .9s var(--apple-ease), transform .9s var(--apple-ease) !important; }
}

/* ---- Reducir movimiento ---- */
@media (prefers-reduced-motion: reduce) {
   html body .ms-card.ms-card, html body .ms-card.ms-card .ms-card-img img,
   html body :is(.ms-btn-primary, a.ms-card-cta, #buyBtn) { transition: none !important; }
   html body .ms-card.ms-card:hover, html body .ms-card.ms-card:hover .ms-card-img img { transform: none !important; }
}

/* ==========================================================================
   TEMA OSCURO (Configuración → Apariencia → Tema de la tienda) — 2026-10-06
   Se activa con la clase "ms-dark-theme" en <html>. Colores de apple.com en
   negro: fondo #000, tarjetas #1c1c1e, texto #f5f5f7, secundario #a1a1a6.
   Las cajas de categorías del inicio (.ms-showcase) conservan sus fondos.
   Muchos bloques traen colores escritos en línea (style="background:#fff"),
   por eso hay reglas por atributo además de las de clase.
   ========================================================================== */
html.ms-dark-theme { color-scheme: dark; --dk-bg: #000; --dk-card: #111113; --dk-card2: #18181a; --dk-line: #2a2a2d; --dk-text: #f5f5f7; --dk-text2: #a1a1a6; --dk-text3: #86868b; }
html.ms-dark-theme body { background: var(--dk-bg) !important; color: var(--dk-text) !important; }

/* Barra superior y menús */
html.ms-dark-theme .apple-nav { background: rgba(22,22,23,.82) !important; border-bottom-color: rgba(255,255,255,.08) !important; }
html.ms-dark-theme .apple-nav :is(.nav-links a, .nav-links button, .nav-search-btn) { color: #e8e8ed !important; }
html.ms-dark-theme .apple-nav .hamburger span { background: #e8e8ed !important; }
html.ms-dark-theme :is(.apple-nav .nav-logo img, footer .footer-logo img) { filter: invert(1) brightness(1.1) !important; }
html.ms-dark-theme :is(.nav-search-bar, #searchBar) { background: #161617 !important; border-color: var(--dk-line) !important; }
html.ms-dark-theme :is(.nav-search-bar, #searchBar, .mob-nav) input { background: var(--dk-card) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; }
html.ms-dark-theme .mob-nav { background: rgba(0,0,0,.96) !important; }
html.ms-dark-theme .mob-nav :is(a, button, .mob-close) { color: var(--dk-text) !important; border-color: var(--dk-line) !important; }

/* Fondos de página */
html.ms-dark-theme :is(.category-page, .catalog-page, .product-page, .info-page-wrap, .info-page-inner, main, .ms-catalog-section) { background: transparent !important; }
html.ms-dark-theme :is(h1, h2, h3, h4, .detail-h1) { color: var(--dk-text); }

/* Colores escritos en línea dentro del contenido (no en el inicio) */
html.ms-dark-theme body :not(.ms-showcase, .ms-showcase *, .ms-hero-wrap, .ms-hero-wrap *, #msResOverlay *):is(
   [style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background:#ffffff"],
   [style*="background:white"], [style*="background-color:#fff"], [style*="background: rgb(255, 255, 255)"]) { background: var(--dk-card) !important; }
html.ms-dark-theme body :not(.ms-showcase, .ms-showcase *, .ms-hero-wrap *):is(
   [style*="background:#f5f5f7"], [style*="background: #f5f5f7"], [style*="background:#F5F5F7"], [style*="background:#fafafa"]) { background: var(--dk-card) !important; }
html.ms-dark-theme body :not(.ms-showcase *, .ms-hero-wrap *, .ms-btn-primary, .ms-card-cta, #buyBtn, .variant-active, .variant-active *):is(
   [style*="color:#1d1d1f"], [style*="color: #1d1d1f"], [style*="color:#000"], [style*="color:#111"], [style*="color:#222"], [style*="color:#333"]) { color: var(--dk-text) !important; }
html.ms-dark-theme body :not(.ms-showcase *, .ms-hero-wrap *):is(
   [style*="color:#515154"], [style*="color:#6e6e73"], [style*="color:#424245"], [style*="color:#555"], [style*="color:#666"]) { color: var(--dk-text2) !important; }
html.ms-dark-theme body :not(.ms-showcase *, .ms-hero-wrap *):is([style*="border:1px solid #d2d2d7"], [style*="border:1.5px solid #d2d2d7"], [style*="border: 1px solid #d2d2d7"]) { border-color: var(--dk-line) !important; }

/* Tarjetas de producto */
html.ms-dark-theme .ms-card.ms-card { background: var(--dk-card) !important; box-shadow: none !important; }
html.ms-dark-theme body .ms-card.ms-card > div:last-child,
html.ms-dark-theme body .ms-card.ms-card > a:first-child,
html.ms-dark-theme body .ms-card.ms-card .ms-card-img { background: var(--dk-card) !important; }
html.ms-dark-theme .ms-card.ms-card > div:last-child { box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; }
html.ms-dark-theme .ms-card.ms-card :is(h3, .ms-card-name, .ms-card-price) { color: var(--dk-text) !important; }
html.ms-dark-theme .ms-card.ms-card :is(.ms-card-orig, p) { color: var(--dk-text3) !important; }
html.ms-dark-theme .ms-card.ms-card.ms-card :is(.card-cap, #ms-x) { background: transparent !important; color: var(--dk-text) !important; border-color: #48484a !important; box-shadow: none !important; }
html.ms-dark-theme .ms-card.ms-card.ms-card :is(.card-cap.active, #ms-x).active { background: transparent !important; color: var(--dk-text) !important; border-color: var(--dk-text) !important; }
@media (hover: hover) and (pointer: fine) { html.ms-dark-theme .ms-card.ms-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08) !important; } }
/* Círculos de color: anillo claro para que el negro no se pierda */
html.ms-dark-theme :is(.ms-card-swatch, .color-swatch, [onclick*="selectColor"]) { box-shadow: 0 0 0 1px rgba(255,255,255,.28) !important; }
html.ms-dark-theme :is(.ms-card-swatch.active) { box-shadow: 0 0 0 2px #2997ff !important; }

/* Página de producto */
html.ms-dark-theme .product-layout.product-layout > .product-media > div:first-child { background: var(--dk-card) !important; border-color: transparent !important; }
html.ms-dark-theme .product-layout.product-layout { color: var(--dk-text); }
html.ms-dark-theme .product-layout.product-layout > div:last-child > p { color: var(--dk-text2) !important; }
html.ms-dark-theme :is(#colorLabel, #mainPrice) { color: var(--dk-text) !important; }
html.ms-dark-theme #origPrice { color: var(--dk-text3) !important; }
html.ms-dark-theme .variant-btn:not(.variant-active) { background: transparent !important; color: var(--dk-text) !important; border-color: #48484a !important; }
html.ms-dark-theme .variant-btn.variant-active { background: var(--dk-text) !important; color: #000 !important; border-color: var(--dk-text) !important; }
html.ms-dark-theme :is(#caseSizeBtns, #bandSizeBtns) button:not([style*="#1d1d1f"]) { background: transparent !important; color: var(--dk-text) !important; border-color: #48484a !important; }
html.ms-dark-theme :is(#caseSizeBtns, #bandSizeBtns) button[style*="background:#1d1d1f"] { background: var(--dk-text) !important; color: #000 !important; }
html.ms-dark-theme #specsGrid .spec-item { background: var(--dk-card) !important; }
html.ms-dark-theme #specsGrid .spec-item > div:last-child { color: var(--dk-text) !important; }
html.ms-dark-theme body #specsWrap .specs-head :is(#specsToggleBtn, #ms-x) { background: transparent !important; border-color: #48484a !important; color: #2997ff !important; }
/* Logos de pago (Credisiman, bancos): sobre una placa blanca para que se vean */
/* Logos de pago: los oscuros (Credisiman) se pasan a blanco con tema.js; sin placas */
html.ms-dark-theme .product-installments-grid > div { background: transparent !important; }
/* Botón "Llamar" (contorno azul) */
html.ms-dark-theme .product-cta-row a:not(#buyBtn) { background: transparent !important; color: #2997ff !important; border-color: #2997ff !important; }
/* Barra fija de pedido en celular */
html.ms-dark-theme #msBuyBar { background: rgba(22,22,23,.94) !important; border-top-color: var(--dk-line) !important; }
html.ms-dark-theme #msBuyBar :is(.msb-price) { color: var(--dk-text) !important; }
html.ms-dark-theme #msBuyBar :is(.msb-sub) { color: var(--dk-text2) !important; }

/* Catálogo: filtros */
html.ms-dark-theme .catalog-filter-row a[style*="background:#1d1d1f"] { background: var(--dk-text) !important; color: #000 !important; }
html.ms-dark-theme .catalog-filter-row a:not([style*="background:#1d1d1f"]) { color: #2997ff !important; border-color: #2997ff !important; background: transparent !important; }

/* Franja de promociones y pie de página */
html.ms-dark-theme :is(#promoStripNatural, #promoStripFixed > div:last-child) { background: var(--dk-bg) !important; }
html.ms-dark-theme #promoStripFixed > div:first-child { background: linear-gradient(to bottom, rgba(0,0,0,0), #000) !important; }
html.ms-dark-theme .ms-strip-x { background: var(--dk-card2) !important; color: var(--dk-text) !important; }
html.ms-dark-theme footer, html.ms-dark-theme .footer-legal-bar { background: #0d0d0d !important; border-color: var(--dk-line) !important; }
html.ms-dark-theme footer :is(.footer-info-label, h4) { color: var(--dk-text) !important; }
html.ms-dark-theme footer :is(a, span, p, .footer-info-text, .footer-contact-link, .footer-bottom) { color: var(--dk-text2) !important; }
html.ms-dark-theme footer :is(.footer-grid, .footer-bottom, .footer-cols-grid) { border-color: var(--dk-line) !important; --footer-div: var(--dk-line); }
html.ms-dark-theme footer .footer-social a { background: var(--dk-card2) !important; color: var(--dk-text) !important; }
html.ms-dark-theme .footer-legal-bar * { color: var(--dk-text3) !important; }

/* Páginas de información (Términos, etc.) */
html.ms-dark-theme .info-page-inner :is(p, li, span, td) { color: var(--dk-text2) !important; }
html.ms-dark-theme .info-page-inner :is(b, strong, h1, h2, h3) { color: var(--dk-text) !important; }

/* Ventana "Avísenme" */
html.ms-dark-theme #msResBox { background: var(--dk-card) !important; color: var(--dk-text) !important; }
html.ms-dark-theme #msResBox :is(input[type=text], input[type=tel], input[type=email], textarea, select) { background: #000 !important; color: var(--dk-text) !important; border-color: #48484a !important; }
html.ms-dark-theme #msResBox .r-sub { color: var(--dk-text2) !important; }
html.ms-dark-theme #msResBox .r-x { background: var(--dk-card2) !important; color: var(--dk-text) !important; }
html.ms-dark-theme #msResBox .r-op { border-color: #48484a !important; }
html.ms-dark-theme #msResBox .r-op:has(input:checked) { border-color: #2997ff !important; background: rgba(41,151,255,.12) !important; }

/* Enlaces azules: el azul de Apple sobre negro */
html.ms-dark-theme :is(a[style*="color:#0071e3"], .info-page-back) { color: #2997ff !important; }

/* Nombre del color en la página de producto: siempre "Color - <nombre>"
   (2026-10-06). El nombre se guarda limpio en el admin; el prefijo lo pone el
   sitio, así sale igual en todos los productos y en los que se agreguen. */
#colorLabel:not(:empty)::before { content: 'Color - '; }

/* Cajita de almacenamiento en las tarjetas (2026-10-06): sin borde.
   Seleccionada = fondo gris suave y texto oscuro; las demás = solo texto gris. */
html body .ms-card.ms-card.ms-card :is(.card-cap, #ms-x) {
   border: none !important; box-shadow: none !important; background: transparent !important;
   color: #86868b !important; font-weight: 500 !important; padding: 3px 9px !important; border-radius: 7px !important;
}
html body .ms-card.ms-card.ms-card :is(.card-cap.active, #ms-x).active { background: #f0f0f2 !important; color: #1d1d1f !important; border: none !important; box-shadow: none !important; }
html.ms-dark-theme body .ms-card.ms-card.ms-card :is(.card-cap, #ms-x) { color: #86868b !important; background: transparent !important; border: none !important; }
html.ms-dark-theme body .ms-card.ms-card.ms-card :is(.card-cap.active, #ms-x).active { background: #2c2c2e !important; color: #f5f5f7 !important; border: none !important; }

/* Banner con "Marco blanco delgado" (opción por banner en Admin → Banners,
   2026-10-13): separa visualmente dos banners seguidos con fondo negro, que
   al cambiar parecían un mismo video. Va un poco hacia adentro del borde (6 px; 4 px en celular) para que no
   se pierda contra el fondo blanco de la página. */
html body .ms-slide.hero-banner-slide.hero-frame::after {
   content: '';
   position: absolute;
   inset: 6px;
   border: 2px solid #fff;
   pointer-events: none;
   z-index: 3;
}
@media (max-width: 640px) {
   html body .ms-slide.hero-banner-slide.hero-frame::after { inset: 4px; border-width: 1.5px; }
}

/* Página de producto con alturas fijas (2026-10-13): que el precio, los
   colores y las configuraciones empiecen a la misma altura en todos los
   productos, tenga la descripción 1 o 2 líneas y tenga o no precio anterior.
   - La descripción reserva siempre 2 líneas (si fuera más larga, crece).
   - El renglón del precio tachado ocupa siempre su lugar; sin descuento queda
     vacío. Varios scripts le ponen display:none al cambiar de configuración;
     el !important y los :not(#…) le ganan a eso y al diseño guardado. */
html body .product-layout h1 + p:not(#_a) { min-height: 3em !important; }
html body #origPrice:not(#_a):not(#_b) { display: block !important; min-height: calc(var(--fs-info, 15px) * 1.45) !important; }

/* Horario de atención del pie en dos columnas (2026-10-13): días a la
   izquierda y todas las horas alineadas en la misma columna. */
html body .footer-hours-grid { display: grid !important; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: baseline; }
html body .footer-hours-grid .footer-hours-full { grid-column: 1 / -1; }
html body .footer-hours-grid > .footer-info-text { margin: 0 !important; }

/* Tarjetas responsive en computadora (2026-10-13). La foto sigue al ancho de
   la tarjeta (5:4) en vez de a la altura de la pantalla, que la dejaba en
   ~160 px en pantallas grandes. El tope por altura conserva el ajuste de la
   MacBook Pro 14": en pantallas bajitas la fila completa sigue cabiendo.
   Columnas y ancho máximo: middleware/helpers.js → gridColsCss (según el
   número de tarjetas por fila del admin). */
@media (min-width: 901px) {
   html body :is(#prodGrid, .category-product-grid, .catalog-grid, .ms-catalog-grid) .ms-card.ms-card.ms-card .ms-card-img.ms-card-img:not(#_a):not(#_b) {
      height: auto !important;
      aspect-ratio: 5 / 4 !important;
      max-height: max(150px, calc(100vh - 400px)) !important;
      padding: 0 !important;
   }
   html body :is(#prodGrid, .category-product-grid, .catalog-grid, .ms-catalog-grid) .ms-card.ms-card.ms-card :is(h3, #ms-x):not(#_a) { font-size: clamp(15px, 0.85vw, 17px) !important; }
}

/* Franja promocional al final (2026-10-13): antes las páginas tenían 80 px
   de relleno abajo y una altura mínima fija de 960 px: en pantallas chicas la
   franja quedaba "unos cm" abajo y en grandes se veía sin bajar.
   En producto se cambia solo en computadora: en celular ese espacio es el
   de la barra fija de "Realizar pedido". */
html body :is(.category-page, .catalog-page, .info-page-wrap):not(#_a):not(#_b) { padding-bottom: 20px !important; }
@media (min-width: 901px) {
   html body .product-page.product-page:not(#_a):not(#_b) { padding-bottom: 20px !important; }
}
/* La franja no se ve al cargar: el contenido ocupa como mínimo el alto de la
   pantalla menos el encabezado (97 px: barra de avisos + menú), así la franja
   empieza justo en el borde de abajo y aparece en cuanto se baja un poco.
   Si el contenido es más largo, la franja va justo después de él. */
html body :is(.category-page, .catalog-page, .info-page-wrap, .product-page):not(#_a):not(#_b) {
   box-sizing: border-box !important;
   min-height: calc(100vh - var(--above-content, 97px) - var(--strip-lead, 59px)) !important;
}
/* --strip-lead: blanco entre el borde de la franja y su primer dibujo (20 px de
   relleno + 39 px de margen blanco dentro de la imagen; en celular 12 + 21).
   Se resta para que lo que aparezca justo al bajar sea la imagen, no blanco.
   Si se cambia la imagen de la franja, volver a medirlo. */
@media (max-width: 640px) { :root { --strip-lead: 33px; } }

/* Página de producto: todas las cajas con la altura de los botones de pedido
   (48 px), 2026-10-13: cuotas, especificaciones y "Ver todas las
   especificaciones". Si un texto no cabe (p. ej. una especificación larga en
   "ver todas"), la caja crece en vez de cortarlo. Las especificaciones de más
   las oculta "Ver todas" con display:none: el centrado (display:flex) solo se
   aplica a las visibles para no volver a mostrarlas. */
html body .product-installments-grid > div:not(#_a):not(#_b) {
   box-sizing: border-box !important; min-height: 48px !important; padding: 3px 10px !important;
   display: flex !important; flex-direction: column !important; justify-content: center !important;
}
html body .product-installments-grid > div:not(#_a):not(#_b) > div { line-height: 1.25 !important; }
html body #specsGrid > .spec-item:not([style*="display: none"]):not([style*="display:none"]):not(#_a):not(#_b) {
   box-sizing: border-box !important; min-height: 48px !important; padding: 3px 14px !important; gap: 0 !important;
   display: flex !important; flex-direction: column !important; justify-content: center !important;
}
html body #specsGrid > .spec-item:not(#_a):not(#_b) > div { line-height: 1.25 !important; margin: 0 !important; }
html body #specsWrap .specs-head #specsToggleBtn:not(#_a):not(#_b) {
   box-sizing: border-box !important; min-height: 48px !important; padding: 0 18px !important; align-items: center !important;
}

/* Página de producto en 2 columnas parejas (2026-10-13): "Realizar pedido" y
   "Llamar" ocupan las mismas columnas que configuración y especificaciones, y
   "Ver todas (N)" va justo debajo de "Llamar" (columna derecha). Solo en
   computadora: en tableta las columnas no alcanzan para "Llamar +503…", y en
   celular los botones siguen uno debajo del otro, a todo lo ancho. */
@media (min-width: 901px) {
   html body .product-cta-row.product-cta-row:not(#_a):not(#_b) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 8px !important; row-gap: 8px !important; }
   html body .product-cta-row.product-cta-row:not(#_a):not(#_b) > a { width: 100% !important; min-width: 0 !important; margin: 0 !important; justify-content: center !important; box-sizing: border-box !important; white-space: nowrap !important; }
   html body #specsWrap .specs-head.specs-head:not(#_a):not(#_b) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 8px !important; align-items: center !important; }
   html body #specsWrap .specs-head #specsToggleBtn:not(#_a):not(#_b) { grid-column: 2 !important; justify-self: end !important; width: 100% !important; min-width: max-content !important; margin: 0 !important; justify-content: center !important; white-space: nowrap !important; padding: 0 12px !important; }
}
@media (max-width: 640px) {
   html body #specsWrap .specs-head #specsToggleBtn:not(#_a):not(#_b) { width: 100% !important; margin: 0 !important; justify-content: center !important; }
}

/* Recuadro de la foto del producto (2026-10-13): en Safari la caja interior
   de la foto mide 2px más que el hueco dentro del borde (calcula distinto su
   height:100%) y se pinta encima de la línea de abajo, que "desaparecía".
   La línea ahora se dibuja por encima de la foto (::after con sombra interior
   de 1px, mismo color #e3e3e8); el borde real queda transparente para que el
   recuadro mida exactamente lo mismo. */
html body .product-layout > .product-media > div:first-child:not(#_a):not(#_b) { border-color: transparent !important; }
html body .product-layout > .product-media > div:first-child:not(#_a)::after {
   content: '' !important; position: absolute !important; inset: 0 !important;
   border-radius: 17px !important; box-shadow: inset 0 0 0 1px #e3e3e8 !important;
   pointer-events: none !important; z-index: 10 !important; background: none !important;
}
html.ms-dark-theme body .product-layout > .product-media > div:first-child:not(#_a)::after { box-shadow: none !important; }

/* Pie de página en celular, columnas alineadas línea por línea (2026-10-13).
   Antes cada columna se acomodaba sola: si en la derecha un título o un enlace
   ocupaba 2 líneas (p. ej. "Política de Cambios Devoluciones y Garantías"),
   todo se corría respecto a "Productos".
   - Todas las líneas avanzan en el mismo paso (26 px), también las de un
     enlace que ocupa 2 líneas: cada línea de la derecha cae junto a una de la
     izquierda.
   - Con 2 columnas, la izquierda toma solo lo que necesita y la derecha el
     resto, para que su título quepa en una línea. */
@media (max-width: 640px) {
   html body footer .footer-cols-grid .footer-col > a:not(#_a) { line-height: 26px !important; margin: 0 !important; padding: 0 !important; }
   html body footer .footer-cols-grid .footer-col > h4:not(#_a) { line-height: 26px !important; margin: 0 0 4px !important; }
   html body footer .footer-cols-grid:has(> .footer-col:nth-child(2):last-child):not(#_a) { grid-template-columns: max-content minmax(0, 1fr) !important; column-gap: 32px !important; }
}
/* Menos de 360 px: el título "Servicio al cliente" ya no cabe junto a
   "Productos"; las columnas van una debajo de la otra (sin nada que alinear). */
@media (max-width: 359px) {
   html body footer .footer-cols-grid:has(> .footer-col:nth-child(2):last-child):not(#_a):not(#_b) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px !important; }
}

/* Pie en computadora (2026-10-13): igual que en celular, todas las líneas de
   las columnas avanzan cada 26 px y los enlaces largos se parten en 2 líneas
   (máx. ~190 px), p. ej. "Política de Cambios / Devoluciones y Garantías",
   cada línea a la altura de una fila de "Productos". */
@media (min-width: 641px) {
   html body footer .footer-cols-grid .footer-col > a:not(#_a) { line-height: 26px !important; margin: 0 !important; padding: 0 !important; max-width: 190px !important; }
   html body footer .footer-cols-grid .footer-col > h4:not(#_a) { line-height: 26px !important; margin: 0 0 4px !important; }
}

/* Watch: la foto tiene fondo opaco #fafafa; su sombra dibujaba un rectángulo. */
.ms-showcase:has(a[href*="/categoria/apple-watch"]) .ms-showcase-img img { filter: none !important; }

/* Tarjetas de categoría y catálogo iguales a las del Watch (2026-10-13):
   mismo orden (nombre → precio y colores → botón) y mismo tamaño en todas.
   Se oculta la cajita de capacidad ("256GB"…) que alargaba las de iPhone/iPad
   31 px; la capacidad se elige dentro del producto (ahí se ven todas) y el
   precio de la tarjeta es el de la primera configuración, que es la activa. */
html body .ms-card.ms-card div:has(> button.card-cap):not(#_a):not(#_b) { display: none !important; }
/* Catálogo general (/productos): su tarjeta junta precio y colores en una línea;
   mismo relleno que las de categoría para que midan igual, y en celular todas
   las filas a la misma altura (si una tarjeta tiene muchos colores). */
html body .catalog-page .ms-card.ms-card > div:last-child:not(#_a):not(#_b) { padding: 12px 14px 14px !important; }
@media (max-width: 900px) {
   html body .catalog-page :is(#prodGrid, .catalog-grid):not(#_a) { grid-auto-rows: 1fr !important; }
}

/* Distribuidor Autorizado en el encabezado: mismo ancho y margen que Mac Store. */
.apple-nav .nav-authorized { --authorized-w:calc(var(--logo-h) * 92 / 214 / .3); position:absolute; right:var(--content-left); top:50%; transform:translateY(-50%); width:var(--authorized-w); height:calc(var(--authorized-w) * .3); overflow:hidden; pointer-events:none; mix-blend-mode:multiply; }
.apple-nav .nav-authorized img { position:absolute; width:calc(var(--authorized-w) * 1.3984375); height:auto; max-width:none; left:calc(var(--authorized-w) * -.2); top:calc(var(--authorized-w) * -.1625); }
@media(min-width:901px) { .apple-nav .nav-search-btn { margin-right:calc(var(--logo-h) * 92 / 214 / .3 + 30px); } }
@media(max-width:900px) {
 .apple-nav { --mobile-brand-w:clamp(90px, calc(50vw - 75px), 146.78px); }
 html body .apple-nav .nav-inner .nav-logo { left:54px!important; transform:translateY(-50%)!important; width:var(--mobile-brand-w)!important; }
 html body .apple-nav .nav-inner .nav-logo img { width:var(--mobile-brand-w)!important; height:auto!important; }
 .apple-nav .nav-authorized { --authorized-w:calc(var(--mobile-brand-w) * 92 / 616 / .3); right:calc(54px + var(--mobile-brand-w) * 25 / 616); }
}

/* Archivo con transparencia y lienzo recortado: sin desplazamientos de la imagen. */
.apple-nav .nav-authorized { --authorized-h:calc(var(--logo-h) * 92 / 214); width:calc(var(--authorized-h) * 1244 / 371); height:var(--authorized-h); mix-blend-mode:normal; }
.apple-nav .nav-authorized img { position:static; display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:900px) { .apple-nav .nav-authorized { --authorized-h:calc(var(--mobile-brand-w) * 92 / 616); } }

/* Tamaño óptico del sello: texto legible y proporción original. */
.apple-nav .nav-authorized { --authorized-h:34px; }
@media(min-width:901px) { .apple-nav .nav-search-btn { margin-right:140px; } }
@media(max-width:900px) { .apple-nav .nav-authorized { --authorized-h:clamp(26px, 7vw, 34px); } }

/* Imagen ORIGINAL: preservar tipografía y proporciones, recortar solo margen blanco visual. */
.apple-nav .nav-authorized { width:calc(var(--authorized-h) * 640 / 192); height:var(--authorized-h); mix-blend-mode:multiply; }
.apple-nav .nav-authorized img { position:absolute; display:block; width:calc(var(--authorized-h) * 895 / 192); height:calc(var(--authorized-h) * 402 / 192); max-width:none; left:calc(var(--authorized-h) * -128 / 192); top:calc(var(--authorized-h) * -104 / 192); object-fit:contain; }

/* Banners: transición horizontal continua como la propuesta de portada. */
html body .ms-hero-wrap .ms-slide { transition:none; }
html body .ms-hero-wrap .ms-slide.active,
html body .ms-hero-wrap .ms-slide.ms-slide-moving { position:absolute; inset:0; height:100%; min-height:100%; max-height:none; }
html body .ms-hero-wrap .ms-slide.ms-slide-moving { opacity:1; }
html body .ms-hero-wrap .ms-slide .ms-hero-bg { transition:none; transform:none; }

/* Controles discretos: contraste con la imagen sin una cápsula encima. */
html body .ms-hero-bar.hero-bar-discreet { background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap:8px; right:24px; bottom:16px; mix-blend-mode:difference; }
html body .ms-hero-bar.hero-bar-discreet:not(:has(.ms-hero-ctrls)) { padding:0; }
html body .ms-hero-bar.hero-bar-discreet .ms-dots { gap:0!important; }
html body .ms-hero-bar.hero-bar-discreet .ms-dot { width:8px!important; height:4px!important; padding:10px 4px!important; box-sizing:content-box!important; background:rgba(255,255,255,.45); background-clip:content-box; border-radius:12px; transition:background .2s; }
html body .ms-hero-bar.hero-bar-discreet .ms-dot.active { width:20px!important; background:rgba(255,255,255,.45); }
html body .ms-hero-bar.hero-bar-discreet .ms-dot:hover { background-color:rgba(255,255,255,.8); }
html body .ms-hero-bar.hero-bar-discreet .ms-dot.active::after { left:4px!important; top:10px!important; bottom:10px!important; max-width:calc(100% - 8px)!important; background:#fff; }
html body .ms-hero-bar.hero-bar-discreet .ms-hero-ctrls { border:0; padding:0; gap:2px; }
html body .ms-hero-bar.hero-bar-discreet .ms-hero-ctrl { width:32px!important; height:32px!important; color:white; opacity:.85; }
html body .ms-hero-bar.hero-bar-discreet .ms-hero-ctrl:hover { background:rgba(255,255,255,.15); opacity:1; }
html body .ms-hero-bar.hero-bar-discreet :is(button):focus-visible { outline:2px solid white; outline-offset:2px; }
@media (min-width:901px) {
 html body .ms-hero-bar.hero-arrows-hover :is(.ms-hero-prev,.ms-hero-next) { width:0!important; overflow:hidden; opacity:0; pointer-events:none; transition:opacity .2s,width .2s; }
 html body .ms-hero-wrap:hover .ms-hero-bar.hero-arrows-hover :is(.ms-hero-prev,.ms-hero-next),
 html body .ms-hero-bar.hero-arrows-hover:focus-within :is(.ms-hero-prev,.ms-hero-next) { width:32px!important; opacity:1; pointer-events:auto; }
}
@media(max-width:900px) {
 html body .ms-hero-bar.hero-bar-discreet { right:14px; bottom:12px; gap:4px; }
 html body .ms-hero-bar.hero-mobile-no-arrows :is(.ms-hero-prev,.ms-hero-next) { display:none; }
 html body .ms-hero-bar.hero-bar-discreet .ms-hero-pause { width:36px!important; height:36px!important; }
}
html body .ms-hero-bar.hero-bar-discreet .ms-dot { background-clip:content-box!important; }

/* Móvil: flechas laterales, indicadores centrados abajo y pausa separada. */
@media(max-width:900px) {
 html body .ms-hero-wrap .ms-hero-bar { inset:0; width:100%; height:100%; max-width:none; padding:0; border-radius:0; transform:none; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; mix-blend-mode:normal; pointer-events:none; }
 html body .ms-hero-wrap .ms-hero-bar .ms-dots { position:absolute; bottom:16px; left:50%; right:auto; transform:translateX(-50%); pointer-events:auto; mix-blend-mode:difference; }
 html body .ms-hero-wrap .ms-hero-bar .ms-hero-ctrls { display:contents; }
 html body .ms-hero-wrap .ms-hero-bar :is(.ms-hero-prev,.ms-hero-next) { position:absolute; top:50%; transform:translateY(-50%); width:44px!important; height:48px!important; border-radius:12px; background:rgba(0,0,0,.2); color:white; opacity:.8; pointer-events:auto; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
 html body .ms-hero-wrap .ms-hero-bar .ms-hero-prev { left:8px; }
 html body .ms-hero-wrap .ms-hero-bar .ms-hero-next { right:8px; }
 html body .ms-hero-wrap .ms-hero-bar :is(.ms-hero-prev,.ms-hero-next) svg { width:18px!important; height:18px!important; }
 html body .ms-hero-wrap .ms-hero-bar .ms-hero-pause { position:absolute; right:14px; bottom:10px; width:36px!important; height:36px!important; color:white; mix-blend-mode:difference; pointer-events:auto; background:transparent; }
 html body .ms-hero-wrap .ms-hero-bar :is(.ms-hero-prev,.ms-hero-next):active { transform:translateY(-50%) scale(.94); opacity:1; }
 html body .ms-hero-wrap .ms-hero-bar.hero-mobile-no-arrows :is(.ms-hero-prev,.ms-hero-next) { display:none; }
}

/* Indicadores de computadora: algo más largos y gruesos. */
@media(min-width:901px) {
 html body .ms-hero-bar.hero-bar-discreet .ms-dot { width:14px!important; height:6px!important; }
 html body .ms-hero-bar.hero-bar-discreet .ms-dot.active { width:28px!important; }
}

/* Modo oscuro forzado del teléfono (2026-10-14): Samsung Internet y Chrome en
   Android invierten los colores de páginas que no declaran su esquema y la
   tienda se veía mal. La tienda es clara (el tema oscuro propio usa
   html.ms-dark-theme, que ya declara color-scheme: dark). */
html:not(.ms-dark-theme) { color-scheme: light only; }

/* Dirección del texto legal como enlace estilo Apple (2026-10-14) */
html body .footer-legal-bar a.legal-map-link { color: #0066cc !important; text-decoration: none !important; }
html body .footer-legal-bar a.legal-map-link:hover { text-decoration: underline !important; }
html.ms-dark-theme body .footer-legal-bar a.legal-map-link { color: #2997ff !important; }

/* Configuración elegida sin precio (2026-10-14): su precio ya está arriba en grande;
   las demás sí lo muestran para que se vea cuánto cuesta cambiar. */
html body .variant-btn.variant-active > span:last-child:not(:first-child):not(#_v1) { display: none !important; }
/* Texto legal en una sola línea en computadora (2026-10-14): la franja usa el
   mismo ancho que el resto de la página. En pantallas angostas sí baja de línea. */
html body .footer-legal-bar .footer-legal-inner:not(#_a) { max-width: var(--content-max, 1320px) !important; }
@media (min-width: 1200px) {
   html body .footer-legal-bar .footer-legal-inner > span:not(#_a) { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
}

/* Logos del encabezado anclados a la fila del menú (2026-10-14): estaban a
   top:50% del encabezado entero y al abrir la búsqueda (el encabezado crece)
   bajaban. La fila del menú mide 56 px en todos los tamaños → centro a 28 px. */
html body .apple-nav .nav-authorized:not(#_a) { top: 28px !important; }
@media (min-width: 901px) {
   html body .apple-nav .nav-inner .nav-logo img:not(#_a) { top: 28px !important; }
}

/* Encabezado casi opaco (2026-10-14): con el fondo al 70 % se veían fotos y
   textos por detrás del logo de Distribuidor Autorizado y del buscador al
   bajar ("se monta"). Ahora es blanco sólido. */
html:not(.ms-dark-theme) body .apple-nav,
html:not(.ms-dark-theme) body .apple-nav.scrolled { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html:not(.ms-dark-theme) body :is(.nav-search-bar, #searchBar) { background: #fbfbfd !important; }
/* Teléfonos chicos: el cuadro de búsqueda tenía menos de la mitad del ancho. */
@media (max-width:380px) {
 html body :is(.nav-search-bar, #searchBar) { padding-left:12px !important; padding-right:12px !important; }
 html body :is(.nav-search-bar, #searchBar) form { gap:6px !important; }
 html body :is(.nav-search-bar, #searchBar) form button { padding-left:12px !important; padding-right:12px !important; flex-shrink:0; }
 html body :is(.nav-search-bar, #searchBar) form input { min-width:0; }
}
/* El logo conserva su tamaño aunque suba la letra del título. */
:root { --logo-h: calc(31px * 1.645); --logo-pad: calc(31px * 0.192); }

/* Celular y tableta (2026-10-14, pedido de Josué): siempre que se ve el menú ☰
   (≤ 900 px) se quita la lupa; la búsqueda está dentro del menú. Los logos se
   quedan grandes; solo en pantallas muy chicas (< 344 px) se reducen juntos. */
@media (max-width:900px) {
 html body .apple-nav .nav-inner .nav-search-btn,
 html body .apple-nav #searchBar { display:none !important; }
 html body .apple-nav { --mobile-brand-w: min(146.78px, calc((100vw - 84px) * .5645)); }
 html body .apple-nav .nav-authorized { --authorized-h: min(34px, calc((100vw - 84px) * .1308)); right:14px !important; }
}


/* Títulos de sección de la página de producto con la misma letra que el
   nombre del producto (2026-10-16, pedido de Josué): Almacenamiento,
   Tamaño de caja/banda, Cuotas sin intereses y Especificaciones. Mismo
   tamaño y grosor, negro, sin mayúsculas. */
html body .product-layout :is(div:has(+ div > .variant-btn), #caseSizesSection > div:first-child, #bandSizesSection > div:first-child, div:has(+ .product-installments-grid), .specs-head > div:first-child):not(#_p):not(#_q) {
   font-size: var(--t-big) !important; font-weight: 600 !important; color: #1d1d1f !important;
   text-transform: none !important; letter-spacing: -0.01em !important; line-height: 1.3 !important;
}
html body .product-layout :is(div:has(+ div > .variant-btn), #caseSizesSection > div:first-child, #bandSizesSection > div:first-child):not(#_p):not(#_q) { margin-bottom: 10px !important; }
html.ms-dark-theme body .product-layout :is(div:has(+ div > .variant-btn), #caseSizesSection > div:first-child, #bandSizesSection > div:first-child, div:has(+ .product-installments-grid), .specs-head > div:first-child):not(#_p):not(#_q) { color: var(--dk-text) !important; }

/* Letra de los botones de almacenamiento/configuración más grande
   (2026-10-16, pedido de Josué): igual al texto del producto, en vez de 13 px. */
html body div:has(> .variant-btn) > .variant-btn > span:first-child:not(:last-child):not(#_v1):not(#_v2):not(#_v3),
html body div:has(> .variant-btn) > .variant-btn > span:only-child:not(#_v1):not(#_v2):not(#_v3) { font-size: var(--t-small) !important; }
/* Letra del botón elegido en blanco puro, no gris (2026-10-16, pedido de Josué). */
html body .variant-btn.variant-btn.variant-active > span:not(#_v1):not(#_v2) { opacity: 1 !important; color: #fff !important; }
html.ms-dark-theme body .variant-btn.variant-btn.variant-active > span:not(#_v1):not(#_v2) { color: #000 !important; }

/* Cuotas ("10 cuotas", "6 cuotas" y sus precios) al tamaño de los títulos
   (2026-10-16, pedido de Josué), con cajitas más altas para que no se vean
   apretadas y los logos de tarjetas agrandados en la misma proporción (18→22 px). */
html body .product-layout .product-installments-grid > div > div:first-child:not(#_p):not(#_q),
html body .product-layout .product-installments-grid :is(#cuota10, #cuota6):not(#_p):not(#_q) { font-size: var(--t-big) !important; line-height: 1.3 !important; }
html body .product-layout .product-installments-grid > div:not(#_p):not(#_q) { padding-top: 10px !important; padding-bottom: 10px !important; }
html body .product-layout .product-installments-grid .ms-cuota-icon:not(#_p):not(#_q) { height: 22px !important; max-width: 132px !important; margin-left: 7px !important; }

/* Inicio en celular estilo apple.com (2026-10-20, pedido de Josué): el carrusel
   sin flechas (se desliza con el dedo) y con el botón abajo para no tapar la
   foto; los bloques de categoría separados por una franja blanca de 12 px.
   Los logos del encabezado NO se tocan (decisión del 2026-10-14). */
@media (max-width:734px){
   /* Carrusel: sin flechas (se pasa deslizando) y el botón abajo, sin tapar la foto */
   html body .ms-hero-wrap .ms-hero-prev,html body .ms-hero-wrap .ms-hero-next{display:none !important}
   html body .ms-hero-wrap .ms-slide .ms-hero-content{position:absolute !important;left:50% !important;right:auto !important;top:auto !important;bottom:48px !important;transform:translateX(-50%) !important;margin:0 !important;padding:0 !important;width:auto !important;height:auto !important;z-index:3}
   html body .ms-hero-wrap .ms-hero-btns{margin:0 !important}
   html body .ms-hero-wrap .ms-hero-btns a{padding:9px 20px !important;font-size:var(--fs-info,15px) !important;line-height:1.2 !important;min-height:0 !important;height:auto !important;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.18) !important}
   /* Bloques separados por una franja blanca, como en Apple */
   html body section.ms-showcase{margin-top:12px !important}
}

/* Logos del encabezado más finos en celular y tableta (2026-10-20, pedido de
   Josué: "se ven muy toscos"; reemplaza "los logos se quedan grandes" del
   2026-10-14). Mac Store 108 px de ancho y Distribuidor Autorizado 25 px de
   alto; en pantallas muy chicas siguen achicándose juntos. */
@media (max-width:900px) {
 html body .apple-nav { --mobile-brand-w: min(108px, calc((100vw - 84px) * .5645)) !important; }
 html body .apple-nav .nav-authorized { --authorized-h: min(25px, calc((100vw - 84px) * .1308)) !important; }
}

/* Tarjetas de producto (2026-10-20, pedido de Josué): precio y colores justo
   debajo del nombre; el espacio libre queda entre ellos y el botón, así todas
   las tarjetas siguen midiendo lo mismo. Reemplaza el orden nombre → espacio →
   precio y la altura fija de 3 renglones del nombre. */
html body .ms-card.ms-card.ms-card :is(h3,#ms-x){min-height:0!important}
html body .ms-card.ms-card > :is(div:last-child, #ms-x) { grid-template-rows: auto auto auto 1fr auto !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(.ms-card-price) { grid-row: 3 !important; margin-top: 2px !important; }
html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-swatch) { grid-row: 3 !important; margin-top: 2px !important; }
@media (max-width: 900px) {
  html body .ms-card.ms-card > :is(div:last-child, #ms-x) { grid-template-rows: auto auto auto auto 1fr auto !important; }
  html body .ms-card.ms-card > :is(div:last-child, #ms-x) > div:has(> .ms-card-swatch) { grid-row: 4 !important; margin-top: 2px !important; }
  html body .ms-card.ms-card > :is(div:last-child, #ms-x) > a.ms-card-cta { grid-row: 6 !important; }
}

/* Especificaciones + "Ver todas (N)" en UNA sola casilla (2026-10-21): la
   casilla entera es el botón; título a la izquierda, "Ver todas ⌄" a la derecha.
   Si no hay más que mostrar, se ve solo el título sin casilla. */
html body #specsWrap .specs-head.specs-head:not(#_a):not(#_b):not(#_c):has(#specsToggleBtn:not([style*="display:none"])) {
   display: flex !important; position: relative !important; justify-content: space-between !important; align-items: center !important;
   border: 1px solid #d2d2d7 !important; border-radius: 14px !important; padding: 0 18px !important; min-height: 52px !important; box-sizing: border-box !important; transition: background .2s;
}
html body #specsWrap .specs-head.specs-head:not(#_a):not(#_b):not(#_c):has(#specsToggleBtn:not([style*="display:none"])):hover { background: #f5f5f7 !important; }
html body #specsWrap .specs-head #specsToggleBtn:not(#_a):not(#_b):not(#_c) {
   position: absolute !important; inset: 0 !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important;
   border: 0 !important; border-radius: 14px !important; background: transparent !important; padding: 0 18px !important; justify-content: flex-end !important; grid-column: auto !important;
}
html.ms-dark-theme body #specsWrap .specs-head.specs-head:not(#_a):not(#_b):not(#_c) { border-color: #48484a !important; }
html.ms-dark-theme body #specsWrap .specs-head.specs-head:not(#_a):not(#_b):not(#_c):hover { background: #2c2c2e !important; }
html body #specsWrap .specs-head > div { pointer-events: none !important; }
html body #specsWrap .specs-head #specsToggleBtn:not(#_a):not(#_b):not(#_c) { z-index: 2 !important; }
html body #specsWrap .specs-head #specsToggleBtn:not(#_a):not(#_b):not(#_c):not(#_d) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; justify-self: auto !important; max-width: none !important; }

/* Banner de fondo claro: indicadores oscuros para que se vean sobre el fondo */
html body .ms-hero-wrap:has(.hero-sin-velo.active) .ms-hero-bar.hero-bar-discreet .ms-dot,
html body .ms-hero-wrap:has(.hero-sin-velo.active) .ms-hero-bar.hero-bar-discreet .ms-dot.active { background-color:rgba(29,29,31,.25); }
html body .ms-hero-wrap:has(.hero-sin-velo.active) .ms-hero-bar.hero-bar-discreet .ms-dot.active::after { background:#1d1d1f; }
html body .ms-hero-wrap:has(.hero-sin-velo.active) .ms-hero-pause { color:#1d1d1f; }