:root {
  --bg: #070a10;
  --bg-soft: #0d1119;
  --panel: #111722;
  --panel-2: #151c29;
  --text: #f4f6f8;
  --muted: #9aa4b4;
  --line: rgba(255,255,255,.09);
  --accent: #d7ff3f;
  --accent-2: #9dbd25;
  --max: 1180px;
  --radius: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.container { width: min(var(--max), calc(100% - 48px)); margin: auto; }
.accent { color: var(--accent); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(7,10,16,.72); border-bottom: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.nav { height: 78px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 32px; height: 32px; border: 1px solid rgba(215,255,63,.6); border-radius: 10px; display: grid; place-items: center; overflow: hidden; background: #05070b; box-shadow: 0 0 28px rgba(215,255,63,.08); flex: 0 0 32px; }
.brand-mark img { width: 25px; height: 25px; object-fit: contain; display: block; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14px; color: #c6ccd5; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-cta { padding: 11px 17px; border: 1px solid var(--line); border-radius: 999px; color: #fff !important; }
.nav-cta span { color: var(--accent); margin-left: 6px; }
.menu-toggle { display: none; background: none; border: 0; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px; }

.hero { min-height: 860px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 150px 0 100px; }
.hero-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 60% 45%, black, transparent 75%); }
.hero::after { content:""; position:absolute; width: 700px; height:700px; right:-250px; top:80px; background: radial-gradient(circle, rgba(215,255,63,.11), transparent 67%); pointer-events:none; }
.hero-content { display: grid; grid-template-columns: 1.03fr .97fr; gap: 80px; align-items: center; position: relative; z-index: 2; }
.eyebrow, .section-label { color: var(--accent); text-transform: uppercase; font-size: 11px; letter-spacing: .18em; font-weight: 800; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(215,255,63,.2); background: rgba(215,255,63,.05); border-radius: 999px; margin-bottom: 25px; }
.pulse { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); }
.hero h1 { font-size: clamp(60px, 7.6vw, 104px); line-height: .91; letter-spacing: -.075em; max-width: 720px; }
.hero h1 span, .section-heading h2 span, .about-copy h2 span, .cta-box h2 span, .contact-hero h1 span { color: var(--accent); }
.hero-text { color: var(--muted); max-width: 610px; font-size: 17px; margin: 28px 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; font-weight: 750; font-size: 14px; border: 1px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: #11150b; background: var(--accent); box-shadow: 0 10px 35px rgba(215,255,63,.13); }
.btn-secondary { color: #fff; border-color: var(--line); background: rgba(255,255,255,.02); }
.btn-light { background: #fff; color: #090c11; }
.hero-trust { display: flex; gap: 32px; margin-top: 55px; }
.trust-item { display: flex; flex-direction: column; gap: 2px; }
.trust-item strong { color: var(--accent); font-size: 11px; }
.trust-item span { color: #818b9b; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.hero-visual { position: relative; min-height: 480px; display: grid; place-items: center; }
.code-card { width: min(520px, 100%); background: rgba(12,17,26,.88); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; overflow: hidden; box-shadow: 0 35px 100px rgba(0,0,0,.45); transform: rotate(2deg); position: relative; z-index: 2; backdrop-filter: blur(12px); }
.code-top { height: 48px; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 17px; gap: 12px; color: #778294; font-size: 11px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #394252; }
.live-dot { margin-left: auto; color: var(--accent); }
.code-body { padding: 30px 25px; display: grid; gap: 16px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c8d0dc; }
.code-body b { color: #566173; width: 24px; display: inline-block; font-weight: 400; }
.code-body em { color: #8ea0b8; font-style: normal; }
.code-body strong { color: #c9e875; font-weight: 500; }
.code-body u { color: #d9b77d; text-decoration: none; }
.code-status { border-top: 1px solid var(--line); padding: 13px 17px; display: flex; justify-content: space-between; color: #667185; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.status { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 6px; }
.orb { position: absolute; border-radius: 50%; filter: blur(1px); }
.orb-one { width: 330px; height: 330px; background: radial-gradient(circle at 35% 35%, rgba(215,255,63,.18), transparent 67%); }
.orb-two { width: 500px; height: 500px; border: 1px solid rgba(215,255,63,.08); }
.floating-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: rgba(18,24,35,.94); border: 1px solid var(--line); padding: 12px 14px; border-radius: 14px; box-shadow: 0 15px 45px rgba(0,0,0,.35); }
.floating-card > span { color: var(--accent); font-size: 18px; }
.floating-card div { display: grid; }
.floating-card strong { font-size: 11px; }
.floating-card small { color: #788395; font-size: 9px; }
.floating-one { left: -5px; bottom: 55px; }
.floating-two { right: -5px; top: 65px; }
.scroll-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #596475; font-size: 9px; letter-spacing: .2em; }
.scroll-hint span { color: var(--accent); margin-left: 8px; }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: #0a0e15; }
.marquee-track { min-width: max-content; display: flex; gap: 28px; align-items: center; padding: 16px 0; animation: marquee 22s linear infinite; color: #8d97a6; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.marquee-track b { color: var(--accent); font-size: 13px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: 130px 0; }
.section-heading { display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: end; margin-bottom: 60px; }
.section-heading h2 { margin-top: 18px; font-size: clamp(42px, 5vw, 70px); line-height: .98; letter-spacing: -.06em; }
.section-heading > p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.services { background: #090d14; }
.services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 930px; margin: 0 auto; }
.services-grid .service-card:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center; }
.service-card { min-height: 455px; padding: 30px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; transition: border-color .3s, transform .3s; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(215,255,63,.3); }
.service-feature { background: linear-gradient(145deg, rgba(215,255,63,.09), rgba(255,255,255,.02)); }
.service-number { color: #596474; font: 11px ui-monospace, monospace; }
.service-icon { width: 50px; height: 50px; border: 1px solid rgba(215,255,63,.2); color: var(--accent); border-radius: 14px; display: grid; place-items: center; font-size: 25px; margin: 55px 0 24px; }
.service-card h3 { font-size: 25px; letter-spacing: -.04em; }
.service-card p { color: var(--muted); font-size: 13px; margin: 12px 0 22px; }
.service-card ul { list-style: none; display: grid; gap: 9px; }
.service-card li { font-size: 11px; color: #adb6c4; }
.service-card li::before { content: "✓"; color: var(--accent); margin-right: 8px; }
.service-card > a { position: absolute; left: 30px; bottom: 28px; font-size: 11px; font-weight: 800; color: #fff; }
.service-card > a span { color: var(--accent); margin-left: 7px; }

.projects { background: var(--bg); }
.project-heading { grid-template-columns: 1fr auto; }
.text-link { color: #fff; font-size: 12px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 7px; }
.text-link span { color: var(--accent); margin-left: 8px; }
.projects-list { display: grid; grid-template-columns: 1fr 1fr; gap: 55px 18px; }
.project-large { grid-column: 1 / -1; }
.project-preview { min-height: 420px; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; position: relative; padding: 16px; }
.project:not(.project-large) .project-preview { min-height: 360px; }
.preview-browser { height: 31px; background: rgba(8,11,17,.85); border-radius: 8px; display: flex; align-items: center; gap: 5px; padding: 0 11px; color: #697386; }
.preview-browser > span { width: 5px; height: 5px; border-radius: 50%; background: #465060; }
.preview-browser small { margin-left: 8px; font-size: 8px; }
.preview-content { position: absolute; left: 14%; top: 28%; display: grid; gap: 14px; }
.preview-content small { font-size: 9px; letter-spacing: .22em; font-weight: 800; color: rgba(255,255,255,.7); }
.preview-content strong { font-size: clamp(42px, 5vw, 76px); line-height: .85; letter-spacing: -.07em; }
.preview-content strong i { color: var(--accent); font-style: normal; }
.preview-content button { width: max-content; border: 0; padding: 10px 14px; border-radius: 999px; background: #fff; color: #111; font-size: 10px; font-weight: 800; }
.salon { background: radial-gradient(circle at 70% 40%, rgba(229,178,153,.18), transparent 30%), linear-gradient(120deg, #17120f, #35231d); }
.restaurant { background: radial-gradient(circle at 80% 55%, rgba(215,255,63,.13), transparent 27%), linear-gradient(120deg, #0d1616, #18302d); }
.gym { background: radial-gradient(circle at 65% 50%, rgba(101,148,255,.18), transparent 30%), linear-gradient(120deg, #0b111a, #172334); }
.project-info { display: flex; justify-content: space-between; gap: 20px; padding: 18px 4px 0; }
.project-type { color: var(--accent); text-transform: uppercase; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.project-info h3 { font-size: 21px; margin-top: 6px; }
.project-info p { color: var(--muted); font-size: 12px; margin-top: 4px; max-width: 600px; }
.project-arrow { font-size: 23px; color: #697486; }
.fiction-note { margin-top: 35px; color: #555f6e; font-size: 10px; }

.about { background: #090d14; }
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; align-items: center; }
.about-visual { position: relative; }
.portrait-card { height: 560px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, #18201e, #0d1219); overflow: hidden; position: relative; display: grid; place-items: center; }
.portrait-gradient { position: absolute; inset: 0; background: radial-gradient(circle at 55% 35%, rgba(215,255,63,.2), transparent 38%), linear-gradient(160deg, transparent 40%, rgba(215,255,63,.04)); }
.portrait-initial { font-size: 180px; font-weight: 900; letter-spacing: -.12em; color: rgba(255,255,255,.04); }
.portrait-photo { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); width: 108%; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; z-index: 1; filter: saturate(.96) contrast(1.02); }
.portrait-card > span { z-index: 3; }
.portrait-card > span { position: absolute; bottom: 25px; left: 28px; font-size: 10px; letter-spacing: .18em; color: #7f8997; }
.location-badge { position: absolute; z-index: 5; right: -20px; bottom: 25px; background: var(--accent); color: #12170b; padding: 12px 15px; border-radius: 12px; font-size: 10px; font-weight: 850; }
.location-badge span { margin-right: 5px; }
.about-copy h2 { margin: 18px 0 26px; font-size: clamp(46px, 5vw, 70px); line-height: .95; letter-spacing: -.07em; }
.about-copy p { color: var(--muted); max-width: 580px; font-size: 14px; }
.about-copy .lead { color: #e6e9ed; font-size: 19px; line-height: 1.5; margin-bottom: 18px; }
.about-stats { display: flex; gap: 45px; margin: 38px 0; padding: 22px 0; border-block: 1px solid var(--line); }
.about-stats div { display: grid; gap: 3px; }
.about-stats strong { color: var(--accent); font-size: 28px; }
.about-stats span { color: #737e8f; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }

.cta-section { padding: 0 0 130px; background: #090d14; }
.cta-box { min-height: 460px; background: linear-gradient(140deg, #171d14, #0f141a); border: 1px solid rgba(215,255,63,.14); border-radius: 30px; display: grid; place-items: center; text-align: center; padding: 70px 30px; position: relative; overflow: hidden; }
.cta-glow { position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(215,255,63,.15), transparent 68%); top: -230px; left: 50%; transform: translateX(-50%); }
.cta-box > *:not(.cta-glow) { position: relative; }
.cta-box h2 { font-size: clamp(50px, 6vw, 80px); line-height: .9; letter-spacing: -.07em; margin: 18px 0; }
.cta-box p { color: var(--muted); max-width: 470px; font-size: 14px; margin-bottom: 28px; }

.footer { background: #06080d; border-top: 1px solid var(--line); }
.footer-main { padding: 60px 0; display: flex; justify-content: space-between; gap: 60px; }
.footer-brand { margin-bottom: 10px; }
.footer-main > div:first-child p { color: #5f6979; font-size: 11px; }
.footer-links { display: flex; gap: 90px; }
.footer-links div { display: grid; gap: 9px; min-width: 100px; }
.footer-links span { color: #667182; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 5px; }
.footer-links a { color: #aeb7c4; font-size: 11px; transition: color .2s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom { padding: 16px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #515b6b; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

.contact-page { min-height: 100vh; }
.contact-hero { padding: 180px 0 85px; background: radial-gradient(circle at 75% 35%, rgba(215,255,63,.09), transparent 32%); }
.contact-hero h1 { font-size: clamp(58px, 8vw, 100px); line-height: .9; letter-spacing: -.075em; margin: 20px 0; }
.contact-hero p { color: var(--muted); max-width: 570px; font-size: 16px; }
.contact-section { padding: 20px 0 130px; }
.contact-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; align-items: start; }
.contact-info { display: grid; gap: 12px; }
.contact-card { border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 18px; padding: 22px; display: grid; gap: 6px; }
.contact-icon { color: var(--accent); font-size: 18px; margin-bottom: 10px; }
.contact-card small { color: #687386; font-size: 8px; letter-spacing: .18em; font-weight: 800; }
.contact-card a, .contact-card strong { font-size: 14px; color: #e9edf1; }
.social-links { display: grid; gap: 8px; }
.social-links a { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.social-links a:last-child { border-bottom: 0; }
.social-links a span { color: var(--accent); }
.contact-note { padding: 18px 2px; }
.contact-note strong { font-size: 13px; }
.contact-note p { color: var(--muted); font-size: 12px; margin-top: 5px; }
.contact-form { display: grid; gap: 20px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.02); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: grid; gap: 8px; color: #aab3c1; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.contact-form input, .contact-form textarea, .contact-form select { width: 100%; border: 1px solid var(--line); border-radius: 12px; outline: none; background: #0a0e15; color: #fff; padding: 13px 14px; font-size: 13px; text-transform: none; letter-spacing: 0; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: rgba(215,255,63,.55); box-shadow: 0 0 0 3px rgba(215,255,63,.06); }
.check { display: flex !important; grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; color: #707b8c !important; line-height: 1.5; }
.check input { width: auto; margin-top: 2px; accent-color: var(--accent); }
.submit-btn { width: max-content; border: 0; }
.form-disclaimer { color: #596474; font-size: 9px; line-height: 1.5; }
.form-success { display: none; color: #111; background: var(--accent); border-radius: 10px; padding: 11px 13px; font-size: 11px; font-weight: 800; }
.form-success.show { display: block; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .24s; }

@media (max-width: 900px) {
  .hero-content, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 135px; }
  .hero-visual { min-height: 410px; margin-top: 20px; }
  .section-heading { grid-template-columns: 1fr; gap: 25px; }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-card:nth-child(3) { grid-column: auto; width: 100%; }
  .service-card { min-height: 390px; }
  .about-grid { gap: 60px; }
  .portrait-card { height: 430px; }
  .contact-grid { gap: 40px; }
}
@media (max-width: 680px) {
  .container { width: min(var(--max), calc(100% - 30px)); }
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-mark img { width: 34px; height: 34px; }
  .nav-links { display: none; position: absolute; top: 78px; left: 15px; right: 15px; padding: 20px; background: #0c1119; border: 1px solid var(--line); border-radius: 16px; flex-direction: column; align-items: stretch; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 8px; }
  .menu-toggle { display: block; }
  .hero { padding-bottom: 90px; }
  .hero h1 { font-size: 58px; }
  .hero-text { font-size: 15px; }
  .hero-trust { gap: 17px; }
  .hero-visual { min-height: 350px; }
  .code-card { transform: rotate(1deg) scale(.92); }
  .floating-one { left: 0; bottom: 20px; }
  .floating-two { right: 0; top: 20px; }
  .section { padding: 90px 0; }
  .section-heading h2 { font-size: 45px; }
  .projects-list { grid-template-columns: 1fr; }
  .project-large { grid-column: auto; }
  .project-preview, .project:not(.project-large) .project-preview { min-height: 320px; }
  .preview-content strong { font-size: 50px; }
  .footer-main, .footer-bottom { flex-direction: column; }
  .footer-links { gap: 35px; }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 20px; }
  .contact-hero { padding-top: 140px; }
  .contact-hero h1 { font-size: 58px; }
}

/* --- Navegación desplegable --- */
.nav-links > .nav-dropdown { position: relative; display: flex; align-items: center; height: 78px; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 8px; height: 100%; }
.chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); color: #778294; transition: transform .2s ease, color .2s ease; }
.nav-dropdown:hover .chevron, .nav-dropdown.mobile-open .chevron { color: var(--accent); transform: translateY(1px) rotate(225deg); }
.dropdown-menu {
  position: absolute; top: calc(100% - 2px); left: 50%; transform: translate(-50%, 10px); width: 280px;
  padding: 8px; background: rgba(10,14,21,.98); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 55px rgba(0,0,0,.4); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease; backdrop-filter: blur(18px);
}
.nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu, .nav-dropdown.mobile-open .dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.dropdown-menu a { display: grid; gap: 2px; padding: 11px 12px; border-radius: 10px; color: #e8ebef; }
.dropdown-menu a:hover { background: rgba(215,255,63,.07); color: #fff; }
.dropdown-menu strong { font-size: 13px; }
.dropdown-menu small { color: #6f7a8b; font-size: 10px; }

/* El símbolo tiene más presencia en el header */
.brand-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; border-color: rgba(215,255,63,.72); box-shadow: 0 0 32px rgba(215,255,63,.12); }
.brand-mark img { width: 38px; height: 38px; }

/* Nombre sobre la foto */
.portrait-name {
  position: absolute; top: 24px; left: 26px; bottom: auto !important; z-index: 4;
  color: #fff !important; font-size: 10px !important; letter-spacing: .16em !important; font-weight: 800;
  padding: 7px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px;
  background: rgba(7,10,16,.72); backdrop-filter: blur(8px); text-shadow: 0 1px 10px rgba(0,0,0,.4);
}

/* Tarjetas de proyecto navegables */
.project-card-link { display: block; color: inherit; }
.project-card-link .project { height: 100%; }
.project-card-link:hover .project-preview { border-color: rgba(215,255,63,.3); transform: translateY(-3px); }
.project-card-link:hover .project-arrow { color: var(--accent); transform: translate(3px,-3px); }
.project-preview { transition: border-color .3s ease, transform .3s ease; }
.project-arrow { transition: color .2s ease, transform .2s ease; display: inline-block; }
.preview-button { width: max-content; border: 0; padding: 10px 14px; border-radius: 999px; background: #fff; color: #111; font-size: 10px; font-weight: 800; }

/* --- Páginas internas de servicios y proyectos --- */
.detail-page { min-height: 100vh; }
.detail-hero { padding: 175px 0 105px; background: radial-gradient(circle at 78% 35%, rgba(215,255,63,.1), transparent 34%); overflow: hidden; }
.detail-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 90px; align-items: center; }
.detail-kicker { margin-top: 28px; color: #778294; font-size: 10px; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; }
.detail-hero h1 { margin: 14px 0 25px; font-size: clamp(52px, 6.5vw, 88px); line-height: .93; letter-spacing: -.075em; }
.detail-hero h1 span, .detail-copy h2 span, .limitations h2 span, .demo-heading h1 span, .demo-copy strong { color: var(--accent); }
.detail-hero p { max-width: 620px; color: #b7c0cd; font-size: 18px; line-height: 1.75; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.detail-visual { min-height: 430px; border: 1px solid var(--line); border-radius: 30px; position: relative; overflow: hidden; background: linear-gradient(145deg, #131b1b, #0a0e14); display: grid; place-items: center; }
.detail-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 45px 45px; opacity: .45; }
.detail-visual-number { position: absolute; top: 24px; right: 28px; color: #465062; font: 12px ui-monospace, monospace; }
.detail-visual-orb { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(215,255,63,.15), transparent 66%); }
.detail-visual-card { position: relative; z-index: 2; width: min(360px, 80%); padding: 28px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(9,13,20,.78); box-shadow: 0 30px 80px rgba(0,0,0,.35); display: grid; gap: 12px; }
.detail-visual-card span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.detail-visual-card strong { font-size: 31px; letter-spacing: -.05em; }
.detail-visual-card small { color: #7d8797; font-size: 11px; line-height: 1.6; }
.detail-content { background: #090d14; }
.detail-columns { display: grid; grid-template-columns: 1.1fr .65fr; gap: 90px; align-items: start; }
.detail-copy h2, .limitations h2 { margin: 18px 0 22px; font-size: clamp(42px, 5vw, 65px); line-height: .98; letter-spacing: -.065em; }
.detail-copy > p { color: #b7c0cd; max-width: 700px; font-size: 16px; line-height: 1.85; }
.detail-list { list-style: none; display: grid; gap: 13px; margin-top: 30px; }
.detail-list li { color: #d0d6df; font-size: 14px; padding-left: 22px; position: relative; }
.detail-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 900; }
.price-card, .demo-note { padding: 30px; border: 1px solid rgba(215,255,63,.16); border-radius: 22px; background: linear-gradient(145deg, rgba(215,255,63,.07), rgba(255,255,255,.02)); position: sticky; top: 110px; }
.price { font-size: clamp(42px, 5vw, 60px); font-weight: 850; letter-spacing: -.07em; margin: 15px 0 8px; }
.price-card p, .demo-note p { color: #b7c0cd; font-size: 14px; line-height: 1.7; margin-bottom: 22px; }
.limitations { background: var(--bg); }
.limitations-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.limitations-card { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.025); }
.limitations-card h3 { font-size: 18px; margin-bottom: 18px; }
.limitations-card ul, .demo-note ul { list-style: none; display: grid; gap: 13px; }
.limitations-card li, .demo-note li { color: #aeb7c4; font-size: 14px; padding-left: 20px; position: relative; }
.limitations-card li::before, .demo-note li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.detail-cta { padding: 0 0 130px; background: var(--bg); }
.detail-cta .cta-box { min-height: 390px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }

/* --- Demos de proyectos --- */
.demo-hero { padding: 140px 0 90px; background: radial-gradient(circle at 75% 35%, rgba(215,255,63,.08), transparent 35%); }
.back-link { color: #7d8797; font-size: 11px; }
.back-link:hover { color: var(--accent); }
.demo-heading { max-width: 780px; margin: 55px 0 50px; }
.demo-heading h1 { margin: 16px 0 20px; font-size: clamp(55px, 7vw, 95px); line-height: .9; letter-spacing: -.08em; }
.demo-heading p { color: #b7c0cd; max-width: 680px; font-size: 17px; line-height: 1.8; }
.demo-window { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.35); }
.demo-browser { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 16px; background: #0d121a; border-bottom: 1px solid var(--line); }
.demo-browser > span { width: 7px; height: 7px; border-radius: 50%; background: #4b5565; }
.demo-browser small { margin-left: 8px; color: #657083; font-size: 9px; }
.demo-browser i { margin-left: auto; color: #657083; font-style: normal; }
.demo-screen { min-height: 560px; position: relative; overflow: hidden; display: grid; align-items: center; padding: 70px 8%; }
.demo-screen::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 58px 58px; }
.demo-screen .demo-copy { position: relative; z-index: 2; max-width: 560px; display: grid; gap: 18px; }
.demo-copy small { font-size: 11px; letter-spacing: .2em; font-weight: 800; color: rgba(255,255,255,.65); }
.demo-copy strong { font-size: clamp(50px, 7vw, 90px); line-height: .88; letter-spacing: -.08em; }
.demo-copy p { max-width: 500px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.7; }
.demo-shape { position: absolute; width: 520px; height: 520px; right: -80px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(215,255,63,.16), transparent 65%); border: 1px solid rgba(215,255,63,.09); }
.demo-window.studio-hair .demo-screen { background: linear-gradient(120deg, #17120f, #35231d); }
.demo-window.mare-cucina .demo-screen { background: linear-gradient(120deg, #0d1616, #18302d); }
.demo-window.northfit .demo-screen { background: linear-gradient(120deg, #0b111a, #172334); }
.demo-details { background: #090d14; }
.demo-note h3 { font-size: 22px; margin: 12px 0 8px; }
.demo-note ul { margin: 20px 0 26px; }

@media (max-width: 900px) {
  .detail-hero-grid, .detail-columns, .limitations-grid { grid-template-columns: 1fr; }
  .detail-hero-grid { gap: 55px; }
  .detail-columns { gap: 50px; }
  .price-card, .demo-note { position: static; }
  .detail-visual { min-height: 360px; }
  .demo-screen { min-height: 470px; }
}

@media (max-width: 680px) {
  .nav-links > .nav-dropdown { height: auto; display: block; }
  .nav-dropdown-trigger { height: auto; justify-content: space-between; }
  .dropdown-menu { position: static; width: 100%; transform: none; margin-top: 6px; display: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; background: rgba(255,255,255,.025); }
  .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-dropdown:not(.mobile-open) .dropdown-menu { display: none; }
  .nav-dropdown.mobile-open .dropdown-menu { display: grid; }
  .portrait-name { top: 18px; left: 18px; font-size: 8px !important; }
  .detail-hero { padding-top: 135px; }
  .detail-hero h1 { font-size: 52px; }
  .detail-visual { min-height: 330px; }
  .demo-hero { padding-top: 125px; }
  .demo-heading { margin-top: 40px; }
  .demo-heading h1 { font-size: 55px; }
  .demo-screen { min-height: 420px; padding: 45px 8%; }
  .demo-shape { width: 340px; height: 340px; right: -150px; }
  .demo-copy strong { font-size: 52px; }
}
.dropdown-menu .dropdown-all { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 12px; }
.dropdown-menu .dropdown-all strong { color: var(--accent); }


/* --- Demos reales / vistas rápidas de proyectos --- */
.demo-site { background:#f4f0e9; color:#171514; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.demo-site-banner { position:fixed; z-index:200; top:0; left:0; right:0; height:30px; display:flex; align-items:center; justify-content:center; gap:18px; background:#0a0d12; color:#9da6b5; font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.demo-site-banner a { color:var(--accent); letter-spacing:0; text-transform:none; }
.demo-site-nav { position:fixed; z-index:150; top:30px; left:0; right:0; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1180px)/2)); background:rgba(244,240,233,.88); border-bottom:1px solid rgba(23,21,20,.09); backdrop-filter:blur(18px); }
.demo-site-nav nav { display:flex; gap:28px; font-size:12px; font-weight:650; }
.demo-site-nav nav a:hover { opacity:.55; }
.demo-logo { display:inline-flex; align-items:center; gap:9px; font-size:17px; letter-spacing:-.04em; }
.demo-logo .brand-mark { width:32px; height:32px; flex-basis:32px; border-color:rgba(23,21,20,.22); background:#171514; box-shadow:none; }
.demo-logo .brand-mark img { width:27px; height:27px; }
.demo-nav-btn { padding:10px 16px; border-radius:999px; background:#171514; color:#fff; font-size:11px; font-weight:800; }
.demo-site main { padding-top:106px; }
.demo-site-hero { min-height:720px; padding:110px max(24px,calc((100vw - 1180px)/2)) 90px; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; }
.demo-kicker { display:block; font-size:10px; font-weight:850; letter-spacing:.18em; text-transform:uppercase; opacity:.62; }
.demo-site-hero h1,.demo-site-section h2,.demo-booking h2 { margin:18px 0; font-size:clamp(58px,7vw,102px); line-height:.86; letter-spacing:-.075em; }
.demo-site em { font-style:normal; }
.demo-site-hero p,.demo-site-section p,.demo-booking p { max-width:560px; color:rgba(23,21,20,.66); font-size:16px; line-height:1.75; }
.demo-actions { display:flex; align-items:center; gap:20px; margin-top:30px; }
.demo-btn { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:13px 20px; font-size:12px; font-weight:850; cursor:pointer; }
.demo-btn.light,.demo-btn.dark { background:#171514; color:#fff; }
.demo-btn.lime { background:var(--accent); color:#11150b; width:100%; }
.demo-text-link { font-size:12px; font-weight:800; border-bottom:1px solid rgba(23,21,20,.35); padding-bottom:4px; }
.demo-orbit,.demo-dish { width:min(430px,100%); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; justify-self:end; position:relative; overflow:hidden; }
.studio-demo .demo-orbit { background:radial-gradient(circle at 45% 35%,#d8aa91,#6e4337 45%,#241714); box-shadow:0 40px 100px rgba(71,39,30,.2); }
.demo-orbit:after { content:""; position:absolute; inset:28px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.demo-orbit-inner { width:170px; height:170px; border:1px solid rgba(255,255,255,.55); border-radius:50%; display:grid; place-items:center; text-align:center; color:#fff; font-weight:900; letter-spacing:.18em; font-size:14px; z-index:2; }
.mare-demo { background:#eef1e9; }
.mare-demo .demo-site-nav { background:rgba(238,241,233,.88); }
.mare-demo .demo-dish { background:radial-gradient(circle at 42% 38%,#f1d8a5,#5d7b67 50%,#1d302b); box-shadow:0 40px 100px rgba(38,66,54,.2); color:#fff; font-size:24px; letter-spacing:.16em; flex-direction:column; }
.mare-demo .demo-dish span { font-size:12px; }
.north-demo { background:#edf0f4; }
.north-demo .demo-site-nav { background:rgba(237,240,244,.9); }
.north-demo .demo-site-hero { background:linear-gradient(135deg,#edf0f4,#dbe3ef); }
.fitness-stats { justify-self:end; width:min(430px,100%); display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fitness-stats div { min-height:180px; padding:24px; border-radius:24px; background:#101722; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.fitness-stats strong { font-size:56px; letter-spacing:-.08em; }
.fitness-stats span { color:#aab5c4; font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.demo-site-section { padding:125px max(24px,calc((100vw - 1180px)/2)); }
.demo-section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:55px; }
.demo-section-head h2 { margin-bottom:0; }
.demo-cards,.class-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.demo-cards article,.class-grid article { padding:30px; min-height:230px; border:1px solid rgba(23,21,20,.1); border-radius:22px; background:rgba(255,255,255,.35); display:flex; flex-direction:column; }
.demo-cards article>span,.class-grid article>span { font-size:10px; opacity:.5; letter-spacing:.16em; }
.demo-cards h3,.class-grid h3 { margin-top:auto; font-size:28px; letter-spacing:-.05em; }
.demo-cards p,.class-grid p { margin:8px 0 16px; font-size:13px; }
.demo-cards strong { font-size:12px; }
.split-demo { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; background:#e9e3d9; }
.demo-image-card,.restaurant-photo { min-height:480px; border-radius:28px; overflow:hidden; background:radial-gradient(circle at 60% 35%,#e2b8a1,#6c4036 45%,#231714); display:flex; flex-direction:column; justify-content:space-between; padding:28px; color:#fff; }
.demo-image-card b { font-size:58px; line-height:.85; letter-spacing:-.07em; }
.restaurant-photo { background:linear-gradient(145deg,#17332f,#56755f 55%,#bca16e); }
.demo-booking { padding:125px max(24px,calc((100vw - 1180px)/2)); display:grid; grid-template-columns:1fr .85fr; gap:100px; background:#171514; color:#fff; }
.demo-booking p { color:rgba(255,255,255,.62); }
.demo-booking .demo-kicker { color:var(--accent); opacity:1; }
.demo-booking em { color:var(--accent); }
.booking-card,.pricing-demo { padding:28px; border:1px solid rgba(255,255,255,.12); border-radius:24px; background:#20201e; display:grid; gap:14px; align-content:start; }
.booking-card label { color:#7f8793; font-size:10px; text-transform:uppercase; letter-spacing:.15em; }
.booking-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.booking-options button { padding:12px 6px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#151614; color:#fff; font-size:11px; }
.booking-options button:hover { border-color:var(--accent); }
.progress-section { display:grid; grid-template-columns:1fr .9fr; gap:100px; align-items:center; background:#dfe5ee; }
.progress-card { padding:34px; border-radius:26px; background:#101722; color:#fff; display:grid; gap:8px; }
.progress-card>span { color:#9ba9ba; font-size:10px; letter-spacing:.15em; }
.progress-card strong { font-size:90px; line-height:.8; letter-spacing:-.08em; }
.progress-card small { color:#aab5c4; }
.progress-bar { height:8px; margin-top:20px; background:#2c3747; border-radius:999px; overflow:hidden; }
.progress-bar i { display:block; width:80%; height:100%; background:var(--accent); }
.progress-row { display:flex; justify-content:space-between; color:#aab5c4; font-size:10px; margin-top:4px; }
.pricing-demo { background:#20242a; grid-template-columns:1fr 1fr; border:0; }
.pricing-demo article { padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:18px; display:grid; gap:7px; }
.pricing-demo article.featured { border-color:rgba(215,255,63,.45); }
.pricing-demo span { color:#9ca6b4; font-size:9px; letter-spacing:.16em; }
.pricing-demo strong { font-size:48px; letter-spacing:-.07em; }
.pricing-demo small { color:#8993a1; }
.pricing-demo p { color:#aab5c4; font-size:11px; margin-bottom:10px; }
.menu-list { display:grid; border-top:1px solid rgba(23,21,20,.13); }
.menu-list article { display:flex; justify-content:space-between; gap:30px; padding:25px 0; border-bottom:1px solid rgba(23,21,20,.13); }
.menu-list article>div>span { font-size:9px; text-transform:uppercase; letter-spacing:.16em; opacity:.5; }
.menu-list h3 { margin-top:5px; font-size:25px; letter-spacing:-.04em; }
.menu-list p { margin-top:4px; font-size:12px; }
.menu-list>article>strong { font-size:20px; }
.demo-site-footer { padding:40px max(24px,calc((100vw - 1180px)/2)); display:flex; justify-content:space-between; gap:30px; background:#0a0d12; color:#fff; }
.demo-site-footer div { display:grid; gap:5px; }
.demo-site-footer strong { font-size:16px; }
.demo-site-footer span { color:#737d8b; font-size:10px; }
.demo-site-footer a { color:var(--accent); font-size:11px; }
@media(max-width:850px){.demo-site-nav nav{display:none}.demo-site-hero,.split-demo,.demo-booking,.progress-section{grid-template-columns:1fr;gap:50px}.demo-orbit,.demo-dish,.fitness-stats{justify-self:start}.demo-cards,.class-grid{grid-template-columns:1fr}.demo-section-head{display:block}.demo-section-head h2{margin-top:16px}.pricing-demo{grid-template-columns:1fr}.demo-site-hero h1,.demo-site-section h2,.demo-booking h2{font-size:58px}}
@media(max-width:560px){.demo-site-banner{font-size:7px;gap:8px}.demo-site-nav{padding-inline:15px}.demo-nav-btn{padding:9px 12px}.demo-site main{padding-top:106px}.demo-site-hero,.demo-site-section,.demo-booking{padding-left:18px;padding-right:18px}.demo-site-hero{min-height:650px}.demo-site-hero h1,.demo-site-section h2,.demo-booking h2{font-size:52px}.demo-actions{align-items:flex-start;flex-direction:column}.fitness-stats{grid-template-columns:1fr}}

/* ===== Ajustes v6 ===== */
/* Servicios en una sola línea en escritorio */
.services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.services-grid .service-card:nth-child(3) { grid-column: auto; width: auto; }

/* Proyectos en pirámide invertida: 2 arriba + 1 centrado abajo */
.projects-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.project-large { grid-column: auto; }
.projects-list .project-card-link:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center; }

/* Sobre mí: habilidades en lugar del CTA intermedio */
.about-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 12px; max-width: 620px; }
.about-skills span { border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #c3cbd6; border-radius: 999px; padding: 9px 12px; font-size: 10px; letter-spacing: .03em; }
.about-skills span::before { content: '•'; color: var(--accent); margin-right: 6px; }

/* Formulario: asteriscos y textarea fijo */
.contact-form label { position: relative; }
.contact-form label > .required { color: #ff5b6e; font-size: 11px; font-weight: 900; margin-left: 3px; }
.contact-form textarea { resize: none; min-height: 165px; max-height: 165px; }
.form-disclaimer { margin-top: -4px; }
.form-disclaimer .required { color: #ff5b6e; font-weight: 900; }

/* Notificaciones bonitas centradas, sustituyen alert() */
.toast-notification { position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%, -44%); width: min(440px, calc(100% - 36px)); padding: 20px 22px; border: 1px solid rgba(215,255,63,.28); border-radius: 18px; background: rgba(12,17,24,.97); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); color: #edf1f5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; backdrop-filter: blur(18px); }
.toast-notification.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%); pointer-events: auto; }
.toast-notification::before { content: 'OROSTACK'; display: block; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .18em; margin-bottom: 8px; }
.toast-notification p { margin: 0; color: #b9c2ce; font-size: 12px; line-height: 1.55; }
.toast-notification button { margin-top: 15px; border: 1px solid rgba(215,255,63,.35); background: var(--accent); color: #11170b; border-radius: 999px; padding: 9px 15px; font-size: 10px; font-weight: 900; cursor: pointer; }
.toast-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(2,5,9,.42); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.toast-backdrop.show { opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
  .services-grid .service-card:nth-child(3) { width: 100%; }
  .projects-list { grid-template-columns: 1fr; }
  .projects-list .project-card-link:nth-child(3) { grid-column: auto; width: 100%; justify-self: auto; }
}
.check .required { color: #ff5b6e; font-weight: 900; }


/* ===== Ajustes v7 ===== */
/* Los tres proyectos mantienen exactamente la misma altura visual. */
.projects-list .project-card-link { min-width: 0; }
.projects-list .project { display: flex; flex-direction: column; height: 100%; }
.projects-list .project-preview,
.projects-list .project:not(.project-large) .project-preview { min-height: 360px; height: 360px; }
.projects-list .project-info { min-height: 88px; align-items: flex-start; }
.projects-list .project-info > div { min-width: 0; }
.projects-list .project-info h3 { line-height: 1.05; }
.projects-list .project-info p { min-height: 32px; }

/* Foto Sobre mí: más presente que en v7, sin volver al tamaño máximo de v3. */
.portrait-photo { width: 98%; max-height: 96%; bottom: -12px; }

/* Ayuda visual del teléfono. */
.field-help { color: #596474; font-size: 9px; line-height: 1.4; letter-spacing: .02em; text-transform: none; font-weight: 400; }
.contact-form input:invalid:not(:placeholder-shown),
.contact-form select:invalid:not(:focus),
.contact-form textarea:invalid:not(:placeholder-shown) { border-color: rgba(255,91,110,.35); }
.submit-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* Notificación central sin los cuadros nativos del navegador. */
.toast-title { display: block; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .18em; margin-bottom: 8px; }
.toast-notification::before { display: none; }

@media (max-width: 680px) {
  .projects-list .project-info { min-height: auto; }
  .projects-list .project-info p { min-height: auto; }
}


/* ===== Ajustes móviles finales ===== */
@media (max-width: 680px) {
  /* Servicios: el CTA deja de estar superpuesto al contenido. */
  .service-card {
    min-height: 0;
    padding-bottom: 30px;
  }
  .service-card > a {
    position: static;
    display: inline-block;
    margin-top: 24px;
  }

  /* Footer más compacto en pantallas pequeñas, sin alterar escritorio. */
  .footer-main {
    padding: 30px 0 24px;
    gap: 24px;
  }
  .footer-links {
    gap: 24px;
  }
  .footer-bottom {
    padding: 11px 0;
    gap: 4px;
  }
}