/*
Theme Name: Mario López Ayala
Theme URI: https://example.com/
Author: Qroma Host
Author URI: https://qromahost.com/
Description: Tema WordPress personalizado basado en el diseño HTML de Mario López Ayala, PhD. Bilingüe ES/EN, ligero y responsive.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: mario-lopez-ayala
*/

:root{--bg:#fff;--text:#111;--muted:#666;--line:#e7e7e7;--soft:#f7f7f7}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
a{color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 28px}
.serif{font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:-.02em}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}
.brand{text-decoration:none}
.name{font-size:12px;text-transform:uppercase;letter-spacing:.30em;color:#666}
.subname{margin-top:4px;font-size:12px;color:#777}
.main-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.main-nav a{text-decoration:none;color:#666;font-size:14px}
.main-nav a:hover{color:#111}
.lang-switch{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px}
.lang-switch button{border:0;background:transparent;padding:8px 14px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;color:#666}
.lang-switch button.active{background:#111;color:#fff}
.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:center;padding:64px 0 96px}
.badge{display:inline-block;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:8px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:#666}
h1{margin:22px 0 0;font-size:72px;line-height:.95;max-width:850px}
.intro{margin-top:28px;max-width:760px;padding-left:18px;border-left:1px solid var(--line);color:#555;font-size:18px;line-height:1.9}
.cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;border-radius:999px;padding:14px 22px;font-size:14px;font-weight:600;border:1px solid #111}
.btn.primary{background:#111;color:#fff}.btn.secondary{background:#fff;color:#111;border-color:var(--line)}
.portrait-wrap{border:1px solid var(--line);background:var(--soft);border-radius:24px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.05)}
.portrait{width:100%;height:640px;object-fit:cover;border-radius:18px;display:block}
section{border-top:1px solid var(--line);padding:64px 0}
section.soft{background:#fafafa}
section.dark{background:#111;color:#fff;border-top-color:#222}
.section-head{display:grid;grid-template-columns:.78fr 1.22fr;gap:40px;align-items:start;margin-bottom:32px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.25em;color:#777}
.dark .eyebrow{color:#9a9a9a}
h2{margin:14px 0 0;font-size:48px;line-height:1.05;max-width:700px}
.section-copy{font-size:18px;line-height:1.8;color:#666}
.dark .section-copy{color:#c9c9c9}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:24px;padding:26px;background:#fff}
.card h3{margin:0;font-size:30px;line-height:1.1}
.card p{margin:14px 0 0;font-size:15px;line-height:1.8;color:#666}
.dark .card{border-color:#2a2a2a;background:rgba(255,255,255,.03)}
.dark .card p{color:#cfcfcf}.dark .card h3{color:#fff}
.phoenix-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.28em;color:#9a9a9a}
.phoenix-word{margin-top:10px;font-size:38px;line-height:1;font-family:Georgia,"Times New Roman",Times,serif}
.ready{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:6px 10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#b8b8b8}
.contact-center{text-align:center;max-width:900px;margin:0 auto}
.contact-center p{max-width:760px;margin:22px auto 0;color:#666;font-size:18px;line-height:1.8}
footer{border-top:1px solid var(--line);padding:28px 0 40px;color:#777;font-size:13px}
.mobile-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px;font-size:12px}
@media (max-width:1024px){
 h1{font-size:58px}.hero,.section-head{grid-template-columns:1fr}
 .grid-5,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
 .container{padding:0 18px}.header-inner{align-items:flex-start;flex-direction:row}
 .mobile-toggle{display:block}.main-nav{display:none;width:100%;gap:12px;flex-direction:column;align-items:flex-start;padding-top:12px}
 .main-nav.open{display:flex}.site-header .header-inner{flex-wrap:wrap}
 h1{font-size:42px}h2{font-size:34px}.hero{padding:42px 0 56px}
 .intro,.section-copy,.contact-center p{font-size:16px}.portrait{height:460px}
 .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
}