/* =========================================================
   LeCorch Photo · Base
   ========================================================= */

@layer plugins {

    body {
        background: var(--color-fondo);
        color: var(--color-tinta);
        font-family: var(--font);
        font-weight: var(--peso-light);
        font-size: var(--fs-body);
        line-height: var(--altura-body);
        letter-spacing: 0;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font);
        font-weight: var(--peso-thin);
        line-height: var(--altura-titulos);
        letter-spacing: -0.01em;
        color: var(--color-tinta);
    }

    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); }
    h4 { font-size: var(--fs-h4); }
    h5 { font-size: var(--fs-h5); }
    h6 { font-size: var(--fs-h6); }

    p { margin-block: 0 1em; }

    a {
        color: inherit;
        text-decoration: none;
        transition: color var(--d-fast) var(--ease);
    }

    @media (hover: hover) and (pointer: fine) {
        a:hover { color: var(--color-oceano); }
    }

    /* Skip link */
    .fp-skiplink {
        position: absolute;
        top: 0;
        left: 0;
        padding: 12px 20px;
        background: var(--color-tinta);
        color: #FFFFFF;
        font-family: var(--font);
        font-weight: var(--peso-medium);
        font-size: var(--fs-small);
        text-transform: uppercase;
        letter-spacing: 0.15em;
        z-index: 9999;
        transform: translateY(-110%);
        transition: transform var(--d-fast) var(--ease);
    }
    .fp-skiplink:focus {
        transform: translateY(0);
        outline: 2px solid var(--color-dorado);
        outline-offset: -2px;
    }

    /* Focus visible global */
    :focus-visible {
        outline: 2px solid var(--color-oceano);
        outline-offset: var(--focus-offset);
    }

    /* Sección genérica · full viewport por default */
    .fp-section {
        max-width: var(--layout-max-width);
        margin: 0 auto;
        padding: var(--sp-section-y) var(--sp-lateral);
    }
    .fp-section--narrow {
        max-width: var(--layout-max-width-narrow);
    }

    .fp-section__header {
        margin-bottom: clamp(40px, 5vw, 80px);
        text-align: center;
    }

    .fp-section__eyebrow,
    .eyebrow {
        font-family: var(--font);
        font-weight: var(--peso-medium);
        font-size: var(--fs-eyebrow);
        text-transform: uppercase;
        letter-spacing: 0.22em;
        color: var(--color-tinta-secundaria);
        margin: 0 0 16px;
        display: inline-block;
    }

    .fp-section__title {
        font-size: var(--fs-h2);
        font-weight: var(--peso-thin);
        letter-spacing: -0.01em;
        color: var(--color-tinta);
        max-width: 22ch;
        margin: 0 auto 16px;
    }

    .fp-section__lead {
        max-width: 56ch;
        margin: 0 auto;
        font-size: var(--fs-lead);
        color: var(--color-tinta-secundaria);
        font-weight: var(--peso-light);
    }

    /* Botón base */
    .fp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 14px 32px;
        font-family: var(--font);
        font-weight: var(--peso-medium);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        line-height: 1;
        border: 1px solid transparent;
        border-radius: 0;
        cursor: pointer;
        transition:
            color var(--d-fast) var(--ease),
            background-color var(--d-fast) var(--ease),
            border-color var(--d-fast) var(--ease);
    }

    .fp-btn--solid {
        background: var(--color-oceano);
        color: #FFFFFF;
        border-color: var(--color-oceano);
    }
    .fp-btn--solid::after { content: '→'; }

    @media (hover: hover) and (pointer: fine) {
        .fp-btn--solid:hover {
            background: var(--color-oceano-profundo);
            border-color: var(--color-oceano-profundo);
            color: #FFFFFF;
        }
    }

    .fp-btn--outline {
        background: transparent;
        color: var(--color-oceano);
        border-color: var(--color-oceano);
    }

    /* Scroll lock cuando hay modal abierto */
    .fp-no-scroll { overflow: hidden; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms;
            animation-iteration-count: 1;
            transition-duration: 0.01ms;
            scroll-behavior: auto;
        }
    }

}