/* ========= Temas (colores con variables) Cambia la clase del : - theme-crimson (actual) - theme-royal - theme-forest ========= */ :root { --bg-1: #6e0a0a; /* crimson profundo */ --bg-2: #9b1111; /* crimson medio */ --txt: #fff7e6; /* marfil */ --muted:#ffe9ba; --card:#00000029; /* glass */ --border:#00000040; --primary:#ffd84d; /* amarillo accesible */ --primary-ink:#5a4300; --accent:#ffb300; --shadow: 0 10px 30px rgba(0,0,0,.35); } /* Paletas alternativas */ html.theme-royal { --bg-1:#0d1b2a; --bg-2:#1b263b; --txt:#e6f1ff; --muted:#c5d6f7; --card:#ffffff14; --border:#ffffff26; --primary:#7cc4ff; --primary-ink:#092238; --accent:#9ad1ff; } html.theme-forest { --bg-1:#0b3d2e; --bg-2:#145a40; --txt:#ecfff4; --muted:#c7f0dd; --card:#ffffff10; --border:#ffffff22; --primary:#8affc1; --primary-ink:#0a2e22; --accent:#b6ffd9; } /* Reset y base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--txt); background: radial-gradient(1200px 600px at 10% 10%, var(--bg-2), transparent 60%), radial-gradient(1200px 600px at 90% 20%, var(--bg-1), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg-1)); background-attachment: fixed; line-height: 1.6; animation: bgMove 18s ease-in-out infinite alternate; } @keyframes bgMove { from { background-position: 0 0, 100% 0, 0 0; } to { background-position: 10% 5%, 90% 10%, 0 100%; } } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* Layout util */ .container { width: min(100%, 960px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 24px); /* más aire lateral y safe area */ } .section { padding: 80px 0; } .section--tight { padding: 60px 0; } .lead { color: var(--muted); max-width: 70ch; } /* Navbar */ .nav { position: sticky; top: 0; z-index: 999; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) min(5vw, 24px); background: rgba(0,0,0,.15); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); transform: translateY(-12px); opacity: 0; animation: navIn .6s ease forwards .2s; } @keyframes navIn { to { transform: translateY(0); opacity: 1; } } .nav__brand { display:flex; align-items:center; gap:10px; } .nav__logo { width: 28px; height: 28px; border-radius: 8px; } .nav__title { color: var(--txt); text-decoration: none; font-weight: 700; } .nav__links { display:flex; align-items:center; gap: 18px; } .nav__links a { color: var(--txt); text-decoration: none; opacity: .9; } .nav__links a:hover { opacity: 1; } /* Botón hamburguesa */ .nav__toggle { display: none; background: transparent; border: 0; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; } .nav__bar { display: block; width: 22px; height: 2px; margin: 3px 0; background: var(--txt); transition: transform .2s ease, opacity .2s ease; } /* Botones */ .btn { display:inline-block; padding: 10px 16px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none; font-weight: 700; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; min-height: 44px; } .btn--primary { background: linear-gradient(180deg, var(--primary), var(--accent)); color: var(--primary-ink); box-shadow: 0 6px 0 rgba(0,0,0,.2); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 16px rgba(0,0,0,.25); } .btn--primary:active { transform: translateY(0); box-shadow: 0 4px 0 rgba(0,0,0,.25); } /* Hero */ .hero { display:grid; gap: 28px; align-items: center; grid-template-columns: 1.1fr .9fr; padding: 70px 0 40px; } .hero__text .kicker { color: var(--primary); font-weight: 700; } .hero h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.1; margin: 8px 0 14px; text-shadow: 0 2px 0 rgba(0,0,0,.25); } .hero__art { display:flex; justify-content:center; } .hero__card { width: min(420px, 90%); aspect-ratio: 16/10; background: rgba(0,0,0,.18); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow); display:grid; place-items:center; transform: translateY(6px); animation: float 6s ease-in-out infinite; } .hero__card img { width: 60%; height: auto; } @keyframes float { 0%,100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } } /* Cards, grid */ .grid { display:grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); } .card h3 { margin: 0 0 8px; } .float { animation: float 7s ease-in-out infinite; animation-delay: .8s; } /* Timeline */ .timeline { list-style: none; margin: 26px 0 0; padding: 0; position: relative; } .timeline::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: rgba(255,255,255,.25); } .timeline__item { display:flex; gap: 16px; position: relative; margin: 22px 0; } .timeline .dot { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--primary), var(--accent)); position: relative; top: 10px; flex: 0 0 auto; box-shadow: 0 0 0 4px rgba(0,0,0,.25); } .timeline__content { flex: 1; } /* Formularios */ .form { margin-top: 18px; } .form__row { display:grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } label { display:grid; gap: 8px; font-weight: 600; } input, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,.18); color: var(--txt); outline: none; min-height: 44px; } textarea { min-height: 120px; } input:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 216, 77, .25); } .hint { opacity: .85; margin-top: 10px; } /* Footer */ .footer { text-align:center; padding: 26px; color: var(--muted); border-top: 1px solid var(--border); background: rgba(0,0,0,.15); } /* Reveal by scroll */ .reveal { opacity: 0; transform: translateY(16px); } .reveal.reveal--in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } /* Estilo de enlaces */ a { color: var(--txt); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); min-height: 44px; } a:hover { text-decoration-color: var(--primary); } /* Listas limpias / con guiones */ .list--clean { list-style: none; padding-left: 0; margin: 0; display: grid; gap: 10px; } .list--dash { padding-left: 16px; } .list--dash li { margin: 6px 0; } /* Chips y tags */ .chip { display:inline-block; font-weight:700; padding: 2px 8px; margin-right: 8px; border-radius: 999px; background: rgba(0,0,0,.25); border:1px solid var(--border); } .tags { margin-top: 10px; display:flex; gap:8px; flex-wrap: wrap; } .tag { display:inline-block; font-size:.9rem; padding: 6px 10px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), var(--accent)); color: var(--primary-ink); border: 0; box-shadow: 0 2px 0 rgba(0,0,0,.2); } /* Acordeón */ .accordion details { margin: 10px 0; } .accordion summary { cursor: pointer; list-style: none; padding: 6px 0; } .accordion summary::-webkit-details-marker { display: none; } .accordion details[open] { outline: 1px dashed rgba(255,255,255,.2); } .accordion .card { padding: 16px 18px; } /* ===== Breakpoints / Mobile-first ===== */ @media (max-width: 900px) { /* menú hamburguesa visible y nav como panel */ .nav__toggle { display: inline-flex; } .nav__links { position: fixed; left: 16px; right: 16px; top: calc(56px + env(safe-area-inset-top)); display: grid; gap: 10px; padding: 12px; background: rgba(0,0,0,.88); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; } .nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav__links a { padding: 10px 8px; border-radius: 8px; } .nav__links a:hover { background: rgba(255,255,255,.06); } /* Hero a 1 columna y tipografía más contenida */ .hero { grid-template-columns: 1fr; text-align: left; padding-top: 48px; } .hero h1 { font-size: clamp(28px, 8vw, 40px); } /* Form, grid: ya usamos auto-fit, reforzamos paddings */ .form__row { grid-template-columns: 1fr; gap: 10px; } } /* Teléfonos pequeños */ @media (max-width: 420px) { .chip, .tag { font-size: .95rem; } .card { padding: 16px; } .hero__card { aspect-ratio: 4/3; } } /* Prefiere menos movimiento */ @media (prefers-reduced-motion: reduce) { .nav, .reveal, .hero__card, .float { animation: none !important; transition: none !important; } }