/** Shopify CDN: Minification failed

Line 1417:2 Unexpected "{"
Line 1417:3 Expected identifier but found "%"
Line 1417:71 Unexpected "("
Line 1420:69 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:lda-casas (INDEX:21) */
/* container-type que la rampa fluida --fs-* exige */
  .lda-casas.container { container-type: inline-size; }

  /* ── Sección raíz ── */
  .casas {
    padding: var(--space-section) 0 0;
    background: var(--bone);
    position: relative;
  }

  /* ── Heading eyebrow ── */
  .casas-h2 {
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    text-align: center;
    padding: 0 16px;
    margin-bottom: 28px;
  }

  /* ── Marquee wrapper con mask-fade en edges ── */
  .casas-marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  }

  /* ── Track animado ── */
  .casas-marquee-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: casas-scroll 35s linear infinite;
  }

  /* ── Pause on hover ── */
  .casas-marquee:hover .casas-marquee-track {
    animation-play-state: paused;
  }

  @keyframes casas-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ── Ítem individual ── */
  .casa-item {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--ink);
    min-height: 40px;
    transition: opacity 0.2s;
  }
  .casa-item:hover { opacity: 0.55; }

  /* ── Logo (SVG placeholder o img real) ── */
  .casa-logo {
    height: 22px; width: auto;
    color: var(--ink);
  }

  /* ── CTA wrap ── */
  .casas-cta-wrap {
    display: flex; justify-content: center;
    margin-top: 28px;
  }

  /* ── CTA link · border-bottom delegado en .cta-label (lda-overrides.css #5) ── */
  .casas-cta {
    background: none; border: none; border-bottom: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0;
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    min-height: 44px;
    text-decoration: none;
  }

  /* ── CTA microlift (lda-web-cta-microlift 2026-06-04) ── */
  .casas-cta .cta-label {
    transition: transform 0.2s ease-out;
    transform-origin: center;
  }
  .casas-cta:hover .cta-label,
  .casas-cta:active .cta-label,
  .casas-cta:focus-visible .cta-label {
    transform: scale(1.04);
  }

  /* ── prefers-reduced-motion: stack centrado, sin animación ── */
  @media (prefers-reduced-motion: reduce) {
    .casas-marquee-track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      gap: 24px;
    }
    .casas-marquee {
      mask-image: none;
      -webkit-mask-image: none;
    }
    .casas-cta:hover .cta-label,
    .casas-cta:active .cta-label,
    .casas-cta:focus-visible .cta-label {
      transform: none;
    }
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
     Sección FULL-BLEED: override del max-width 1280px del sistema base.
     El marquee es horizontal por naturaleza; cambio mínimo:
     logos mayores, gap mayor, velocidad de scroll ligeramente más lenta.
     Tokens y clases consumidos del sistema base (lda-overrides.css v4.1).
  */
  @media (min-width: 990px) {
    /* Full-bleed: anula el techo 1280px del .container base */
    .lda-casas.container {
      max-width: 100%;
      padding-inline: 0;
    }

    /* Heading: aprovecha la escala tipográfica desktop ya subida en overrides */
    .casas-h2 {
      margin-bottom: 36px;
    }

    /* Gap mayor entre logos en desktop */
    .casas-marquee-track {
      gap: 72px;
      /* Velocidad ligeramente más lenta en pantalla grande (más logos visibles a la vez) */
      animation-duration: 48s;
    }

    /* Logos más grandes en desktop */
    .casa-logo {
      height: 32px;
    }

    /* Imagen solicitada por height= en el tag; referenciar tamaño correcto en Liquid */
    .casa-item img.casa-logo {
      height: 32px;
    }

    /* Más aire bajo el marquee antes del CTA */
    .casas-cta-wrap {
      margin-top: 40px;
    }

    /* Fade en edges más amplio: en pantallas anchas el degradado cortaba antes */
    .casas-marquee {
      mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
    }
  }
/* END_SECTION:lda-casas */

/* START_SECTION:lda-coleccion-editorial (INDEX:22) */
.lda-coleccion-editorial.container { container-type: inline-size; }

  /* ═══ REC MÓDULO · módulos compartidos ═══ */
  .rec-module { padding: var(--space-section) 16px; border-top: 1px solid var(--color-border-subtle); }
  .rec-module + .rec-module { border-top: 6px solid var(--color-border-subtle); }
  .rec-eyebrow { font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid); margin-bottom: 4px; }
  .rec-context { font-size: var(--fs-11); font-weight: 400; color: var(--mid); margin-bottom: 20px; opacity: 0.65; font-style: italic; }

  /* Módulo "Del mismo criterio" · scroll-x · tiles 4:5 · overlay editorial */
  .rec-family-grid {
    display: flex; flex-direction: row; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -16px; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  }
  .rec-family-grid::before, .rec-family-grid::after { content: ''; min-width: 16px; flex-shrink: 0; }
  .rec-family-grid::-webkit-scrollbar { display: none; }
  .rec-family-tile {
    position: relative; width: 152px; flex-shrink: 0; aspect-ratio: 4/5;
    overflow: hidden; background: var(--bisque);
    text-decoration: none; scroll-snap-align: start;
    cursor: pointer; touch-action: manipulation; transition: opacity 0.15s ease;
  }
  .rec-family-tile:hover { opacity: 0.90; }
  .rec-family-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 28%, rgba(20,16,12,0.80) 100%); z-index: 1; pointer-events: none; }
  .rec-family-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .rec-family-img svg { width: 40px; height: 40px; opacity: 0.16; stroke: var(--ink); fill: none; }
  .rec-family-img img { width: 100%; height: 100%; object-fit: cover; }
  .rec-family-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 12px; z-index: 2; }
  .rec-family-label { font-size: var(--fs-9); font-weight: 400; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(250,248,243,0.58); margin-bottom: 5px; }
  .rec-family-name { font-size: var(--fs-15); font-weight: 600; color: var(--bone); line-height: 1.15; margin-bottom: 6px; }
  .rec-family-reason { font-size: var(--fs-10); font-weight: 400; color: rgba(250,248,243,0.72); font-style: italic; line-height: 1.3; }

  /* eyebrow-label compartido (rec-module + FAQ) */
  .rec-eyebrow-label { font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid); margin-bottom: 4px; }

  /* ═══ FAQ COLECCIÓN · acordeón (scope .faq-coleccion para no chocar con otras secciones) ═══ */
  .faq-coleccion { padding: var(--space-section) 16px; border-top: 1px solid var(--color-border-subtle); }
  .faq-coleccion-title { font-size: var(--fs-h2-edit-sm); font-weight: 400; letter-spacing: 0; line-height: 1.05; color: var(--ink); margin-bottom: 16px; text-wrap: balance; }
  .faq-coleccion .faq-item { border-bottom: 1px solid var(--color-border-subtle); }
  .faq-coleccion .faq-item-q {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; padding: 14px 0; text-align: left;
    background: none; border: none; cursor: pointer; touch-action: manipulation;
    font-family: var(--lda-font-sans); font-size: var(--fs-14); font-weight: 600;
    color: var(--ink); line-height: 1.35;
  }
  .faq-coleccion .faq-item-toggle { width: 12px; height: 12px; color: var(--mid); flex-shrink: 0; }
  .faq-coleccion .faq-item-toggle svg { width: 100%; height: 100%; display: block; }
  .faq-coleccion .faq-item-toggle path { stroke: currentColor; stroke-width: 1.3; fill: none; transform-origin: 50% 50%; transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
  .faq-coleccion .faq-item-q[aria-expanded="true"] .faq-toggle-v { opacity: 0; transform: rotate(90deg); }
  .faq-coleccion .faq-item-a { padding: 0 0 16px; }
  .faq-coleccion .faq-item-a p { font-size: var(--fs-14); font-weight: 400; line-height: 1.55; color: var(--mid); max-width: 320px; }

  @media (prefers-reduced-motion: reduce) {
    .rec-family-tile,
    .faq-coleccion .faq-item-toggle path { transition: none !important; }
  }

  /* A11y · anillo de foco canónico (WCAG 2.4.7) · :focus-visible no altera el render por defecto */
  .rec-family-tile:focus-visible,
  .faq-coleccion .faq-item-q:focus-visible {
    outline: 2px solid var(--bordeaux); outline-offset: 2px; border-radius: 2px;
  }

  /* ═══════════════════════════════════════════════════════════
     B4.1 v2 · CAPA DESKTOP (@media ≥990) · ANCHO COMPLETO bajo las 2 columnas
     El raíl de filtros ya NO llega aquí (audit #2/#5): la editorial recupera el ancho de página
     (hereda max-width 1280 + padding 48 de .container · sin offset de raíl). MÓVIL INTOCABLE.
     ═══════════════════════════════════════════════════════════ */
  @media (min-width: 990px) {
    /* padding lateral al borde de la columna (sin el 16px móvil sobre el 48 del container) */
    .rec-module, .faq-coleccion { padding-inline: 0; }
    /* hueco doble corregido (loop 2026-06-16): rec-module y faq apilaban su --space-section cada uno
       → un solo respiro entre secciones. El border-top de la FAQ marca la junta. Gateado ≥990 (móvil frozen). */
    .rec-module + .faq-coleccion { padding-top: 0; }

    /* MOV4 · "Antes de decidir": de carril scroll-x a fila de 4 tiles en rejilla */
    .rec-family-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
      margin: 0; overflow: visible; scroll-snap-type: none;
    }
    .rec-family-grid::before, .rec-family-grid::after { content: none; }
    .rec-family-tile { width: auto; }
    .rec-family-name { font-size: var(--fs-17); }


    /* FAQ · columna editorial (DESKTOP_SPEC) · cabecera alineada a la IZQUIERDA (no dead-center · dir. Alonso 2026-06-15) */
    .faq-coleccion { display: flex; flex-direction: column; align-items: center; }
    .faq-coleccion > * { width: 100%; max-width: 760px; }
    .faq-coleccion .rec-eyebrow-label,
    .faq-coleccion .faq-coleccion-title { text-align: left; }
    /* H2 "Preguntas frecuentes" → Cormorant italic editorial (dir. Alonso · R1: voz serif puntual · R12 manda) */
    .faq-coleccion .faq-coleccion-title {
      font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
      font-size: var(--fs-h2-edit); letter-spacing: 0;
    }
    .faq-coleccion .faq-item-a p { max-width: 100%; }
  }

  /* ── ultra-ancho (≥1536): la editorial sigue al ancho de la colección (decisión 2) ── */
  @media (min-width: 1536px) {
    .lda-coleccion-editorial.container { max-width: 1500px; }
  }
/* END_SECTION:lda-coleccion-editorial */

