/* ==========================================================================
   OiVita39 — Hoja de estilos principal
   Estética minimalista: mucho blanco, tipografía fina, filetes sutiles.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    --greige:        #e4e3de;   /* PANTONE 2330 C — color corporativo */
    --greige-soft:   #eeede9;
    --dark:          #101820;   /* casi negro corporativo */
    --text:          #1c1c1c;
    --muted:         #7c7c76;
    --line:          #d9d7d1;   /* filetes finos (rejillas) */
    --line-strong:   #101820;   /* líneas negras de marca (el "juego de líneas") */
    --white:         #ffffff;
    --footer-bg:     #b7ad9f;   /* taupe del pie */
    --footer-text:   #f3efe9;

    /* Bandas de color por familia (se afinarán con la BD en fases posteriores) */
    --accent-haircare:  #ecc4d0;  /* rosa */
    --accent-repair:    #a9c0a0;  /* verde salvia */
    --accent-moist:     #a8cee0;  /* azul */
    --accent-curly:     #f2caa0;  /* melocotón */

    --maxw:   1600px;                    /* contenedor de cabecera, títulos y texto */
    --gutter: clamp(20px, 4vw, 56px);    /* márgenes laterales del contenedor */

    --font: 'Helvetica LT', 'Helvetica Neue', Arial, sans-serif;
    --header-h: 76px;
    --topbar-h: 34px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-weight: 300;
    color: var(--text);
    background: var(--white);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 300; margin: 0; line-height: 1.2; }
svg.ico, svg.chev { fill: currentColor; }

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--gutter);
}
/* Bloque a sangre completa: ocupa todo el ancho del viewport (rejillas edge-to-edge). */
.bleed { width: 100%; }
.site-main { min-height: 50vh; }

/* Home y catálogo de productos: TODAS las líneas de contenido (rejillas, tarjetas,
   filtros, divisores…) en el negro de marca, igual que el borde superior de
   "Less is More". Se redefine la variable --line dentro de <main>, de modo que
   hereda a todo lo que use var(--line). No afecta a cabecera, pie ni otras páginas. */
.page-home .site-main,
.page-products .site-main { --line: var(--line-strong); }

/* ---------- Barra superior ---------- */
.topbar {
    background: var(--greige);
    color: #5f5e58;
    font-size: 12px;
    letter-spacing: .3px;
}
.topbar__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 4vw, 46px);
    min-height: 34px;
    flex-wrap: wrap;
}
.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    transition: color .2s ease;
}
.topbar__item:hover { color: var(--dark); }
.topbar .ico { width: 15px; height: 15px; opacity: .8; }

/* ---------- Cabecera ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--white);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    gap: 24px;
}
.logo img { height: 34px; width: auto; }

/* Navegación principal */
.mainnav__list {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 34px);
}
.mainnav__list > li { position: relative; }
.mainnav a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text);
    padding: 8px 0;
    transition: color .2s ease;
}
.mainnav a:hover,
.mainnav a.is-active { color: #000; }
.mainnav a.is-active { border-bottom: 1px solid var(--dark); }
.mainnav .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.mainnav__sep {
    width: 1px;
    height: 16px;
    background: var(--line);
}

/* Desplegables */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .08);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 50;
}
.dropdown--right { left: auto; right: 0; min-width: 150px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-tap-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown a {
    display: block;
    padding: 9px 20px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
}
.dropdown a:hover,
.dropdown a.is-active { background: var(--greige-soft); border-bottom: none; }

/* Botón hamburguesa */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: none;
    border: 0;
    padding: 0;
}
.burger span {
    display: block;
    width: 26px;
    height: 1.5px;
    background: var(--dark);
    transition: transform .3s ease, opacity .3s ease;
}

