/* ============================================
   GPB — Grupo Petroquímico Beta
   Vista (View) — Estilos CSS
   ============================================ */

/* ─── RESET & VARIABLES ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Colores institucionales GPB
       Verde Pantone 3435 C · Azul Pantone 286 C · Rojo Pantone 180 C */
    --navy-900: #023020;
    --navy-800: #024731;
    --navy-700: #006845;
    --navy-600: #00875A;
    --blue: #0033A0;
    --blue-light: #2563C4;
    --blue-pale: #E8EFF8;
    --gold: #C1440E;
    --gold-light: #D4651E;
    --gold-pale: #FDF3EC;
    --green: #006845;
    --green-light: #4CAF7D;
    --green-pale: #E8F5EE;
    --white: #FFFFFF;
    --cream: #FAFCFA;
    --gray-50: #F5F7F6;
    --gray-100: #EDF0EE;
    --gray-200: #D8DFE0;
    --gray-300: #B8C4C0;
    /* --gray-400 da 2.9:1 sobre blanco, por debajo del 4.5:1 que pide
       WCAG AA. Se conserva para texto sobre fondos oscuros (el footer,
       donde sí cumple con 5:1) y se añade --gray-450 para el texto
       secundario sobre fondo claro, que llega a 4.9:1. */
    --gray-400: #8A9B96;
    --gray-450: #64756F;
    --gray-500: #6B7D78;
    --gray-600: #4A5B56;
    --gray-700: #344048;
    --gray-800: #1E2A28;
    --font-display: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --radius: 6px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--gray-800);
    overflow-x: hidden;
    line-height: 1.6;
}

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

/* Las imágenes van envueltas en <picture> para poder servir WebP con
   respaldo JPG. Sin esto, el <picture> (que es inline) se vuelve el hijo
   del grid/flex en lugar de la imagen, y las reglas de alto que apuntan
   a `img` dejan de aplicar: las galerías salían descuadradas.
   Con display:contents la caja del <picture> desaparece y la <img>
   vuelve a ser el hijo directo, como antes. */
picture {
    display: contents;
}

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

/* ─── NAVBAR ─── */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--gray-100);
    transition: all .3s ease;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.nav-logo-img {
    height: 48px;
    width: auto;
    display: block;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.nav-logo-text span:first-child {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--navy-900);
    letter-spacing: .01em;
}

.nav-logo-text span:last-child {
    font-size: 10px;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
}

.nav-links a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gray-500);
    transition: color .3s;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--blue);
    transition: width .3s;
}

.nav-links a:hover {
    color: var(--navy-900);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    padding: 10px 24px !important;
    background: var(--blue) !important;
    border-radius: var(--radius) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    transition: all .3s !important;
    box-shadow: var(--shadow-sm);
}

.nav-cta:hover {
    background: var(--navy-800) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.nav-cta::after {
    display: none !important;
}

/* ── Botón de idioma ──────────────────────────────────────────────────────
   Discreto a propósito: es una utilidad, no una llamada a la acción, y no
   debe competir con «Contacto», que sí lo es. Va con borde en vez de fondo
   sólido por eso mismo.
   El texto es el idioma AL QUE SE VA (dice «EN» estando en español), que es
   la convención que la gente ya reconoce en sitios corporativos. */
.lang-toggle {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 12px;
    border: 1.5px solid var(--blue);
    border-radius: var(--radius);
    background: transparent;
    color: var(--blue);
    cursor: pointer;
    transition: background .25s, color .25s;
    line-height: 1;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
    background: var(--blue);
    color: var(--white);
}

/* En el menú móvil los hermanos son anclas a ancho completo; sin esto el
   botón saldría encogido y desalineado con ellas. */
.lang-toggle-mobile {
    display: block;
    width: fit-content;
    margin-top: 0.5rem;
}

/* Estado del navbar al hacer scroll. Antes esto se escribía desde JS con
   navbar.style.height en cada evento; ahora es una sola clase. */
#navbar.scrolled {
    height: 60px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

#navbar.scrolled .nav-logo-img {
    height: 40px;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    /* Ahora es un <button> para que sea alcanzable con teclado:
       hay que neutralizar los estilos propios del control. */
    background: none;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--navy-900);
    border-radius: 2px;
    transition: all .3s;
}

