/* Reset y tipografías */
* { box-sizing: border-box; }
html,body{ margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#073642; }
img{ max-width:100%; display:block; }
.container{ max-width:1100px; margin:0 auto; padding:1rem; }

/* Header */
.site-header{ background:linear-gradient(90deg,#ffffffcc,#f0fbff); position:sticky; top:0; z-index:50; border-bottom:1px solid #e6f3f9; }
.site-header .container{ display:flex; align-items:center; gap:1rem; }
.logo{ font-weight:700; color:#0b6b60; text-decoration:none; font-size:1.25rem; }
.logo span{ color:#ff6b81; }
.nav{ margin-left:auto; display:flex; gap:1rem; }
.nav a{ text-decoration:none; color:#084b44; padding:0.5rem; border-radius:6px; }
.nav a:hover{ background:#eaf8f6; }
.nav-toggle{ display:none; background:none; border:0; font-size:1.25rem; margin-left:auto; }

/* Hero */
.hero{ padding:4rem 0; background:linear-gradient(135deg,#fef3f8,#effcff); }
.hero-grid{ display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:center; }
.hero h1{ font-size:2rem; margin:0 0 .5rem; color:#063b36; }
.lead{ color:#2b5a59; margin-top:0.25rem; }
.cta-group{ margin-top:1rem; }
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:8px; text-decoration:none; }
.btn.primary{ background:#0b6b60; color:#fff; }
.btn.ghost{ background:transparent; border:1px solid #0b6b60; color:#0b6b60; }

/* Sections */
.section{ padding:3rem 0; }
.section.alt{ background:#ffffff; }
.cards{ display:flex; gap:1rem; margin-top:1rem; }
.card{ background:#fff; border-radius:12px; padding:1rem; box-shadow:0 6px 18px rgba(6,86,84,0.06); flex:1; }
.card h3{ margin:0 0 .5rem; }

/* Portfolio */
.portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.portfolio-item{ background:#fbffff; border-radius:10px; overflow:hidden; }
.portfolio-item img{ width:100%; height:140px; object-fit:cover; }
.portfolio-item figcaption{ padding:.75rem; font-size:.95rem; display:flex; align-items:center; gap:.6rem; }
.portfolio-item .tech-icon{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; }
.portfolio-item .caption-text{ display:inline-block; }

/* Form */
.contact-form{ margin-top:1rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.form-grid label{ display:block; font-size:.9rem; }
.form-grid input, .form-grid textarea{ width:100%; padding:.6rem; border:1px solid #dfeff0; border-radius:8px; background:#fff; }
.form-grid .full{ grid-column:1 / -1; }
.form-actions{ margin-top:1rem; display:flex; gap:1rem; align-items:center; }
.form-status{ color:#0b6b60; font-weight:600; }

/* Footer */
.site-footer{ border-top:1px solid #e6f3f9; padding:1.25rem 0; background:#fff; }
.site-footer p{ margin:0; }
.footer-nav a{ text-decoration:none; color:#084b44; margin-left:1rem; }

/* Responsive */
@media (max-width:880px){
  .hero-grid{ grid-template-columns:1fr; }
  .nav{ display:none; }
  .nav-toggle{ display:block; }
  .cards{ flex-direction:column; }
  .form-grid{ grid-template-columns:1fr; }
}

/* Small touches */
.card, .btn, .logo{ transition:all .18s ease; }
.btn:hover{ transform:translateY(-2px); }