/* START_SECTION:lda-colecciones (INDEX:23) */
/* container-type exigido por la rampa fluida --fs-* (lda-overrides.css precondición) */
  .lda-colecciones.container { container-type: inline-size; }

  /* ── WRAPPER DE FLECHAS: OCULTO EN MOBILE ──
     El sistema base (lda-overrides.css) activa .lda-carousel-arrows SOLO en ≥990px.
     En mobile lo ocultamos para que las flechas no sean accesibles ni visibles,
     y forzamos position:absolute para que no ocupe espacio en el flujo. */
  .colecciones-immersive .lda-carousel-arrows {
    position: absolute;  /* fuera del flujo → no afecta la cadena de altura del carousel */
    inset: 0;
    pointer-events: none;
    display: none;       /* oculto en mobile; el sistema base lo reactiva en ≥990px */
  }

  /* ── CAROUSEL BASE ── */
  .col-carousel {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    scrollbar-width: none;
    margin: 24px -16px 0;
    padding: 0 16px 0;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .col-carousel::-webkit-scrollbar { display: none; }

  /* Spacer final – garantiza gutter derecho */
  .col-carousel::after { content: ''; flex: 0 0 4px; align-self: stretch; }

  /* ── CARD BASE ── */
  .col-card {
    position: relative;
    min-width: 300px; max-width: 300px;
    aspect-ratio: 3 / 4.2;
    scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px 16px 20px;
    overflow: hidden;
    color: var(--bone);
    text-decoration: none;
    cursor: pointer;
  }

  /* Fondos placeholder por colección (sustituir por imagen en Fase 3) */
  .col-card--ella   { background: linear-gradient(165deg, #4A3F3A 0%, #241D1A 100%); }
  .col-card--el     { background: linear-gradient(165deg, #20242A 0%, #14171A 100%); }
  .col-card--noche  { background: linear-gradient(165deg, #3A1F28 0%, #190E12 100%); }
  .col-card--dia    { background: linear-gradient(165deg, #6E6253 0%, #3A332A 100%); }
  .col-card--verano { background: linear-gradient(165deg, #A8895C 0%, #4D3B24 100%); }

  /* Scrim funcional editorial */
  .col-card::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none; z-index: 1;
  }
  .col-card > * { position: relative; z-index: 2; }

  /* Imagen de fondo (cuando block.settings.image está configurado) */
  .col-card-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }

  /* Etiqueta placeholder de imagen */
  .col-card-imglabel {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    font-size: var(--fs-8); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.45);
  }

  /* Tipografía de cards */
  .col-title {
    font-family: var(--lda-font-serif);
    font-size: var(--fs-h2-edit-sm); font-weight: 500; font-style: italic;
    color: var(--bone); line-height: 0.95; letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .col-desc {
    font-size: var(--fs-15); font-weight: 400; color: rgba(250,248,243,0.95);
    line-height: 1.35; letter-spacing: 0.005em; margin-bottom: 18px; max-width: 320px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  }

  /* CTA sólido bone */
  .col-cta {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    height: 44px; padding: 0 24px;
    background: var(--bone); color: var(--ink);
    border: none; border-radius: 2px;
    font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase;
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out;
    transform-origin: center;
  }
  .col-card:hover .col-cta { background: var(--ink); color: var(--bone); }
  .col-cta:hover,
  .col-cta:active,
  .col-cta:focus-visible { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) {
    .col-cta:hover,
    .col-cta:active,
    .col-cta:focus-visible { transform: none; }
  }

  /* ── DOTS BASE ── */
  .col-dots { display: flex; justify-content: center; gap: 0; margin: 4px 16px 0; }
  .col-dot-btn {
    background: none; border: none; padding: 12px 4px;
    width: 40px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: manipulation;
  }
  .col-dot {
    width: 100%; height: 1px;
    background: rgba(26,26,26,0.18);
    transition: background-color 0.2s, height 0.2s;
  }
  .col-dot.active { background: rgba(26,26,26,0.85); height: 2px; }

  /* ── VARIANTE IMMERSIVE (clase raíz de esta sección) ── */
  .colecciones-immersive {
    position: relative;
    --col-peek: 32px;
    height: calc(var(--section-viewport-h) - 56px);
    padding: 0;
    overflow: hidden;
    background: #14100B;
    --z-fcard: 10; --z-fhud: 30;
  }

  /* Carousel full-frame */
  .colecciones-immersive .col-carousel {
    height: 100%;
    gap: 0; margin: 0; padding: 0;
    scroll-padding-left: 0;
  }

  /* Spacer final – la última card puede alinearse a la izquierda */
  .colecciones-immersive .col-carousel::after {
    content: ''; display: block; flex: 0 0 var(--col-peek); align-self: stretch;
  }

  /* Cards casi full-frame · deja --col-peek para que asome la siguiente */
  .colecciones-immersive .col-card {
    position: relative;
    min-width: calc(100% - var(--col-peek));
    max-width: calc(100% - var(--col-peek));
    height: 100%;
    aspect-ratio: auto;
    scroll-snap-align: start;
    border: none;
    justify-content: flex-end;
    padding: 24px 24px max(92px, calc(68px + var(--safe-bottom)));
    z-index: var(--z-fcard);
  }
  .colecciones-immersive .col-card::after { height: 72%; }

  /* Tipografía immersive */
  .colecciones-immersive .col-title { font-size: var(--fs-display); line-height: 0.92; }
  .colecciones-immersive .col-desc { margin-bottom: 16px; }

  /* Header overlay estable */
  .colecciones-immersive .col-header {
    position: absolute;
    top: calc(var(--header-height-mobile) + var(--safe-top) + 16px);
    left: 24px; right: 24px;
    z-index: var(--z-fhud);
  }
  .colecciones-immersive .col-section-label {
    margin: 0;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: rgba(250,248,243,0.7);
  }

  /* Scrim superior – legibilidad del header sobre imagen */
  .colecciones-immersive::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: calc(var(--header-height-mobile) + var(--safe-top) + 120px);
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
    pointer-events: none; z-index: calc(var(--z-fcard) + 1);
  }

  /* Dots overlay abajo · variante bone */
  .colecciones-immersive .col-dots {
    position: absolute; left: 24px; right: 24px;
    bottom: max(20px, calc(12px + var(--safe-bottom)));
    z-index: var(--z-fhud); margin: 0;
  }
  .colecciones-immersive .col-dot { background: rgba(250,248,243,0.28); }
  .colecciones-immersive .col-dot.active { background: rgba(250,248,243,0.95); }

  @media (prefers-reduced-motion: reduce) {
    .col-carousel { scroll-behavior: auto; }
  }

  /* ===== DESKTOP (>=990px) ===== */
  /* FULL-BLEED: override del max-width 1280px que el sistema base aplica a .container en desktop */
  @media (min-width: 990px) {

    /* Hacer la sección full-bleed: el .container.lda-colecciones sale del flujo normal del ancho */
    .lda-colecciones.container {
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }

    /* Sección: altura fija editorial desktop (no vinculada a --section-viewport-h mobile)
       Usa min(88vh,760px) para que no sea excesiva en pantallas grandes */
    .colecciones-immersive {
      --col-peek-dt: 80px;   /* cuánto asoma la siguiente card en desktop */
      height: min(88vh, 760px);
    }

    /* Carousel desktop: añadir flechas laterales (espacio para ellas),
       posición no centrada → alineado al margen editorial izquierdo (padding-left: 0) */
    .colecciones-immersive .col-carousel {
      /* Scroll por unidades de card (~32% ancho) */
      scroll-padding-left: 0;
    }

    /* Cards desktop: mostrar 3 a la vez + peek de la 4ª
       Fórmula: 3 cards = (100% - --col-peek-dt) / 3
       Se consume la variable local declarada en .colecciones-immersive */
    .colecciones-immersive .col-card {
      min-width: calc((100% - var(--col-peek-dt)) / 3);
      max-width: calc((100% - var(--col-peek-dt)) / 3);
      padding: 32px 32px 48px;
    }

    /* Scrim desktop: más largo para leer el texto cómodamente con card más estrecha */
    .colecciones-immersive .col-card::after { height: 80%; }

    /* Spacer final → garantiza que la última card pueda alinearse a la izquierda */
    .colecciones-immersive .col-carousel::after {
      flex: 0 0 var(--col-peek-dt);
    }

    /* Tipografía: consumir el techo desktop de --fs-display ya subido +33% en lda-overrides.css
       No redeclarar el token; simplemente lo consume sin override.
       Col-title hereda el techo mayor automáticamente.
       Reducimos ligeramente line-height para cards más estrechas portrait */
    .colecciones-immersive .col-title {
      line-height: 0.9;
      margin-bottom: 10px;
    }

    .colecciones-immersive .col-desc {
      max-width: 280px;
      margin-bottom: 20px;
    }

    /* Header desktop: referenciado a header desktop height (no mobile) */
    .colecciones-immersive .col-header {
      top: calc(var(--header-height, 64px) + 20px);
      left: 40px;
      right: 40px;
    }

    /* Scrim superior desktop: ajustado a header desktop */
    .colecciones-immersive::before {
      height: calc(var(--header-height, 64px) + 140px);
    }

    /* Dots desktop: desplazados a la izquierda (no centrados) → composición editorial */
    .colecciones-immersive .col-dots {
      left: 40px;
      right: auto;       /* no se extiende a la derecha */
      bottom: 32px;
      gap: 0;
    }

    /* ── FLECHAS LATERALES ──
       El sistema base (lda-overrides.css v4.1) ya define .lda-carousel-arrows con
       display:flex, position:absolute, inset:0, y los botones con tamaño 44px.
       Aquí solo sobreescribimos el display:none de mobile y ajustamos los estilos
       visuales al contexto full-bleed oscuro de colecciones (bone sobre negro). */
    .colecciones-immersive .lda-carousel-arrows {
      display: flex;          /* override del display:none mobile */
      pointer-events: auto;   /* levanta el pointer-events:none del wrapper mobile */
    }

    /* Flechas sobre fondo oscuro: glass bone en vez de ink sólido */
    .colecciones-immersive .lda-carousel-arrow {
      background: rgba(250,248,243,0.12);
      color: var(--bone);
      border: 1px solid rgba(250,248,243,0.22);
      backdrop-filter: blur(4px);
      z-index: var(--z-fhud, 30);   /* sobre las cards z-index: var(--z-fcard, 10) */
    }

    .colecciones-immersive .lda-carousel-arrow:hover {
      background: rgba(250,248,243,0.28);
      border-color: rgba(250,248,243,0.5);
      color: var(--bone);   /* mantener bone (el sistema base pone ink en hover) */
    }

  }
/* END_SECTION:lda-colecciones */

/* START_SECTION:lda-collection (INDEX:24) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición).
     Vive en .coll-main (columna de contenido), NO en .lda-collection: así el <aside> raíl y su
     bottom-sheet móvil (position:fixed) NO quedan atrapados por el containing-block que crea
     container-type → el sheet ancla al viewport (móvil intacto). breadcrumb/chips heredan --fs-*
     de .lda-collection.container (sin container-type → cqw cae al mínimo del clamp = valores móviles). */
  .coll-main.container { container-type: inline-size; }

  /* ═══════════════════════════════════════════════════════════
     BREADCRUMB · forma PDP v6 (riel fino) a opacidad plena (--mid AAA, no atenuado)
     ═══════════════════════════════════════════════════════════ */
  .coleccion-breadcrumb {
    padding: 12px 16px 6px;
    font-size: var(--fs-9); font-weight: 400; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--mid);
    background: var(--bone);
  }
  .coleccion-breadcrumb a {
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center; min-height: 24px;
    transition: color 0.2s;
  }
  .coleccion-breadcrumb a:hover { color: var(--bordeaux); }
  .coleccion-breadcrumb span { opacity: 0.4; margin: 0 5px; font-size: 0.85em; }

  /* ═══════════════════════════════════════════════════════════
     HERO COLECCIÓN · minimal editorial (breadcrumb + H1 + intro)
     ═══════════════════════════════════════════════════════════ */
  .coleccion-hero {
    padding: 24px 16px 0;
    display: flex; flex-direction: column;
    background: var(--bone);
  }
  .coleccion-eyebrow {
    font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid); margin-bottom: 8px;
  }
  .coleccion-titulo {
    font-size: var(--fs-h2-edit-sm); font-weight: 400; letter-spacing: 0; line-height: 1.05;
    color: var(--ink); margin-bottom: 12px;
    text-wrap: balance;
  }
  .coleccion-intro {
    font-size: var(--fs-14); font-weight: 400; line-height: 1.55;
    color: var(--mid); max-width: 320px; margin-bottom: 24px;
  }

  /* ═══════════════════════════════════════════════════════════
     CUERPO PRINCIPAL · grid 2-col fijo
     ═══════════════════════════════════════════════════════════ */
  .coleccion-body { padding: 16px 16px 0; }
  .product-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px 8px;
  }

  /* ═══════════════════════════════════════════════════════════
     PRODUCT CARD · ratio 4:5 · overlay-link · DD1 volumen · rating R4
     ═══════════════════════════════════════════════════════════ */
  /* Overlay-link: card = <div> + <a> absoluto · botones/select por encima → sin interactivos en <a> */
  .pgrid-card {
    position: relative;
    display: flex; flex-direction: column;
    min-width: 0; cursor: pointer; touch-action: manipulation;
    text-decoration: none; color: inherit;
  }
  .pgrid-card-link { position: absolute; inset: 0; z-index: 1; }
  .pgrid-volume-wrap, .pgrid-add-btn { position: relative; z-index: 2; }

  .pgrid-img-wrap {
    width: 100%; aspect-ratio: 4/5;
    background: var(--bisque);
    position: relative; overflow: hidden; margin-bottom: 8px;
  }
  .pgrid-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
  .pgrid-card:hover .pgrid-img-wrap img { opacity: 0.88; }
  .pgrid-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.2s ease;
  }
  .pgrid-card:hover .pgrid-img-placeholder { opacity: 0.88; }
  .pgrid-img-placeholder svg { width: 48px; height: 60px; opacity: 0.20; stroke: var(--ink); }

  /* Badge · text-only Manrope · R1/R2: sin serif, sin fill (Bordeaux outline-color · Novedad=Obsidian) */
  .pgrid-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-family: var(--lda-font-sans); font-size: var(--fs-10); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--bordeaux); line-height: 1;
  }
  .pgrid-badge.novedad { color: var(--ink); }
  .pgrid-badge.hidden { display: none; }

  /* Wishlist · toggle aria-pressed · stroke currentColor (R11) */
  .pgrid-wishlist {
    position: absolute; top: 4px; right: 4px; z-index: 3;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; touch-action: manipulation;
    color: var(--ink);
  }
  .pgrid-wishlist svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; transition: fill 0.18s ease, stroke 0.18s ease; }
  .pgrid-wishlist:hover svg { stroke: var(--bordeaux); }
  .pgrid-wishlist[aria-pressed="true"] svg { fill: var(--bordeaux); stroke: var(--bordeaux); }

  .pgrid-content-col { display: flex; flex-direction: column; flex: 1; }
  .pgrid-brand {
    font-size: var(--fs-10); font-weight: 600; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--mid); margin-bottom: 3px;
  }
  .pgrid-name {
    font-family: var(--lda-font-sans); font-style: normal;
    font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em;
    color: var(--ink); line-height: 1.25; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Familia olfativa · flex:1 absorbe el espacio variable del grid */
  .pgrid-tagline {
    font-size: var(--fs-11); font-weight: 400; font-style: normal;
    letter-spacing: 0.02em; text-transform: none;
    color: var(--mid); line-height: 1.4;
    flex: 1; min-height: 14px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Rating · inline junto al precio · R4 gated ≥3 Judge.me */
  .pgrid-price-rating { display: flex; align-items: center; justify-content: space-between; }
  .pgrid-rating {
    display: flex; align-items: center; gap: 2px;
    font-family: var(--lda-font-sans); font-size: var(--fs-10);
    color: var(--ink); padding-right: 4px;
  }
  .pgrid-rating.hidden { display: none; }
  .pgrid-rating-score { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
  /* Estrella proporcional · fill clip al % de la puntuación */
  .pgrid-star { position: relative; width: 9px; height: 9px; display: inline-block; flex-shrink: 0; }
  .pgrid-star > svg { position: absolute; top: 0; left: 0; width: 9px; height: 9px; }
  .pgrid-star-fill { position: absolute; top: 0; left: 0; height: 9px; overflow: hidden; }
  .pgrid-star-fill > svg { width: 9px; height: 9px; display: block; }
  /* Bloque inferior · precio + CTA full-width debajo */
  .pgrid-bottom-row { display: flex; flex-direction: column; padding-top: 6px; gap: 6px; }
  .pgrid-price {
    font-family: var(--lda-font-sans);
    font-size: var(--fs-16); font-weight: 500; letter-spacing: var(--track-price);
    color: var(--ink); white-space: nowrap;
  }
  /* CTA full-width · radius 2px canónico · Obsidian fill (R15: acción de compra) */
  .pgrid-add-btn {
    width: 100%; min-height: 44px; padding: 0;
    border-radius: 2px;
    background: var(--ink); border: none;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-10); font-weight: 700; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--bone);
    cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    display: flex; align-items: center; justify-content: center;
  }
  .pgrid-add-btn:hover { background: var(--color-cta-hover); }
  .pgrid-add-btn:active { background: var(--color-cta-hover); }
  .pgrid-add-btn[disabled] { cursor: default; opacity: 0.85; }

  /* DD1 · dropdown volumen nativo · chevron data-URI (literal en data-URI = excepción R11) · radius 2px · 44px (R8) */
  .pgrid-volume-wrap { display: block; }
  .pgrid-volume {
    width: 100%; min-height: 44px; padding: 0 28px 0 10px;
    appearance: none; -webkit-appearance: none;
    background: transparent; color: var(--ink);
    border: 1px solid var(--color-border-subtle); border-radius: 2px;
    font-family: var(--lda-font-sans); font-size: var(--fs-12); font-weight: 500;
    letter-spacing: 0.02em; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
  }
  .pgrid-volume:hover { border-color: var(--ink); }
  .pgrid-volume:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }

  /* ─── Reduced motion (zonas SB2 · card) ─── */
  @media (prefers-reduced-motion: reduce) {
    .pgrid-img-wrap img,
    .pgrid-img-placeholder,
    .pgrid-wishlist svg,
    .pgrid-add-btn,
    .pgrid-volume { transition: none !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     SB4 · BANNER EDITORIAL · intercalado full-width en el grid
     ═══════════════════════════════════════════════════════════ */
  .pgrid-editorial-banner {
    grid-column: 1 / -1;
    margin: 8px -16px; /* full-bleed sangra el padding lateral del body */
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 220px; padding: 24px;
    text-decoration: none; color: var(--bone);
    transition: opacity 0.2s ease;
  }
  /* slot de imagen · gradiente placeholder (stand-in de <img> de producción · sin token) */
  .pgrid-editorial-img {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #2A2620 0%, #1A1815 100%);
  }
  .pgrid-editorial-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .pgrid-editorial-banner:hover { opacity: 0.92; }
  .pgrid-editorial-banner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none; z-index: 1;
  }
  .pgrid-editorial-label {
    position: relative; z-index: 2;
    font-size: var(--fs-9); font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(250,248,243,0.7); margin-bottom: 10px;
  }
  .pgrid-editorial-title {
    position: relative; z-index: 2;
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-h2-edit-sm); line-height: 1.05; letter-spacing: -0.01em;
    color: var(--bone); margin-bottom: 14px; max-width: 260px; text-wrap: balance;
  }
  .pgrid-editorial-cta {
    position: relative; z-index: 2; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--bone);
    border-bottom: 1px solid var(--bone); padding-bottom: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    .pgrid-editorial-banner { transition: none !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     PAGINACIÓN · "Cargar más" (reemplaza infinite scroll)
     ═══════════════════════════════════════════════════════════ */
  .coleccion-pagination {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 40px 16px 8px;
  }
  .pagination-progress {
    font-size: var(--fs-11); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid); text-align: center;
  }
  .pagination-bar { width: 120px; height: 2px; background: var(--color-border-subtle); position: relative; overflow: hidden; }
  .pagination-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 0.3s var(--ease-out); }
  /* Cargar más · texto+underline (R15: fill Obsidian reservado a acciones de compra) */
  .coleccion-load-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding-bottom: 3px;
    background: none; border: none; border-bottom: 1px solid currentColor;
    color: var(--ink);
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase;
    cursor: pointer; touch-action: manipulation;
    transition: opacity 0.18s ease;
  }
  .coleccion-load-more:hover { opacity: 0.55; }
  .coleccion-load-more[hidden] { display: none; }
  .coleccion-load-more.is-loading { pointer-events: none; opacity: 0.4; }
  .all-loaded-msg {
    display: none; text-align: center; width: 100%;
    font-size: var(--fs-11); font-weight: 500; color: var(--mid);
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  }
  .all-loaded-msg.visible { display: block; }

  /* ═══════════════════════════════════════════════════════════
     SB5 · VOLVER ARRIBA · utility flotante (R15: cuadrado 2px · bone+border · nunca círculo/fill)
     ═══════════════════════════════════════════════════════════ */
  .back-to-top {
    position: fixed;
    left: calc(50% + var(--pw) / 2 - 60px); /* borde derecho de la columna --pw - 16px margen - 44px */
    bottom: calc(16px + var(--safe-bottom));
    width: 44px; height: 44px; border-radius: 2px;
    background: var(--bone); border: 1px solid var(--color-border-subtle); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: manipulation; z-index: 250;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, border-color 0.15s ease;
  }
  .back-to-top.visible { opacity: 1; pointer-events: auto; }
  .back-to-top:hover { border-color: var(--ink); }
  .back-to-top svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  @media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: none !important; }
  }

  /* ─── Reduced motion (zonas SB1) ─── */
  @media (prefers-reduced-motion: reduce) {
    .coleccion-breadcrumb a,
    .coleccion-load-more,
    .pagination-bar-fill { transition: none !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     SB3 · CHIPS BAR (descubrimiento) · sticky bajo el header
     ═══════════════════════════════════════════════════════════ */
  .col-chips-bar {
    position: sticky;
    top: calc(var(--header-height-mobile) + var(--safe-top));
    z-index: 200;
    background: var(--bone);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .col-chips-bar.is-stuck { box-shadow: 0 4px 12px rgba(26,26,26,0.06); }
  /* Fade derecho · señal de scroll-x oculto (pseudo en vez de mask-image por repaint iOS) */
  .col-chips-bar::after {
    content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 48px;
    background: linear-gradient(to right, transparent, var(--bone));
    pointer-events: none; z-index: 1;
  }
  .filtros-visuales {
    display: flex; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 8px 0; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
  }
  .filtros-visuales::before, .filtros-visuales::after { content: ''; min-width: 16px; flex-shrink: 0; }
  .filtros-visuales::-webkit-scrollbar { display: none; }
  .filtro-chip {
    display: inline-flex; align-items: center; justify-content: center;
    height: 28px; padding: 0 12px;
    border: 1px solid var(--chip-border-idle); border-radius: 0;
    background: transparent; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 500;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    white-space: nowrap; cursor: pointer; flex-shrink: 0; scroll-snap-align: start;
    touch-action: manipulation;
    transition: border-color 120ms ease, box-shadow 120ms ease, font-weight 150ms ease;
  }
  .filtro-chip:hover { border-color: var(--ink); }
  .filtro-chip:focus { outline: none; }
  .filtro-chip:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
  /* R14: estado activo = fill inverso (ink bg + bone text), nunca inset */
  .filtro-chip.active { border-color: var(--ink); background: var(--ink); color: var(--bone); font-weight: 600; box-shadow: none; }

  /* ═══════════════════════════════════════════════════════════
     SB3 · CONTROLES Filtrar | Ordenar · sticky bajo los chips
     ═══════════════════════════════════════════════════════════ */
  .coleccion-controls {
    position: sticky;
    top: calc(var(--header-height-mobile) + var(--safe-top) + var(--chips-bar-height));
    z-index: 190;
    background: var(--bone);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .coleccion-controls.is-stuck { box-shadow: 0 4px 12px rgba(26,26,26,0.06); border-top-color: transparent; }
  .cb-controls { display: flex; align-items: stretch; }
  /* 65/35: filtrar pesa más (se usa 3-4× más que ordenar · Baymard) */
  .cb-controls .cb-btn:first-child { flex: 65; }
  .cb-controls .cb-btn:last-child  { flex: 35; }
  .cb-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 12px;
    background: none; border: none; color: var(--ink);
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase;
    cursor: pointer; touch-action: manipulation; transition: background 0.15s ease;
  }
  .cb-btn:hover { background: rgba(26,26,26,0.03); }
  .cb-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
  .cb-btn + .cb-btn { border-left: 1px solid var(--color-border-subtle); }
  .cb-sort-value { color: var(--mid); font-weight: 500; text-transform: none; letter-spacing: 0.01em; }
  /* contador de filtros activos · ornament Obsidian (no Bordeaux fill · R2) */
  .cb-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--ink); color: var(--bone);
    font-size: var(--fs-8); font-weight: 700; letter-spacing: 0;
  }
  .cb-filter-count.hidden { display: none; }

  /* ═══════════════════════════════════════════════════════════
     SB3 · CHIPS ACTIVOS removibles
     ═══════════════════════════════════════════════════════════ */
  .active-filters {
    display: none; align-items: center; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 4px 16px 0; margin-bottom: 16px;
  }
  .active-filters.visible { display: flex; }
  .active-filters::-webkit-scrollbar { display: none; }
  .active-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 8px 0 12px;
    border: 1px solid var(--ink); border-radius: 2px;
    background: var(--bone); color: var(--ink);
    font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
    cursor: pointer; touch-action: manipulation; min-height: 44px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .active-chip:hover { background: var(--ink); color: var(--bone); }
  .active-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.6; flex-shrink: 0; }
  .active-clear {
    flex-shrink: 0; background: none; border: none;
    font-family: var(--lda-font-sans); font-size: var(--fs-10); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase; color: var(--mid);
    text-decoration: underline; text-underline-offset: 3px;
    min-height: 44px; padding: 0 4px; cursor: pointer; touch-action: manipulation; white-space: nowrap;
  }
  .active-clear:hover { color: var(--ink); }

  /* ═══════════════════════════════════════════════════════════
     SB3 · FILTER MODAL (bottom-sheet full)
     ═══════════════════════════════════════════════════════════ */
  .filter-modal-backdrop { display: none; position: fixed; inset: 0; z-index: 400; background: rgba(26,26,26,0.4); }
  .filter-modal-backdrop.open { display: block; }
  .filter-modal {
    position: fixed; left: 50%; top: 0; bottom: 0; width: var(--pw);
    transform: translateX(-50%) translateY(100%);
    transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
    z-index: 410; background: var(--bone); display: flex; flex-direction: column;
  }
  .filter-modal.open { transform: translateX(-50%) translateY(0); }
  .filter-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(16px + var(--safe-top)) 16px 16px;
    border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0;
  }
  .filter-modal-title { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink); }
  .filter-modal-reset {
    background: none; border: none; cursor: pointer;
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase; color: var(--mid);
    min-height: 44px; touch-action: manipulation;
  }
  .filter-modal-reset:hover { color: var(--ink); }
  .filter-modal-close {
    background: none; border: none; cursor: pointer;
    font-size: var(--fs-22); line-height: 1; color: var(--mid);
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation;
  }
  .filter-modal-body { flex: 1; overflow-y: auto; padding: 0 16px; }
  .filter-group { border-bottom: 1px solid var(--color-border-subtle); }
  .filter-group-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; cursor: pointer; min-height: 52px;
    background: none; border: none; width: 100%; text-align: left;
    font-family: var(--lda-font-sans); touch-action: manipulation;
  }
  .filter-group-label { font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink); }
  .filter-group-toggle { width: 20px; height: 20px; color: var(--mid); transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; }
  .filter-group-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .filter-group.open .filter-group-toggle { transform: rotate(180deg); }
  .filter-group-options { display: none; padding-bottom: 12px; flex-direction: column; gap: 0; }
  .filter-group.open .filter-group-options { display: flex; }
  .filter-notes-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 16px; }
  .filter-group.open .filter-notes-grid { display: grid; }
  .filter-note-chip {
    height: 32px; padding: 0 8px;
    border: 1px solid var(--chip-border-idle); border-radius: 0;
    background: transparent; color: var(--ink);
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 500;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: border-color 120ms ease, box-shadow 120ms ease, font-weight 150ms ease;
    display: flex; align-items: center; justify-content: center; white-space: nowrap;
  }
  .filter-note-chip:hover { border-color: var(--ink); }
  .filter-note-chip:focus { outline: none; }
  .filter-note-chip:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
  .filter-note-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bone); font-weight: 600; box-shadow: none; }
  .filter-note-chip.hidden { display: none; }

  /* Filter Nav · colecciones rápidas */
  .filter-nav-section { padding: 16px 0 4px; border-bottom: 1px solid var(--color-border-subtle); }
  .filter-nav-label { font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid); margin-bottom: 10px; }
  .filter-nav-scroll { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 14px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .filter-nav-scroll::-webkit-scrollbar { display: none; }
  .filter-nav-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    border: 1px solid var(--chip-border-idle); background: transparent;
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 500;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink);
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; transition: border-color 120ms ease, background 120ms ease; white-space: nowrap;
  }
  .filter-nav-chip:hover { border-color: var(--ink); }
  .filter-nav-chip:focus { outline: none; }
  .filter-nav-chip:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
  .filter-nav-chip.active { border-color: transparent; background: var(--ink); color: var(--bone); }

  /* Notes search */
  .notes-search-wrap { display: none; padding: 10px 0 12px; position: relative; }
  .filter-group.open .notes-search-wrap { display: block; }
  .notes-search-input {
    width: 100%; height: 36px; padding: 0 36px 0 12px;
    border: 1px solid var(--control-border-muted); border-radius: 0;
    background: transparent; font-family: var(--lda-font-sans); font-size: var(--fs-13);
    font-weight: 400; color: var(--ink); letter-spacing: 0.02em; outline: none; -webkit-appearance: none;
    transition: border-color 120ms ease;
  }
  .notes-search-input::placeholder { color: var(--mid); font-weight: 400; }
  .notes-search-input:focus { border-color: var(--ink); }
  .notes-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--mid); display: flex; align-items: center; }
  .notes-search-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
  .notes-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--mid); font-size: var(--fs-16); line-height: 1; width: 20px; height: 20px; display: none; align-items: center; justify-content: center; padding: 0; }
  .notes-search-clear.visible { display: flex; }
  .notes-search-clear:hover { color: var(--ink); }
  .notes-no-results { display: none; grid-column: 1 / -1; font-family: var(--lda-font-sans); font-size: var(--fs-12); color: var(--mid); text-align: center; padding: 12px 0 4px; letter-spacing: 0.02em; }
  .notes-no-results.visible { display: block; }

  /* Price range slider · thumbs rombo (R16) */
  #fg-precio .filter-group-options { padding: 8px 0 20px; }
  .price-display { font-family: var(--lda-font-sans); font-size: var(--fs-13); font-weight: 500; color: var(--ink); letter-spacing: 0.02em; display: flex; align-items: center; gap: 4px; margin-bottom: 32px; }
  .price-display-val { font-variant-numeric: tabular-nums; }
  .price-display-sep { color: var(--mid); }
  .price-slider-wrapper { position: relative; height: 20px; }
  /* track inset 9px (medio-thumb) a cada extremo · alinea el fill con los centros (R16) */
  .price-slider-track { position: absolute; left: 9px; right: 9px; top: 50%; transform: translateY(-50%); height: 2px; background: var(--slider-track-idle); pointer-events: none; }
  .price-slider-range { position: absolute; top: 50%; transform: translateY(-50%); height: 2px; background: var(--ink); pointer-events: none; }
  .price-thumb { position: absolute; left: 0; width: 100%; height: 100%; -webkit-appearance: none; appearance: none; background: transparent; border: none; outline: none; pointer-events: none; margin: 0; padding: 0; }
  .price-thumb::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 0; background: var(--bone); border: 1.5px solid var(--ink); cursor: grab; pointer-events: all; box-shadow: 0 1px 4px rgba(26,26,26,0.14); transform: rotate(45deg) scale(0.707); transition: box-shadow 80ms ease; }
  .price-thumb::-moz-range-thumb { width: 18px; height: 18px; border-radius: 0; background: var(--bone); border: 1.5px solid var(--ink); cursor: grab; pointer-events: all; box-shadow: 0 1px 4px rgba(26,26,26,0.14); transform: rotate(45deg) scale(0.707); }
  .price-thumb:active::-webkit-slider-thumb { cursor: grabbing; box-shadow: 0 0 0 5px rgba(26,26,26,0.07); }
  .price-thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
  .price-tooltip { position: absolute; top: -34px; transform: translateX(-50%); background: var(--ink); color: var(--bone); font-family: var(--lda-font-sans); font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-cta); text-transform: uppercase; padding: 3px 7px; pointer-events: none; opacity: 0; transition: opacity 80ms ease; white-space: nowrap; z-index: 10; }
  .price-tooltip.is-visible { opacity: 1; }

  /* Filter option · checkbox rombo (R16) */
  .filter-option { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; cursor: pointer; min-height: 44px; background: none; border: none; width: 100%; text-align: left; font-family: var(--lda-font-sans); touch-action: manipulation; }
  .filter-option-left { display: flex; align-items: center; gap: 12px; }
  .filter-checkbox { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--color-border-subtle); display: flex; align-items: center; justify-content: center; transition: transform 0.20s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease, border-color 0.15s ease; }
  .filter-checkbox::after { content: ''; width: 8px; height: 8px; background: var(--bone); opacity: 0; transition: opacity 0.14s cubic-bezier(0.22, 1, 0.36, 1) 0.10s; }
  .filter-option[aria-pressed="true"] .filter-checkbox { background: var(--ink); border-color: var(--ink); transform: rotate(45deg) scale(0.707); }
  .filter-option[aria-pressed="true"] .filter-checkbox::after { opacity: 1; }
  .filter-option-name { font-size: var(--fs-14); font-weight: 400; color: var(--ink); }
  .filter-option-count { font-size: var(--fs-11); font-weight: 500; color: var(--mid); }
  .filter-modal-footer { padding: 16px 16px calc(16px + var(--safe-bottom)); border-top: 1px solid var(--color-border-subtle); flex-shrink: 0; }
  /* apply = CTA primario de confirmación del sheet (fill Obsidian · igual que el wireframe frozen) */
  .filter-apply-btn { width: 100%; min-height: 52px; background: var(--ink); color: var(--bone); border: none; font-family: var(--lda-font-sans); font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--track-cta); text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: background 0.18s ease; }
  .filter-apply-btn:hover { background: var(--color-cta-hover); }

  /* ═══════════════════════════════════════════════════════════
     SB3 · SORT BOTTOM SHEET · radios rombo (R16)
     ═══════════════════════════════════════════════════════════ */
  .sort-backdrop { display: none; position: fixed; inset: 0; z-index: 480; background: rgba(26,26,26,0.4); }
  .sort-backdrop.open { display: block; }
  .sort-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%); width: var(--pw); z-index: 500; background: var(--bone); border-radius: 12px 12px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,0.18); transition: transform 0.3s var(--ease-out); padding-bottom: max(8px, var(--safe-bottom)); }
  .sort-sheet.open { transform: translateX(-50%) translateY(0); }
  .sort-grabber { width: 36px; height: 4px; border-radius: 2px; background: var(--color-border-subtle); margin: 10px auto 4px; }
  .sort-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 12px; border-bottom: 1px solid var(--color-border-subtle); }
  .sort-title { font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink); }
  .sort-close { background: none; border: none; cursor: pointer; color: var(--mid); font-size: var(--fs-20); line-height: 1; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
  .sort-options { display: flex; flex-direction: column; padding: 4px 16px 12px; }
  .sort-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; background: none; border: none; width: 100%; text-align: left; font-family: var(--lda-font-sans); cursor: pointer; touch-action: manipulation; border-bottom: 1px solid var(--color-border-subtle); -webkit-tap-highlight-color: transparent; }
  .sort-option:last-child { border-bottom: none; }
  .sort-option-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .sort-option-label { font-size: var(--fs-14); font-weight: 400; color: var(--ink); }
  .sort-option[aria-checked="true"] .sort-option-label { font-weight: 600; }
  .sort-option[aria-disabled="true"] { cursor: default; pointer-events: none; }
  .sort-option[aria-disabled="true"] .sort-option-label { color: var(--mid); opacity: 0.55; }
  .sort-pronto { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; background: transparent; border: 1px solid var(--control-border-muted); font-family: var(--lda-font-sans); font-size: var(--fs-9); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid); opacity: 0.7; white-space: nowrap; }
  .sort-radio { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--color-border-subtle); display: flex; align-items: center; justify-content: center; transition: transform 0.20s cubic-bezier(0.22, 1, 0.36, 1), background 0.18s ease, border-color 0.15s ease; }
  .sort-radio::after { content: ''; width: 8px; height: 8px; background: var(--bone); opacity: 0; transition: opacity 0.14s cubic-bezier(0.22, 1, 0.36, 1) 0.10s; }
  .sort-option[aria-checked="true"] .sort-radio { border-color: var(--ink); background: var(--ink); transform: rotate(45deg) scale(0.707); }
  .sort-option[aria-checked="true"] .sort-radio::after { opacity: 1; }
  .sort-option[aria-disabled="true"] .sort-radio { opacity: 0.3; }

  /* sr-only · Trade expone .visually-hidden; el snippet pgrid-card y los controles usan .sr-only */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

  /* ─── Reduced motion (zonas SB3 · R10 + R16) ─── */
  @media (prefers-reduced-motion: reduce) {
    .col-chips-bar, .filtro-chip, .active-chip, .filter-nav-chip, .filter-note-chip,
    .coleccion-controls, .cb-btn, .filter-modal, .sort-sheet, .filter-group-toggle,
    .filter-checkbox, .filter-checkbox::after, .notes-search-input,
    .price-thumb::-webkit-slider-thumb, .price-tooltip, .filter-apply-btn,
    .sort-radio, .sort-radio::after { transition: none !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     A11Y · ANILLO DE FOCO CANÓNICO (WCAG 2.4.7 · resuelve los 2 blockers B4.1 v2 + fallo audit #18)
     Controles que confiaban en el outline UA del navegador. Bordeaux sobre superficie clara;
     doble traza (bone interior + Bordeaux exterior) sobre fill Obsidian / banner oscuro → ≥3:1 en ambos.
     :focus-visible = solo teclado → NO altera el render por defecto (móvil 375px intacto).
     ═══════════════════════════════════════════════════════════ */
  .pgrid-card-link:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
  .pgrid-wishlist:focus-visible,
  .cb-btn:focus-visible,
  .filter-modal-reset:focus-visible,
  .filter-modal-close:focus-visible,
  .filter-group-header:focus-visible,
  .filter-option:focus-visible,
  .sort-option:focus-visible,
  .active-chip:focus-visible,
  .active-clear:focus-visible,
  .coleccion-load-more:focus-visible,
  .back-to-top:focus-visible {
    outline: 2px solid var(--bordeaux); outline-offset: 2px; border-radius: 2px;
  }
  /* sobre fill Obsidian (Añadir): anillo bone interior + halo Bordeaux exterior (doble traza ≥3:1) */
  .pgrid-add-btn:focus-visible {
    outline: 2px solid var(--bone); outline-offset: -3px;
    box-shadow: 0 0 0 3px var(--bordeaux);
  }
  /* CTA del banner editorial (sobre imagen oscura): anillo bone */
  .pgrid-editorial-cta:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

  /* Skip-link "Saltar a filtros" · oculto en móvil (sin tab-stop → frozen intacto) · desktop: visible al foco */
  .coll-skip-rail { display: none; }

  /* base · el recuento de la fila de control va oculto en móvil (la fila móvil = Filtrar | Ordenar) */
  .cb-count { display: none; }

  /* ═══════════════════════════════════════════════════════════
     B4.1 v2 · CAPA DESKTOP (@media ≥990) · MÓVIL FROZEN E INTOCABLE
     Rediseño editorial sobre los 5 movimientos del AUDIT_B4.1:
       MOV1 CSS Grid 2-col (raíl <aside> sticky en flujo · acaba donde acaba el grid)
       MOV2 ficha hover-reveal (SB2 desktop · zona aparte)
       MOV3 H1 serif Cormorant + hero que respira
       MOV4 cero scroll-x heredado del móvil
       MOV5 filtrado en vivo (sin "Ver N") + Ordenar como popover anclado
     Tokens (fallo #5 · sin calc 1280 mágico): --coll-max / --coll-rail-w / --coll-rail-gap.
     Chrome sticky (header/megamenú) = header-group/B2.1 (§9): aquí el raíl ancla a viewport, no al header.
     ═══════════════════════════════════════════════════════════ */
  @media (min-width: 990px) {
    /* --coll-max también en overlays: el back-to-top (hermano en .lda-collection-overlays) lo necesita */
    .lda-collection, .lda-collection-overlays { --coll-max: 1280px; }
    .lda-collection {
      --coll-rail-w: 210px;       /* audit #14: raíl 200-220px (no 248) */
      --coll-rail-gap: 40px;
    }

    /* Skip-link · en el tab-order desktop, clipado hasta recibir foco (entonces visible, estilo editorial) */
    .coll-skip-rail {
      display: inline-block; position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .coll-skip-rail:focus {
      position: static; width: auto; height: auto; clip: auto;
      margin: 8px 0; padding: 6px 10px; z-index: 260;
      background: var(--ink); color: var(--bone);
      font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 600;
      letter-spacing: var(--track-cta); text-transform: uppercase; text-decoration: none;
      outline: 2px solid var(--bordeaux); outline-offset: 2px;
    }

    /* ── Cabecera de página · breadcrumb + chips a ancho completo, alineados al borde de columna ── */
    .coleccion-breadcrumb { padding: 16px 0 8px; }
    .col-chips-bar { position: static; border-bottom: 1px solid var(--color-border-subtle); }
    .col-chips-bar.is-stuck { box-shadow: none; }
    .col-chips-bar::after { display: none; }                 /* MOV4: fuera el fade que miente */
    .filtros-visuales {
      flex-wrap: wrap; overflow-x: visible;
      scroll-snap-type: none; padding: 12px 0;
    }
    .filtros-visuales::before, .filtros-visuales::after { content: none; }  /* fuera spacers de carril táctil */

    /* ── MOV1 · GRID 2-COL: raíl (col 1) + contenido (col 2) ── */
    .coll-grid {
      display: grid;
      grid-template-columns: var(--coll-rail-w) 1fr;
      gap: var(--coll-rail-gap);
      align-items: start;
    }
    /* columna de contenido = celda de grid: anula la caja .container (sin re-padear ni re-capar ancho).
       grid-row:1 explícito: con el contenido PRIMERO en DOM (col 2) y el raíl DESPUÉS (col 1), el
       auto-placement sparse mandaría el raíl a la fila 2 (cursor no retrocede). Anclar ambos a la fila 1. */
    .coll-main.container {
      grid-column: 2; grid-row: 1; min-width: 0;
      max-width: none; margin-inline: 0; padding-inline: 0;
    }

    /* ── MOV1 · RAÍL <aside> sticky · el .filter-modal pasa de bottom-sheet a panel en flujo ── */
    .coll-rail {
      grid-column: 1; grid-row: 1; min-width: 0;
      position: sticky; top: 140px; align-self: start;   /* sticky bajo el header fijo (~132px · "2ª línea"/fila nav) · Alonso 2026-06-16 · KI-12 */
      max-height: calc(100vh - 160px); overflow-y: auto;
      overscroll-behavior: contain;
    }
    .coll-rail::-webkit-scrollbar { width: 0; }
    .filter-modal-backdrop { display: none !important; }
    .filter-modal {
      position: static; transform: none !important;
      width: auto; height: auto; max-width: none;
      background: transparent; box-shadow: none;
      display: flex; flex-direction: column;
    }
    .filter-modal-header {
      padding: 16px 0;                                            /* FILTROS centrado en su banda · padding igual arriba/abajo + aire vs barra de chips (Alonso 2026-06-16) */
      align-items: baseline;                                      /* FILTROS y LIMPIAR a la misma línea base (Alonso 2026-06-16) */
      border-bottom: 1px solid var(--color-border-subtle);
    }
    .filter-modal-header .filter-modal-close { display: none; }   /* desktop: el raíl no se cierra */
    /* ── Jerarquía del raíl (loop 2026-06-16): el título MANDA, los labels son recesivos ── */
    .filter-modal-title { font-size: var(--fs-14); letter-spacing: 0.12em; }   /* +peso visual vs labels (weight 700 + ink heredados de base) */
    .filter-group-label { font-size: var(--fs-11); font-weight: 600; color: var(--mid); }
    .filter-group.open .filter-group-label { color: var(--ink); }              /* la faceta abierta se enciende */
    .filter-modal-body { overflow: visible; padding: 0; flex: none; }
    .filter-modal-footer { display: none; }                       /* MOV5: filtrado en vivo · sin "Ver N perfumes" */
    /* COLECCIONES fuera del raíl en desktop: filtro ≠ navegación (Alonso 2026-06-16).
       El nav se conserva en el bottom-sheet MÓVIL (frozen); aquí solo se oculta. El gesto fly-out
       (mood-board) se banca como design element → atomic/03-organisms/familias-flyout (True North: header). */
    .filter-nav-section { display: none; }
    /* ── Ritmo vertical unificado a 16px (loop 2026-06-16 · R7 micro fijo) ── */
    .filter-group-options { padding-bottom: 16px; }
    #fg-precio .filter-group-options { padding: 8px 0 16px; }     /* era 8/20 · el aire del slider lo da .price-display */
    /* ── NOTAS: flex-wrap en el raíl de 210px → los chips fluyen sin cortarse por la derecha ── */
    #fg-notas .filter-notes-grid { flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
    #fg-notas.open .filter-notes-grid { display: flex; }          /* id+clase gana al .filter-group.open (display:grid) */
    #fg-notas .filter-note-chip { padding: 0 7px; }

    /* ── MOV3 · HERO editorial: H1 serif Cormorant DISPLAY (R1 col-title = display italic) ──
       Token --fs-display-it (no --fs-h2-edit): el clímax serif llega aunque el cqw mida la columna
       de contenido (no la página) → ~51px@990 · ~75px@1280 · 88px ultra-ancho (resuelve fallo #4). */
    /* §9 stopgap (KI-12 · scoped colección): reserva la altura del header fijo (~132px desktop) para que
       breadcrumb + chips NO queden tapados. NO global: el hero de home se solapa a propósito (header
       transparente sobre hero). El fix global/promo (token de altura real) va en la sesión de header.
       R11: literal documentado · verificar en vivo y ajustar. */
    .lda-collection { padding-top: 100px; }
    .coleccion-hero { padding: 44px 0 0; }   /* eyebrow/título por DEBAJO de la línea de FILTROS, no a su nivel (Alonso 2026-06-16) */
    .coleccion-eyebrow { font-size: var(--fs-11); letter-spacing: var(--track-eyebrow); margin-bottom: 8px; }   /* menos hueco hacia el H1 */
    .coleccion-titulo {
      font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
      /* R11 excepción documentada: la rampa --fs-display-it (techo 88px ultra-ancho) se capa a 72px
         por juicio de Alonso (2026-06-15) · H1 menos dominante · italic display serif intacto (R1).
         min() conserva la rampa fluida por debajo de 72 y solo frena el crecimiento ultra-ancho. */
      font-size: min(var(--fs-display-it), 72px); letter-spacing: -0.01em; line-height: 1.04;
      margin-bottom: 18px;
    }
    .coleccion-intro { max-width: 560px; font-size: var(--fs-16); margin-bottom: 28px; }

    /* ── MOV5 + decisión 1 · FILA DE CONTROL: Nº perfumes (aria-live) + Ordenar (popover) ── */
    .coleccion-controls { position: static; border-top: none; border-bottom: 1px solid var(--color-border-subtle); }
    .coleccion-controls.is-stuck { box-shadow: none; border-top-color: transparent; }
    #filtrosBtn { display: none; }                            /* decisión 1: sin "Filtrar" redundante */
    .cb-controls { justify-content: space-between; align-items: baseline; padding: 10px 0; }
    .cb-count {
      display: block; margin: 0;
      font-family: var(--lda-font-sans); font-size: var(--fs-13); font-weight: 500;
      letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid);
    }
    .cb-count-num { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
    .cb-controls .cb-btn:last-child {
      flex: 0 0 auto; min-width: 0; border-left: none;
      min-height: 44px; padding: 0 16px; gap: 8px;                /* loop 2026-06-16: control tangible · R8 44px */
      border: 1px solid var(--color-border-subtle); border-radius: 2px;   /* outline editorial · NO fill ink (R15 = compra) */
      font-size: var(--fs-12);
    }
    .cb-controls .cb-btn:last-child svg { width: 16px; height: 16px; }
    .cb-sort-value { position: static; width: auto; height: auto; clip: auto; margin: 0; }

    /* ── MOV5 · ORDENAR como popover anclado (JS posiciona fixed bajo el botón · reposiciona en scroll) ── */
    .sort-backdrop { background: transparent; }
    .sort-sheet {
      display: none;                                  /* popover oculto en reposo (no off-screen) */
      left: auto; right: auto; bottom: auto;
      width: 280px; max-width: 92vw;
      transform: none; border-radius: 2px;
      box-shadow: 0 8px 32px rgba(26,26,26,0.16);
      padding-bottom: 0;
    }
    .sort-sheet.open { display: block; transform: none; }   /* JS fija top/left bajo el botón */
    .sort-grabber { display: none; }
    .sort-header { padding: 12px 16px; }

    /* ── decisión 2 · GRID de fichas: 3 columnas ── */
    .coleccion-body { padding: 8px 0 0; }
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }

    /* ── MOV2 · FICHA DESKTOP · Variante B "Jerárquico" (decisión Alonso 2026-06-15) ──
       Alineada a card-variants.html (variante B) + product-card spec. TODO siempre visible: sin overlay,
       sin hover-reveal. Orden visual: imagen → marca → nombre(2L) → precio → familia → formato DD1 → CTA.
       DD1 visible solo en desktop por decisión de Alonso ("aquí tiene más sentido que en móvil").
       CTA outline secundario (spec · hover rellena ink). CSS-only: la card pasa a grid y content-col +
       bottom-row a display:contents → sus hijos son items del grid de la card y se ordenan con `order`
       (el orden del DOM se conserva intacto para el móvil frozen). */
    .pgrid-card { display: grid; grid-template-columns: 1fr; row-gap: 0; align-self: start; }
    .pgrid-content-col, .pgrid-bottom-row { display: contents; }
    .pgrid-img-wrap { order: 0; margin-bottom: 12px; }
    .pgrid-brand { order: 1; margin-bottom: 3px; }
    /* nombre reserva 2 líneas → todas las fichas igual altura (rejilla sin bordes irregulares) */
    .pgrid-name { order: 2; min-height: 2.5em; margin-bottom: 5px; }
    .pgrid-price-rating { order: 3; margin-bottom: 5px; }
    .pgrid-tagline { order: 4; margin-bottom: 12px; }
    .pgrid-volume-wrap { order: 5; margin-bottom: 8px; }
    /* #1 · selector de formato como PILLS (decisión Alonso 2026-06-15 · reemplaza el <select> robótico).
       El JS las construye desde el <select> y oculta el nativo; sin JS / en móvil el <select> sigue activo. */
    .pgrid-formats { order: 5; display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
    .pgrid-format {
      font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 500; letter-spacing: 0.04em;
      padding: 7px 11px; border: 1px solid var(--chip-border-idle); border-radius: 2px;
      background: transparent; color: var(--ink); cursor: pointer;
      display: inline-flex; align-items: center;
      transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
    }
    .pgrid-format:hover { border-color: var(--ink); }
    .pgrid-format:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
    .pgrid-format[aria-checked="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
    .pgrid-add-btn {
      order: 6; width: 100%;
      background: transparent; border: 1px solid var(--ink); color: var(--ink);
    }
    .pgrid-add-btn:hover, .pgrid-add-btn:active { background: var(--ink); color: var(--bone); }
    /* imagen protagonista · leve zoom editorial en hover (sin rounded/shadow · canon producto LDA) */
    .pgrid-img-wrap img { transition: opacity 0.2s ease, transform 0.45s var(--ease-out); }
    .pgrid-card:hover .pgrid-img-wrap img { opacity: 1; transform: scale(1.03); }
    @media (prefers-reduced-motion: reduce) {
      .pgrid-img-wrap img { transition: none !important; }
      .pgrid-card:hover .pgrid-img-wrap img { transform: none; }
    }

    /* ── BANNER editorial intercalado: ancho de columna (sin el bleed -16px móvil) ── */
    .pgrid-editorial-banner { margin: 12px 0; min-height: 340px; padding: 32px; }
    .pgrid-editorial-title { font-size: var(--fs-h2-edit); max-width: 420px; }

    /* ── Paginación · centrada en la columna de contenido ── */
    .coleccion-pagination { padding: 48px 0 8px; }

    /* ── Volver arriba · borde derecho de la página (tokenizado · sin calc 1280 mágico) ── */
    .back-to-top {
      left: auto;
      right: calc(max(0px, (100vw - var(--coll-max)) / 2) + 48px);
    }
  }

  /* ── decisión 2 · ULTRA-ANCHO (≥1536): 4ª columna · página más ancha → fichas ~270px ── */
  @media (min-width: 1536px) {
    .lda-collection, .lda-collection-overlays { --coll-max: 1500px; }
    .lda-collection.container { max-width: var(--coll-max); }
    .product-grid { grid-template-columns: repeat(4, 1fr); }
  }

  {%- comment -%} Mood-board fly-out de colecciones RETIRADO del raíl (Alonso 2026-06-16): filtro ≠ navegación.
     El gesto on-hover se banca como elemento de diseño → LDA-design-system/atomic/03-organisms/familias-flyout
     (markup + CSS + JS preservados ahí). True North: cuerpo del mega-panel "Familias" del header, pendiente
     del workstream de header + reconciliar slugs de familia (KWR). {%- endcomment -%}
/* END_SECTION:lda-collection */

/* START_SECTION:lda-contacto (INDEX:25) */
.lda-contacto.container { container-type: inline-size; }
  .lda-contacto {
    background: var(--bone);
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
  }

  /* Breadcrumb */
  .lda-contacto__crumbs { font-size: var(--fs-11); letter-spacing: 0.02em; color: var(--mid); margin-bottom: var(--space-md); }
  .lda-contacto__crumbs a { color: var(--mid); text-decoration: none; }
  .lda-contacto__crumbs a:hover { text-decoration: underline; }
  .lda-contacto__sep { margin: 0 8px; color: var(--color-text-disabled); }

  /* Hero */
  .lda-contacto__hero { margin-bottom: var(--space-section); max-width: 640px; }
  .lda-contacto__eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid); margin-bottom: 12px;
  }
  .lda-contacto__h1 {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-h2-edit-sm); line-height: 1.05; color: var(--ink); margin: 0;
  }
  .lda-contacto__subhead {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 400;
    font-size: var(--fs-18); line-height: 1.3; color: var(--mid); margin: 12px 0 0; max-width: 36ch;
  }

  /* Grid */
  .lda-contacto__grid { display: flex; flex-direction: column; gap: var(--space-lg); }
  .lda-contacto__intro { font-size: var(--fs-14); line-height: 1.6; color: var(--mid); margin: 0 0 var(--space-md); max-width: 52ch; }

  /* Form fields */
  .lda-field-row { display: flex; flex-direction: column; gap: var(--space-md); }
  .lda-field { position: relative; margin-bottom: var(--space-md); }
  .lda-field__input,
  .lda-field__select {
    width: 100%; box-sizing: border-box; font-family: var(--lda-font-sans);
    font-size: var(--fs-16); color: var(--ink); background: var(--bone);
    border: 1px solid var(--color-border-subtle); border-radius: 2px;
    padding: 18px 14px 8px; line-height: 1.4; -webkit-appearance: none; appearance: none;
    transition: border-color 0.2s ease;
  }
  .lda-field__textarea { padding-top: 14px; resize: vertical; min-height: 132px; }
  .lda-field__input:focus,
  .lda-field__select:focus { outline: none; border-color: var(--ink); }
  .lda-field__label {
    position: absolute; left: 14px; top: 14px; pointer-events: none;
    font-size: var(--fs-14); color: var(--mid); transition: transform 0.18s ease, font-size 0.18s ease, color 0.18s ease;
    transform-origin: left top; background: var(--bone); padding: 0 2px;
  }
  .lda-field__input:focus ~ .lda-field__label,
  .lda-field__input:not(:placeholder-shown) ~ .lda-field__label { transform: translateY(-12px) scale(0.82); color: var(--mid); }
  .lda-field--select { display: flex; flex-direction: column; }
  .lda-field__toplabel { font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid); margin-bottom: 6px; }
  .lda-field--select .lda-field__select { padding: 12px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23534C43' stroke-width='1.5'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
  .lda-field__hint { display: block; margin-top: 6px; font-size: var(--fs-11); color: var(--mid); }

  /* Submit — único fill Obsidian (R15) */
  .lda-contacto__submit-wrap { margin-top: var(--space-sm); }
  .lda-contacto__submit {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
    font-family: var(--lda-font-sans); font-size: var(--fs-13); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase; cursor: pointer;
    color: var(--bone); background: var(--ink); border: 1px solid var(--ink);
    border-radius: 2px; padding: 0 28px; touch-action: manipulation;
    transition: background-color 0.2s ease;
  }
  .lda-contacto__submit:hover { background: var(--color-cta-hover); }
  .lda-contacto__consent { margin: 14px 0 0; font-size: var(--fs-10); color: var(--mid); line-height: 1.5; max-width: 44ch; }
  .lda-contacto__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

  /* Form banners */
  .lda-form-banner { font-size: var(--fs-14); line-height: 1.5; padding: 14px 16px; border-radius: 2px; margin: 0 0 var(--space-md); }
  .lda-form-banner--ok { color: var(--ink); border: 1px solid var(--color-border-subtle); background: var(--color-bg-divider); }
  .lda-form-banner--err { color: var(--color-signature-dark); border: 1px solid var(--color-signature); background: var(--color-signature-wash); }

  /* Channels */
  .lda-contacto__rail { display: flex; flex-direction: column; }
  .lda-channel { display: flex; gap: 14px; padding: var(--space-md) 0; border-top: 1px solid var(--color-border-subtle); }
  .lda-channel:first-child { border-top: none; }
  .lda-channel__icon { flex-shrink: 0; color: var(--ink); }
  .lda-channel--wa .lda-channel__icon { color: var(--color-signature); }
  .lda-channel__icon svg { width: 26px; height: 26px; display: block; }
  .lda-channel__name { display: block; font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
  .lda-channel__text { font-size: var(--fs-13); line-height: 1.5; color: var(--mid); margin: 4px 0 8px; }
  .lda-channel__action { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-13); font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
  .lda-channel--wa .lda-channel__action { color: var(--color-signature); }
  .lda-channel__meta { display: block; margin-top: 6px; font-size: var(--fs-10); color: var(--mid); }

  /* Schedule */
  .lda-contacto__schedule { padding-top: var(--space-md); margin-top: var(--space-sm); border-top: 1px solid var(--color-border-subtle); }
  .lda-contacto__eyebrow--rail { margin-bottom: 8px; }
  .lda-contacto__schedule-text { font-size: var(--fs-13); line-height: 1.55; color: var(--mid); margin: 0; }

  /* Nota envíos/devoluciones */
  .lda-contacto__note { margin-top: var(--space-section); padding: var(--space-md) 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
  .lda-contacto__note p { font-size: var(--fs-13); line-height: 1.6; color: var(--mid); margin: 0; max-width: 70ch; }
  .lda-contacto__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

  /* Mini-FAQ */
  .lda-contacto__faq { margin-top: var(--space-section); max-width: 640px; }
  .lda-contacto__faq-title { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; }
  .lda-faq-item { border-top: 1px solid rgba(26,26,26,0.10); }
  .lda-faq-item:last-child { border-bottom: 1px solid rgba(26,26,26,0.10); }
  .lda-faq-item summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; min-height: 44px; font-size: var(--fs-14); font-weight: 500; color: var(--ink); }
  .lda-faq-item summary::-webkit-details-marker { display: none; }
  .lda-faq-item__toggle { flex-shrink: 0; margin-left: 16px; font-size: var(--fs-16); color: var(--ink); width: 16px; text-align: center; line-height: 1; transition: transform 0.24s var(--ease-out); }
  .lda-faq-item[open] .lda-faq-item__toggle { transform: rotate(45deg); }
  .lda-faq-item__body { padding: 0 0 20px; font-size: var(--fs-14); line-height: 1.55; color: var(--mid); }
  .lda-faq-item__body a { color: var(--ink); text-decoration: underline; }
  .lda-contacto__faq-cta { padding-top: var(--space-md); }

  /* Foco visible coherente con la paleta (no anillo UA azul) */
  .lda-contacto a:focus-visible,
  .lda-contacto summary:focus-visible,
  .lda-contacto__submit:focus-visible,
  .lda-field__input:focus-visible,
  .lda-field__select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    .lda-field__label, .lda-field__input, .lda-field__select, .lda-faq-item__toggle, .lda-contacto__submit { transition: none; }
  }

  /* ═══════ DESKTOP (>=990px) ═══════ */
  @media (min-width: 990px) {
    .lda-contacto__h1 { font-size: var(--fs-h2-edit); }
    .lda-contacto__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(40px, 6cqw, 72px); align-items: start; }
    .lda-field-row { flex-direction: row; }
    .lda-field-row .lda-field { flex: 1 1 0; min-width: 0; }
    .lda-contacto__faq-title { font-size: var(--fs-h2-edit-sm); }
  }
/* END_SECTION:lda-contacto */

/* START_SECTION:lda-diario (INDEX:26) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición) */
  .lda-diario.container { container-type: inline-size; }

  /* ─── EL DIARIO · artículos preview · Aesop tile vertical stack ─── */
  .diario { padding: var(--space-section-tight) 16px 0; }
  .diario-head { margin-bottom: 24px; }

  .diario-eyebrow {
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    margin-bottom: 14px;
  }
  .diario-title {
    font-family: var(--lda-font-serif);
    font-size: var(--fs-h2-edit); font-weight: 500; font-style: italic;
    color: var(--ink); line-height: 1.0;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
  }
  .diario-subtitle {
    font-size: var(--fs-16); font-weight: 400; color: var(--mid);
    line-height: 1.5; max-width: 320px;
  }

  /* Aesop tile vertical stack · imagen full-width + meta + título */
  .diario-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .diario-article {
    display: block;
    text-decoration: none;
    color: var(--ink);
    transition: opacity 0.2s;
  }
  .diario-article:hover { opacity: 0.75; }

  .diario-article-image {
    width: 100%; aspect-ratio: 4/3;
    background: linear-gradient(180deg, #2A2620 0%, #1A1815 100%);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
  }
  /* Scrim funcional bottom · garantiza legibilidad de la meta sobre cualquier imagen */
  .diario-article-image::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 45%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.50) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .diario-article-image-label {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    font-size: var(--fs-9); font-weight: 500;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: rgba(250,248,243,0.5);
  }
  /* Meta overlay bottom-left sobre imagen · color Bone con scrim */
  .diario-article-meta {
    position: absolute;
    bottom: 12px; left: 12px;
    z-index: 2;
    font-size: var(--fs-10); font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: rgba(250,248,243,0.92);
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  }
  .diario-article-content { /* wrapper título · padding interno opcional */ }
  .diario-article-title {
    font-size: var(--fs-18); font-weight: 500;
    color: var(--ink); line-height: 1.2;
    letter-spacing: -0.005em;
  }

  /* Canonical section-foot CTA wrap */
  .diario-cta-wrap {
    display: flex; justify-content: center; align-items: center;
    padding: var(--space-cta-wrap-top) 0 var(--space-cta-wrap-bot);
  }
  .diario-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 12px 0;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    min-height: 44px;
    text-decoration: none;
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
   * Directiva: grid 3 columnas (Aesop tiles lado a lado) · mostrar las 3 entradas
   * · altura proporcionada · head ancho libre hasta 640px · consumir tokens del
   * sistema base (lda-overrides.css v4.1) — NO redefinir --fs-*, --space-*, container.
   * Decisiones de criterio:
   *   1. aspect-ratio mantiene 4/3 en tiles: más estrecho que en mobile (donde eran
   *      full-width), así la imagen es proporcional sin ocupar demasiada altura.
   *   2. .diario-head pasa a 2 columnas implícitas: texto+subtítulo a la izq, CTA
   *      alineado a la der — pero como .diario-cta-wrap está fuera del head, el head
   *      simplemente se libera de max-width para respirar.
   *   3. gap entre columnas: 32px (--space-md no existe aún; valor explícito seguro).
   *   4. Mobile nth-child(n+3) display:none vive en lda-overrides.css con
   *      max-width:767px, no afecta ≥990px. Sin anular: el override de display aquí
   *      garantiza visibilidad aunque el override de overrides.css se amplíe.
   */
  @media (min-width: 990px) {
    /* Reducir padding vertical · la sección es contenido, no hero (feedback Alonso: menos padding) */
    .diario { padding: var(--space-section-tight) 0 0; }

    /* Head: liberar max-width del subtítulo · menos aire bajo la cabecera */
    .diario-head { margin-bottom: 28px; }
    .diario-subtitle { max-width: 480px; }

    /* Grid 3 columnas · fila única · Aesop tiles side by side */
    .diario-list {
      flex-direction: row;
      gap: 32px;
      align-items: flex-start;
    }
    .diario-article {
      flex: 1 1 0;          /* 3 tiles iguales sin ancho fijo */
      min-width: 0;         /* evita overflow en flex */
    }

    /* Mostrar el artículo 3 (oculto en mobile por lda-overrides.css) */
    .diario-list .diario-article:nth-child(n+3) { display: block; }

    /* Título del artículo + mini línea editorial debajo (feedback Alonso) */
    .diario-article-title {
      font-size: var(--fs-20);
      position: relative;
      padding-bottom: 14px;
    }
    .diario-article-title::after {
      content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 32px; height: 1px;
      background: var(--ink);
    }

    /* CTA centrado con más respiro vertical */
    .diario-cta-wrap { padding: var(--space-cta-wrap-top) 0 var(--space-cta-wrap-bot); }
  }
  /* ===== /DESKTOP ===== */
/* END_SECTION:lda-diario */

/* START_SECTION:lda-editorial-culture (INDEX:27) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición del porting) */
  .lda-ec.container { container-type: inline-size; }

  .editorial-culture {
    margin-top: 0;
    position: relative;
    min-height: calc(var(--section-viewport-h) - var(--cinema-peek));
    overflow: hidden;
    background: linear-gradient(180deg, #3A332C 0%, #1A1815 100%);
    color: var(--bone);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-section) 24px max(var(--space-section), calc(20px + var(--safe-bottom)));
  }
  .editorial-culture-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }
  .editorial-culture::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      transparent 0%, transparent 30%,
      rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.55) 100%);
    pointer-events: none; z-index: 1;
  }
  .editorial-culture-img-label {
    position: absolute; top: 16px; right: 16px;
    font-size: var(--fs-9); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.45);
    z-index: 2;
  }
  .editorial-culture > .editorial-culture-eyebrow,
  .editorial-culture > .editorial-culture-title,
  .editorial-culture > .editorial-culture-rule,
  .editorial-culture > .editorial-culture-body,
  .editorial-culture > .editorial-culture-cta { position: relative; z-index: 2; }

  .editorial-culture-eyebrow {
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.85);
    text-shadow: 0 1px 8px rgba(0,0,0,0.25); margin-bottom: 16px;
  }
  .editorial-culture-title {
    font-family: var(--lda-font-serif);
    font-size: var(--fs-editorial-lead); font-weight: 500; font-style: italic;
    color: var(--bone); line-height: 1.0; letter-spacing: -0.01em;
    margin-bottom: 24px; max-width: 320px;
    text-shadow: 0 1px 12px rgba(0,0,0,0.25);
  }
  .editorial-culture-rule {
    width: 32px; height: 1px; background: rgba(250,248,243,0.85); margin-bottom: 24px;
  }
  .editorial-culture-body {
    font-size: var(--fs-16); font-weight: 400; color: rgba(250,248,243,0.95);
    line-height: 1.55; margin-bottom: 24px; max-width: 320px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  }
  .editorial-culture-cta {
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 24px;
    background: transparent;
    border: 1px solid rgba(250,248,243,0.85);
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--bone); text-decoration: none;
    min-height: 44px; align-self: flex-start;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    transform-origin: center;
  }
  .editorial-culture-cta:hover,
  .editorial-culture-cta:focus-visible {
    background: var(--bone);
    color: var(--ink);
    transform: scale(1.04);
  }
  .editorial-culture-cta:active { transform: scale(1.02); }
  @media (prefers-reduced-motion: reduce) {
    .editorial-culture-cta:hover,
    .editorial-culture-cta:active,
    .editorial-culture-cta:focus-visible { transform: none; }
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
    Directiva: full-bleed cinematic · imagen 100vw de fondo · bloque de texto
    en columna lateral izquierda · texto NO centrado · cinematic frame mantenido.

    Patron técnico:
    - .lda-ec.container rompe el max-width 1280px del D1 base → ocupa 100vw.
    - La sección mantiene flex-direction:column; los hijos de texto reciben
      padding-left uniforme (columna izquierda) + max-width que los confina al
      tercio-izquierdo sin necesidad de modificar el markup Liquid.
    - El scrim mobile (gradiente vertical) se reemplaza por un gradiente
      horizontal que oscurece el panel izquierdo sin tapar la fotografía derecha.
    - La posición justify-content pasa de flex-end (texto abajo) a center
      (texto verticalmente centrado), con padding-top para no pegarse al header.
    - Tokens consumidos sin redeclaración: --fs-editorial-lead (techo D2),
      --space-section (techo D3), --bone, --track-eyebrow, --track-cta, --ease-out.
  */
  @media (min-width: 990px) {

    /* Full-bleed: override del max-width 1280px impuesto por D1 de lda-overrides.css v4.1 */
    .lda-ec.container {
      max-width: 100vw;
      width: 100vw;
      padding-inline: 0;
      margin-inline: 0;
    }

    /* Sección: viewport completo · texto centrado verticalmente · columna izquierda */
    .editorial-culture {
      min-height: min(100vh, 900px);
      flex-direction: column;
      justify-content: center;
      padding-block: var(--space-section);
      padding-inline: 0;         /* el padding-left lo gestionan los hijos directamente */
      align-items: flex-start;   /* hijos alineados a la izquierda */
    }

    /* Scrim desktop: gradiente horizontal · el tercio izquierdo oscuro ancla el texto;
       la zona fotográfica derecha permanece abierta — inversión del scrim mobile vertical */
    .editorial-culture::before {
      background: linear-gradient(
        90deg,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.50) 30%,
        rgba(0,0,0,0.18) 58%,
        transparent 100%
      );
    }

    /* Columna de texto izquierda: padding-left clamp editorial + max-width confinado */
    .editorial-culture-eyebrow,
    .editorial-culture-title,
    .editorial-culture-rule,
    .editorial-culture-body,
    .editorial-culture-cta {
      padding-left: clamp(48px, 5.5vw, 96px);
      padding-right: 0;
    }

    /* Label de imagen: esquina inferior derecha en desktop */
    .editorial-culture-img-label {
      top: auto;
      bottom: 28px;
      right: 36px;
      font-size: var(--fs-10);
    }

    /* Título: max-width ampliado · techo tipográfico ya subido en D2 lda-overrides v4.1 */
    .editorial-culture-title {
      max-width: 480px;
      margin-bottom: 28px;
    }

    /* Rule: ligeramente más larga — respira en la composición wide */
    .editorial-culture-rule {
      width: 48px;
      margin-bottom: 28px;
    }

    /* Body: columna más generosa — 520px evita el colapso a 3 líneas comprimidas */
    .editorial-culture-body {
      max-width: 520px;
      line-height: 1.65;
      margin-bottom: 36px;
    }

    /* CTA: sin cambios de tamaño (ya ≥44px) · hereda padding-left de la columna */
    .editorial-culture-cta {
      align-self: flex-start;
    }

  } /* fin @media (min-width: 990px) */