/* ─── HERO ─── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 5% 80px;
    background: linear-gradient(165deg, var(--cream) 0%, var(--white) 40%, var(--blue-pale) 100%);
    overflow: hidden;
}

.hero-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(4px) brightness(0.9);
    transform: scale(1.05);
    /* Avoid white edges from blur */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg,
            rgba(250, 252, 250, 0.95) 0%,
            rgba(250, 252, 250, 0.8) 40%,
            rgba(250, 252, 250, 0.2) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blue);
    opacity: 0;
    animation: fadeUp .8s .2s forwards;
}

.hero-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--gold);
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5.5vw, 4.8rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy-900);
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeUp .9s .4s forwards;
}

.hero-title em {
    font-style: italic;
    color: var(--blue);
}

.hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 400;
    color: var(--gray-500);
    margin-bottom: 28px;
    opacity: 0;
    animation: fadeUp .9s .55s forwards;
}

.hero-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--gray-600);
    max-width: 540px;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeUp .9s .7s forwards;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp .9s .85s forwards;
}

/* ─── BUTTONS ─── */
.btn-primary {
    padding: 14px 32px;
    background: var(--blue);
    border: none;
    border-radius: var(--radius);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--navy-800);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    padding: 14px 32px;
    background: transparent;
    border: 2px solid var(--navy-800);
    border-radius: var(--radius);
    color: var(--navy-900);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
}

.btn-outline:hover {
    background: var(--navy-900);
    color: var(--white);
}

.btn-outline-white {
    padding: 14px 32px;
    background: transparent;
    border: 2px solid var(--white);
    border-radius: var(--radius);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
}

.btn-outline-white:hover {
    background: var(--white);
    color: var(--navy-900);
}

.btn-planta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 42px;
    background: transparent;
    border: 4px solid var(--navy-900);
    border-radius: 0;
    /* Rectangular as per concept */
    color: var(--navy-900);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

.btn-planta:hover {
    background: var(--navy-900);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Version for dark backgrounds */
.btn-planta-white {
    border-color: var(--white);
    color: var(--white);
}

.btn-planta-white:hover {
    background: var(--white);
    color: var(--navy-900);
}

/* ─── HERO STATS ─── */
.hero-stats {
    position: absolute;
    bottom: 60px;
    right: 5%;
    display: flex;
    gap: 48px;
    z-index: 2;
    opacity: 0;
    animation: fadeUp 1s 1.1s forwards;
}

.hero-stat {
    text-align: right;
}

.hero-stat-number {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--navy-900);
    line-height: 1;
    display: block;
}

.hero-stat-number span {
    color: var(--gold);
}

.hero-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-450);
    display: block;
    margin-top: 6px;
}

/* ─── TICKER ─── */
.ticker {
    background: var(--navy-900);
    padding: 16px 0;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-inner {
    display: inline-flex;
    gap: 48px;
    animation: ticker 30s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.ticker-item::before {
    content: '◆';
    color: var(--gold);
    font-size: 7px;
}

/* ─── SECTIONS (common) ─── */
section {
    padding: 100px 5%;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 16px;
}

.section-eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--gold);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--navy-900);
    margin-bottom: 16px;
}

.section-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--gray-500);
    max-width: 560px;
    margin: 0 auto;
    /* Añadido para centrar cuando hay max-width */
}

/* ─── MERCADOS · CARROTANQUE ─────────────────────────────
   Reemplaza al gráfico de radar. El tanque es ilustración: lo único
   que cambia al seleccionar un mercado es el rótulo de destino y la
   lista de aplicaciones, que son datos reales del modelo. */
.tank-stage {
    position: relative;
    padding: 8px 0 24px;
}

.market-tank {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* El color del relleno lo pone el controlador desde el modelo.
   La transición es lo que hace que el clic se sienta: el producto
   "cambia" dentro del tanque en lugar de saltar. */
.tank-fill {
    transition: fill .45s ease;
}

.tank-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2em;
    fill: var(--gold);
}

.tank-nombre {
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 700;
    fill: var(--navy-900);
}

.tank-apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Sin esto, align-items vale `stretch` por defecto: los chips se
       estiran hasta los 62px del contenedor y el texto queda pegado
       arriba con el hueco debajo. El min-height se conserva para
       reservar el espacio y que no brinque el diseño al cambiar de
       mercado, pero los chips mantienen su alto natural. */
    align-items: center;
    align-content: center;
    gap: 8px;
    margin-top: 4px;
    min-height: 62px;
}

