/* ════════════════════════════════════════════════════
   OFICINA DE SONIDO — main.css
   Tipografías:
     Cumbia  → H1 / logo (display, ALL CAPS)
     Rescate → H2 / H3 (subtítulos)
     Arché Grotesk → texto, menú, tienda (UI base)
   Colores tomados del sitio: rosa, amarillo, verde.
   ════════════════════════════════════════════════════ */

/* ── FUENTES PROPIAS ── */
@font-face {
    font-family: 'Cumbia';
    src: url('../fonts/Cumbia-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Rescate';
    src: url('../fonts/RescateA-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Arche';
    src: url('../fonts/CFArcheGrotesk-Medium.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Arche';
    src: url('../fonts/CFArcheGrotesk-MediumItalic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Arche';
    src: url('../fonts/CFArcheGrotesk-Medium.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

/* ── VARIABLES ── */
:root {
    /* Paleta Oficina de Sonido */
    --rosa:    #EA3093;
    --amarillo:#FFD700;
    --verde:   #5DB95A;
    --negro:   #000100;

    /* Tema base — claro, gris papel NEUTRO (sin calidez).
       El fondo claro deja respirar las fotos de fondo oscuro (tela negra,
       módulos negros), que sobre el gris antiguo se fundían con la página.
       Neutro a propósito: nada de tono arena/crema, que ensuciaba los
       colores vivos de la marca. */
    --bg:      #F4F4F2;   /* gris papel */
    --fg:      #1A1A1A;   /* casi negro neutro — texto */
    --mid:     #6B6B6B;   /* gris medio, textos secundarios */
    --dim:     #9A9A9A;   /* gris apagado, etiquetas */
    --linea:   #DCDCDA;   /* línea sobre papel */
    --rule:    1px solid var(--linea);
    --surface: #EBEBE8;   /* cajas, placeholders, campos */
    --acento:  var(--rosa); /* precios y acentos (Hologram usa rojo) */

    --sans:    'Arche', system-ui, sans-serif;
    --display: 'Cumbia', 'Arche', sans-serif;
    --sub:     'Rescate', 'Arche', sans-serif;
    --serif:   'Rescate', Georgia, serif; /* compat: usos previos de --serif */
    --nav-h: 64px;

    /* ESCALA (referencia: hologramelectronics.com).
       Ahí el contenido ocupa casi toda la pantalla —margen lateral de sólo
       20px— y por eso "se siente grande". El tema estaba encajonado en
       1024px, que en un monitor ancho deja ~175px de aire a cada lado y
       achica todo. Ahora: ancho casi completo, con tope en pantallas muy
       grandes para que la grilla no se desarme. */
    --container: 1600px;
    --container-pad: 20px;
    /* El texto corrido sí necesita medida corta para poder leerse. */
    --reading: 1024px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }  /* base: era 15px, todo se leía pequeño */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════ */
.nav {
    position: sticky; top: 0; z-index: 200;
    background: var(--bg);
    border-bottom: var(--rule);
    height: var(--nav-h);
    display: flex;
    align-items: stretch;
}
.nav-brand {
    display: flex; align-items: center;
    padding: 0 1.25rem;
    border-right: var(--rule);
    flex-shrink: 0;
    line-height: 0;
    transition: opacity .15s;
}
.nav-brand:hover { opacity: .7; }
.nav-logo-c { height: 26px; width: auto; display: block; }

.nav-links {
    display: flex; align-items: center;
    padding: 0 1.75rem; gap: 2rem; flex: 1;
}
.nav-link {
    font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--mid); transition: color .15s; white-space: nowrap;
}
.nav-link:hover { color: var(--fg); }

/* ════════════════════════════════════════════════════
   HEADER — Oficina de Sonido
   Disposición EXACTA según boceto (medida sobre captura):
     - Bloque amarillo (logo ODES negro) arriba-izquierda.
     - Wordmark verde debajo, indentado a la derecha (~32%
       del ancho del amarillo) y MÁS ANCHO que el amarillo
       (se extiende hacia la derecha), pegado al borde inferior.
   Transparente sobre el hero en portada; sólido en interiores.
   Padding lateral (2rem) igual al de .section-head/.catalog-grid
   para que el contenido del header alinee con el de la tienda.
   ════════════════════════════════════════════════════ */
/* Utilidad de ancho de lectura: header (contenido), catálogo, tienda,
   textos de página. El fondo/hero detrás siempre va a todo el ancho. */
.ods-container {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.site-header {
    z-index: 200;
    width: 100%;
    min-height: var(--nav-h);
}
.hdr-inner {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1.5rem; padding-top: 1.4rem; padding-bottom: 1.4rem;
}
.site-header.is-overlay {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border: none;
}
/* El header NO acompaña el scroll: se va con la página. Antes era sticky y
   quedaba pegado arriba tapando contenido (por eso hubo que compensar la
   barra de admin de WP; ya no hace falta). */
.site-header.is-solid { position: static; }
.site-header.header-rosa     { background: var(--rosa); }
.site-header.header-amarillo  { background: var(--amarillo); }

/* Contenedor de marca: el verde puede sobresalir del amarillo */
.hdr-brand {
    position: relative;
    display: inline-block;
    text-decoration: none; line-height: 0;
    flex-shrink: 0;
}

/* Bloque amarillo con el logo negro dentro (define el ancho base) */
.hdr-logo {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--amarillo);
    padding: .5em .55em;
}
/* Alto fluido: la marca se achica con la pantalla en vez de saltar de golpe
   en un breakpoint, que era lo que rompía la proporción en móvil. */
.hdr-logo svg {
    height: clamp(34px, 8.5vw, 56px); width: auto; display: block;
}
/* Forzar el color del logo directamente sobre los paths (más confiable
   que depender de currentColor heredado a través del <style> interno
   del SVG, que algunos navegadores no resuelven igual en SVG inline). */
.hdr-logo svg .st0,
.hdr-logo svg path,
.hdr-logo svg ellipse {
    fill: var(--negro) !important;
}
.site-header.header-amarillo .hdr-logo svg .st0,
.site-header.header-amarillo .hdr-logo svg path,
.site-header.header-amarillo .hdr-logo svg ellipse {
    fill: var(--amarillo) !important;
}

/* Wordmark verde: indentado a la derecha, más ancho, pegado abajo.
   Usamos el ancho del amarillo (100%) y lo extendemos +68% hacia
   la derecha, desplazándolo +32% desde la izquierda.            */
.hdr-wordmark {
    display: block;
    font-family: var(--display);
    font-size: clamp(.9rem, 3.6vw, 1.55rem); line-height: 1;
    white-space: nowrap;
    text-transform: uppercase; letter-spacing: .01em;
    color: #fff; background: var(--verde);
    padding: .2em .45em .26em;
    margin-left: 32%;               /* indent = 170/529 ≈ 0.32 */
    margin-top: -2px;               /* pegado al borde inferior del amarillo */
    width: max-content;             /* el texto define el ancho (sale a la derecha) */
}

/* Menú: cajas negras, item activo verde. Arriba a la derecha */
.hdr-nav {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    justify-content: flex-end; padding-top: .3rem;
}
.hdr-nav .nav-link {
    font-family: var(--sans);
    font-size: 14px; font-weight: 600; letter-spacing: .01em;
    text-transform: none; white-space: nowrap;
    color: #fff; background: var(--negro);
    padding: .4em .7em; transition: background .15s, color .15s;
}
/* Hover en amarillo y activo en verde, ambos con texto negro: los colores
   de la marca hacen el trabajo, sin grises intermedios. */
.hdr-nav .nav-link:hover { background: var(--amarillo); color: var(--negro); }
.hdr-nav .nav-link.is-current { background: var(--verde); color: var(--negro); }
.hdr-nav .nav-link.is-current:hover { background: var(--amarillo); color: var(--negro); }

/* Header interior amarillo: bloque del logo invierte a negro */
.site-header.header-amarillo .hdr-logo { background: var(--negro); }

/* Móvil: se CONSERVA la composición del desktop —marca a la izquierda, menú
   arriba a la derecha—. Antes esto pasaba a columna y el header perdía la
   proporción por completo: la marca ocupaba todo el ancho y el menú caía
   debajo alineado a la izquierda. Ahora lo único que cambia es la escala
   (el alto del logo y el cuerpo del wordmark ya son fluidos, con clamp);
   el armado es el mismo a cualquier ancho. */
@media (max-width: 760px) {
    .hdr-inner { gap: .75rem; padding-top: .9rem; padding-bottom: .9rem; }
    .hdr-nav { gap: .3rem; padding-top: .15rem; }
    .hdr-nav .nav-link { font-size: 13px; padding: .35em .55em; }
}
@media (max-width: 420px) {
    .hdr-nav .nav-link { font-size: 12px; padding: .3em .45em; }
}

/* ════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════ */
.hero {
    position: relative;
    width: 100%; height: 88vh; min-height: 440px; max-height: 720px;
    overflow: hidden; border-bottom: var(--rule);
    background: #0e0e0e;
    display: flex; align-items: flex-end;
}
.hero-img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 8s ease;
}
.hero:hover .hero-img { transform: scale(1.02); }
.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.25) 50%, transparent 80%);
}
.hero-dark { position: absolute; inset: 0; background: #0e0e0e; }
.hero-content {
    position: relative; z-index: 2;
    width: 100%;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.hero-content.ods-container { padding-bottom: 3rem; }
.hero-text { max-width: 700px; }
/* OJO: el hero es la única zona que sigue siendo oscura, porque el texto
   va encima de una foto con degradado negro. Sus colores se fijan claros a
   propósito y NO deben seguir a --fg/--bg (que ahora son oscuro/crema). */
.hero-title {
    font-size: clamp(2.25rem, 6vw, 5rem);
    font-weight: 600; letter-spacing: -.03em;
    color: #F4F4F2; line-height: .93; margin-bottom: .75rem;
}
.hero-bajada {
    font-family: var(--sans);
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    line-height: 1.65; color: rgba(244,244,242,.75);
    font-weight: 400;
}
.hero-cta {
    flex-shrink: 0; font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: #F4F4F2; border: 1px solid rgba(244,244,242,.45);
    padding: .7rem 1.5rem; transition: all .15s;
    align-self: flex-end; white-space: nowrap;
}
.hero-cta:hover { background: #F4F4F2; color: #1A1A1A; }

/* ════════════════════════════════════════════════════
   CATÁLOGO — GRID
   ════════════════════════════════════════════════════ */
.section-head {
    max-width: var(--container); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem var(--container-pad); border-bottom: var(--rule);
}
/* Cuando está anidado dentro de .ods-wc-page (la tienda), el padre ya
   centra y limita el ancho — no duplicar el container aquí. */
.ods-wc-page .section-head {
    max-width: none; margin: 0; padding: .6rem 0;
}
.section-label { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.section-count { font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

/* Grilla de 3 columnas a ancho casi completo (ref. Hologram): la tarjeta
   pasa de ~470px a ~520px en un monitor de 1600px, y el conjunto llena la
   pantalla en vez de flotar en una columna estrecha al centro. */
.catalog-grid {
    max-width: var(--container); margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--container-pad);
}
/* Sin filete alrededor de la tarjeta: la foto y el aire separan. La única
   línea de la tarjeta es la que va sobre "Comprar" (ver .book-ficha). */
.book-card { border: none; }
.book-card-empty { border: none; }

.book-card-link {
    display: flex; flex-direction: column; height: 100%;
    transition: opacity .18s;
}
.book-card-link:hover { opacity: .85; }

.cover-zone {
    display: flex; justify-content: center; align-items: center;
    padding: .5rem;   /* era 1.5rem: el marco se comía la foto */
    transition: background-color .4s;
}
/* Sin sombra: era del tema oscuro, donde levantaba la portada del fondo.
   Sobre papel dibujaba un halo gris alrededor de cada producto. La foto se
   apoya directamente en la página; el movimiento queda en el zoom (.cov-img). */
.book-cover {
    width: 100%; max-width: 560px;
    aspect-ratio: 11.5 / 17;
    box-shadow: none;
    transition: transform .35s ease;
    overflow: hidden;
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }

.cover-placeholder {
    width: 100%; height: 100%; background: var(--surface);
    display: flex; flex-direction: column;
    justify-content: space-between; padding: 14px 12px;
}
.cover-num { font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(26,26,26,.4); }
.cover-placeholder-title { font-size: 11px; font-weight: 600; color: rgba(26,26,26,.7); line-height: 1.2; }

.book-info {
    padding: 1rem 1.15rem 1.15rem;
    display: flex; flex-direction: column; gap: .3rem; flex: 1;
}
.book-collection { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.book-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--fg); line-height: 1.1; }
.book-author { font-size: 13px; font-weight: 400; color: var(--mid); }
/* Único filete de la tarjeta: separa el precio del botón Comprar. */
.book-ficha {
    font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fg); padding-top: 1.1rem; margin-top: auto;
    border-top: var(--rule); transition: color .15s;
}
.book-ficha::after { content: ' →'; }
.book-card-link:hover .book-ficha { color: var(--fg); }

/* ════════════════════════════════════════════════════
   SINGLE LIBRO
   El .libro-layout es un grid de 2 columnas.
   (Nombre distinto a 'single-libro' porque WordPress añade
   esa clase automáticamente al <body> y colisionaba.)
   No depende de ningún wrapper de WordPress.
   ════════════════════════════════════════════════════ */

/* Back bar */
.single-back {
    padding: .6rem 2rem; border-bottom: var(--rule);
}
.single-back a {
    font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mid); transition: color .15s;
}
.single-back a:hover { color: var(--fg); }

/* Grid */
.libro-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
/* Ocultar cualquier elemento inyectado por WordPress */
.libro-layout > *:not(.single-cover):not(.single-data) {
    display: none !important;
}

/* Columna izquierda — portada — declaración única */
.single-cover {
    position: sticky;
    top: var(--nav-h);
    height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: hidden;
    border-right: var(--rule);
    transition: background-color .4s;
}
.single-book {
    position: relative; z-index: 1;
    width: min(78%, 480px);
    aspect-ratio: 11.5 / 17;
    box-shadow: none;   /* igual que en la grilla: sin halo sobre papel */
    overflow: hidden;
}
/* Misma lógica que la grilla: el recuadro manda y la foto se recorta
   centrada, gane lo que gane WooCommerce en la ficha de producto. */
.woocommerce div.product .single-book img,
.single-book img {
    width: 100% !important; height: 100% !important;
    max-width: none;
    object-fit: cover; object-position: center; display: block;
}
.single-placeholder {
    width: 100%; height: 100%; background: var(--surface);
    display: flex; align-items: flex-end; padding: 18px;
    font-size: 13px; font-weight: 600; color: rgba(26,26,26,.7);
    line-height: 1.2;
}

/* Columna derecha — datos */
.single-data {
    padding: 4rem 3.5rem 3rem;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.s-collection {
    font-size: 10px; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 1.25rem;
}
.s-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 600; letter-spacing: -.03em;
    color: var(--fg); line-height: .95; margin-bottom: .85rem;
}
.s-author {
    font-size: 1rem; color: var(--mid);
    padding-bottom: 2.5rem; margin-bottom: 2.5rem;
    border-bottom: var(--rule);
}
.s-desc {
    font-family: var(--sans);
    font-size: 1.05rem; line-height: 1.78;
    color: #3F3F3F; margin-bottom: 2.5rem;
}
.s-desc p + p { margin-top: .9em; }

/* Galería */
.s-gallery { margin-bottom: 2.5rem; }
.s-gallery-label {
    font-size: 10px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--dim); margin-bottom: .75rem;
}
.s-gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.s-gallery-thumb {
    aspect-ratio: 1; overflow: hidden; cursor: zoom-in;
    background: var(--surface); transition: opacity .18s;
}
.s-gallery-thumb:hover { opacity: .85; }
.s-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-gallery-empty { aspect-ratio: 1; background: var(--surface); border: 1px dashed var(--linea); }

/* Ficha técnica */
.s-ficha {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: var(--rule); margin-bottom: 2.5rem;
}
.fi { padding: .8rem 0; border-bottom: var(--rule); }
.fi:nth-child(odd) { border-right: var(--rule); padding-right: 1.5rem; }
.fi:nth-child(even) { padding-left: 1.5rem; }
.fl { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .25rem; }
.fv { font-size: 14px; color: #3F3F3F; }


/* Navegación anterior / siguiente */
.s-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    border-top: var(--rule); margin-top: auto;
}
.s-nav-prev, .s-nav-next {
    padding: 2rem 1.5rem;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .65rem; text-align: center;
    transition: background .18s;
}
.s-nav-prev { border-right: var(--rule); }
.s-nav-prev:hover, .s-nav-next:hover { background: rgba(26,26,26,.05); }
.s-nav-dir {
    font-size: 22px; font-weight: 400;
    color: var(--dim); transition: color .18s; line-height: 1;
}
.s-nav-title {
    font-size: 12px; font-weight: 600;
    letter-spacing: .04em;
    color: var(--mid); line-height: 1.3;
    transition: color .18s;
    max-width: 180px;
}
.s-nav-prev:hover .s-nav-dir, .s-nav-next:hover .s-nav-dir { color: var(--fg); }
.s-nav-prev:hover .s-nav-title, .s-nav-next:hover .s-nav-title { color: var(--fg); }

/* ════════════════════════════════════════════════════
   LIGHTBOX
   El visor sigue siendo oscuro a propósito (la foto manda), así que sus
   controles se fijan claros y NO siguen a --fg, que ahora es oscuro.
   ════════════════════════════════════════════════════ */
.lb {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,.94);
    display: flex; align-items: center; justify-content: center;
}
.lb-img { max-width: 90vw; max-height: 90vh; object-fit: contain; cursor: default; }
.lb-close {
    position: absolute; top: 1.25rem; right: 1.5rem;
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(244,244,242,.55); background: none; border: none; cursor: pointer; transition: color .15s;
}
.lb-close:hover { color: #F4F4F2; }
.lb-prev, .lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 600; color: rgba(244,244,242,.45);
    background: none; border: none; cursor: pointer; padding: 1rem; transition: color .15s;
}
.lb-prev { left: .5rem; }
.lb-next { right: .5rem; }
.lb-prev:hover, .lb-next:hover { color: #F4F4F2; }
.lb-count { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); font-size: 10px; color: rgba(244,244,242,.45); }

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
.footer-top {
    position: relative; overflow: hidden;
    background: var(--surface);
    border-top: var(--rule);
    padding: 2.25rem 2.5rem;
    display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between; align-items: center;
}
/* Sin textura: el grano y el brillo metálico eran del tema oscuro
   ("carbón"), y sobre papel se leían como suciedad. */
