/* ============================================================
   EXOone – Main Stylesheet
   Apple-style vertical scroll, clean & modern
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --dark-teal: #0d4c43;
    --teal: #008a7b;
    --light-teal: #75c4be;
    --mint: #5ae4d0;
    --pale-mint: #8fede0;
    --red: #e95557;
    --light-red: #f0888b;
    --gray: #c5c5c5;
    --dark-gray: #333;
    --light-bg: #f7f7f7;
    --white: #fff;
    --black: #111;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --max-width: 1200px;
    --section-padding: 80px 0;
    --transition: .3s ease;
}

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

body {
    font-family: var(--font-main);
    color: var(--dark-gray);
    background: var(--white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--dark-teal); }

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

.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ---------- Header / Navbar ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: all .4s ease;
}

.site-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 0;
    transition: all .4s ease;
}

.logo { display: block; margin-bottom: 16px; transition: all .4s ease; }
.logo img, .logo svg { height: 80px; width: auto; transition: height .4s ease; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all .4s ease;
}

.main-nav a {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dark-gray);
    padding: 8px 12px;
    border-radius: 6px;
    transition: background var(--transition), color var(--transition);
}
.main-nav a:hover { background: var(--light-bg); color: var(--teal); }

/* Dropdown submenus */
.nav-dropdown {
    position: relative;
}
.nav-dropdown > .nav-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-dropdown > .nav-dropdown-toggle::after {
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-top: 1px;
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    padding: 8px 0;
    min-width: 180px;
    z-index: 100;
}
.nav-dropdown-menu a {
    display: block;
    padding: 10px 20px !important;
    white-space: nowrap;
    font-size: .8rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.nav-dropdown-menu a:hover {
    background: transparent !important;
    color: var(--teal) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}
.nav-dropdown:hover > .nav-dropdown-menu {
    display: block;
}

.nav-quote {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-quote .badge {
    background: var(--teal);
    color: var(--white);
    font-size: .65rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* Language selector */
.lang-sep {
    width: 1px;
    height: 16px;
    background: #ddd;
    margin: 0 4px;
}
.lang-switch {
    font-size: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    color: #aaa !important;
    padding: 6px 6px !important;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lang-switch { opacity: .45; }
.lang-switch:hover { color: var(--dark-gray) !important; background: transparent !important; opacity: .75; }
.lang-switch.active { color: var(--black) !important; opacity: 1; }
.flag-icon {
    width: 20px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
    box-shadow: 0 0 1px rgba(0,0,0,.25);
}

/* Scrolled compact header */
.site-header.scrolled .container {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
    height: 60px;
}
.site-header.scrolled .logo { margin-bottom: 0; }
.site-header.scrolled .logo img,
.site-header.scrolled .logo svg { height: 40px; }
.site-header.scrolled .main-nav { padding-bottom: 0; }

/* Mobile menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--black);
    margin: 5px 0;
    transition: var(--transition);
}

/* ---------- Hero A – Full-width background carousel ---------- */
.hero-a {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hero-a-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-a-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-a-slide.active { opacity: 1; }
.hero-a-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.3) 100%);
    z-index: 1;
}
.hero-a-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    padding-top: 180px;
    padding-bottom: 100px;
    max-width: 620px;
}
.hero-a-content h1 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 20px;
}
.hero-a-content p {
    font-size: 1.15rem;
    color: rgba(255,255,255,.8);
    margin-bottom: 30px;
    max-width: 500px;
}
.search-bar-light {
    border-bottom-color: rgba(255,255,255,.4) !important;
}
.search-bar-light:focus-within { border-bottom-color: var(--white) !important; }
.search-bar-light input {
    color: var(--white) !important;
}
.search-bar-light input::placeholder { color: rgba(255,255,255,.5) !important; }
.cta-link-light {
    color: var(--mint) !important;
}
.cta-link-light:hover { color: var(--white) !important; }

/* ---------- Hero C – Asymmetric split carousel ---------- */
.hero-c {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    padding-top: 160px;
    background: var(--white);
}
.hero-c-image {
    position: relative;
    overflow: hidden;
    height: 480px;
}
.hero-c-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero-c-slide.active { opacity: 1; }
.hero-c-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 60px 40px 80px;
}
.hero-c-content .section-logo { margin-top: 20px; margin-bottom: 10px; }
.hero-c-content h1 {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--black);
    margin-bottom: 10px;
}
.hero-c-content p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 16px;
}
/* Home: buscador y CTA con la MISMA anchura, y espacios más juntos (rev. 02/07) */
.hero-c-content .search-bar,
.hero-c-content .search-help--cta {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}
.hero-c-content .search-bar { margin-bottom: 12px; }
.hero-c-content .search-help--cta { margin: 0 0 14px; }

/* ---------- Carrusel: flechas + puntos (home y formatos) rev. 16/06/2026 ---------- */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    color: #0c4c43;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    transition: background var(--transition);
}
.carousel-nav:hover { background: #fff; }
.hero-c-prev, .fmt-prev { left: 12px; }
.hero-c-next, .fmt-next { right: 12px; }
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}
.carousel-dot:hover { background: rgba(255, 255, 255, .9); }
.carousel-dot.active { background: #fff; transform: scale(1.25); box-shadow: 0 0 0 1px rgba(12, 76, 67, .35); }

/* Carrusel de fotos por formato (página Formats) */
.format-carousel { position: relative; }
.format-carousel .fmt-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s ease;
    border-radius: 16px;
}
.format-carousel .fmt-slide.active { opacity: 1; }

/* ---------- Original Hero (kept for reference) ---------- */
.hero {
    padding: 220px 0 80px;
    background: var(--white);
}
.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero-image {
    background: var(--light-bg);
    border-radius: 16px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.hero-content h1 {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--black);
    margin-bottom: 20px;
}
.hero-content p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 30px;
    max-width: 480px;
}
.search-bar {
    display: flex;
    align-items: center;
    max-width: 400px;
    border: 1.5px solid rgba(13,76,67,.35);
    border-radius: 10px;
    background: rgba(13,76,67,.04);
    padding: 2px 14px;
    box-shadow: 0 2px 10px rgba(13,76,67,.10);
    transition: border-color var(--transition), box-shadow var(--transition);
    margin-bottom: 24px;
}
.search-bar:focus-within {
    border-color: var(--dark-teal);
    box-shadow: 0 4px 14px rgba(13,76,67,.20);
}
.search-bar input {
    flex: 1;
    border: none;
    padding: 10px 0;
    font-size: .95rem;
    font-family: var(--font-main);
    outline: none;
    background: transparent;
}
.search-bar input::placeholder { color: #999; }
.search-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
    color: #555;
    margin: -8px 0 24px;
    text-decoration: none;
    transition: color var(--transition);
}
.search-help::before {
    content: '\2709';
    font-size: 1rem;
}
.search-help:hover { color: var(--teal); text-decoration: underline; }