.tank-app {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--navy-800);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 999px;
    padding: 6px 14px;
}

@media (prefers-reduced-motion: reduce) {
    .tank-fill { transition: none; }
}

/* Tarjeta del contador. Antes iba con estilos en línea y posición
   absoluta encima del radar; ahora es un bloque normal debajo. */
.markets-count {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 18px 24px;
    box-shadow: var(--shadow-md);
}

.markets-count-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy-900);
    line-height: 1;
}

.markets-count-num span { color: var(--gold); }

.markets-count-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.4;
    color: var(--gray-450);
}

.markets-count-link {
    font-size: 11px;
    padding: 8px 16px;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .markets-count {
        flex-wrap: wrap;
        gap: 12px;
    }
    .markets-count-text { flex: 1 1 100%; order: 3; }
}

/* ─── PRODUCTOS ─── */
.products {
    background: var(--gray-50);
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
    flex-wrap: wrap;
    gap: 24px;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.product-card {
    position: relative;
    padding: 40px 36px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    overflow: hidden;
    cursor: pointer;
    transition: all .35s ease;
    box-shadow: var(--shadow-sm);
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-pale);
}

.product-card:active {
    transform: translateY(-2px) scale(0.98);
    transition: all .1s ease;
}

.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s;
}

.product-card:hover::after {
    transform: scaleX(1);
}

.product-number {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--blue);
    margin-bottom: 20px;
    display: block;
}

.product-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    opacity: .85;
    transition: transform .3s ease;
}

.product-card:active .product-icon {
    transform: scale(1.1) translateY(-4px);
    opacity: 1;
}

.product-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--navy-900);
    margin-bottom: 12px;
}

.product-desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--gray-500);
    margin-bottom: 24px;
}

.product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-tag {
    padding: 4px 12px;
    background: var(--blue-pale);
    border: 1px solid rgba(0, 104, 69, .12);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--blue);
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue);
    transition: gap .3s;
}

.product-link:hover {
    gap: 14px;
}

.product-card.featured {
    grid-row: span 2;
    background: linear-gradient(160deg, var(--navy-900), var(--navy-800));
    color: var(--white);
    border: none;
}

.product-card.featured .product-name {
    color: var(--white);
}

.product-card.featured .product-desc {
    color: var(--gray-300);
}

.product-card.featured .product-number {
    color: var(--gold-light);
}

.product-card.featured .product-tag {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .85);
}

.product-card.featured .product-link {
    color: var(--gold-light);
}

/* La tarjeta destacada tiene fondo verde oscuro, pero la lista de
   productos heredaba el gris oscuro de .product-item-bullet y quedaba
   prácticamente ilegible sobre ese fondo. */
.product-card.featured .product-items-title {
    color: var(--gold-light);
}

.product-card.featured .product-item-bullet {
    color: rgba(255, 255, 255, .88);
}

.product-card.featured .product-item-bullet::before {
    background: var(--gold-light);
    opacity: 1;
}

.product-card.featured .product-card-details {
    border-top-color: rgba(255, 255, 255, .18);
}

/* ─── MERCADOS ─── */
.markets {
    background: var(--white);
}

.markets-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.markets-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 40px;
}

.market-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: all .3s;
}

.market-item:hover,
.market-item.active {
    background: var(--blue-pale);
    border-left-color: var(--blue);
}

.market-item:active {
    transform: scale(0.97) translateX(2px);
    transition: all .1s ease;
}

.market-item-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.market-icon {
    width: 40px;
    height: 40px;
    background: var(--white);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease;
}

.market-item:active .market-icon {
    transform: scale(1.1);
}

.market-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-900);
}

.market-arrow {
    color: var(--gray-300);
    font-size: 18px;
    transition: all .3s;
}

.market-item:hover .market-arrow,
.market-item.active .market-arrow {
    color: var(--blue);
    transform: translateX(4px);
}

.markets-visual {
    position: relative;
}

.markets-image-placeholder {
    aspect-ratio: 4/5;
    background: linear-gradient(160deg, var(--gray-50), var(--blue-pale));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-100);
    overflow: hidden;
    position: relative;
}

.markets-image-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 104, 69, .08), transparent 60%);
}