.footer-top > * { position: relative; z-index: 1; }
.footer-brand { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.footer-location { font-family: var(--sans); font-size: 13px; color: var(--mid); font-style: italic; }
.footer-email { font-size: 12px; color: var(--mid); letter-spacing: .04em; }

.footer-bottom {
    background: var(--surface);   /* era un crema suelto de la paleta anterior */
    border-top: 1px solid var(--linea);
    padding: 1rem 2.5rem;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
}
.footer-copy { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); }
/* min-width:0 es lo que permite que ENVUELVA de verdad: como ítem flex, su
   min-width:auto lo dejaba más ancho que el espacio disponible y los últimos
   enlaces (My account) se salían de la pantalla en móvil. */
.footer-fnav { display: flex; gap: 1.5rem; flex-wrap: wrap; min-width: 0; }
.footer-fnav .nav-link, .footer-fnav a {
    font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mid); text-decoration: none; transition: color .15s;
}
.footer-fnav .nav-link:hover, .footer-fnav a:hover { color: var(--fg); }

@media (max-width: 640px) {
    /* Padding lateral alineado con el resto del contenido en móvil (2.5rem
       dejaba muy poco ancho útil para el menú del pie, que acá es el más
       largo porque recoge los enlaces de tienda). */
    .footer-bottom { padding: 1rem 1.25rem; gap: .75rem; }
    .footer-fnav { gap: .5rem 1.1rem; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .single-data { padding: 3rem 2rem; }
}

@media (max-width: 767px) {
    .libro-layout { display: block; }
    .single-cover {
        position: relative; top: auto; height: auto;
        border-right: none; border-bottom: var(--rule);
        padding: 3rem 2rem;
    }
    .single-book { width: 55vw; max-width: 200px; }
    .single-data { padding: 2rem 1.5rem 3rem; }
    .s-gallery-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 540px) {
    .catalog-grid { grid-template-columns: 1fr; }
    .book-card-empty { display: none; }
    .hero-content { padding: 0 1.25rem 2rem; flex-direction: column; align-items: flex-start; gap: 1rem; }
    .hero-cta { align-self: flex-start; }
    .nav-links { padding: 0 1rem; gap: 1.25rem; }
    .nav-brand { padding: 0 1rem; }
    .nav-link.hide-mobile { display: none; }
    .footer-top { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
    .hero-title { font-size: 1.8rem; }
    .book-title { font-size: 1rem; }
}


/* ── Admin bar de WP no debe entrar al grid ── */
#wpadminbar {
    position: fixed !important;
}
/* Cuando admin bar está activa, compensar el nav sticky */
.admin-bar .nav {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .nav { top: 46px; }
}

/* ── DÓNDE CONSEGUIRLO — enlace a Distribución ── */
.s-distrib-link {
    display: flex; justify-content: space-between; align-items: center;
    border-top: var(--rule); border-bottom: var(--rule);
    padding: 1.1rem 0; margin-bottom: 2.5rem;
    transition: opacity .18s;
}
.s-distrib-link:hover { opacity: .65; }
.s-distrib-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--fg);
}
.s-distrib-arrow { font-size: 18px; color: var(--mid); }

