/* ===== HazelRo — tema inspirado en EY ===== Colores principales: EY Yellow #FFE600; “off-black” #161D23 Nota: EYInterstate requiere licencia. Inter queda como fallback. */ /* ---------- Tokens ---------- */ :root{ --brand:#FFE600; /* EY Yellow */ --ink:#161D23; /* texto principal */ --ink-2:#2B3035; /* títulos / contraste */ --muted:#51565C; /* texto secundario */ --bg:#FFFFFF; /* fondo */ --surface:#F6F7F9; /* panel claro */ --border:#E3E6EA; /* líneas */ --shadow:0 10px 30px rgba(0,0,0,.06); } /* ---------- Tipografía ---------- */ /* Si tienes Adobe Fonts, añade en del HTML: y deja "interstate" como primera opción. */ html{font-size:16px} body{ font-family: interstate, Inter, -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; margin:0; } h1,h2,h3{color:var(--ink-2); line-height:1.25; margin:0 0 .4rem} h1{font-weight:700} h2,h3{font-weight:600} p{margin:0 0 .6rem} a{color:var(--ink); text-decoration:none} a:hover{color:#000} /* ---------- Botones ---------- */ .btn{ display:inline-block; padding:.7rem 1rem; border-radius:10px; border:1px solid var(--border); background:#fff; color:var(--ink); } .btn:hover{background:#f9fafb} .btn-accent{ background:var(--brand); border:1px solid #d6b800; color:#111; box-shadow:0 8px 22px rgba(255,230,0,.25); } .btn-accent:hover{filter:brightness(.97)} /* ---------- Header / Navbar ---------- */ .site-header{background:#fff; border-bottom:1px solid var(--border)} .navbar{ max-width:1200px; margin:auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; } .brand{display:flex; align-items:center; gap:10px} .brand-logo{width:28px; height:28px; border-radius:6px; object-fit:cover} .brand-name{font-weight:700; letter-spacing:.2px} .menu a{font-weight:600; margin-left:16px} .menu a.cta{background:var(--brand); color:#111; padding:.55rem .9rem; border-radius:10px; border:1px solid #d6b800} /* ---------- Hero ---------- */ .hero{ padding:28px 0 10px; text-align:center; background: radial-gradient(60% 60% at 50% 50%, rgba(255,230,0,.10), transparent 70%), var(--surface); border-bottom:1px solid var(--border); } .hero h1{font-size:clamp(24px,3vw,32px); margin-bottom:8px} .hero p{color:var(--muted); margin-bottom:14px} .cta-row{display:flex; gap:10px; justify-content:center} /* Hero con foto (home): si no existe el archivo, se ve el degradado igual */ .hero--with-photo{ background-image: url('/assets/img/home/hero-01.jpg'), radial-gradient(60% 60% at 50% 50%, rgba(255,230,0,.10), transparent 70%), linear-gradient(#F6F7F9, #F6F7F9); background-size: cover, auto, auto; background-position: center; background-blend-mode: normal; } /* ---------- Órbita (index) ---------- */ .orbit-wrap{max-width:1100px; margin:24px auto 8px; padding:0 20px} .orbit{ position:relative; width:min(92vw,980px); aspect-ratio:1/1; margin:0 auto; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); box-shadow:var(--shadow) inset; background: radial-gradient(60% 60% at 50% 50%, rgba(255,230,0,.10), transparent 70%), radial-gradient(90% 90% at 50% 50%, #f7f9fc 0%, #eef2f7 70%); } .core{ width:clamp(140px, 22vw, 260px); height:clamp(140px, 22vw, 260px); border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; } .core img{width:78%; height:auto; display:block; opacity:.98} .node{ --r: clamp(150px, 34vw, 320px); --a: 0deg; position:absolute; left:50%; top:50%; transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); transform-origin:center; width:clamp(110px, 19vw, 160px); height:clamp(110px, 19vw, 160px); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; text-align:center; background:#fff; color:var(--ink); border:1px solid var(--border); box-shadow:var(--shadow); transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease } .node small{font-size:.78rem; color:var(--muted)} .node strong{font-size:.96rem; line-height:1.15} .node:hover{ background:var(--brand); color:#111; box-shadow:0 10px 28px rgba(255,230,0,.25); transform:rotate(var(--a)) translate(calc(var(--r) + 6px)) rotate(calc(-1 * var(--a))) scale(1.04); } .n1{--a:-18deg} .n2{--a:54deg} .n3{--a:126deg} .n4{--a:198deg} .n5{--a:270deg} @media (max-width:640px){ .node{--r: clamp(110px, 36vw, 200px)} } /* ---------- Grid de servicios (cards) ---------- */ .wrap{max-width:1200px; margin:auto; padding:0 20px} #servicios{padding:22px 0 30px} #servicios h2{font-size:1.3rem; margin:8px 0 14px} .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px} .card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; color:inherit; display:block; } .card:hover{box-shadow:var(--shadow); border-color:transparent} .card .muted{color:var(--muted); font-size:.95rem} /* Card con mini-foto (opcional) */ .card--with-photo{padding:0} .card__img{ display:block; width:100%; height:140px; object-fit:cover; border-radius:12px 12px 0 0; background:#e9edf2 url('/assets/img/cards/placeholder.jpg') center/cover no-repeat; } .card__body{padding:14px} /* ---------- Footer ---------- */ .site-footer{border-top:1px solid var(--border); margin-top:22px; background:#fff} .foot{ max-width:1200px; margin:auto; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px } .foot .muted{color:var(--muted)}