/* ─── NOSOTROS ─── */
.about {
    background: var(--cream);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 104, 69, .06), transparent 60%);
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
}

.about-feature {
    padding: 28px 24px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    border-top: 3px solid transparent;
    transition: all .3s;
    box-shadow: var(--shadow-sm);
}

.about-feature:hover {
    border-top-color: var(--blue);
    box-shadow: var(--shadow-md);
}

.about-feature-icon {
    font-size: 28px;
    margin-bottom: 14px;
}

.about-feature-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-900);
    margin-bottom: 6px;
}

.about-feature-text {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gray-500);
}

.about-image-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-photo-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    height: 480px;
}

.about-photo-main {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-photo-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-photo-main img,
.about-photo-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.about-photo-side img {
    height: calc(50% - 6px);
    border-radius: var(--radius);
}

.about-photo-main:hover img,
.about-photo-side img:hover {
    transform: scale(1.05);
}

.about-certifications {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.cert-badge {
    padding: 20px 16px;
    background: var(--white);
    text-align: center;
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
    transition: all .3s;
}

.cert-badge:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--gold-pale);
}

.cert-badge-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.cert-badge-text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-600);
}

/* ─── CIDIT ─── */
.cidit {
    background: var(--white);
}

.cidit-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.cidit-content {
    padding: 56px 48px;
    background: var(--white);
}

.cidit-photo-gallery {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    width: 100%;
    height: 380px;
}

.cidit-photo-main {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cidit-photo-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cidit-photo-main img,
.cidit-photo-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cidit-photo-side img {
    height: calc(70% - 6px);
    border-radius: var(--radius);
}

.cidit-photo-info {
    height: calc(30% - 6px);
    background: var(--blue);
    color: var(--white);
    border-radius: var(--radius);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cidit-photo-info span:first-child {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold-light);
}

.cidit-photo-info span:last-child {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
}

.cidit-photo-main:hover img,
.cidit-photo-side img:hover {
    transform: scale(1.05);
}

/* ─── CONTACTO ─── */
.contact {
    background: var(--gray-50);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.contact-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.contact-item-icon {
    width: 44px;
    height: 44px;
    background: var(--blue-pale);
    border: 1px solid rgba(0, 104, 69, .12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-item-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue);
    display: block;
    margin-bottom: 6px;
}

.contact-item-value {
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-700);
    line-height: 1.5;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-md);
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-600);
}

.form-input,
.form-select,
.form-textarea {
    padding: 12px 16px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--gray-800);
    font-family: var(--font-body);
    font-size: 14px;
    transition: all .3s;
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0, 51, 160, .1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--gray-450);
}

.form-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7D94' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form-select option {
    background: var(--white);
}

.form-textarea {
    resize: vertical;
    min-height: 110px;
}

.form-submit {
    padding: 14px 36px;
    background: var(--blue);
    border: none;
    border-radius: var(--radius);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
    align-self: flex-start;
}

.form-submit:hover {
    background: var(--navy-800);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.form-submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.form-status {
    font-size: 13px;
    min-height: 18px;
    margin: -6px 0 4px;
}

.form-status--success {
    color: #1a7a3c;
}

.form-status--error {
    color: var(--gold);
}

.form-status--info {
    color: var(--gray-500);
}

/* ─── FOOTER ─── */
footer {
    background: var(--navy-900);
    color: var(--white);
    padding: 60px 5% 36px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-brand-logo {
    display: inline-flex;
    align-items: center;
    background: var(--white);
    padding: 12px 20px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.footer-logo {
    height: 38px;
    width: auto;
}

.footer-brand-desc {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--gray-400);
    max-width: 320px;
    margin-top: 16px;
}

.footer-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-400);
    transition: color .3s;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    flex-wrap: wrap;
    gap: 16px;
}

.footer-copy {
    font-size: 12px;
    font-weight: 300;
    color: var(--gray-400);
}

.footer-copy span {
    color: var(--gold);
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.footer-legal a {
    font-size: 12px;
    font-weight: 300;
    color: var(--gray-400);
    transition: color .3s;
}

.footer-legal a:hover {
    color: var(--white);
}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ticker {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ─── MOBILE MENU ─── */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--white);
    padding: 100px 5% 40px;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu a {
    padding: 18px 0;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--navy-900);
    border-bottom: 1px solid var(--gray-100);
    transition: color .3s;
}

