/* ============================================================
   Noah Software — Hoja de estilos principal
   Todos los colores están en :root. Cambia ahí y se actualiza todo.
   Más abajo hay paletas alternativas listas para copiar.
   ============================================================ */

/* ---------- Paleta activa: CREMA Y NARANJO ---------- */
:root {
    /* Fondos */
    --color-fondo: #fffaf3;
    /* crema cálido */
    --color-fondo-alt: #ffeed8;
    /* durazno suave: hero y encabezados */
    --color-superficie: #ffffff;
    /* tarjetas, formularios, tablas */
    --color-pie: #4a2c1a;
    /* chocolate */

    /* Texto */
    --color-texto: #2d2420;
    --color-suave: #6b5c52;
    --color-pie-texto: #fff4e6;
    --color-pie-suave: #e2c9b0;

    /* Marca */
    --color-acento: #f7a531;
    /* naranjo Noah */
    --color-acento-osc: #e08a12;
    --color-acento-texto: #a85600;
    /* naranjo legible sobre fondo claro */
    --color-sobre-acento: #1a1a1a;
    --color-enlace: #0f7c8c;

    /* Bordes y estados */
    --color-borde: #f0dcc2;
    --color-exito: #1e7f4f;
    --color-error: #c0392b;

    --radio: 12px;
    --sombra: 0 6px 24px rgba(120, 70, 20, .10);
    --ancho: 1100px;
    --fuente: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Otras paletas (copia sus valores dentro de :root) ----------

   TURQUESA Y NARANJO
    --color-fondo: #f1fbf9;   --color-fondo-alt: #d3f2ec;
    --color-superficie: #ffffff;   --color-pie: #0f4c4a;
    --color-texto: #15302e;   --color-suave: #4d6a67;
    --color-pie-texto: #e9fbf8;   --color-pie-suave: #a9d6cf;
    --color-enlace: #0a7d73;   --color-borde: #bfe6de;
    --sombra: 0 6px 24px rgba(15, 76, 74, .10);

   CIELO Y NARANJO
    --color-fondo: #f4f9ff;   --color-fondo-alt: #d9ebff;
    --color-superficie: #ffffff;   --color-pie: #1f4e8c;
    --color-texto: #17283d;   --color-suave: #51647b;
    --color-pie-texto: #f0f6ff;   --color-pie-suave: #b5cbea;
    --color-enlace: #1a66c9;   --color-borde: #c8dcf4;
    --sombra: 0 6px 24px rgba(31, 78, 140, .10);

   AZUL OSCURO (el original)
    --color-fondo: #16263b;   --color-fondo-alt: #1d3049;
    --color-superficie: #213752;   --color-pie: #0d1621;
    --color-texto: #eef3f9;   --color-suave: #a9b8ca;
    --color-pie-texto: #eef3f9;   --color-pie-suave: #a9b8ca;
    --color-acento-texto: #f2a33a;   --color-enlace: #8cc4ff;
    --color-borde: #314a6b;   --color-exito: #7fd6a2;   --color-error: #ff9b93;
    --sombra: 0 6px 24px rgba(0, 0, 0, .25);
   ------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--fuente);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.6;
}

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

a {
    color: var(--color-enlace);
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin-top: 0;
}

h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
}

.contenedor {
    width: min(100% - 32px, var(--ancho));
    margin-inline: auto;
}

.contenedor--angosto {
    max-width: 720px;
}

.oculto {
    position: absolute;
    left: -9999px;
}

/* ---------- Botones ---------- */
.boton {
    display: inline-block;
    padding: .8rem 1.5rem;
    border: 2px solid var(--color-acento);
    border-radius: 999px;
    background: var(--color-acento);
    color: var(--color-sobre-acento);
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.boton:hover {
    background: var(--color-acento-osc);
    border-color: var(--color-acento-osc);
    transform: translateY(-1px);
}

.boton--secundario {
    background: transparent;
    color: var(--color-texto);
    border-color: var(--color-texto);
}

.boton--secundario:hover {
    background: color-mix(in srgb, var(--color-texto) 8%, transparent);
    border-color: var(--color-texto);
}

.boton--oscuro {
    background: var(--color-pie);
    color: #fff;
    border-color: var(--color-pie);
}

.boton--oscuro:hover {
    background: var(--color-texto);
    border-color: var(--color-texto);
}

.boton--chico {
    padding: .45rem 1.1rem;
}

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--color-fondo) 92%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-borde);
}

.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

.logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-texto);
    text-decoration: none;
}

.logo__icono {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-acento);
    object-fit: cover;
    border: 2px solid var(--color-acento);
}

.logo strong {
    display: block;
    font-size: 1.15rem;
}

.logo small {
    display: block;
    color: var(--color-suave);
    font-size: .8rem;
    margin-top: -4px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.menu a:not(.boton) {
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 600;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}

.menu a:not(.boton):hover,
.menu a.activo {
    border-color: var(--color-acento);
}

.menu-toggle,
.menu-boton {
    display: none;
}

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(circle at 80% 30%, rgba(242, 163, 58, .12), transparent 45%),
        linear-gradient(160deg, var(--color-fondo-alt), var(--color-fondo) 70%);
    padding: 4.5rem 0;
}