/* ---------- Menú móvil ---------- */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--white);
    z-index: 60;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease;
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-h);
    border-bottom: 1px solid var(--line);
}
.mobile-menu__close {
    width: 40px; height: 40px;
    background: none; border: 0;
}
.mobile-menu__close svg { width: 26px; height: 26px; fill: none; stroke: var(--dark); stroke-width: 1.6; }
.mobile-menu__nav { padding-top: 26px; padding-bottom: 40px; }
.mobile-menu__nav > ul > li { border-bottom: 1px solid var(--greige-soft); }
.mobile-menu__nav a,
.m-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 2px;
    font-size: 18px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text);
    background: none;
    border: 0;
    text-align: left;
}
.m-sub-toggle .chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s ease; }
.m-has-sub.is-open .m-sub-toggle .chev { transform: rotate(180deg); }
.m-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.m-has-sub.is-open .m-sub { max-height: 220px; }
.m-sub a {
    padding: 12px 2px 12px 22px;
    font-size: 15px;
    color: var(--muted);
    border-bottom: 0;
}
.mobile-menu__sep { height: 1px; background: var(--line); margin: 20px 0; }
.mobile-menu__langs-label {
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.mobile-menu__langs ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.mobile-menu__langs a { font-size: 15px; padding: 4px 0; }
.mobile-menu__langs a.is-active { border-bottom: 1px solid var(--dark); }
body.menu-open { overflow: hidden; }

/* ---------- Enlaces con flecha ---------- */
.arrow-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    font-size: 13px;
    letter-spacing: .4px;
    color: var(--dark);
}
.arrow-link::after {
    content: "→";
    font-size: 16px;
    transition: transform .25s ease;
}
.arrow-link:hover::after { transform: translateX(6px); }

/* ---------- Cabecera de página (stub Fase 0) ---------- */
.page-hero {
    text-align: center;
    padding: clamp(70px, 12vw, 150px) 0 clamp(50px, 8vw, 90px);
}
.page-hero__title {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 300;
    letter-spacing: .5px;
    color: var(--dark);
}
.page-hero__note {
    margin-top: 16px;
    color: var(--muted);
    font-size: 15px;
    letter-spacing: .4px;
}
.page-hero .rule {
    width: 64px; height: 1px;
    background: var(--dark);
    margin: 26px auto 0;
}

/* Hero de inicio — prácticamente a pantalla completa (alto del Figma) */
.home-hero {
    position: relative;
    /* Casi toda la altura visible bajo la cabecera; svh evita el salto de la
       barra del navegador en móvil (mismo comportamiento a pantalla completa). */
    min-height: calc(100svh - var(--header-h) - var(--topbar-h));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding-bottom: clamp(40px, 7vw, 96px);
    background: var(--greige) center/cover no-repeat;
}
/* Compatibilidad con navegadores sin svh */
@supports not (height: 100svh) {
    .home-hero { min-height: calc(100vh - var(--header-h) - var(--topbar-h)); }
}
.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 32, 0) 45%, rgba(16, 24, 32, .34));
    pointer-events: none;
}
.home-hero .container { position: relative; z-index: 1; }
.home-hero__tagline {
    color: var(--white);
    font-size: clamp(24px, 3.6vw, 44px);
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .25);
    margin: 0;
}

/* ---------- Pie de página ---------- */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 46px;
    padding-bottom: 30px;
}
.site-footer__logo img {
    height: 40px;
    width: auto;
    /* logo negro → tono claro sobre el taupe */
    filter: brightness(0) invert(1);
    opacity: .55;
}
.site-footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
}
.site-footer__nav a {
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    opacity: .92;
    transition: opacity .2s ease;
}
.site-footer__nav a:hover { opacity: 1; }
.site-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 34px;
    border-top: 1px solid rgba(255, 255, 255, .25);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.site-footer__links a { font-size: 13px; opacity: .9; }
.site-footer__links a:hover { opacity: 1; text-decoration: underline; }
.site-footer__copy { font-size: 12px; opacity: .8; margin: 0; }

/* ---------- Secciones genéricas ---------- */
.section { padding: clamp(60px, 9vw, 120px) 0; }
.section-title {
    text-align: center;
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 300;
    letter-spacing: .5px;
    color: var(--dark);
    margin-bottom: clamp(34px, 5vw, 66px);
}
.container--narrow { max-width: 820px; }
.rule { display: block; width: 64px; height: 1px; background: var(--dark); margin: 22px 0; }

/* ---------- Tarjetas de producto ---------- */
/* Rejilla de tarjetas: las líneas se dibujan con bordes en cada tarjeta y el fondo
   del grid es blanco → las celdas vacías (nº impar de productos) quedan en blanco,
   no con el color de línea de fondo. */
