:root{--background:#fbfffd;--surface:#f1fbf6;--surface-low:#e6f5ec;--primary:#527d52;--primary-dark:#365f38;--secondary:#def8eb;--text:#1c1b1f;--muted:#4f5c50;--outline:#7a8c7a;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--background);font-family:Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}main{position:relative;overflow:hidden;min-height:100vh}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;width:min(1180px,calc(100% - 32px));margin:16px auto 0;padding:10px 14px 10px 12px;border:1px solid rgba(122,140,122,.18);border-radius:999px;background:rgba(251,255,253,.84);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(28,27,31,.06)}.brand{display:flex;gap:10px;align-items:center;font-weight:700}.brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(54,95,56,.16))}nav{display:flex;gap:4px}nav a{padding:10px 16px;border-radius:999px;color:var(--muted);font-size:.9rem;font-weight:500;transition:.25s var(--ease)}nav a:hover{background:rgba(82,125,82,.1);color:var(--primary)}.hero,.section,.portfolio-section,footer{width:min(1180px,calc(100% - 32px));margin-left:auto;margin-right:auto}.hero{position:relative;min-height:610px;margin-top:26px;padding:clamp(42px,7vw,84px);display:grid;grid-template-columns:1.25fr .75fr;align-items:center;border-radius:48px;background:var(--surface);overflow:hidden}.hero:before{content:"";position:absolute;width:460px;height:460px;right:-120px;top:-150px;border-radius:50%;background:radial-gradient(circle,rgba(82,125,82,.28),transparent 66%)}.hero-copy{position:relative;z-index:2;max-width:690px}.eyebrow{display:inline-flex;padding:8px 14px;border-radius:999px;color:var(--primary-dark);background:var(--secondary);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}h1{margin:22px 0 20px;font-size:clamp(3.2rem,7vw,6.4rem);line-height:.96;letter-spacing:-.055em;font-weight:500}h1 em{color:var(--primary);font-style:normal}.hero p{max-width:610px;margin:0 0 30px;color:var(--muted);font-size:clamp(1rem,2vw,1.22rem);line-height:1.65}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;transition:.3s var(--ease)}.primary-button{color:#fff;background:var(--primary);box-shadow:0 10px 22px rgba(82,125,82,.2)}.primary-button:hover{transform:translateY(-2px);background:var(--primary-dark);box-shadow:0 14px 28px rgba(82,125,82,.28)}.hero-orbit{position:relative;z-index:2;min-height:340px}.logo-orb{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:245px;height:245px;display:grid;place-items:center;border-radius:42% 58% 55% 45%;background:rgba(251,255,253,.62);box-shadow:0 22px 60px rgba(54,95,56,.18);animation:float 6s ease-in-out infinite;backdrop-filter:blur(10px)}.logo-orb img{width:220px;height:220px;object-fit:contain}.orb{position:absolute;display:grid;place-items:center;box-shadow:0 22px 60px rgba(54,95,56,.2)}.orb-small{width:58px;height:58px;border-radius:20px;color:var(--primary);background:rgba(251,255,253,.92);font-size:24px;font-weight:700}.orb-a{top:10%;left:7%;transform:rotate(-10deg)}.orb-b{right:3%;top:25%;transform:rotate(12deg)}.orb-c{bottom:5%;left:18%;transform:rotate(8deg)}.section{padding:100px 0 20px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:34px}h2{margin:14px 0 0;font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.035em;line-height:1.05}.section-heading p{max-width:440px;margin:0;color:var(--muted);line-height:1.55}.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{min-height:300px;display:flex;flex-direction:column;justify-content:space-between;padding:26px;border-radius:28px;background:var(--surface);box-shadow:0 3px 14px rgba(28,27,31,.05);transition:.3s var(--ease)}a.service-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(28,27,31,.11)}.service-card--private{background:linear-gradient(145deg,#eff9f3,#e3f3e9)}.service-card--disabled{opacity:.62;background:transparent;border:1px dashed rgba(122,140,122,.55);box-shadow:none}.card-topline{display:flex;justify-content:space-between;align-items:flex-start}.icon-shell{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;color:var(--primary);background:var(--secondary);font-size:25px;font-weight:700}.badge{padding:7px 11px;border-radius:999px;color:var(--muted);background:var(--surface-low);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.service-card h3{margin:38px 0 10px;font-size:1.55rem}.service-card p{margin:0;color:var(--muted);line-height:1.55}.card-action{display:flex;align-items:center;gap:7px;margin-top:22px;color:var(--primary);font-weight:700}.portfolio-section{margin-top:110px;padding:48px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;border-radius:38px;color:#fff;background:linear-gradient(125deg,var(--primary-dark),var(--primary));box-shadow:0 24px 60px rgba(54,95,56,.22)}.portfolio-icon{display:grid;place-items:center;width:82px;height:82px;border-radius:28px;background:rgba(255,255,255,.12);font-size:40px}.portfolio-section h2{margin-top:10px;font-size:clamp(1.8rem,3vw,2.7rem)}.portfolio-section p{max-width:650px;color:rgba(255,255,255,.8);line-height:1.55}.eyebrow--light{color:#fff;background:rgba(255,255,255,.13)}.secondary-button{color:var(--primary-dark);background:#fff;white-space:nowrap}.secondary-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18)}footer{margin-top:80px;padding:46px 8px 28px;display:grid;grid-template-columns:1fr 1.4fr;gap:34px;border-top:1px solid rgba(122,140,122,.22)}.footer-brand p{color:var(--muted);line-height:1.5}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.footer-links a{display:flex;flex-direction:column;gap:5px;padding:18px;border-radius:20px;background:var(--surface);color:var(--muted);transition:.25s var(--ease)}.footer-links a strong{color:var(--text);font-size:.9rem;overflow-wrap:anywhere}.footer-links a:hover{transform:translateY(-3px);background:var(--surface-low)}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:24px;color:var(--muted);font-size:.88rem}.ambient{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.22}.ambient-one{width:340px;height:340px;top:500px;left:-180px;background:#527d52}.ambient-two{width:380px;height:380px;top:1350px;right:-220px;background:#8eaf91}a:focus-visible{outline:3px solid var(--primary);outline-offset:4px}@keyframes float{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-55%) rotate(3deg)}}
@media(max-width:900px){nav{display:none}.hero{grid-template-columns:1fr;min-height:auto}.hero-orbit{min-height:300px}.card-grid{grid-template-columns:repeat(2,1fr)}.portfolio-section{grid-template-columns:auto 1fr}.portfolio-section .secondary-button{grid-column:1/-1;justify-self:start}.footer-links{grid-template-columns:1fr}}
@media(max-width:620px){.topbar,.hero,.section,.portfolio-section,footer{width:min(100% - 20px,1180px)}.hero{padding:38px 24px;border-radius:30px}.hero-orbit{min-height:260px}.logo-orb{width:185px;height:185px}.logo-orb img{width:168px;height:168px}.section{padding-top:72px}.section-heading{display:block}.section-heading p{margin-top:16px}.card-grid{grid-template-columns:1fr}.service-card{min-height:270px}.portfolio-section{margin-top:75px;padding:30px 24px;grid-template-columns:1fr}.portfolio-icon{width:64px;height:64px}.portfolio-section .secondary-button{width:100%}footer{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}

/* Tipos de etiqueta. Puedes añadir más siguiendo el mismo formato. */
.badge--web{color:#365f38;background:#def8eb}
.badge--herramienta{color:#365f38;background:#e6f5ec}
.badge--minijuego{color:#544b21;background:#f5f0d8}
.badge--privado{color:#4d3d63;background:#eee7f7}
.badge--upcoming{color:var(--muted);background:var(--surface-low)}
/* Ejemplo para una nueva etiqueta:
.badge--multimedia{color:#31556b;background:#e1f1f8}
*/