/* ════════════════════════════════════════════════════
   PÁGINA PLANA / POST  (.page-flat)
   Columna central, imagen destacada arriba
   ════════════════════════════════════════════════════ */
.page-flat { width: 100%; }
.page-hero-img {
    width: 100%;
    max-height: 62vh;
    overflow: hidden;
    border-bottom: var(--rule);
}
.page-hero-img img {
    width: 100%; height: 100%;
    max-height: 62vh;
    object-fit: cover;
    display: block;
}
.page-body {
    max-width: var(--reading);
    margin: 0 auto;
    padding: 3.5rem var(--container-pad) 4.5rem;
}
.post-meta {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1.25rem;
}
.post-cat {
    font-size: 10px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--mid); transition: color .15s;
}
.post-cat:hover { color: var(--fg); }
.post-meta-sep { color: var(--dim); }
.post-date {
    font-family: var(--sans); font-style: italic;
    font-size: 12px; color: var(--dim);
}
.page-title {
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    font-weight: 600; letter-spacing: -.03em;
    line-height: 1; color: var(--fg);
    margin-bottom: 2.25rem;
}

/* Contenido Gutenberg */
/* Arché, como el resto del sitio: con Rescate (tipografía de titulares,
   sólo caja alta) el texto de las páginas salía todo en MAYÚSCULAS. */
.entry-rich {
    font-family: var(--sans);
    font-size: 1.08rem; line-height: 1.8;
    color: #3F3F3F;
}
.entry-rich p + p { margin-top: 1em; }
.entry-rich h2, .entry-rich h3, .entry-rich h4 {
    font-family: var(--sans); color: var(--fg);
    letter-spacing: -.02em; line-height: 1.15;
    margin: 2.2em 0 .7em;
}
.entry-rich h2 { font-size: 1.5rem; font-weight: 600; }
.entry-rich h3 { font-size: 1.2rem; font-weight: 600; }
.entry-rich h4 { font-size: 1rem;  font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.entry-rich a { color: var(--fg); border-bottom: 1px solid var(--linea); transition: border-color .15s; }
.entry-rich a:hover { border-color: var(--fg); }
.entry-rich blockquote {
    border-left: 2px solid var(--linea);
    padding-left: 1.5rem; margin: 1.8em 0;
    font-style: italic; color: var(--mid);
}
.entry-rich ul, .entry-rich ol { padding-left: 1.4rem; margin: 1em 0; }
.entry-rich li + li { margin-top: .4em; }
.entry-rich figure { margin: 2em 0; }
.entry-rich img { width: 100%; height: auto; }

/* Bloques de Gutenberg "ancho completo": escapan del container angosto
   de .page-body y se extienden hasta el borde real del browser — para
   imágenes y videos grandes intercalados en el texto, como en el sitio
   de referencia. ".alignwide" se queda un poco más contenido. */
.entry-rich .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.entry-rich .alignwide {
    width: calc(100% + 8rem);
    max-width: calc(var(--container) + 8rem);
    margin-left: -4rem;
}
@media (max-width: 900px) {
    .entry-rich .alignwide { width: 100%; max-width: 100%; margin-left: 0; }
}
.entry-rich figcaption {
    font-family: var(--sans); font-size: 11px;
    color: var(--dim); margin-top: .6rem;
    letter-spacing: .04em;
}
.entry-rich hr {
    border: none; border-top: var(--rule);
    margin: 2.5em 0;
}

/* ════════════════════════════════════════════════════
   BLOG — grilla 2 columnas, imagen cuadrada a sangre
   ════════════════════════════════════════════════════ */
.blog-grid {
    max-width: var(--container); margin: 0 auto;
    padding: 0 var(--container-pad);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--container-pad);
}
.blog-card { border: none; }
.blog-card-link {
    display: flex; flex-direction: column; height: 100%;
    transition: opacity .18s;
}
.blog-card-link:hover { opacity: .85; }
.blog-card-img {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--surface);
}
.blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.blog-card-link:hover .blog-card-img img { transform: scale(1.025); }
.blog-card-placeholder { width: 100%; height: 100%; background: var(--surface); }
.blog-card-info {
    padding: 1.5rem 2rem 2rem;
    display: flex; flex-direction: column; gap: .5rem; flex: 1;
}
.blog-card-meta {
    display: flex; align-items: center; gap: .5rem;
}
.blog-card-cat {
    font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.blog-card-date {
    font-family: var(--sans); font-style: italic;
    font-size: 11px; color: var(--dim);
}
.blog-card-title {
    font-size: 1.15rem; font-weight: 600;
    letter-spacing: -.02em; color: var(--fg); line-height: 1.15;
}
.blog-empty {
    grid-column: 1 / -1;
    padding: 4rem 2rem; text-align: center;
    font-family: var(--sans); font-style: italic; color: var(--dim);
}
.blog-pagination {
    display: flex; justify-content: space-between;
    padding: 1rem 2rem; border-bottom: var(--rule);
}
.blog-pagination a {
    font-size: 10px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mid); transition: color .15s;
}
.blog-pagination a:hover { color: var(--fg); }

