/* =========================================================
   Base — colores, letra y piezas que usan todas las páginas
   ========================================================= */

:root {
    --negro: #0A0A0A;
    --negro-2: #111111;
    --superficie: #161616;
    --superficie-2: #1D1D1D;
    --borde: #2A2A2A;
    --blanco: #FFFFFF;
    --texto: #EDEDED;
    --texto-suave: #A3A3A3;
    --naranja: #FFB423;
    --naranja-oscuro: #E89A00;
    --naranja-suave: rgba(255, 180, 35, 0.12);
    --verde: #34D399;

    --fuente: "League Spartan", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radio: 16px;
    --radio-chico: 10px;
    --sombra: 0 20px 50px rgba(0, 0, 0, 0.45);
    --ancho: 1200px;
    --alto-encabezado: 76px;
    --hexagono: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

@media (max-width: 960px) {
    :root { --alto-encabezado: 68px; }
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--alto-encabezado); }

body {
    background: var(--negro);
    color: var(--texto);
    font-family: var(--fuente);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { color: var(--blanco); line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 800; }
h3, .h3 { font-size: 1.35rem; font-weight: 700; }

:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

/* ---------- Utilidades ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.contenedor--angosto { max-width: 820px; }
.resaltado { color: var(--naranja); }

.saltar {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--naranja); color: var(--negro);
    padding: 10px 16px; border-radius: var(--radio-chico); font-weight: 700;
}
.saltar:focus { top: 16px; }

.etiqueta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 180, 35, 0.35);
    background: var(--naranja-suave);
    color: var(--naranja);
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.etiqueta::before { content: ""; width: 8px; height: 8px; background: var(--naranja); clip-path: var(--hexagono); }

/* ---------- Botones ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 700; font-size: 1rem; line-height: 1;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); }
.boton--primario { background: var(--naranja); color: var(--negro); box-shadow: 0 8px 24px rgba(255, 180, 35, 0.25); }
.boton--primario:hover { background: var(--naranja-oscuro); box-shadow: 0 12px 30px rgba(255, 180, 35, 0.35); }
.boton--borde { border-color: var(--borde); color: var(--blanco); }
.boton--borde:hover { border-color: var(--naranja); color: var(--naranja); }
.boton--oscuro { background: var(--negro); color: var(--blanco); }
.boton--oscuro:hover { background: #222; }
.boton--grande { padding: 16px 28px; font-size: 1.05rem; }
.boton--ancho { width: 100%; }

/* ---------- Secciones ---------- */
.seccion { padding: 110px 0; position: relative; }
.seccion--alterna { background: var(--negro-2); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion__cabecera { max-width: 720px; margin-bottom: 56px; }
.seccion__cabecera h2 { margin: 18px 0 16px; }
.seccion__cabecera p { color: var(--texto-suave); font-size: 1.12rem; }
.seccion__cabecera--centro { margin-left: auto; margin-right: auto; text-align: center; }

/* Título de las páginas internas (Productos, Soluciones…) */
.titulo-pagina {
    position: relative; overflow: hidden;
    padding: calc(var(--alto-encabezado) + 80px) 0 80px;
    border-bottom: 1px solid var(--borde);
}
.titulo-pagina::before {
    content: ""; position: absolute; top: -260px; right: -160px;
    width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 180, 35, 0.16), transparent 65%);
    pointer-events: none;
}
.titulo-pagina::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 65%);
    -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 15%, transparent 65%);
    pointer-events: none;
}
.titulo-pagina .contenedor { position: relative; z-index: 1; }
.titulo-pagina h1 { margin: 20px 0 18px; max-width: 820px; }
.titulo-pagina p { color: var(--texto-suave); font-size: 1.15rem; max-width: 640px; }

/* ---------- Piezas reutilizadas ---------- */
.hexagono {
    width: 64px; height: 64px;
    display: grid; place-items: center;
    background: var(--naranja);
    clip-path: var(--hexagono);
}
.hexagono svg { width: 28px; height: 28px; fill: none; stroke: var(--negro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lista-check { display: flex; flex-direction: column; gap: 10px; }
.lista-check li { display: flex; align-items: flex-start; gap: 10px; color: var(--texto); font-size: 0.98rem; }
.lista-check li::before {
    content: "✓"; flex: none;
    width: 20px; height: 20px; margin-top: 1px;
    display: grid; place-items: center;
    background: var(--naranja-suave); color: var(--naranja);
    border-radius: 50%; font-size: 0.75rem; font-weight: 800;
}

/* ---------- Aparecer al bajar (js/comun.js) ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.revelar.visible { opacity: 1; transform: none; }
.sin-js .revelar { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .seccion { padding: 84px 0; }
    .titulo-pagina { padding: calc(var(--alto-encabezado) + 56px) 0 60px; }
}

@media (max-width: 560px) {
    body { font-size: 1rem; }
    .contenedor { padding: 0 16px; }
    .seccion { padding: 68px 0; }
    .seccion__cabecera { margin-bottom: 40px; }
    .titulo-pagina { padding: calc(var(--alto-encabezado) + 40px) 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .revelar { opacity: 1; transform: none; }
}