/* END_SECTION:lda-editorial-culture */

/* START_SECTION:lda-editorial-page (INDEX:28) */
/* container-type que la rampa fluida --fs-* exige (cqw resuelve contra la columna) */
  .lda-editorial-page.container { container-type: inline-size; }

  .lda-editorial-page {
    background: var(--bone);
    /* el aire superior lo da el crumb/pagehead; sin padding-top duro para empalmar
       con un dark_scene de apertura cuando el H1 vive dentro de él */
    padding-bottom: var(--space-section);
  }

  /* ════════ Breadcrumb ════════ (texto en --mid por contraste AA) */
  .lda-ed__crumbs {
    padding-top: var(--space-section-tight);
    font-size: var(--fs-11); letter-spacing: 0.02em; color: var(--mid);
  }
  .lda-ed__crumbs a { color: var(--mid); text-decoration: none; }
  .lda-ed__crumbs a:hover { text-decoration: underline; }
  .lda-ed__sep { margin: 0 8px; color: var(--color-text-disabled); }

  /* ════════ Cabecera de página (H1 sobre Bone — garantiza superficie clara arriba) ════════ */
  .lda-ed__pagehead {
    max-width: 720px;
    margin: var(--space-section) auto var(--space-section);
    text-align: center;
  }
  .lda-ed__pageeyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 16px;
  }
  /* H1 de página: editorial serif italic (1 de las voces Cormorant contadas por página) */
  .lda-ed__h1 {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-h2-edit-sm); line-height: 1.05; letter-spacing: -0.01em;
    color: var(--ink); margin: 0; text-wrap: balance;
  }
  .lda-ed__pagelead {
    max-width: 560px; margin: 16px auto 0;
    font-size: var(--fs-16); line-height: 1.55; color: var(--mid);
  }

  /* ════════ dark_scene · banda de marca #3D1B22 (NO cinema, R13) ════════ */
  /* Es BANDA, no escena a viewport: la altura la marca el padding loose, jamás --section-viewport-h.
     Bordea por arriba y abajo con Bone → el ojo lee Bone como dominante (R2 + riesgo doble-dark). */
  .lda-ed-dark {
    background: var(--color-signature-dark);
    color: var(--bone);
    /* full-bleed: rompe el padding del wrapper sin usar 100vw (KI-03) */
    width: 100%;
    margin-inline: 0;
    padding: var(--space-section-loose) 24px;
    text-align: center;
  }
  /* la apertura/cierre dark de una página se separan del crumb/pagehead con aire propio */
  .lda-ed-dark + .lda-ed-dark { margin-top: 0; }
  .lda-ed-dark__inner {
    max-width: 560px; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  .lda-ed-dark__eyebrow {
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.65);
    margin-bottom: 16px;
  }
  /* kicker sans factual sobre el título serif (pairing canónico del manifiesto) */
  .lda-ed-dark__kicker {
    font-family: var(--lda-font-sans);
    font-size: var(--fs-13); font-weight: 500; letter-spacing: var(--track-default);
    color: rgba(250,248,243,0.80); margin-bottom: 10px;
  }
  /* título serif italic — voz Cormorant; sobre dark usa --fs-display-it (no editorial-lead, R6) */
  .lda-ed-dark__title {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-display-it); line-height: 1.0; letter-spacing: -0.02em;
    color: var(--bone); margin: 0 0 18px; max-width: 16ch; text-wrap: balance;
  }
  .lda-ed-dark__title em { font-style: italic; }
  .lda-ed-dark__body {
    font-size: var(--fs-14); line-height: 1.55; color: rgba(250,248,243,0.85);
    max-width: 340px; margin: 0 0 28px;
  }
  .lda-ed-dark__body p { margin: 0 0 0.6em; }
  .lda-ed-dark__body p:last-child { margin-bottom: 0; }
  .lda-ed-dark__body a { color: var(--bone); text-decoration: underline; text-underline-offset: 2px; }
  /* CTA = text-link bone con flecha (R15: cero fill); underline en .cta-label interior */
  .lda-ed-dark__cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; color: var(--bone); text-decoration: none;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; touch-action: manipulation;
  }

  /* ════════ prose · section-head + cuerpo de lectura ════════ */
  .lda-ed-prose {
    max-width: 640px; margin-inline: auto;
    padding-top: var(--space-section);
  }
  .lda-ed-prose:first-of-type { padding-top: var(--space-section); }
  .lda-ed-prose__head { margin-bottom: var(--space-md); }
  .lda-ed-prose__eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 12px;
  }
  .lda-ed-prose__h2 {
    font-size: var(--fs-h2); font-weight: 500; line-height: 1.15;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0;
  }
  /* subhead serif italic real — voz Cormorant (cuenta para el tope ≤3 por página) */
  .lda-ed-prose__subhead {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 400;
    font-size: var(--fs-18); line-height: 1.3; color: var(--mid);
    margin: 12px 0 0; max-width: 36ch;
  }
  .lda-ed-prose__body {
    font-size: var(--fs-16); line-height: 1.65; color: var(--ink);
  }
  .lda-ed-prose__body p { margin: 0 0 var(--space-md); }
  .lda-ed-prose__body p:last-child { margin-bottom: 0; }
  .lda-ed-prose__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  .lda-ed-prose__body strong { font-weight: 600; color: var(--ink); }

  /* ════════ trust_grid · rejilla ESTÁTICA de señales (NUNCA marquee) ════════ */
  .lda-ed-trust {
    max-width: 1080px; margin-inline: auto;
    padding-top: var(--space-section);
  }
  .lda-ed-trust__head { text-align: center; margin-bottom: var(--space-lg); }
  .lda-ed-trust__eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 12px;
  }
  .lda-ed-trust__h2 {
    font-size: var(--fs-h2); font-weight: 500; line-height: 1.15;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin: 0;
  }
  /* mobile: columna; desktop: fila estática (mismo patrón responsive que el Diario) */
  .lda-ed-trust__grid {
    display: flex; flex-direction: column; gap: var(--space-lg);
  }
  .lda-ed-trust__item {
    display: flex; flex-direction: column; align-items: flex-start;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-subtle);
  }
  .lda-ed-trust__icon { color: var(--ink); margin-bottom: 12px; }
  .lda-ed-trust__icon svg {
    width: 28px; height: 28px; display: block;
    stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none;
  }
  .lda-ed-trust__title {
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--ink); margin: 0 0 8px; line-height: 1.3;
  }
  .lda-ed-trust__desc {
    font-size: var(--fs-13); line-height: 1.5; color: var(--mid); margin: 0;
  }

  /* ════════ image_band · banda editorial full-bleed (imagen real) ════════ */
  /* full-bleed con width:100% (NUNCA 100vw, KI-03). NO cinema (R13): altura por padding/min-height
     acotada, no por --section-viewport-h. Título en --fs-h2-edit (R6, NUNCA --fs-editorial-lead). */
  .lda-ed-band {
    position: relative; overflow: hidden;
    width: 100%; margin-inline: 0; margin-top: var(--space-section);
    min-height: 420px;
    background: linear-gradient(180deg, #3A332C 0%, #1A1815 100%);
    color: var(--bone);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-section) 24px max(var(--space-section), calc(20px + var(--safe-bottom)));
  }
  .lda-ed-band__bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }
  .lda-ed-band::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, transparent 28%, rgba(0,0,0,0.38) 70%, rgba(0,0,0,0.58) 100%);
  }
  .lda-ed-band__imglabel {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    font-size: var(--fs-9); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.45);
  }
  .lda-ed-band__inner { position: relative; z-index: 2; max-width: 560px; }
  .lda-ed-band__eyebrow {
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.85);
    text-shadow: 0 1px 8px rgba(0,0,0,0.25); margin-bottom: 16px; display: block;
  }
  /* título serif italic — voz Cormorant; FORZADO a --fs-h2-edit (override explícito, R6) */
  .lda-ed-band__title {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-h2-edit); line-height: 1.05; letter-spacing: -0.01em;
    color: var(--bone); margin: 0 0 20px; max-width: 18ch;
    text-shadow: 0 1px 12px rgba(0,0,0,0.25); text-wrap: balance;
  }
  .lda-ed-band__rule { width: 32px; height: 1px; background: rgba(250,248,243,0.85); margin-bottom: 20px; }
  .lda-ed-band__body {
    font-size: var(--fs-16); line-height: 1.55; color: rgba(250,248,243,0.95);
    max-width: 420px; margin: 0 0 24px; text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  }
  .lda-ed-band__body p { margin: 0 0 0.6em; }
  .lda-ed-band__body p:last-child { margin-bottom: 0; }
  /* CTA = text-link bone con flecha (R15: cero fill) */
  .lda-ed-band__cta {
    display: inline-flex; align-items: center; align-self: flex-start;
    min-height: 44px; color: var(--bone); text-decoration: none;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; touch-action: manipulation;
  }

  /* ════════ cross_links · text-links de descubrimiento ════════ */
  .lda-ed-cross {
    max-width: 640px; margin-inline: auto;
    padding-top: var(--space-section); text-align: center;
  }
  .lda-ed-cross__eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 10px;
  }
  .lda-ed-cross__lead {
    font-size: var(--fs-16); line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-md);
  }
  .lda-ed-cross__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
  }
  .lda-ed-cross__link {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--ink); text-decoration: none; touch-action: manipulation;
    font-size: var(--fs-14); font-weight: 500;
  }

  /* ════════ Foco visible coherente (no anillo UA azul) ════════ */
  .lda-editorial-page a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .lda-ed-dark a:focus-visible,
  .lda-ed-band a:focus-visible { outline-color: var(--bone); }

  /* ════════ Reduced motion ════════ */
  @media (prefers-reduced-motion: reduce) {
    .lda-editorial-page * { transition: none !important; }
  }

  /* ═══════════════════════ DESKTOP (>=990px) ═══════════════════════ */
  @media (min-width: 990px) {

    .lda-ed__h1 { font-size: var(--fs-h2-edit); }
    .lda-ed__pagehead { margin-top: calc(var(--space-section) + 8px); }

    /* dark_scene: full-bleed real (rompe el max-width 1280px del .container base D1) */
    .lda-ed-dark {
      max-width: 100%; width: 100%; padding-inline: 0; margin-inline: 0;
    }
    .lda-ed-dark__inner { max-width: 620px; padding-inline: 24px; }
    .lda-ed-dark__body { max-width: 420px; }

    /* prose: columna de lectura confinada, centrada dentro del .container 1280px */
    .lda-ed-prose__subhead { max-width: 42ch; }

    /* trust_grid: fila estática de N columnas iguales (flex:1 1 0) */
    .lda-ed-trust__grid { flex-direction: row; gap: clamp(24px, 4cqw, 48px); }
    .lda-ed-trust__item { flex: 1 1 0; min-width: 0; }

    /* image_band: full-bleed cinematic · texto en columna izquierda · scrim horizontal */
    .lda-ed-band {
      max-width: 100%; width: 100%; padding-inline: 0; margin-inline: 0;
      min-height: min(72vh, 620px);
      justify-content: center; align-items: flex-start;
    }
    .lda-ed-band::before {
      background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.46) 32%, rgba(0,0,0,0.16) 60%, transparent 100%);
    }
    .lda-ed-band__inner { padding-left: clamp(48px, 5.5vw, 96px); padding-right: 24px; max-width: 720px; }
    .lda-ed-band__title { max-width: 18ch; }
    .lda-ed-band__body { max-width: 560px; line-height: 1.65; }
    .lda-ed-band__imglabel { top: auto; bottom: 28px; right: 36px; font-size: var(--fs-10); }

    /* cross_links: fila horizontal de enlaces */
    .lda-ed-cross__list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--space-md) var(--space-lg); }
  }