/* ════════════════════════════════════════════════════
   AUTORES — grilla 3 columnas
   ════════════════════════════════════════════════════ */
.autores-intro {
    max-width: 720px;
    padding: 2.5rem 2rem 1rem;
}
.autores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.autor-card {
    border-right: var(--rule); border-bottom: var(--rule);
    padding: 0 0 2rem;
    display: flex; flex-direction: column;
}
.autor-card:nth-child(3n) { border-right: none; }
.autor-photo {
    aspect-ratio: 1; overflow: hidden; background: var(--surface);
    margin-bottom: 1.4rem;
    filter: grayscale(1) contrast(1.04);
    transition: filter .4s ease;
}
.autor-card:hover .autor-photo { filter: grayscale(0) contrast(1); }
.autor-photo img { width: 100%; height: 100%; object-fit: cover; }
.autor-photo-placeholder { width: 100%; height: 100%; background: var(--surface); }
.autor-name {
    font-size: 1.1rem; font-weight: 600;
    letter-spacing: -.02em; color: var(--fg);
    padding: 0 1.75rem; margin-bottom: .6rem;
}
.autor-bio {
    font-family: var(--sans);
    font-size: .92rem; line-height: 1.7;
    color: var(--mid);
    padding: 0 1.75rem; margin-bottom: 1.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.autor-libros {
    margin-top: auto;
    padding: .9rem 1.75rem 0;
    border-top: var(--rule);
    margin-left: 1.75rem; margin-right: 1.75rem;
    padding-left: 0; padding-right: 0;
    display: flex; flex-direction: column; gap: .4rem;
}
.autor-libro-link {
    font-size: 11px; font-weight: 600;
    letter-spacing: .06em;
    color: var(--mid); transition: color .15s;
}
.autor-libro-link:hover { color: var(--fg); }

/* ── Refinamientos generales ── */
::selection { background: var(--rosa); color: #fff; }
a:focus-visible, button:focus-visible {
    outline: 1px solid rgba(26,26,26,.5);
    outline-offset: 2px;
}

/* ── Responsive de las secciones nuevas ── */
@media (max-width: 900px) {
    .autores-grid { grid-template-columns: repeat(2, 1fr); }
    .autor-card:nth-child(3n) { border-right: var(--rule); }
    .autor-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 540px) {
    .blog-grid { grid-template-columns: 1fr; }
    .autores-grid { grid-template-columns: 1fr; }
    .autor-card { border-right: none !important; }
    .page-body { padding: 2.5rem 1.25rem 3.5rem; }
}


/* ════════════════════════════════════════════════════
   OFICINA DE SONIDO — capa WooCommerce
   ════════════════════════════════════════════════════ */

/* Portadas cuadradas (formato sonido: vinilo/CD), no 11.5×17 */
.ods-cover-square { aspect-ratio: 1 / 1; }
.ods-single-square { aspect-ratio: 1 / 1; }

/* ── Carrito en el nav ── */
.nav-cart {
    display: flex; align-items: center; gap: .5rem;
    padding: 0 1.5rem; border-left: var(--rule);
    flex-shrink: 0; transition: background .15s;
}
.nav-cart:hover { background: rgba(26,26,26,.05); }
.nav-cart-label {
    font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--mid);
}
.nav-cart:hover .nav-cart-label { color: var(--fg); }
.nav-cart-count {
    font-size: 10px; font-weight: 600; min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px; border-radius: 9px;
    background: var(--fg); color: var(--bg);
}

/* ── Caja de compra (buybox) en fichas ── */
.ods-buybox {
    border-top: var(--rule); border-bottom: var(--rule);
    padding: 1.75rem 0; margin-bottom: 2.5rem;
}
.ods-buybox-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.ods-price {
    font-size: 1.75rem; font-weight: 600;
    letter-spacing: -.02em; color: var(--fg);
}
.ods-price del { color: var(--dim); font-weight: 400; font-size: 1.1rem; margin-right: .5rem; }
.ods-price ins { text-decoration: none; }
.ods-stock {
    font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    padding: .3rem .6rem; border: 1px solid;
}
.ods-stock.in  { color: #2E7D32; border-color: #A9CBA9; }
.ods-stock.out { color: #B3261E; border-color: #E3B4B0; }

.ods-add-btn {
    display: inline-block; width: 100%; text-align: center;
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bg); background: var(--fg);
    border: 1px solid var(--fg); padding: 1rem 1.5rem;
    cursor: pointer; transition: all .15s;
}
.ods-add-btn:hover { background: transparent; color: var(--fg); }
.ods-add-btn--disabled { background: transparent; color: var(--mid); border-color: var(--linea); }
.ods-add-form { margin: 0; }
.ods-buybox-link {
    display: inline-block; margin-top: 1rem;
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--mid); transition: color .15s;
}
.ods-buybox-link:hover { color: var(--fg); }

/* ── Nota de envío ── */
.ods-shipping-note {
    display: flex; flex-direction: column; gap: .4rem;
    border-top: var(--rule); padding-top: 1.25rem; margin-top: auto;
}
.ods-shipping-label {
    font-size: 10px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--dim);
}
.ods-shipping-text {
    font-family: var(--sans); font-size: .92rem; color: var(--mid); line-height: 1.6;
}

/* ── Formulario nativo WC dentro del buybox ── */
.ods-buybox .quantity { display: inline-flex; margin-bottom: 1rem; }
.ods-buybox .quantity input.qty {
    width: 64px; background: transparent; color: var(--fg);
    border: 1px solid var(--linea); padding: .8rem; text-align: center;
    font-family: var(--sans); font-size: 14px;
}
.ods-buybox button.single_add_to_cart_button,
.ods-wc-page button.single_add_to_cart_button {
    display: block; width: 100%; text-align: center;
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--bg); background: var(--fg);
    border: 1px solid var(--fg); padding: 1rem 1.5rem;
    cursor: pointer; transition: all .15s; border-radius: 0;
}
.ods-buybox button.single_add_to_cart_button:hover { background: transparent; color: var(--fg); }
.ods-buybox .variations { width: 100%; margin-bottom: 1rem; }
.ods-buybox .variations td, .ods-buybox .variations th { padding: .4rem 0; }
.ods-buybox .variations select {
    background: transparent; color: var(--fg);
    border: 1px solid var(--linea); padding: .7rem; font-family: var(--sans);
}

/* ── Tienda: grilla calca el catálogo ──
   .wc-block-grid__products es la grilla de los BLOQUES de productos (la que
   usa el "New in store" del carrito vacío). Viene con su propio maquetado en
   flex y clases has-4-columns/has-5-columns; se la trae a la misma grilla de
   3 columnas del catálogo para que no haya dos criterios en el sitio. */
.woocommerce ul.products,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
.wc-block-grid__products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--container-pad);
    margin: 0 !important; padding: 0 !important; list-style: none;
}
/* Las clases de columnas del bloque no manejan el ancho: manda la grilla */
.wc-block-grid.has-2-columns .wc-block-grid__products,
.wc-block-grid.has-4-columns .wc-block-grid__products,
.wc-block-grid.has-5-columns .wc-block-grid__products,
.wc-block-grid.has-6-columns .wc-block-grid__products {
    grid-template-columns: repeat(3, 1fr);
}
/* WooCommerce le mete un clearfix (::before y ::after con display:table) a
   ul.products. En un contenedor grid esos pseudo-elementos cuentan como
   celdas reales: ocupan la primera y la última, y empujan la tarjeta 1 a la
   segunda columna dejando el hueco de arriba a la izquierda. Anularlos. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products.columns-2::before,
ul.products.columns-2::after,
.wc-block-grid__products::before,
.wc-block-grid__products::after {
    content: none !important;
    display: none !important;
}
.woocommerce ul.products li.product,
ul.products li.book-card,
.wc-block-grid__product {
    width: auto !important; margin: 0 !important; float: none !important;
    border: none;
}
/* El bloque centra el texto de sus tarjetas y les pone padding propio; la
   tarjeta del tema alinea a la izquierda y estira hasta el borde. */
.wc-block-grid__product {
    max-width: none !important; padding: 0 !important;
    text-align: left !important;
    display: flex; flex-direction: column;
}
ul.products li.book-card .book-ficha.is-out,
.wc-block-grid__product .book-ficha.is-out { color: var(--dim); }
ul.products li.book-card .book-ficha.is-out::after,
.wc-block-grid__product .book-ficha.is-out::after { content: ''; }

/* ── Páginas WC genéricas (carrito, checkout, cuenta, ficha de producto) ── */
.ods-wc-page {
    max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad) 4rem;
}
.ods-wc-page,
.ods-wc-page .woocommerce {
    color: var(--fg);
}
/* El H1 de las páginas de tienda (SHOP, CART, CHECKOUT) es el título de la
   página: va en Cumbia como todos los H1 del sitio. Antes caía en la regla
   de abajo, que por ser más específica que la jerarquía global lo pasaba a
   Arché. Los H2/H3 sí siguen en la tipografía de interfaz. */