.mobile-menu a:hover {
    color: var(--blue);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-card.featured {
        grid-row: span 1;
    }

    .markets-layout,
    .about-layout,
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

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

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    section {
        padding: 72px 5%;
    }

    .hero {
        padding: 100px 5% 120px;
    }

    .hero-stats {
        position: static;
        margin-top: 40px;
        flex-direction: row;
        justify-content: flex-start;
    }

    .hero-stat {
        text-align: left;
    }

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

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-certifications {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

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

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-outline {
        text-align: center;
    }

    .hero-stats {
        gap: 32px;
    }
}

/* ─── CATALOG TABS ─── */
.products-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 28px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
    cursor: pointer;
    transition: all .3s ease;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.tab-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.tab-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    box-shadow: var(--shadow-md);
}

/* ─── DYNAMIC PRODUCT GRID ─── */
#dynamic-products-grid {
    transition: opacity .4s ease;
}

.product-card-details {
    padding: 24px 0;
    border-top: 1px solid var(--gray-100);
    margin-top: 24px;
}

.product-items-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    letter-spacing: .1em;
}

.product-items-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-item-bullet {
    font-size: 13px;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-item-bullet::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--blue-light);
    border-radius: 50%;
    opacity: .6;
}

/* ─── CERTIFICACIONES ─── */
.certifications {
    background: var(--gray-50);
    padding: 100px 5%;
}

/* Galería de Logos */
.certifications-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 80px;
    margin-bottom: 100px;
    padding: 0 5%;
}

.cert-logo-item {
    width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: grayscale(1);
    opacity: .6;
    transition: all .4s ease;
}

.cert-logo-item:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-5px);
}

.cert-logo-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Cuadros de Grados (Emoji-free) */
.certifications-grados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.cert-grado-box {
    background: var(--white);
    padding: 36px 30px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-100);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    border-top: 4px solid var(--blue);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cert-grado-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-pale);
}

.cert-grado-box.implementing {
    border-top-color: var(--gold);
}

.cert-grado-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--navy-900);
    margin-bottom: 10px;
}

.cert-grado-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-500);
}

/* Políticas de Calidad y Seguridad */
.certifications-policies {
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 60px 5% 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.policy-block {
    text-align: center;
    max-width: 720px;
}

.policy-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
}

.policy-title {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--navy-900);
    margin-bottom: 18px;
}

.policy-text {
    font-size: 15px;
    line-height: 1.85;
    color: var(--gray-500);
}

.policy-divider {
    width: 60px;
    height: 1px;
    background: var(--gray-100);
}

@media (max-width: 768px) {
    .certifications-policies {
        padding: 40px 0 0;
        gap: 30px;
    }

    .policy-title {
        font-size: 1.25rem;
    }
}

.certifications-note {
    text-align: center;
    font-size: 14px;
    color: var(--gray-450);
    font-style: italic;
    margin-top: 40px;
}

.certifications-note a {
    color: var(--blue);
    font-weight: 600;
}

/* ─── CIDIT ANIMATIONS ─── */
#cidit-svg {
    filter: drop-shadow(0 0 20px rgba(212, 176, 92, 0.1));
}

#svg-hex-outer {
    animation: hexRotate 20s linear infinite;
    transform-origin: center;
}

#svg-hex-inner {
    animation: hexRotate 15s linear infinite reverse;
    transform-origin: center;
}

#svg-hex-core {
    animation: pulseCore 4s ease-in-out infinite;
    transform-origin: center;
}

.svg-orbit-dot {
    animation: orbitDot 10s linear infinite;
    transform-origin: center;
}

@keyframes hexRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseCore {

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

    50% {
        transform: scale(1.05);
        opacity: 0.4;
    }
}

