/* Ocean's Magma — web pública.
 *
 * Los colores salen del propio logo; están documentados en
 * resources/marca/oceansmagma/LEEME.md junto al resto de la marca.
 *
 * CSS propio y no Tailwind a propósito: esta web la sirve Plesk desde una
 * carpeta suya (httpdocs/web_oceansmagma), no pasa por Laravel ni por el build
 * del panel. Un `npm run build` que no se lanza no puede dejarla torcida.
 */

:root {
    --om-azul-profundo: #061E3D;
    --om-azul: #14528F;
    --om-magma: #E04000;
    --om-tinta: #1b2330;
    --om-suave: #5a6676;
    --om-borde: #e3e8ef;
    --om-fondo: #ffffff;
    --om-crema: #f6f8fb;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--om-fondo);
    color: var(--om-tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--om-azul); }

h1, h2, h3 { text-wrap: balance; }

.om-ancho { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* ── Cabecera ───────────────────────────────────────────────── */

.om-cabecera {
    border-bottom: 1px solid var(--om-borde);
    background: var(--om-fondo);
    position: sticky;
    top: 0;
    z-index: 10;
}

.om-cabecera .om-ancho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
}

.om-cabecera img { height: 2.4rem; width: auto; }

/* ── Botones ────────────────────────────────────────────────── */

.om-boton {
    display: inline-block;
    padding: 0.62rem 1.15rem;
    border-radius: 0.4rem;
    background: var(--om-azul);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.om-boton:hover { background: var(--om-azul-profundo); }
.om-boton:focus-visible { outline: 3px solid var(--om-magma); outline-offset: 2px; }
.om-boton--magma { background: var(--om-magma); }
.om-boton--magma:hover { background: #b83500; }

/* ── Portada ────────────────────────────────────────────────── */

.om-entrada { padding: 4rem 0 2.5rem; max-width: 44rem; }
.om-eyebrow {
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--om-magma);
}
.om-entrada h1 {
    margin: 0 0 1rem;
    font-size: 2.6rem;
    line-height: 1.15;
    color: var(--om-azul-profundo);
}
.om-entrada p { margin: 0 0 1.75rem; font-size: 1.15rem; color: var(--om-suave); }

.om-bloque { padding: 2.5rem 0; border-top: 1px solid var(--om-borde); }
.om-bloque h2 { font-size: 1.4rem; color: var(--om-azul-profundo); margin: 0 0 1.25rem; }
.om-bloque p { max-width: 44rem; color: var(--om-suave); }

.om-rejilla {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.om-rejilla h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.om-rejilla p { margin: 0; color: var(--om-suave); }

/* ── Páginas legales ────────────────────────────────────────── */

.om-legal { max-width: 44rem; margin: 2.5rem auto; }
.om-legal h1 { font-size: 1.9rem; line-height: 1.25; color: var(--om-azul-profundo); }
.om-legal h2 { font-size: 1.35rem; margin-top: 2.25rem; color: var(--om-azul-profundo); }
.om-legal h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.om-legal p, .om-legal li { color: #333c4a; }
.om-legal ul { padding-left: 1.2rem; }
.om-legal table { width: 100%; border-collapse: collapse; }
.om-legal td, .om-legal th {
    border: 1px solid var(--om-borde);
    padding: 0.5rem;
    text-align: left;
    font-size: 0.9rem;
}
/* Una tabla ancha se desplaza dentro de su caja; la página nunca de lado. */
.om-tabla { overflow-x: auto; }

/* ── Pie ────────────────────────────────────────────────────── */

.om-pie {
    margin-top: 4rem;
    border-top: 1px solid var(--om-borde);
    background: var(--om-crema);
    padding: 2.5rem 0;
    font-size: 0.875rem;
    color: var(--om-suave);
}
.om-pie a { color: var(--om-suave); }
.om-pie h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--om-tinta);
    margin: 0 0 0.6rem;
}
.om-pie-rejilla {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.om-pie ul { list-style: none; margin: 0; padding: 0; }
.om-pie li { margin-bottom: 0.3rem; }
.om-pie p { margin: 0; }
.om-copy { margin-top: 2rem; }

@media (max-width: 640px) {
    .om-cabecera .om-ancho { min-height: 3.75rem; }
    .om-cabecera img { height: 1.9rem; }
    .om-entrada { padding: 2.5rem 0 1.5rem; }
    .om-entrada h1 { font-size: 2rem; }
}