/* CTA destacado: "Can't find the kit?" en portfolio */
.search-help--cta {
    width: 100%;
    box-sizing: border-box;
    background: rgba(12,76,67,.07);
    border: 1px solid rgba(12,76,67,.18);
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--teal, #0c4c43);
    font-weight: 500;
    margin: 12px 0 24px;
    gap: 10px;
    /* El cliente lo quiere en una sola línea (revisión 08-06) */
    white-space: nowrap;
    justify-content: center;
}
.search-help--cta::before { content: none; }
.search-help--cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.search-help--cta strong { color: var(--teal, #0c4c43); }
.search-help--cta:hover {
    background: var(--teal, #0c4c43);
    color: #fff;
    text-decoration: none;
    border-color: var(--teal, #0c4c43);
}
.search-help--cta:hover strong { color: #fff; }
.search-bar button {
    background: none;
    border: none;
    padding: 10px 4px 10px 12px;
    cursor: pointer;
    color: var(--black);
    font-size: 1rem;
    line-height: 1;
}
.cta-link {
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cta-link:hover { gap: 12px; }
.cta-link::after { content: '→'; transition: var(--transition); }

/* ---------- Features Grid ---------- */
.features {
    padding: 30px 0 60px;
    background: var(--white);
    border-top: 1px solid #eee;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
}
.feature-card {
    text-align: center;
    padding: 32px 20px;
}
.feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.feature-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #ddd;
    transform: rotate(45deg);
}
.feature-icon svg,
.feature-icon img { width: 32px; height: 32px; position: relative; z-index: 1; }
.feature-card h3 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--black);
}
.feature-card p {
    font-size: .85rem;
    color: #777;
    line-height: 1.5;
}

/* ---------- Two-Column Section (Lab / About) ---------- */
.split-section {
    padding: var(--section-padding);
}
/* La split-section que va inmediatamente después de la franja verde
   lleva un poco de espacio para separarse de la franja verde */
.stats-bar + .split-section {
    padding-top: 48px;
}
.split-section .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.split-section.reverse .container { direction: rtl; }
.split-section.reverse .container > * { direction: ltr; }

.split-section.bg-alt { background: var(--light-bg); }

.section-logo {
    height: 40px;
    width: auto;
    margin-bottom: 16px;
    display: block;
    margin-right: auto;
}
.section-logo-exoone {
    height: 80px;
    margin-bottom: 24px;
}
.split-content h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 20px;
}
.split-content p {
    font-size: 1.05rem;
    color: #666;
    margin-bottom: 24px;
    max-width: 500px;
}
.split-image {
    background: var(--light-bg);
    border-radius: 16px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.split-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.split-image .placeholder {
    color: var(--gray);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* ---------- Placeholder images ---------- */
.placeholder-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: var(--light-bg);
    color: var(--gray);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 2px dashed #ddd;
}

/* ---------- Formats Section ---------- */
.formats-section {
    padding: var(--section-padding);
    background: var(--white);
}
.section-header {
    text-align: center;
    margin-bottom: 40px;
}
.section-header h2 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 16px;
}
.section-header p {
    font-size: 1.05rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

/* Format tabs */
.format-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 60px;
    background: var(--light-bg);
    border-radius: 12px;
    padding: 4px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.format-tab {
    padding: 12px 28px;
    border: none;
    background: transparent;
    font-family: var(--font-main);
    font-size: .9rem;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    border-radius: 10px;
    transition: all var(--transition);
}
.format-tab:hover { color: var(--dark-gray); }
.format-tab.active {
    background: var(--white);
    color: var(--black);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Format cards */
.format-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.format-card {
    background: var(--light-bg);
    border-radius: 14px;
    padding: 20px 18px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
}
.format-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.format-card-image {
    aspect-ratio: 4/3;
    background: var(--white);
    border-radius: 10px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.format-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.format-card-image .placeholder {
    color: var(--gray);
    font-size: .8rem;
    text-transform: uppercase;
}
/* Format card text wrapper */
.format-card-text { padding: 0; }

/* Single format selected: horizontal layout */
.format-cards.single-view {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}
.format-cards.single-view .format-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    text-align: left;
}
.format-cards.single-view .format-card-image {
    border-radius: 16px 0 0 16px;
    aspect-ratio: auto;
    min-height: 250px;
}
.format-cards.single-view .format-card-text {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.format-cards.single-view .format-card-text .cta-link {
    margin-top: 16px;
}

.format-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--black);
}
.format-card .subtitle {
    font-size: .78rem;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 10px;
}
.format-card p {
    font-size: .82rem;
    color: #777;
    line-height: 1.45;
}

/* ---------- Stats Bar ---------- */
.stats-bar {
    padding: 60px 0;
    background: var(--dark-teal);
    color: var(--white);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.stat-item .stat-number {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    display: block;
}
.stat-item .stat-label {
    font-size: .85rem;
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---------- Species Section ---------- */
.species-section {
    padding: var(--section-padding);
    background: var(--light-bg);
}
.species-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.species-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    position: relative;
    overflow: hidden;
}
.species-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--species-color, transparent);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 0;
}
.species-card:hover::before {
    opacity: .15;
}
.species-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,.12);
    border-color: var(--species-color, #eee);
}
.species-card:hover h4 {
    color: var(--species-color, var(--dark-gray));
}
.species-card img, .species-card svg, .species-card h4, .species-card .species-view {
    position: relative;
    z-index: 1;
}
.species-card img, .species-card svg {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    transition: transform .4s ease;
}
.species-card:hover img, .species-card:hover svg {
    transform: scale(1.15);
}
.species-card .species-view {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--species-color, var(--dark-gray));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    margin-top: 8px;
}
.species-card:hover .species-view {
    opacity: 1;
    transform: translateY(0);
}
.species-card h4 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dark-gray);
    transition: color var(--transition);
}

