/* ==========================================================================
   Kristian Transfers - Base: variables, reset, tipografia, formularios, utilidades
   ========================================================================== */

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

:root {
    /* Marca (heredadas de la web anterior: NO cambiar, las usa la portada) */
    --primary-blue: #0a1f44;
    --dark-blue: #0f3460;
    --gold: #75c7ed;
    --white: #ffffff;
    --light-gray: #f3f4f6;
    --text-dark: #000000;
    --border-color: #1f2937;

    /* Sistema de diseno nuevo */
    --navy: #0a1f44;
    --navy-2: #0f3460;
    --accent: #75c7ed;
    --accent-dark: #3a9fd0;
    --cta: #f59e0b;
    --cta-2: #fbbf24;
    --green: #10b981;
    --ink: #0b1b33;
    --muted: #5b6b82;
    --line: #e3e9f2;
    --bg: #f6f9fd;
    --card: #ffffff;
    --danger: #dc2626;
    --ok: #059669;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow-sm: 0 1px 2px rgba(10, 31, 68, .06), 0 2px 8px rgba(10, 31, 68, .05);
    --shadow: 0 8px 28px rgba(10, 31, 68, .10);
    --shadow-lg: 0 18px 50px rgba(10, 31, 68, .16);
    --ease: cubic-bezier(.22, .8, .24, 1);
    --font: 'Segoe UI', system-ui, -apple-system, Roboto, Tahoma, Geneva, Verdana, sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
    font-family: var(--font);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main:focus { outline: none; }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Foco visible para teclado en todo el sitio nuevo */
:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- Secciones */
.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section--alt { background: var(--bg); }
.section--dark { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.section-header { text-align: center; max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3.25rem); }
.eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-dark); margin-bottom: .75rem;
}
.section--dark .eyebrow { color: var(--accent); }
.section-title {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.18; font-weight: 800; color: var(--navy);
    letter-spacing: -.01em; margin: 0;
}
.section--dark .section-title { color: #fff; }
.section-subtitle { margin-top: .9rem; font-size: 1.08rem; color: var(--muted); }
.section--dark .section-subtitle { color: rgba(255, 255, 255, .78); }
.cta-center { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------------ Botones */
.btn-outline {
    background: transparent; border: 2px solid var(--navy); color: var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(10, 31, 68, .3); }
.btn-block { display: block; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn i { margin-right: .4rem; }
/* Los botones del sitio nuevo son enlaces o botones con el mismo aspecto */
a.btn { text-decoration: none; }
.btn { font-family: inherit; }

/* ---------------------------------------------------------------- Formularios */
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.field > label, .field-label { font-size: .82rem; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.field .hint { font-size: .78rem; color: var(--muted); }
.input, .select, .textarea {
    width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff;
    padding: .78rem .9rem; font-size: 1rem; color: var(--ink); transition: border-color .2s, box-shadow .2s;
    min-height: 46px;
}
.textarea { min-height: 96px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: #c5d2e6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 4px rgba(117, 199, 237, .3); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.field-error { color: var(--danger); font-size: .8rem; font-weight: 600; min-height: 1em; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--navy); flex: none; }
.check a { color: var(--accent-dark); font-weight: 600; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */

/* ---------------------------------------------------------------- Mensajes */
.notice { border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .95rem; display: flex; gap: .7rem; align-items: flex-start; }
.notice i { margin-top: .2rem; }
.notice--info { background: #eaf6fd; color: #0b4a6e; border: 1px solid #bfe3f6; }
.notice--warn { background: #fff7e6; color: #7a4a00; border: 1px solid #ffdca3; }
.notice--ok { background: #e8f8f1; color: #05603f; border: 1px solid #b3e8d0; }
.notice--error { background: #fdecec; color: #8a1c1c; border: 1px solid #f6c1c1; }

/* ---------------------------------------------------------------- Toasts / loader */
.toast-container { position: fixed; z-index: 10050; right: 16px; bottom: 90px; display: flex; flex-direction: column; gap: .6rem; max-width: min(92vw, 380px); }
.toast {
    background: var(--navy); color: #fff; padding: .85rem 1.1rem; border-radius: 12px; box-shadow: var(--shadow-lg);
    font-size: .95rem; display: flex; gap: .6rem; align-items: center; animation: toastIn .3s var(--ease);
}
.toast--ok { background: var(--ok); }
.toast--error { background: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.spinner {
    width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff;
    animation: spin .7s linear infinite; display: inline-block; vertical-align: -4px;
}
.spinner--dark { border-color: rgba(10, 31, 68, .2); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Animaciones de entrada */
.js .reveal, .js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--left { transform: translateX(-28px); }
.js .reveal--right { transform: translateX(28px); }
.js .reveal--zoom { transform: scale(.94); }

/* Quien prefiere menos movimiento: sin animaciones ni desplazamientos suaves */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------- Skip link */
.skip-link { position: absolute; top: -48px; left: 8px; }
.skip-link:focus { top: 8px; }

@media print {
    .header, .footer, .whatsapp-float, .cookie-banner, .cookie-fab, .toast-container { display: none !important; }
}