/* END_SECTION:lda-editorial-page */

/* START_SECTION:lda-familias (INDEX:29) */
/*
    FIX STICKY (2026-06-13): container-type:inline-size ELIMINADO.
    container-type activa layout containment → el elemento se convierte en
    containing block para position:sticky de sus descendientes, lo que impide
    que .fam-pin se quede pegado al viewport durante el scroll del track.
    Sin container-type el sticky se resuelve correctamente contra el scroll
    container (html/body). Las unidades cqw del ::before se sustituyen por vw.
  */

  /* ─── .fam — sección Pasillo v3.1 ─────────────────────────────────────── */
  .fam {
    --fam-band: 74vh;           /* scroll que consume cada familia · ajustable */
    width: 100%; position: relative;
    height: calc(6 * var(--fam-band));
    background: var(--bone);
  }

  .fam-pin {
    position: sticky;
    top: calc(var(--header-height-mobile, 56px) + var(--safe-top, 0px) + 8px);
    height: calc(var(--section-viewport-h) - 8px);
    min-height: 560px;
    display: flex; flex-direction: column;
    padding: 32px 24px max(32px, calc(24px + var(--safe-bottom, 0px)));
  }

  .fam-eyebrow {
    flex-shrink: 0;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid); margin-bottom: 24px;
  }

  .fam-list {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    justify-content: center; gap: 4px;
  }

  .fam-item { position: relative; }

  /* Marcador Bordeaux · ornamento sancionado tipo pull-quote · sin reflujo
     cqw → vw (fix: container-type eliminado, cqw ya no resuelve) */
  .fam-item.is-active::before {
    content: ''; position: absolute; left: -14px; top: 6px;
    width: 2px; height: clamp(34px, 8vw, 50px);
    background: var(--bordeaux); border-radius: 1px;
  }

  /* PNG bloom · centra la imagen a la derecha · fade-in con tint radial */
  .fam-png {
    position: absolute; top: 50%; right: -6%;
    transform: translateY(-50%) scale(.96);
    width: 64%; height: clamp(124px, 26vh, 214px);
    z-index: 0; opacity: 0; border-radius: 4px;
    border: 1px dashed rgba(156,149,139,0.55);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
    display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px;
    background:
      linear-gradient(90deg, var(--bone) 4%, transparent 42%),
      radial-gradient(110% 80% at 64% 42%, var(--fam-tint) 0%, transparent 72%);
    overflow: hidden;
  }

  .fam-png img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center right;
    mix-blend-mode: multiply;
  }

  /* Bloom-in cuando la familia está activa */
  .fam-item.is-active .fam-png {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  .fam-png span {
    font-size: var(--fs-10); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); opacity: 0.7;
    position: relative; z-index: 1;
  }

  /* Nombre · inactivo = sans UPPER apagado / activo = serif italic grande */
  .fam-name {
    position: relative; z-index: 2;
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    color: var(--mid);
    font-family: var(--lda-font-sans); font-size: var(--fs-20); font-weight: 500;
    letter-spacing: var(--track-default); text-transform: uppercase; line-height: 1.15;
    padding: 4px 0;
    transition: color 0.4s ease, font-size 0.4s ease;
    min-height: 44px; /* WCAG touch target */
  }

  .fam-item.is-active .fam-name {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: min(var(--fs-display-it), 9vh);
    letter-spacing: -0.01em; text-transform: none;
    color: var(--ink); line-height: 0.96;
  }

  /* Detalle · solo visible en la activa */
  .fam-detail {
    position: relative; z-index: 2;
    opacity: 0; max-height: 0; overflow: hidden;
    transition: opacity 0.45s ease;
  }

  .fam-item.is-active .fam-detail {
    opacity: 1; max-height: 260px;
    margin-top: 12px; margin-bottom: 24px;
  }

  .fam-phrase {
    font-size: var(--fs-16); color: var(--mid); max-width: 24ch;
  }

  .fam-notes {
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--ink); margin-top: 8px;
  }

  .fam-cta {
    display: inline-flex; gap: 8px; margin-top: 16px;
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--ink); padding-bottom: 2px;
    min-height: 44px; align-items: center; /* WCAG touch */
  }

  .fam-foot {
    flex-shrink: 0; position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start; margin-top: 24px;
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--ink); padding-bottom: 2px;
    min-height: 44px; /* WCAG touch */
  }

  /* Touch target extendido para .fam-foot (WCAG 2.5.5) */
  .fam-foot::after {
    content: ''; position: absolute; inset: -14px 0;
  }

  /* CTA motion — scoped a fam-cta y fam-foot */
  .fam-cta,
  .fam-foot {
    transition: transform 0.2s var(--ease-out, ease-out), color 0.2s var(--ease-out, ease-out);
    transform-origin: center;
  }

  .fam-cta:hover,
  .fam-cta:active,
  .fam-cta:focus-visible,
  .fam-foot:hover,
  .fam-foot:active,
  .fam-foot:focus-visible {
    transform: scale(1.04);
  }

  /* Reduced motion — stack vertical accesible */
  @media (prefers-reduced-motion: reduce) {
    .fam { height: auto; }
    .fam-pin { position: static; height: auto; min-height: 0; }
    .fam-list { display: block; }
    .fam-item {
      padding: 24px 0;
      border-top: 1px solid rgba(156,149,139,0.25);
    }
    .fam-png {
      position: relative; opacity: 1; transform: none;
      width: 100%; right: auto; top: auto; margin-bottom: 12px;
    }
    .fam-item.is-active .fam-png { transform: none; }
    .fam-detail { opacity: 1; max-height: none; }
    .fam-cta:hover,
    .fam-cta:active,
    .fam-cta:focus-visible,
    .fam-foot:hover,
    .fam-foot:active,
    .fam-foot:focus-visible { transform: none; }
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
    Layout: 2-col full-bleed
    · izq (45%): eyebrow + lista de familias + fam-foot
    · der (55%): visual .fam-png grande y centrada, sincronizado con is-active
    · sección full-bleed: override del max-width 1280px del sistema base
    · Imagen desktop: position absolute dentro del .fam-pin (containing block),
      ocupa left:45% → right:0 top:0 → bottom:0
    · .fam-png inactiva: opacity 0, scale(0.96); activa: opacity 1, scale(1)
    · fam-name activa: serif italic grande (aprovecha --fs-display-it desktop mayor)
  */
  @media (min-width: 990px) {

    /* Full-bleed: override del container base · esta sección ocupa 100vw
       SIN container-type (eliminado — rompía el sticky) */
    .lda-familias.container {
      max-width: 100%;
      padding-inline: 0;
      width: 100%;
    }

    /* La sección sigue siendo el scrollable track · mantiene height scroll-jack */
    .fam {
      --fam-band: 80vh;         /* bandas algo más generosas en desktop */
    }

    /* Pin sticky — header desktop suele ser ~64px
       CONTAINING BLOCK FIX: position:sticky por sí solo NO crea un containing
       block para hijos con position:absolute según la spec CSS.
       transform:translate3d(0,0,0) fuerza la creación de un stacking context
       que convierte .fam-pin en containing block para los .fam-png absolutos,
       sin romper el sticky behavior (el transform es compatible con sticky). */
    .fam-pin {
      top: calc(var(--header-height-desktop, 64px) + var(--safe-top, 0px));
      height: 100dvh;
      min-height: 640px;
      padding: 0;
      flex-direction: row;    /* 2 columnas: lista | visual */
      align-items: stretch;
      transform: translate3d(0, 0, 0);
      position: sticky;
    }

    /* Eyebrow: vive dentro de la col izquierda, posicionado arriba */
    .fam-eyebrow {
      position: absolute;
      top: 48px; left: 72px;
      margin-bottom: 0;
      z-index: 3;
    }

    /* ── Col izquierda · lista ── */
    .fam-list {
      flex: 0 0 45%;
      max-width: 45%;
      padding: 80px 64px 80px 72px;
      justify-content: center;
      gap: 2px;
      border-right: 1px solid rgba(156,149,139,0.18);
      position: relative;     /* para el marcador ::before */
      z-index: 2;
    }

    /* Marcador bordeaux: reposicionar para col izquierda
       cqw → vw (fix: container-type eliminado) */
    .fam-item.is-active::before {
      left: -20px; top: 8px;
      height: clamp(40px, 5vh, 64px);
    }

    /* fam-name desktop · inactivo */
    .fam-name {
      font-size: var(--fs-24, 1.5rem);
      padding: 6px 0;
    }

    /* fam-name desktop · activo · serif italic respira con techo mayor */
    .fam-item.is-active .fam-name {
      font-size: clamp(3rem, 5.5vw, 5rem);
      line-height: 0.92;
    }

    /* Detalle desktop: más aire */
    .fam-item.is-active .fam-detail {
      max-height: 320px;
      margin-top: 16px;
      margin-bottom: 32px;
    }

    .fam-phrase {
      font-size: var(--fs-18, 1.125rem);
      max-width: 28ch;
    }

    /* fam-foot al pie de la col izquierda */
    .fam-foot {
      position: absolute;
      bottom: 48px;
      left: 72px;
      margin-top: 0;
    }

    /* ── Col derecha · visual · .fam-png redesignado ── */
    /*
      Todos los .fam-png son position:absolute dentro de .fam-pin (el containing
      block forzado por transform:translate3d). Cubren left:45% → right:0,
      top:0 → bottom:0. El activo (is-active) tiene opacity:1 scale(1);
      los inactivos opacity:0 scale(0.96). Transición suave al cambiar is-active.
    */
    .fam-png {
      /* Reset del posicionamiento mobile y reposicionamiento en col der */
      position: absolute;
      left: 45%;
      right: 0;
      top: 0;
      bottom: 0;
      width: auto;
      height: auto;
      transform: scale(0.96);
      border: none;
      border-radius: 0;
      background:
        linear-gradient(90deg, var(--bone) 0%, transparent 18%),
        radial-gradient(90% 70% at 58% 50%, var(--fam-tint) 0%, transparent 70%);
      overflow: hidden;
      padding: 48px;
      z-index: 0;
      transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fam-png img {
      position: relative;
      inset: auto;
      width: 100%;
      height: 100%;
      max-width: 520px;
      max-height: 520px;
      object-fit: contain;
      object-position: center center;
      mix-blend-mode: multiply;
    }

    /* Activa: panel der visible */
    .fam-item.is-active .fam-png {
      opacity: 1;
      transform: scale(1);
    }

    /* span placeholder: centrado en desktop */
    .fam-png span {
      position: relative;
      z-index: 1;
      font-size: var(--fs-13, 0.8rem);
    }

    /* Reduced motion desktop: deshabilitar scroll-jack, mostrar stack */
    @media (prefers-reduced-motion: reduce) {
      .lda-familias.container { max-width: 100%; }
      .fam-pin {
        flex-direction: column;
        padding: 48px 72px;
        height: auto;
        position: static;
        transform: none;
      }
      .fam-list {
        flex: none;
        max-width: 100%;
        border-right: none;
        padding: 0;
      }
      .fam-png {
        position: relative;
        left: auto; right: auto; top: auto; bottom: auto;
        width: 100%; height: 300px;
        opacity: 1; transform: none;
        margin-bottom: 16px;
      }
      .fam-eyebrow { position: static; margin-bottom: 24px; }
      .fam-foot { position: static; margin-top: 24px; }
    }
  }
/* END_SECTION:lda-familias */

/* START_SECTION:lda-faq-page (INDEX:30) */
/* container-type que la rampa fluida --fs-* exige (cqw resuelve contra la columna) */
  .lda-faq-page.container { container-type: inline-size; }

  .lda-faq-page {
    background: var(--bone);
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
    counter-reset: lda-faqgroup;
  }

  /* ── Breadcrumb ── (texto en --mid por contraste AA; Ash solo en separador decorativo) */
  .lda-faq-page__crumbs {
    max-width: 720px; margin: 0 auto var(--space-md);
    font-size: var(--fs-11); letter-spacing: 0.02em; color: var(--mid);
  }
  .lda-faq-page__crumbs a { color: var(--mid); text-decoration: none; }
  .lda-faq-page__crumbs a:hover { text-decoration: underline; }
  .lda-faq-page__sep { margin: 0 8px; color: var(--color-text-disabled); }

  /* ── Cabecera ── */
  .lda-faq-page__head { text-align: center; margin-bottom: var(--space-section); }
  /* Firma Bordeaux: hairline editorial bajo la cabecera (ornamento ≤3%, R2) */
  .lda-faq-page__head::after {
    content: ""; display: block; width: 48px; height: 1px;
    background: var(--color-signature); margin: 24px auto 0;
  }
  .lda-faq-page__eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 16px;
  }
  .lda-faq-page__title {
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-h2-edit-sm); line-height: 1.08;
    letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0;
  }
  .lda-faq-page__lead {
    max-width: 560px; margin: 16px auto 0;
    font-size: var(--fs-14); line-height: 1.55; color: var(--mid);
  }

  /* ── Grupo (categoría) ── */
  .lda-faq-group {
    max-width: 720px; margin-inline: auto;
    margin-bottom: var(--space-section-tight);
    counter-increment: lda-faqgroup;
  }
  .lda-faq-group:last-of-type { margin-bottom: 0; }
  .lda-faq-group__label {
    display: flex; align-items: baseline; gap: 10px;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid); margin: 0 0 12px;
  }
  .lda-faq-group__label::before {
    content: counter(lda-faqgroup, decimal-leading-zero);
    color: var(--color-signature); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  }

  /* ── Items (acordeón nativo) ── */
  .lda-faq-item { border-top: 1px solid rgba(26,26,26,0.10); }
  .lda-faq-item:last-child { border-bottom: 1px solid rgba(26,26,26,0.10); }
  .lda-faq-item summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; min-height: 44px;
    font-size: var(--fs-14); font-weight: 500; color: var(--ink); letter-spacing: 0.005em;
  }
  .lda-faq-item summary::-webkit-details-marker { display: none; }
  .lda-faq-item__toggle {
    flex-shrink: 0; margin-left: 16px;
    font-size: var(--fs-16); font-weight: 400; color: var(--ink);
    width: 16px; text-align: center; line-height: 1;
    transition: transform 0.24s var(--ease-out);
  }
  .lda-faq-item[open] .lda-faq-item__toggle { transform: rotate(45deg); }
  .lda-faq-item summary:hover .lda-faq-item__toggle { color: var(--color-signature); }
  .lda-faq-item__body {
    padding: 0 0 20px;
    font-size: var(--fs-14); line-height: 1.55; color: var(--mid);
  }
  .lda-faq-item__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

  /* ── Puente / CTA editorial (text-link, NO fill Obsidian — R15) ── */
  .lda-faq-bridge {
    max-width: 720px; margin-inline: auto;
    padding: var(--space-cta-wrap-top) 0 var(--space-cta-wrap-bot);
    text-align: center;
  }
  .lda-faq-bridge__eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 8px;
  }
  .lda-faq-bridge__text {
    font-size: var(--fs-14); line-height: 1.55; color: var(--mid); margin: 0 0 12px;
  }
  .lda-faq-bridge__cta {
    display: inline-flex; align-items: center; min-height: 44px;
    text-decoration: none; touch-action: manipulation;
  }

  /* Foco visible coherente con la paleta (no anillo UA azul) */
  .lda-faq-page a:focus-visible,
  .lda-faq-page summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .lda-faq-item__toggle { transition: none; }
  }

  /* ═══════ DESKTOP (>=990px) ═══════ */
  @media (min-width: 990px) {
    .lda-faq-page__head { margin-bottom: calc(var(--space-section) + 8px); }
    .lda-faq-page__title { font-size: var(--fs-h2-edit); }
    .lda-faq-item summary { padding: 20px 0; font-size: var(--fs-16); }
    .lda-faq-item__body { padding-bottom: 24px; }
  }