.pcard-grid {
    display: grid;
    gap: 0;
    background: var(--white);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}
.pcard-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pcard { background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pcard__inner { display: flex; flex-direction: column; height: 100%; }
.pcard__band {
    background: var(--accent, var(--greige));
    text-align: center;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    color: #3a3a3a;
}
.pcard__img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: clamp(360px, 39vw, 510px);
    overflow: hidden;
}
/* La imagen ocupa toda la altura del recuadro (full height), conservando proporción. */
.pcard__img img { height: 100%; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard__noimg { display: block; width: 60%; height: 70%; background: var(--greige-soft); }
.pcard__meta {
    display: flex;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}
.pcard__size, .pcard__code { padding: 10px 14px; }
.pcard__size { flex: 1; border-right: 1px solid var(--line); }
.pcard__more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    letter-spacing: .3px;
    color: var(--dark);
}
.pcard__more .arrow { transition: transform .25s ease; }
.pcard__inner:hover .pcard__more .arrow { transform: translateX(6px); }

/* La rejilla de destacados va PEGADA a "Less is More": se le quita el hueco
   inferior y su propio borde inferior, de modo que el borde superior (negro) de
   .lessismore hace de línea inferior de "Productos destacados" (juego de líneas). */
/* Destacados pegado a "Less is More": la línea inferior de la rejilla (borde de las
   tarjetas) hace de divisor con la sección; por eso .lessismore ya no lleva border-top. */
.featured { padding-bottom: 0; }

/* ---------- Less is More (con juego de líneas) ---------- */
.lessismore { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-strong); }
.lessismore__text {
    --lm-pad: clamp(28px, 5vw, 84px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--line-strong);
}
.lessismore__body { padding: clamp(44px, 6vw, 92px) var(--lm-pad) clamp(36px, 5vw, 70px); }
.lessismore__title { font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; letter-spacing: .3px; }
/* Regla larga bajo el título: del margen izquierdo hasta el filete de la imagen. */
.lessismore__body .rule { background: var(--line-strong); width: calc(100% + var(--lm-pad)); margin: 24px 0 28px; }
.lessismore__body p { color: #444; margin: 0 0 18px; max-width: 46ch; }
.lessismore__body p:last-child { margin-bottom: 0; }
/* Barra "Conócenos" al fondo: línea negra superior a todo el ancho + celda vacía
   con filete vertical a la izquierda de "Conócenos" (juego de líneas). */
.lessismore__cta {
    margin-top: auto;
    display: flex;
    align-items: stretch;
    min-height: clamp(58px, 6vw, 82px);
    border-top: 1px solid var(--line-strong);
}
.lessismore__cta-spacer {
    flex: 0 0 var(--lm-pad);
    border-right: 1px solid var(--line-strong);
}
.lessismore__cta .arrow-link { display: inline-flex; align-items: center; padding-inline: clamp(16px, 2vw, 28px); }
.lessismore__img { min-height: clamp(340px, 46vw, 620px); background: var(--greige) center/cover no-repeat; }

/* ---------- Explora catálogo ---------- */
.explore__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.explore__card { display: flex; flex-direction: column; background: var(--white); }
.explore__label {
    text-align: center;
    padding: 14px;
    font-size: 13px;
    letter-spacing: .6px;
    color: var(--dark);
    border-bottom: 1px solid var(--line);
}
.explore__img { display: block; height: clamp(590px, 22vw, 690px); background: var(--greige) center/cover no-repeat; transition: transform .5s ease; }
.explore__card:hover .explore__img { transform: scale(1.04); }
/* "Ver catálogo": barra a todo el ancho pegada a la rejilla; comparte su línea
   superior con el borde inferior de la rejilla y se enmarca con los laterales e
   inferior (mismo marco de líneas que el grid). */
.explore__cta { border: 1px solid var(--line); border-top: 0; }
.explore__cta .arrow-link {
    display: flex;
    width: 100%;
    padding: clamp(16px, 2.2vw, 26px) clamp(20px, 4vw, 48px);
}

/* ---------- Opiniones (con marco de líneas) ---------- */
.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line-strong);
}
.review { padding: clamp(30px, 4vw, 52px) clamp(20px, 3vw, 40px); text-align: center; }
.review + .review { border-left: 1px solid var(--line); }
.review__stars { letter-spacing: 4px; color: var(--dark); font-size: 15px; }
.review__author { font-weight: 700; margin: 14px 0 10px; }
.review__body { color: var(--muted); font-size: 14px; }