@keyframes orbitDot {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ─── STRATEGIC LOCATION ─── */
.planta-location {
    background: var(--navy-900);
    padding: 100px 5%;
    color: var(--white);
    overflow: hidden;
    position: relative;
}

.location-layout {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.location-visual {
    position: relative;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.mexico-map-svg {
    width: 100%;
    height: 100%;
    max-height: none;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
    display: block;
}

.map-path {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 0.5;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.map-path:hover {
    fill: rgba(255, 255, 255, 0.1);
    stroke: rgba(255, 255, 255, 0.3);
}

.map-path.highlight {
    fill: var(--gold);
    stroke: var(--gold);
    filter: drop-shadow(0 0 15px rgba(193, 68, 14, 0.6));
    opacity: 0.9;
}

.location-dot-pulse {
    animation: dotPulse 2s infinite;
}

@keyframes dotPulse {
    0% {
        r: 3;
        opacity: 1;
    }

    50% {
        r: 6;
        opacity: 0.7;
    }

    100% {
        r: 3;
        opacity: 1;
    }
}

.magnifier-container {
    position: absolute;
    /* Veracruz/Tabasco border: ~64% from left, ~67% from top in the SVG */
    left: 52%;
    top: 56%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    z-index: 20;
    pointer-events: none;
    animation: floatMagnifier 6s ease-in-out infinite;
}

.magnifier-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    background-size: cover;
    background-position: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
        inset 0 0 40px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    background-color: var(--navy-800);
}

.magnifier-handle {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 70px;
    height: 12px;
    background: linear-gradient(to bottom, #444, #222);
    transform: rotate(45deg);
    border-radius: 6px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.magnifier-label {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

@keyframes floatMagnifier {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(10px, -20px) rotate(2deg);
    }

    66% {
        transform: translate(-5px, -10px) rotate(-1deg);
    }
}

.location-info {
    z-index: 2;
}

.location-detail-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 32px;
    backdrop-filter: blur(10px);
}

.location-text-row {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.location-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
}

.location-text {
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@media (max-width: 900px) {
    .location-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .location-visual {
        height: 420px;
    }

    .magnifier-container {
        width: 160px;
        height: 160px;
    }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .tab-btn {
        padding: 10px 20px;
        font-size: 11px;
    }
}
/* ============================================
   COMPONENTES AÑADIDOS / CORRECCIONES
   ============================================ */

/* ─── ACCESIBILIDAD ─── */

/* Enlace para saltar la navegación con teclado. Solo se ve al enfocarlo. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--navy-900);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
    left: 0;
}

/* Foco visible y consistente en todo lo interactivo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.noscript-aviso {
    padding: 16px 5%;
    background: var(--gold-pale);
    border-bottom: 2px solid var(--gold);
    color: var(--gray-800);
    font-size: 14px;
    text-align: center;
}

/* Bloquea el scroll del fondo mientras el menú móvil está abierto. */
body.menu-abierto {
    overflow: hidden;
}

/* ─── ANIMACIONES DE SCROLL ─── */

/* Antes el estado inicial y la transición se escribían inline desde JS.
   Vive en CSS para que el controlador solo alterne una clase. */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    .animate-on-scroll,
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ─── FICHAS DE CIDIT Y PLANTA ─── */

/* Estas dos clases se usaban en el renderizado de cidit.html y
   la-planta.html pero nunca se habían definido, así que ese texto salía
   sin estilo alguno. */
.feature-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy-900);
    margin-bottom: 10px;
}

.feature-desc {
    font-size: 14px;
    line-height: 1.8;
    color: var(--gray-600);
}

/* ─── MERCADOS ─── */
.market-detalle {
    font-size: 12px;
    color: var(--gray-450);
    margin-top: 4px;
}

/* ─── FOOTER ─── */
.footer-contact-item {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-400);
    margin-bottom: 12px;
}

.footer-contact-icon {
    color: var(--gold);
    margin-right: 8px;
}

/* ─── WHATSAPP DEL PIE (BetaBot) ───
   El icono es SVG y no emoji: no existe emoji de WhatsApp, y un sucedaneo
   (telefono, bocadillo) no se reconoce de un vistazo, que es justo lo unico
   que este icono tiene que conseguir. Hereda .footer-contact-icon para que el
   tamano y el margen sean los mismos que los de la direccion y el telefono. */
.footer-whatsapp {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}
.footer-whatsapp:hover,
.footer-whatsapp:focus-visible {
    color: var(--gold);
    text-decoration: underline;
}
.footer-icon-wa {
    flex: 0 0 auto;        /* el SVG no se encoge si el numero se parte */
    vertical-align: middle;
}
.footer-wa-nombre {
    margin-left: 6px;
    opacity: .75;
    font-size: .85em;
}

/* ─── FORMULARIO: CONSENTIMIENTO Y NOTA LEGAL ─── */
.form-label .req {
    color: var(--gold);
    margin-left: 2px;
}

.form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.form-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--blue);
    cursor: pointer;
}