.ods-wc-page h1,
.ods-wc-page .page-title {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .045em;
    line-height: .95;
    font-weight: 400;
    color: var(--fg);
    margin-bottom: 1rem;
}
.ods-wc-page h2, .ods-wc-page h3 {
    font-family: var(--sans); font-weight: 600; letter-spacing: -.02em; color: var(--fg);
    margin-bottom: 1rem;
}
.ods-wc-page table, .ods-wc-page th, .ods-wc-page td {
    border-color: var(--linea) !important; color: var(--fg);
}
.ods-wc-page .woocommerce-cart-form table.cart td,
.ods-wc-page table.shop_table th,
.ods-wc-page table.shop_table td {
    border-top: var(--rule); padding: 1rem; background: transparent;
}
.ods-wc-page a { color: var(--fg); }
.ods-wc-page input[type=text],
.ods-wc-page input[type=email],
.ods-wc-page input[type=tel],
.ods-wc-page input[type=password],
.ods-wc-page input[type=number],
.ods-wc-page textarea,
.ods-wc-page select,
.ods-wc-page .select2-selection {
    background: var(--surface) !important; color: var(--fg) !important;
    border: 1px solid var(--linea) !important; border-radius: 0 !important;
    padding: .7rem !important; font-family: var(--sans) !important;
}
.ods-wc-page .button,
.ods-wc-page button,
.ods-wc-page input[type=submit],
.ods-wc-page a.button,
.ods-wc-page .checkout-button {
    background: var(--fg) !important; color: var(--bg) !important;
    border: 1px solid var(--fg) !important; border-radius: 0 !important;
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
    padding: .9rem 1.5rem !important; transition: all .15s;
}
.ods-wc-page .button:hover,
.ods-wc-page button:hover,
.ods-wc-page input[type=submit]:hover,
.ods-wc-page a.button:hover,
.ods-wc-page .checkout-button:hover {
    background: transparent !important; color: var(--fg) !important;
}
.ods-wc-page .cart_totals h2,
.ods-wc-page .order-total .amount { color: var(--fg); }
.ods-wc-page .woocommerce-message,
.ods-wc-page .woocommerce-info,
.ods-wc-page .woocommerce-error {
    background: var(--surface); border-top: 2px solid var(--fg); color: var(--fg);
    padding: 1rem 1.25rem; list-style: none;
}

/* ── Responsive tienda ── */
@media (max-width: 900px) {
    .ods-product-layout .single-data { padding: 3rem 2rem; }
}
@media (max-width: 540px) {
    .woocommerce ul.products,
    ul.products.columns-2 { grid-template-columns: 1fr; }
    .nav-cart { padding: 0 1rem; }
}


/* ════════════════════════════════════════════════════
   JERARQUÍA TIPOGRÁFICA GLOBAL — Oficina de Sonido
   H1  → Cumbia, ALL CAPS (display)
   H2/H3 → Rescate
   Resto → Arché
   ════════════════════════════════════════════════════ */

body { font-family: var(--sans); }

h1,
.hero-title,
.s-title,
.page-title {
    font-family: var(--display);
    text-transform: uppercase;
    /* Cumbia en mayúsculas necesita aire: pegada se lee apretada. */
    letter-spacing: .045em;
    line-height: .95;
    font-weight: 400;
}

h2, h3,
.book-title,
.blog-card-title,
.entry-rich h2,
.entry-rich h3 {
    font-family: var(--sub);
    font-weight: 400;
    letter-spacing: 0;
}

/* Cumbia es muy display: además de limpiar el tracking negativo heredado,
   se le abre el espaciado, que apretado hacía ilegibles los títulos. */
.hero-title, .s-title, .page-title,
.woocommerce div.product .product_title { letter-spacing: .045em; }

/* Acentos de color de marca en enlaces de contenido */
.entry-rich a { border-bottom-color: var(--rosa); }
.entry-rich a:hover { border-bottom-color: var(--fg); }
::selection { background: var(--rosa); color: #fff; }

/* Botón de compra con identidad: verde de marca opcional.
   Por defecto se mantiene el blanco del tema; descomenta para verde:
.ods-add-btn, .ods-buybox button.single_add_to_cart_button {
    background: var(--verde); border-color: var(--verde); color: #fff;
}
*/


/* ════════════════════════════════════════════════════
   TARJETAS — hover, zoom y crossfade (ref. Hologram)
   ════════════════════════════════════════════════════ */

/* La foto llena su recuadro; el color identitario queda de marco.
   El recuadro manda: la foto se recorta centrada (object-fit: cover), así
   sirve cualquier proporción de original —cuadrada, apaisada o vertical—
   sin deformarse ni dejar franjas vacías.
   Los !important son necesarios: WooCommerce impone height:auto a las
   imágenes del loop con un selector más específico, y sin esto la foto
   conservaba su alto natural y no llenaba el cuadrado. */
.book-cover { position: relative; overflow: hidden; }
.woocommerce ul.products li.product .book-cover img,
.book-cover .cov-img,
.book-cover img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    max-width: none; margin: 0;
    object-fit: cover; object-position: center; display: block;
    transition: transform .7s cubic-bezier(.2,.6,.2,1), opacity .45s ease;
    will-change: transform, opacity;
}

/* Zoom suave al pasar el mouse */
.book-card-link:hover .cov-img { transform: scale(1.05); }

/* Crossfade a la segunda foto (solo si el producto tiene galería) */
.book-cover.has-hover .cov-hover { opacity: 0; }
.book-card-link:hover .book-cover.has-hover .cov-primary { opacity: 0; }
.book-card-link:hover .book-cover.has-hover .cov-hover   { opacity: 1; }

/* Bajada / descriptor bajo el título (Rescate) */
.book-bajada {
    font-family: var(--sub);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--mid);
    margin-top: .3rem;
}
.book-card-link:hover .book-bajada { color: var(--fg); }

/* En la tienda esa misma caja lleva el precio: fuente de texto (los
   números de Rescate bailan), 18px y color de marca como acento. */
.woocommerce ul.products .book-bajada,
.woocommerce ul.products .book-bajada .amount,
.wc-block-grid__product .book-bajada,
.wc-block-grid__product .book-bajada .amount {
    font-family: var(--sans);
    font-size: 1.125rem; line-height: 1.2;
    color: var(--acento); margin-top: .1rem;
}
.woocommerce ul.products .book-bajada del,
.wc-block-grid__product .book-bajada del { color: var(--dim); margin-right: .4rem; }
.woocommerce ul.products .book-bajada del .amount,
.wc-block-grid__product .book-bajada del .amount { color: var(--dim); }
.woocommerce ul.products .book-bajada ins,
.wc-block-grid__product .book-bajada ins { text-decoration: none; }

/* El bloque de info respira más, como en Hologram */
.book-info { padding-top: 1.25rem; }
.book-title { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
    .book-cover .cov-img,
    .book-cover img { transition: none; }
    .book-card-link:hover .cov-img { transform: none; }
}

/* ════════════════════════════════════════════════════
   ESCALONES DE LA GRILLA
   3 columnas en escritorio (ref. Hologram), 2 en pantallas medianas,
   1 en teléfono. Sin esto, tres columnas en un portátil dejan tarjetas
   demasiado angostas y el texto se amontona.
   ════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .catalog-grid,
    .blog-grid,
    .woocommerce ul.products,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-5-columns .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .catalog-grid,
    .blog-grid,
    .woocommerce ul.products,
    ul.products.columns-2,
    ul.products.columns-3,
    ul.products.columns-4,
    .wc-block-grid__products,
    .wc-block-grid.has-4-columns .wc-block-grid__products,
    .wc-block-grid.has-5-columns .wc-block-grid__products { grid-template-columns: 1fr; }
    .book-card-empty { display: none; }
}

/* ════════════════════════════════════════════════════
   CARRITO / CHECKOUT / MI CUENTA — bloques de WooCommerce
   Estas páginas son páginas normales de WordPress, así que su contenido
   cae dentro de .entry-rich: heredaban Rescate (la tipografía de citas y
   titulares) a 13px para NOMBRES, METADATOS y TOTALES, y quedaban con la
   medida de lectura de 1024px. De ahí venían los problemas de tipografía,
   tamaño y proporción del carrito.
   Aquí se los trata como INTERFAZ, no como texto: fuente de UI, tamaños
   de UI y ancho amplio.
   ════════════════════════════════════════════════════ */

/* 1. Ancho: una tabla de compra no es texto corrido, no va a 1024px */
.entry-rich .wp-block-woocommerce-cart,
.entry-rich .wp-block-woocommerce-checkout {
    width: calc(100vw - (var(--container-pad) * 2));
    max-width: var(--container);
    margin-left: calc(50% - min(50vw - var(--container-pad), var(--container) / 2));
    margin-right: 0;
}

/* 2. Tipografía: toda la UI de compra vuelve a Arché, tamaño legible */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout,
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout * {
    font-family: var(--sans);
}
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--fg);
}