.hero__interior {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.etiqueta {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .25rem .8rem;
    border-radius: 999px;
    background: rgba(242, 163, 58, .18);
    color: var(--color-acento-texto);
    font-weight: 700;
    font-size: .85rem;
}

.hero__texto {
    font-size: 1.15rem;
    color: var(--color-suave);
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Noah sobre un círculo naranjo: el naranjo hace resaltar su pelaje negro */
.noah {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 520px;
}

.noah::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 462px;
    /* antes 420px (+10%) */
    height: 462px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f8bd63, var(--color-acento) 60%, var(--color-acento-osc));
    box-shadow: 0 0 0 12px rgba(242, 163, 58, .15), var(--sombra);
}

.noah picture {
    position: relative;
    height: 100%;
}

.noah img {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35));
}

.maqueta {
    border-radius: var(--radio);
    overflow: hidden;
    background: var(--color-superficie);
    box-shadow: var(--sombra);
    border: 1px solid var(--color-borde);
}

.maqueta__barra {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: var(--color-fondo-alt);
}

.maqueta__barra span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-borde);
}

.maqueta__cuerpo {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    color: var(--color-suave);
    font-weight: 600;
}

/* ---------- Secciones ---------- */
.seccion {
    padding: 4rem 0;
}

.seccion__titulo {
    text-align: center;
    margin-bottom: 2.5rem;
}

.encabezado-pagina {
    padding: 3rem 0;
    text-align: center;
    background: var(--color-fondo-alt);
    border-bottom: 1px solid var(--color-borde);
}

.encabezado-pagina p {
    color: var(--color-suave);
    font-size: 1.1rem;
    margin: 0;
}

.tarjetas {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tarjeta {
    padding: 1.8rem;
    border-radius: var(--radio);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    box-shadow: var(--sombra);
    transition: transform .2s, border-color .2s;
}

.tarjeta:hover {
    transform: translateY(-3px);
    border-color: var(--color-acento);
}

.tarjeta__icono {
    font-size: 2rem;
    margin-bottom: .5rem;
}

.tarjeta p {
    color: var(--color-suave);
    margin-bottom: 0;
}

/* Franja de llamado a la acción (antes azul, ahora naranjo) */
.llamado {
    background: var(--color-acento);
    color: var(--color-sobre-acento);
    padding: 3.5rem 0;
}

.llamado__interior {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.llamado h2 {
    margin: 0;
}

/* ---------- Formularios ---------- */
.formulario {
    display: grid;
    gap: 1.1rem;
}

.formulario label {
    display: grid;
    gap: .35rem;
    font-weight: 600;
}

.formulario input,
.formulario textarea,
.formulario select {
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font: inherit;
    font-weight: 400;
    color: var(--color-texto);
    background: var(--color-superficie);
}

.formulario input::placeholder,
.formulario textarea::placeholder {
    color: var(--color-suave);
}

.formulario input:focus,
.formulario textarea:focus {
    outline: 2px solid var(--color-acento);
    outline-offset: 1px;
    border-color: transparent;
}

.formulario .boton {
    justify-self: start;
}

.campo-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.nota {
    color: var(--color-suave);
    font-size: .9rem;
    margin: 0;
}

.alerta {
    padding: 1rem 1.2rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.alerta ul {
    margin: .4rem 0 0;
    padding-left: 1.2rem;
}

.alerta--exito {
    background: color-mix(in srgb, var(--color-exito) 12%, transparent);
    color: var(--color-exito);
    border: 1px solid color-mix(in srgb, var(--color-exito) 40%, transparent);
}

.alerta--error {
    background: color-mix(in srgb, var(--color-error) 12%, transparent);
    color: var(--color-error);
    border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
}

/* ---------- Pie ---------- */
.pie {
    background: var(--color-pie);
    color: var(--color-pie-suave);
    padding: 2.5rem 0;
    border-top: 3px solid var(--color-acento);
}

.pie a {
    color: var(--color-pie-texto);
}

.pie__interior {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
}

.pie strong {
    color: var(--color-pie-texto);
}

.pie__copy {
    width: 100%;
    font-size: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 1rem;
}

/* ---------- Panel admin ---------- */
.admin-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: baseline;
}

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
}

.filtros a {
    padding: .3rem .9rem;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid var(--color-borde);
    color: var(--color-texto);
    font-size: .9rem;
}

.filtros a.activo {
    background: var(--color-acento);
    border-color: var(--color-acento);
    color: var(--color-sobre-acento);
}

.tabla-scroll {
    overflow-x: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--color-superficie);
    border-radius: var(--radio);
}

.tabla th,
.tabla td {
    padding: .75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-borde);
}

.tabla th {
    background: var(--color-fondo-alt);
    white-space: nowrap;
}

.tabla small {
    color: var(--color-suave);
}

.tabla__mensaje {
    max-width: 280px;
}

.tabla select {
    padding: .3rem;
    border-radius: 6px;
    font: inherit;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* ---------- Celular ---------- */
@media (max-width: 800px) {
    .hero__interior {
        grid-template-columns: 1fr;
    }

    .noah {
        height: 380px;
    }

    .noah::before {
        width: min(330px, 90vw);
        /* antes 300px (+10%) */
        height: min(330px, 90vw);
    }

    .hero {
        padding: 3rem 0;
    }

    .campo-doble {
        grid-template-columns: 1fr;
    }

    .menu-boton {
        display: block;
        font-size: 1.6rem;
        cursor: pointer;
        padding: .2rem .5rem;
    }

    .menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-fondo);
        border-bottom: 1px solid var(--color-borde);
        padding: .5rem 16px 1rem;
    }

    .menu a:not(.boton) {
        padding: .8rem 0;
        border-bottom: 1px solid var(--color-borde);
    }

    .menu .boton {
        margin-top: 1rem;
        text-align: center;
    }

    .menu-toggle:checked~.menu {
        display: flex;
    }
}