/* END_SECTION:lda-faq-page */

/* START_SECTION:lda-faq (INDEX:31) */
/* container-type que la rampa fluida --fs-* exige */
  .lda-faq.container { container-type: inline-size; }

  /* ── Sección ── */
  .faq { padding: 0 16px 0; background: var(--bone); }

  /* ── Cabecera ── */
  .faq-head { margin-bottom: 24px; text-align: center; }
  .faq-eyebrow {
    display: inline-block; font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase;
    color: var(--mid); margin-bottom: 16px;
  }
  .faq-title {
    font-size: var(--fs-h2-edit-sm); font-weight: 500; line-height: 1.1;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink); margin: 0;
  }

  /* ── Items ── */
  .faq-item { border-top: 1px solid rgba(26,26,26,0.10); }
  .faq-item:last-child { border-bottom: 1px solid rgba(26,26,26,0.10); }
  .faq-item summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; min-height: 44px;
    font-size: var(--fs-14); font-weight: 500; color: var(--ink);
    letter-spacing: 0.005em;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item-toggle {
    flex-shrink: 0; margin-left: 16px;
    font-size: var(--fs-16); font-weight: 400; color: var(--ink);
    width: 16px; text-align: center; line-height: 1;
    transition: transform 0.24s var(--ease-out);
  }
  .faq-item[open] .faq-item-toggle { transform: rotate(45deg); }
  .faq-item-body {
    padding: 0 0 20px;
    font-size: var(--fs-14); line-height: 1.55; color: var(--mid);
    max-width: 560px;
  }

  /* ── CTA wrap ── */
  .faq-cta-wrap {
    display: flex; justify-content: center; align-items: center;
    padding: var(--space-cta-wrap-top) 0 var(--space-cta-wrap-bot);
  }
  .faq-cta {
    display: inline-flex; align-items: center;
    background: none; border: none; padding: 0;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    min-height: 44px; cursor: pointer; touch-action: manipulation;
    text-decoration: none;
  }

  /* ── Reduced motion: toggle ── */
  @media (prefers-reduced-motion: reduce) {
    .faq-item-toggle { transition: none; }
  }

  /* ===== DESKTOP (>=990px) ===== */
  @media (min-width: 990px) {
    /*
      Directiva Alonso: muy pegada a la izquierda → centrar en la página.
      El .container ya hereda max-width:1280px centrado del sistema base (lda-overrides.css v4.1).
      Aquí solo restringimos el acordeón y la cabecera a una columna editorial
      ~720px centrada dentro de ese container más ancho.
    */

    /* Sección: padding vertical más generoso en desktop */
    .faq {
      padding-block: var(--space-section);   /* plano macro 96px · era 0 (se pegaba a cross-sell) */
    }

    /* Cabecera: ya es text-align:center en mobile — en desktop añadimos holgura vertical */
    .faq-head {
      margin-bottom: var(--space-lg);   /* 40px crudo → token (D3) */
    }

    /* Título: consume el techo desktop --fs-h2-edit que sube lda-overrides.css v4.1 */
    .faq-title {
      font-size: var(--fs-h2-edit);
    }

    /*
      Lista de preguntas: columna editorial centrada ~720px.
      Se usa margin-inline: auto en vez de un wrapper adicional
      para no alterar el HTML ni romper el aria existente.
    */
    .faq-list {
      max-width: 720px;
      margin-inline: auto;
    }

    /* Items: summary con más aire vertical en desktop */
    .faq-item summary {
      padding: 20px 0;
      font-size: var(--fs-16);
    }

    /* Respuesta: ocupa todo el ancho del acordeón (~720px) en desktop */
    .faq-item-body {
      max-width: 100%;
      font-size: var(--fs-14);
      padding-bottom: 24px;
    }

    /* CTA: hereda centrado del faq-cta-wrap (flex justify-content:center ya en mobile) */
    .faq-cta-wrap {
      max-width: 720px;
      margin-inline: auto;
    }
  }
/* END_SECTION:lda-faq */

/* START_SECTION:lda-footer (INDEX:32) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición del porting) */
  .lda-footer.container { container-type: inline-size; }

  /* ─── FOOTER · brand + accordion + social + payments + bottom ─── */
  .footer {
    background: var(--ink);
    color: var(--bone);
    /* Safe-area: padding-bottom respeta home indicator del device · address legal no queda tapado */
    padding: var(--space-section) 16px max(var(--space-section-tight), calc(16px + var(--safe-bottom)));
  }
  /* Brand block · cierre dramático con wordmark + tagline editorial */
  .footer-brand {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(250,248,243,0.12);
  }
  /* Wordmark · texto placeholder · Josefin Sans 300 = fallback canónico documentado (no Manrope) */
  /* Producción: brand/logo/web/logo_v4_wordmark-light.svg con Futura PT → Josefin Sans → Century Gothic */
  .footer-wordmark {
    display: block;
    font-family: var(--lda-font-serif);
    font-size: var(--fs-h2-edit-sm); font-weight: 500; letter-spacing: 0.01em;
    color: var(--bone);
    margin: 0 auto 10px;
    text-align: center;
  }
  .footer-tagline {
    font-family: var(--lda-font-serif);
    font-size: var(--fs-14); font-weight: 500; font-style: italic;
    color: rgba(250,248,243,0.72);
    line-height: 1.3;
    max-width: 280px;
    margin: 0 auto;
  }

  /* Cols accordion native · <details> semantic · plus/minus rotate technique */
  /* Cero JS · cero animate-layout-property · solo transform + opacity */
  .footer-cols {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
    border-top: 1px solid rgba(250,248,243,0.10);
  }
  .footer-col {
    border-bottom: 1px solid rgba(250,248,243,0.10);
  }
  /* Summary = trigger del accordion · click toggles open state */
  .footer-col-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    min-height: 44px;
  }
  .footer-col-summary::-webkit-details-marker { display: none; }
  .footer-col-summary::marker { display: none; }
  .footer-col-title {
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: rgba(250,248,243,0.85);
  }
  /* Plus/minus toggle · path vertical rota 90° + fade */
  .footer-toggle {
    display: inline-block;
    width: 12px; height: 12px;
    color: rgba(250,248,243,0.65);
    flex-shrink: 0;
  }
  .footer-toggle svg { width: 100%; height: 100%; display: block; }
  .footer-toggle path {
    stroke: currentColor;
    stroke-width: 1.3;
    fill: none;
    transform-origin: 50% 50%;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }
  .footer-col[open] .footer-toggle-v {
    opacity: 0;
    transform: rotate(90deg);
  }
  .footer-col[open] .footer-toggle { color: rgba(250,248,243,0.85); }
  @media (prefers-reduced-motion: reduce) {
    .footer-toggle path { transition: none; }
  }
  /* Lista de links · expanded cuando details[open] */
  .footer-col-list {
    list-style: none;
    /* Colapso explícito del acordeón en mobile: oculto por defecto, visible solo con [open].
       Determinista en toda versión de Chrome (no depende del UA collapse de <details>, que el
       display:flex de autor puede pisar en versiones antiguas). Desktop fuerza flex !important. */
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 0 14px;
    margin: 0;
  }
  .footer-col[open] .footer-col-list { display: flex; }
  .footer-col-list a {
    display: block;
    padding: 6px 0;
    font-size: var(--fs-13); font-weight: 400;
    color: var(--bone);
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .footer-col-list a:hover { opacity: 0.7; }
  .footer-divider {
    height: 1px;
    background: rgba(250,248,243,0.12);
    margin: 8px 0 24px;
  }
  .footer-social {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
  }
  .footer-social a {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bone);
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .footer-social a:hover { opacity: 0.65; }
  .footer-social svg { width: 18px; height: 18px; }
  /* Métodos pago · glyphs editorial monochrome · NO cards NO badges NO grid */
  .footer-payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0 auto 24px;
    max-width: 340px;
  }
  .payment-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    color: rgba(250,248,243,0.70);
  }
  .payment-mark--text {
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: 0.06em;
  }
  .payment-mark--italic {
    font-size: var(--fs-12); font-weight: 600;
    letter-spacing: 0.04em;
    font-style: italic;
  }
  .payment-mark svg {
    height: 100%; width: auto;
    fill: none; stroke: currentColor;
    stroke-width: 1.3;
  }
  /* Apple Pay glyph es fill, no stroke (override del default del grupo) */
  .payment-mark svg[fill="currentColor"] {
    fill: currentColor; stroke: none;
  }
  /* Footer bottom · 3 filas + address legal */
  .footer-bottom {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--fs-10); font-weight: 400;
    color: rgba(250,248,243,0.5);
    line-height: 1.6;
  }
  .footer-bottom a {
    color: rgba(250,248,243,0.65);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .footer-legal-row { color: rgba(250,248,243,0.55); }
  .footer-region {
    font-size: var(--fs-10); font-weight: 500;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: rgba(250,248,243,0.45);
  }
  /* Company address legal · placeholder pre-launch (sin CIF S.L. hasta entidad confirmada) */
  .footer-address {
    margin-top: 4px;
    font-size: var(--fs-10); font-weight: 400;
    letter-spacing: 0.03em;
    color: rgba(250,248,243,0.38);
    line-height: 1.5;
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
   * Directiva: footer full-bleed (rompe el max-width 1280px del sistema base) · columnas
   * en grid (acordeón abierto, sin colapsar) · brand + social + payments + bottom centrados.
   * KI-03: el .container hereda --pw (375px) + max-width 1280px; sin override el fondo
   * oscuro quedaría confinado a una columna estrecha centrada. Fix = patrón full-bleed
   * sancionado (lda-hero): width:100% (NO 100vw → evita 15px de scroll horizontal por scrollbar).
   */
  @media (min-width: 990px) {
    /* Full-bleed override: el footer rompe el max-width 1280px del sistema base */
    .lda-footer.container {
      max-width: 100%;
      width: 100%;
      margin-inline: 0;
      padding-inline: 0;
    }
    /* El .footer base heredaba --pw (375px) vía .container → forzar ancho completo.
       padding lateral generoso para alinear con el resto del contenido en desktop. */
    .footer {
      width: 100%;
      max-width: none;
      padding: var(--space-section) 48px max(var(--space-section-tight), calc(48px + var(--safe-bottom)));
    }

    /* Contenido interno confinado a una columna centrada legible (no estirar a 1500px) */
    .footer-brand,
    .footer-cols,
    .footer-divider,
    .footer-social,
    .footer-payments,
    .footer-bottom {
      max-width: 1184px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Columnas: de acordeón colapsable (mobile) a grid abierto (desktop) */
    .footer-cols {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 40px;
      border-top: none;
    }
    .footer-col {
      flex: 1 1 0;
      min-width: 140px;
      border-bottom: none;
    }
    /* En desktop el acordeón queda siempre abierto: la lista visible, el toggle oculto */
    .footer-col-summary {
      cursor: default;
      padding: 0 0 14px;
      min-height: 0;
      pointer-events: none;
    }
    .footer-toggle { display: none; }
    .footer-col-list { display: flex !important; }

    /* Brand respira un poco más en desktop */
    .footer-tagline { max-width: 360px; }
  }
  /* ===== /DESKTOP ===== */
/* END_SECTION:lda-footer */

/* START_SECTION:lda-header (INDEX:33) */
/* ════════════════════════════════════════════════════════════════════════════
   LDA HEADER · CSS
   Prefijo: lda- en todas las clases para aislamiento vs Trade nativo.
   Tokens: consumidos desde lda-overrides.css (no redeclarados aquí).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── RESET / BASE ── */
.lda-promo-strip,
.lda-nav,
.lda-menu-backdrop,
.lda-menu-drawer,
.lda-menu-panel,
.lda-panel-header,
.lda-desktnav,
.lda-mega {
  box-sizing: border-box;
}

/* ────────────────────────────────────────────────────────────────────────────
   PROMO STRIP
   ──────────────────────────────────────────────────────────────────────────── */
.lda-promo-strip {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--pw, 375px);
  height: 24px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10, 10px);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 310;
  padding: 0 16px;
  /* descuenta notch si existe */
  padding-top: var(--safe-top, 0px);
  height: calc(24px + var(--safe-top, 0px));
}

/* ────────────────────────────────────────────────────────────────────────────
   NAV BARRA
   ──────────────────────────────────────────────────────────────────────────── */
.lda-nav {
  position: fixed;
  top: calc(24px + var(--safe-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: var(--pw, 375px);
  height: 48px;
  background: rgba(250, 248, 243, 0.98);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 300;
  transition: transform 0.3s ease;
}

.lda-nav.is-hidden {
  transform: translateX(-50%) translateY(-100%);
}

.lda-nav__left {
  display: flex;
  align-items: center;
  gap: 0;
}

.lda-nav__right {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Logo centrado absoluto en mobile */
.lda-nav__logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Josefin Sans', sans-serif;
  font-size: var(--fs-16, 16px);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

/* Wordmark canónico (desktop) oculto en móvil · móvil usa .lda-nav__logo-text (frozen) */
.lda-nav__wordmark { display: none; }

.lda-nav__logo img {
  display: block;
  height: 28px;
  width: auto;
}

/* ── Hamburguesa ── */
.lda-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  margin-left: -11px;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.lda-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: opacity 0.2s ease;
}

/* ── Botones de icono (búsqueda · account · carrito) ── */
.lda-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  min-width: 38px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}

.lda-nav-icon-btn svg {
  stroke: currentColor;
}

/* Búsqueda: solo desktop (móvil usa la lupa de nav__left · frozen) · Alonso 2026-06-16 */
.lda-nav-icon-btn--search { display: none; }

/* Cart badge */
.lda-cart-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--lda-font-sans);
  font-size: var(--fs-8, 8px);
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.lda-cart-badge[data-count]:not([data-count="0"]) {
  display: flex;
}

/* ── Nav desktop (oculto en mobile) ── */
.lda-desktnav {
  display: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   BACKDROP
   ──────────────────────────────────────────────────────────────────────────── */
.lda-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 350;
  background: rgba(26, 26, 26, 0.4);
}

.lda-menu-backdrop.is-open {
  display: block;
}

/* ────────────────────────────────────────────────────────────────────────────
   DRAWER FULL-SCREEN · MOBILE
   ──────────────────────────────────────────────────────────────────────────── */
.lda-menu-drawer {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateX(-100vw);
  width: var(--pw, 375px);
  height: 100vh;
  max-height: 700px;
  background: var(--bone);
  z-index: 360;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.lda-menu-drawer.is-open {
  transform: translateX(-50%);
}

/* ── Panel · unidad full-height ── */
.lda-menu-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bone);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.lda-menu-panel--active {
  transform: translateX(0);
}

.lda-menu-panel.is-active {
  transform: translateX(0);
}

.lda-menu-panel.is-slide-out {
  transform: translateX(-25%);
}

/* ── Panel header sticky ── */
.lda-panel-header {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: var(--bone);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Safe-area: primer header de sub-paneles toca el notch */
.lda-menu-panel > .lda-panel-header:first-child {
  height: calc(56px + var(--safe-top, 0px));
  padding-top: var(--safe-top, 0px);
}

.lda-menu-panel > .lda-panel-header:first-child .lda-panel-back,
.lda-menu-panel > .lda-panel-header:first-child .lda-panel-close {
  top: calc(50% + var(--safe-top, 0px) / 2);
}

/* ── Promo strip en panel principal ── */
.lda-panel-promo {
  background: var(--ink);
  color: var(--bone);
  text-align: center;
  padding: calc(10px + var(--safe-top, 0px)) 20px 10px;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10, 10px);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Wordmark en panel principal ── */
.lda-panel-wordmark {
  font-family: 'Josefin Sans', sans-serif;
  font-size: var(--fs-18, 18px);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ── Título en sub-paneles ── */
.lda-panel-title {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11, 11px);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Botón back ── */
.lda-panel-back {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mid);
  touch-action: manipulation;
}

.lda-panel-back svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Botón close ── */
.lda-panel-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-20, 20px);
  line-height: 1;
  color: var(--mid);
  touch-action: manipulation;
}

/* ── Items nav top-level ── */
.lda-panel-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  min-height: 48px;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-13, 13px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  transition: background 0.15s ease;
}

.lda-panel-nav-item:hover {
  background: rgba(26, 26, 26, 0.03);
}

.lda-panel-nav-item svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
  color: var(--mid);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Serif italic · La Casa en panel principal */
.lda-panel-nav-item--serif {
  font-family: var(--lda-font-serif);
  font-style: italic;
  font-size: var(--fs-20, 20px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  justify-content: flex-start;
  gap: 12px;
}

.lda-panel-nav-item--serif svg {
  margin-left: auto;
}

/* ── Sub-links en sub-paneles ── */
.lda-panel-sublink {
  display: flex;
  align-items: center;
  padding: 0 20px;
  min-height: 48px;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-15, 15px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  touch-action: manipulation;
  transition: opacity 0.15s ease;
}

.lda-panel-sublink:hover {
  opacity: 0.6;
}

.lda-panel-sublink--ver-todo {
  font-size: var(--fs-11, 11px);
  font-weight: 600;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  color: var(--bordeaux);
}

.lda-panel-sublink--serif {
  font-family: var(--lda-font-serif);
  font-style: italic;
  font-size: var(--fs-17, 17px);
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Grupo label (Ocasiones) ── */
.lda-panel-group-label {
  display: block;
  padding: 20px 20px 8px;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10, 10px);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  background: var(--bone);
}

/* ── Grid imagen 2-col (Categorías) ── */
.lda-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border-subtle);
  margin-top: 8px;
  flex-shrink: 0;
}

.lda-panel-grid-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bone);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.18s ease;
}

.lda-panel-grid-tile:hover {
  opacity: 0.8;
}