/* 3. Jerarquía real dentro del carrito */
.wc-block-cart-items__header,
.wc-block-cart-items__header th {
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mid) !important;
    border-bottom: var(--rule);
    padding-bottom: .75rem;
}
.wc-block-components-product-name {
    font-size: 1.15rem !important;
    font-weight: 600;
    line-height: 1.25;
    color: var(--fg) !important;
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
    font-size: .875rem !important;
    line-height: 1.5;
    color: var(--mid) !important;
    text-transform: none;
}
.wc-block-components-product-price,
.wc-block-cart-item__total {
    font-size: 1rem;
    color: var(--fg);
}

/* 4. Miniatura: 64px es un ícono, no una foto de producto */
.wc-block-cart-item__image { width: 120px !important; }
.wc-block-cart-item__image img {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover;
}

/* 5. Columna de totales */
.wc-block-components-totals-item__label {
    font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mid);
}
.wc-block-components-totals-item__value { font-size: 1rem; color: var(--fg); }
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 1.35rem !important;
    letter-spacing: 0;
    color: var(--fg) !important;
}
.wc-block-components-totals-item { padding: .6rem 0; }

/* 6. Superficies y bordes sobre crema */
.wc-block-cart .wc-block-components-sidebar,
.wc-block-checkout .wc-block-components-sidebar {
    background: var(--surface);
    padding: 1.5rem;
    border: var(--rule);
}
.wc-block-cart-items td,
.wc-block-cart-items th { border-color: var(--linea) !important; }
.wc-block-components-panel__button { color: var(--fg) !important; }

/* 7. Botón de compra con la misma lengua que el resto del tema */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--fg) !important;
    color: var(--bg) !important;
    border: 1px solid var(--fg) !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: 1.1rem 1.5rem !important;
    transition: all .15s;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: transparent !important;
    color: var(--fg) !important;
}

/* 8. Campos de formulario del checkout sobre crema */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--linea) !important;
    border-radius: 0 !important;
}

@media (max-width: 900px) {
    .entry-rich .wp-block-woocommerce-cart,
    .entry-rich .wp-block-woocommerce-checkout {
        width: 100%; margin-left: 0; max-width: 100%;
    }
    .wc-block-cart-item__image { width: 84px !important; }
    .wc-block-cart-item__image img { width: 76px !important; height: 76px !important; }
}

/* ── 9. Botones de los bloques de producto: red de seguridad ──
   La tarjeta ya se dibuja con el markup del tema (ver ods_product_card_inner
   en functions.php), así que este botón normalmente ni aparece. Se deja porque
   los bloques más nuevos —Product Collection— NO pasan por ese filtro y
   vuelven a pintar el suyo: pastilla de border-radius 9999px sobre #32373c,
   un gris que no está en la paleta, y con el texto casi negro encima, o sea
   ilegible. Acá se iguala al botón del resto de la tienda: cuadrado, negro,
   mayúsculas, y con contraste de verdad. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-collection .wp-block-button__link {
    background-color: var(--fg) !important;
    color: var(--bg) !important;
    border: 1px solid var(--fg) !important;
    border-radius: 0 !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    padding: .9rem 1.5rem !important;
    transition: background-color .15s, color .15s;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-woocommerce-product-collection .wp-block-button__link:hover {
    background-color: transparent !important;
    color: var(--fg) !important;
}

/* ── Lupa del lightbox: cuadrada como todo lo demás ──
   WooCommerce la dibuja como círculo (border-radius 100%). En un tema sin una
   sola esquina redondeada, era el único elemento con radio. */
.woocommerce-product-gallery__trigger {
    border-radius: 0 !important;
    background: var(--bg) !important;
    color: var(--fg) !important;
    box-shadow: none !important;
}

/* ── Newsletter de Kit / ConvertKit ──
   El embed llega con su propia hoja de estilos: input de radio 4px, botón de
   radio 24px en un verde #01B92A que NO es el --verde de la marca (#5DB95A), y
   un sello "powered by" también redondeado. Aparece en el pie de TODAS las
   páginas, así que era la inconsistencia más repetida del sitio.
   Se le pasa el lenguaje del tema: esquinas rectas y el verde correcto. */
.ods-newsletter .formkit-input,
.ods-newsletter input[type=email],
.ods-newsletter input[type=text] {
    border-radius: 0 !important;
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--linea) !important;
    font-family: var(--sans) !important;
}
.ods-newsletter .formkit-submit,
.ods-newsletter button[type=submit] {
    border-radius: 0 !important;
    background-color: var(--verde) !important;
    color: var(--negro) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    transition: background-color .15s, color .15s;
}
.ods-newsletter .formkit-submit > span { color: inherit !important; }
.ods-newsletter .formkit-submit:hover {
    background-color: var(--fg) !important;
    color: var(--bg) !important;
}
.ods-newsletter .formkit-powered-by-convertkit { border-radius: 0 !important; }

/* ════════════════════════════════════════════════════
   FICHA DE PRODUCTO (plantilla nativa de WooCommerce)
   El tema trae su propia plantilla en woocommerce/single-product.php, pero
   NO se usa: al existir woocommerce.php en la raíz, WooCommerce ignora las
   plantillas de página del tema. Se estiliza la nativa, que sí trae galería
   y los botones de pago express.
   ════════════════════════════════════════════════════ */

/* Aire bajo el header: el contenido arrancaba pegado al bloque rosa y el
   título quedaba comido por el borde. */
.ods-wc-page { padding-top: 2.5rem; }

/* Dos columnas: foto grande a la izquierda, compra a la derecha. Lo demás
   (pestañas, relacionados, avisos) cruza a todo el ancho. */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 3.5rem;
    align-items: start;
}
.woocommerce div.product > * { grid-column: 1 / -1; }
.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.woocommerce div.product > .summary { grid-column: 2; grid-row: 1; }
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary {
    width: 100% !important; float: none !important; margin: 0 !important;
}
.woocommerce div.product .woocommerce-product-gallery__image img { border: none; }

/* Miniaturas de la galería en fila, cuadradas */
.woocommerce div.product .flex-control-thumbs {
    display: grid !important; grid-template-columns: repeat(5, 1fr);
    gap: 8px; margin-top: 8px !important;
}
.woocommerce div.product .flex-control-thumbs li { width: 100% !important; margin: 0 !important; }
.woocommerce div.product .flex-control-thumbs img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    opacity: .6; transition: opacity .15s;
}
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }

/* Tipografía de la ficha, en la escala del resto del sitio */
.woocommerce div.product .product_title {
    font-family: var(--display);
    font-size: clamp(2rem, 3.4vw, 3.25rem);
    text-transform: uppercase; line-height: .95;
    color: var(--fg); margin-bottom: 1rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--sans) !important;
    font-size: 1.9rem !important; font-weight: 600;
    color: var(--acento) !important;
    margin-bottom: .5rem;
}
.woocommerce div.product p.price del { color: var(--dim); font-size: 1.1rem; }
.woocommerce div.product p.stock {
    font-size: 11px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mid);
}
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1rem; line-height: 1.6; color: var(--mid);
    padding: 1.25rem 0; border-top: var(--rule); margin-top: 1.25rem;
}

/* Cantidad y botón principal */
.woocommerce div.product form.cart { margin: 1.5rem 0 !important; }
/* El !important es para ganarle a la regla genérica de campos de
   .ods-wc-page, que también lo lleva; si no, el número queda oscuro
   sobre oscuro. */
.woocommerce div.product form.cart .quantity input.qty {
    background: var(--bg) !important; color: var(--fg) !important;
    border: 1px solid var(--linea) !important; border-radius: 0 !important;
    padding: .85rem !important; width: 72px; text-align: center;
    font-family: var(--sans) !important; font-size: 1rem;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
    background: var(--fg) !important; color: var(--bg) !important;
    border: 1px solid var(--fg) !important; border-radius: 0 !important;
    font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: .12em !important; text-transform: uppercase !important;
    padding: 1.05rem 2rem !important; transition: all .15s;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background: transparent !important; color: var(--fg) !important;
}

/* Metadatos (SKU, categoría, marca) */
.woocommerce div.product .product_meta {
    font-size: 12px; letter-spacing: .04em; color: var(--mid);
    border-top: var(--rule); padding-top: 1rem; margin-top: 1.5rem;
}

/* Pestañas Descripción / Reseñas */
.woocommerce div.product .woocommerce-tabs { margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0 !important; margin: 0 0 1.5rem !important;
    border-bottom: var(--rule); display: flex; gap: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; margin: 0 !important; padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--mid) !important; padding: .85rem 1.25rem !important;
    display: block; border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--fg) !important; border-bottom-color: var(--fg);
}
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-family: var(--sub); font-size: 1.5rem; color: var(--fg); margin-bottom: .75rem;
}
/* Descripción larga: medida de lectura.
   Ocupaba los 1381px del contenedor —líneas de 180 caracteres, imposibles de
   seguir—. Se acota a 47em, que a 1.2rem son unos 900px y, al estar en em,
   acompaña al tamaño de letra en vez de quedar clavado en píxeles. */