/* ---------- Instagram ---------- */
.instagram { padding-top: clamp(40px, 7vw, 80px); }
.instagram .section-title { margin-bottom: clamp(24px, 4vw, 40px); }
.instagram__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.instagram__item { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.instagram__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.instagram__item:hover img { transform: scale(1.05); }

/* ---------- Hero de página (oivita39, contacto) ----------
   Misma altura casi a pantalla completa que el hero de la home y texto centrado. */
.hero {
    position: relative;
    min-height: calc(100svh - var(--header-h) - var(--topbar-h));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    background: var(--greige) center/cover no-repeat;
    padding-bottom: clamp(40px, 7vw, 96px);
}
@supports not (height: 100svh) {
    .hero { min-height: calc(100vh - var(--header-h) - var(--topbar-h)); }
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28));
}
.hero--plain { background: var(--greige); align-items: center; }
.hero--plain::after { display: none; }
.hero__title { position: relative; z-index: 1; color: var(--white); font-size: clamp(28px, 4vw, 44px); font-weight: 300; letter-spacing: 1px; }
.hero--plain .hero__title { color: var(--dark); }

/* ---------- Bloques de marca (OiVita39) ---------- */
.brand-block { display: grid; grid-template-columns: 1fr 1fr; }
.brand-block__text {
    padding: clamp(40px, 7vw, 100px) clamp(30px, 6vw, 90px);
    display: flex; flex-direction: column; justify-content: center;
}
.brand-block__title { font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.15; }
.brand-block__text p { color: #444; margin: 0 0 14px; font-size: 15px; }
.brand-block__img { min-height: 580px; background: var(--greige) center/cover no-repeat; }

/* ---------- Contacto ---------- */
.contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #000000; }
.contact__card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 10px; padding: 40px 24px; color: var(--text);
}
.contact__card + .contact__card { border-left: 1px solid #000000; }
.contact__ico { width: 34px; height: 34px; fill: var(--dark); opacity: .85; }
.contact__label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.contact__value { font-size: 15px; }
a.contact__card:hover .contact__value { text-decoration: underline; }

/* ---------- Legales ---------- */
.legal__title { font-size: clamp(26px, 4vw, 40px); font-weight: 300; color: var(--dark); }
.legal p { color: #444; margin: 0 0 16px; }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--dark); color: #eee;
    transform: translateY(100%); transition: transform .3s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner { display: flex; align-items: center; gap: 20px; padding: 16px var(--gutter); flex-wrap: wrap; justify-content: center; }
.cookie-banner__text { margin: 0; font-size: 13px; color: #d8d8d4; }
.cookie-banner__text a { text-decoration: underline; color: #fff; }
.cookie-banner__btn {
    background: #fff; color: var(--dark); border: 0;
    padding: 10px 26px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    transition: opacity .2s ease;
}
.cookie-banner__btn:hover { opacity: .85; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .pcard-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .explore__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .mainnav { display: none; }
    .burger { display: inline-flex; }
    /* Footer en móvil: todo en vertical, centrado, cada enlace en su línea y a 16px. */
    .site-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
    .site-footer__nav { flex-direction: column; align-items: center; gap: 14px; }
    .site-footer__nav a { font-size: 16px; }
    .site-footer__legal { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
    .site-footer__links { flex-direction: column; align-items: center; gap: 14px; }
    .site-footer__links a { font-size: 16px; }
    .lessismore, .brand-block { grid-template-columns: 1fr; }
    .lessismore__text { border-right: 0; border-bottom: 1px solid var(--line-strong); }
    .brand-block--reverse .brand-block__img { order: -1; }
    .lessismore__img, .brand-block__img { min-height: 300px; }
    .reviews__grid { grid-template-columns: 1fr; }
    .review + .review { border-left: 0; border-top: 1px solid var(--line); }
    .contact__grid { grid-template-columns: 1fr; }
    .contact__card + .contact__card { border-left: 0; border-top: 1px solid var(--line); }
}
/* Móvil (≤560px): productos a 2 columnas; cada imagen con alto = 150% del ancho de
   la tarjeta (relación 2:3) para que TODAS las cajas midan lo mismo. */
@media (max-width: 560px) {
    .instagram__grid { grid-template-columns: repeat(2, 1fr); }
    .pcard__img { height: auto; aspect-ratio: 2 / 3; padding: 0; }
    .pcard__band { font-size: 12px; padding: 10px 8px; }
    .pcard__size, .pcard__code { padding: 8px 8px; font-size: 11px; }
    .pcard__more { padding: 9px 10px; font-size: 11px; }
    .explore__label { font-size: 12px; padding: 11px 8px; }
    .explore__img { height: clamp(150px, 40vw, 240px); }
}

@media (min-width: 901px) {
    .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Fase 3 — Catálogo (listado + ficha) y visor de catálogo
   ========================================================================== */

/* ---------- Cabecera de página compacta ---------- */
.page-hero--slim { padding: clamp(50px, 8vw, 96px) 0 clamp(22px, 4vw, 40px); }

/* ---------- Filtros del catálogo (dos niveles) ---------- */
.catalog-filter { margin-bottom: clamp(28px, 5vw, 54px); }
.catalog-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.catalog-filter__row + .catalog-filter__row { border-top: 0; }
.catalog-filter__row li { flex: 1 1 150px; background: var(--white); }
.catalog-filter__row a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    padding: 10px 14px;
    font-size: 13px;
    letter-spacing: .5px;
    color: var(--text);
    transition: background .2s ease, color .2s ease;
}
.catalog-filter__row--cats a { font-weight: 700; }
.catalog-filter__row a:hover { background: var(--greige-soft); }
.catalog-filter__row a.is-active { background: var(--dark); color: #fff; }

/* ---------- Listado ---------- */
.catalog-list { padding-top: 0; }
.catalog-list__empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* Botón "Cargar más productos" */
.load-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    margin-top: 1px;
    padding: 18px 24px;
    background: var(--greige);
    border: 0;
    color: var(--dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: background .2s ease, opacity .2s ease;
}
.load-more:hover { background: var(--greige-soft); }
.load-more.is-loading { opacity: .6; pointer-events: none; }
.load-more__label { flex: 1; text-align: center; }
.load-more__arrow { font-size: 16px; }

/* ---------- Ficha de producto ---------- */
.product-back { border-bottom: 1px solid var(--line); }
.product-back__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark);
}
.product-back__arrow { font-size: 18px; transition: transform .25s ease; }
.product-back__link:hover .product-back__arrow { transform: translateX(-5px); }

.product { padding: clamp(26px, 5vw, 54px) 0 clamp(40px, 7vw, 90px); }
.product-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
}
.product-media { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.product-media__img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px);
    min-height: 380px;
}
.product-media__img img { max-height: 520px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.product-media__sizes { display: flex; flex-direction: column; }
.product-size {
    display: flex;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}
.product-size__label { flex: 1; padding: 12px 16px; text-align: center; border-right: 1px solid var(--line); }
.product-size__code { flex: 1; padding: 12px 16px; text-align: center; }

.product-info { display: flex; flex-direction: column; }
.product-info__band {
    background: var(--accent, var(--greige));
    text-align: center;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    color: #3a3a3a;
}
.product-info__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(22px, 3vw, 36px) clamp(20px, 4vw, 54px);
}
.attr { text-align: center; }
.attr__label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14px;
    color: var(--text);
}
.pill-row { display: flex; gap: 14px; }
.pill-row .pill { flex: 1; width: auto; }
.pill__icon { width: 18px; height: 18px; object-fit: contain; }

.badges { display: flex; align-items: center; justify-content: center; gap: 36px; margin-top: 14px; }
.badge { display: inline-flex; align-items: center; gap: 8px; color: var(--dark); }
.badge--vegan { font-style: italic; font-size: 20px; }
.badge--vegan svg { width: 22px; height: 22px; fill: currentColor; }
.badge--eco svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.badge--eco span { font-size: 10px; font-weight: 700; line-height: 1.1; letter-spacing: .5px; text-align: left; }

.product-desc { padding: clamp(30px, 5vw, 60px) 0; border-bottom: 1px solid var(--line); }
.product-desc p { margin: 0 0 18px; color: #333; font-size: 15px; }
.product-desc p:last-child { margin-bottom: 0; }
.product-desc__lang { font-weight: 700; margin-right: 6px; color: var(--dark); }

.product-inci { padding-top: clamp(30px, 5vw, 50px); }
.product-inci__title { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--dark); }
.product-inci p { color: #555; font-size: 14px; margin: 0; }

/* ---------- Visor de catálogo ---------- */
.catalog { padding-bottom: clamp(30px, 5vw, 60px); }

/* Flipbook interactivo embebido (Heyzine): grande, a casi todo el ancho y responsive. */
.catalog--embed { padding-bottom: clamp(30px, 5vw, 60px); }
.catalog__embed {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-inline: clamp(0px, 2vw, 40px);
}
.fp-iframe {
    display: block;
    width: 100%;
    height: min(86vh, 880px);
    border: 0;
    background: var(--greige);
}
@media (max-width: 700px) {
    .fp-iframe { height: min(76vh, 620px); }
}
.catalog__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--greige);
    padding: clamp(28px, 6vw, 80px) clamp(48px, 7vw, 90px);
    min-height: 58vh;
    perspective: 2600px;               /* profundidad para el giro de página */
}
.catalog__book {
    display: flex;
    width: 100%;
    max-width: 1320px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
    transform-style: preserve-3d;
}
/* Giro de página al avanzar/retroceder (sin librerías externas). */
.catalog__book.is-turn      { animation: catalogTurn .45s ease; }
.catalog__book.is-turn--next { animation: catalogTurnNext .5s cubic-bezier(.22,.61,.36,1); }
.catalog__book.is-turn--prev { animation: catalogTurnPrev .5s cubic-bezier(.22,.61,.36,1); }
@keyframes catalogTurn {
    from { opacity: .3; transform: translateY(4px) scale(.995); }
    to   { opacity: 1; transform: none; }
}
@keyframes catalogTurnNext {
    from { opacity: .45; transform: rotateY(-8deg) translateX(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes catalogTurnPrev {
    from { opacity: .45; transform: rotateY(8deg) translateX(-14px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .catalog__book.is-turn,
    .catalog__book.is-turn--next,
    .catalog__book.is-turn--prev { animation: none; }
}
.catalog__page { flex: 1 1 50%; min-width: 0; position: relative; background: #fff; }
.catalog__page img { width: 100%; height: auto; display: block; }
.catalog__page--left  { box-shadow: inset -14px 0 26px -14px rgba(0, 0, 0, .22); }
.catalog__page--right { box-shadow: inset  14px 0 26px -14px rgba(0, 0, 0, .22); }
.catalog__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    font-size: 40px;
    line-height: 1;
    color: var(--dark);
    opacity: .7;
    transition: opacity .2s ease;
}
.catalog__nav:hover { opacity: 1; }
.catalog__nav[disabled] { opacity: .2; cursor: default; }
.catalog__nav--prev { left: clamp(6px, 2vw, 24px); }
.catalog__nav--next { right: clamp(6px, 2vw, 24px); }
.catalog__actions { text-align: center; margin-top: 26px; }
.catalog__actions .arrow-link { justify-content: center; }

.catalog--pdf .catalog__stage { padding: clamp(16px, 3vw, 40px); }
.catalog__pdf {
    width: 100%;
    max-width: 1320px;
    height: 86vh;
    border: 0;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}
.catalog__fallback { text-align: center; color: var(--muted); padding: 40px; }

/* ---------- Responsive (Fase 3) ---------- */
@media (max-width: 900px) {
    .product-top { grid-template-columns: 1fr; }
    .product-media { border-right: 0; border-bottom: 1px solid var(--line); }
    .catalog__book { flex-direction: column; max-width: 640px; }
    .catalog__page--left { box-shadow: none; border-bottom: 1px solid var(--line); }
    .catalog__page--right { box-shadow: none; }
}
@media (max-width: 620px) {
    .catalog-filter__row a { min-height: 44px; font-size: 12px; padding: 8px 10px; }
    .catalog-filter__row li { flex: 1 1 120px; }
    .badges { gap: 24px; }
    .catalog__pdf { height: 70vh; }
}