.lda-panel-grid-img {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.lda-panel-grid-img--ella {
  background: linear-gradient(160deg, #E8DDD4, #D4C4B5);
}

.lda-panel-grid-img--el {
  background: linear-gradient(160deg, #2A2620, #1A1510);
}

.lda-panel-grid-label {
  padding: 10px 12px;
  margin: 0;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11, 11px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Featured banner (panel principal) ── */
.lda-panel-featured-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border-subtle);
  min-height: 0;
}

.lda-panel-featured-single {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.18s ease;
}

.lda-panel-featured-single:hover {
  opacity: 0.85;
}

.lda-panel-featured-img {
  width: 100%;
  flex: 1;
  min-height: 120px;
  background: linear-gradient(160deg, #2A2620 0%, #1A1815 100%);
  position: relative;
  overflow: hidden;
}

/* Scrim */
.lda-panel-featured-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 30%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Badge label */
.lda-panel-featured-img::before {
  content: attr(data-label);
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-9, 9px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 0.85;
}

.lda-panel-featured-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: max(20px, calc(var(--safe-bottom, 0px) + 4px));
  z-index: 2;
  color: var(--bone);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.lda-panel-feat-sans {
  display: block;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-22, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 0.95;
}

.lda-panel-feat-serif {
  display: block;
  font-family: var(--lda-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-26, 26px);
  letter-spacing: -0.01em;
  line-height: 1.0;
  margin-top: -2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP  ≥ 990px
   ═══════════════════════════════════════════════════════════════════════════
   DISEÑO NUEVO: barra única 80px · logo + nav horizontal + megamenú CSS-only.
   Hamburguesa y drawer ocultos.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 990px) {

  /* ── Override del promo strip: full-width en desktop ── */
  .lda-promo-strip {
    width: 100%;
    max-width: 100%;
  }

  /* ── Nav barra: DOS FILAS centradas (directiva Alonso) — fila 1: logo centro + iconos der · fila 2: nav ── */
  .lda-nav {
    top: calc(24px + var(--safe-top, 0px));
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 0 clamp(24px, 4vw, 80px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 60px 48px;        /* fila logo (60) · fila nav (48) → header 108px */
    align-items: center;
    gap: 0;
    background: rgba(250, 248, 243, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* §9/#3 (Alonso 2026-06-15): en desktop el header NO se auto-oculta al hacer scroll (sensación "sticky").
     Neutraliza el translateY(-100%) de .is-hidden conservando el centrado translateX. El JS sigue toggleando
     .is-hidden; aquí solo se anula el efecto visual en desktop. Móvil frozen mantiene su hide-on-scroll. */
  .lda-nav.is-hidden { transform: translateX(-50%); }

  /* ── Logo: CENTRADO en la fila superior (directiva Alonso: logo centro siempre) ── */
  .lda-nav__logo {
    position: static;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    font-size: var(--fs-20, 20px);
    letter-spacing: 0.06em;
    padding: 0;
  }

  .lda-nav__logo img {
    height: 34px;
  }

  /* desktop: wordmark canónico "Locos d'Attar" (d' minúscula elevada = firma de marca) · oculta el texto plano móvil */
  .lda-nav__logo-text { display: none; }
  .lda-nav__wordmark {
    display: inline;
    font-family: 'Futura PT', 'Josefin Sans', 'Century Gothic', sans-serif;
    font-weight: 300;
    letter-spacing: 0.05em;
  }
  .lda-nav__wm-d {
    font-size: 0.6em;
    vertical-align: 0.22em;
    letter-spacing: 0.02em;
  }

  /* ── Izquierda: hamburguesa y búsqueda ocultos → reemplazados por desktnav ── */
  .lda-nav__left {
    display: none; /* hamburguesa + búsqueda mobile ocultos */
  }

  /* búsqueda desktop: lupa en el cluster derecho (junto a cuenta/carrito) · reutiliza openSearch · Alonso 2026-06-16 */
  .lda-nav-icon-btn--search { display: flex; }

  /* ── Right: account + cart (fila superior, derecha) ── */
  .lda-nav__right {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    gap: 4px;
  }

  /* ── Ocultar drawer y backdrop en desktop ── */
  .lda-menu-drawer,
  .lda-menu-backdrop,
  .lda-hamburger {
    display: none !important;
  }

  /* ════ MEGAMENÚ DESKTOP ════ */

  /* La nav ocupa la FILA 2 a ancho completo, centrada · hairline editorial bajo el logo */
  .lda-desktnav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    border-top: 1px solid var(--color-border-subtle);
  }

  /* ── Item del nav ── */
  .lda-desktnav__item {
    position: static; /* megamenú es full-width desde el nav, no del item */
  }

  /* ── Trigger: botón o link ── */
  .lda-desktnav__trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 48px;            /* alto de la fila nav (era 80, barra única) */
    padding: 0 22px;         /* aire editorial entre items (era 16) · ~44px de separación entre textos */
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-12, 12px);
    font-weight: 500;        /* más ligero, editorial (era 600) */
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
      color 0.18s ease,
      border-color 0.18s ease;
  }

  .lda-desktnav__trigger:hover {
    color: var(--mid);
    border-bottom-color: var(--ink);
  }
  .lda-desktnav__trigger:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
    color: var(--ink);
    border-bottom-color: var(--ink);
  }

  /* La Casa trigger · voz nav Manrope (NO serif: R1 reserva Cormorant a voz editorial · evita 2º wordmark).
     La etiqueta del texto sigue siendo "Locos D'Attar" (regla lda-edit-marca-no-casa · no se renombra). */
  .lda-desktnav__trigger--serif {
    font-family: var(--lda-font-sans);
    font-style: normal;
    font-size: var(--fs-12, 12px);
    font-weight: 600;
    letter-spacing: var(--track-nav);
    text-transform: uppercase;
  }

  /* Link directo (Muestras · Regalos) */
  .lda-desktnav__trigger--link {
    border-bottom-color: transparent;
  }

  /* ════ MEGAMENÚ · panel desplegable ════
     CSS-only: visible con :hover en el li o :focus-within en el li.
     Estructura: posicionado fixed debajo del nav (top = header-height-desktop + promo).
     full-width de la ventana para editorial spaciousness. ── */

  .lda-mega {
    display: none; /* base: oculto */
    position: fixed;
    top: calc(132px + var(--safe-top, 0px)); /* promo 24 + fila logo 60 + fila nav 48 (header 2 filas) */
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bone);
    border-top: 1px solid var(--color-border-subtle);
    box-shadow: 0 8px 32px rgba(26, 26, 26, 0.10);
    z-index: 290; /* debajo del nav (300) pero sobre el contenido */
    animation: ldaMegaIn 0.22s var(--ease-out, cubic-bezier(0.22,1,0.36,1)) both;
  }

  /* Mostrar: hover en item O focus-within en item (a11y teclado) */
  .lda-desktnav__item:hover .lda-mega,
  .lda-desktnav__item:focus-within .lda-mega {
    display: block;
  }

  /* (removido 2026-06-15) #mega-perfumes { display:block !important } era un leftover de debug
     que forzaba el panel Perfumes permanentemente abierto (suspendido sobre el hero, sin cerrar).
     El mecanismo correcto es display:none por defecto → :hover/:focus-within del .lda-desktnav__item. */

  /* Cierre robusto: estado JS .mega-suppressed (Escape/scroll/click-fuera) gana sobre :hover (audit B2.1) */
  .lda-desktnav.mega-suppressed .lda-mega { display: none !important; }

  /* Sincronizar aria-expanded via CSS (solo estético; el valor real lo gestiona JS ligero) */
  .lda-desktnav__item:hover .lda-desktnav__trigger,
  .lda-desktnav__item:focus-within .lda-desktnav__trigger {
    border-bottom-color: var(--ink);
    color: var(--ink);
  }

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

  /* ── Inner: max-width centrado · padding editorial ── */
  .lda-mega__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px clamp(24px, 4vw, 80px) 52px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 200px;   /* Colecciones 1ª · Ocasión (col 3) más ancha: aloja 2 sub-columnas (Alonso 2026-06-17) */
    gap: 48px;
    align-items: start;
  }

  /* slim hereda max-width 1280 + margin auto del inner base: el contenido se alinea al MISMO
     borde izq que el mega ancho (la nav está centrada → no anclar al trigger). Columnas estrechas. */
  .lda-mega__inner--slim {
    grid-template-columns: 220px 220px;
  }

  /* ── Eyebrow de sección ── */
  .lda-mega__eyebrow {
    font-family: var(--lda-font-sans);
    font-size: var(--fs-10, 10px);
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--mid);
    margin: 0 0 20px;
  }

  /* ── Lista de links ── */
  .lda-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .lda-mega__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-15, 15px);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-subtle);
    transition: opacity 0.15s ease;
  }

  .lda-mega__link:hover {
    opacity: 0.55;
  }

  /* Serif italic · La Casa en megamenú */
  .lda-mega__link--serif {
    font-family: var(--lda-font-serif);
    font-style: italic;
    font-size: var(--fs-18, 18px);
    font-weight: 500;
    letter-spacing: 0;
    min-height: 52px;
  }

  /* "Ver todo" · bordeaux */
  .lda-mega__ver-todo {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-11, 11px);
    font-weight: 600;
    letter-spacing: var(--track-cta);
    text-transform: uppercase;
    color: var(--bordeaux);
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  .lda-mega__ver-todo:hover {
    opacity: 0.7;
  }

  /* (cat-grid de "Por género" retirado 2026-06-16: ahora es lista de texto · ver markup #mega-perfumes) */

  /* ── Featured banner (Khamrah Dukhan) ── */
  .lda-mega__featured {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.18s ease;
  }

  .lda-mega__featured:hover {
    opacity: 0.85;
  }

  .lda-mega__featured-img {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(160deg, #2A2620 0%, #1A1815 100%);
    border-radius: var(--radius-card, 4px);
    overflow: hidden;
  }

  .lda-mega__featured-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.60) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .lda-mega__featured-img::before {
    content: attr(data-label);
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-9, 9px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    opacity: 0.85;
  }

  .lda-mega__featured-overlay {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    z-index: 2;
    color: var(--bone);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }

  .lda-mega__feat-sans {
    display: block;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-20, 20px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 0.95;
  }

  .lda-mega__feat-serif {
    display: block;
    font-family: var(--lda-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: var(--fs-24, 24px);
    letter-spacing: -0.01em;
    line-height: 1.0;
    margin-top: -2px;
  }

  .lda-mega__feat-cta {
    margin: 12px 0 0;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-11, 11px);
    font-weight: 600;
    letter-spacing: var(--track-cta);
    text-transform: uppercase;
    color: var(--ink);
  }

  /* ── Marcas · panel propio (columna única editorial) ── */
  .lda-mega__inner--marcas { grid-template-columns: 240px; }

  /* ── Por ocasión · 2 sub-columnas por campo semántico (Estación / Momento · Alonso 2026-06-16) ── */
  .lda-mega__subcols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .lda-mega__sublabel {
    font-family: var(--lda-font-sans); font-size: var(--fs-10, 10px); font-weight: 500;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid);
    margin: 0 0 10px; opacity: 0.75;
  }
  /* Espaciador invisible: iguala la altura de las listas SIN sub-etiqueta (Por género · Colecciones)
     con las que SÍ la tienen (Estación · Momento) → todas arrancan a la misma altura (Alonso 2026-06-16) */
  .lda-mega__sublabel--spacer { visibility: hidden; }

  /* ── Familias · mood-board on-hover (diseño ex fly-out de colección · Alonso 2026-06-16)
     Firma visual íntegra (7 degradados + scrim + serif italic). Aspect 5/4 (adaptado a horizontal
     para que el panel no sea altísimo · el original de colección era 4/5 · tunable). ── */
  .lda-mega__inner--mood { display: block; }
  .lda-mega__inner--mood .mood-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .lda-mega__inner--mood .mood-tile {
    position: relative; aspect-ratio: 5/4; overflow: hidden; border-radius: 2px;
    display: flex; align-items: flex-end; padding: 16px;
    text-decoration: none; background: var(--bisque, #E8DDD0);
  }
  .lda-mega__inner--mood .mood-tile::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent 28%, rgba(18,13,10,0.64));
    transition: opacity 0.22s var(--ease-out, cubic-bezier(0.22,1,0.36,1));
  }
  .lda-mega__inner--mood .mood-tile:hover::after { opacity: 0.72; }
  .lda-mega__inner--mood .mood-tile:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
  .lda-mega__inner--mood .mood-tile-name {
    position: relative; z-index: 2;
    font-family: var(--lda-font-serif); font-style: italic; font-weight: 500;
    font-size: var(--fs-20, 20px); line-height: 1.05; color: var(--bone);
  }
  .mood-tile--ouds { background: linear-gradient(150deg,#3a2a1c,#1c140d); }
  .mood-tile--orientales { background: linear-gradient(150deg,#6e4f22,#3f2d13); }
  .mood-tile--amaderados { background: linear-gradient(150deg,#6f5c44,#443728); }
  .mood-tile--florales { background: linear-gradient(150deg,#8a5f6e,#573a44); }
  .mood-tile--musc { background: linear-gradient(150deg,#7a6a4e,#4a4030); }
  .mood-tile--especiados { background: linear-gradient(150deg,#8a4a30,#54281a); }
  .mood-tile--regalo { background: linear-gradient(150deg,#6a2c3c,#3f1a24); }
  .mood-tile--all { background: var(--bone); border: 1px solid var(--color-border-subtle); }
  .mood-tile--all::after { display: none; }
  .mood-tile--all .mood-tile-name { color: var(--ink); font-family: var(--lda-font-sans); font-style: normal; font-weight: 600; font-size: var(--fs-11, 11px); letter-spacing: 0.06em; text-transform: uppercase; }

  /* ── Búsqueda en desktop: botón en nav right ── */
  .lda-nav__right .lda-nav-icon-btn {
    min-width: 44px;
  }

} /* fin @media (min-width: 990px) */

/* ── R10 · prefers-reduced-motion (cubre mega desktop + drawer/paneles/nav móvil · audit B2.1) ── */
@media (prefers-reduced-motion: reduce) {
  .lda-mega { animation: none !important; }
  .lda-menu-drawer,
  .lda-menu-panel,
  .lda-nav { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BÚSQUEDA · overlay (desktop · #search-overlay portado · Alonso 2026-06-16)
   ════════════════════════════════════════════════════════════════════════════ */
.lda-search-backdrop {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(26, 26, 26, 0.4);
}
.lda-search-backdrop.open { display: block; }
.lda-search-overlay {
  position: fixed; top: clamp(120px, 15vh, 184px); left: 50%; transform: translateX(-50%) translateY(-8px);
  width: min(680px, 92vw); max-height: calc(100vh - clamp(120px, 15vh, 184px) - 32px); z-index: 401;
  background: var(--bone);
  border: 1px solid var(--color-border-subtle);
  border-radius: 3px;
  box-shadow: 0 24px 64px rgba(26, 26, 26, 0.18);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0s linear 0.2s;
}
.lda-search-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.lda-search-header { padding: 22px 24px; border-bottom: 1px solid var(--color-border-subtle); flex-shrink: 0; }
.lda-search-form { display: flex; align-items: center; gap: 12px; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; }
/* foco visible sin reintroducir caja (A11y · WCAG 2.4.7 · R2 Bordeaux) · shorthand = override inequívoco del base + fallback hex */
.lda-search-form:focus-within { border-bottom: 2px solid var(--bordeaux, #7A3245); padding-bottom: 9px; }
.lda-search-icon { color: var(--mid); display: flex; flex-shrink: 0; }
.lda-search-icon svg { stroke: currentColor; }
.lda-search-input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--lda-font-sans); font-size: var(--fs-20, 20px); font-weight: 400; letter-spacing: 0.01em;
  color: var(--ink); padding: 4px 0;
}
.lda-search-input::placeholder { color: var(--mid); }
.lda-search-cancel {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-family: var(--lda-font-sans); font-size: var(--fs-11, 11px); font-weight: 600;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid);
  min-height: 44px; padding: 0 4px;
}
.lda-search-cancel:hover { color: var(--ink); }
.lda-search-cancel:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.lda-search-results { padding: 20px 24px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lda-search-group-label {
  font-size: var(--fs-10, 10px); font-weight: 600; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--mid); margin: 0 0 14px;
}
/* Tendencias = lista editorial de productos (filas nombre + marca · spec search-result · NO chips) */
.lda-search-result {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 6px 6px;
  text-decoration: none; border-bottom: 1px solid var(--color-border-subtle);
  transition: background 0.15s ease;
}
.lda-search-result:last-child { border-bottom: none; }
.lda-search-result:hover { background: rgba(26, 26, 26, 0.03); }
.lda-search-result:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: -2px; }
.lda-search-result-name { font-family: var(--lda-font-sans); font-size: var(--fs-14, 14px); font-weight: 500; color: var(--ink); }
.lda-search-result-meta {
  flex-shrink: 0; font-family: var(--lda-font-sans); font-size: var(--fs-10, 10px); font-weight: 600;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--mid);
}
/* dos grupos: Colecciones (chevron) + Tendencias (marca) · separación clara que hace LEER el split por tipo */
.lda-search-group + .lda-search-group { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); }
.lda-search-chevron { flex-shrink: 0; color: var(--mid); display: flex; transition: transform 0.15s var(--ease-out), color 0.15s ease; }
.lda-search-chevron svg { stroke: currentColor; }
.lda-search-result--col:hover .lda-search-chevron { transform: translateX(3px); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .lda-search-overlay { transition: opacity 0.2s linear, visibility 0s; transform: translateX(-50%); }
  .lda-search-overlay.open { transform: translateX(-50%); }
  .lda-search-result--col:hover .lda-search-chevron { transform: none; }
}
/* END_SECTION:lda-header */

/* START_SECTION:lda-hero (INDEX:34) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición del porting) */
  .lda-hero.container { container-type: inline-size; }

  /* ─── HERO · layout ─── */
  .hero {
    width: var(--pw); position: relative;
    min-height: var(--section-viewport-h);
    overflow: hidden; background: var(--sand);
    touch-action: pan-y; overscroll-behavior: contain;
    display: flex; flex-direction: column;
  }
  .hero.section--cinema { justify-content: stretch; }
  .hero-track {
    display: flex; flex: 1;
    transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .hero-slide {
    min-width: var(--pw); flex: 1; position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 16px max(80px, calc(80px + env(safe-area-inset-bottom)));
  }

  /* Variantes de slide */
  .hero-slide[data-slide="1"] { background: linear-gradient(180deg, #2A2620 0%, #1A1815 100%); color: var(--bone); }
  .hero-slide[data-slide="2"] { background: linear-gradient(180deg, #E8E0D4 0%, #D9D0C4 100%); color: var(--ink); }
  .hero-slide[data-slide="3"] { background: var(--color-signature-dark); color: var(--bone); }

  /* Imagen full-bleed */
  .hero-slide-bg {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  }
  /* Scrim editorial — gradiente legibilidad sobre mitad inferior */
  .hero-slide[data-slide="1"] .hero-slide-bg::after,
  .hero-slide[data-slide="3"] .hero-slide-bg::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
    pointer-events: none;
  }
  .hero-slide[data-slide="2"] .hero-slide-bg::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(180deg, transparent 0%, rgba(250,248,243,0.4) 100%);
    pointer-events: none;
  }

  /* Contenido se eleva sobre bg + scrim */
  .hero-slide > .hero-h1,
  .hero-slide > .hero-tagline,
  .hero-slide > .hero-cta-row { position: relative; z-index: 2; }

  /* Eyebrow top-left · counter top-right */
  .hero-eyebrow {
    position: absolute; top: 32px; left: 16px; z-index: 5;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: inherit; opacity: 0.85;
  }
  .hero-counter {
    position: absolute; top: 32px; right: 16px;
    font-size: var(--fs-11); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; opacity: 0.65; z-index: 5;
    color: var(--bone); white-space: nowrap;
  }
  .hero-counter.dark-on-light { color: var(--ink); }

  /* Tipografía hero */
  .hero-h1 { display: block; margin-bottom: 12px; }
  .hero-h1-sans {
    display: block;
    font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.015em;
    line-height: 0.95;
  }
  /* Wordmark slide de marca · Josefin Sans 300 (fallback del wordmark, R12)
     Producción: sustituir por logo_v4_wordmark-light.svg */
  .hero-h1-wordmark {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-size: var(--fs-h2-edit); font-weight: 300; letter-spacing: 0.06em;
    line-height: 1.1;
  }
  .hero-h1-serif {
    display: block;
    font-family: var(--lda-font-serif);
    font-size: var(--fs-display-it); font-weight: 500; font-style: italic;
    letter-spacing: -0.01em; line-height: 1.0; margin-top: -2px;
  }
  .hero-tagline {
    font-size: var(--fs-16); font-weight: 400; line-height: 1.45;
    margin-bottom: 20px; opacity: 0.85; max-width: 280px;
  }
  .hero-cta-row { display: flex; align-items: center; gap: 16px; align-self: flex-start; }

  .hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 24px;
    background: var(--bone); color: var(--ink);
    text-decoration: none; border: none; cursor: pointer;
    font-size: var(--fs-13); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; min-height: 44px;
    transition: transform 0.2s ease-out, background-color 0.2s ease-out, color 0.2s ease-out;
    transform-origin: center;
  }
  .hero-slide[data-slide="2"] .hero-cta {
    background: var(--ink); color: var(--bone);
  }
  .hero-cta:hover,
  .hero-cta:active,
  .hero-cta:focus-visible { transform: scale(1.04); }

  .hero-cta-meta {
    font-size: var(--fs-11); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; opacity: 0.6;
  }

  /* Indicadores de slide · líneas horizontales editoriales */
  .hero-dots {
    position: absolute; bottom: 24px; left: 16px;
    display: flex; gap: 8px; z-index: 5;
  }
  .hero-dot-btn {
    background: none; border: none; padding: 12px 0;
    width: 32px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .hero-dot {
    width: 32px; height: 1px;
    background: rgba(250,248,243,0.3);
    transition: background-color 0.2s, height 0.2s;
  }
  .hero-dot.active { background: rgba(250,248,243,0.95); height: 2px; }
  .hero-dots.dark-on-light .hero-dot { background: rgba(26,26,26,0.2); }
  .hero-dots.dark-on-light .hero-dot.active { background: rgba(26,26,26,0.85); }

  /* text-wrap: balance en headlines hero (fix re-audit wireframe) */
  .hero-h1,
  .hero-h1-sans,
  .hero-h1-serif { text-wrap: balance; }

  @media (prefers-reduced-motion: reduce) {
    .hero-track { transition: none !important; }
    .hero-cta:hover,
    .hero-cta:active,
    .hero-cta:focus-visible { transform: none; }
  }

  /* ===== DESKTOP (>=990px) ===== */
  @media (min-width: 990px) {

    /* Full-bleed override: el hero rompe el max-width 1280px del sistema base */
    .lda-hero.container {
      max-width: 100vw;
      width: 100vw;
      margin-inline: calc(50% - 50vw);
      padding-inline: 0;
    }

    /* Altura cinematic desktop + ANCHO COMPLETO. El .hero base heredaba --pw (375px),
       lo que recortaba el slide de 100vw por overflow → solo se veía ~375px de fondo
       oscuro a la izquierda. Fix: el hero y el track llenan el container full-bleed. */
    .hero {
      min-height: min(100vh, 900px);
      width: 100%;
      max-width: none;
    }
    .hero-track { width: 100%; }

    /* Slide: fondo oscuro a TODO el ancho (heredado del data-slide); el contenido se
       confina a una columna izquierda editorial por max-width. SIN grid de 2 columnas
       (dejaba la mitad derecha vacía/clara cuando no hay imagen). La derecha es aire del
       propio fondo — reservada para la imagen de producto cuando exista (A9). */
    .hero-slide {
      width: 100vw;
      min-width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 8vw clamp(56px, 7vh, 88px) max(64px, 8vw);
    }

    /* Imagen (cuando exista) cubre el slide anclada a la derecha; sin imagen, el fondo
       oscuro del data-slide cubre el 100%. */
    .hero-slide-bg { position: absolute; inset: 0; z-index: 0; }
    .hero-slide-bg img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: right center;
    }

    /* Scrim horizontal — oscurece la izquierda para legibilidad, se desvanece a la derecha */
    .hero-slide[data-slide="1"] .hero-slide-bg::after,
    .hero-slide[data-slide="3"] .hero-slide-bg::after {
      top: 0; height: 100%;
      background: linear-gradient(90deg,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.15) 50%,
        transparent 78%);
    }
    .hero-slide[data-slide="2"] .hero-slide-bg::after {
      top: 0; height: 100%;
      background: linear-gradient(90deg,
        rgba(250,248,243,0.55) 0%,
        rgba(250,248,243,0.20) 50%,
        transparent 78%);
    }

    /* Contenido sobre el fondo · confinado a la columna izquierda por max-width */
    .hero-slide > * { position: relative; z-index: 2; }
    /* Eyebrow EN FLUJO en desktop (el top:32px/left:16px del modo absoluto móvil lo solapaba con el heading):
       reset de offsets + separación editorial real sobre el H1 (fix del solape -16px). */
    .hero-eyebrow {
      position: relative; top: 0; left: 0;
      margin-bottom: 16px; opacity: 0.7;
    }
    .hero-h1 { margin-bottom: 18px; max-width: 620px; }
    .hero-tagline { max-width: 420px; font-size: var(--fs-16); margin-bottom: 30px; }

    /* Counter — reposicionar a esquina inferior derecha (lejos de columna de texto) */
    .hero-counter {
      top: auto;
      right: max(48px, 5vw);
      bottom: clamp(56px, 7vh, 88px);
      /* posición absoluta heredada; ajustamos coordenadas */
      position: absolute;
    }

    /* Dots — esquina inferior izquierda, alineados con el margen editorial */
    .hero-dots {
      left: max(64px, 8vw);
      bottom: clamp(56px, 7vh, 88px);
    }

    /* Tipografía: consumimos los techos del sistema base (ya subidos +33% en lda-overrides.css v4.1).
       Solo añadimos refinamientos de composición que el techo base no cubre. */
    .hero-h1-sans {
      line-height: 0.92;
    }
    .hero-h1-serif {
      line-height: 0.98;
      margin-top: 0;
    }
    .hero-h1-wordmark {
      font-size: var(--fs-h2-edit);
      letter-spacing: 0.08em;
    }

    /* CTA desktop — sin cambio de tamaño (48px ya cumple ≥44px a11y) */
    .hero-cta {
      height: 52px;
      padding: 0 32px;
    }

  }
/* END_SECTION:lda-hero */

/* START_SECTION:lda-imprescindibles (INDEX:35) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición) */
  .lda-imprescindibles.container { container-type: inline-size; }

  /* ── SECTION SHELL ── */
  .imprescindibles {
    padding: var(--space-section) 16px 0;
    background: var(--bone);
  }

  /* ── SECTION HEAD ── */
  .imprescindibles .section-head { padding: 0; margin-bottom: 24px; }
  .section-eyebrow {
    display: block;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    margin-bottom: 8px;
  }
  .section-h2 {
    font-size: var(--fs-h2); font-weight: 500; letter-spacing: var(--track-default);
    text-transform: uppercase; color: var(--ink); line-height: 1.15;
    margin-bottom: 6px;
  }

  /* ── TABS · underline ── */
  .tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(26,26,26,0.12);
    margin: 0 -16px 24px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    background: none; border: none; padding: 12px 0 14px;
    margin-right: 24px;
    font-size: var(--fs-11); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    cursor: pointer; position: relative;
    white-space: nowrap; min-height: 44px;
  }
  .tab:last-child { margin-right: 0; }
  .tab.active { color: var(--ink); font-weight: 600; }
  .tab.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 1px; background: var(--ink);
  }

  /* ── PRODUCTS CAROUSEL ── */
  .products-carousel {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 12px;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .products-carousel::-webkit-scrollbar { display: none; }
  .product-card {
    min-width: clamp(200px, 58cqw, 280px); max-width: clamp(200px, 58cqw, 280px);
    scroll-snap-align: start;
  }
  .products-carousel .product-card:last-child { scroll-snap-align: end; }

  /* ── PRODUCT CARD INTERNALS ── */
  .product-img-placeholder {
    width: 100%; aspect-ratio: 1/1;
    background: var(--sand, #EDE8DF);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }
  .product-img-link { display: block; }
  .product-brand {
    font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    margin-bottom: 4px;
  }
  .product-family {
    font-size: var(--fs-13); font-weight: 400; color: var(--mid);
    line-height: 1.4; margin-bottom: 6px;
  }

  /* ── RATING ── */
  .product-rating {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 14px;
    font-size: var(--fs-11); color: var(--mid);
    letter-spacing: 0.01em;
  }
  .product-rating-star {
    width: 11px; height: 11px;
    fill: var(--ink); flex-shrink: 0;
  }
  .product-rating-score {
    font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  /* ── ADD BTN (outline secundario) ── */
  .product-add-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px;
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: 2px;
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }
  .product-add-btn:hover { background: var(--ink); color: var(--bone); }

  /* ── DOTS ── */
  .products-dots {
    display: flex; justify-content: space-between;
    gap: 6px;
    margin-top: 0;
  }
  .products-dot-btn {
    background: none; border: none; padding: 12px 0;
    flex: 1; max-width: 48px;
    height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: manipulation;
  }
  .products-dot { width: 100%; height: 1px; background: rgba(26,26,26,0.18); transition: background-color 0.2s, height 0.2s; }
  .products-dot.active { background: rgba(26,26,26,0.85); height: 2px; }

  /* ── CTA WRAP ── */
  .imprescindibles-cta-wrap {
    display: flex; justify-content: center; align-items: center;
    padding: 12px 0 20px;
  }
  .imprescindibles-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 12px 0;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    text-decoration: none;
    min-height: 44px; cursor: pointer; touch-action: manipulation;
  }

  /* ── CTA microlift (Grupo A) ── */
  .imprescindibles-cta:hover .cta-label,
  .imprescindibles-cta:active .cta-label,
  .imprescindibles-cta:focus-visible .cta-label { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) {
    .imprescindibles-cta:hover .cta-label,
    .imprescindibles-cta:active .cta-label,
    .imprescindibles-cta:focus-visible .cta-label { transform: none; }
  }

  /* ===== DESKTOP (>=990px) =====
     Consumir sistema base lda-overrides.css v4.1:
       · .container → max-width 1280px centrado (ya activo)
       · --fs-h2-edit, --fs-display → techos desktop (ya activos vía D2)
       · .lda-carousel-arrows / .lda-carousel-arrow → flechas laterales (ya activas vía D4)
     Esta capa SOLO añade comportamiento de layout desktop; base mobile intocable.
  ===== */
  @media (min-width: 990px) {

    /* ── Shell · quitar bleed lateral mobile · hereda respiración 48px del .container ── */
    .imprescindibles {
      padding-left: 0;
      padding-right: 0;
    }

    /* ── Head · más margen inferior con el espacio ganado ── */
    .imprescindibles .section-head { margin-bottom: 32px; }

    /* ── Tabs · fila horizontal, sin scroll, gap editorial ── */
    .imprescindibles .tabs {
      /* Quitar bleed negativo mobile (compensaba el 16px del shell) */
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      /* Sin overflow-x scroll; caben las 3 en una línea en ≥990px */
      overflow-x: visible;
      gap: 0;
    }
    .imprescindibles .tab {
      /* Ampliar separación entre tabs en desktop */
      margin-right: 36px;
      font-size: var(--fs-13);   /* escala leve → legibilidad en monitor */
    }

    /* ── Carousel track · quitar bleed · fichas grandes · habilitar position para flechas ── */
    .imprescindibles .products-carousel {
      /* Quitar bleed lateral mobile */
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
      /* Fichas más grandes: cada tarjeta ~320px mínimo, máx natural */
      gap: 20px;
      /* position:relative permite que .lda-carousel-arrows se posicione sobre el track */
      position: relative;
    }

    /* ── Fichas · mayor anchura mínima para desktop ── */
    .imprescindibles .product-card {
      /* 320px mínimo · techo clamp a ~28% del viewport para que entren 3,5 fichas ── */
      min-width: clamp(320px, 28cqw, 380px);
      max-width: clamp(320px, 28cqw, 380px);
    }

    /* ── Imagen de producto · más generosa en desktop ── */
    .imprescindibles .product-img-placeholder {
      margin-bottom: 16px;
    }

    /* ── Jerarquía nombre+familia+precio · algo más de respiración ── */
    .imprescindibles .product-brand { margin-bottom: 6px; }
    .imprescindibles .product-family { margin-bottom: 10px; }
    .imprescindibles .product-rating { margin-bottom: 18px; }

    /* ── Dots · ocultos en desktop: las flechas cubren la navegación ── */
    .imprescindibles .products-dots { display: none; }

    /* ── CTA wrap · alineación izquierda en desktop (editorial, no centrado) ── */
    .imprescindibles .imprescindibles-cta-wrap {
      justify-content: flex-start;
      padding-top: 16px;
      padding-bottom: 28px;
    }

  } /* fin @media (min-width: 990px) — imprescindibles */
/* END_SECTION:lda-imprescindibles */

/* START_SECTION:lda-newsletter (INDEX:36) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición del porting) */
  .lda-newsletter.container { container-type: inline-size; }

  .newsletter {
    padding: 0 16px max(var(--space-section), calc(16px + var(--safe-bottom)));
    background: var(--bone);
    text-align: center;
  }
  .newsletter-eyebrow {
    display: block;
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    margin-bottom: 16px;
  }
  .newsletter-title {
    font-family: var(--lda-font-serif);
    font-size: var(--fs-h2-edit-sm); font-weight: 500; font-style: italic;
    color: var(--ink); line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 auto 14px;
    max-width: 320px;
  }
  .newsletter-body {
    font-size: var(--fs-14); font-weight: 400; color: var(--mid);
    line-height: 1.55;
    max-width: 340px;
    margin: 0 auto 28px;
  }
  .newsletter-form {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 360px;
    margin: 0 auto;
    border-bottom: 1px solid var(--ink);
    padding: 0 14px 6px;
  }
  .newsletter-input {
    flex: 1; min-width: 0;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-16); font-weight: 400;
    color: var(--ink);
  }
  .newsletter-input::placeholder { color: var(--mid); opacity: 0.7; }
  .newsletter-submit {
    background: none;
    border: none;
    padding: 12px 0;
    font-family: var(--lda-font-sans);
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    min-height: 44px;
    transition: opacity 0.2s;
  }
  .newsletter-submit:hover { opacity: 0.65; }
  @media (prefers-reduced-motion: reduce) {
    .newsletter-submit { transition: none; }
  }
  .newsletter-fine {
    font-size: var(--fs-10); font-weight: 400;
    color: var(--color-text-disabled);
    line-height: 1.4;
    margin: 16px auto 0;
    max-width: 280px;
  }
  .newsletter-fine a {
    color: var(--mid);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ===== DESKTOP (>=990px) ===== */
  /* Directiva: form centrado, input underline más ancho, más aire vertical.
     Consume sistema base lda-overrides.css v4.1:
     - .container ya pasa a max-width 1280px centrado (no redeclarado)
     - --space-section tiene techo mayor en desktop (no redeclarado)
     - --fs-h2-edit ya sube +33% en desktop via sistema base (no redeclarado)
  */
  @media (min-width: 990px) {
    .newsletter {
      /* Aire vertical extra: top padding equivalente a --space-section para separar del bloque FAQ */
      padding-top: var(--space-section);
    }

    .newsletter-title {
      /* Respira más en ancho: de 320px → 480px; la escala tipográfica ya sube por sistema base */
      max-width: 480px;
      margin-bottom: 20px;
    }

    .newsletter-body {
      /* Más aire bajo el copy descriptivo antes del form */
      max-width: 420px;
      margin-bottom: 40px;
    }

    .newsletter-form {
      /* Input underline más ancho en desktop */
      max-width: 520px;
      padding: 0 20px 8px;
    }

    .newsletter-fine {
      /* Fine print también respira */
      max-width: 380px;
      margin-top: 20px;
    }
  }
/* END_SECTION:lda-newsletter */

/* START_SECTION:lda-product (INDEX:37) */
/* ════════════════════════════════════════════════════════════════════════════
   SECTION · lda-product · CSS deduplicado de TODOS los organisms
   tokens-only (R11) · prefijo lda- (KI-10, sin colisión con Dawn) · sin :root.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Raíz · R5: container-type ancla la rampa --fs-* (clamp+cqw) ───────────── */
.lda-product {
  container-type: inline-size;
  --pw: 100cqw;
}

/* ════════════════ pdp-gallery ════════════════ */
/* Breadcrumb (atom) · R15 navegación = underline, sin fill */
.lda-breadcrumb {
  padding: var(--space-xs) var(--space-sm) 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-11);
  letter-spacing: var(--track-default);
  color: var(--color-text-disabled);
}
.lda-breadcrumb a { color: var(--mid); text-decoration: none; }
.lda-breadcrumb a:hover { text-decoration: underline; }
.lda-breadcrumb a:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }

/* Galería · ratio 1:1 (boceto fundador) · R13 banda (no escena) */
.lda-gallery {
  width: 100%; aspect-ratio: 1 / 1;
  position: relative; overflow: clip;     /* R9: clip */
  background: var(--sand);
  touch-action: pan-y; user-select: none;
}
.lda-gallery-track {
  display: flex; height: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.lda-gallery-slide {
  position: relative;
  min-width: var(--pw); height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--space-2xs);
  color: rgba(250, 248, 243, 0.45);
  font-size: var(--fs-11); letter-spacing: var(--track-eyebrow); text-transform: uppercase;
}
.lda-gallery-slide svg { opacity: 0.42; }
.lda-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tap-to-expand · botón full-cover ≥44px (R8) */
.lda-gallery-open {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  min-width: 44px; min-height: 44px;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: zoom-in;
  touch-action: manipulation;
}
.lda-gallery-open:focus-visible { outline: 2px solid var(--bone); outline-offset: -4px; }

/* Placeholders cinema · darks derivados de obsidian (NUNCA negro puro) */
.lda-gal-1 { background: linear-gradient(165deg, #2A2620 0%, #1A1510 100%); }
.lda-gal-2 { background: linear-gradient(165deg, #322A22 0%, #1C1712 100%); }
.lda-gal-3 { background: linear-gradient(165deg, #241F1A 0%, #15110D 100%); }
.lda-gal-4 { background: linear-gradient(165deg, #2E2820 0%, #1A150F 100%); }

/* Counter (atom) */
.lda-gallery-counter {
  position: absolute; top: 32px; right: 16px; z-index: 5;
  font-size: var(--fs-11); font-weight: 500;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--bone); opacity: 0.7;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Dots (atom) · líneas editoriales */
.lda-gallery-dots {
  position: absolute; bottom: var(--space-sm);
  left: var(--space-sm); right: var(--space-sm);
  display: flex; justify-content: space-between; gap: 6px; z-index: 5;
}
.lda-gallery-dot-btn {
  background: none; border: none; flex: 1; height: 44px;     /* R8 */
  display: flex; align-items: center; padding: 12px 0;
  cursor: pointer; touch-action: manipulation;
}
.lda-gallery-dot-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.lda-gallery-dot {
  display: block; width: 100%; height: 1px;
  background: rgba(250, 248, 243, 0.30);
  transition: background-color 0.2s, height 0.2s;
}
.lda-gallery-dot.active { background: rgba(250, 248, 243, 0.95); height: 2px; }

/* ════════════════ product-identity ════════════════ */
.lda-identity { padding: var(--space-sm) var(--space-sm) 0; }
.lda-identity__brand {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--space-3xs);
}
.lda-identity__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
/* H1 · único de la PDP · Manrope (R1: serif reservada) */
.lda-identity__h1 {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--track-default);
  line-height: 1.15;
  margin: 0 0 var(--space-3xs);
}
.lda-identity__actions {
  display: flex;
  gap: var(--space-2xs);
  flex-shrink: 0;
  margin-top: 2px;
}
.lda-icon-action {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  position: relative;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.lda-icon-action::after {           /* tap-target ≥44px sobre 40px (R8) */
  content: '';
  position: absolute;
  inset: -2px;
}
.lda-icon-action svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  transition: transform 0.2s var(--ease-out);
}
.lda-icon-action:hover svg { transform: scale(1.08); }
.lda-icon-action:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; }
/* Estado guardado · Bordeaux ornamento (R2), no fill funcional */
.lda-icon-action.saved svg {
  fill: var(--bordeaux);
  stroke: var(--bordeaux);
  animation: lda-heart-pop 0.32s ease-out;
}
.lda-icon-action[disabled],
.lda-icon-action[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}
@keyframes lda-heart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.lda-identity__olfactory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xs);
}
.lda-identity__familia {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--mid);
  letter-spacing: 0.015em;
}
/* Chips de acordes · utility (R15: bone + border, NO fill bordeaux R2/R14) */
.lda-identity__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.lda-chip {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: 0.015em;
  color: var(--mid);
  background: var(--bone);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-btn); /* R15 · cuadrado, no pill */
  padding: 4px 10px;
  white-space: nowrap;
}
.lda-identity__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}
.lda-identity__price-amount {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-20);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--track-price);
  font-variant-numeric: tabular-nums;
}
.lda-identity__price-compare {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--color-text-disabled);
  font-variant-numeric: tabular-nums;
}
.lda-identity__price-compare[hidden] { display: none; }

/* ════════════════ buy-block ════════════════ */
.lda-buy-block {
  padding: 0 var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(26, 26, 26, 0.07);   /* alpha de tinta · R11 */
}
.lda-buy-block .lda-buy-label {
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--space-2xs);
}
.lda-buy-block .lda-size-pills {
  display: flex;
  gap: var(--space-2xs);
  margin-top: 20px;
  margin-bottom: var(--space-xs);
}
.lda-buy-block .lda-size-pill {
  padding: 0 var(--space-xs);
  border: 1px solid rgba(26, 26, 26, 0.12);          /* alpha de tinta · R11 */
  border-radius: var(--radius-btn);
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--mid);
  background: var(--bone);
  height: 34px;
  display: flex;
  align-items: center;
  letter-spacing: var(--track-nav);
  white-space: nowrap;
  touch-action: manipulation;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background-color 0.15s var(--ease-out);
}
.lda-buy-block .lda-size-pill::after {       /* área táctil ≥44px (R8) */
  content: '';
  position: absolute;
  inset: -6px;
}
.lda-buy-block .lda-size-pill:hover { border-color: var(--mid); }
/* R14 · pill activa = fill inverso (bg ink · texto bone) */
.lda-buy-block .lda-size-pill.is-active {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
  font-weight: 500;
}
.lda-buy-block .lda-size-pill[data-unavailable] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* Badge "Recomendado" · Bordeaux ornamento ≤3% (R2) */
.lda-buy-block .lda-pill-flag {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-8);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--bordeaux);
  white-space: nowrap;
  pointer-events: none;
}
.lda-buy-block .lda-buy-price {
  display: block;
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--track-price);
  white-space: nowrap;
  margin-bottom: var(--space-2xs);
  transition: opacity 0.15s ease;
}
.lda-buy-block .lda-buy-price.is-changing { opacity: 0; }
.lda-buy-block .lda-format-hint {
  font-size: var(--fs-12);
  color: var(--mid);
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  min-height: 1.4em;                                 /* reserva anti-CLS */
}
.lda-buy-block .lda-pdp-stock-notice {
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-xs);
}
.lda-buy-block .lda-pdp-stock-notice[hidden] { display: none; }
/* CTA primario · fill Obsidian (R15) · microlift sin inversión cromática */
.lda-buy-block .lda-cta-primary,
.lda-buy-block .lda-btn-cta-primary {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 52px;
  justify-content: center;
  background: var(--ink);
  color: var(--bone);
  border: none;
  border-radius: var(--radius-btn);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
.lda-buy-block .lda-cta-primary:hover,
.lda-buy-block .lda-btn-cta-primary:hover {
  transform: scale(1.04);
  background: var(--ink);
  color: var(--bone);
}
.lda-buy-block .lda-cta-primary:focus-visible,
.lda-buy-block .lda-btn-cta-primary:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}
.lda-buy-block .lda-cta-primary[disabled],
.lda-buy-block .lda-btn-cta-primary[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
/* Trust inline · autenticidad + riesgo (Judge 1/3) */
.lda-buy-block .lda-buyblock-trust-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-xs) 0 0;
  font-size: var(--fs-13);
  color: var(--mid);
  line-height: 1.4;
}
.lda-buy-block .lda-buyblock-trust-row svg { flex-shrink: 0; margin-top: 1px; }
.lda-buy-block .lda-buyblock-trust-row strong { color: var(--ink); font-weight: 600; }
.lda-buy-block .lda-buyblock-trust-row a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lda-buy-block .lda-buyblock-urgency {
  font-size: var(--fs-12);
  color: var(--mid);
  padding: var(--space-2xs) 0 0;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ════════════════ lectura-block ════════════════ */
.lda-lectura-block {
  container-type: inline-size;            /* R5 · ancla la rampa --fs-* localmente */
  --pw: 100cqw;
  padding-block: var(--space-section-tight);  /* R7/R13 · macro entre secciones */
}
.lda-lectura-block .lda-lectura-editorial { padding-inline: var(--space-sm); }
.lda-lectura-block .lda-lectura-eyebrow {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--space-2xs);
}
.lda-lectura-block .lda-lectura-text {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}
.lda-lectura-block .lda-lectura-text p { margin: 0 0 var(--space-xs); }
.lda-lectura-block .lda-lectura-text p:last-child { margin-bottom: 0; }
.lda-lectura-block .lda-lectura-text strong { font-weight: 500; }   /* R1 voz editorial */
/* divider-thick (atom) */
.lda-lectura-block .lda-divider-thick {
  --lda-divider-thick-color: rgba(211, 192, 172, 0.20);
  height: 8px;
  background: var(--lda-divider-thick-color);
  margin: var(--space-md) 0 0;
}
/* pdp-accordion · <details> nativo · zero JS */
.lda-lectura-block .lda-acordeones {
  padding: var(--space-md) var(--space-sm) 0;
  overflow: clip;                         /* R9 */
}
.lda-lectura-block .lda-acordeones details { border-top: 1px solid var(--color-border-subtle); }
.lda-lectura-block .lda-acordeones details:last-of-type { border-bottom: 1px solid var(--color-border-subtle); }
.lda-lectura-block .lda-acordeones summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  min-height: 48px;                       /* R8 */
}
.lda-lectura-block .lda-acordeones summary::-webkit-details-marker { display: none; }
.lda-lectura-block .lda-accordion-title {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}
.lda-lectura-block .lda-accordion-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: transparent;
  border-radius: 0; /* R15 · glifo "+/×" sin caja circular */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  color: var(--mid);                      /* "+" cerrado · NO Bordeaux funcional (R2) */
  pointer-events: none;
  transition:
    transform 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    background 0.15s;
}
.lda-lectura-block .lda-acordeones details[open] summary .lda-accordion-icon {
  transform: rotate(45deg);
  background: transparent;
  color: var(--bordeaux);                 /* glifo "×" Bordeaux ornamental (R2) */
}
.lda-lectura-block .lda-accordion-body { padding-bottom: var(--space-sm); }
.lda-lectura-block .lda-probar-text { font-family: var(--lda-font-sans); font-size: var(--fs-13); font-weight: 400; color: var(--mid); line-height: 1.6; margin: 0; }
.lda-lectura-block .lda-probar-text strong { color: var(--ink); font-weight: 600; }
.lda-lectura-block .lda-notes-pyramid { display: block; }
.lda-lectura-block .lda-notes-tier { margin-bottom: var(--space-xs); }
.lda-lectura-block .lda-notes-tier-label {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-9);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--space-2xs);
}
.lda-lectura-block .lda-nota-chips { display: flex; gap: var(--space-2xs); flex-wrap: wrap; }
.lda-lectura-block .lda-nota-chip {
  padding: 5px 10px;
  border-radius: var(--radius-btn, 6px);
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--ink);
}
.lda-lectura-block .lda-nota-chip.lda-salida  { background: color-mix(in srgb, var(--color-bg-surface) 25%, transparent); }
.lda-lectura-block .lda-nota-chip.lda-corazon { background: color-mix(in srgb, var(--color-bg-surface) 40%, transparent); }
.lda-lectura-block .lda-nota-chip.lda-base    { background: color-mix(in srgb, var(--color-bg-surface) 60%, transparent); }
/* pull-quote sensorial · Cormorant italic · borde Bordeaux (R1 voz serif + R2 ornamento) */
.lda-lectura-block .lda-sensorial-block {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-left: 2px solid var(--bordeaux);
}
.lda-lectura-block .lda-sensorial-label {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-9);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--space-2xs);
}
.lda-lectura-block .lda-sensorial-text {
  font-family: var(--lda-font-serif);     /* R1 · una de las ≤3 voces Cormorant */
  font-size: var(--fs-18);
  font-weight: 500;
  font-style: italic;
  color: var(--mid);
  line-height: 1.45;
  letter-spacing: 0.005em;
  margin: 0;
}
.lda-lectura-block .lda-uso-list { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.lda-lectura-block .lda-uso-item {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
  font-family: var(--lda-font-sans);
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--mid);
  line-height: 1.5;
}
.lda-lectura-block .lda-uso-item:last-child { margin-bottom: 0; }
.lda-lectura-block .lda-uso-bullet {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mid);
  margin-top: 8px;
  flex-shrink: 0;
}
.lda-lectura-block .lda-uso-cuando {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--mid);
  line-height: 1.6;
  margin: var(--space-xs) 0 0;
}
.lda-lectura-block .lda-inci-text {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-13);
  font-weight: 400;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: var(--space-2xs);
}
.lda-lectura-block .lda-inci-note {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--color-text-disabled);
  line-height: 1.5;
  margin: 0;
}