.woocommerce div.product .woocommerce-tabs .panel {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--fg);
    max-width: 47em;
    padding-top: .5rem;
}
.woocommerce div.product .woocommerce-tabs .panel p + p { margin-top: 1em; }
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol { padding-left: 1.3em; margin: 1em 0; }
.woocommerce div.product .woocommerce-tabs .panel li + li { margin-top: .4em; }
.woocommerce div.product .woocommerce-tabs .panel img { height: auto; margin: 1.5em 0; }

@media (max-width: 900px) {
    .woocommerce div.product { grid-template-columns: 1fr; gap: 2rem; }
    .woocommerce div.product > .woocommerce-product-gallery,
    .woocommerce div.product > .summary { grid-column: 1; grid-row: auto; }
}

/* ════════════════════════════════════════════════════
   BARRA SUPERIOR — aviso + selector de moneda (ref. Hologram)
   El selector lo dibuja el plugin FOX (WOOCS); aquí sólo se le da la
   apariencia del sitio, tanto si sale como <select> nativo como si sale
   con el desplegable propio del plugin.
   ════════════════════════════════════════════════════ */
.ods-topbar {
    background: var(--fg);
    color: var(--bg);
    font-family: var(--sans);
    font-size: 15px;   /* legible de verdad: a 12px la barra pasaba inadvertida */
    position: relative;
    z-index: 210;
}
.ods-topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding-top: .75rem; padding-bottom: .75rem;
    min-height: 60px;   /* el doble que antes */
}
.ods-topbar-msg { letter-spacing: .01em; }
.ods-topbar-currency { margin-left: auto; display: flex; align-items: center; }

/* Selector nativo */
.ods-topbar-currency select,
.ods-topbar-currency .woocommerce-currency-switcher {
    background: transparent !important;
    color: var(--bg) !important;
    border: 1px solid rgba(244,244,242,.35) !important;
    border-radius: 0 !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    padding: .35rem 1.75rem .35rem .6rem !important;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}
.ods-topbar-currency select option { background: var(--bg); color: var(--fg); }

/* Desplegable propio del plugin (woocs_drop_down_view) */
.ods-topbar-currency .woocs_flag_view_item,
.ods-topbar-currency .woocs-style-1,
.ods-topbar-currency .woocs_price_code { color: var(--bg) !important; }
.ods-topbar-currency ul { list-style: none; margin: 0; padding: 0; }
.ods-topbar-currency a { color: var(--bg); }

/* Móvil: la cinta sigue siendo una BANDA de una sola línea con el selector de
   moneda a la derecha, igual que en desktop. Antes se apilaba en columna y la
   barra pasaba a ocupar dos filas, que era justo lo que rompía la lectura del
   banner animado. Sólo se ajusta la escala y el ancho del degradado de los
   bordes (2rem sobre 390px se comía un tercio de la cinta). */
@media (max-width: 640px) {
    /* Banda deliberadamente BAJA: en móvil los 60px de alto y los 15px de
       cuerpo del desktop se comían una franja enorme de una pantalla que ya es
       corta. Sin min-height, la altura la fija el propio contenido y el padding
       vertical —idéntico arriba y abajo— la centra. */
    .ods-topbar { font-size: 11px; }
    .ods-topbar-inner {
        gap: .5rem;
        min-height: 0;
        padding-top: .3rem; padding-bottom: .3rem;
    }
    .ods-topbar-currency { flex-shrink: 0; }
    .ods-topbar-currency select,
    .ods-topbar-currency .woocommerce-currency-switcher {
        font-size: 11px !important;
        padding: .2rem 1.35rem .2rem .4rem !important;
        line-height: 1.2 !important;
    }
    .ods-marquee {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 .75rem, #000 calc(100% - .75rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 .75rem, #000 calc(100% - .75rem), transparent 100%);
    }
    .ods-marquee .ods-topbar-msg { padding-right: 2.25rem; }
}

/* ════════════════════════════════════════════════════
   NEWSLETTER (embed de Kit / ConvertKit) sobre el footer
   ════════════════════════════════════════════════════ */
.ods-newsletter {
    border-top: var(--rule);
    background: var(--bg);
}
.ods-newsletter-inner {
    padding-top: 3rem; padding-bottom: 3rem;
    display: flex; flex-direction: column; gap: 1rem;
    align-items: flex-start;
}
.ods-newsletter-title {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .045em;
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    line-height: 1;
    color: var(--fg);
}
.ods-newsletter .convertkit-form { width: 100%; max-width: var(--reading); }
/* El embed trae sus propios estilos; sólo se acota para que no se desborde. */
.ods-newsletter .convertkit-form * { max-width: 100%; }

/* ── Selector de moneda de FOX dentro de la barra superior ──
   FOX no usa un <select> normal: lo reemplaza por su propio desplegable
   (.dd-container / .dd-select), que traía fondo gris claro, 57px de alto y
   una segunda línea con el nombre de la moneda. Sobre la barra oscura eso
   se veía como una caja blanca sobresaliendo. Aquí se compacta a una sola
   línea con la apariencia del sitio. */
.ods-topbar-currency .dd-container { width: auto !important; }
.ods-topbar-currency .dd-select {
    background: transparent !important;
    border: 1px solid rgba(244,244,242,.35) !important;
    border-radius: 3px !important;
    width: auto !important;
    height: auto !important;
}
.ods-topbar-currency .dd-selected {
    color: var(--bg) !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    padding: .45rem 1.8rem .45rem .7rem !important;
    margin: 0 !important;
}
/* Segunda línea ("Mexican Pesos"): sobra, el código ya lo dice */
.ods-topbar-currency .dd-selected-description,
.ods-topbar-currency .dd-selected-description-truncated,
.ods-topbar-currency .dd-option-description { display: none !important; }
.ods-topbar-currency .dd-selected-text {
    font-weight: 400 !important; color: var(--bg) !important;
}
.ods-topbar-currency .dd-pointer {
    border-color: var(--bg) transparent transparent transparent !important;
    right: .55rem !important;
}
.ods-topbar-currency .dd-pointer-up {
    border-color: transparent transparent var(--bg) transparent !important;
}
/* Menú desplegado: claro sobre el fondo del sitio */
.ods-topbar-currency .dd-options {
    background: var(--bg) !important;
    border: 1px solid var(--linea) !important;
    border-radius: 3px !important;
    width: auto !important; min-width: 160px;
}
.ods-topbar-currency .dd-option {
    background: transparent !important;
    color: var(--fg) !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    padding: .6rem .8rem !important;
    border-bottom: 1px solid var(--linea) !important;
}
.ods-topbar-currency .dd-option:last-child { border-bottom: none !important; }
.ods-topbar-currency .dd-option:hover,
.ods-topbar-currency .dd-option-selected { background: var(--surface) !important; }
.ods-topbar-currency .dd-option-text { color: var(--fg) !important; font-weight: 400 !important; }

/* ── Header con imagen de fondo (opción "Imagen" en el Customizer) ──
   Trama del circuito con degradado rosa→verde de la marca. Va a sangre y
   se recorta al centro, así el degradado se mantiene visible a cualquier
   ancho. El logo amarillo y el wordmark verde se apoyan encima. */
.site-header.header-imagen {
    background-image: url('../header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--rosa);   /* color de respaldo mientras carga */
}

/* ── Ficha de producto en móvil: evitar el desborde horizontal ──
   FlexSlider (la galería de WooCommerce) fija el ancho de la diapositiva en
   píxeles según el tamaño natural de la foto (p. ej. 500px). Como los hijos
   de un grid no encogen por debajo de su contenido (min-width:auto), esa
   columna se quedaba en 500px dentro de una pantalla de 399px y empujaba
   toda la página: aparecía scroll horizontal y la foto se salía de cuadro.
   min-width:0 permite que la columna encoja; el resto acota la galería. */
.woocommerce div.product > * { min-width: 0; }
.woocommerce div.product .woocommerce-product-gallery {
    max-width: 100%;
    overflow: hidden;
}
.woocommerce div.product .flex-viewport { max-width: 100% !important; }
/* OJO: no forzar width:100% en la diapositiva ni en su enlace. Ese 100% se
   calcula sobre el carril del carrusel (que mide el ancho de TODAS las fotos
   juntas), y la imagen salía enorme. FlexSlider ya les asigna el ancho
   correcto en píxeles; con min-width:0 arriba, ese cálculo ya da bien. */
.woocommerce div.product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}
/* Red de seguridad: ningún elemento debe generar scroll lateral */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Ficha: fuera los botones de pago express ──
   PayPal Payments inserta Apple Pay / Google Pay / PayPal / SEPA (el bloque
   .ppc-button-wrapper) justo bajo "Add to cart". En la ficha compiten con el
   botón principal y saltan el paso de elegir cantidad; su lugar es el
   carrito y el checkout, donde siguen apareciendo.
   Esto los oculta; para que además no se carguen, hay que desmarcar la
   página de producto en los ajustes del plugin de PayPal. */