/* ---------- CTA Banner ---------- */
.cta-banner {
    padding: 100px 0;
    background: var(--dark-teal);
    color: var(--white);
    text-align: center;
}
.cta-banner h2 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 16px;
}
.cta-banner p {
    font-size: 1.1rem;
    opacity: .8;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.btn-primary {
    display: inline-block;
    background: var(--white);
    color: var(--dark-teal);
    padding: 14px 36px;
    border-radius: 0;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    transition: transform var(--transition), box-shadow var(--transition);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    color: var(--dark-teal);
}

.btn-outline {
    display: inline-block;
    border: 2px solid var(--teal);
    color: var(--teal);
    padding: 12px 32px;
    border-radius: 0;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    transition: all var(--transition);
}
.btn-outline:hover {
    background: var(--teal);
    color: var(--white);
}

.btn-filled {
    display: inline-block;
    background: var(--teal);
    color: var(--white);
    padding: 12px 32px;
    border-radius: 0;
    border: 2px solid var(--teal);
    font-weight: 700;
    font-size: .9rem;
    font-family: var(--font-main);
    letter-spacing: .04em;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-filled:hover {
    background: transparent;
    color: var(--teal);
}

/* ---------- Footer ---------- */
.site-footer {
    padding: 60px 0 30px;
    background: var(--black);
    color: rgba(255,255,255,.6);
    font-size: .85rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-brand img, .footer-brand svg { height: 40px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 300px; line-height: 1.6; }

.footer-col h4 {
    color: var(--white);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 16px;
}
.footer-col a {
    display: block;
    color: rgba(255,255,255,.6);
    margin-bottom: 8px;
    font-size: .85rem;
    transition: color var(--transition);
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-bottom a { color: rgba(255,255,255,.4); margin-left: 16px; }

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
    margin-top: 0;
    padding: 170px 0 16px;
    background: var(--white);
    text-align: center;
}
.page-hero h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 8px;
}
.page-hero p {
    font-size: .95rem;
    color: #666;
    max-width: 560px;
    margin: 0 auto;
}

/* ---------- Portfolio Page ---------- */
.portfolio-section { padding: 60px 0 120px; background: var(--light-bg); }
.portfolio-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 60px;
}
.portfolio-sidebar h3 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--black);
}
.species-filter-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.species-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--dark-gray);
    font-weight: 600;
    font-size: .9rem;
    transition: background var(--transition);
}
.species-filter-item img { width: 32px; height: 32px; }
.species-filter-item:hover, .species-filter-item.active {
    background: var(--light-bg);
}
.results-header { margin-bottom: 16px; }
.results-count { font-size: .85rem; color: #999; }
.product-list {
    list-style: none;
    /* Alto en escritorio ajustado para que el listado "cuadre" con la columna de
       especies (8 especies). Revisión 02/07. En móvil se reduce (media ≤992). */
    max-height: 660px;
    overflow-y: auto;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 0 20px;
    background: var(--white);
    scrollbar-width: thin;
    scrollbar-color: #c9c9c9 transparent;
}
.product-list::-webkit-scrollbar { width: 8px; }
.product-list::-webkit-scrollbar-track { background: transparent; }
.product-list::-webkit-scrollbar-thumb {
    background-color: #c9c9c9;
    border-radius: 8px;
}
.product-list::-webkit-scrollbar-thumb:hover { background-color: #a0a0a0; }
.product-item { border-bottom: 1px solid #eee; }
.product-item:last-child { border-bottom: none; }
.product-item a {
    display: block;
    padding: 14px 4px;
    font-size: .95rem;
    color: var(--dark-gray);
    font-weight: 500;
    transition: color var(--transition);
}
.product-item a:hover { color: var(--teal); }

/* ---------- Formats Detail Page ---------- */
.format-detail { padding: var(--section-padding); }
.format-detail.bg-alt { background: var(--light-bg); }
.format-detail-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}
.format-detail-hero.reverse { direction: rtl; }
.format-detail-hero.reverse > * { direction: ltr; }
.format-detail-image {
    background: #eee;
    border-radius: 16px;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.format-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
.format-detail-image .placeholder {
    color: var(--gray);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}
/* ---------- Format brand colors ---------- */
#onemix.format-detail,
#multiplex.format-detail,
.format-card[data-format="onemix"],
.format-card[data-format="multiplex"],
.format-tab[data-format="onemix"],
.format-tab[data-format="multiplex"]    { --format-color: #f7d134; }

#basicplus.format-detail,
.format-card[data-format="basicplus"],
.format-tab[data-format="basicplus"]    { --format-color: #439de8; }

#basic.format-detail,
.format-card[data-format="basic"],
.format-tab[data-format="basic"]        { --format-color: #3ece78; }

#dna-master-mix.format-detail           { --format-color: #b8a4e0; }
#rna-master-mix.format-detail           { --format-color: #f39200; }

.format-detail .format-title {
    position: relative;
    color: var(--format-color, var(--black));
}
.format-detail .format-title::before {
    content: '';
    display: block;
    width: 56px;
    height: 5px;
    background: var(--format-color, var(--teal));
    border-radius: 3px;
    margin-bottom: 18px;
}
.format-card h3 { color: var(--format-color, var(--black)); }
.format-tab.active { background: var(--format-color, var(--white)); }

.format-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--black);
    margin-bottom: 4px;
}
.format-subtitle {
    font-size: 1.1rem;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: 16px;
}
.format-detail-content p { font-size: 1rem; color: #555; margin-bottom: 20px; line-height: 1.7; }
.format-highlight {
    background: var(--dark-teal);
    color: var(--white);
    padding: 16px 20px;
    border-radius: 0;
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 24px;
}
.format-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
.format-details-grid h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 36px;
    color: var(--black);
}
.format-contents-list {
    list-style: none;
    padding: 0;
}
.format-contents-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: .95rem;
    color: #555;
}
.format-contents-list li:last-child { border-bottom: none; }
.format-note {
    margin-top: 16px;
    font-size: .85rem;
    color: #999;
}
.format-components { display: flex; gap: 24px; }
.component-card { flex: 1; text-align: center; }
.component-image {
    background: #eee;
    border-radius: 12px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.component-image .placeholder { color: var(--gray); font-size: .75rem; text-transform: uppercase; }
.component-card h4 { font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.component-card p { font-size: .8rem; color: #777; }
.characteristics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.char-item { text-align: center; }
.char-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #ddd;
    transform: rotate(45deg);
}
.char-icon svg, .char-icon img { position: relative; z-index: 1; }
.char-item svg { margin: 0 auto 10px; display: block; }
.char-item h4 { font-size: .85rem; font-weight: 700; margin-bottom: 4px; }
.char-item p { font-size: .8rem; color: #777; }

/* ---------- Downloads Page ---------- */
.downloads-section { padding: 60px 0 120px; }
.downloads-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 800px;
    margin: 0 auto;
}
.download-card {
    display: block;
    background: var(--light-bg);
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    transition: transform var(--transition), box-shadow var(--transition);
    color: var(--dark-gray);
}
.download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
    color: var(--dark-gray);
}
.download-icon { margin-bottom: 20px; }
.download-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 12px; }
.download-card p { font-size: .9rem; color: #777; margin-bottom: 20px; line-height: 1.5; }

/* ---------- CoA Page ---------- */
.coa-section { padding: 40px 0 80px; }
.coa-box {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid #e6ece9;
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: 0 8px 32px rgba(12,76,67,.06);
    text-align: center;
}
.coa-box .coa-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(12,76,67,.08);
    color: var(--teal, #0c4c43);
}
.coa-box .coa-icon svg { width: 36px; height: 36px; }
.coa-box h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; color: var(--black); }
.coa-box .coa-subtitle { font-size: .92rem; color: #666; margin: 0 0 24px; }
.coa-box .search-bar { max-width: 460px; margin: 0 auto; }
.coa-box .downloads-note { text-align: left; }
.coa-help-cta { margin-top: 16px; font-size: .9rem; color: #666; }
.coa-help-cta a { color: var(--teal, #0c4c43); font-weight: 600; }
.coa-note { font-size: .85rem; color: #777; margin-bottom: 8px; line-height: 1.5; }

/* Hero genérico con icono (CoA y Manuals) */
.page-hero--with-icon { padding-top: 190px; padding-bottom: 24px; }
.page-hero--with-icon .page-hero-icon {
    color: var(--teal, #0c4c43);
    margin: 0 auto 16px;
    display: inline-flex;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(12,76,67,.1);
    align-items: center;
    justify-content: center;
}
.page-hero--with-icon .page-hero-icon svg { width: 36px; height: 36px; }
.downloads-note {
    margin-top: 32px;
    padding: 16px 20px;
    background: rgba(12, 76, 67, .05);
    border-left: 3px solid var(--teal, #0c4c43);
    border-radius: 4px;
    font-size: .85rem;
    color: #555;
    line-height: 1.6;
}
.downloads-note p { margin-bottom: 4px; }
.downloads-note ul { margin: 0; padding-left: 20px; }
.downloads-note li { margin-bottom: 4px; }

/* ---------- Manuals Page ---------- */
.manuals-section { padding: 40px 0 80px; }
.manuals-section .manuals-search-bar {
    max-width: 540px;
    margin: 0 auto 32px;
    background: rgba(13,76,67,.04);
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(13,76,67,.12);
    border: 1.5px solid rgba(13,76,67,.35);
}
.manuals-section .data-table-wrapper {
    background: var(--white);
    border-radius: 16px;
    /* Caja con scroll: no mostrar el listado completo de primeras (revisión 22/06).
       Muestra ~10 filas y el resto se desliza. */
    max-height: 520px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(12,76,67,.06);
    border: 1px solid #e6ece9;
}
.manuals-section .data-table th {
    background: #eef3f1;
    color: var(--teal, #0c4c43);
    border-bottom-color: rgba(12,76,67,.15);
    /* Cabecera fija al deslizar la caja */
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ---------- Data Table (shared) ---------- */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid #ddd;
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #999;
}
.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    color: var(--dark-gray);
}
.data-table tr:hover td { background: var(--light-bg); }

/* Las tablas de la ficha y del presupuesto pueden ser anchas (sobre todo en
   francés, con textos más largos): se contienen con scroll horizontal propio a
   CUALQUIER ancho para que nunca desborden el cuadro (revisión 22/06/2026).
   Antes solo se aplicaba en @media ≤992px y en escritorio se salían. */
.product-section .data-table,
.quotation-section .data-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Punto 7 (rev. 02/07): las tablas de la ficha ya van a ancho completo
   (.product-details), así que en escritorio vuelven a ser tabla real y se
   expanden al 100%. El block+scroll de arriba se mantiene solo en móvil (≤992). */
.product-details .data-table { display: table; width: 100%; }

/* La tabla de "Formatos disponibles" (ficha) tiene 6 columnas y vive en la
   columna estrecha product-main: con el padding normal se desbordaba y el botón
   "Añadir" quedaba cortado/fuera. Se aprieta un poco (padding y fuente) para que
   quepa entera en escritorio sin scroll; el overflow-x de arriba sigue de red de
   seguridad en francés/móvil (revisión 22/06/2026, punto 15). */
.product-formats-table { font-size: .83rem; }
.product-formats-table th,
.product-formats-table td { padding: 10px 8px; }
/* El francés es el caso más ancho (TÉLÉCHARGER/Ajouter). Se aprietan un punto más
   las columnas "anchas" para que quepa sin scroll también en FR (rev 22/06 pto 15). */
.product-formats-table th:nth-child(4),
.product-formats-table td:nth-child(4),  /* Manual: TÉLÉCHARGER ↓ */
.product-formats-table .cta-link--small { font-size: .8rem; }
.product-formats-table .qty-control { gap: 4px; }

/* ---------- Contact Page ---------- */
.contact-section { padding: 60px 0 120px; }
.contact-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    max-width: 860px;
    margin: 0 auto;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    margin-bottom: 6px;
}
.form-group input, .form-group textarea {
    border: none;
    border-bottom: 2px solid #ddd;
    padding: 10px 0;
    font-size: .95rem;
    font-family: var(--font-main);
    outline: none;
    background: transparent;
    transition: border-color var(--transition);
}
.form-group input:focus, .form-group textarea:focus { border-bottom-color: var(--black); }
.form-group textarea { resize: vertical; min-height: 100px; }
/* Teléfono con prefijo por país (desplegable) + número (rev. 02/07). */
.form-group select {
    border: none;
    border-bottom: 2px solid #ddd;
    padding: 10px 0;
    font-size: .95rem;
    font-family: var(--font-main);
    outline: none;
    background: transparent;
    transition: border-color var(--transition);
}
.form-group select:focus { border-bottom-color: var(--black); }
.phone-field { display: flex; gap: 10px; align-items: flex-end; }
.phone-field .phone-prefix { flex: 0 0 auto; max-width: 48%; }
.phone-field .phone-number { flex: 1 1 auto; min-width: 0; }
.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-info-card h3 { font-size: .85rem; font-weight: 700; margin-bottom: 8px; color: var(--black); }
.contact-info-card a, .contact-info-card p { font-size: .95rem; color: #666; line-height: 1.6; }

/* ---------- Product detail page ---------- */
.product-hero { text-align: left; }
.product-hero .container { max-width: 1100px; }
/* Override del centrado heredado de .page-hero p */
.product-hero p { margin: 0; max-width: none; text-align: left; }
.product-hero .breadcrumb {
    font-size: .85rem;
    color: #888;
    margin-bottom: 12px;
}
.product-hero .breadcrumb a { color: var(--teal, #0c4c43); text-decoration: none; }
.product-hero .breadcrumb a:hover { text-decoration: underline; }
.product-hero .breadcrumb span { margin: 0 6px; color: #bbb; }
.product-hero h1 {
    font-size: 2.2rem;
    margin-bottom: 8px;
}
.product-ref {
    display: inline-block;
    font-size: .85rem;
    color: var(--teal, #0c4c43);
    background: rgba(12,76,67,.08);
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0;
}
.product-ref strong { font-weight: 700; letter-spacing: .02em; }
.product-section { padding: 40px 0 120px; background: var(--light-bg); }
.product-section .container { max-width: 1100px; }
.product-layout {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 40px;
    align-items: start;
}
/* Evita el "grid blowout": permite que las columnas se encojan por debajo del
   ancho de su contenido (tablas anchas) en vez de desbordar la página en móvil
   (revisión 18/06/2026). Las tablas hacen su propio scroll horizontal. */
.product-layout > *,
.product-overview > *,
.quotation-layout > * { min-width: 0; }
.product-main, .product-aside > *, .product-details {
    background: var(--white);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
/* Punto 7 (rev. 02/07): las tablas de la ficha ("Qué lleva cada tubo" y
   "Formatos disponibles") a ancho completo debajo del overview, para quitar el
   hueco vacío de la derecha. */
.product-details { margin-top: 40px; }
.product-main h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--black);
    margin-top: 8px;
}

/* ---------- Overview de la ficha de producto ---------- */
.product-overview {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid #eee;
}
.product-photo {
    aspect-ratio: 1;
    background: var(--light-bg, #f5f7f8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed #ddd;
}
.product-photo img { width: 100%; height: 100%; object-fit: contain; }
.product-photo .placeholder {
    color: var(--gray, #999);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
    padding: 16px;
}

/* ---------- Galería de producto (foto principal + miniaturas) ---------- */
.product-gallery { display: flex; flex-direction: column; gap: 12px; }
.product-gallery-main {
    aspect-ratio: 1;
    background: var(--light-bg, #f5f7f8);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
}
.product-gallery-main { cursor: zoom-in; }
.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Lightbox de la galería de producto (ver la imagen principal en grande) */
.exoone-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    cursor: zoom-out;
}
.exoone-lightbox.open { opacity: 1; visibility: visible; }
.exoone-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    background: #fff;
}
.exoone-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background var(--transition);
}
.exoone-lightbox-close:hover { background: rgba(255, 255, 255, .25); }

/* Flechas anterior/siguiente (solo si el formato tiene más de una foto) */
.exoone-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.exoone-lightbox.has-nav .exoone-lightbox-nav { display: flex; }
.exoone-lightbox-prev { left: 24px; }
.exoone-lightbox-next { right: 24px; }
.exoone-lightbox-nav:hover { background: rgba(255, 255, 255, .25); }

@media (max-width: 600px) {
    .exoone-lightbox-prev { left: 10px; }
    .exoone-lightbox-next { right: 10px; }
    .exoone-lightbox-nav { width: 44px; height: 44px; font-size: 1.8rem; }
}
.product-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.gallery-thumb {
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid #e5e7e8;
    border-radius: 8px;
    background: var(--light-bg, #f5f7f8);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery-thumb:hover,
.gallery-thumb.active { border-color: var(--teal, #008a7a); }

/* ---------- Descripción de producto con "leer más / leer menos" (rev. 16/06/2026) ---------- */
.product-description-wrap { margin-top: 22px; }
.product-description-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: #999;
    margin: 0 0 6px;
}
.product-description {
    color: #555;
    line-height: 1.55;
    margin: 0;
}
.product-description.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-desc-toggle {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--teal, #0c4c43);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
}
.product-desc-toggle:hover { text-decoration: underline; }

/* ---------- Etiqueta de color del formato junto a las fotos (rev. 16/06/2026) ---------- */
.gallery-format-tag { margin-bottom: 6px; min-height: 22px; }

/* ---------- Tablas "qué lleva cada tubo" por formato ---------- */
.product-tubes { margin: 8px 0 32px; }
.product-tubes > h2 { margin-bottom: 16px; }
.product-tubes-block { margin-bottom: 26px; }
.product-tubes-block > .product-format-badge { display: inline-block; margin-bottom: 10px; }
.product-tubes-table th,
.product-tubes-table td { vertical-align: top; }
.product-tubes-note { font-size: .8rem; color: #888; margin-top: 8px; }

/* Fila de formato: al hacer clic cambia la galería al formato elegido */
.product-format-row { cursor: pointer; }
.product-format-row.format-active { background: rgba(0,138,122,.06); }
.product-pathogen {
    font-size: 1rem;
    color: var(--teal, #0c4c43);
    margin: 0 0 12px 0;
    font-weight: 500;
}
.product-pathogen strong { font-weight: 700; font-style: italic; }
.product-description {
    font-size: .95rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 20px 0;
}
.product-specs {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 18px;
    align-items: baseline;
}
.product-specs dt {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    margin: 0;
}
.product-specs dd {
    font-size: .9rem;
    color: var(--black);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 880px) {
    .product-overview { grid-template-columns: 1fr; }
}
.product-aside { display: flex; flex-direction: column; gap: 24px; }
.product-aside h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--black);
    margin-bottom: 16px;
}
.product-info-card--note { background: rgba(12,76,67,.05); border: 1px solid rgba(12,76,67,.12); }
.product-info-card--note p { font-size: .9rem; color: #555; line-height: 1.6; margin: 0 0 16px 0; }
.product-info-card--note .help-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--teal, #0c4c43);
    color: #fff;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition);
}
.product-info-card--note .help-cta:hover { background: #0a3d36; }
.product-info-card--note .help-cta svg { width: 16px; height: 16px; }

.product-species-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.product-species-list li { margin: 0; }
.product-species-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--black);
    font-size: .85rem;
    font-weight: 600;
    background: var(--light-bg);
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.product-species-list a:hover {
    background: #fff;
    border-color: rgba(12,76,67,.25);
    transform: translateY(-1px);
}
.product-species-list img { width: 28px; height: 28px; }
/* Chip para especies que NO están en el filtro del portfolio (ej. mink, en AMDV) */
.species-chip--plain {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: #555;
    background: #f0f0f0;
}

.product-formats-table { margin-top: 16px; }
.product-format-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--black);
    background: var(--light-bg);
}
.product-format-badge--onemix,
.product-format-badge--multiplex { background: #f7d134; }
.product-format-badge--basicplus,
.product-format-badge--basic\+ { background: #439de8; color: #fff; }
.product-format-badge--basic { background: #3ece78; }

/* Selector de formato de la ficha (revisión 22/06): cambia la foto y el bloque
   "qué contiene cada tubo"; solo un formato visible a la vez. */
.product-format-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.product-format-selector-label {
    font-weight: 700;
    font-size: .9rem;
    color: var(--black);
    margin-right: 4px;
}
.format-select-btn {
    border: 2px solid transparent;
    background: var(--light-bg);
    border-radius: 999px;
    padding: 0px;
    /* inline-flex + align-items centra el badge; antes con line-height:0 el
       texto quedaba apretado dentro del botón (revisión 22/06/2026). */
    display: inline-flex;
    align-items: center;
    line-height: normal;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}
/* Badge del selector: iconos de formato más pequeños en la ficha (rev. 02/07). */
.format-select-btn .product-format-badge { pointer-events: none; padding: 4px 10px; font-size: .75rem; }
.format-select-btn:hover { transform: translateY(-1px); }
.format-select-btn.active { border-color: var(--dark-teal); }
.product-tubes-block[hidden] { display: none; }

.cta-link--small { font-size: .8rem; white-space: nowrap; }
/* Variante para descargas (manual): el texto ya lleva flecha ↓, no añadir → */
.cta-link--small::after { content: none; }
.cta-link--small:hover { gap: 8px; }

/* Descarga del manual en el idioma elegido por el usuario (EN / ES),
   independiente del idioma de navegación. Downloads y ficha de producto. */
.manual-langs { white-space: nowrap; }
.manual-langs .cta-link--small + .cta-link--small { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--gray); }
@media (max-width: 600px) {
    .manual-langs .cta-link--small + .cta-link--small { margin-left: 0; padding-left: 0; border-left: 0; }
    .manual-langs .cta-link--small { display: block; }
}

.product-cta-row {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
/* Enlace "volver al portfolio" (retroceder): lleva flecha ← en el texto,
   no debe añadir la → del ::after. */
.cta-link--back::after { content: none; }
.cta-link--back:hover { gap: 8px; }

/* Botón primario de la ficha: "ir a mi lista de presupuesto" (avanzar al
   carrito). Verde sólido + icono de carrito para diferenciarlo del enlace. */
.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--teal);
    color: var(--white);
    padding: 14px 32px;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    transition: transform var(--transition), box-shadow var(--transition);
}
.btn-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    color: var(--white);
}
.btn-cart svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 880px) {
    .product-layout { grid-template-columns: 1fr; }
}

/* ---------- Quotation Page ---------- */
.page-hero--quotation {
    background: linear-gradient(180deg, rgba(12,76,67,.04) 0%, var(--white) 100%);
}
.page-hero--quotation .page-hero-icon {
    color: var(--teal, #0c4c43);
    margin: 0 auto 16px;
    display: inline-flex;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(12,76,67,.1);
    align-items: center;
    justify-content: center;
}
.quotation-section { padding: 60px 0 120px; background: var(--light-bg); }
.quotation-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
}
.quotation-search,
.quotation-cart {
    background: var(--white);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.quotation-search h3, .quotation-cart h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 10px;
}
.quote-cart-icon {
    display: inline-flex;
    color: var(--teal, #0c4c43);
}
.note { font-size: .8rem; color: #999; line-height: 1.5; }
.quote-search-results {
    list-style: none;
    margin-top: 8px;
    background: var(--white);
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.quote-search-results[hidden] { display: none; }
.quote-search-item {
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: .9rem;
    cursor: pointer;
    transition: background var(--transition);
}
.quote-search-item:last-child { border-bottom: none; }
.quote-search-item:hover { background: var(--light-bg); color: var(--teal, #0c4c43); }
.quote-search-empty {
    padding: 14px;
    color: #999;
    font-size: .9rem;
    text-align: center;
}
.qty-control { display: inline-flex; align-items: center; gap: 8px; }
.qty-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: var(--white);
    font-size: 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}
.qty-btn:hover { border-color: var(--teal); color: var(--teal); }
.qty-value { min-width: 20px; text-align: center; font-weight: 600; }
.add-btn {
    background: none;
    border: none;
    color: var(--teal);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    font-family: var(--font-main);
    transition: color var(--transition);
}
.add-btn:hover { color: var(--dark-teal); }

/* "Opciones disponibles" (quotation) tiene 6 columnas y vive en la columna
   estrecha del grid: apretamos el padding de ESA tabla y compactamos el +/-
   para que el botón "Añadir" no se salga ni aparezca scroll horizontal
   (revisión 22/06/2026). El scroll queda de reserva para francés. */
.quotation-search .data-table th,
.quotation-search .data-table td { padding: 9px 8px; }
.quotation-search .data-table td:nth-child(3),   /* Reacciones */
.quotation-search .data-table td:nth-child(4) { white-space: nowrap; }
.quotation-search .qty-control { gap: 4px; }
.quotation-search .qty-btn { width: 24px; height: 24px; }
.quotation-search .add-btn { white-space: nowrap; }

.cart-remove-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: var(--white);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: border-color var(--transition), color var(--transition);
    font-family: var(--font-main);
    padding: 0;
}
.cart-remove-btn:hover { border-color: #c0392b; color: #c0392b; }

/* ---------- Parallax Section ---------- */
.split-section.parallax-section {
    position: relative;
    overflow: hidden;
}
.parallax-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    will-change: transform;
}
.parallax-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.88);
    z-index: 1;
}
.split-section.parallax-section .container {
    position: relative;
    z-index: 2;
}

/* ---------- Fade-in Animations ---------- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-in-delay-1 { transition-delay: .1s; }
.fade-in-delay-2 { transition-delay: .2s; }
.fade-in-delay-3 { transition-delay: .3s; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .hero .container { grid-template-columns: 1fr; gap: 40px; }
    .hero-image { order: -1; }
    .hero-content h1 { font-size: 2.2rem; }
    .hero-a-content h1 { font-size: 2.4rem; }
    .hero-c { grid-template-columns: 1fr; padding-top: 120px; }
    .hero-c-image { min-height: 50vh; }
    .hero-c-content { padding: 40px 24px; }
    .hero-c-content h1 { font-size: 1.9rem; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item .stat-number { font-size: 2.2rem; }
    .split-section .container { grid-template-columns: 1fr; gap: 40px; }
    .split-section.reverse .container { direction: ltr; }
    .format-cards { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .species-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .portfolio-layout { grid-template-columns: 1fr; gap: 40px; }
    .format-detail-hero { grid-template-columns: 1fr; gap: 40px; }
    .format-detail-hero.reverse { direction: ltr; }
    .format-details-grid { grid-template-columns: 1fr; }
    .downloads-grid { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .quotation-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :root { --section-padding: 80px 0; }

    .main-nav { display: none; }
    .main-nav.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        height: 100vh;
        background: #fff;
        padding: 100px 24px 32px;
        gap: 0;
        z-index: 998;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    .main-nav.open a {
        font-size: 1.1rem;
        padding: 12px 0;
        border-radius: 0;
        display: block;
        width: 100%;
    }
    .main-nav.open a:hover { background: transparent; color: var(--teal); }
    .main-nav.open .nav-dropdown { width: 100%; }
    .main-nav.open .nav-dropdown-toggle {
        font-size: 1.1rem;
        padding: 12px 0;
        width: 100%;
        display: flex;
        align-items: center;
    }
    .main-nav.open .nav-dropdown-toggle:hover { background: transparent; color: var(--teal); }
    .main-nav.open .nav-quote {
        width: 100%;
        display: block;
    }
    .main-nav.open .lang-sep {
        width: 100%;
        height: 1px;
        background: #eee;
        margin: 12px 0 4px;
    }
    .main-nav.open .lang-switch {
        display: inline-block;
        width: auto;
    }
    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        background: #fff;
        padding: 0 0 8px 20px;
        min-width: 0;
        display: none;
        border-left: 2px solid var(--teal);
        margin-left: 8px;
    }
    .nav-dropdown.open > .nav-dropdown-menu { display: block; }
    .nav-dropdown:hover > .nav-dropdown-menu { display: none; }
    .nav-dropdown.open:hover > .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu a {
        font-size: .95rem !important;
        padding: 10px 0 !important;
    }
    .menu-toggle { display: block; position: relative; z-index: 999; }

    .site-header .container { padding-top: 12px; }
    .logo img, .logo svg { height: 50px; }
    .logo { margin-bottom: 8px; }
    .main-nav { padding-bottom: 8px; }
    .site-header.scrolled .logo img,
    .site-header.scrolled .logo svg { height: 32px; }
    .hero { padding: 150px 0 60px; }
    .hero-a { min-height: 80vh; }
    .hero-a-content { padding-top: 140px; padding-bottom: 60px; }
    .hero-a-content h1 { font-size: 2rem; }
    .hero-c-image { min-height: 40vh; }
    .hero-c-content h1 { font-size: 1.8rem; }
    .page-hero { padding: 140px 0 40px; }
    .hero-content h1 { font-size: 1.8rem; }
    .features-grid { grid-template-columns: 1fr; }
    .section-header h2 { font-size: 1.8rem; }
    .split-content h2 { font-size: 1.6rem; }
    .species-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
    .page-hero h1 { font-size: 2rem; }
    .format-title { font-size: 2.2rem; }
    .form-row { grid-template-columns: 1fr; }
    .characteristics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .species-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .format-tabs { flex-wrap: wrap; }
}

/* ---------- Arreglos responsive móvil + TABLET (revisión 18/06/2026) ----------
   El diseño se apila a partir de ~992px, así que estos arreglos se aplican en
   móvil Y tablet en vertical (≤992px), no solo en móvil. */
@media (max-width: 992px) {
    /* 1) Formato concreto seleccionado: foto arriba, texto abajo */
    .format-cards.single-view .format-card { grid-template-columns: 1fr; }
    .format-cards.single-view .format-card-image {
        border-radius: 16px 16px 0 0;
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
    .format-cards.single-view .format-card-text { padding: 20px; }

    /* 2) Portfolio: mostrar los resultados del buscador ANTES de las categorías
          de especies (se ven mientras se escribe). */
    .portfolio-layout { display: flex; flex-direction: column; gap: 24px; }
    .portfolio-sidebar { display: contents; }
    .portfolio-sidebar h3:first-of-type,
    .portfolio-sidebar form,
    .portfolio-sidebar .search-help--cta { order: 1; }
    .portfolio-results { order: 2; }
    .portfolio-sidebar h3:nth-of-type(2),
    .portfolio-sidebar .species-filter-list,
    .portfolio-sidebar > p { order: 3; }

    /* Punto 5 (rev. 02/07): en móvil reducir el listado de kits para que asomen
       las especies sin hacer scroll. */
    .product-list { max-height: 38vh; }

    /* 3 y 4) Tablas anchas (ficha y presupuesto) con scroll horizontal propio,
          para que no desborden ni descuadren la página. */
    .product-section .data-table,
    .quotation-section .data-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    html, body { overflow-x: hidden; }
}

/* Ficha y presupuesto a 1 columna también en tablet horizontal (≤1024px, iPad
   horizontal): así la tabla usa todo el ancho y no queda el hueco de la derecha
   (revisión 18/06/2026). En escritorio (≥1025px) sigue en 2 columnas. */
@media (max-width: 1024px) {
    .product-layout  { grid-template-columns: 1fr; }
    .quotation-layout { grid-template-columns: 1fr; }
}


/* =====================================================
   Notificaciones tipo "toast" (sustituyen al alert())
   ===================================================== */
.exoone-toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    pointer-events: none;
}
.exoone-toast {
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}
.exoone-toast.show {
    opacity: 1;
    transform: translateX(0);
}
.exoone-toast.success {
    background: #008a7b;
}
.exoone-toast.danger {
    background: #c0392b;
}
@media (max-width: 600px) {
    .exoone-toast-container {
        left: 12px;
        right: 12px;
        top: 12px;
        max-width: none;
    }
}

/* ---------- Modal de éxito ---------- */
.exoone-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.exoone-modal[hidden] { display: none !important; }
.exoone-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: exooneModalFadeIn .2s ease-out;
}
.exoone-modal-card {
    position: relative;
    background: var(--white, #fff);
    border-radius: 18px;
    max-width: 440px;
    width: 100%;
    padding: 36px 32px 28px;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    animation: exooneModalPopIn .25s cubic-bezier(.16,.84,.44,1);
}
.exoone-modal-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 173, 96, .12);
    color: #2ead60;
}
.exoone-modal-icon svg { width: 40px; height: 40px; }
.exoone-modal-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--black);
}
.exoone-modal-card p {
    font-size: .95rem;
    color: #555;
    line-height: 1.5;
    margin: 0 0 24px;
}
.exoone-modal-card .btn-primary { min-width: 120px; }
@keyframes exooneModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes exooneModalPopIn {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Cookies · barra inferior, panel de ajustes y política
   (assets/banner-cookies.php + js/cookies.js + {es,en,fr}/cookies.php)
   Adaptado del banner de la web nueva de exopol.com (17-08-2026).
   ============================================================ */

/* La barra sale del flujo y se pega abajo. z-index 1500: por encima del menú
   fijo (1000) y del desplegable de móvil (998/999), pero por debajo del modal
   de envíos (2000), que sí debe taparlo todo cuando aparece. */
.exo-cookies {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1500;
    background: var(--white);
    border-top: 4px solid var(--dark-teal);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .18);
}

/* El atributo hidden es lo único que enseña y esconde la barra: que no pueda
   fallar por una regla de display de otro sitio. */
.exo-cookies[hidden] { display: none; }

.exo-cookies-caja {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 18px 0 22px;
    /* Con el panel abierto en un móvil bajo el contenido no cabe: que haga
       scroll la barra y no la página de detrás. */
    max-height: 85vh;
    overflow-y: auto;
}

.exo-cookies-titulo {
    margin: 0 0 6px;
    color: var(--dark-teal);
    font-size: 1.05rem;
    font-weight: 700;
}

.exo-cookies-texto {
    margin: 0;
    color: var(--dark-gray);
    font-size: .92rem;
    line-height: 1.5;
}

.exo-cookies-texto a { color: var(--teal); text-decoration: underline; }

/* --- Los botones -------------------------------------------------------------
   Mismo tamaño, mismo color y mismo borde a propósito: la normativa pide que
   rechazar cueste lo mismo que aceptar, así que ninguno va destacado. */
.exo-cookies-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.exo-cookies-boton {
    flex: 1 1 auto;
    min-width: 8.5rem;
    padding: 10px 18px;
    border: 2px solid var(--dark-teal);
    border-radius: 8px;
    background: var(--white);
    color: var(--dark-teal);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.exo-cookies-boton:hover,
.exo-cookies-boton:focus-visible {
    background: var(--dark-teal);
    color: var(--white);
}

/* --- El panel de categorías -------------------------------------------------- */
.exo-cookies-panel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gray);
}

.exo-cookies-lista { margin: 0; padding: 0; list-style: none; }

.exo-cookies-cat + .exo-cookies-cat { margin-top: 14px; }

.exo-cookies-cat-cabeza {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.exo-cookies-cat-nombre {
    color: var(--dark-teal);
    font-size: .95rem;
    font-weight: 700;
}

/* El <label> de las opcionales es pinchable: que se note. */
label.exo-cookies-cat-nombre { cursor: pointer; }

.exo-cookies-siempre {
    color: #666;
    font-size: .82rem;
    font-style: italic;
}

/* Casilla grande: en móvil se pulsa con el dedo. */
.exo-cookies-check {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--teal);
    cursor: pointer;
}

.exo-cookies-cat-desc {
    margin: 4px 0 0;
    color: #555;
    font-size: .85rem;
    line-height: 1.45;
}

@media (min-width: 768px) {
    .exo-cookies-botones { justify-content: flex-end; }
    .exo-cookies-boton { flex: 0 0 auto; }
}

/* --- La página de la política ------------------------------------------------
   Es una página legal: una sola columna de texto, sin bandas de color ni
   tarjetas, para que se lea de corrido. */
.legal-section { padding: 24px 0 80px; }

.legal-body {
    max-width: 820px;
    margin: 0 auto;
    color: var(--dark-gray);
}

.legal-block + .legal-block { margin-top: 36px; }

.legal-block h2 {
    margin: 0 0 12px;
    color: var(--dark-teal);
    font-size: 1.35rem;
    font-weight: 700;
}

.legal-block h3 {
    margin: 24px 0 8px;
    color: var(--teal);
    font-size: 1.05rem;
    font-weight: 700;
}

.legal-block p {
    margin: 0 0 12px;
    font-size: .98rem;
    line-height: 1.7;
}

.legal-block ul { margin: 0 0 12px 20px; }
.legal-block li { margin-bottom: 8px; font-size: .98rem; line-height: 1.7; }

.legal-vacia { color: #666; font-style: italic; }

.legal-fecha {
    margin-top: 40px;
    color: #666;
    font-size: .88rem;
}

/* El div de fuera es el que hace scroll en móvil: la tabla tiene cinco
   columnas y no cabe en 360px sin romperse. */
.legal-tabla-caja {
    overflow-x: auto;
    margin: 12px 0 20px;
    border: 1px solid var(--gray);
    border-radius: 8px;
}

.legal-tabla {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .88rem;
}

.legal-tabla th,
.legal-tabla td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e6e6e6;
    line-height: 1.5;
}

.legal-tabla thead th {
    background: var(--light-bg);
    color: var(--dark-teal);
    font-weight: 700;
    white-space: nowrap;
}

/* Nombre y duración no se parten: son cortos y partidos se leen fatal
   («exoone_coo / kies»). La tabla ya tiene min-width y hace scroll en móvil,
   así que no se sale de la pantalla por esto. */
.legal-tabla tbody td:first-child,
.legal-tabla tbody td:nth-child(4) { white-space: nowrap; }

.legal-tabla tbody tr:last-child td { border-bottom: 0; }

.legal-tabla code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    color: var(--dark-teal);
    word-break: break-word;
}

/* Mismo aspecto que los botones del banner: es el mismo gesto. */
.legal-boton {
    display: inline-block;
    padding: 10px 18px;
    border: 2px solid var(--dark-teal);
    border-radius: 8px;
    background: var(--white);
    color: var(--dark-teal);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.legal-boton:hover,
.legal-boton:focus-visible {
    background: var(--dark-teal);
    color: var(--white);
}

/* «Configurar cookies»: es un <button> porque abre el panel, no lleva a ninguna
   página. Va en la línea de abajo del pie, junto al copyright, como en la web
   nueva de exopol.com (Ana no lo encontraba dentro de la columna Legal). Con el
   flex de .footer-bottom queda a la derecha, enfrente del copyright.
   Subrayado a propósito: sin él no se lee como algo pulsable. */
.footer-bottom .footer-link-boton {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .6);
    font-family: inherit;
    font-size: .85rem;
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition);
}

.footer-bottom .footer-link-boton:hover,
.footer-bottom .footer-link-boton:focus-visible { color: var(--white); }