/* ════════════════ metrics · "Cómo se lleva" ════════════════ */
.lda-metrics {
  container-type: inline-size;           /* R5 */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
}
/* métricas MOVIDAS al buy-col (Alonso 2026-06-20) · contexto columna: sin padding-inline de sección, separador superior como la fila de confianza · gana (0,2,0) al max-width:760/margin:auto de sección · aplica móvil+desktop (ya viven aquí siempre) */
.lda-pdp-buycol .lda-metrics {
  max-width: none;
  margin: var(--space-md) 0 0;
  padding: var(--space-md) 0 0;
  border-top: 1px solid var(--color-border-subtle);
}
/* 1-col apilado (Alonso 2026-06-20): Duración sobre Proyección, barras a ancho completo = medidores más legibles + suma altura hacia alinear con la galería */
.lda-pdp-buycol .lda-metrics__grid { grid-template-columns: 1fr; gap: var(--space-sm); }
/* medidor (Alonso 2026-06-21): label + VALOR en el MISMO renglón (valor pegado a la etiqueta, no colgando al extremo derecho → no se desliga, mantiene la jerarquía label→valor como unidad) · barra debajo a ancho completo · VECTORES (grid, sin px) */
.lda-pdp-buycol .lda-metric { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--space-2xs); row-gap: var(--space-2xs); }
.lda-pdp-buycol .lda-metric__label { grid-column: 1; grid-row: 1; }
.lda-pdp-buycol .lda-metric__val { grid-column: 2; grid-row: 1; justify-self: start; }   /* valor justo a la derecha del label, mismo renglón */
.lda-pdp-buycol .lda-metric__bar { grid-column: 1 / -1; grid-row: 2; width: 100%; }       /* barra a ancho completo debajo (ya no reserva hueco para el valor) */
.lda-metrics__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.lda-metric { display: flex; flex-direction: column; gap: var(--space-2xs); }
.lda-metric__label {
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
}
.lda-metric__bar { display: flex; gap: var(--space-3xs); }   /* token (= 4px), no px crudo · auditoría 2026-06-20 */
.lda-metric__seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(26, 26, 26, 0.10);    /* tinta 10% · apagado */
}
/* Segmento activo = INK/Obsidian (Alonso 2026-06-21): medidor branded con el "relleno" del sistema (= CTA + pastilla activa). Bisque se lavaba sobre el crema. Bordeaux DESCARTADO: rompe R2 (ornamento de firma ≤5%, jamás relleno funcional) → negro es la opción branded que NO viola la regla de color. */
.lda-metric__seg.is-on { background: var(--ink); }
.lda-metric__val { font-family: var(--lda-font-sans); font-size: var(--fs-13); color: var(--ink); }
.lda-metric-tagrow { display: flex; align-items: flex-start; gap: var(--space-sm); }
.lda-metric-tagkey {
  flex: 0 0 72px;
  width: 72px;
  padding-top: 4px;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--mid);
}
.lda-metric-tagchips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.lda-metric-chip {
  padding: 4px 10px;
  border-radius: var(--radius-btn, 2px);   /* fallback recto (era 999px = riesgo círculo · R15) · auditoría 2026-06-20 */
  background: rgba(211, 192, 172, 0.30); /* Bisque 30% */
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  color: var(--ink);
}

/* ════════════════ sticky-bar (fixed) ════════════════ */
.lda-sticky-wrap { overflow: clip; }     /* R9 · contenedor de fixed */
.lda-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--pw);
  max-width: 100%;
  background: rgba(250, 248, 243, 0.98); /* --bone @98% · alpha de marca (excepción R11) */
  border-top: 1px solid rgba(26, 26, 26, 0.08); /* --ink @8% (excepción R11) */
  padding: var(--space-xs) var(--space-sm);
  padding-bottom: max(var(--space-xs), calc(var(--space-2xs) + var(--safe-bottom)));
  z-index: 200;
}
.lda-sticky-bar[hidden] { display: none; }
.lda-sticky-bar.lda-is-visible { display: block; }
.lda-sticky-bar .lda-sticky-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}
.lda-sticky-bar .lda-sticky-meta-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lda-sticky-bar .lda-sticky-name {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--mid);
  letter-spacing: var(--track-nav);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lda-sticky-bar .lda-sticky-sub {
  font-size: var(--fs-11);
  font-weight: 400;
  color: var(--color-text-disabled);
  letter-spacing: var(--track-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Precio · override de contexto del atom buy-price dentro de la barra */
.lda-sticky-bar .lda-buy-price.lda-sticky-price {
  font-size: var(--fs-18);
  font-weight: 500;
  margin-bottom: 0;
  flex-shrink: 0;
}
.lda-sticky-bar .lda-sticky-form { margin: 0; }
/* CTA · fill Obsidian (R15) full-width · alto 48px (R8) */
.lda-sticky-bar .lda-cta-primary.lda-sticky-cta {
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  justify-content: center;
  background: var(--ink);
  color: var(--bone);
  border: none;
  border-radius: var(--radius-btn);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: var(--track-cta);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}
.lda-sticky-bar .lda-cta-primary.lda-sticky-cta:hover { transform: scale(1.02); background: var(--ink); color: var(--bone); }
.lda-sticky-bar .lda-cta-primary.lda-sticky-cta:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.lda-sticky-bar .lda-cta-primary.lda-sticky-cta[disabled] { opacity: 0.35; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .lda-sticky-bar {
    transition: transform 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
                opacity 0.28s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  }
}

/* ════════════════ pdp-lightbox (overlay) ════════════════ */
.lda-lightbox {
  --lda-lb-safe-top: var(--safe-top, env(safe-area-inset-top, 0px));
  --lda-lb-safe-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);        /* scrim dark situacional (sin token) */
  overflow: clip;                         /* R9 */
  touch-action: manipulation;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.lda-lightbox[hidden] { display: none; }
.lda-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}
.lda-lightbox__counter {
  position: absolute;
  top: calc(var(--space-md) + var(--lda-lb-safe-top));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-11);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}