body.single-product .ppc-button-wrapper,                        /* PayPal, SEPA */
body.single-product #wc-stripe-express-checkout-element,        /* Apple Pay, Google Pay, Link */
body.single-product #wc-stripe-express-checkout-element-applePay,
body.single-product #wc-stripe-express-checkout-element-googlePay,
body.single-product #wc-stripe-express-checkout-button-separator,
body.single-product .wc-stripe-express-checkout-element,
body.single-product .wcpay-payment-request-wrapper,
body.single-product .wc-block-components-express-payment,
body.single-product #wc-stripe-payment-request-wrapper,
body.single-product #wc-stripe-payment-request-button-separator { display: none !important; }

/* La descripción corta ocupa ese lugar: es lo que debe leerse antes de comprar */
.woocommerce div.product .woocommerce-product-details__short-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--fg);
}
.woocommerce div.product .woocommerce-product-details__short-description p + p { margin-top: .8em; }

/* ════════════════════════════════════════════════════
   DATOS TÉCNICOS — estilo de bloque para fichas de instrumentos
   Se aplica desde Gutenberg: bloque de lista o de tabla → Estilos →
   "Datos técnicos". Cada fila queda separada por un filete, con la
   etiqueta en versalitas y el valor alineado a la derecha.
   En una lista, escribe cada punto así:  **Alimentación** 9V DC 300mA
   (la parte en negrita es la etiqueta).
   ════════════════════════════════════════════════════ */
.is-style-ods-specs {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 2rem 0;
    border-top: var(--rule);
    max-width: 47em;
}
.is-style-ods-specs li {
    display: flex; flex-wrap: wrap; gap: .3rem 2rem;
    justify-content: space-between; align-items: baseline;
    padding: .75rem 0; border-bottom: var(--rule);
    line-height: 1.45; color: var(--fg);
}
.is-style-ods-specs li::marker { content: none; }
.is-style-ods-specs li strong,
.is-style-ods-specs li b {
    font-weight: 600; color: var(--mid);
    text-transform: uppercase; letter-spacing: .1em;
    font-size: .78em; flex-shrink: 0;
}

/* Variante en tabla: mismo lenguaje visual */
.wp-block-table.is-style-ods-specs { margin: 2rem 0; max-width: 47em; }
.wp-block-table.is-style-ods-specs table {
    border-collapse: collapse; width: 100%; border: none;
}
.wp-block-table.is-style-ods-specs td,
.wp-block-table.is-style-ods-specs th {
    border: none !important; border-bottom: var(--rule) !important;
    padding: .75rem 1rem .75rem 0; text-align: left; color: var(--fg);
}
.wp-block-table.is-style-ods-specs tr td:first-child,
.wp-block-table.is-style-ods-specs tr th:first-child {
    color: var(--mid); text-transform: uppercase;
    letter-spacing: .1em; font-size: .78em; font-weight: 600;
    width: 38%;
}
.wp-block-table.is-style-ods-specs figcaption {
    font-size: .8rem; color: var(--mid); margin-top: .5rem;
}

@media (max-width: 560px) {
    .is-style-ods-specs li { flex-direction: column; gap: .15rem; }
    .wp-block-table.is-style-ods-specs tr td:first-child { width: 45%; }
}

/* ── Botones de contenido (Gutenberg): bloque Botón → Estilos → ODES ──
   Mismo lenguaje que "Add to cart": rectángulo sólido, versalitas y
   tracking amplio. Pensado para "Manual en PDF", fichas, documentación. */
.wp-block-button.is-style-ods-solido .wp-block-button__link,
.wp-block-button.is-style-ods-rosa .wp-block-button__link {
    font-family: var(--sans);
    font-size: 12px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 1.05rem 2rem;
    border-radius: 0;
    transition: background .15s, color .15s;
    display: inline-block;
}
.wp-block-button.is-style-ods-solido .wp-block-button__link {
    background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
}
.wp-block-button.is-style-ods-solido .wp-block-button__link:hover {
    background: transparent; color: var(--fg);
}
.wp-block-button.is-style-ods-rosa .wp-block-button__link {
    background: var(--rosa); color: #fff; border: 1px solid var(--rosa);
}
.wp-block-button.is-style-ods-rosa .wp-block-button__link:hover {
    background: transparent; color: var(--rosa);
}
.wp-block-buttons { margin: 2rem 0; }

/* Lista de "Features": viñetas discretas y aire, medida de lectura */
.woocommerce div.product .woocommerce-tabs .panel ul:not(.is-style-ods-specs) {
    max-width: 47em;
}
.woocommerce div.product .woocommerce-tabs .panel ul:not(.is-style-ods-specs) li {
    padding-left: .2em; margin-bottom: .35em;
}

/* ── Cinta que corre en la barra superior ──
   La pista lleva el mensaje repetido 12 veces (6 + 6 idénticas). La
   animación la desplaza justo la mitad y vuelve a empezar: como esa mitad
   es idéntica a la otra, el empalme es invisible y el movimiento parece
   infinito. */
.ods-marquee {
    flex: 1; min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}
.ods-marquee-track {
    display: flex;
    width: max-content;
    animation: ods-marquee 60s linear infinite;   /* vuelta completa */
}
.ods-marquee .ods-topbar-msg {
    white-space: nowrap;
    padding-right: 3.5rem;   /* separación entre repeticiones */
}
/* Se detiene al pasar el ratón, para poder leerlo con calma */
.ods-marquee:hover .ods-marquee-track { animation-play-state: paused; }

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

/* Quien pide menos animación en su sistema ve la cinta quieta */
@media (prefers-reduced-motion: reduce) {
    .ods-marquee-track { animation: none; }
}

/* ── "Related products": banda propia al pie de la ficha ──
   Se saca del ancho de contenido para ocupar todo el navegador (la fórmula
   calc(-50vw + 50%) es la misma que usa .alignfull) y se le da un fondo
   amarillo muy diluido: separa la sección sin competir con las fotos.
   El padding lateral alinea las tarjetas con el resto del contenido. */
.woocommerce div.product section.related.products,
.woocommerce div.product section.upsells.products {
    margin: 5rem calc(-50vw + 50%) 0;
    width: 100vw;
    background: rgba(255, 215, 0, .10);   /* amarillo de marca al 10% */
    border-top: var(--rule);
    padding: 3.5rem max(20px, calc(50vw - 800px)) 4rem;
}
.woocommerce div.product section.related.products > h2,
.woocommerce div.product section.upsells.products > h2 {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: .045em;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    line-height: 1;
    color: var(--fg);
    margin-bottom: 2rem;
}

/* Cinta clicable (cuando hay enlace definido en el Customizer) */
a.ods-marquee-link { text-decoration: none; color: inherit; cursor: pointer; display: block; }
a.ods-marquee-link .ods-topbar-msg { transition: color .15s; }
a.ods-marquee-link:hover .ods-topbar-msg { color: var(--amarillo); }

/* ── Alias cortos para el EDITOR CLÁSICO ──
   WooCommerce edita los productos con el editor clásico, donde no existe el
   panel de "Estilos" de bloques. Estas clases hacen lo mismo y se escriben
   a mano en la pestaña Code:
     <table class="ods-specs">  …datos técnicos
     <a class="ods-btn" href="…">Manual en PDF</a>
     <a class="ods-btn ods-btn--rosa" href="…">…</a>            */
table.ods-specs {
    border-collapse: collapse; width: 100%; max-width: 47em;
    margin: 2rem 0; border: none;
}
table.ods-specs td, table.ods-specs th {
    border: none !important; border-bottom: var(--rule) !important;
    padding: .75rem 1rem .75rem 0; text-align: left; color: var(--fg);
    vertical-align: top;
}
table.ods-specs tr td:first-child, table.ods-specs tr th:first-child {
    color: var(--mid); text-transform: uppercase;
    letter-spacing: .1em; font-size: .78em; font-weight: 600;
    width: 38%;
}
ul.ods-specs {
    list-style: none !important; padding-left: 0 !important;
    margin: 2rem 0; border-top: var(--rule); max-width: 47em;
}
ul.ods-specs li {
    display: flex; flex-wrap: wrap; gap: .3rem 2rem;
    justify-content: space-between; align-items: baseline;
    padding: .75rem 0; border-bottom: var(--rule); color: var(--fg);
}
ul.ods-specs li strong, ul.ods-specs li b {
    font-weight: 600; color: var(--mid); flex-shrink: 0;
    text-transform: uppercase; letter-spacing: .1em; font-size: .78em;
}

a.ods-btn, .ods-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 12px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 1.05rem 2rem; margin: 1.5rem 0;
    border-radius: 0; text-decoration: none;
    background: var(--fg); color: var(--bg) !important;
    border: 1px solid var(--fg);
    transition: background .15s, color .15s;
}
a.ods-btn:hover { background: transparent; color: var(--fg) !important; }
a.ods-btn--rosa {
    background: var(--rosa); color: #fff !important; border-color: var(--rosa);
}
a.ods-btn--rosa:hover { background: transparent; color: var(--rosa) !important; }

@media (max-width: 560px) {
    ul.ods-specs li { flex-direction: column; gap: .15rem; }
    table.ods-specs tr td:first-child { width: 45%; }
}