.form-consent label {
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-600);
    cursor: pointer;
}

.form-consent a {
    color: var(--blue);
    text-decoration: underline;
}

.form-legal-note {
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--gray-450);
}

.form-legal-note a {
    color: var(--gray-450);
    text-decoration: underline;
}

/* ─── PÁGINAS LEGALES ─── */
.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 140px 5% 100px;
}

.legal-page h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--navy-900);
    margin-bottom: 12px;
}

.legal-page .legal-fecha {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-450);
    margin-bottom: 48px;
}

.legal-page h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--navy-900);
    margin: 40px 0 14px;
}

.legal-page p,
.legal-page li {
    font-size: 15px;
    line-height: 1.85;
    color: var(--gray-600);
}

.legal-page ul {
    margin: 12px 0 12px 22px;
}

.legal-page li {
    margin-bottom: 8px;
}

.legal-page a {
    color: var(--blue);
    text-decoration: underline;
}

/* Marca los huecos que jurídico debe completar antes de publicar. */
.legal-pendiente {
    display: block;
    margin: 32px 0;
    padding: 18px 22px;
    background: var(--gold-pale);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gray-700);
}

/* ─── LOGÍSTICA · CARROTANQUE ─────────────────────────────
   Ilustración de la página de planta. El carrotanque NO codifica
   ningún dato: está porque es literalmente cómo llega la materia
   prima. Si algún día se le quiere dar significado al nivel del
   líquido, hay que recordar que un cilindro horizontal no se llena
   de forma lineal y la altura engañaría. */
.logistica {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 64px;
    padding: 100px 5%;
    background: var(--cream);
    border-top: 1px solid var(--gray-100);
}

.logistica-texto .section-title em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--navy-700);
}

.logistica-figura {
    margin: 0;
    min-width: 0;
}

.carrotanque {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;
    margin: 0 auto;
    overflow: visible;
}

.logistica-figura figcaption {
    margin-top: 18px;
    text-align: center;
    font-size: 12px;
    letter-spacing: .04em;
    color: var(--gray-450);
}

@media (max-width: 900px) {
    .logistica {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 72px 5%;
    }
}

/* ─── CORRECCIÓN: DESBORDE EN MÓVIL DE LA PÁGINA DE PLANTA ───
   El título de esta sección llevaba `font-size: 2.4rem` en línea y un
   <br> forzado, así que "Infraestructura de Clase" quedaba en una sola
   línea imposible de partir. Como las columnas de grid no encogen por
   debajo de su contenido (min-width: auto), la rejilla —y con ella el
   documento entero— se volvía más ancha que la pantalla, y el
   overflow-x del body recortaba TODAS las secciones de la página, no
   solo esta. */
.location-layout > * {
    min-width: 0;
}

.location-title {
    color: var(--white);
    margin-bottom: 32px;
    font-size: clamp(1.7rem, 5vw, 2.4rem);
}

.location-title em {
    color: var(--gold);
}

@media (max-width: 560px) {
    /* Sin ancho para dos renglones, el salto forzado estorba */
    .location-title br {
        display: none;
    }
}

/* Aviso de que un documento legal no está traducido. Sobrio a propósito: es
   información, no una alerta de error. */
.legal-solo-es {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--blue);
    background: rgba(0, 0, 0, .03);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ─── ICONOS SVG ───
   Sustituyen a los emojis que habia por el sitio: se veian distintos en cada
   sistema operativo. Van a 1em para heredar el font-size del contenedor, que
   es el que ya dimensionaba al emoji; asi el cambio no altera la maqueta.
   El color sale de `currentColor`, o sea del contenedor tambien. */
.gpb-icono,
.about-feature-icon-svg,
.cert-badge-icon-svg,
.market-icon-svg,
.contact-item-icon-svg,
.boton-icono {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
}

/* Los que viven dentro de una caja de tamano fijo no tienen font-size del que
   heredar, asi que se les da medida propia. */
.market-icon-svg { width: 22px; height: 22px; color: var(--green-deep, #00563A); }
.contact-item-icon-svg { width: 22px; height: 22px; color: var(--green, #006845); }
svg.footer-contact-icon { width: 16px; height: 16px; vertical-align: -0.2em; }
.boton-icono { width: 1.2rem; height: 1.2rem; }