.lda-lightbox__close {
  position: absolute;
  top: calc(var(--space-md) + var(--lda-lb-safe-top));
  right: var(--space-sm);
  width: 44px;                            /* R8 */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-btn); /* R15 · cuadrado, no círculo */
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--lda-font-sans);
  font-size: var(--fs-22);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lda-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
}
.lda-lightbox__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.lda-lightbox__frame {
  width: var(--pw);
  max-width: calc(100vw - (var(--space-md) * 2));
  aspect-ratio: 1 / 1;
  overflow: clip;                         /* R9 */
}
/* Encaje del slide clonado dentro del frame (el JS clona .lda-gallery-slide) */
.lda-lightbox__frame .lda-gallery-slide {
  width: 100%;
  height: 100%;
  min-width: 0;                           /* anula min-width:var(--pw) del slide */
  background: rgba(211, 192, 172, 0.12);
}
.lda-lightbox__frame .lda-gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lda-lightbox__hint {
  position: absolute;
  bottom: calc(var(--space-md) + var(--lda-lb-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--lda-font-sans);
  font-size: var(--fs-10);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

/* badge best-seller · oculto en móvil (v6), visible en desktop · tags/size-line/section-links ELIMINADOS (CSS muerto sin markup · auditoría 2026-06-20) */
.lda-pdp-bestseller { display: none; }
.lda-pdp-trust2 { display: none; }
.lda-pdp-meta { display: none; }
.lda-pdp-rating { display: none; } /* placeholder de valoración · desktop-only (móvil v6 congelado) */

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP ≥990 · hero 2-col (galería sticky ~55 / compra ~45) + editorial abajo.
   Principios Amouage/PdM (no clon · premium cálido, no lujo frío): buy-block agrupado
   arriba, justificación debajo, aire lateral, 1 solo CTA sólido.
   KI-04: .lda-product → container-type:normal libera el sticky; la rampa --fs-* se
   re-ancla en .lda-pdp-buycol (hermana). KI-12: header real 132px. Móvil <990 intacto.
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 990px) {
  /* ── Shell centrado · grid-12 backbone (no full-bleed) ── */
  .lda-product {
    container-type: normal;                 /* KI-04 · raíz no-container libera los sticky descendientes */
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: clamp(24px, 3.5vw, 48px);
    padding-top: 132px;                      /* KI-12 · offset del header fijo (132px) */
  }
  .lda-breadcrumb { padding: var(--space-sm) 0 var(--space-2xs); } /* = colección desktop (16px 0 8px) */

  /* ── HERO · grid-12 · galería 7 cols (1/8) · compra 5 cols (8/13) ── */
  .lda-pdp-hero {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--gutter);                      /* canalón compartido → todas las zonas alinean a la misma columna */
    align-items: start;
    margin-bottom: var(--space-lg);
  }

  /* ── Galería · columna izquierda · APILADA cinemática (F1 grande + 2-up), NO sticky ── */
  .lda-pdp-gallerycol { grid-column: 1 / 8; }
  .lda-pdp-gallerycol .lda-gallery {
    aspect-ratio: auto;                      /* deja de ser un único frame 1:1 (mata el clip del carrusel) */
    overflow: visible;
    background: none;
    max-width: none;
  }
  /* des-carruselar: el JS fija width/min-width/transform inline → !important para ganarle (uso acotado) */
  .lda-pdp-gallerycol .lda-gallery-track {
    display: grid !important;
    grid-template-columns: 1fr 1fr;          /* 2-up */
    gap: var(--gutter);
    width: auto !important;
    transform: none !important;
    transition: none !important;
  }
  .lda-pdp-gallerycol .lda-gallery-slide {
    width: auto !important;
    min-width: 0 !important;
    height: auto;
    aspect-ratio: 1 / 1;                     /* primitiva de forma */
  }
  .lda-pdp-gallerycol .lda-gallery-slide img { aspect-ratio: 1 / 1; }
  /* F1 = primer frame, grande, ocupa las 2 sub-columnas · objeto limpio sobre sand (nota fundador: ruido visual) */
  .lda-pdp-gallerycol .lda-gallery-slide:first-child {
    grid-column: 1 / 3;
    background: var(--sand);
  }
  .lda-pdp-gallerycol .lda-gallery-slide:first-child img { object-fit: contain; padding: var(--space-lg); }
  /* HUD de carrusel: fuera en desktop (sin carrusel) */
  .lda-pdp-gallerycol .lda-gallery-counter,
  .lda-pdp-gallerycol .lda-gallery-dots { display: none; }
  /* Best Seller · badge arriba-izquierda sobre la ficha (estilo Initio) · R15 cuadrado, sin fill bordeaux */
  .lda-pdp-bestseller {
    display: inline-block;
    position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 6;
    font-family: var(--lda-font-sans); font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink);
    background: var(--bone); border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-btn); padding: 4px 8px;
    pointer-events: none;                    /* no bloquea el botón de ampliar de F1 */
  }

  /* ── Compra · columna derecha · STICKY (KI-04: container-type:normal aquí; --fs-* se re-ancla en el inner) ── */
  .lda-pdp-buycol {
    grid-column: 8 / 13;
    container-type: normal;
    position: sticky;
    top: calc(132px + var(--space-md));
    align-self: start;
  }
  .lda-pdp-buycol-inner {
    container-type: inline-size;             /* re-ancla la rampa --fs-* (cqw) sin tocar el sticky del padre */
    --pw: 100cqw;
    max-width: none;                         /* NUDO #2 cerrado-fino: llena el carril (void=0) · el tipo NO se re-infla porque los coef cqw de nombre/kicker se bajaron (≈/1.24); el apoyo --fs-* sube hacia los clamp-max (rango referencia ~16, intencional) */
  }
  /* like/compartir · desktop: fuera del flujo del title-row → top-right del bloque identidad (libera el nombre a ancho completo) · DOM intacto = móvil v6 sin tocar (Alonso 2026-06-20) */
  .lda-pdp-buycol .lda-identity { position: relative; padding-top: 0; } /* #2 · sin padding-top (base 635 = 16px) → LATTAFA alinea con el top del frame de galería; el "pequeño margen" lo da el leading del kicker (Alonso 2026-06-20) */
  .lda-pdp-buycol .lda-identity__actions { position: absolute; top: 0; right: 0; margin-top: 0; }

  .lda-pdp-buycol .lda-identity,
  .lda-pdp-buycol .lda-buy-block { padding-inline: 0; }
  .lda-pdp-buycol .lda-buy-block { border-bottom: none; padding-top: var(--space-md); } /* separa la zona de compra de la identidad (FORMATO ya no se pega a la meta) */
  /* #3 · escala · ocultar format-hint redundante (la línea de talla "EDP · 100 ML" ya lo dice) */
  .lda-pdp-buycol .lda-format-hint { display: none; }
  .lda-pdp-buycol .lda-identity__price { display: none; } /* precio único = el dinámico del buy-block */
  .lda-pdp-buycol .lda-identity__h1 { font-family: var(--lda-font-serif); font-style: italic; font-size: clamp(46px, 11.7cqw, 68px); font-weight: 500; letter-spacing: var(--track-display-serif, -0.01em); line-height: 1.04; text-transform: none; margin: 0 0 var(--space-xs); } /* nombre-héroe ~60px · clamp por ancho (11.7cqw, techo 68). El ajuste a pantallas bajas lo hace el ESCALADO DE ESCENA (JS .lda-scene-fit · zoom uniforme de toda la columna · Alonso 2026-06-21), no este clamp → un solo mecanismo, sin doble encogido. Excepción R11. */
  .lda-pdp-buycol .lda-identity__brand { margin-bottom: var(--space-3xs); } /* kicker PEGADO al nombre · marca+nombre = una unidad (TYPOGRAPHY §5.3) */
  .lda-pdp-buycol .lda-identity__olfactory { margin-top: var(--space-3xs); } /* separa el nombre del ruido de acordes */
  /* tags/size-line ELIMINADOS (CSS muerto sin markup · auditoría 2026-06-20) */
  /* TYPOGRAPHY v2.3 + anti-ruido (loop jerarquía) · móvil v6 sin tocar */
  .lda-pdp-buycol .lda-identity__brand { font-size: clamp(11px, 2.93cqw, 17px); font-weight: 500; line-height: 1; }  /* kicker proporcional al nombre · ratio 1:4 (11.7:2.93cqw) · line-height:1 · peso 500 · el ajuste a pantallas bajas lo hace el escalado de escena (JS), no el clamp · TYPOGRAPHY §5.3 */
  .lda-pdp-buycol .lda-buy-block .lda-buy-price { font-weight: 600; font-size: var(--fs-26); } /* OD-014 (Alonso 2026-06-20): precio = ancla de peso del buy-col → 600. Excepción documentada al rol M4 (Price display 500) en TYPOGRAPHY §5/§5.4: SOLO el precio del buy-col PDP desktop. */
  .lda-lectura-block .lda-notes-tier-label { font-size: var(--fs-11); }        /* M1 eyebrow con significado ≥ fs-11 (§9) */
  /* eyebrow-tier consistente (loop tipografía A3/B1): métricas labels + "Cómo se siente" = M1 (600 · fs-11) */
  .lda-metrics .lda-metric__label,
  .lda-metrics .lda-metric-tagkey { font-weight: 600; font-size: var(--fs-11); }
  .lda-lectura-block .lda-sensorial-label { font-size: var(--fs-11); }
  /* familia = taxonomía-lead en su propia línea · acordes debajo */
  .lda-pdp-buycol .lda-identity__olfactory { flex-direction: column; align-items: flex-start; gap: var(--space-3xs); }
  /* placeholder de valoración · bajo el nombre · estrellas outline grises (estado vacío, no rating falso) · lo sustituye Judge.me */
  .lda-pdp-buycol .lda-pdp-rating { display: flex; align-items: center; gap: var(--space-2xs); margin: var(--space-2xs) 0 var(--space-xs); }
  .lda-pdp-buycol .lda-stars { display: inline-flex; gap: 2px; color: var(--mid); }   /* --mid (no --ash) → contraste ≥3:1, no lee como "deshabilitado" · auditoría 2026-06-20 */
  .lda-pdp-buycol .lda-star { width: 15px; height: 15px; }
  .lda-pdp-buycol .lda-rating-note { font-family: var(--lda-font-sans); font-size: var(--fs-12); color: var(--mid); letter-spacing: var(--track-nav); }
  .lda-pdp-buycol .lda-identity__familia { font-size: var(--fs-16); font-weight: 500; color: var(--ink); letter-spacing: var(--track-nav); } /* OD-014 (Alonso 2026-06-20): familia baja a 500 (medium) — el ancla de peso se mueve al precio (600). Sin dos 600 compitiendo. */
  /* acordes SIN caja · texto plano inline separado por · (el fill/outline se reserva a CTA + pill activa) */
  .lda-pdp-buycol .lda-identity__chips { gap: 0; }
  .lda-pdp-buycol .lda-chip { background: none; border: none; border-radius: 0; padding: 0; font-size: var(--fs-14); font-weight: 500; color: var(--mid); letter-spacing: var(--track-nav); } /* peso 500 + tamaño 14 (rango referencia · legibilidad) */
  .lda-pdp-buycol .lda-chip a { color: inherit; text-decoration: none; transition: color 0.15s var(--ease-out, ease); }
  .lda-pdp-buycol .lda-chip a:hover { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 2px; }
  .lda-pdp-buycol .lda-chip + .lda-chip::before { content: "·"; margin: 0 var(--space-3xs); color: var(--mid); opacity: 0.55; }
  /* fila meta única (Unisex · EDP · 100 ml) · plano tenue, sin UPPER (UPPER = solo marca/FORMATO/CTA) */
  .lda-pdp-buycol .lda-pdp-meta { display: block; font-family: var(--lda-font-sans); font-size: var(--fs-13); font-weight: 400; color: var(--mid); letter-spacing: var(--track-nav); margin: var(--space-2xs) 0 0; } /* meta legible en --mid (AAA) · escalón vs acordes por PESO (500 vs 400), no por aclarar (prioridad legibilidad sobre contraste) */

  /* section-links ELIMINADOS (CSS muerto sin markup · enlaces quitados · auditoría 2026-06-20) */
  /* #6 · fila de confianza 2×2 · check recto dibujado con borde (R15: sin círculo, sin caja) */
  .lda-pdp-buycol .lda-pdp-trust2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs) var(--space-md);
    list-style: none; margin: var(--space-md) 0 0; padding: var(--space-md) 0 0;
    border-top: 1px solid var(--color-border-subtle);
  }
  .lda-pdp-buycol .lda-pdp-trust2 li {
    display: flex; align-items: center; gap: var(--space-2xs);
    font-family: var(--lda-font-sans); font-size: var(--fs-12); color: var(--mid);
    letter-spacing: var(--track-default); line-height: 1.4;
  }
  /* "favicons" de confianza · icono propio por garantía (Alonso 2026-06-20) · recto R15, icono en --ink, texto --mid → escalón por color */
  .lda-pdp-buycol .lda-pdp-trust2 .lda-trust-ico {
    width: 16px; height: 16px; flex-shrink: 0; color: var(--ink);
  }
  /* anclas #5 · scroll-margin para que el header fijo (132px) no tape el destino (KI-12) */
  #lda-vision, #lda-notas, #lda-probar, #lda-como-aplicar { scroll-margin-top: calc(132px + var(--space-md)); }

  .lda-lectura-block,
  .lda-metrics { max-width: 760px; margin-inline: auto; }
  /* PLANO MACRO (loop paddings) · separar zonas con --space-section (96) vs micro 24 dentro → ratio ~4× · R7.
     D2: el aire vive en el padding-top de cada sección (no en margin-bottom del hero) para no romper el sticky. */
  .lda-pdp-hero { margin-bottom: 0; }
  .lda-lectura-block { padding-top: var(--space-section); padding-bottom: 0; }
  .lda-metrics { padding-top: var(--space-section); padding-bottom: 0; }
  /* crudos → grid-8 (loop paddings #5) */
  .lda-breadcrumb { gap: var(--space-2xs); }
  .lda-pdp-buycol .lda-size-pills { margin-top: var(--space-2xs); } /* FORMATO hugea sus pills (label→input cercano) */
  .lda-pdp-buycol .lda-buy-label { margin-bottom: var(--space-2xs); font-size: var(--fs-12); }

  .lda-sticky-bar { width: 100%; max-width: var(--container-max); }
  .lda-lightbox__frame { width: min(80vw, 800px); max-width: 800px; }
}

/* ── Pantallas anchas (28"+) · respira el shell sin full-bleed (cap de lujo) · #1 margen, #2 tamaño ── */
@media (min-width: 1680px) {
  .lda-product { --container-max: 1560px; }
  /* NUDO #2: NO re-capar el inner aquí (antes 460px) → que llene el carril (void=0) también a ≥1680; el nombre topa en su clamp-max 68px */
}

/* ════════════════ R10 · prefers-reduced-motion (global) ════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lda-gallery-track,
  .lda-gallery-dot { transition: none !important; }
  .lda-icon-action svg,
  .lda-icon-action.saved svg { transition: none; animation: none; }
  .lda-buy-block .lda-buy-price,
  .lda-buy-block .lda-size-pill,
  .lda-buy-block .lda-cta-primary,
  .lda-buy-block .lda-btn-cta-primary { transition: none; }
  .lda-buy-block .lda-cta-primary:hover,
  .lda-buy-block .lda-btn-cta-primary:hover { transform: none; }
  .lda-lectura-block .lda-accordion-icon { transition: none; }
  .lda-sticky-bar { transition: none; }
  .lda-sticky-bar .lda-cta-primary.lda-sticky-cta { transition: none; }
  .lda-sticky-bar .lda-cta-primary.lda-sticky-cta:hover { transform: none; }
  .lda-lightbox,
  .lda-lightbox__close,
  .lda-lightbox__frame .lda-gallery-slide { transition: none !important; }
}
/* END_SECTION:lda-product */

/* START_SECTION:lda-ranking (INDEX:38) */
/* container-type que la rampa fluida --fs-* exige */
  .lda-ranking.container { container-type: inline-size; }

  /* ─── SECTION COMMON (scoped a ranking · no duplicar si ya vive en base theme) ─── */
  .lda-ranking .section { padding: var(--space-section) 16px 0; }
  .lda-ranking .section-head { margin-bottom: 24px; }
  .lda-ranking .section-eyebrow {
    display: block;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    margin-bottom: 8px;
  }
  .lda-ranking .section-h2 {
    font-size: var(--fs-h2); font-weight: 500; letter-spacing: var(--track-default);
    text-transform: uppercase; color: var(--ink); line-height: 1.15;
    margin-bottom: 6px;
  }

  /* ─── CINEMA FRAME (section--cinema scoped a ranking) ─── */
  .lda-ranking .ranking.section--cinema {
    min-height: var(--section-viewport-h);
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding-top: var(--space-section);
    padding-bottom: 0;
  }
  .lda-ranking .ranking.section--cinema .ranking-cta-wrap {
    padding: var(--space-cta-wrap-top) 0 var(--space-cta-wrap-bot);
  }

  /* ─── CAROUSEL TRACK WRAPPER (mobile: transparente) ─── */
  .lda-ranking .ranking-carousel-track { position: relative; }

  /* ─── FLECHAS: ocultas en mobile (visibilidad gestionada en @media desktop abajo) ─── */
  /* Nota: no depender de lda-overrides.css D4 para ocultar — garantía local */
  .lda-ranking .lda-carousel-arrows { display: none; }

  /* ─── PRODUCTS CAROUSEL ─── */
  .lda-ranking .products-carousel {
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 12px;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }
  .lda-ranking .products-carousel::-webkit-scrollbar { display: none; }

  /* ─── PRODUCT CARD ─── */
  .lda-ranking .product-card {
    min-width: clamp(200px, 58cqw, 280px);
    max-width: clamp(200px, 58cqw, 280px);
    scroll-snap-align: start;
  }
  .lda-ranking .products-carousel .product-card:last-child { scroll-snap-align: end; }

  .lda-ranking .product-img-placeholder {
    width: 100%; aspect-ratio: 1/1;
    background: var(--sand);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }
  .lda-ranking .frasco-svg path,
  .lda-ranking .frasco-svg rect,
  .lda-ranking .frasco-svg ellipse { stroke: var(--mid); }

  .lda-ranking .product-brand {
    font-size: var(--fs-10); font-weight: 600; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: var(--mid);
    margin-bottom: 4px;
  }
  .lda-ranking .product-headline {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; margin-bottom: 6px;
  }
  .lda-ranking .product-name {
    width: 100%;
    font-size: var(--fs-16); font-weight: 500; color: var(--ink);
    letter-spacing: var(--track-nav); line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; word-break: break-word;
  }
  .lda-ranking .product-family {
    font-size: var(--fs-13); font-weight: 400; color: var(--mid);
    line-height: 1.4; margin-bottom: 6px;
  }
  .lda-ranking .product-price {
    font-size: var(--fs-15); font-weight: 500; color: var(--ink);
    letter-spacing: var(--track-price); white-space: nowrap;
  }

  /* ─── RATING ─── */
  .lda-ranking .product-rating {
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 14px;
    font-size: var(--fs-11); color: var(--mid);
    letter-spacing: 0.01em;
  }
  .lda-ranking .product-rating-star {
    width: 11px; height: 11px; fill: var(--ink); flex-shrink: 0;
  }
  .lda-ranking .product-rating-score {
    font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
  }

  /* ─── ADD / VER BUTTON ─── */
  .lda-ranking .product-add-btn {
    display: block; width: 100%; min-height: 44px;
    background: transparent;
    border: 1px solid var(--ink); border-radius: 2px;
    font-family: inherit;
    font-size: var(--fs-11); font-weight: 600;
    letter-spacing: var(--track-cta); text-transform: uppercase;
    color: var(--ink); text-decoration: none; text-align: center;
    cursor: pointer; line-height: 44px; padding: 0;
    transition: background-color 0.2s, color 0.2s;
  }
  .lda-ranking .product-add-btn:hover { background: var(--ink); color: var(--bone); }

  /* ─── DOTS ─── */
  .lda-ranking .products-dots {
    display: flex; justify-content: space-between; gap: 6px;
    margin-top: 0;
  }
  .lda-ranking .products-dot-btn {
    background: none; border: none; padding: 12px 0;
    flex: 1; max-width: 48px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: manipulation;
  }
  .lda-ranking .products-dot {
    width: 100%; height: 1px;
    background: rgba(26,26,26,0.18);
    transition: background-color 0.2s, height 0.2s;
  }
  .lda-ranking .products-dot.active { background: rgba(26,26,26,0.85); height: 2px; }

  /* ─── RANKING CTA WRAP ─── */
  .lda-ranking .ranking-cta-wrap {
    display: flex; justify-content: center; align-items: center;
    padding: 12px 0 20px;
  }
  .lda-ranking .ranking-cta {
    display: inline-flex; align-items: center;
    background: none; border: none; padding: 0;
    font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--track-cta);
    text-transform: uppercase; color: var(--ink);
    min-height: 44px; cursor: pointer; touch-action: manipulation;
    text-decoration: none;
  }
  .lda-ranking .ranking-cta .cta-label {
    display: inline-block;
    transition: transform 0.2s var(--ease-out);
    transform-origin: center;
  }
  .lda-ranking .ranking-cta:hover .cta-label,
  .lda-ranking .ranking-cta:active .cta-label,
  .lda-ranking .ranking-cta:focus-visible .cta-label { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) {
    .lda-ranking .ranking-cta:hover .cta-label,
    .lda-ranking .ranking-cta:active .cta-label,
    .lda-ranking .ranking-cta:focus-visible .cta-label { transform: none; }
  }

  /* ─── Focus ring canónico ─── */
  .lda-ranking :focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
     Sistema de carrusel desktop coherente con .imprescindibles (DESKTOP_SPEC §4 Ranking).
     Consume clases del sistema base D4: .lda-carousel-arrows / .lda-carousel-arrow.
     NO se redefinen tokens ni clases del sistema base — solo se consumen.
     Decisiones de criterio:
       · Fichas fijas 300px desktop (vs clamp mobile 58cqw) → aire editorial, 3.5 fichas visibles
         en 1280px contenedor con 48px padding · peek ~50px induce scroll continuado.
       · Flechas visibles en desktop, dots ocultos → limpieza visual (dots son patrón touch).
       · gap 20px desktop (vs 12px mobile) → respiración entre fichas.
       · scroll-padding ajustado a 0 (no hay padding lateral en el track desktop).
       · Sección hereda .container 1280px del sistema base D1 — no se redeclara.
       · min-height cinema frame se mantiene en desktop (section--cinema hereda de overrides).
  */
  @media (min-width: 990px) {

    /* Section shell: padding lateral nulo (ya viene del .container D1 con padding-inline:48px) */
    .lda-ranking .section {
      padding-left: 0;
      padding-right: 0;
    }

    /* Track wrapper: position:relative necesario para que .lda-carousel-arrows se posicione */
    .lda-ranking .ranking-carousel-track {
      position: relative;
    }

    /* Carrusel desktop: sin márgenes negativos, sin padding artificial,
       gap generoso, scroll-padding cero */
    .lda-ranking .products-carousel {
      gap: 20px;
      margin: 0;
      padding: 0 0 16px;
      scroll-padding-left: 0;
      scroll-padding-right: 0;
    }

    /* Ficha desktop: ancho fijo 300px — aire editorial, ~3.5 visibles en 1280px */
    .lda-ranking .product-card {
      min-width: 300px;
      max-width: 300px;
    }

    /* Dots: ocultos en desktop (las flechas asumen navegación) */
    .lda-ranking .products-dots {
      display: none;
    }

    /* Flechas desktop: visibles (el sistema base D4 las define como display:none mobile
       implícitamente porque .lda-carousel-arrows vive dentro del @media 990px del base).
       Aquí se asegura visibilidad en el scope scoped de .lda-ranking. */
    .lda-ranking .lda-carousel-arrows {
      display: flex;
    }

    /* CTA wrap desktop: más aire vertical, alineado a la izquierda (criterio editorial:
       no centrado → composición más dinámica, coherente con DESKTOP_SPEC §posición no centrada) */
    .lda-ranking .ranking-cta-wrap {
      justify-content: flex-start;
      padding-top: 24px;
      padding-bottom: 32px;
    }

    /* Section head desktop: más air bajo el eyebrow */
    .lda-ranking .section-head {
      margin-bottom: 32px;
    }

  }
/* END_SECTION:lda-ranking */

/* START_SECTION:lda-servicios (INDEX:39) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición del porting) */
  .lda-servicios.container { container-type: inline-size; }

  /* ─── BANDA SERVICIOS · trust marquee ─── */
  .servicios {
    padding: var(--space-section-tight) 0 0; /* bottom 0: bone→bone con Diario */
    background: var(--bone);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
    position: relative;
    overflow: hidden;
  }
  .servicios-marquee {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .servicios-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: servicios-scroll 50s linear infinite;
  }
  .servicios-marquee:hover .servicios-marquee-track {
    animation-play-state: paused;
  }
  @keyframes servicios-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .servicio {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    min-height: 44px;
  }
  /* Hairline divider entre items (#8 override, merge directo) */
  .servicios .servicio + .servicio {
    border-left: 1px solid rgba(26, 26, 26, 0.10);
    padding-left: 16px;
  }
  .servicio-icon {
    width: 24px;
    height: 24px;
    color: var(--ink);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .servicio-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
    fill: none;
    stroke: currentColor;
  }
  .servicio-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
  }
  .servicio-title {
    font-size: var(--fs-11);
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.2;
  }
  .servicio-desc {
    font-size: var(--fs-10);
    font-weight: 400;
    color: var(--mid);
    line-height: 1.3;
  }
  /* prefers-reduced-motion: stack centrado horizontal sin animación */
  @media (prefers-reduced-motion: reduce) {
    .servicios-marquee-track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      gap: 16px 20px;
    }
    .servicios-marquee {
      mask-image: none;
      -webkit-mask-image: none;
    }
  }

  /* ===== DESKTOP (>=990px) ===== */
  /*
    Directiva: 4 servicios distribuidos en grid de 4 columnas iguales (1fr cada una).
    Cada box recibe exactamente el mismo ancho — ninguno se corta ni se sale.
    El set 2 (aria-hidden, duplicado para loop seamless) se oculta completamente.
    La animación se cancela. El mask-image se elimina.
    Hereda .container max-width:1280px del sistema base (lda-overrides.css v4.1).
  */
  @media (min-width: 990px) {
    /* Cancelar mask del marquee */
    .servicios-marquee {
      mask-image: none;
      -webkit-mask-image: none;
      overflow: visible;
    }

    /* Track pasa a grid de N columnas iguales — cada servicio ocupa exactamente 1fr */
    .servicios-marquee-track {
      animation: none;
      width: 100%;
      display: grid;
      /* Número de columnas: var(--servicios-cols) o fallback 4.
         Si el merchant añade un 5.º bloque, el grid se adapta automáticamente
         mediante repeat(auto-fit, minmax(0, 1fr)). */
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      align-items: stretch;
      gap: 0;
    }

    /* Ocultar el set 2 duplicado (aria-hidden="true") — elimina la duplicación visual */
    .servicios-marquee-track > li[aria-hidden="true"] {
      display: none;
    }

    /* Cada item: box centrado, borde izquierdo como hairline divider */
    .servicios .servicio {
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid rgba(26, 26, 26, 0.10);
      padding: 0 clamp(16px, 2vw, 32px);
      min-height: 72px;
      white-space: nowrap;
      /* Resetar flex-shrink del móvil — no aplica en grid */
      flex-shrink: unset;
    }

    /* Primer item visible: sin borde izquierdo (borde ya lo da la sección si se quiere) */
    .servicios .servicio:first-child {
      border-left: none;
    }

    /* Resetar selector mobile de hairline — en grid los dividers los pone border-left de cada li */
    .servicios .servicio + .servicio {
      border-left: 1px solid rgba(26, 26, 26, 0.10);
      padding-left: clamp(16px, 2vw, 32px);
    }

    /* Ritmo vertical: más aire en desktop */
    .servicios {
      padding-block: var(--space-section-tight);
    }

    /* Texto levemente mayor respetando tokens existentes */
    .servicio-title {
      font-size: var(--fs-12);
    }
    .servicio-desc {
      font-size: var(--fs-11);
    }
  }
/* END_SECTION:lda-servicios */

/* START_SECTION:lda-sets-banner (INDEX:40) */
/* container-type que la rampa fluida --fs-* exige (lda-overrides.css lo declara como precondición del porting) */
  .lda-sets-banner.container { container-type: inline-size; }

  .sets-banner {
    margin-top: 0;
    position: relative;
    min-height: calc(var(--section-viewport-h) - var(--cinema-peek));
    overflow: hidden;
    background: linear-gradient(180deg, #2E2520 0%, #1A1410 100%);
    color: var(--bone);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-section) 24px max(var(--space-section-tight), calc(16px + var(--safe-bottom)));
  }
  .sets-banner-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
  }
  .sets-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 30%,
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.55) 100%);
    pointer-events: none; z-index: 1;
  }
  .sets-banner-img-label {
    position: absolute; top: 16px; right: 16px;
    font-size: var(--fs-9); font-weight: 500; letter-spacing: var(--track-eyebrow);
    text-transform: uppercase; color: rgba(250,248,243,0.45);
    z-index: 2;
  }
  .sets-banner-content {
    position: relative; z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .sets-banner-anchor {
    font-family: var(--lda-font-sans);
    font-size: var(--fs-editorial-lead); font-weight: 500;
    color: var(--bone); line-height: 1.05;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    max-width: 320px;
    text-wrap: balance;
    text-shadow: 0 1px 12px rgba(0,0,0,0.25);
  }
  .sets-banner-title {
    font-family: var(--lda-font-serif);
    font-size: var(--fs-h2-edit-sm); font-weight: 500; font-style: italic;
    color: rgba(250,248,243,0.88); line-height: 1.1;
    letter-spacing: -0.005em;
    margin-bottom: 24px;
    max-width: 300px;
    text-wrap: balance;
    text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  }
  .sets-banner-rule {
    width: 32px; height: 1px;
    background: rgba(250,248,243,0.85);
    margin-bottom: 16px;
  }
  .sets-banner-body {
    font-size: var(--fs-16); font-weight: 400;
    color: rgba(250,248,243,0.95);
    line-height: 1.55; margin-bottom: 24px;
    max-width: 320px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.2);
  }
  .sets-banner-cta {
    display: inline-flex; align-items: center; gap: 6px;
    height: 44px; padding: 0 24px;
    background: var(--bone); color: var(--ink);
    border: none; border-radius: 2px;
    font-size: var(--fs-12); font-weight: 600;
    letter-spacing: var(--track-cta);
    text-transform: uppercase;
    align-self: center;
    text-decoration: none;
    transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    transform-origin: center;
  }
  .sets-banner-cta:hover { background: var(--ink); color: var(--bone); }
  .sets-banner-cta:hover,
  .sets-banner-cta:active,
  .sets-banner-cta:focus-visible { transform: scale(1.04); }
  @media (prefers-reduced-motion: reduce) {
    .sets-banner-cta:hover,
    .sets-banner-cta:active,
    .sets-banner-cta:focus-visible { transform: none; }
  }

  /* ===== DESKTOP (>=990px) ===== */
  @media (min-width: 990px) {
    /*
      Full-bleed override: esta sección ignora el max-width 1280px del sistema base.
    */
    .lda-sets-banner.container {
      max-width: 100%;
      padding-inline: 0;
    }

    /*
      Layout: fondo dark full-width + contenido en columna única centrada.
      Sin grid 2-col que deje huecos vacíos.
      La imagen de fondo cubre toda la sección con scrim oscuro superpuesto.
    */
    .sets-banner {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: min(90vh, 780px);
      padding: var(--space-section) clamp(48px, 10vw, 160px);
    }

    /*
      Scrim centrado: más denso en el centro para legibilidad del texto,
      manteniendo los bordes con más imagen visible.
    */
    .sets-banner::before {
      background: radial-gradient(
        ellipse 70% 80% at 50% 50%,
        rgba(26,20,16,0.72) 0%,
        rgba(26,20,16,0.45) 60%,
        rgba(26,20,16,0.2) 100%
      );
    }

    .sets-banner-bg {
      background-position: center 30%;
    }

    .sets-banner-img-label {
      top: 24px;
      right: 24px;
      left: auto;
    }

    /*
      Bloque de contenido: ancho máximo editorial, centrado, alineado al centro.
      Cada elemento conserva su propio texto-alineado a la izquierda dentro del bloque.
    */
    .sets-banner-content {
      width: 100%;
      max-width: 560px;
      align-items: flex-start;
      text-align: left;
    }

    /* Titular sans: tamaño proporcionado, no gigante */
    .sets-banner-anchor {
      font-size: var(--fs-h1);
      max-width: none;
      margin-bottom: 16px;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }

    .sets-banner-title {
      font-size: var(--fs-h2-edit);
      max-width: none;
      margin-bottom: 32px;
      line-height: 1.1;
    }

    .sets-banner-rule {
      width: 48px;
      margin-bottom: 24px;
    }

    .sets-banner-body {
      font-size: var(--fs-16);
      max-width: none;
      line-height: 1.6;
      margin-bottom: 40px;
    }

    /*
      CTA: alineado a la izquierda con el bloque tipográfico (no centrado).
      Altura ≥44px mantenida (a11y).
    */
    .sets-banner-cta {
      align-self: flex-start;
      height: 48px;
      padding: 0 32px;
    }
  }
/* END_SECTION:lda-sets-banner */