/* ==================================================================
   Home v2 (rama rediseno-skills)
   Criterio: taste-skill (sin etiquetas sobre titulos, sin degradados,
   sin sombras en reposo, sin lineas finas), sistema de ui-ux-pro-max
   (negro + dorado, Barlow Condensed / Barlow), auditado con impeccable.
   ================================================================== */
/* Tipografia de marca: HK Grotesk (manual de marca) -> Hanken Grotesk, su version abierta (SIL OFL, include/fonts/hanken/OFL.txt) */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/hanken/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/hanken/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/hanken/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/hanken/hanken-grotesk-latin-800-normal.woff2") format("woff2"); }
/* Barlow Condensed solo para cifras y calibres (como los numerales grandes del manual) */
/* Barlow alojada en el sitio (SIL Open Font License, include/fonts/barlow/OFL.txt) */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

.h2 {
    --ground: #111214;
    --ground-2: #1a1b1f;
    --ink: #f4f3ef;
    --ink-2: #c7c6c1;
    --gold: #fcc917; /* manual de marca */
    --gold-ink: #111214;
    --display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --text: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
    --num: "Barlow Condensed", "Arial Narrow", sans-serif;
    --margin: clamp(20px, 4vw, 56px);
    --section: clamp(96px, 12vw, 176px);
    background: var(--ground);
    color: var(--ink);
    font-family: var(--text);
    font-size: 18px;
    line-height: 1.55;
}
.h2 *,
.h2 *::before,
.h2 *::after {
    box-sizing: border-box;
}
.h2 h1, .h2 h2, .h2 h3, .h2 p, .h2 figure, .h2 dl, .h2 dd, .h2 ul {
    margin: 0;
    padding: 0;
}
.h2 h1::before, .h2 h1::after, .h2 h2::before, .h2 h2::after {
    display: none !important;
    content: none !important;
}
.h2 img {
    display: block;
    max-width: 100%;
}
.h2-wrap {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--margin);
}

/* Tipografia: tres tamanos hacen el trabajo */
.h2 .h2-display,
.h2 .h2-h2 {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    text-wrap: balance;
}
.h2 .h2-display {
    font-family: var(--display) !important;
    font-size: clamp(46px, 5.6vw, 88px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 0.98 !important;
    letter-spacing: -0.035em !important;
    text-transform: none !important;
    color: var(--ink) !important;
    text-align: left !important;
}
.h2 .h2-h2 {
    font-family: var(--display) !important;
    font-size: clamp(36px, 4.2vw, 64px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    color: var(--ink) !important;
    text-align: left !important;
}
.h2 .h2-kicker {
    margin: 0 0 20px !important;
    color: var(--gold) !important;
    font-size: clamp(16px, 1.3vw, 19px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.h2 .h2-lead {
    max-width: 30em;
    margin-top: 36px;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.5;
    color: var(--ink);
    text-align: left;
}
.h2 .h2-text {
    max-width: 34em;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
    text-align: left;
}
.h2 .h2-text + .h2-text {
    margin-top: 18px;
}

/* Botones: rectos, un color de relleno */
.h2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}
.h2 a.h2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 30px;
    border: 2px solid var(--gold);
    border-radius: 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.h2 a.h2-btn-solid {
    background: var(--gold);
    color: var(--gold-ink) !important;
}
.h2 a.h2-btn-line {
    background: transparent;
    color: var(--ink) !important;
}
.h2 a.h2-btn:hover,
.h2 a.h2-btn:focus-visible {
    transform: translateY(-2px);
}
.h2 a.h2-btn-solid:hover,
.h2 a.h2-btn-solid:focus-visible {
    background: #ffd451;
}
.h2 a.h2-btn-line:hover,
.h2 a.h2-btn-line:focus-visible {
    background: var(--gold);
    color: var(--gold-ink) !important;
}
.h2 a.h2-link {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    color: var(--gold) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 6px;
}
.h2 a.h2-link:hover,
.h2 a.h2-link:focus-visible {
    color: #ffd451 !important;
}
.h2 :focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

/* ------------------------------------------------------------------
   1. Portada: texto a la izquierda, foto grande a la derecha
   ------------------------------------------------------------------ */
.h2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(88vh, 860px);
    background: var(--ground);
}
.h2-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px var(--margin) 80px var(--margin);
}
.h2-hero-media {
    position: relative;
    overflow: hidden;
}
.h2-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% 40%;
    transform-origin: 40% 50%;
    animation: h2-drift 24s ease-in-out infinite alternate;
}
@keyframes h2-drift {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

/* ------------------------------------------------------------------
   2. Selector de calibre
   ------------------------------------------------------------------ */
.h2-cal {
    padding: var(--section) 0;
    background: var(--ground-2);
}
.h2-cal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 56px;
}
.h2-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.h2 button.h2-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 !important;
    padding: 22px 22px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ground) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.h2 button.h2-tab:hover {
    background: #26272c !important;
}
.h2 button.h2-tab.is-active {
    background: var(--gold) !important;
    color: var(--gold-ink) !important;
}
.h2-tab-num {
    font-family: var(--num) !important;
    font-size: clamp(36px, 4vw, 64px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
}
.h2-tab-sub {
    font-family: var(--text);
    font-size: 16px;
    font-weight: 500;
}
.h2-cal-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.h2 button.h2-prod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 !important;
    padding: 20px 20px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ground) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background-color 0.18s ease;
}
.h2 button.h2-prod:hover,
.h2 button.h2-prod:focus-visible {
    background: #26272c !important;
}
.h2-prod-media {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 18px;
}
.h2-prod-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: transform 0.35s ease, opacity 0.3s ease;
}
/* Balin en 3D + lata como segunda imagen (esquina; al pasar el mouse se agranda) */
.h2-prod-lata {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 30%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), right 0.35s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
    .h2 button.h2-prod.has-3d:hover .h2-prod-3d,
    .h2 button.h2-prod.has-3d:focus-visible .h2-prod-3d { opacity: 0; transform: scale(0.9); }
    .h2 button.h2-prod.has-3d:hover .h2-prod-lata,
    .h2 button.h2-prod.has-3d:focus-visible .h2-prod-lata { width: 100%; right: 0; bottom: 0; }
}
.h2 button.h2-prod:hover .h2-prod-img {
    transform: scale(1.04);
}
.h2-prod-line {
    font-size: 15px;
    font-weight: 600;
    color: var(--gold);
}
.h2-prod-name {
    margin-top: 2px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.h2-prod-weight {
    margin-top: 6px;
    font-size: 16px;
    color: var(--ink-2);
}
.h2-cal-more {
    margin-top: 40px !important;
}

/* ------------------------------------------------------------------
   3. La planta: foto a todo el ancho y franja dorada con cifras
   ------------------------------------------------------------------ */
.h2-plant-media img {
    width: 100%;
    height: min(78vh, 760px);
    object-fit: cover;
    object-position: center 60%;
}
.h2-plant-band {
    padding: 72px 0 80px;
    background: var(--gold);
    color: var(--gold-ink);
}
.h2-plant-band .h2-h2 {
    color: var(--gold-ink) !important;
}
.h2-plant-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: start;
}
.h2-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 48px;
}
.h2-figures dt {
    font-size: 18px;
    font-weight: 600;
}
.h2-figures dd {
    font-family: var(--num) !important;
    font-size: clamp(40px, 4.4vw, 72px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------
   4. Air Boss: foto grande a la izquierda, texto a la derecha
   ------------------------------------------------------------------ */
.h2-story {
    padding: var(--section) 0;
}
.h2-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.h2-story-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.h2-story-text .h2-h2 {
    margin-bottom: 32px;
}
.h2-story-text .h2-btn {
    margin-top: 36px;
}

/* ------------------------------------------------------------------
   5. Donde comprar: titulo con foto + lista de caminos
   ------------------------------------------------------------------ */
.h2-buy {
    padding: 0 0 var(--section);
}
.h2-buy-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
.h2-buy-photo {
    width: 100%;
    margin-top: 40px;
    aspect-ratio: 4 / 5;
    object-position: 50% 30%;
    object-fit: cover;
}
.h2-buy-list {
    list-style: none;
    display: grid;
    gap: 8px;
}
.h2-buy-list li {
    margin: 0;
    padding: 0;
}
.h2-buy-list li::before {
    display: none !important;
}
.h2-buy-list a {
    display: block;
    padding: 32px 36px;
    background: var(--ground-2);
    color: var(--ink) !important;
    text-decoration: none !important;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.h2-buy-list a:hover,
.h2-buy-list a:focus-visible {
    background: var(--gold);
    color: var(--gold-ink) !important;
}
.h2-buy-title {
    display: block;
    font-family: var(--display);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.h2-buy-text {
    display: block;
    max-width: 34em;
    margin-top: 10px;
    font-size: 18px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------
   Entrada de las secciones (solo con JS y sin "reducir movimiento")
   ------------------------------------------------------------------ */
.h2-motion [data-reveal] > * {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h2-motion [data-reveal].is-in > * {
    opacity: 1;
    transform: none;
}
.h2-motion [data-reveal].is-in > *:nth-child(2) { transition-delay: 0.12s; }
.h2-motion [data-reveal].is-in > *:nth-child(3) { transition-delay: 0.24s; }
.h2-motion [data-reveal].is-in > *:nth-child(4) { transition-delay: 0.36s; }
.h2-motion .h2-cal-panel:not(.is-in) .h2-prod { opacity: 0; }
.h2-cal-panel .h2-prod {
    animation: h2-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.h2-motion .h2-cal-panel:not(.is-in) .h2-prod { animation: none; }
.h2-cal-panel .h2-prod:nth-child(2) { animation-delay: 0.08s; }
.h2-cal-panel .h2-prod:nth-child(3) { animation-delay: 0.16s; }
.h2-cal-panel .h2-prod:nth-child(4) { animation-delay: 0.24s; }
.h2-cal-panel .h2-prod:nth-child(5) { animation-delay: 0.32s; }
.h2-cal-panel .h2-prod:nth-child(6) { animation-delay: 0.40s; }
.h2-cal-panel .h2-prod:nth-child(7) { animation-delay: 0.48s; }
.h2-cal-panel .h2-prod:nth-child(8) { animation-delay: 0.56s; }
@keyframes h2-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .h2-hero-media img,
    .h2-cal-panel .h2-prod {
        animation: none !important;
    }
    .h2 *,
    .h2-motion [data-reveal] > * {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------------
   Tablet y celular: cada seccion con su propia composicion
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .h2-cal-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .h2 {
        font-size: 17px;
    }
    .h2-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .h2-hero-media {
        order: -1;
        height: 52vh;
        min-height: 320px;
    }
    .h2-hero-text {
        padding: 40px var(--margin) 64px;
    }
    .h2-cal-head,
    .h2-plant-grid,
    .h2-story-grid,
    .h2-buy-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .h2-cal-head {
        margin-bottom: 32px;
    }
    .h2-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .h2 button.h2-tab:first-child {
        grid-column: 1 / -1;
    }
    .h2-cal-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .h2-plant-media img {
        height: 56vh;
    }
    .h2-plant-band {
        padding: 48px 0 56px;
    }
    .h2-figures {
        gap: 24px;
    }
    .h2-buy-list a {
        padding: 24px 22px;
    }
}
@media (max-width: 480px) {
    .h2 button.h2-prod {
        padding: 14px 14px 18px !important;
    }
    .h2-prod-name {
        font-size: 22px;
    }
    .h2 a.h2-btn {
        flex: 1 1 100%;
    }
}

/* El acceso a Apolo Chile pasa a la lista "Donde conseguir": en la home no flota sobre la portada */
body.home-v2 #chileButton {
    display: none !important;
}

/* --- Ajustes tras auditoria (impeccable + taste) --- */
.h2 a.h2-link { display: inline-block; padding: 8px 0; }
.h2-prod-weight { color: var(--ink-2); }
.h2-buy-title::after {
    content: "";
    display: inline-block;
    width: 0.7em; height: 0.7em;
    margin-left: 0.4em;
    vertical-align: 0.02em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M8 3l5 5-5 5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h12M8 3l5 5-5 5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.18s ease;
}
.h2-buy-list a[target="_blank"] .h2-buy-title::after { transform: rotate(-45deg); }
.h2-buy-list a:hover .h2-buy-title::after { transform: translateX(4px); }
.h2-buy-list a[target="_blank"]:hover .h2-buy-title::after { transform: rotate(-45deg) translateX(4px); }
@media (max-width: 480px) {
    .h2-figures div:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .h2-buy-title::after { transition: none; }
}
@media (max-width: 900px) {
    .h2-buy-photo { aspect-ratio: 1 / 1; object-position: 50% 25%; }
}

/* Etiqueta "Nuevo" en los lanzamientos */
.h2 button.h2-prod { position: relative; }
.h2-prod-nuevo {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 12px;
    background: var(--gold);
    border-radius: 999px;
    color: var(--gold-ink);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* "Todo sale de esta planta": 3 fotos que se van alternando */
.h2-plant-slides {
    position: relative;
    height: min(78vh, 760px);
    overflow: hidden;
    background: var(--ground);
}
.h2-plant-slides img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 60%;
    opacity: 0;
    transform: scale(1.0);
    transition: opacity 1s ease, transform 4.5s linear;
}
.h2-plant-slides img.is-on { opacity: 1; transform: scale(1.06); }
.h2-plant-slides img.h2-slide-equipo { object-position: center 78%; }
.h2-plant-slides img.h2-slide-solar { object-position: center 50%; }
@media (max-width: 900px) {
    .h2-plant-slides { height: 56vh; }
}
@media (prefers-reduced-motion: reduce) {
    .h2-plant-slides img { transition: none; transform: none !important; }
}

/* Air Boss: la lata y el tirador se alternan con una barra dorada que barre la foto */
.h2-story-wipe {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ground-2);
}
.h2-story-wipe img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    z-index: 1;
    clip-path: inset(0 100% 0 0);
}
.h2-story-wipe img.is-on { clip-path: inset(0 0 0 0); }
.h2-story-wipe img.h2-wipe-tirador { object-position: center 30%; }
.h2-story-wipe img.is-entrando {
    z-index: 2;
    animation: h2-wipe 1.15s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes h2-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
.h2-wipe-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 14px;
    margin-left: -7px;
    background: var(--gold);
    visibility: hidden;
    pointer-events: none;
}
.h2-wipe-bar.is-moving {
    visibility: visible;
    animation: h2-wipe-barra 1.15s cubic-bezier(0.77, 0, 0.18, 1) both;
}
@keyframes h2-wipe-barra {
    from { left: 0; }
    to { left: 100%; }
}

/* Air Boss: barra de progreso que anticipa el proximo cambio */
.h2-wipe-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    width: 100%;
    height: 4px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}
.h2-wipe-progress.is-running { animation: h2-progreso var(--dur, 5.5s) linear both; }
@keyframes h2-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h2-wipe-progress.is-paused { animation-play-state: paused; }

/* Cifras: ancho fijo mientras cuentan (no saltan) y siempre en una linea */
.h2-figures dd {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .h2-figures dd { font-size: clamp(30px, 9vw, 40px); }
    .h2-figures { gap: 24px 20px; }
}